@pautena/react-design-system 2.0.0-alpha.1b → 2.0.0-alpha.5

package/dist/components/confirm-dialog/confirm-dialog.mjs

@@ -0,0 +1,75 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { useState as g } from "react";
+import { TextField as u } from "../forms/text-field/text-field.mjs";
+import { AlertDialog as b, AlertDialogContent as A, AlertDialogCancel as c, AlertDialogHeader as C, AlertDialogTitle as v, AlertDialogDescription as x, AlertDialogFooter as N, AlertDialogAction as P } from "../ui/alert-dialog.mjs";
+import w from "../../node_modules/lucide-react/dist/esm/icons/x.mjs";
+import j from "../../node_modules/lucide-react/dist/esm/icons/loader-circle.mjs";
+function X({
+  open: d,
+  title: m,
+  loading: l = !1,
+  disabled: r = !1,
+  confirmText: o = "Confirm",
+  cancelText: h = "Cancel",
+  passphrase: a,
+  children: t,
+  onConfirm: f,
+  onCancel: p
+}) {
+  const [n, D] = g("");
+  return /* @__PURE__ */ e(
+    b,
+    {
+      open: d,
+      onOpenChange: (s) => {
+        s || p();
+      },
+      children: /* @__PURE__ */ i(A, { className: "sm:max-w-md", children: [
+        /* @__PURE__ */ e("div", { className: "absolute right-4 top-4", children: /* @__PURE__ */ e(
+          c,
+          {
+            variant: "ghost",
+            size: "icon-sm",
+            "aria-label": "close",
+            disabled: r || l,
+            children: /* @__PURE__ */ e(w, { className: "h-4 w-4", "aria-hidden": "true" })
+          }
+        ) }),
+        /* @__PURE__ */ i(C, { children: [
+          /* @__PURE__ */ e(v, { children: m }),
+          t ? /* @__PURE__ */ e(x, { children: t }) : null
+        ] }),
+        a ? /* @__PURE__ */ e(
+          u,
+          {
+            label: "Passphrase",
+            placeholder: a,
+            value: n,
+            onChange: (s) => D(s.target.value),
+            fullWidth: !0,
+            size: "small"
+          }
+        ) : null,
+        /* @__PURE__ */ i(N, { children: [
+          /* @__PURE__ */ e(c, { disabled: r || l, children: h }),
+          /* @__PURE__ */ e(P, { onClick: f, disabled: r || l || !(!a || n === a), children: l ? /* @__PURE__ */ i("span", { className: "inline-flex items-center gap-2", children: [
+            /* @__PURE__ */ e(
+              j,
+              {
+                role: "progressbar",
+                "aria-label": "loading",
+                className: "h-4 w-4 animate-spin"
+              }
+            ),
+            o
+          ] }) : o })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  X as ConfirmDialog,
+  X as default
+};
+//# sourceMappingURL=confirm-dialog.mjs.map

package/dist/components/confirm-dialog/confirm-dialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirm-dialog.mjs","sources":["../../../src/components/confirm-dialog/confirm-dialog.tsx"],"sourcesContent":["import { Loader2, X } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { useState } from \"react\";\nimport TextField from \"@/components/forms/text-field\";\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n} from \"@/components/ui/alert-dialog\";\n\n/**\n * Props for the ConfirmDialog component.\n */\nexport interface ConfirmDialogProps {\n  /**\n   * Whether the dialog is open.\n   */\n  open: boolean;\n  /**\n   * Dialog title.\n   */\n  title: string;\n  /**\n   * Whether the dialog is in a loading state.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Whether the dialog is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Text to display on the confirm button.\n   * @default \"Confirm\"\n   */\n  confirmText?: string;\n  /**\n   * Text to display on the cancel button.\n   * @default \"Cancel\"\n   */\n  cancelText?: string;\n  /**\n   * Optional passphrase for additional confirmation.\n   */\n  passphrase?: string;\n  /**\n   * Optional content rendered inside the dialog.\n   */\n  children?: ReactNode;\n  /**\n   * Callback function to handle cancel action.\n   */\n  onCancel: () => void;\n  /**\n   * Callback function to handle confirm action.\n   */\n  onConfirm: () => void;\n}\n\n/**\n * Confirm dialog for destructive or critical actions.\n */\nexport function ConfirmDialog({\n  open,\n  title,\n  loading = false,\n  disabled = false,\n  confirmText = \"Confirm\",\n  cancelText = \"Cancel\",\n  passphrase,\n  children,\n  onConfirm,\n  onCancel,\n}: ConfirmDialogProps) {\n  const [inputPassphrase, setInputPassphrase] = useState(\"\");\n  const validPassphrase = !passphrase || inputPassphrase === passphrase;\n  const closeDisabled = disabled || loading;\n  const cancelDisabled = disabled || loading;\n  const confirmDisabled = disabled || loading || !validPassphrase;\n\n  return (\n    <AlertDialog\n      open={open}\n      onOpenChange={(nextOpen) => {\n        if (!nextOpen) {\n          onCancel();\n        }\n      }}\n    >\n      <AlertDialogContent className=\"sm:max-w-md\">\n        <div className=\"absolute right-4 top-4\">\n          <AlertDialogCancel\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            aria-label=\"close\"\n            disabled={closeDisabled}\n          >\n            <X className=\"h-4 w-4\" aria-hidden=\"true\" />\n          </AlertDialogCancel>\n        </div>\n        <AlertDialogHeader>\n          <AlertDialogTitle>{title}</AlertDialogTitle>\n          {children ? (\n            <AlertDialogDescription>{children}</AlertDialogDescription>\n          ) : null}\n        </AlertDialogHeader>\n\n        {passphrase ? (\n          <TextField\n            label=\"Passphrase\"\n            placeholder={passphrase}\n            value={inputPassphrase}\n            onChange={(event) => setInputPassphrase(event.target.value)}\n            fullWidth\n            size=\"small\"\n          />\n        ) : null}\n\n        <AlertDialogFooter>\n          <AlertDialogCancel disabled={cancelDisabled}>\n            {cancelText}\n          </AlertDialogCancel>\n          <AlertDialogAction onClick={onConfirm} disabled={confirmDisabled}>\n            {loading ? (\n              <span className=\"inline-flex items-center gap-2\">\n                <Loader2\n                  role=\"progressbar\"\n                  aria-label=\"loading\"\n                  className=\"h-4 w-4 animate-spin\"\n                />\n                {confirmText}\n              </span>\n            ) : (\n              confirmText\n            )}\n          </AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n}\n\nexport default ConfirmDialog;\n"],"names":["ConfirmDialog","open","title","loading","disabled","confirmText","cancelText","passphrase","children","onConfirm","onCancel","inputPassphrase","setInputPassphrase","useState","jsx","AlertDialog","nextOpen","jsxs","AlertDialogContent","AlertDialogCancel","X","AlertDialogHeader","AlertDialogTitle","AlertDialogDescription","TextField","event","AlertDialogFooter","AlertDialogAction","Loader2"],"mappings":";;;;;;AAoEO,SAASA,EAAc;AAAA,EAC5B,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,aAAAC,IAAc;AAAA,EACd,YAAAC,IAAa;AAAA,EACb,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AACF,GAAuB;AACrB,QAAM,CAACC,GAAiBC,CAAkB,IAAIC,EAAS,EAAE;AAMzD,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAd;AAAA,MACA,cAAc,CAACe,MAAa;AAC1B,QAAKA,KACHN,EAAA;AAAA,MAEJ;AAAA,MAEA,UAAA,gBAAAO,EAACC,GAAA,EAAmB,WAAU,eAC5B,UAAA;AAAA,QAAA,gBAAAJ,EAAC,OAAA,EAAI,WAAU,0BACb,UAAA,gBAAAA;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,cAAW;AAAA,YACX,UAnBYf,KAAYD;AAAA,YAqBxB,UAAA,gBAAAW,EAACM,GAAA,EAAE,WAAU,WAAU,eAAY,OAAA,CAAO;AAAA,UAAA;AAAA,QAAA,GAE9C;AAAA,0BACCC,GAAA,EACC,UAAA;AAAA,UAAA,gBAAAP,EAACQ,KAAkB,UAAApB,EAAA,CAAM;AAAA,UACxBM,IACC,gBAAAM,EAACS,GAAA,EAAwB,UAAAf,EAAA,CAAS,IAChC;AAAA,QAAA,GACN;AAAA,QAECD,IACC,gBAAAO;AAAA,UAACU;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,aAAajB;AAAA,YACb,OAAOI;AAAA,YACP,UAAU,CAACc,MAAUb,EAAmBa,EAAM,OAAO,KAAK;AAAA,YAC1D,WAAS;AAAA,YACT,MAAK;AAAA,UAAA;AAAA,QAAA,IAEL;AAAA,0BAEHC,GAAA,EACC,UAAA;AAAA,UAAA,gBAAAZ,EAACK,GAAA,EAAkB,UA1CJf,KAAYD,GA2CxB,UAAAG,GACH;AAAA,UACA,gBAAAQ,EAACa,GAAA,EAAkB,SAASlB,GAAW,UA5CvBL,KAAYD,KAAW,EAHvB,CAACI,KAAcI,MAAoBJ,IAgDhD,UAAAJ,IACC,gBAAAc,EAAC,QAAA,EAAK,WAAU,kCACd,UAAA;AAAA,YAAA,gBAAAH;AAAA,cAACc;AAAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,cAAW;AAAA,gBACX,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,YAEXvB;AAAA,UAAA,EAAA,CACH,IAEAA,EAAA,CAEJ;AAAA,QAAA,EAAA,CACF;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/confirm-dialog/index.d.ts

@@ -0,0 +1,2 @@
+export type { ConfirmDialogProps } from './confirm-dialog';
+export { default, default as ConfirmDialog } from './confirm-dialog';

package/dist/components/content/content.d.ts

@@ -0,0 +1,15 @@
+import { HTMLAttributes } from 'react';
+/**
+ * Props for the Content component.
+ */
+export interface ContentProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Content rendered inside the main container.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Main page content container.
+ */
+export declare function Content({ children, className, ...props }: ContentProps): import("react/jsx-runtime").JSX.Element;
+export default Content;

package/dist/components/content/content.mjs

@@ -0,0 +1,20 @@
+import { jsx as e } from "react/jsx-runtime";
+import { cn as n } from "../../lib/utils.mjs";
+function a({ children: m, className: t, ...x }) {
+  return /* @__PURE__ */ e(
+    "main",
+    {
+      className: n(
+        "mx-auto w-full max-w-screen-xl flex-1 px-4 py-6 sm:px-6 lg:px-8",
+        t
+      ),
+      ...x,
+      children: m
+    }
+  );
+}
+export {
+  a as Content,
+  a as default
+};
+//# sourceMappingURL=content.mjs.map

package/dist/components/content/content.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.mjs","sources":["../../../src/components/content/content.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Props for the Content component.\n */\nexport interface ContentProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Content rendered inside the main container.\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Main page content container.\n */\nexport function Content({ children, className, ...props }: ContentProps) {\n  return (\n    <main\n      className={cn(\n        \"mx-auto w-full max-w-screen-xl flex-1 px-4 py-6 sm:px-6 lg:px-8\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </main>\n  );\n}\n\nexport default Content;\n"],"names":["Content","children","className","props","jsx","cn"],"mappings":";;AAgBO,SAASA,EAAQ,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,KAAuB;AACvE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAH;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/content/index.d.ts

@@ -0,0 +1,2 @@
+export type { ContentProps } from './content';
+export { default, default as Content } from './content';

package/dist/components/date-range-calendar/date-range-calendar.d.ts

@@ -0,0 +1,22 @@
+type DateRange = [Date, Date | undefined];
+/**
+ * Props for the DateRangeCalendar component.
+ */
+export interface DateRangeCalendarProps {
+    /**
+     * The default date range value.
+     */
+    defaultValue: DateRange;
+    /**
+     * Callback function that is called when the date range value changes.
+     *
+     * @param value - The new date range value.
+     * @param updatedIndex - The index of the updated date range.
+     */
+    onValueChange: (value: DateRange, updatedIndex: number) => void;
+}
+/**
+ * A date range calendar component that allows users to select a range of dates.
+ */
+export declare function DateRangeCalendar({ defaultValue, onValueChange, }: DateRangeCalendarProps): import("react/jsx-runtime").JSX.Element;
+export default DateRangeCalendar;

package/dist/components/date-range-calendar/date-range-calendar.mjs

@@ -0,0 +1,42 @@
+import { jsx as d } from "react/jsx-runtime";
+import { format as p } from "date-fns";
+import { useState as l } from "react";
+import { Calendar as b } from "../ui/calendar.mjs";
+const n = (a) => p(a, "yyyy-MM-dd");
+function k({
+  defaultValue: a,
+  onValueChange: i
+}) {
+  const [t, s] = l(a), [r, c] = l(0), o = (e, m, u) => {
+    s(e), i(e, m), c(u);
+  }, f = (e) => {
+    if (r === 1 && e < t[0])
+      return o([e, void 0], 0, 1);
+    if (r === 0 && t[1] && e > t[1])
+      return o([e, void 0], 0, 1);
+    o(
+      [r === 0 ? e : t[0], r === 1 ? e : t[1]],
+      r,
+      r === 0 ? 1 : 0
+    );
+  };
+  return /* @__PURE__ */ d(
+    b,
+    {
+      mode: "range",
+      selected: { from: t[0], to: t[1] },
+      onDayClick: f,
+      defaultMonth: t[0],
+      labels: {
+        labelDayButton: (e) => n(e),
+        labelGridcell: (e) => n(e)
+      },
+      "aria-label": "calendar range picker"
+    }
+  );
+}
+export {
+  k as DateRangeCalendar,
+  k as default
+};
+//# sourceMappingURL=date-range-calendar.mjs.map

package/dist/components/date-range-calendar/date-range-calendar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-calendar.mjs","sources":["../../../src/components/date-range-calendar/date-range-calendar.tsx"],"sourcesContent":["import { format } from \"date-fns\";\nimport { useState } from \"react\";\nimport { Calendar } from \"@/components/ui/calendar\";\n\ntype DateRange = [Date, Date | undefined];\n\nconst formatLabel = (date: Date) => format(date, \"yyyy-MM-dd\");\n\n/**\n * Props for the DateRangeCalendar component.\n */\nexport interface DateRangeCalendarProps {\n  /**\n   * The default date range value.\n   */\n  defaultValue: DateRange;\n\n  /**\n   * Callback function that is called when the date range value changes.\n   *\n   * @param value - The new date range value.\n   * @param updatedIndex - The index of the updated date range.\n   */\n  onValueChange: (value: DateRange, updatedIndex: number) => void;\n}\n\n/**\n * A date range calendar component that allows users to select a range of dates.\n */\nexport function DateRangeCalendar({\n  defaultValue,\n  onValueChange,\n}: DateRangeCalendarProps) {\n  const [value, setValue] = useState<DateRange>(defaultValue);\n  const [index, setIndex] = useState(0);\n\n  const setValueRange = (\n    newRange: DateRange,\n    updatedIndex: number,\n    newIndex: number,\n  ) => {\n    setValue(newRange);\n    onValueChange(newRange, updatedIndex);\n    setIndex(newIndex);\n  };\n\n  const handleDayClick = (day: Date) => {\n    if (index === 1 && day < value[0]) {\n      return setValueRange([day, undefined], 0, 1);\n    }\n\n    if (index === 0 && value[1] && day > value[1]) {\n      return setValueRange([day, undefined], 0, 1);\n    }\n\n    setValueRange(\n      [index === 0 ? day : value[0], index === 1 ? day : value[1]],\n      index,\n      index === 0 ? 1 : 0,\n    );\n  };\n\n  return (\n    <Calendar\n      mode=\"range\"\n      selected={{ from: value[0], to: value[1] }}\n      onDayClick={handleDayClick}\n      defaultMonth={value[0]}\n      labels={{\n        labelDayButton: (date) => formatLabel(date),\n        labelGridcell: (date) => formatLabel(date),\n      }}\n      aria-label=\"calendar range picker\"\n    />\n  );\n}\n\nexport default DateRangeCalendar;\n"],"names":["formatLabel","date","format","DateRangeCalendar","defaultValue","onValueChange","value","setValue","useState","index","setIndex","setValueRange","newRange","updatedIndex","newIndex","handleDayClick","day","jsx","Calendar"],"mappings":";;;;AAMA,MAAMA,IAAc,CAACC,MAAeC,EAAOD,GAAM,YAAY;AAuBtD,SAASE,EAAkB;AAAA,EAChC,cAAAC;AAAA,EACA,eAAAC;AACF,GAA2B;AACzB,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAoBJ,CAAY,GACpD,CAACK,GAAOC,CAAQ,IAAIF,EAAS,CAAC,GAE9BG,IAAgB,CACpBC,GACAC,GACAC,MACG;AACH,IAAAP,EAASK,CAAQ,GACjBP,EAAcO,GAAUC,CAAY,GACpCH,EAASI,CAAQ;AAAA,EACnB,GAEMC,IAAiB,CAACC,MAAc;AACpC,QAAIP,MAAU,KAAKO,IAAMV,EAAM,CAAC;AAC9B,aAAOK,EAAc,CAACK,GAAK,MAAS,GAAG,GAAG,CAAC;AAG7C,QAAIP,MAAU,KAAKH,EAAM,CAAC,KAAKU,IAAMV,EAAM,CAAC;AAC1C,aAAOK,EAAc,CAACK,GAAK,MAAS,GAAG,GAAG,CAAC;AAG7C,IAAAL;AAAA,MACE,CAACF,MAAU,IAAIO,IAAMV,EAAM,CAAC,GAAGG,MAAU,IAAIO,IAAMV,EAAM,CAAC,CAAC;AAAA,MAC3DG;AAAA,MACAA,MAAU,IAAI,IAAI;AAAA,IAAA;AAAA,EAEtB;AAEA,SACE,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,UAAU,EAAE,MAAMZ,EAAM,CAAC,GAAG,IAAIA,EAAM,CAAC,EAAA;AAAA,MACvC,YAAYS;AAAA,MACZ,cAAcT,EAAM,CAAC;AAAA,MACrB,QAAQ;AAAA,QACN,gBAAgB,CAACL,MAASD,EAAYC,CAAI;AAAA,QAC1C,eAAe,CAACA,MAASD,EAAYC,CAAI;AAAA,MAAA;AAAA,MAE3C,cAAW;AAAA,IAAA;AAAA,EAAA;AAGjB;"}

package/dist/components/date-range-calendar/index.d.ts

@@ -0,0 +1,2 @@
+export type { DateRangeCalendarProps } from './date-range-calendar';
+export { default, default as DateRangeCalendar } from './date-range-calendar';

package/dist/components/date-range-picker/date-range-picker.mjs

@@ -0,0 +1,62 @@
+import { jsxs as g, jsx as e } from "react/jsx-runtime";
+import { format as p } from "date-fns";
+import { useState as i } from "react";
+import { Button as v } from "../button/button.mjs";
+import { TextField as C } from "../forms/text-field/text-field.mjs";
+import { Popover as P, PopoverTrigger as O, PopoverContent as x } from "../ui/popover.mjs";
+import { DateRangeCalendar as V } from "../date-range-calendar/date-range-calendar.mjs";
+import b from "../../node_modules/lucide-react/dist/esm/icons/calendar.mjs";
+function k({
+  defaultValue: l,
+  format: a,
+  label: m,
+  fullWidth: s,
+  onValueChange: d,
+  size: u = "medium"
+}) {
+  const [c, n] = i(!1), [o, f] = i(l), h = (r, t) => {
+    f(r), d(r, t), n(t < 1);
+  };
+  return /* @__PURE__ */ g(P, { open: c, onOpenChange: n, children: [
+    /* @__PURE__ */ e(
+      C,
+      {
+        label: m,
+        fullWidth: s,
+        size: u,
+        readOnly: !0,
+        value: `${p(o[0], a)} - ${o[1] ? p(o[1], a) : a.toUpperCase()}`,
+        InputProps: {
+          endAdornment: /* @__PURE__ */ e(
+            O,
+            {
+              render: (r) => /* @__PURE__ */ e(
+                v,
+                {
+                  ...r,
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon-sm",
+                  "aria-label": "open calendar",
+                  children: /* @__PURE__ */ e(b, { className: "h-4 w-4", "aria-hidden": "true" })
+                }
+              )
+            }
+          )
+        }
+      }
+    ),
+    /* @__PURE__ */ e(x, { className: "w-auto p-0", align: "end", children: /* @__PURE__ */ e(
+      V,
+      {
+        defaultValue: o,
+        onValueChange: h
+      }
+    ) })
+  ] });
+}
+export {
+  k as DateRangePicker,
+  k as default
+};
+//# sourceMappingURL=date-range-picker.mjs.map

package/dist/components/date-range-picker/date-range-picker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-picker.mjs","sources":["../../../src/components/date-range-picker/date-range-picker.tsx"],"sourcesContent":["import { format } from \"date-fns\";\nimport { Calendar as CalendarIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport Button from \"@/components/button\";\nimport TextField from \"@/components/forms/text-field\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport DateRangeCalendar from \"../date-range-calendar\";\n\ntype DateRange = [Date, Date | undefined];\n\n/**\n * Props for the DateRangePicker component.\n */\nexport interface DateRangePickerProps {\n  /**\n   * The label for the date range picker.\n   */\n  label: string;\n\n  /**\n   * The default value for the date range picker.\n   */\n  defaultValue: DateRange;\n\n  /**\n   * The format in which the date range should be displayed.\n   */\n  format: string;\n\n  /**\n   * If true, the date range picker will take up the full width of its container.\n   * @default false\n   */\n  fullWidth?: boolean;\n\n  /**\n   * The size of the date range picker.\n   * @default \"medium\"\n   */\n  size?: \"small\" | \"medium\";\n\n  /**\n   * Callback function that is called when the value of the date range picker changes.\n   * @param value - The new date range value.\n   * @param index - The index of the date range picker.\n   */\n  onValueChange: (value: DateRange, index: number) => void;\n}\n\n/**\n * DateRangePicker component allows users to select a date range.\n */\nexport function DateRangePicker({\n  defaultValue,\n  format: fmt,\n  label,\n  fullWidth,\n  onValueChange,\n  size = \"medium\",\n}: DateRangePickerProps) {\n  const [isPopoverOpened, setIsPopoverOpened] = useState(false);\n  const [value, setValue] = useState(defaultValue);\n\n  const handleValueChange = (newValue: DateRange, index: number) => {\n    setValue(newValue);\n    onValueChange(newValue, index);\n    setIsPopoverOpened(index < 1);\n  };\n\n  return (\n    <Popover open={isPopoverOpened} onOpenChange={setIsPopoverOpened}>\n      <TextField\n        label={label}\n        fullWidth={fullWidth}\n        size={size}\n        readOnly\n        value={`${format(value[0], fmt)} - ${value[1] ? format(value[1], fmt) : fmt.toUpperCase()}`}\n        InputProps={{\n          endAdornment: (\n            <PopoverTrigger\n              render={(triggerProps) => (\n                <Button\n                  {...triggerProps}\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  aria-label=\"open calendar\"\n                >\n                  <CalendarIcon className=\"h-4 w-4\" aria-hidden=\"true\" />\n                </Button>\n              )}\n            />\n          ),\n        }}\n      />\n      <PopoverContent className=\"w-auto p-0\" align=\"end\">\n        <DateRangeCalendar\n          defaultValue={value}\n          onValueChange={handleValueChange}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport default DateRangePicker;\n"],"names":["DateRangePicker","defaultValue","fmt","label","fullWidth","onValueChange","size","isPopoverOpened","setIsPopoverOpened","useState","value","setValue","handleValueChange","newValue","index","jsxs","Popover","jsx","TextField","format","PopoverTrigger","triggerProps","Button","CalendarIcon","PopoverContent","DateRangeCalendar"],"mappings":";;;;;;;;AAwDO,SAASA,EAAgB;AAAA,EAC9B,cAAAC;AAAA,EACA,QAAQC;AAAA,EACR,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,MAAAC,IAAO;AACT,GAAyB;AACvB,QAAM,CAACC,GAAiBC,CAAkB,IAAIC,EAAS,EAAK,GACtD,CAACC,GAAOC,CAAQ,IAAIF,EAASR,CAAY,GAEzCW,IAAoB,CAACC,GAAqBC,MAAkB;AAChE,IAAAH,EAASE,CAAQ,GACjBR,EAAcQ,GAAUC,CAAK,GAC7BN,EAAmBM,IAAQ,CAAC;AAAA,EAC9B;AAEA,SACE,gBAAAC,EAACC,GAAA,EAAQ,MAAMT,GAAiB,cAAcC,GAC5C,UAAA;AAAA,IAAA,gBAAAS;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAAf;AAAA,QACA,WAAAC;AAAA,QACA,MAAAE;AAAA,QACA,UAAQ;AAAA,QACR,OAAO,GAAGa,EAAOT,EAAM,CAAC,GAAGR,CAAG,CAAC,MAAMQ,EAAM,CAAC,IAAIS,EAAOT,EAAM,CAAC,GAAGR,CAAG,IAAIA,EAAI,aAAa;AAAA,QACzF,YAAY;AAAA,UACV,cACE,gBAAAe;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,QAAQ,CAACC,MACP,gBAAAJ;AAAA,gBAACK;AAAA,gBAAA;AAAA,kBACE,GAAGD;AAAA,kBACJ,MAAK;AAAA,kBACL,SAAQ;AAAA,kBACR,MAAK;AAAA,kBACL,cAAW;AAAA,kBAEX,UAAA,gBAAAJ,EAACM,GAAA,EAAa,WAAU,WAAU,eAAY,OAAA,CAAO;AAAA,gBAAA;AAAA,cAAA;AAAA,YACvD;AAAA,UAAA;AAAA,QAEJ;AAAA,MAEJ;AAAA,IAAA;AAAA,IAEF,gBAAAN,EAACO,GAAA,EAAe,WAAU,cAAa,OAAM,OAC3C,UAAA,gBAAAP;AAAA,MAACQ;AAAA,MAAA;AAAA,QACC,cAAcf;AAAA,QACd,eAAeE;AAAA,MAAA;AAAA,IAAA,EACjB,CACF;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -0,0 +1,2 @@
+export type { DateRangePickerProps } from './date-range-picker';
+export { default, default as DateRangePicker } from './date-range-picker';

package/dist/components/dialog/dialog.d.ts

@@ -0,0 +1,53 @@
+import { ReactNode } from 'react';
+/**
+ * Supported sizes for dialog content.
+ */
+export type DialogSize = "sm" | "md" | "lg";
+/**
+ * Props for the Dialog component.
+ */
+export interface DialogProps {
+    /**
+     * Whether the dialog is open.
+     */
+    open: boolean;
+    /**
+     * Dialog title.
+     */
+    title?: ReactNode;
+    /**
+     * Optional description text rendered under the title.
+     */
+    description?: ReactNode;
+    /**
+     * Dialog body content.
+     */
+    children?: ReactNode;
+    /**
+     * Optional footer content rendered at the bottom.
+     */
+    footer?: ReactNode;
+    /**
+     * Size variant for the dialog content.
+     * @default "md"
+     */
+    size?: DialogSize;
+    /**
+     * Shows the close button in the dialog content.
+     * @default true
+     */
+    showCloseButton?: boolean;
+    /**
+     * Callback fired when the dialog requests to close.
+     */
+    onClose: () => void;
+    /**
+     * Additional class names for the dialog content.
+     */
+    className?: string;
+}
+/**
+ * Base dialog wrapper for consumer-facing usage.
+ */
+export declare function Dialog({ open, title, description, children, footer, size, showCloseButton, onClose, className, }: DialogProps): import("react/jsx-runtime").JSX.Element;
+export default Dialog;

package/dist/components/dialog/dialog.mjs

@@ -0,0 +1,49 @@
+import { jsx as l, jsxs as o } from "react/jsx-runtime";
+import { Dialog as D, DialogContent as u, DialogHeader as h, DialogTitle as t, DialogDescription as x, DialogFooter as f } from "../ui/dialog.mjs";
+import { cn as p } from "../../lib/utils.mjs";
+const w = {
+  sm: "sm:max-w-sm",
+  md: "sm:max-w-md",
+  lg: "sm:max-w-lg"
+};
+function F({
+  open: i,
+  title: a,
+  description: n,
+  children: e,
+  footer: m,
+  size: r = "md",
+  showCloseButton: s = !0,
+  onClose: g,
+  className: c
+}) {
+  return /* @__PURE__ */ l(
+    D,
+    {
+      open: i,
+      onOpenChange: (d) => {
+        d || g();
+      },
+      children: /* @__PURE__ */ o(
+        u,
+        {
+          showCloseButton: s,
+          className: p(w[r], c),
+          children: [
+            a || n ? /* @__PURE__ */ o(h, { children: [
+              a ? /* @__PURE__ */ l(t, { children: a }) : null,
+              n ? /* @__PURE__ */ l(x, { children: n }) : null
+            ] }) : null,
+            e,
+            m ? /* @__PURE__ */ l(f, { children: m }) : null
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  F as Dialog,
+  F as default
+};
+//# sourceMappingURL=dialog.mjs.map

package/dist/components/dialog/dialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.mjs","sources":["../../../src/components/dialog/dialog.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport {\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  Dialog as DialogRoot,\n  DialogTitle,\n} from \"@/components/ui/dialog\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Supported sizes for dialog content.\n */\nexport type DialogSize = \"sm\" | \"md\" | \"lg\";\n\n/**\n * Props for the Dialog component.\n */\nexport interface DialogProps {\n  /**\n   * Whether the dialog is open.\n   */\n  open: boolean;\n  /**\n   * Dialog title.\n   */\n  title?: ReactNode;\n  /**\n   * Optional description text rendered under the title.\n   */\n  description?: ReactNode;\n  /**\n   * Dialog body content.\n   */\n  children?: ReactNode;\n  /**\n   * Optional footer content rendered at the bottom.\n   */\n  footer?: ReactNode;\n  /**\n   * Size variant for the dialog content.\n   * @default \"md\"\n   */\n  size?: DialogSize;\n  /**\n   * Shows the close button in the dialog content.\n   * @default true\n   */\n  showCloseButton?: boolean;\n  /**\n   * Callback fired when the dialog requests to close.\n   */\n  onClose: () => void;\n  /**\n   * Additional class names for the dialog content.\n   */\n  className?: string;\n}\n\nconst sizeClasses: Record<DialogSize, string> = {\n  sm: \"sm:max-w-sm\",\n  md: \"sm:max-w-md\",\n  lg: \"sm:max-w-lg\",\n};\n\n/**\n * Base dialog wrapper for consumer-facing usage.\n */\nexport function Dialog({\n  open,\n  title,\n  description,\n  children,\n  footer,\n  size = \"md\",\n  showCloseButton = true,\n  onClose,\n  className,\n}: DialogProps) {\n  return (\n    <DialogRoot\n      open={open}\n      onOpenChange={(nextOpen) => {\n        if (!nextOpen) {\n          onClose();\n        }\n      }}\n    >\n      <DialogContent\n        showCloseButton={showCloseButton}\n        className={cn(sizeClasses[size], className)}\n      >\n        {title || description ? (\n          <DialogHeader>\n            {title ? <DialogTitle>{title}</DialogTitle> : null}\n            {description ? (\n              <DialogDescription>{description}</DialogDescription>\n            ) : null}\n          </DialogHeader>\n        ) : null}\n\n        {children}\n\n        {footer ? <DialogFooter>{footer}</DialogFooter> : null}\n      </DialogContent>\n    </DialogRoot>\n  );\n}\n\nexport default Dialog;\n"],"names":["sizeClasses","Dialog","open","title","description","children","footer","size","showCloseButton","onClose","className","jsx","DialogRoot","nextOpen","jsxs","DialogContent","cn","DialogHeader","DialogTitle","DialogDescription","DialogFooter"],"mappings":";;;AA4DA,MAAMA,IAA0C;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAKO,SAASC,EAAO;AAAA,EACrB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,iBAAAC,IAAkB;AAAA,EAClB,SAAAC;AAAA,EACA,WAAAC;AACF,GAAgB;AACd,SACE,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,MAAAV;AAAA,MACA,cAAc,CAACW,MAAa;AAC1B,QAAKA,KACHJ,EAAA;AAAA,MAEJ;AAAA,MAEA,UAAA,gBAAAK;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,iBAAAP;AAAA,UACA,WAAWQ,EAAGhB,EAAYO,CAAI,GAAGG,CAAS;AAAA,UAEzC,UAAA;AAAA,YAAAP,KAASC,sBACPa,GAAA,EACE,UAAA;AAAA,cAAAd,IAAQ,gBAAAQ,EAACO,GAAA,EAAa,UAAAf,EAAA,CAAM,IAAiB;AAAA,cAC7CC,IACC,gBAAAO,EAACQ,GAAA,EAAmB,UAAAf,EAAA,CAAY,IAC9B;AAAA,YAAA,EAAA,CACN,IACE;AAAA,YAEHC;AAAA,YAEAC,IAAS,gBAAAK,EAACS,GAAA,EAAc,UAAAd,EAAA,CAAO,IAAkB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACpD;AAAA,EAAA;AAGN;"}

package/dist/components/dialog/index.d.ts

@@ -0,0 +1,2 @@
+export type { DialogProps, DialogSize } from './dialog';
+export { default, default as Dialog } from './dialog';

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

@@ -0,0 +1,5 @@
+import { DrawerProps } from '../drawerx/drawer.types';
+/**
+ * Drawer navigation container.
+ */
+export default function Drawer({ children, className, ...rest }: DrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/drawer/drawer.mjs

@@ -0,0 +1,22 @@
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { Sidebar as o, SidebarRail as s } from "../ui/sidebar.mjs";
+import { cn as m } from "../../lib/utils.mjs";
+function n({ children: e, className: a, ...i }) {
+  return /* @__PURE__ */ l(
+    o,
+    {
+      collapsible: "icon",
+      variant: "sidebar",
+      className: m("z-40", a),
+      ...i,
+      children: [
+        /* @__PURE__ */ r("div", { role: "menu", className: "flex h-full flex-col border-r bg-sidebar", children: e }),
+        /* @__PURE__ */ r(s, {})
+      ]
+    }
+  );
+}
+export {
+  n as default
+};
+//# sourceMappingURL=drawer.mjs.map

package/dist/components/drawer/drawer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.mjs","sources":["../../../src/components/drawer/drawer.tsx"],"sourcesContent":["import type { DrawerProps } from \"@/components/drawerx/drawer.types\";\nimport { Sidebar, SidebarRail } from \"@/components/ui/sidebar\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Drawer navigation container.\n */\nexport default function Drawer({ children, className, ...rest }: DrawerProps) {\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      variant=\"sidebar\"\n      className={cn(\"z-40\", className)}\n      {...rest}\n    >\n      <div role=\"menu\" className=\"flex h-full flex-col border-r bg-sidebar\">\n        {children}\n      </div>\n      <SidebarRail />\n    </Sidebar>\n  );\n}\n"],"names":["Drawer","children","className","rest","jsxs","Sidebar","cn","jsx","SidebarRail"],"mappings":";;;AAOA,SAAwBA,EAAO,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,KAAqB;AAC5E,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,aAAY;AAAA,MACZ,SAAQ;AAAA,MACR,WAAWC,EAAG,QAAQJ,CAAS;AAAA,MAC9B,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAAC,OAAA,EAAI,MAAK,QAAO,WAAU,4CACxB,UAAAN,GACH;AAAA,0BACCO,GAAA,CAAA,CAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnB;"}

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

@@ -0,0 +1 @@
+export { default, default as Drawer } from './drawer';

package/dist/components/drawer-app-bar/drawer-app-bar.d.ts

@@ -0,0 +1,5 @@
+import { DrawerAppBarProps } from '../drawerx/drawer.types';
+/**
+ * Top app bar adapted for drawer layouts.
+ */
+export default function DrawerAppBar({ title, className, children, ...rest }: DrawerAppBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/drawer-app-bar/drawer-app-bar.mjs

@@ -0,0 +1,33 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { useDrawer as i } from "../drawer-context/drawer-context.mjs";
+import "react";
+import { SidebarTrigger as s } from "../ui/sidebar.mjs";
+import { cn as n } from "../../lib/utils.mjs";
+function b({
+  title: r,
+  className: a,
+  children: o,
+  ...t
+}) {
+  const { clipped: l } = i();
+  return /* @__PURE__ */ m(
+    "header",
+    {
+      className: n(
+        "z-20 flex h-14 w-full items-center border-b bg-background px-4",
+        l && "fixed top-0",
+        a
+      ),
+      ...t,
+      children: [
+        /* @__PURE__ */ e(s, { "aria-label": "open drawer", className: "mr-2" }),
+        r ? /* @__PURE__ */ e("h1", { className: "truncate text-lg font-semibold", children: r }) : null,
+        o
+      ]
+    }
+  );
+}
+export {
+  b as default
+};
+//# sourceMappingURL=drawer-app-bar.mjs.map

package/dist/components/drawer-app-bar/drawer-app-bar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-app-bar.mjs","sources":["../../../src/components/drawer-app-bar/drawer-app-bar.tsx"],"sourcesContent":["import { useDrawer } from \"@/components/drawer-context\";\nimport type { DrawerAppBarProps } from \"@/components/drawerx/drawer.types\";\nimport { SidebarTrigger } from \"@/components/ui/sidebar\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Top app bar adapted for drawer layouts.\n */\nexport default function DrawerAppBar({\n  title,\n  className,\n  children,\n  ...rest\n}: DrawerAppBarProps) {\n  const { clipped } = useDrawer();\n\n  return (\n    <header\n      className={cn(\n        \"z-20 flex h-14 w-full items-center border-b bg-background px-4\",\n        clipped && \"fixed top-0\",\n        className,\n      )}\n      {...rest}\n    >\n      <SidebarTrigger aria-label=\"open drawer\" className=\"mr-2\" />\n\n      {title ? (\n        <h1 className=\"truncate text-lg font-semibold\">{title}</h1>\n      ) : null}\n      {children}\n    </header>\n  );\n}\n"],"names":["DrawerAppBar","title","className","children","rest","clipped","useDrawer","jsxs","cn","jsx","SidebarTrigger"],"mappings":";;;;;AAQA,SAAwBA,EAAa;AAAA,EACnC,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAsB;AACpB,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAA;AAEpB,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAH,KAAW;AAAA,QACXH;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAK,EAACC,GAAA,EAAe,cAAW,eAAc,WAAU,QAAO;AAAA,QAEzDT,IACC,gBAAAQ,EAAC,MAAA,EAAG,WAAU,kCAAkC,aAAM,IACpD;AAAA,QACHN;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/drawer-app-bar/index.d.ts

@@ -0,0 +1,2 @@
+export type { DrawerAppBarProps } from '../drawerx/drawer.types';
+export { default, default as DrawerAppBar } from './drawer-app-bar';

package/dist/components/drawer-content/drawer-content.d.ts

@@ -0,0 +1,5 @@
+import { DrawerContentProps } from '../drawerx/drawer.types';
+/**
+ * Content rendered inside drawer navigation.
+ */
+export default function DrawerContent({ navigation }: DrawerContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/drawer-content/drawer-content.mjs

@@ -0,0 +1,84 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import * as l from "react";
+import m from "../drawer-item/drawer-item.mjs";
+import "../drawer-context/drawer-context.mjs";
+import { useSidebar as c, SidebarContent as p, SidebarGroup as u, SidebarMenu as h, SidebarMenuAction as f } from "../ui/sidebar.mjs";
+import { DropdownMenu as b, DropdownMenuTrigger as w, DropdownMenuContent as g, DropdownMenuItem as a, DropdownMenuSeparator as M } from "../ui/dropdown-menu.mjs";
+import D from "../drawer-subheader/drawer-subheader.mjs";
+import S from "../../node_modules/lucide-react/dist/esm/icons/ellipsis.mjs";
+import x from "../../node_modules/lucide-react/dist/esm/icons/folder.mjs";
+import N from "../../node_modules/lucide-react/dist/esm/icons/forward.mjs";
+import k from "../../node_modules/lucide-react/dist/esm/icons/trash-2.mjs";
+function v(t) {
+  const n = [];
+  let r = {
+    id: "section-platform",
+    label: "Platform",
+    items: []
+  };
+  for (const o of t) {
+    if (o.kind === "header") {
+      r.items.length > 0 && n.push(r), r = { id: o.id, label: o.text, items: [] };
+      continue;
+    }
+    r.items.push(o);
+  }
+  return r.items.length > 0 && n.push(r), n;
+}
+const C = (t) => /* @__PURE__ */ i(b, { children: [
+  /* @__PURE__ */ i(w, { render: /* @__PURE__ */ e(f, { showOnHover: !0 }), children: [
+    /* @__PURE__ */ e(S, {}),
+    /* @__PURE__ */ e("span", { className: "sr-only", children: "More" })
+  ] }),
+  /* @__PURE__ */ i(
+    g,
+    {
+      className: "w-48 rounded-lg",
+      side: t ? "bottom" : "right",
+      align: t ? "end" : "start",
+      children: [
+        /* @__PURE__ */ i(a, { children: [
+          /* @__PURE__ */ e(x, { className: "text-muted-foreground" }),
+          /* @__PURE__ */ e("span", { children: "View item" })
+        ] }),
+        /* @__PURE__ */ i(a, { children: [
+          /* @__PURE__ */ e(N, { className: "text-muted-foreground" }),
+          /* @__PURE__ */ e("span", { children: "Share item" })
+        ] }),
+        /* @__PURE__ */ e(M, {}),
+        /* @__PURE__ */ i(a, { children: [
+          /* @__PURE__ */ e(k, { className: "text-muted-foreground" }),
+          /* @__PURE__ */ e("span", { children: "Delete item" })
+        ] })
+      ]
+    }
+  )
+] });
+function O({ navigation: t }) {
+  const { isMobile: n } = c(), r = l.useMemo(
+    () => v(t),
+    [t]
+  );
+  return /* @__PURE__ */ e(p, { children: r.map((o, s) => /* @__PURE__ */ i(
+    u,
+    {
+      className: s > 0 ? "group-data-[collapsible=icon]:hidden" : void 0,
+      children: [
+        /* @__PURE__ */ e(D, { role: "heading", "aria-level": 2, children: o.label }),
+        /* @__PURE__ */ e(h, { children: o.items.map((d) => /* @__PURE__ */ e(
+          m,
+          {
+            item: d,
+            action: s > 0 && d.kind === "link" ? C(n) : void 0
+          },
+          d.id
+        )) })
+      ]
+    },
+    o.id
+  )) });
+}
+export {
+  O as default
+};
+//# sourceMappingURL=drawer-content.mjs.map

package/dist/components/drawer-content/drawer-content.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-content.mjs","sources":["../../../src/components/drawer-content/drawer-content.tsx"],"sourcesContent":["import { Folder, Forward, MoreHorizontal, Trash2 } from \"lucide-react\";\nimport * as React from \"react\";\nimport DrawerItem from \"@/components/drawer-item\";\nimport DrawerSubheader from \"@/components/drawer-subheader\";\nimport type {\n  DrawerContentProps,\n  DrawerNavigation,\n  DrawerNavigationItem,\n} from \"@/components/drawerx/drawer.types\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport {\n  SidebarContent as SidebarContentPrimitive,\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuAction,\n  useSidebar,\n} from \"@/components/ui/sidebar\";\n\ntype DrawerRenderableItem = Exclude<DrawerNavigationItem, { kind: \"header\" }>;\n\nfunction splitByHeaders(navigation: DrawerNavigation) {\n  const sections: {\n    id: string;\n    label: string;\n    items: DrawerRenderableItem[];\n  }[] = [];\n  let current = {\n    id: \"section-platform\",\n    label: \"Platform\",\n    items: [] as DrawerRenderableItem[],\n  };\n\n  for (const item of navigation) {\n    if (item.kind === \"header\") {\n      if (current.items.length > 0) {\n        sections.push(current);\n      }\n      current = { id: item.id, label: item.text, items: [] };\n      continue;\n    }\n    current.items.push(item);\n  }\n\n  if (current.items.length > 0) {\n    sections.push(current);\n  }\n\n  return sections;\n}\n\nconst buildActionMenu = (isMobile: boolean) => (\n  <DropdownMenu>\n    <DropdownMenuTrigger render={<SidebarMenuAction showOnHover />}>\n      <MoreHorizontal />\n      <span className=\"sr-only\">More</span>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent\n      className=\"w-48 rounded-lg\"\n      side={isMobile ? \"bottom\" : \"right\"}\n      align={isMobile ? \"end\" : \"start\"}\n    >\n      <DropdownMenuItem>\n        <Folder className=\"text-muted-foreground\" />\n        <span>View item</span>\n      </DropdownMenuItem>\n      <DropdownMenuItem>\n        <Forward className=\"text-muted-foreground\" />\n        <span>Share item</span>\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <Trash2 className=\"text-muted-foreground\" />\n        <span>Delete item</span>\n      </DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n);\n\n/**\n * Content rendered inside drawer navigation.\n */\nexport default function DrawerContent({ navigation }: DrawerContentProps) {\n  const { isMobile } = useSidebar();\n  const sections = React.useMemo(\n    () => splitByHeaders(navigation),\n    [navigation],\n  );\n\n  return (\n    <SidebarContentPrimitive>\n      {sections.map((section, index) => (\n        <SidebarGroup\n          key={section.id}\n          className={\n            index > 0 ? \"group-data-[collapsible=icon]:hidden\" : undefined\n          }\n        >\n          <DrawerSubheader role=\"heading\" aria-level={2}>\n            {section.label}\n          </DrawerSubheader>\n          <SidebarMenu>\n            {section.items.map((item) => (\n              <DrawerItem\n                key={item.id}\n                item={item}\n                action={\n                  index > 0 && item.kind === \"link\"\n                    ? buildActionMenu(isMobile)\n                    : undefined\n                }\n              />\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContentPrimitive>\n  );\n}\n"],"names":["splitByHeaders","navigation","sections","current","item","buildActionMenu","isMobile","jsxs","DropdownMenu","DropdownMenuTrigger","jsx","SidebarMenuAction","MoreHorizontal","DropdownMenuContent","DropdownMenuItem","Folder","Forward","DropdownMenuSeparator","Trash2","DrawerContent","useSidebar","React","SidebarContentPrimitive","section","index","SidebarGroup","DrawerSubheader","SidebarMenu","DrawerItem"],"mappings":";;;;;;;;;;;AA0BA,SAASA,EAAeC,GAA8B;AACpD,QAAMC,IAIA,CAAA;AACN,MAAIC,IAAU;AAAA,IACZ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,OAAO,CAAA;AAAA,EAAC;AAGV,aAAWC,KAAQH,GAAY;AAC7B,QAAIG,EAAK,SAAS,UAAU;AAC1B,MAAID,EAAQ,MAAM,SAAS,KACzBD,EAAS,KAAKC,CAAO,GAEvBA,IAAU,EAAE,IAAIC,EAAK,IAAI,OAAOA,EAAK,MAAM,OAAO,GAAC;AACnD;AAAA,IACF;AACA,IAAAD,EAAQ,MAAM,KAAKC,CAAI;AAAA,EACzB;AAEA,SAAID,EAAQ,MAAM,SAAS,KACzBD,EAAS,KAAKC,CAAO,GAGhBD;AACT;AAEA,MAAMG,IAAkB,CAACC,MACvB,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,EAAA,gBAAAD,EAACE,KAAoB,QAAQ,gBAAAC,EAACC,GAAA,EAAkB,aAAW,IAAC,GAC1D,UAAA;AAAA,IAAA,gBAAAD,EAACE,GAAA,EAAe;AAAA,IAChB,gBAAAF,EAAC,QAAA,EAAK,WAAU,WAAU,UAAA,OAAA,CAAI;AAAA,EAAA,GAChC;AAAA,EACA,gBAAAH;AAAA,IAACM;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAMP,IAAW,WAAW;AAAA,MAC5B,OAAOA,IAAW,QAAQ;AAAA,MAE1B,UAAA;AAAA,QAAA,gBAAAC,EAACO,GAAA,EACC,UAAA;AAAA,UAAA,gBAAAJ,EAACK,GAAA,EAAO,WAAU,wBAAA,CAAwB;AAAA,UAC1C,gBAAAL,EAAC,UAAK,UAAA,YAAA,CAAS;AAAA,QAAA,GACjB;AAAA,0BACCI,GAAA,EACC,UAAA;AAAA,UAAA,gBAAAJ,EAACM,GAAA,EAAQ,WAAU,wBAAA,CAAwB;AAAA,UAC3C,gBAAAN,EAAC,UAAK,UAAA,aAAA,CAAU;AAAA,QAAA,GAClB;AAAA,0BACCO,GAAA,EAAsB;AAAA,0BACtBH,GAAA,EACC,UAAA;AAAA,UAAA,gBAAAJ,EAACQ,GAAA,EAAO,WAAU,wBAAA,CAAwB;AAAA,UAC1C,gBAAAR,EAAC,UAAK,UAAA,cAAA,CAAW;AAAA,QAAA,EAAA,CACnB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AACF,GACF;AAMF,SAAwBS,EAAc,EAAE,YAAAlB,KAAkC;AACxE,QAAM,EAAE,UAAAK,EAAA,IAAac,EAAA,GACflB,IAAWmB,EAAM;AAAA,IACrB,MAAMrB,EAAeC,CAAU;AAAA,IAC/B,CAACA,CAAU;AAAA,EAAA;AAGb,2BACGqB,GAAA,EACE,UAAApB,EAAS,IAAI,CAACqB,GAASC,MACtB,gBAAAjB;AAAA,IAACkB;AAAA,IAAA;AAAA,MAEC,WACED,IAAQ,IAAI,yCAAyC;AAAA,MAGvD,UAAA;AAAA,QAAA,gBAAAd,EAACgB,KAAgB,MAAK,WAAU,cAAY,GACzC,YAAQ,OACX;AAAA,0BACCC,GAAA,EACE,UAAAJ,EAAQ,MAAM,IAAI,CAACnB,MAClB,gBAAAM;AAAA,UAACkB;AAAA,UAAA;AAAA,YAEC,MAAAxB;AAAA,YACA,QACEoB,IAAQ,KAAKpB,EAAK,SAAS,SACvBC,EAAgBC,CAAQ,IACxB;AAAA,UAAA;AAAA,UALDF,EAAK;AAAA,QAAA,CAQb,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,IApBKmB,EAAQ;AAAA,EAAA,CAsBhB,GACH;AAEJ;"}

package/dist/components/drawer-content/index.d.ts

@@ -0,0 +1 @@
+export { default, default as DrawerContent } from './drawer-content';