import type { Meta, StoryObj } from '@storybook/react';
import { DatePicker } from './date-picker.js';
/**
 * The `DatePicker` component provides an input field for selecting dates.
 * It supports multiple configuration properties like:
 * - label
 * - description
 * - minDate
 * - maxDate
 * - dateFormat
 * - weekStart
 * - autoClose
 *
 * Features include:
 * - Customizable date format
 * - Min/Max date restrictions
 * - Past/Future date restrictions
 * - Configurable week start day
 * - Auto-close functionality
 * - Custom placeholder support
 *
 * ## Calendar Customization
 * The calendar can be customized using the `className` prop which accepts a string of Tailwind classes.
 * Each class should follow the format `[&_.date-picker\\_\\_{element}]:{tailwind-classes}`.
 *
 * Base classes available for customization:
 * - .base-picker__input: Input field container
 * - .base-picker__popover: Popover container
 * - .date-picker__calendar: Calendar container
 * - .date-picker__button-next: Next month button
 * - .date-picker__button-previous: Previous month button
 * - .date-picker__selected: Selected dates
 * - .date-picker__today: Today's date
 * - .date-picker__weekday: Weekday headers
 * - .date-picker__day-button: Day buttons
 * - .date-picker__day: Day cells
 * - .date-picker__outside: Days outside current month
 * - .date-picker__month-caption: Month/year caption
 * - .date-picker__months: Months container
 * - .date-picker__month: Month container
 * - .date-picker__week: Week container
 * - .date-picker__range-start: Range start date
 * - .date-picker__range-end: Range end date
 * - .date-picker__range-middle: Dates in range
 * - .date-picker__nav: Navigation container
 * - .date-picker__month-grid: Month grid
 * - .date-picker__caption: Caption container
 * - .date-picker__caption-label: Caption label
 * - .date-picker__weekdays: Weekdays container
 * - .date-picker__hidden: Hidden elements
 * - .date-picker__year-grid--view: Year grid view
 * - .date-picker__month-grid--view: Month grid view
 * - .date-picker__date-footer: This is class for button footer in month and year view

**
 * # Example Usage
 *
 * When using Tailwind CSS with custom class names, we need to use `String.raw` because Tailwind
 * interprets underscores (`_`) as class separators. Without `String.raw`, the escape characters don't work
 * properly and you would need to use four backslashes (`\\\\`) to make it work. Using `String.raw` ensures
 * that the class names with underscores are properly escaped and interpreted by Tailwind.
 *
 * Here's an example of how to use the DatePicker component with custom class for styling:
 *
 * ```tsx
 * import { DatePicker } from './date-picker'
 *
 * function MyCustomDatePicker() {
 *   return (
 *     <DatePicker
 *       name="custom-date"
 *       label="Select Date"
 *       placeholder="YYYY/MM/DD"
 *       className={String.raw`
 *         [&_.date-picker\\_\\_button-next]:bg-blue-500
 *         [&_.date-picker\\_\\_button-next]:text-white
 *         [&_.date-picker\\_\\_button-next]:rounded-full
 *         [&_.date-picker\\_\\_selected]:!bg-blue-500
 *         [&_.date-picker\\_\\_selected]:!text-white
 *         [&_.date-picker\\_\\_today]:border-2
 *         [&_.date-picker\\_\\_today]:border-blue-500
 *         [&_.date-picker\\_\\_weekday]:text-blue-500
 *         [&_.date-picker\\_\\_day-button]:hover:bg-blue-100
 *       `}
 *     />
 *   )
 * }
 * ```
 *
 * > **Note:** This component does not have built-in validation. If you need built-in validation
 * > you can use the [Date Picker Field](?path=/docs/scalars-date-picker-field--readme)
 * > component.
 */
declare const meta: Meta<typeof DatePicker>;
export default meta;
type Story = StoryObj<typeof DatePicker>;
export declare const Default: Story;
export declare const Disabled: Story;
export declare const Filled: Story;
export declare const WithCustomizedCalendar: Story;
export declare const WithDifferencesAddition: Story;
export declare const WithDifferencesRemoval: Story;
export declare const WithDifferencesMixed: Story;
//# sourceMappingURL=date-picker.stories.d.ts.map