@acmekit/ui 4.1.1

package/dist/cjs/components/date-picker/date-picker-clear-button.js

@@ -0,0 +1,22 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePickerClearButton = void 0;
+const tslib_1 = require("tslib");
+const clx_1 = require("../../utils/clx");
+const React = tslib_1.__importStar(require("react"));
+const ALLOWED_KEYS = ["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"];
+exports.DatePickerClearButton = React.forwardRef(({ type = "button", className, children, ...props }, ref) => {
+    /**
+     * Allows the button to be used with only the keyboard.
+     * Otherwise the wrapping component will hijack the event.
+     */
+    const stopPropagation = (e) => {
+        if (!ALLOWED_KEYS.includes(e.key)) {
+            e.stopPropagation();
+        }
+    };
+    return (React.createElement("button", { ref: ref, type: type, className: (0, clx_1.clx)("text-ui-fg-muted transition-fg flex size-full items-center justify-center outline-none", "hover:bg-ui-button-transparent-hover", "focus-visible:bg-ui-bg-interactive focus-visible:text-ui-fg-on-color", className), "aria-label": "Clear date", onKeyDown: stopPropagation, ...props }, children));
+});
+exports.DatePickerClearButton.displayName = "DatePickerClearButton";
+//# sourceMappingURL=date-picker-clear-button.js.map

package/dist/cjs/components/date-picker/date-picker-clear-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-clear-button.js","sourceRoot":"","sources":["../../../../src/components/date-picker/date-picker-clear-button.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;AAEZ,qCAAiC;AACjC,qDAA8B;AAE9B,MAAM,YAAY,GAAG,CAAC,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,CAAC,CAAA;AAE3D,QAAA,qBAAqB,GAAG,KAAK,CAAC,UAAU,CAGnD,CAAC,EAAE,IAAI,GAAG,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC5D;;;OAGG;IACH,MAAM,eAAe,GAAG,CAAC,CAAsB,EAAE,EAAE;QACjD,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;YAClC,CAAC,CAAC,eAAe,EAAE,CAAA;QACrB,CAAC;IACH,CAAC,CAAA;IAED,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,IAAA,SAAG,EACZ,wFAAwF,EACxF,sCAAsC,EACtC,sEAAsE,EACtE,SAAS,CACV,gBACU,YAAY,EACvB,SAAS,EAAE,eAAe,KACtB,KAAK,IAER,QAAQ,CACF,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AACF,6BAAqB,CAAC,WAAW,GAAG,uBAAuB,CAAA","sourcesContent":["\"use client\"\n\nimport { clx } from \"@/utils/clx\"\nimport * as React from \"react\"\n\nconst ALLOWED_KEYS = [\"ArrowDown\", \"ArrowUp\", \"ArrowLeft\", \"ArrowRight\"]\n\nexport const DatePickerClearButton = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentPropsWithoutRef<\"button\">\n>(({ type = \"button\", className, children, ...props }, ref) => {\n  /**\n   * Allows the button to be used with only the keyboard.\n   * Otherwise the wrapping component will hijack the event.\n   */\n  const stopPropagation = (e: React.KeyboardEvent) => {\n    if (!ALLOWED_KEYS.includes(e.key)) {\n      e.stopPropagation()\n    }\n  }\n\n  return (\n    <button\n      ref={ref}\n      type={type}\n      className={clx(\n        \"text-ui-fg-muted transition-fg flex size-full items-center justify-center outline-none\",\n        \"hover:bg-ui-button-transparent-hover\",\n        \"focus-visible:bg-ui-bg-interactive focus-visible:text-ui-fg-on-color\",\n        className\n      )}\n      aria-label=\"Clear date\"\n      onKeyDown={stopPropagation}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n})\nDatePickerClearButton.displayName = \"DatePickerClearButton\"\n"]}

package/dist/cjs/components/date-picker/date-picker-field.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { AriaDatePickerProps, DateValue } from "react-aria";
+interface DatePickerFieldProps extends AriaDatePickerProps<DateValue> {
+    size?: "base" | "small";
+}
+declare const DatePickerField: ({ size, ...props }: DatePickerFieldProps) => React.JSX.Element;
+export { DatePickerField };
+//# sourceMappingURL=date-picker-field.d.ts.map

package/dist/cjs/components/date-picker/date-picker-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-field.d.ts","sourceRoot":"","sources":["../../../../src/components/date-picker/date-picker-field.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,mBAAmB,EACnB,SAAS,EAGV,MAAM,YAAY,CAAA;AAMnB,UAAU,oBAAqB,SAAQ,mBAAmB,CAAC,SAAS,CAAC;IACnE,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CACxB;AAeD,QAAA,MAAM,eAAe,GAAI,oBAA6B,oBAAoB,sBAwBzE,CAAA;AAED,OAAO,EAAE,eAAe,EAAE,CAAA"}

package/dist/cjs/components/date-picker/date-picker-field.js

@@ -0,0 +1,38 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePickerField = void 0;
+const tslib_1 = require("tslib");
+const date_1 = require("@internationalized/date");
+const React = tslib_1.__importStar(require("react"));
+const react_aria_1 = require("react-aria");
+const react_stately_1 = require("react-stately");
+const date_segment_1 = require("../date-segment");
+const cva_1 = require("cva");
+const datePickerFieldStyles = (0, cva_1.cva)({
+    base: "flex items-center tabular-nums",
+    variants: {
+        size: {
+            small: "py-1",
+            base: "py-1.5",
+        },
+    },
+    defaultVariants: {
+        size: "base",
+    },
+});
+const DatePickerField = ({ size = "base", ...props }) => {
+    const { locale } = (0, react_aria_1.useLocale)();
+    const state = (0, react_stately_1.useDateFieldState)({
+        ...props,
+        locale,
+        createCalendar: date_1.createCalendar,
+    });
+    const ref = React.useRef(null);
+    const { fieldProps } = (0, react_aria_1.useDateField)(props, state, ref);
+    return (React.createElement("div", { ref: ref, "aria-label": "Date input", className: datePickerFieldStyles({ size }), ...fieldProps }, state.segments.map((segment, index) => {
+        return React.createElement(date_segment_1.DateSegment, { key: index, segment: segment, state: state });
+    })));
+};
+exports.DatePickerField = DatePickerField;
+//# sourceMappingURL=date-picker-field.js.map

package/dist/cjs/components/date-picker/date-picker-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-field.js","sourceRoot":"","sources":["../../../../src/components/date-picker/date-picker-field.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;AAEZ,kDAAwD;AACxD,qDAA8B;AAC9B,2CAKmB;AACnB,iDAAiD;AAEjD,4DAAuD;AACvD,6BAAyB;AAMzB,MAAM,qBAAqB,GAAG,IAAA,SAAG,EAAC;IAChC,IAAI,EAAE,gCAAgC;IACtC,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,KAAK,EAAE,MAAM;YACb,IAAI,EAAE,QAAQ;SACf;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,MAAM;KACb;CACF,CAAC,CAAA;AAEF,MAAM,eAAe,GAAG,CAAC,EAAE,IAAI,GAAG,MAAM,EAAE,GAAG,KAAK,EAAwB,EAAE,EAAE;IAC5E,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,sBAAS,GAAE,CAAA;IAE9B,MAAM,KAAK,GAAG,IAAA,iCAAiB,EAAC;QAC9B,GAAG,KAAK;QACR,MAAM;QACN,cAAc,EAAd,qBAAc;KACf,CAAC,CAAA;IAEF,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC9C,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,yBAAY,EAAC,KAAK,EAAE,KAAK,EAAE,GAAG,CAAC,CAAA;IAEtD,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,gBACG,YAAY,EACvB,SAAS,EAAE,qBAAqB,CAAC,EAAE,IAAI,EAAE,CAAC,KACtC,UAAU,IAEb,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;QACrC,OAAO,oBAAC,0BAAW,IAAC,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAI,CAAA;IACpE,CAAC,CAAC,CACE,CACP,CAAA;AACH,CAAC,CAAA;AAEQ,0CAAe","sourcesContent":["\"use client\"\n\nimport { createCalendar } from \"@internationalized/date\"\nimport * as React from \"react\"\nimport {\n  AriaDatePickerProps,\n  DateValue,\n  useDateField,\n  useLocale,\n} from \"react-aria\"\nimport { useDateFieldState } from \"react-stately\"\n\nimport { DateSegment } from \"@/components/date-segment\"\nimport { cva } from \"cva\"\n\ninterface DatePickerFieldProps extends AriaDatePickerProps<DateValue> {\n  size?: \"base\" | \"small\"\n}\n\nconst datePickerFieldStyles = cva({\n  base: \"flex items-center tabular-nums\",\n  variants: {\n    size: {\n      small: \"py-1\",\n      base: \"py-1.5\",\n    },\n  },\n  defaultVariants: {\n    size: \"base\",\n  },\n})\n\nconst DatePickerField = ({ size = \"base\", ...props }: DatePickerFieldProps) => {\n  const { locale } = useLocale()\n\n  const state = useDateFieldState({\n    ...props,\n    locale,\n    createCalendar,\n  })\n\n  const ref = React.useRef<HTMLDivElement>(null)\n  const { fieldProps } = useDateField(props, state, ref)\n\n  return (\n    <div\n      ref={ref}\n      aria-label=\"Date input\"\n      className={datePickerFieldStyles({ size })}\n      {...fieldProps}\n    >\n      {state.segments.map((segment, index) => {\n        return <DateSegment key={index} segment={segment} state={state} />\n      })}\n    </div>\n  )\n}\n\nexport { DatePickerField }\n"]}

package/dist/cjs/components/date-picker/date-picker.d.ts

@@ -0,0 +1,22 @@
+import { CalendarDate, CalendarDateTime } from "@internationalized/date";
+import * as React from "react";
+import { type AriaDatePickerProps as BaseDatePickerProps } from "react-aria";
+import { Granularity } from "../../types";
+type DatePickerValueProps = {
+    defaultValue?: Date | null;
+    value?: Date | null;
+    onChange?: (value: Date | null) => void;
+    isDateUnavailable?: (date: Date) => boolean;
+    minValue?: Date;
+    maxValue?: Date;
+    shouldCloseOnSelect?: boolean;
+    granularity?: Granularity;
+    size?: "base" | "small";
+    className?: string;
+    modal?: boolean;
+};
+interface DatePickerProps extends Omit<BaseDatePickerProps<CalendarDateTime | CalendarDate>, keyof DatePickerValueProps>, DatePickerValueProps {
+}
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
+export { DatePicker, type Granularity };
+//# sourceMappingURL=date-picker.d.ts.map

package/dist/cjs/components/date-picker/date-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,YAAY,EACZ,gBAAgB,EAEjB,MAAM,yBAAyB,CAAA;AAGhC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAKL,KAAK,mBAAmB,IAAI,mBAAmB,EAChD,MAAM,YAAY,CAAA;AAMnB,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAYrC,KAAK,oBAAoB,GAAG;IAC1B,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAC1B,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAA;IACvC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAA;IAC3C,QAAQ,CAAC,EAAE,IAAI,CAAA;IACf,QAAQ,CAAC,EAAE,IAAI,CAAA;IACf,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,UAAU,eACR,SAAQ,IAAI,CACR,mBAAmB,CAAC,gBAAgB,GAAG,YAAY,CAAC,EACpD,MAAM,oBAAoB,CAC3B,EACD,oBAAoB;CAAG;AAgC3B,QAAA,MAAM,UAAU,wFAkHf,CAAA;AA6CD,OAAO,EAAE,UAAU,EAAE,KAAK,WAAW,EAAE,CAAA"}

package/dist/cjs/components/date-picker/date-picker.js

@@ -0,0 +1,110 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePicker = void 0;
+const tslib_1 = require("tslib");
+const date_1 = require("@internationalized/date");
+const icons_1 = require("@acmekit/icons");
+const cva_1 = require("cva");
+const React = tslib_1.__importStar(require("react"));
+const react_aria_1 = require("react-aria");
+const react_stately_1 = require("react-stately");
+const calendar_1 = require("../calendar");
+const popover_1 = require("../popover");
+const time_input_1 = require("../time-input");
+const calendar_2 = require("../../utils/calendar");
+const clx_1 = require("../../utils/clx");
+const date_picker_button_1 = require("./date-picker-button");
+const date_picker_clear_button_1 = require("./date-picker-clear-button");
+const date_picker_field_1 = require("./date-picker-field");
+const datePickerStyles = (isOpen, isInvalid, value) => (0, cva_1.cva)({
+    base: (0, clx_1.clx)("bg-ui-bg-field shadow-borders-base txt-compact-small text-ui-fg-base transition-fg grid items-center gap-2 overflow-hidden rounded-md h-fit", "focus-within:shadow-borders-interactive-with-active focus-visible:shadow-borders-interactive-with-active", "aria-[invalid=true]:shadow-borders-error invalid:shadow-borders-error", {
+        "shadow-borders-interactive-with-active": isOpen,
+        "shadow-borders-error": isInvalid,
+        "pr-2": !value,
+    }),
+    variants: {
+        size: {
+            small: (0, clx_1.clx)("grid-cols-[28px_1fr]", {
+                "grid-cols-[28px_1fr_28px]": !!value,
+            }),
+            base: (0, clx_1.clx)("grid-cols-[32px_1fr]", {
+                "grid-cols-[32px_1fr_32px]": !!value,
+            }),
+        },
+    },
+});
+const HAS_TIME = new Set(["hour", "minute", "second"]);
+const DatePicker = React.forwardRef(({ size = "base", shouldCloseOnSelect = true, className, modal = false, ...props }, ref) => {
+    const [value, setValue] = React.useState((0, calendar_2.getDefaultCalendarDateFromDate)(props.value, props.defaultValue, props.granularity));
+    const innerRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => innerRef.current);
+    const contentRef = React.useRef(null);
+    const _props = convertProps(props, setValue);
+    const state = (0, react_stately_1.useDatePickerState)({
+        ..._props,
+        shouldCloseOnSelect,
+    });
+    const { groupProps, fieldProps, buttonProps, dialogProps, calendarProps } = (0, react_aria_1.useDatePicker)(_props, state, innerRef);
+    React.useEffect(() => {
+        setValue(props.value
+            ? (0, calendar_2.updateCalendarDateFromDate)(value, props.value, props.granularity)
+            : null);
+        state.setValue(props.value
+            ? (0, calendar_2.updateCalendarDateFromDate)(value, props.value, props.granularity)
+            : null);
+    }, [props.value]);
+    function clear(e) {
+        var _a;
+        e.preventDefault();
+        e.stopPropagation();
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, null);
+        state.setValue(null);
+    }
+    (0, react_aria_1.useInteractOutside)({
+        ref: contentRef,
+        onInteractOutside: () => {
+            state.setOpen(false);
+        },
+    });
+    const hasTime = props.granularity && HAS_TIME.has(props.granularity);
+    const Icon = hasTime ? icons_1.Clock : icons_1.CalendarMini;
+    return (React.createElement(popover_1.Popover, { modal: modal, open: state.isOpen, onOpenChange: state.setOpen },
+        React.createElement(popover_1.Popover.Anchor, { asChild: true },
+            React.createElement("div", { ref: ref, className: (0, clx_1.clx)(datePickerStyles(state.isOpen, state.isInvalid, state.value)({ size }), className), ...groupProps },
+                React.createElement(date_picker_button_1.DatePickerButton, { ...buttonProps, size: size },
+                    React.createElement(Icon, null)),
+                React.createElement(date_picker_field_1.DatePickerField, { ...fieldProps, size: size }),
+                !!state.value && (React.createElement(date_picker_clear_button_1.DatePickerClearButton, { onClick: clear },
+                    React.createElement(icons_1.XMarkMini, null))))),
+        React.createElement(popover_1.Popover.Content, { ref: contentRef, ...dialogProps, className: "flex flex-col divide-y p-0" },
+            React.createElement("div", { className: "p-3" },
+                React.createElement(calendar_1.InternalCalendar, { autoFocus: true, ...calendarProps })),
+            state.hasTime && (React.createElement("div", { className: "p-3" },
+                React.createElement(time_input_1.TimeInput, { value: state.timeValue, onChange: (value) => state.setTimeValue(value), hourCycle: props.hourCycle }))))));
+});
+exports.DatePicker = DatePicker;
+DatePicker.displayName = "DatePicker";
+function convertProps(props, setValue) {
+    const { minValue, maxValue, isDateUnavailable: _isDateUnavailable, onChange: _onChange, value: __value__, defaultValue: __defaultValue__, ...rest } = props;
+    const onChange = (value) => {
+        setValue(value);
+        _onChange === null || _onChange === void 0 ? void 0 : _onChange(value ? value.toDate((0, date_1.getLocalTimeZone)()) : null);
+    };
+    const isDateUnavailable = (date) => {
+        const _date = date.toDate((0, date_1.getLocalTimeZone)());
+        return _isDateUnavailable ? _isDateUnavailable(_date) : false;
+    };
+    return {
+        ...rest,
+        onChange: onChange,
+        isDateUnavailable,
+        minValue: minValue
+            ? (0, calendar_2.createCalendarDateFromDate)(minValue, props.granularity)
+            : minValue,
+        maxValue: maxValue
+            ? (0, calendar_2.createCalendarDateFromDate)(maxValue, props.granularity)
+            : maxValue,
+    };
+}
+//# sourceMappingURL=date-picker.js.map

package/dist/cjs/components/date-picker/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport {\n  CalendarDate,\n  CalendarDateTime,\n  getLocalTimeZone,\n} from \"@internationalized/date\"\nimport { CalendarMini, Clock, XMarkMini } from \"@acmekit/icons\"\nimport { cva } from \"cva\"\nimport * as React from \"react\"\nimport {\n  DateValue,\n  TimeValue,\n  useDatePicker,\n  useInteractOutside,\n  type AriaDatePickerProps as BaseDatePickerProps,\n} from \"react-aria\"\nimport { useDatePickerState } from \"react-stately\"\n\nimport { InternalCalendar } from \"@/components/calendar\"\nimport { Popover } from \"@/components/popover\"\nimport { TimeInput } from \"@/components/time-input\"\nimport { Granularity } from \"@/types\"\nimport {\n  createCalendarDateFromDate,\n  getDefaultCalendarDateFromDate,\n  updateCalendarDateFromDate,\n} from \"@/utils/calendar\"\nimport { clx } from \"@/utils/clx\"\n\nimport { DatePickerButton } from \"./date-picker-button\"\nimport { DatePickerClearButton } from \"./date-picker-clear-button\"\nimport { DatePickerField } from \"./date-picker-field\"\n\ntype DatePickerValueProps = {\n  defaultValue?: Date | null\n  value?: Date | null\n  onChange?: (value: Date | null) => void\n  isDateUnavailable?: (date: Date) => boolean\n  minValue?: Date\n  maxValue?: Date\n  shouldCloseOnSelect?: boolean\n  granularity?: Granularity\n  size?: \"base\" | \"small\"\n  className?: string\n  modal?: boolean\n}\n\ninterface DatePickerProps\n  extends Omit<\n      BaseDatePickerProps<CalendarDateTime | CalendarDate>,\n      keyof DatePickerValueProps\n    >,\n    DatePickerValueProps {}\n\nconst datePickerStyles = (\n  isOpen: boolean,\n  isInvalid: boolean,\n  value?: DateValue | null\n) =>\n  cva({\n    base: clx(\n      \"bg-ui-bg-field shadow-borders-base txt-compact-small text-ui-fg-base transition-fg grid items-center gap-2 overflow-hidden rounded-md h-fit\",\n      \"focus-within:shadow-borders-interactive-with-active focus-visible:shadow-borders-interactive-with-active\",\n      \"aria-[invalid=true]:shadow-borders-error invalid:shadow-borders-error\",\n      {\n        \"shadow-borders-interactive-with-active\": isOpen,\n        \"shadow-borders-error\": isInvalid,\n        \"pr-2\": !value,\n      }\n    ),\n    variants: {\n      size: {\n        small: clx(\"grid-cols-[28px_1fr]\", {\n          \"grid-cols-[28px_1fr_28px]\": !!value,\n        }),\n        base: clx(\"grid-cols-[32px_1fr]\", {\n          \"grid-cols-[32px_1fr_32px]\": !!value,\n        }),\n      },\n    },\n  })\n\nconst HAS_TIME = new Set<Granularity>([\"hour\", \"minute\", \"second\"])\n\nconst DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      size = \"base\",\n      shouldCloseOnSelect = true,\n      className,\n      modal = false,\n      ...props\n    },\n    ref\n  ) => {\n    const [value, setValue] = React.useState<\n      CalendarDateTime | CalendarDate | null | undefined\n    >(\n      getDefaultCalendarDateFromDate(\n        props.value,\n        props.defaultValue,\n        props.granularity\n      )\n    )\n\n    const innerRef = React.useRef<HTMLDivElement>(null)\n    React.useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    const contentRef = React.useRef<HTMLDivElement>(null)\n\n    const _props = convertProps(props, setValue)\n\n    const state = useDatePickerState({\n      ..._props,\n      shouldCloseOnSelect,\n    })\n\n    const { groupProps, fieldProps, buttonProps, dialogProps, calendarProps } =\n      useDatePicker(_props, state, innerRef)\n\n    React.useEffect(() => {\n      setValue(\n        props.value\n          ? updateCalendarDateFromDate(value, props.value, props.granularity)\n          : null\n      )\n      state.setValue(\n        props.value\n          ? updateCalendarDateFromDate(value, props.value, props.granularity)\n          : null\n      )\n    }, [props.value])\n\n    function clear(e: React.MouseEvent<HTMLButtonElement>) {\n      e.preventDefault()\n      e.stopPropagation()\n\n      props.onChange?.(null)\n      state.setValue(null)\n    }\n\n    useInteractOutside({\n      ref: contentRef,\n      onInteractOutside: () => {\n        state.setOpen(false)\n      },\n    })\n\n    const hasTime = props.granularity && HAS_TIME.has(props.granularity)\n    const Icon = hasTime ? Clock : CalendarMini\n\n    return (\n      <Popover modal={modal} open={state.isOpen} onOpenChange={state.setOpen}>\n        <Popover.Anchor asChild>\n          <div\n            ref={ref}\n            className={clx(\n              datePickerStyles(\n                state.isOpen,\n                state.isInvalid,\n                state.value\n              )({ size }),\n              className\n            )}\n            {...groupProps}\n          >\n            <DatePickerButton {...buttonProps} size={size}>\n              <Icon />\n            </DatePickerButton>\n            <DatePickerField {...fieldProps} size={size} />\n            {!!state.value && (\n              <DatePickerClearButton onClick={clear}>\n                <XMarkMini />\n              </DatePickerClearButton>\n            )}\n          </div>\n        </Popover.Anchor>\n        <Popover.Content\n          ref={contentRef}\n          {...dialogProps}\n          className=\"flex flex-col divide-y p-0\"\n        >\n          <div className=\"p-3\">\n            <InternalCalendar autoFocus {...calendarProps} />\n          </div>\n          {state.hasTime && (\n            <div className=\"p-3\">\n              <TimeInput\n                value={state.timeValue}\n                onChange={(value) => state.setTimeValue(value as TimeValue)}\n                hourCycle={props.hourCycle}\n              />\n            </div>\n          )}\n        </Popover.Content>\n      </Popover>\n    )\n  }\n)\nDatePicker.displayName = \"DatePicker\"\n\nfunction convertProps(\n  props: DatePickerProps,\n  setValue: React.Dispatch<\n    React.SetStateAction<CalendarDateTime | CalendarDate | null | undefined>\n  >\n): BaseDatePickerProps<CalendarDateTime | CalendarDate> {\n  const {\n    minValue,\n    maxValue,\n    isDateUnavailable: _isDateUnavailable,\n    onChange: _onChange,\n    value: __value__,\n    defaultValue: __defaultValue__,\n    ...rest\n  } = props\n\n  const onChange = (value: CalendarDateTime | CalendarDateTime | null) => {\n    setValue(value)\n    _onChange?.(value ? value.toDate(getLocalTimeZone()) : null)\n  }\n\n  const isDateUnavailable = (date: DateValue) => {\n    const _date = date.toDate(getLocalTimeZone())\n\n    return _isDateUnavailable ? _isDateUnavailable(_date) : false\n  }\n\n  return {\n    ...rest,\n    onChange: onChange as BaseDatePickerProps<\n      CalendarDateTime | CalendarDate\n    >[\"onChange\"],\n    isDateUnavailable,\n    minValue: minValue\n      ? createCalendarDateFromDate(minValue, props.granularity)\n      : minValue,\n    maxValue: maxValue\n      ? createCalendarDateFromDate(maxValue, props.granularity)\n      : maxValue,\n  }\n}\n\nexport { DatePicker, type Granularity }\n"]}

package/dist/cjs/components/date-picker/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./date-picker";
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/date-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/date-picker/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

package/dist/cjs/components/date-picker/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./date-picker"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/date-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/date-picker/index.ts"],"names":[],"mappings":";;;AAAA,wDAA6B","sourcesContent":["export * from \"./date-picker\"\n"]}

package/dist/cjs/components/date-segment/date-segment.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { DateFieldState, DateSegment as Segment } from "react-stately";
+interface DateSegmentProps extends React.ComponentPropsWithoutRef<"div"> {
+    segment: Segment;
+    state: DateFieldState;
+}
+declare const DateSegment: ({ segment, state }: DateSegmentProps) => React.JSX.Element;
+export { DateSegment };
+//# sourceMappingURL=date-segment.d.ts.map

package/dist/cjs/components/date-segment/date-segment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-segment.d.ts","sourceRoot":"","sources":["../../../../src/components/date-segment/date-segment.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,cAAc,EAAE,WAAW,IAAI,OAAO,EAAE,MAAM,eAAe,CAAA;AAItE,UAAU,gBAAiB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IACtE,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,cAAc,CAAA;CACtB;AAED,QAAA,MAAM,WAAW,GAAI,oBAAoB,gBAAgB,sBAsCxD,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/cjs/components/date-segment/date-segment.js

@@ -0,0 +1,34 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateSegment = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_aria_1 = require("react-aria");
+const clx_1 = require("../../utils/clx");
+const DateSegment = ({ segment, state }) => {
+    const ref = React.useRef(null);
+    const { segmentProps } = (0, react_aria_1.useDateSegment)(segment, state, ref);
+    const isComma = segment.type === "literal" && segment.text === ", ";
+    /**
+     * We render an empty span with a margin to maintain the correct spacing
+     * between date and time segments.
+     */
+    if (isComma) {
+        return React.createElement("span", { className: "mx-1" });
+    }
+    return (
+    /**
+     * We wrap the segment in a span to prevent the segment from being
+     * focused when the user clicks outside of the component.
+     *
+     * See: https://github.com/adobe/react-spectrum/issues/3164
+     */
+    React.createElement("span", null,
+        React.createElement("div", { ref: ref, className: (0, clx_1.clx)("transition-fg outline-none", "focus-visible:bg-ui-bg-interactive focus-visible:text-ui-fg-on-color", {
+                "text-ui-fg-muted uppercase": segment.isPlaceholder,
+                "text-ui-fg-muted": !segment.isEditable && !state.value,
+            }), ...segmentProps }, segment.text)));
+};
+exports.DateSegment = DateSegment;
+//# sourceMappingURL=date-segment.js.map

package/dist/cjs/components/date-segment/date-segment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-segment.js","sourceRoot":"","sources":["../../../../src/components/date-segment/date-segment.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;AAEZ,qDAA8B;AAC9B,2CAA2C;AAG3C,qCAAiC;AAOjC,MAAM,WAAW,GAAG,CAAC,EAAE,OAAO,EAAE,KAAK,EAAoB,EAAE,EAAE;IAC3D,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC9C,MAAM,EAAE,YAAY,EAAE,GAAG,IAAA,2BAAc,EAAC,OAAO,EAAE,KAAK,EAAE,GAAG,CAAC,CAAA;IAE5D,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,KAAK,SAAS,IAAI,OAAO,CAAC,IAAI,KAAK,IAAI,CAAA;IAEnE;;;OAGG;IACH,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,8BAAM,SAAS,EAAC,MAAM,GAAG,CAAA;IAClC,CAAC;IAED,OAAO;IACL;;;;;OAKG;IACH;QACE,6BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,SAAG,EACZ,4BAA4B,EAC5B,sEAAsE,EACtE;gBACE,4BAA4B,EAAE,OAAO,CAAC,aAAa;gBACnD,kBAAkB,EAAE,CAAC,OAAO,CAAC,UAAU,IAAI,CAAC,KAAK,CAAC,KAAK;aACxD,CACF,KACG,YAAY,IAEf,OAAO,CAAC,IAAI,CACT,CACD,CACR,CAAA;AACH,CAAC,CAAA;AAEQ,kCAAW","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { useDateSegment } from \"react-aria\"\nimport { DateFieldState, DateSegment as Segment } from \"react-stately\"\n\nimport { clx } from \"@/utils/clx\"\n\ninterface DateSegmentProps extends React.ComponentPropsWithoutRef<\"div\"> {\n  segment: Segment\n  state: DateFieldState\n}\n\nconst DateSegment = ({ segment, state }: DateSegmentProps) => {\n  const ref = React.useRef<HTMLDivElement>(null)\n  const { segmentProps } = useDateSegment(segment, state, ref)\n\n  const isComma = segment.type === \"literal\" && segment.text === \", \"\n\n  /**\n   * We render an empty span with a margin to maintain the correct spacing\n   * between date and time segments.\n   */\n  if (isComma) {\n    return <span className=\"mx-1\" />\n  }\n\n  return (\n    /**\n     * We wrap the segment in a span to prevent the segment from being\n     * focused when the user clicks outside of the component.\n     *\n     * See: https://github.com/adobe/react-spectrum/issues/3164\n     */\n    <span>\n      <div\n        ref={ref}\n        className={clx(\n          \"transition-fg outline-none\",\n          \"focus-visible:bg-ui-bg-interactive focus-visible:text-ui-fg-on-color\",\n          {\n            \"text-ui-fg-muted uppercase\": segment.isPlaceholder,\n            \"text-ui-fg-muted\": !segment.isEditable && !state.value,\n          }\n        )}\n        {...segmentProps}\n      >\n        {segment.text}\n      </div>\n    </span>\n  )\n}\n\nexport { DateSegment }\n"]}

package/dist/cjs/components/date-segment/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./date-segment";
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/date-segment/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/date-segment/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA"}

package/dist/cjs/components/date-segment/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./date-segment"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/date-segment/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/date-segment/index.ts"],"names":[],"mappings":";;;AAAA,yDAA8B","sourcesContent":["export * from \"./date-segment\"\n"]}

package/dist/cjs/components/divider/divider.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+interface DividerProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+    orientation?: "horizontal" | "vertical";
+    variant?: "dashed" | "solid";
+}
+export declare const Divider: ({ orientation, variant, className, ...props }: DividerProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=divider.d.ts.map

package/dist/cjs/components/divider/divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../../../src/components/divider/divider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,UAAU,YACR,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC/D,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;CAC7B;AAED,eAAO,MAAM,OAAO,GAAI,+CAKrB,YAAY,sBAsBd,CAAA"}

package/dist/cjs/components/divider/divider.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Divider = void 0;
+const tslib_1 = require("tslib");
+const clx_1 = require("../../utils/clx");
+const React = tslib_1.__importStar(require("react"));
+const Divider = ({ orientation = "horizontal", variant = "solid", className, ...props }) => {
+    return (React.createElement("div", { "aria-orientation": orientation, role: "separator", className: (0, clx_1.clx)("border-ui-border-base", {
+            "w-full border-t": orientation === "horizontal" && variant === "solid",
+            "h-full border-l": orientation === "vertical" && variant === "solid",
+            "bg-transparent": variant === "dashed",
+            "h-px w-full bg-[linear-gradient(90deg,var(--border-strong)_1px,transparent_1px)] bg-[length:4px_1px]": variant === "dashed" && orientation === "horizontal",
+            "h-full w-px bg-[linear-gradient(0deg,var(--border-strong)_1px,transparent_1px)] bg-[length:1px_4px]": variant === "dashed" && orientation === "vertical",
+        }, className), ...props }));
+};
+exports.Divider = Divider;
+//# sourceMappingURL=divider.js.map

package/dist/cjs/components/divider/divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../../../src/components/divider/divider.tsx"],"names":[],"mappings":";;;;AAAA,qCAAiC;AACjC,qDAA8B;AAQvB,MAAM,OAAO,GAAG,CAAC,EACtB,WAAW,GAAG,YAAY,EAC1B,OAAO,GAAG,OAAO,EACjB,SAAS,EACT,GAAG,KAAK,EACK,EAAE,EAAE;IACjB,OAAO,CACL,iDACoB,WAAW,EAC7B,IAAI,EAAC,WAAW,EAChB,SAAS,EAAE,IAAA,SAAG,EACZ,uBAAuB,EACvB;YACE,iBAAiB,EACf,WAAW,KAAK,YAAY,IAAI,OAAO,KAAK,OAAO;YACrD,iBAAiB,EAAE,WAAW,KAAK,UAAU,IAAI,OAAO,KAAK,OAAO;YACpE,gBAAgB,EAAE,OAAO,KAAK,QAAQ;YACtC,sGAAsG,EACpG,OAAO,KAAK,QAAQ,IAAI,WAAW,KAAK,YAAY;YACtD,qGAAqG,EACnG,OAAO,KAAK,QAAQ,IAAI,WAAW,KAAK,UAAU;SACrD,EACD,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC,CAAA;AA3BY,QAAA,OAAO,WA2BnB","sourcesContent":["import { clx } from \"@/utils/clx\"\nimport * as React from \"react\"\n\ninterface DividerProps\n  extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  orientation?: \"horizontal\" | \"vertical\"\n  variant?: \"dashed\" | \"solid\"\n}\n\nexport const Divider = ({\n  orientation = \"horizontal\",\n  variant = \"solid\",\n  className,\n  ...props\n}: DividerProps) => {\n  return (\n    <div\n      aria-orientation={orientation}\n      role=\"separator\"\n      className={clx(\n        \"border-ui-border-base\",\n        {\n          \"w-full border-t\":\n            orientation === \"horizontal\" && variant === \"solid\",\n          \"h-full border-l\": orientation === \"vertical\" && variant === \"solid\",\n          \"bg-transparent\": variant === \"dashed\",\n          \"h-px w-full bg-[linear-gradient(90deg,var(--border-strong)_1px,transparent_1px)] bg-[length:4px_1px]\":\n            variant === \"dashed\" && orientation === \"horizontal\",\n          \"h-full w-px bg-[linear-gradient(0deg,var(--border-strong)_1px,transparent_1px)] bg-[length:1px_4px]\":\n            variant === \"dashed\" && orientation === \"vertical\",\n        },\n        className\n      )}\n      {...props}\n    />\n  )\n}\n"]}

package/dist/cjs/components/divider/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./divider";
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/divider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/divider/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA"}

package/dist/cjs/components/divider/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./divider"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/divider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/divider/index.ts"],"names":[],"mappings":";;;AAAA,oDAAyB","sourcesContent":["export * from \"./divider\"\n"]}

package/dist/cjs/components/drawer/drawer.d.ts

@@ -0,0 +1,63 @@
+import { Dialog as RadixDialog } from "radix-ui";
+import * as React from "react";
+interface DrawerRootProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Root> {
+}
+interface DrawerTriggerProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Trigger> {
+}
+interface DrawerCloseProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Close> {
+}
+interface DrawerPortalProps extends RadixDialog.DialogPortalProps {
+}
+/**
+ * The `Drawer.Content` component uses this component to wrap the drawer content.
+ * It accepts props from the [Radix UI Dialog Portal](https://www.radix-ui.com/primitives/docs/components/dialog#portal) component.
+ */
+declare const DrawerPortal: {
+    (props: DrawerPortalProps): React.JSX.Element;
+    displayName: string;
+};
+interface DrawerOverlayProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Overlay> {
+}
+/**
+ * This component is used to create the overlay for the drawer.
+ * It accepts props from the [Radix UI Dialog Overlay](https://www.radix-ui.com/primitives/docs/components/dialog#overlay) component.
+ */
+declare const DrawerOverlay: React.ForwardRefExoticComponent<DrawerOverlayProps & React.RefAttributes<HTMLDivElement>>;
+interface DrawerContentProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Content> {
+    /**
+     * Props for the overlay component.
+     * It accepts props from the [Radix UI Dialog Overlay](https://www.radix-ui.com/primitives/docs/components/dialog#overlay) component.
+    */
+    overlayProps?: React.ComponentPropsWithoutRef<typeof DrawerOverlay>;
+    /**
+     * Props for the portal component that wraps the drawer content.
+     * It accepts props from the [Radix UI Dialog Portal](https://www.radix-ui.com/primitives/docs/components/dialog#portal) component.
+     */
+    portalProps?: React.ComponentPropsWithoutRef<typeof DrawerPortal>;
+}
+interface DrawerHeaderProps extends React.ComponentPropsWithoutRef<"div"> {
+}
+interface DrawerBodyProps extends React.ComponentPropsWithoutRef<"div"> {
+}
+interface DrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+interface DrawerDescriptionProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Description> {
+}
+declare const Drawer: {
+    (props: DrawerRootProps): React.JSX.Element;
+    displayName: string;
+} & {
+    Body: React.ForwardRefExoticComponent<DrawerBodyProps & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<DrawerCloseProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
+    Description: React.ForwardRefExoticComponent<DrawerDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+    Footer: {
+        ({ className, ...props }: DrawerFooterProps): React.JSX.Element;
+        displayName: string;
+    };
+    Header: React.ForwardRefExoticComponent<DrawerHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<RadixDialog.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+    Trigger: React.ForwardRefExoticComponent<DrawerTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+};
+export { Drawer };
+//# sourceMappingURL=drawer.d.ts.map

package/dist/cjs/components/drawer/drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,UAAU,CAAA;AAChD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,UAAU,eAAgB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC;CAAG;AAY5F,UAAU,kBAAmB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC;CAAG;AAgBlG,UAAU,gBAAiB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,WAAW,CAAC,KAAK,CAAC;CAAG;AAgB9F,UAAU,iBAAkB,SAAQ,WAAW,CAAC,iBAAiB;CAAG;AAEpE;;;GAGG;AACH,QAAA,MAAM,YAAY;YAAW,iBAAiB;;CAE7C,CAAA;AAGD,UAAU,kBAAmB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC;CAAG;AAElG;;;GAGG;AACH,QAAA,MAAM,aAAa,2FAejB,CAAA;AAGF,UAAU,kBAAmB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC;IAC7F;;;MAGE;IACF,YAAY,CAAC,EAAE,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,CAAA;IACnE;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,wBAAwB,CAAC,OAAO,YAAY,CAAC,CAAA;CAClE;AA2BD,UAAU,iBAAkB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;CAAG;AA8B5E,UAAU,eAAgB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;CAAG;AAgB1E,UAAU,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AA6B3E,UAAU,sBAAuB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,WAAW,CAAC,WAAW,CAAC;CAAG;AAqB1G,QAAA,MAAM,MAAM;YA/MH,eAAe;;;;;;;;kCAsKrB,iBAAiB;;;;;;CAkDlB,CAAA;AAEF,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/cjs/components/drawer/drawer.js

@@ -0,0 +1,116 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Drawer = void 0;
+const tslib_1 = require("tslib");
+const icons_1 = require("@acmekit/icons");
+const radix_ui_1 = require("radix-ui");
+const React = tslib_1.__importStar(require("react"));
+const icon_button_1 = require("../icon-button");
+const kbd_1 = require("../kbd");
+const text_1 = require("../text");
+const clx_1 = require("../../utils/clx");
+/**
+ * This component is based on the [Radix UI Dialog](https://www.radix-ui.com/primitives/docs/components/dialog) primitives.
+ */
+const DrawerRoot = (props) => {
+    return React.createElement(radix_ui_1.Dialog.Root, { ...props });
+};
+DrawerRoot.displayName = "Drawer";
+/**
+ * This component is used to create the trigger button that opens the drawer.
+ * It accepts props from the [Radix UI Dialog Trigger](https://www.radix-ui.com/primitives/docs/components/dialog#trigger) component.
+ */
+const DrawerTrigger = React.forwardRef(({ className, ...props }, ref) => {
+    return (React.createElement(radix_ui_1.Dialog.Trigger, { ref: ref, className: (0, clx_1.clx)(className), ...props }));
+});
+DrawerTrigger.displayName = "Drawer.Trigger";
+/**
+ * This component is used to create the close button for the drawer.
+ * It accepts props from the [Radix UI Dialog Close](https://www.radix-ui.com/primitives/docs/components/dialog#close) component.
+ */
+const DrawerClose = React.forwardRef(({ className, ...props }, ref) => {
+    return (React.createElement(radix_ui_1.Dialog.Close, { ref: ref, className: (0, clx_1.clx)(className), ...props }));
+});
+DrawerClose.displayName = "Drawer.Close";
+/**
+ * The `Drawer.Content` component uses this component to wrap the drawer content.
+ * It accepts props from the [Radix UI Dialog Portal](https://www.radix-ui.com/primitives/docs/components/dialog#portal) component.
+ */
+const DrawerPortal = (props) => {
+    return React.createElement(radix_ui_1.Dialog.DialogPortal, { ...props });
+};
+DrawerPortal.displayName = "Drawer.Portal";
+/**
+ * This component is used to create the overlay for the drawer.
+ * It accepts props from the [Radix UI Dialog Overlay](https://www.radix-ui.com/primitives/docs/components/dialog#overlay) component.
+ */
+const DrawerOverlay = React.forwardRef(({ className, ...props }, ref) => {
+    return (React.createElement(radix_ui_1.Dialog.Overlay, { ref: ref, className: (0, clx_1.clx)("bg-ui-bg-overlay fixed inset-0", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props }));
+});
+DrawerOverlay.displayName = "Drawer.Overlay";
+/**
+ * This component wraps the content of the drawer.
+ * It accepts props from the [Radix UI Dialog Content](https://www.radix-ui.com/primitives/docs/components/dialog#content) component.
+ */
+const DrawerContent = React.forwardRef(({ className, overlayProps, portalProps, ...props }, ref) => {
+    return (React.createElement(DrawerPortal, { ...portalProps },
+        React.createElement(DrawerOverlay, { ...overlayProps }),
+        React.createElement(radix_ui_1.Dialog.Content, { ref: ref, className: (0, clx_1.clx)("bg-ui-bg-base shadow-elevation-modal border-ui-border-base fixed inset-y-2 flex w-full flex-1 flex-col rounded-lg border outline-none max-sm:inset-x-2 max-sm:w-[calc(100%-16px)] sm:right-2 sm:max-w-[560px]", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-right-1/2 data-[state=open]:slide-in-from-right-1/2 duration-200", className), ...props })));
+});
+DrawerContent.displayName = "Drawer.Content";
+/**
+ * This component is used to wrap the header content of the drawer.
+ * This component is based on the `div` element and supports all of its props.
+ */
+const DrawerHeader = React.forwardRef(({ children, className, ...props }, ref) => {
+    return (React.createElement("div", { ref: ref, className: "border-ui-border-base flex items-start justify-between gap-x-4 border-b px-6 py-4", ...props },
+        React.createElement("div", { className: (0, clx_1.clx)("flex flex-col gap-y-1", className) }, children),
+        React.createElement("div", { className: "flex items-center gap-x-2" },
+            React.createElement(kbd_1.Kbd, null, "esc"),
+            React.createElement(radix_ui_1.Dialog.Close, { asChild: true },
+                React.createElement(icon_button_1.IconButton, { size: "small", type: "button", variant: "transparent" },
+                    React.createElement(icons_1.XMark, null))))));
+});
+DrawerHeader.displayName = "Drawer.Header";
+/**
+ * This component is used to wrap the body content of the drawer.
+ * This component is based on the `div` element and supports all of its props
+ */
+const DrawerBody = React.forwardRef(({ className, ...props }, ref) => {
+    return (React.createElement("div", { ref: ref, className: (0, clx_1.clx)("flex-1 px-6 py-4", className), ...props }));
+});
+DrawerBody.displayName = "Drawer.Body";
+/**
+ * This component is used to wrap the footer content of the drawer.
+ * This component is based on the `div` element and supports all of its props.
+ */
+const DrawerFooter = ({ className, ...props }) => {
+    return (React.createElement("div", { className: (0, clx_1.clx)("border-ui-border-base flex items-center justify-end space-x-2 overflow-y-auto border-t px-6 py-4", className), ...props }));
+};
+DrawerFooter.displayName = "Drawer.Footer";
+/**
+ * This component adds an accessible title to the drawer.
+ * It accepts props from the [Radix UI Dialog Title](https://www.radix-ui.com/primitives/docs/components/dialog#title) component.
+ */
+const DrawerTitle = radix_ui_1.Dialog.Title;
+DrawerTitle.displayName = "Drawer.Title";
+/**
+ * This component adds accessible description to the drawer.
+ * It accepts props from the [Radix UI Dialog Description](https://www.radix-ui.com/primitives/docs/components/dialog#description) component.
+ */
+const DrawerDescription = React.forwardRef(({ className, children, ...props }, ref) => (React.createElement(radix_ui_1.Dialog.Description, { ref: ref, className: (0, clx_1.clx)(className), asChild: true, ...props },
+    React.createElement(text_1.Text, null, children))));
+DrawerDescription.displayName = "Drawer.Description";
+const Drawer = Object.assign(DrawerRoot, {
+    Body: DrawerBody,
+    Close: DrawerClose,
+    Content: DrawerContent,
+    Description: DrawerDescription,
+    Footer: DrawerFooter,
+    Header: DrawerHeader,
+    Title: DrawerTitle,
+    Trigger: DrawerTrigger,
+});
+exports.Drawer = Drawer;
+//# sourceMappingURL=drawer.js.map