@acmekit/ui 4.1.1

package/dist/esm/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,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAGL,YAAY,EACZ,SAAS,GACV,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAEjD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAMzB,MAAM,qBAAqB,GAAG,GAAG,CAAC;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,SAAS,EAAE,CAAA;IAE9B,MAAM,KAAK,GAAG,iBAAiB,CAAC;QAC9B,GAAG,KAAK;QACR,MAAM;QACN,cAAc;KACf,CAAC,CAAA;IAEF,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC9C,MAAM,EAAE,UAAU,EAAE,GAAG,YAAY,CAAC,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,WAAW,IAAC,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAI,CAAA;IACpE,CAAC,CAAC,CACE,CACP,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,eAAe,EAAE,CAAA","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/esm/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/esm/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/esm/components/date-picker/date-picker.js

@@ -0,0 +1,106 @@
+"use client";
+import { getLocalTimeZone, } from "@internationalized/date";
+import { CalendarMini, Clock, XMarkMini } from "@acmekit/icons";
+import { cva } from "cva";
+import * as React from "react";
+import { useDatePicker, useInteractOutside, } from "react-aria";
+import { useDatePickerState } from "react-stately";
+import { InternalCalendar } from "../calendar";
+import { Popover } from "../popover";
+import { TimeInput } from "../time-input";
+import { createCalendarDateFromDate, getDefaultCalendarDateFromDate, updateCalendarDateFromDate, } from "../../utils/calendar";
+import { clx } from "../../utils/clx";
+import { DatePickerButton } from "./date-picker-button";
+import { DatePickerClearButton } from "./date-picker-clear-button";
+import { DatePickerField } from "./date-picker-field";
+const datePickerStyles = (isOpen, isInvalid, value) => cva({
+    base: 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: clx("grid-cols-[28px_1fr]", {
+                "grid-cols-[28px_1fr_28px]": !!value,
+            }),
+            base: 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(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 = useDatePickerState({
+        ..._props,
+        shouldCloseOnSelect,
+    });
+    const { groupProps, fieldProps, buttonProps, dialogProps, calendarProps } = useDatePicker(_props, state, innerRef);
+    React.useEffect(() => {
+        setValue(props.value
+            ? updateCalendarDateFromDate(value, props.value, props.granularity)
+            : null);
+        state.setValue(props.value
+            ? 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);
+    }
+    useInteractOutside({
+        ref: contentRef,
+        onInteractOutside: () => {
+            state.setOpen(false);
+        },
+    });
+    const hasTime = props.granularity && HAS_TIME.has(props.granularity);
+    const Icon = hasTime ? Clock : CalendarMini;
+    return (React.createElement(Popover, { modal: modal, open: state.isOpen, onOpenChange: state.setOpen },
+        React.createElement(Popover.Anchor, { asChild: true },
+            React.createElement("div", { ref: ref, className: clx(datePickerStyles(state.isOpen, state.isInvalid, state.value)({ size }), className), ...groupProps },
+                React.createElement(DatePickerButton, { ...buttonProps, size: size },
+                    React.createElement(Icon, null)),
+                React.createElement(DatePickerField, { ...fieldProps, size: size }),
+                !!state.value && (React.createElement(DatePickerClearButton, { onClick: clear },
+                    React.createElement(XMarkMini, null))))),
+        React.createElement(Popover.Content, { ref: contentRef, ...dialogProps, className: "flex flex-col divide-y p-0" },
+            React.createElement("div", { className: "p-3" },
+                React.createElement(InternalCalendar, { autoFocus: true, ...calendarProps })),
+            state.hasTime && (React.createElement("div", { className: "p-3" },
+                React.createElement(TimeInput, { value: state.timeValue, onChange: (value) => state.setTimeValue(value), hourCycle: props.hourCycle }))))));
+});
+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(getLocalTimeZone()) : null);
+    };
+    const isDateUnavailable = (date) => {
+        const _date = date.toDate(getLocalTimeZone());
+        return _isDateUnavailable ? _isDateUnavailable(_date) : false;
+    };
+    return {
+        ...rest,
+        onChange: onChange,
+        isDateUnavailable,
+        minValue: minValue
+            ? createCalendarDateFromDate(minValue, props.granularity)
+            : minValue,
+        maxValue: maxValue
+            ? createCalendarDateFromDate(maxValue, props.granularity)
+            : maxValue,
+    };
+}
+export { DatePicker };
+//# sourceMappingURL=date-picker.js.map

package/dist/esm/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/esm/components/date-picker/index.d.ts

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

package/dist/esm/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/esm/components/date-picker/index.js

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

package/dist/esm/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,cAAc,eAAe,CAAA","sourcesContent":["export * from \"./date-picker\"\n"]}

package/dist/esm/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/esm/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/esm/components/date-segment/date-segment.js

@@ -0,0 +1,30 @@
+"use client";
+import * as React from "react";
+import { useDateSegment } from "react-aria";
+import { clx } from "../../utils/clx";
+const DateSegment = ({ segment, state }) => {
+    const ref = React.useRef(null);
+    const { segmentProps } = 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: 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)));
+};
+export { DateSegment };
+//# sourceMappingURL=date-segment.js.map

package/dist/esm/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,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAG3C,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAA;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,cAAc,CAAC,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,GAAG,CACZ,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;AAED,OAAO,EAAE,WAAW,EAAE,CAAA","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/esm/components/date-segment/index.d.ts

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

package/dist/esm/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/esm/components/date-segment/index.js

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

package/dist/esm/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,cAAc,gBAAgB,CAAA","sourcesContent":["export * from \"./date-segment\"\n"]}

package/dist/esm/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/esm/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/esm/components/divider/divider.js

@@ -0,0 +1,12 @@
+import { clx } from "../../utils/clx";
+import * as React from "react";
+export const Divider = ({ orientation = "horizontal", variant = "solid", className, ...props }) => {
+    return (React.createElement("div", { "aria-orientation": orientation, role: "separator", className: 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 }));
+};
+//# sourceMappingURL=divider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../../../src/components/divider/divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAA;AACjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,MAAM,CAAC,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,GAAG,CACZ,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","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/esm/components/divider/index.d.ts

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

package/dist/esm/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/esm/components/divider/index.js

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

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

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

package/dist/esm/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/esm/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/esm/components/drawer/drawer.js

@@ -0,0 +1,112 @@
+"use client";
+import { XMark } from "@acmekit/icons";
+import { Dialog as RadixDialog } from "radix-ui";
+import * as React from "react";
+import { IconButton } from "../icon-button";
+import { Kbd } from "../kbd";
+import { Text } from "../text";
+import { clx } from "../../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(RadixDialog.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(RadixDialog.Trigger, { ref: ref, className: 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(RadixDialog.Close, { ref: ref, className: 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(RadixDialog.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(RadixDialog.Overlay, { ref: ref, className: 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(RadixDialog.Content, { ref: ref, className: 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: clx("flex flex-col gap-y-1", className) }, children),
+        React.createElement("div", { className: "flex items-center gap-x-2" },
+            React.createElement(Kbd, null, "esc"),
+            React.createElement(RadixDialog.Close, { asChild: true },
+                React.createElement(IconButton, { size: "small", type: "button", variant: "transparent" },
+                    React.createElement(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: 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: 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 = RadixDialog.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(RadixDialog.Description, { ref: ref, className: clx(className), asChild: true, ...props },
+    React.createElement(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,
+});
+export { Drawer };
+//# sourceMappingURL=drawer.js.map

package/dist/esm/components/drawer/drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport { XMark } from \"@acmekit/icons\"\nimport { Dialog as RadixDialog } from \"radix-ui\"\nimport * as React from \"react\"\n\nimport { IconButton } from \"@/components/icon-button\"\nimport { Kbd } from \"@/components/kbd\"\nimport { Text } from \"@/components/text\"\nimport { clx } from \"@/utils/clx\"\n\ninterface DrawerRootProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Root> {}\n\n/**\n * This component is based on the [Radix UI Dialog](https://www.radix-ui.com/primitives/docs/components/dialog) primitives.\n */\nconst DrawerRoot = (\n  props: DrawerRootProps\n) => {\n  return <RadixDialog.Root {...props} />\n}\nDrawerRoot.displayName = \"Drawer\"\n\ninterface DrawerTriggerProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Trigger> {}\n\n/**\n * This component is used to create the trigger button that opens the drawer.\n * It accepts props from the [Radix UI Dialog Trigger](https://www.radix-ui.com/primitives/docs/components/dialog#trigger) component.\n */\nconst DrawerTrigger = React.forwardRef<\n  React.ElementRef<typeof RadixDialog.Trigger>,\n  DrawerTriggerProps\n>(({ className, ...props }: DrawerTriggerProps, ref) => {\n  return (\n    <RadixDialog.Trigger ref={ref} className={clx(className)} {...props} />\n  )\n})\nDrawerTrigger.displayName = \"Drawer.Trigger\"\n\ninterface DrawerCloseProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Close> {}\n\n/**\n * This component is used to create the close button for the drawer.\n * It accepts props from the [Radix UI Dialog Close](https://www.radix-ui.com/primitives/docs/components/dialog#close) component.\n */\nconst DrawerClose = React.forwardRef<\n  React.ElementRef<typeof RadixDialog.Close>,\n  DrawerCloseProps\n>(({ className, ...props }: DrawerCloseProps, ref) => {\n  return (\n    <RadixDialog.Close ref={ref} className={clx(className)} {...props} />\n  )\n})\nDrawerClose.displayName = \"Drawer.Close\"\n\ninterface DrawerPortalProps extends RadixDialog.DialogPortalProps {}\n\n/**\n * The `Drawer.Content` component uses this component to wrap the drawer content.\n * It accepts props from the [Radix UI Dialog Portal](https://www.radix-ui.com/primitives/docs/components/dialog#portal) component.\n */\nconst DrawerPortal = (props: DrawerPortalProps) => {\n  return <RadixDialog.DialogPortal {...props} />\n}\nDrawerPortal.displayName = \"Drawer.Portal\"\n\ninterface DrawerOverlayProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Overlay> {}\n\n/**\n * This component is used to create the overlay for the drawer.\n * It accepts props from the [Radix UI Dialog Overlay](https://www.radix-ui.com/primitives/docs/components/dialog#overlay) component.\n */\nconst DrawerOverlay = React.forwardRef<\n  React.ElementRef<typeof RadixDialog.Overlay>,\n  DrawerOverlayProps\n>(({ className, ...props }: DrawerOverlayProps, ref) => {\n  return (\n    <RadixDialog.Overlay\n      ref={ref}\n      className={clx(\n        \"bg-ui-bg-overlay fixed inset-0\",\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nDrawerOverlay.displayName = \"Drawer.Overlay\"\n\ninterface DrawerContentProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Content> {\n  /**\n   * Props for the overlay component.\n   * It accepts props from the [Radix UI Dialog Overlay](https://www.radix-ui.com/primitives/docs/components/dialog#overlay) component.\n  */\n  overlayProps?: React.ComponentPropsWithoutRef<typeof DrawerOverlay>\n  /**\n   * Props for the portal component that wraps the drawer content.\n   * It accepts props from the [Radix UI Dialog Portal](https://www.radix-ui.com/primitives/docs/components/dialog#portal) component.\n   */\n  portalProps?: React.ComponentPropsWithoutRef<typeof DrawerPortal>\n}\n\n/**\n * This component wraps the content of the drawer.\n * It accepts props from the [Radix UI Dialog Content](https://www.radix-ui.com/primitives/docs/components/dialog#content) component.\n */\nconst DrawerContent = React.forwardRef<\n  React.ElementRef<typeof RadixDialog.Content>,\n  DrawerContentProps\n>(({ className, overlayProps, portalProps, ...props }: DrawerContentProps, ref) => {\n  return (\n    <DrawerPortal {...portalProps}>\n      <DrawerOverlay {...overlayProps} />\n      <RadixDialog.Content\n        ref={ref}\n        className={clx(\n          \"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]\",\n          \"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\",\n          className\n        )}\n        {...props}\n      />\n    </DrawerPortal>\n  )\n})\nDrawerContent.displayName = \"Drawer.Content\"\n\ninterface DrawerHeaderProps extends React.ComponentPropsWithoutRef<\"div\"> {}\n\n/**\n * This component is used to wrap the header content of the drawer.\n * This component is based on the `div` element and supports all of its props.\n */\nconst DrawerHeader = React.forwardRef<\n  HTMLDivElement,\n  DrawerHeaderProps\n>(({ children, className, ...props }: DrawerHeaderProps, ref) => {\n  return (\n    <div\n      ref={ref}\n      className=\"border-ui-border-base flex items-start justify-between gap-x-4 border-b px-6 py-4\"\n      {...props}\n    >\n      <div className={clx(\"flex flex-col gap-y-1\", className)}>{children}</div>\n      <div className=\"flex items-center gap-x-2\">\n        <Kbd>esc</Kbd>\n        <RadixDialog.Close asChild>\n          <IconButton size=\"small\" type=\"button\" variant=\"transparent\">\n            <XMark />\n          </IconButton>\n        </RadixDialog.Close>\n      </div>\n    </div>\n  )\n})\nDrawerHeader.displayName = \"Drawer.Header\"\n\ninterface DrawerBodyProps extends React.ComponentPropsWithoutRef<\"div\"> {}\n\n/**\n * This component is used to wrap the body content of the drawer.\n * This component is based on the `div` element and supports all of its props\n */\nconst DrawerBody = React.forwardRef<\n  HTMLDivElement,\n  DrawerBodyProps\n>(({ className, ...props }: DrawerBodyProps, ref) => {\n  return (\n    <div ref={ref} className={clx(\"flex-1 px-6 py-4\", className)} {...props} />\n  )\n})\nDrawerBody.displayName = \"Drawer.Body\"\n\ninterface DrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * This component is used to wrap the footer content of the drawer.\n * This component is based on the `div` element and supports all of its props.\n */\nconst DrawerFooter = ({\n  className,\n  ...props\n}: DrawerFooterProps) => {\n  return (\n    <div\n      className={clx(\n        \"border-ui-border-base flex items-center justify-end space-x-2 overflow-y-auto border-t px-6 py-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nDrawerFooter.displayName = \"Drawer.Footer\"\n\n/**\n * This component adds an accessible title to the drawer.\n * It accepts props from the [Radix UI Dialog Title](https://www.radix-ui.com/primitives/docs/components/dialog#title) component.\n */\nconst DrawerTitle = RadixDialog.Title\nDrawerTitle.displayName = \"Drawer.Title\"\n\ninterface DrawerDescriptionProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Description> {}\n\n/**\n * This component adds accessible description to the drawer.\n * It accepts props from the [Radix UI Dialog Description](https://www.radix-ui.com/primitives/docs/components/dialog#description) component.\n */\nconst DrawerDescription = React.forwardRef<\n  React.ElementRef<typeof RadixDialog.Description>,\n  DrawerDescriptionProps\n>(({ className, children, ...props }: DrawerDescriptionProps, ref) => (\n  <RadixDialog.Description\n    ref={ref}\n    className={clx(className)}\n    asChild\n    {...props}\n  >\n    <Text>{children}</Text>\n  </RadixDialog.Description>\n))\nDrawerDescription.displayName = \"Drawer.Description\"\n\nconst Drawer = Object.assign(DrawerRoot, {\n  Body: DrawerBody,\n  Close: DrawerClose,\n  Content: DrawerContent,\n  Description: DrawerDescription,\n  Footer: DrawerFooter,\n  Header: DrawerHeader,\n  Title: DrawerTitle,\n  Trigger: DrawerTrigger,\n})\n\nexport { Drawer }\n"]}

package/dist/esm/components/drawer/index.d.ts

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

package/dist/esm/components/drawer/index.d.ts.map

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

package/dist/esm/components/drawer/index.js

@@ -0,0 +1,2 @@
+export * from "./drawer";
+//# sourceMappingURL=index.js.map

package/dist/esm/components/drawer/index.js.map

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

package/dist/esm/components/dropdown-menu/dropdown-menu.d.ts

@@ -0,0 +1,26 @@
+import { DropdownMenu as RadixDropdownMenu } from "radix-ui";
+import * as React from "react";
+declare const DropdownMenu: React.FC<RadixDropdownMenu.DropdownMenuProps> & {
+    Trigger: React.ForwardRefExoticComponent<RadixDropdownMenu.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Group: React.ForwardRefExoticComponent<RadixDropdownMenu.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+    SubMenu: React.FC<RadixDropdownMenu.DropdownMenuSubProps>;
+    SubMenuContent: React.ForwardRefExoticComponent<Omit<RadixDropdownMenu.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    SubMenuTrigger: React.ForwardRefExoticComponent<Omit<RadixDropdownMenu.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<RadixDropdownMenu.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<RadixDropdownMenu.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    CheckboxItem: React.ForwardRefExoticComponent<Omit<RadixDropdownMenu.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    RadioGroup: React.ForwardRefExoticComponent<RadixDropdownMenu.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+    RadioItem: React.ForwardRefExoticComponent<Omit<RadixDropdownMenu.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<Omit<RadixDropdownMenu.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Separator: React.ForwardRefExoticComponent<Omit<RadixDropdownMenu.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Shortcut: {
+        ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+        displayName: string;
+    };
+    Hint: {
+        ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+        displayName: string;
+    };
+};
+export { DropdownMenu };
+//# sourceMappingURL=dropdown-menu.d.ts.map

package/dist/esm/components/dropdown-menu/dropdown-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,IAAI,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAsR9B,QAAA,MAAM,YAAY;;;;;;;;;;;;;;kCAhCf,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;;;;kCAmBrC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;;;CA4BtC,CAAA;AAEF,OAAO,EAAE,YAAY,EAAE,CAAA"}