@konstructio/ui 0.1.2-alpha.12 → 0.1.2-alpha.120

package/dist/lib/components/DateRangePicker/components/DateTimeInputs/components/StartInputFields/StartInputFields.types.d.ts

@@ -0,0 +1,28 @@
+import { ChangeEvent, FocusEvent, InputHTMLAttributes } from 'react';
+export type Props = {
+    /** Browser autofill for the start date field (default: 'off') */
+    autoComplete?: InputHTMLAttributes<HTMLInputElement>['autoComplete'];
+    dateValue: string;
+    timeValue?: Date;
+    error?: string;
+    disabled?: boolean;
+    showTime?: boolean;
+    timeFormat?: '12' | '24';
+    labelDate?: string;
+    labelTime?: string;
+    /** Shows the required mark beside the date label */
+    required?: boolean;
+    ariaLabelDate?: string;
+    ariaLabelTime?: string;
+    onDateChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    onDateFocus: () => void;
+    onDateBlur: (e: FocusEvent<HTMLInputElement>) => void;
+    onTimeChange: (time: Date) => void;
+    classNames?: {
+        group?: string;
+        dateWrapper?: string;
+        timeWrapper?: string;
+        label?: string;
+        input?: string;
+    };
+};

package/dist/lib/components/DateRangePicker/components/DateTimeInputs/components/index.d.ts

@@ -0,0 +1,2 @@
+export { EndInputFields } from './EndInputFields/EndInputFields';
+export { StartInputFields } from './StartInputFields/StartInputFields';

package/dist/lib/components/DateRangePicker/components/DateTimeInputs/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useDateTimeInputs } from './useDateTimeInputs';

package/dist/lib/components/DateRangePicker/components/DateTimeInputs/hooks/useDateTimeInputs.d.ts

@@ -0,0 +1,27 @@
+import { ChangeEvent, FocusEvent } from 'react';
+type UseDateTimeInputsProps = {
+    errorInvalidDate: string;
+    errorDateNotAvailable: string;
+};
+export declare const useDateTimeInputs: ({ errorInvalidDate, errorDateNotAvailable, }: UseDateTimeInputsProps) => {
+    timeFormat: "24" | "12";
+    showTime: boolean;
+    name: string | undefined;
+    disabled: boolean;
+    time: import('../../../contexts').TimeRange;
+    startDateValue: string;
+    startDateError: string | undefined;
+    handleStartDateFocus: () => void;
+    handleStartDateChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    handleStartDateBlur: (e: FocusEvent<HTMLInputElement>) => void;
+    handleStartTimeChange: (newTime: Date) => void;
+    endDateValue: string;
+    endDateError: string | undefined;
+    handleEndDateFocus: () => void;
+    handleEndDateChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    handleEndDateBlur: (e: FocusEvent<HTMLInputElement>) => void;
+    handleEndTimeChange: (newTime: Date) => void;
+    startHiddenValue: string;
+    endHiddenValue: string;
+};
+export {};

package/dist/lib/components/DateRangePicker/components/PresetPanel/PresetPanel.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { PresetPanelProps } from './PresetPanel.types';
+export declare const PresetPanel: FC<PresetPanelProps>;

package/dist/lib/components/DateRangePicker/components/PresetPanel/PresetPanel.types.d.ts

@@ -0,0 +1,35 @@
+export type PresetLabels = {
+    /** Label for 'Today' preset (default: 'Today') */
+    today?: string;
+    /** Label for 'Current month' preset (default: 'Current month') */
+    currentMonth?: string;
+    /** Label for 'Custom' preset (default: 'Custom') */
+    custom?: string;
+    /** Label for 'Last 7 days' preset (default: 'Last 7 days') */
+    last7Days?: string;
+    /** Label for 'Last 2 weeks' preset (default: 'Last 2 weeks') */
+    last2Weeks?: string;
+};
+export type PresetPanelClassNames = {
+    /** Root container of the preset panel */
+    root?: string;
+    /** Title text */
+    title?: string;
+    /** RadioGroup wrapper */
+    radioGroup?: string;
+    /** Each option row */
+    option?: string;
+    /** Rule drawn above a trailing manual-selection option ('Custom range') */
+    separator?: string;
+};
+export type PresetPanelProps = {
+    className?: string;
+    /** Title for the preset panel (default: 'Time period') */
+    labelTimePeriod?: string;
+    /** Aria label for the preset panel (default: 'Time period options') */
+    ariaLabelTimePeriod?: string;
+    /** Custom labels for preset options */
+    presetLabels?: PresetLabels;
+    /** Custom class names for styling */
+    classNames?: PresetPanelClassNames;
+};

package/dist/lib/components/DateRangePicker/components/PresetPanel/PresetPanel.variants.d.ts

@@ -0,0 +1,39 @@
+/**
+ * The column runs flush to the picker's edge and is set apart by a hairline, not
+ * by a fill — it shares the surface behind it. Its own padding stands in for the
+ * padding the picker no longer applies.
+ */
+export declare const presetPanelVariants: (props?: ({
+    divided?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * The title sits on the same left edge as the option labels below it, so its
+ * inset has to match the padding an option row applies on top of the panel's.
+ */
+export declare const presetTitleVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/**
+ * A row reads as a list item rather than a radio: the control itself is hidden
+ * and selection shows as a trailing check, so the whole row is the hit target
+ * and carries the hover fill.
+ *
+ * `[&>div]:flex-1` grows the wrapper Radio puts around its label, which is what
+ * lets the trailing icon sit against the right edge.
+ */
+export declare const presetOptionVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+    active?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const presetChevronVariants: (props?: ({
+    expanded?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/** Lays the label out as text on the left and its trailing icon on the right. */
+export declare const presetOptionLabelVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/**
+ * The rule above a trailing manual-selection entry ('Custom range').
+ *
+ * It is drawn as a pseudo-element rather than a border so it can run full-bleed
+ * across the panel — the insets cancel the panel's `px-2.5` — while the row's own
+ * hover fill stays inset. It sits in the row's top margin so the fill never
+ * touches it. Keep the two in step.
+ */
+export declare const presetSeparatorVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/lib/components/DateRangePicker/components/RightPanel/RightPanel.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { Props } from './RightPanel.types';
+/**
+ * Wraps the inputs + calendar so `revealCalendarOnCustom` can hide them from
+ * inside the provider: whether the active preset is the manual-selection entry
+ * is only knowable from context.
+ */
+export declare const RightPanel: FC<Props>;

package/dist/lib/components/DateRangePicker/components/RightPanel/RightPanel.types.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from 'react';
+export type Props = PropsWithChildren & {
+    className?: string;
+};

package/dist/lib/components/DateRangePicker/components/index.d.ts

@@ -0,0 +1,4 @@
+export { PresetPanel } from './PresetPanel/PresetPanel';
+export { DateTimeInputs } from './DateTimeInputs/DateTimeInputs';
+export { CalendarPanel } from './CalendarPanel/CalendarPanel';
+export { RightPanel } from './RightPanel/RightPanel';

package/dist/lib/components/DateRangePicker/constants/index.d.ts

@@ -0,0 +1,2 @@
+export * from './presets/presets';
+export * from './presets/presets.types';

package/dist/lib/components/DateRangePicker/constants/presets/presets.d.ts

@@ -0,0 +1,10 @@
+import { DateRangePresetOption } from '../../contexts';
+/**
+ * The options offered when `presets` is not supplied. Each one owns the window it
+ * stands for, so the panel and the resolution cannot drift apart.
+ *
+ * These are day-granular: `last-7-days` is seven whole days ending today, not the
+ * past 7×24 hours. A consumer that needs rolling hour-precision windows supplies
+ * its own `presets`.
+ */
+export declare const PRESET_OPTIONS: DateRangePresetOption[];

package/dist/lib/components/DateRangePicker/constants/presets/presets.types.d.ts

@@ -0,0 +1,6 @@
+import { DateRangePreset } from '../../contexts';
+/** @deprecated Use `DateRangePresetOption`, which also carries the option's `resolve`. */
+export type PresetOption = {
+    value: DateRangePreset;
+    label: string;
+};

package/dist/lib/components/DateRangePicker/contexts/date-range-picker/date-range-picker.context.d.ts

@@ -0,0 +1,110 @@
+/**
+ * Id of a preset. The five built-ins are listed for autocompletion; any string is
+ * accepted so consumers can supply their own options through the `presets` prop.
+ */
+export type DateRangePreset = 'today' | 'current-month' | 'custom' | 'last-7-days' | 'last-2-weeks' | (string & NonNullable<unknown>);
+export type DateRange = {
+    from?: Date;
+    to?: Date;
+};
+/**
+ * A selectable entry in the preset panel. The option owns both its label and the
+ * window it stands for, so a consumer can express windows the library does not
+ * ship — `resolve` receives `now`, which is what makes a rolling window
+ * ("the past 7×24 hours") expressible rather than only a calendar bucket.
+ *
+ * `custom` is a reserved id: returning an empty range marks the option as the
+ * manual-selection entry, and picking a day in the calendar switches the panel
+ * back to it.
+ */
+export type DateRangePresetOption = {
+    /** Stable id; doubles as the radio value. */
+    value: DateRangePreset;
+    /** Text shown in the preset panel. */
+    label: string;
+    /** The window this option stands for, resolved when it is selected. */
+    resolve: (now: Date) => DateRange;
+};
+export type TimeRange = {
+    startTime?: Date;
+    endTime?: Date;
+};
+export type DateRangeWithTime = DateRange & TimeRange;
+export type DateDisplayFormat = 'long' | 'numeric';
+export type BlockedMonth = {
+    year: number;
+    month: number;
+};
+export type DateRangePickerContextValue = {
+    /** Current selected date range */
+    range: DateRange;
+    /** Current time values */
+    time: TimeRange;
+    /** Current active preset, or `null` when nothing is selected */
+    preset: DateRangePreset | null;
+    /** The preset options on offer, built-ins unless overridden */
+    presets: DateRangePresetOption[];
+    /** Currently displayed months [left, right] */
+    displayedMonths: [Date, Date];
+    /** Time format */
+    timeFormat: '12' | '24';
+    /** Whether to show time inputs */
+    showTime: boolean;
+    /** Form field name */
+    name?: string;
+    /** Disabled state */
+    disabled: boolean;
+    /** Animation duration in milliseconds */
+    animationDuration: number;
+    /** Specific days that cannot be selected */
+    blockedDays: Date[];
+    /** Months that cannot be selected */
+    blockedMonths: BlockedMonth[];
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Whether navigation to previous month is allowed */
+    canNavigatePrev: boolean;
+    /** Whether navigation to next month is allowed */
+    canNavigateNext: boolean;
+    /** Hide navigation arrows when disabled */
+    hideDisabledNavigation: boolean;
+    /** Show days from previous/next month */
+    showOutsideDays: boolean;
+    /** Navigation mode: 'together' or 'independent' */
+    navigationMode: 'together' | 'independent';
+    numberOfMonths: 1 | 2;
+    dateDisplayFormat: DateDisplayFormat;
+    /** Whether the inputs and calendar only show for the manual-selection preset */
+    revealCalendarOnCustom: boolean;
+    /** Whether left month can navigate to previous (independent mode) */
+    canLeftNavigatePrev: boolean;
+    /** Whether left month can navigate to next (independent mode) */
+    canLeftNavigateNext: boolean;
+    /** Whether right month can navigate to previous (independent mode) */
+    canRightNavigatePrev: boolean;
+    /** Whether right month can navigate to next (independent mode) */
+    canRightNavigateNext: boolean;
+    /** Set the date range */
+    setRange: (range: DateRange) => void;
+    /** Set the time range */
+    setTime: (time: TimeRange) => void;
+    /** Set the preset, or `null` to leave nothing selected */
+    setPreset: (preset: DateRangePreset | null) => void;
+    /** Navigate to previous month (together mode) */
+    navigatePrevMonth: () => void;
+    /** Navigate to next month (together mode) */
+    navigateNextMonth: () => void;
+    /** Navigate left month to previous (independent mode) */
+    navigateLeftPrev: () => void;
+    /** Navigate left month to next (independent mode) */
+    navigateLeftNext: () => void;
+    /** Navigate right month to previous (independent mode) */
+    navigateRightPrev: () => void;
+    /** Navigate right month to next (independent mode) */
+    navigateRightNext: () => void;
+    /** Set displayed months directly */
+    setDisplayedMonths: (months: [Date, Date]) => void;
+};
+export declare const DateRangePickerContext: import('react').Context<DateRangePickerContextValue | null>;

package/dist/lib/components/DateRangePicker/contexts/date-range-picker/date-range-picker.hook.d.ts

@@ -0,0 +1 @@
+export declare const useDateRangePicker: () => import('./date-range-picker.context').DateRangePickerContextValue;

package/dist/lib/components/DateRangePicker/contexts/date-range-picker/date-range-picker.provider.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from './date-range-picker.types';
+export declare const DateRangePickerProvider: FC<Props>;

package/dist/lib/components/DateRangePicker/contexts/date-range-picker/date-range-picker.types.d.ts

@@ -0,0 +1,26 @@
+import { PropsWithChildren } from 'react';
+import { BlockedMonth, DateDisplayFormat, DateRange, DateRangePreset, DateRangePresetOption, TimeRange } from './date-range-picker.context';
+export type Props = PropsWithChildren<{
+    animationDuration?: number;
+    blockedDays?: Date[];
+    blockedMonths?: BlockedMonth[];
+    dateDisplayFormat?: DateDisplayFormat;
+    defaultPreset?: DateRangePreset | null;
+    defaultRange?: DateRange;
+    defaultTime?: TimeRange;
+    disabled?: boolean;
+    hideDisabledNavigation?: boolean;
+    maxDate?: Date;
+    minDate?: Date;
+    name?: string;
+    navigationMode?: 'together' | 'independent';
+    numberOfMonths?: 1 | 2;
+    presets?: DateRangePresetOption[];
+    revealCalendarOnCustom?: boolean;
+    showOutsideDays?: boolean;
+    showTime?: boolean;
+    timeFormat?: '12' | '24';
+    onDateChange?: (range: DateRange) => void;
+    onPresetChange?: (preset: DateRangePreset | null, range: DateRange) => void;
+    onRangeChange?: (range: DateRange & TimeRange) => void;
+}>;

package/dist/lib/components/DateRangePicker/contexts/index.d.ts

@@ -0,0 +1,4 @@
+export { DateRangePickerContext } from './date-range-picker/date-range-picker.context';
+export type { BlockedMonth, DateDisplayFormat, DateRange, DateRangePreset, DateRangePresetOption, DateRangeWithTime, TimeRange, } from './date-range-picker/date-range-picker.context';
+export { useDateRangePicker } from './date-range-picker/date-range-picker.hook';
+export { DateRangePickerProvider } from './date-range-picker/date-range-picker.provider';

package/dist/lib/components/DateRangePicker/utils/disabled-dates/disabled-dates.d.ts

@@ -0,0 +1,20 @@
+import { DateRestrictions } from './disabled-dates.types';
+/**
+ * Checks if a date is selectable based on all restrictions.
+ */
+export declare const isDateSelectable: (date: Date, restrictions: DateRestrictions) => boolean;
+/**
+ * Creates a matcher function for react-day-picker's disabled prop.
+ * Returns undefined if no restrictions are set.
+ */
+export declare const createDisabledMatcher: (restrictions: DateRestrictions) => ((date: Date) => boolean) | undefined;
+/**
+ * Checks if navigation to the previous month should be allowed.
+ * Returns false if the previous month would be entirely before minDate.
+ */
+export declare const canNavigateToPrevMonth: (currentLeftMonth: Date, minDate?: Date) => boolean;
+/**
+ * Checks if navigation to the next month should be allowed.
+ * Returns false if the next month would be entirely after maxDate.
+ */
+export declare const canNavigateToNextMonth: (currentRightMonth: Date, maxDate?: Date) => boolean;

package/dist/lib/components/DateRangePicker/utils/disabled-dates/disabled-dates.types.d.ts

@@ -0,0 +1,7 @@
+import { BlockedMonth } from '../../contexts';
+export type DateRestrictions = {
+    blockedDays: Date[];
+    blockedMonths: BlockedMonth[];
+    minDate?: Date;
+    maxDate?: Date;
+};

package/dist/lib/components/DateRangePicker/utils/displayed-months/displayed-months.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The months the picker opens on: the one holding `referenceDate` and, for a
+ * two-month calendar, the one after it. The pair is always returned so a
+ * single-month calendar keeps the same shape and only shows the first.
+ *
+ * A backward-looking picker — a creation date capped at today — would otherwise
+ * open with its last month wholly past `maxDate` and every day in it disabled,
+ * spending half the calendar on dates nobody can pick. When that happens the
+ * window ends on the last month with something selectable in it and steps back,
+ * so the reference month stays in view.
+ */
+export declare const getDisplayedMonths: (referenceDate: Date, maxDate?: Date, numberOfMonths?: 1 | 2) => [Date, Date];

package/dist/lib/components/DateRangePicker/utils/index.d.ts

@@ -0,0 +1,9 @@
+export { calculatePresetRange } from './presets/presets';
+export { getDisplayedMonths } from './displayed-months/displayed-months';
+export { hidesRightPanel } from './right-panel/right-panel';
+export { PRESET_OPTIONS } from '../constants';
+export type { PresetOption } from '../constants';
+export type { DateRangePresetOption } from '../contexts';
+export { autoFormatDateInput, combineDateAndTime, formatDateToDisplayString, formatDateToString, formatTimeToString, getMonthName, isValidTimeString, parseDateString, parseDisplayDateString, parseTimeString, } from './validation/validation';
+export { createDisabledMatcher, isDateSelectable, canNavigateToPrevMonth, canNavigateToNextMonth, } from './disabled-dates/disabled-dates';
+export type { DateRestrictions } from './disabled-dates/disabled-dates.types';

package/dist/lib/components/DateRangePicker/utils/presets/presets.d.ts

@@ -0,0 +1,9 @@
+import { DateRange, DateRangePreset, DateRangePresetOption } from '../../contexts';
+/**
+ * Calculates the date range for a given preset by asking the option itself.
+ *
+ * Looks the id up in `presets` (the built-ins unless the caller passes its own
+ * list), so an unknown id — including `custom` — resolves to an empty range and
+ * leaves the selection to the calendar.
+ */
+export declare const calculatePresetRange: (preset: DateRangePreset | null, presets?: DateRangePresetOption[], now?: Date) => DateRange;

package/dist/lib/components/DateRangePicker/utils/right-panel/right-panel.d.ts

@@ -0,0 +1,7 @@
+import { DateRangePreset, DateRangePresetOption } from '../../contexts';
+/**
+ * Whether the inputs and calendar are tucked away. A preset that resolves to a
+ * window speaks for itself, and no selection at all means no filter yet; only
+ * the manual-selection entry needs the calendar.
+ */
+export declare const hidesRightPanel: (preset: DateRangePreset | null, presets: DateRangePresetOption[], revealCalendarOnCustom: boolean) => boolean;

package/dist/lib/components/DateRangePicker/utils/validation/validation.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Combines a date and time into an ISO string.
+ */
+export declare const combineDateAndTime: (date?: Date, time?: Date) => string;
+/**
+ * Auto-formats a date input value as MM/DD/YYYY while typing.
+ * Inserts slashes after month (2 digits) and day (2 more digits).
+ */
+export declare const autoFormatDateInput: (rawValue: string, previousValue: string) => string;
+/**
+ * Validates a time string in HH:MM format.
+ * Returns true if valid, false otherwise.
+ */
+export declare const isValidTimeString: (timeString: string, format?: "12" | "24") => boolean;
+/**
+ * Parses a time string into a Date object.
+ * Returns undefined if invalid.
+ */
+export declare const parseTimeString: (timeString: string, format?: "12" | "24", period?: "AM" | "PM") => Date | undefined;
+/**
+ * Formats a Date object to a time string in HH:MM format.
+ */
+export declare const formatTimeToString: (date: Date | undefined, format?: "12" | "24") => string;
+/**
+ * Formats a Date object to a readable date string like "6 February 2025".
+ */
+export declare const formatDateToDisplayString: (date: Date | undefined) => string;
+/**
+ * Formats a Date object to a date string in MM/DD/YYYY format.
+ */
+export declare const formatDateToString: (date: Date | undefined) => string;
+/**
+ * Parses a display date string like "6 February 2025" to a Date object.
+ */
+export declare const parseDisplayDateString: (dateString: string) => Date | undefined;
+/**
+ * Parses a date string in MM/DD/YYYY format to a Date object.
+ */
+export declare const parseDateString: (dateString: string) => Date | undefined;
+/**
+ * Gets the month name from index
+ */
+export declare const getMonthName: (monthIndex: number) => string;

package/dist/lib/components/Datepicker/DatePicker.d.ts

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+import { Props } from './DatePicker.types';
+/**
+ * A date picker component built on react-day-picker.
+ * Allows single date selection with calendar navigation.
+ *
+ * @example
+ * ```tsx
+ * // Basic date picker
+ * <DatePicker
+ *   defaultSelected={new Date()}
+ *   onSelect={(date) => console.log(date)}
+ * />
+ *
+ * // With custom styling
+ * <DatePicker
+ *   defaultSelected={startDate}
+ *   onSelect={setStartDate}
+ *   monthsClassName="custom-months"
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-datepicker--docs Storybook}
+ */
+declare const DatePicker: FC<Props>;
+export { DatePicker };

package/dist/lib/components/Datepicker/DatePicker.types.d.ts

@@ -0,0 +1,31 @@
+import { VariantProps } from 'class-variance-authority';
+import { getAllTimezones } from 'countries-and-timezones';
+import { DayPickerProps as DayPickerPrimitiveProps } from 'react-day-picker';
+import { datePickerVariants } from './DatePicker.variants';
+type TimeZone = keyof ReturnType<typeof getAllTimezones>;
+/**
+ * Props for the DatePicker component.
+ *
+ * @example
+ * ```tsx
+ * <DatePicker
+ *   defaultSelected={new Date()}
+ *   onSelect={(date) => setSelectedDate(date)}
+ * />
+ * ```
+ */
+export type Props = Omit<DayPickerPrimitiveProps, 'mode'> & VariantProps<typeof datePickerVariants> & {
+    /** CSS classes for the navigation arrows */
+    arrowClassName?: string;
+    /** CSS classes for the months container */
+    monthsClassName?: string;
+    /** Timezone for date display */
+    timeZone?: TimeZone;
+    /** Initial selected date */
+    defaultSelected?: Date;
+    /** Callback when a date is selected */
+    onSelect?: (date: Date) => void;
+};
+/** @deprecated Use Props instead */
+export type DatePickerProps = Props;
+export {};

package/dist/lib/components/Datepicker/DatePicker.variants.d.ts

@@ -0,0 +1 @@
+export declare const datePickerVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/lib/components/Datepicker/components/DatePickerContent/DatePickerContent.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from '../../DatePicker.types';
+export declare const DatePickerContent: FC<Props>;

package/dist/lib/components/Divider/Divider.d.ts

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { Props } from './Divider.types';
+/**
+ * A horizontal divider/separator line.
+ *
+ * @example
+ * ```tsx
+ * <div>
+ *   <p>Section 1</p>
+ *   <Divider />
+ *   <p>Section 2</p>
+ * </div>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-divider--docs Storybook}
+ */
+declare const Divider: FC<Props>;
+export { Divider };

package/dist/lib/components/Divider/Divider.types.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes } from 'react';
+export type Props = HTMLAttributes<HTMLDivElement> & {
+    component?: 'div' | 'hr' | 'li';
+};

package/dist/lib/components/Divider/Divider.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const dividerVariants: (props?: ({
+    variant?: "default" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/lib/components/Drawer/Drawer.d.ts

@@ -0,0 +1,36 @@
+import { FC } from 'react';
+import { BodyProps, FooterProps, HeaderProps } from './components';
+import { Props } from './Drawer.types';
+/**
+ * A drawer/panel component that slides in from the side of the screen.
+ * Supports Header, Body, and Footer sub-components, keyboard navigation (Escape to close),
+ * and optional resizing.
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <Button onClick={() => setIsOpen(true)}>Open Drawer</Button>
+ *
+ * <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <Drawer.Header>Panel Title</Drawer.Header>
+ *   <Drawer.Body>
+ *     Panel content goes here.
+ *   </Drawer.Body>
+ *   <Drawer.Footer>
+ *     <Button variant="secondary" onClick={() => setIsOpen(false)}>
+ *       Cancel
+ *     </Button>
+ *     <Button onClick={handleConfirm}>Confirm</Button>
+ *   </Drawer.Footer>
+ * </Drawer>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-drawer--docs Storybook}
+ */
+declare const Drawer: FC<Props> & {
+    Header: FC<HeaderProps>;
+    Body: FC<BodyProps>;
+    Footer: FC<FooterProps>;
+};
+export { Drawer };