import type { Meta, StoryObj } from '@storybook/react';
import { TimePicker } from './time-picker.js';
/**
 * The `TimePicker` component provides an input field for selecting times.
 * It supports multiple configuration properties like:
 * - label
 * - description
 * - timeFormat
 * - timeIntervals
 * - timeZone
 * - showTimezoneSelect
 *
 * Features include:
 * - Customizable time format (12/24 hour)
 * - Configurable time intervals
 * - Timezone selection support
 * - Custom placeholder support
 *
 * ## Time Picker Customization
 * The time picker can be customized using the `className` prop which accepts a string of Tailwind classes.
 * Each class should follow the format `[&_.time-picker\\_\\_{element}]:{tailwind-classes}`.
 *
 * Base classes available for customization:
 * - .base-picker__input: Input field container
 * - .base-picker__popover: Popover container
 * - .time-picker__content: Main container for the time picker
 * - .time-picker__period: AM/PM selector section
 * - .time-picker__selector: Time selection area (hours/minutes)
 * - .time-picker__buttons: Container for action buttons (Cancel/OK)
 * - .time-picker__select: Individual time selection buttons
 * - .time-picker__hour: Hour display in 24-hour format
 * - .time-picker__minute: Minute display
 * - .time-picker__separator: Colon separator between hours and minutes
 * - .time-picker__am-pm: AM/PM button in 12-hour format
 *
 * # Example Usage
 * When using Tailwind CSS with custom class names, use `String.raw` to properly escape class names:
 *
 * ```tsx
 * <TimePicker
 *   name="custom-time"
 *   label="Select Time"
 *   className={String.raw`
 *     [&_.time-picker\\_\\_content]:bg-blue-100
 *     [&_.time-picker\\_\\_selector]:[&>div]:bg-green-100
 *     [&_.time-picker\\_\\_period]:[&>button]:text-red-500
 *     [&_.time-picker\\_\\_buttons]:[&>button]:bg-gray-800
 *   `}
 * />
 * ```
 *
 * > **Note:** This component does not have built-in validation. If you need built-in validation
 * > you can use the [Time Picker](?path=/docs/scalars-timepickerfield--readme)
 * > component.
 */
declare const meta: Meta<typeof TimePicker>;
export default meta;
type Story = StoryObj<typeof TimePicker>;
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=time-picker.stories.d.ts.map