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

package/README.md

@@ -4,7 +4,7 @@
 
 <img src="src/stories/assets/work-in-progress.jpg" width="200" height="180"/>
 
-My custom design system on top of [MUI](https://mui.com/material-ui/), with a bunch of components to be able to fast prototype new pages and products
+My custom design system on top of shadcn/ui + Base UI, with a bunch of components to be able to fast prototype new pages and products
 
 ## ⚠️ Important Notice
 
@@ -24,7 +24,7 @@ This project is available as an [npm package](https://www.npmjs.com/package/@pau
 npm:
 
 ```bash
-npm install @pautena/react-design-system @emotion/react @emotion/styled @mui/icons-material @mui/material @mui/x-data-grid
+npm install @pautena/react-design-system
 ```
 
 Now you are going to be able to import the components and use it in your React project.
@@ -43,6 +43,16 @@ import "@pautena/react-design-system/global.css";
 
 If you want to know more about the components and the layouts availables in this project check our [documentation](https://pautena.com/react-design-system)
 
+## Examples
+
+See Storybook → Examples for full demos.
+
+## AI Documentation
+
+See Storybook → Examples for AI usage guides.
+
+- [llms.txt](./llms.txt)
+
 ## Contributing
 
 Read the [contribution guide](/CONTRIBUTING.md) to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes.

package/dist/_virtual/index.mjs

@@ -0,0 +1,6 @@
+import { __require as r } from "../node_modules/use-sync-external-store/shim/index.mjs";
+var i = r();
+export {
+  i as s
+};
+//# sourceMappingURL=index.mjs.map

package/dist/_virtual/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/_virtual/index2.mjs

@@ -0,0 +1,5 @@
+var e = { exports: {} };
+export {
+  e as __module
+};
+//# sourceMappingURL=index2.mjs.map

package/dist/_virtual/index2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/use-sync-external-store-shim.development.mjs

@@ -0,0 +1,5 @@
+var e = {};
+export {
+  e as __exports
+};
+//# sourceMappingURL=use-sync-external-store-shim.development.mjs.map

package/dist/_virtual/use-sync-external-store-shim.development.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sync-external-store-shim.development.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/use-sync-external-store-shim.production.mjs

@@ -0,0 +1,5 @@
+var r = {};
+export {
+  r as __exports
+};
+//# sourceMappingURL=use-sync-external-store-shim.production.mjs.map

package/dist/_virtual/use-sync-external-store-shim.production.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sync-external-store-shim.production.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/with-selector.development.mjs

@@ -0,0 +1,5 @@
+var e = {};
+export {
+  e as __exports
+};
+//# sourceMappingURL=with-selector.development.mjs.map

package/dist/_virtual/with-selector.development.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-selector.development.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/with-selector.mjs

@@ -0,0 +1,6 @@
+import { __require as r } from "../node_modules/use-sync-external-store/shim/with-selector.mjs";
+var t = r();
+export {
+  t as w
+};
+//# sourceMappingURL=with-selector.mjs.map

package/dist/_virtual/with-selector.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-selector.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/_virtual/with-selector.production.mjs

@@ -0,0 +1,5 @@
+var o = {};
+export {
+  o as __exports
+};
+//# sourceMappingURL=with-selector.production.mjs.map

package/dist/_virtual/with-selector.production.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-selector.production.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/with-selector2.mjs

@@ -0,0 +1,5 @@
+var e = { exports: {} };
+export {
+  e as __module
+};
+//# sourceMappingURL=with-selector2.mjs.map

package/dist/_virtual/with-selector2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-selector2.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/board/board.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+/**
+ * Props for the Board component.
+ */
+export interface BoardProps {
+    /**
+     * The content to display and copy to clipboard.
+     */
+    content?: string | string[];
+    /**
+     * Vertical spacing between lines when content is an array.
+     * @default 0
+     */
+    spacing?: 0 | 1 | 2 | 3 | 4 | 5;
+    /**
+     * Additional CSS classes for custom styling.
+     */
+    className?: string;
+    /**
+     * Optional custom children rendered instead of the default content.
+     */
+    children?: ReactNode;
+}
+/**
+ * Surface for displaying and copying plain content.
+ */
+export declare function Board({ content: contentProp, spacing, className, children, }: BoardProps): import("react/jsx-runtime").JSX.Element;
+export default Board;

package/dist/components/board/board.mjs

@@ -0,0 +1,48 @@
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { cn as m } from "../../lib/utils.mjs";
+import c from "../../node_modules/lucide-react/dist/esm/icons/copy.mjs";
+function u({
+  content: e,
+  spacing: i = 0,
+  className: s,
+  children: l
+}) {
+  const a = Array.isArray(e) ? e.join(`
+`) : e ?? "", n = Array.isArray(e) ? e.map((r, o) => /* @__PURE__ */ t(
+    "p",
+    {
+      style: { paddingBottom: `${i * 0.25}rem` },
+      className: "leading-relaxed",
+      children: r
+    },
+    `${r}-${o}`
+  )) : e;
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: m(
+        "relative rounded-md bg-slate-800 px-4 py-2 text-sm text-white",
+        s
+      ),
+      children: [
+        /* @__PURE__ */ t("div", { className: "flex min-h-7 items-center pr-8", children: l ?? n }),
+        a ? /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            "aria-label": "copy board content",
+            title: "Copy",
+            className: "absolute right-1.5 top-1.5 inline-flex h-7 w-7 items-center justify-center rounded-md text-slate-100 transition hover:bg-slate-700",
+            onClick: () => navigator.clipboard.writeText(a),
+            children: /* @__PURE__ */ t(c, { className: "h-4 w-4", "aria-hidden": "true" })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+export {
+  u as Board,
+  u as default
+};
+//# sourceMappingURL=board.mjs.map

package/dist/components/board/board.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"board.mjs","sources":["../../../src/components/board/board.tsx"],"sourcesContent":["import { Copy } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Props for the Board component.\n */\nexport interface BoardProps {\n  /**\n   * The content to display and copy to clipboard.\n   */\n  content?: string | string[];\n  /**\n   * Vertical spacing between lines when content is an array.\n   * @default 0\n   */\n  spacing?: 0 | 1 | 2 | 3 | 4 | 5;\n  /**\n   * Additional CSS classes for custom styling.\n   */\n  className?: string;\n  /**\n   * Optional custom children rendered instead of the default content.\n   */\n  children?: ReactNode;\n}\n\n/**\n * Surface for displaying and copying plain content.\n */\nexport function Board({\n  content: contentProp,\n  spacing = 0,\n  className,\n  children,\n}: BoardProps) {\n  const copyContent = Array.isArray(contentProp)\n    ? contentProp.join(\"\\n\")\n    : (contentProp ?? \"\");\n\n  const content = Array.isArray(contentProp)\n    ? contentProp.map((line, index) => (\n        <p\n          key={`${line}-${index}`}\n          style={{ paddingBottom: `${spacing * 0.25}rem` }}\n          className=\"leading-relaxed\"\n        >\n          {line}\n        </p>\n      ))\n    : contentProp;\n\n  return (\n    <div\n      className={cn(\n        \"relative rounded-md bg-slate-800 px-4 py-2 text-sm text-white\",\n        className,\n      )}\n    >\n      <div className=\"flex min-h-7 items-center pr-8\">\n        {children ?? content}\n      </div>\n      {copyContent ? (\n        <button\n          type=\"button\"\n          aria-label=\"copy board content\"\n          title=\"Copy\"\n          className=\"absolute right-1.5 top-1.5 inline-flex h-7 w-7 items-center justify-center rounded-md text-slate-100 transition hover:bg-slate-700\"\n          onClick={() => navigator.clipboard.writeText(copyContent)}\n        >\n          <Copy className=\"h-4 w-4\" aria-hidden=\"true\" />\n        </button>\n      ) : null}\n    </div>\n  );\n}\n\nexport default Board;\n"],"names":["Board","contentProp","spacing","className","children","copyContent","content","line","index","jsx","jsxs","cn","Copy"],"mappings":";;;AA8BO,SAASA,EAAM;AAAA,EACpB,SAASC;AAAA,EACT,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,UAAAC;AACF,GAAe;AACb,QAAMC,IAAc,MAAM,QAAQJ,CAAW,IACzCA,EAAY,KAAK;AAAA,CAAI,IACpBA,KAAe,IAEdK,IAAU,MAAM,QAAQL,CAAW,IACrCA,EAAY,IAAI,CAACM,GAAMC,MACrB,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,OAAO,EAAE,eAAe,GAAGP,IAAU,IAAI,MAAA;AAAA,MACzC,WAAU;AAAA,MAET,UAAAK;AAAA,IAAA;AAAA,IAJI,GAAGA,CAAI,IAAIC,CAAK;AAAA,EAAA,CAMxB,IACDP;AAEJ,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAR;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAM,EAAC,OAAA,EAAI,WAAU,kCACZ,UAAAL,KAAYE,GACf;AAAA,QACCD,IACC,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAW;AAAA,YACX,OAAM;AAAA,YACN,WAAU;AAAA,YACV,SAAS,MAAM,UAAU,UAAU,UAAUJ,CAAW;AAAA,YAExD,UAAA,gBAAAI,EAACG,GAAA,EAAK,WAAU,WAAU,eAAY,OAAA,CAAO;AAAA,UAAA;AAAA,QAAA,IAE7C;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV;"}

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

@@ -0,0 +1,2 @@
+export type { BoardProps } from './board';
+export { default, default as Board } from './board';

package/dist/components/breadcrumbs/breadcrumbs.d.ts

@@ -0,0 +1,41 @@
+import { ComponentProps, ReactNode } from 'react';
+import { BreadcrumbLink, Breadcrumb as UiBreadcrumb } from '../ui/breadcrumb';
+/**
+ * Breadcrumb item descriptor.
+ */
+export interface BreadcrumbsItem {
+    /**
+     * Unique identifier for each item.
+     */
+    id: string;
+    /**
+     * Visible text for the breadcrumb item.
+     */
+    text: string;
+    /**
+     * Navigation URL used for non-terminal items.
+     */
+    link: string;
+}
+/**
+ * Props for the Breadcrumbs component.
+ */
+export interface BreadcrumbsProps extends Omit<ComponentProps<typeof UiBreadcrumb>, "children"> {
+    /**
+     * Ordered breadcrumb entries.
+     */
+    items?: BreadcrumbsItem[];
+    /**
+     * Optional custom separator rendered between items.
+     */
+    separator?: ReactNode;
+    /**
+     * Props forwarded to each breadcrumb link item.
+     */
+    linkProps?: Omit<ComponentProps<typeof BreadcrumbLink>, "children" | "href">;
+}
+/**
+ * Reusable breadcrumb navigation wrapper built on shadcn Base primitives.
+ */
+export declare function Breadcrumbs({ items, separator, linkProps, ...props }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element | null;
+export default Breadcrumbs;

package/dist/components/breadcrumbs/breadcrumbs.mjs

@@ -0,0 +1,22 @@
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Fragment as s } from "react";
+import { Breadcrumb as b, BreadcrumbList as h, BreadcrumbItem as o, BreadcrumbPage as p, BreadcrumbLink as f, BreadcrumbSeparator as g } from "../ui/breadcrumb.mjs";
+function j({
+  items: e,
+  separator: n,
+  linkProps: l,
+  ...m
+}) {
+  return e?.length ? /* @__PURE__ */ r(b, { "aria-label": "breadcrumb", ...m, children: /* @__PURE__ */ r(h, { className: "gap-1 text-xs sm:gap-1.5", children: e.map(({ id: d, link: t, text: a }, u) => {
+    const c = u === e.length - 1;
+    return /* @__PURE__ */ i(s, { children: [
+      /* @__PURE__ */ r(o, { className: "gap-1", children: c ? /* @__PURE__ */ r(p, { children: a }) : /* @__PURE__ */ r(f, { href: t, ...l, children: a }) }),
+      c ? null : /* @__PURE__ */ r(g, { children: n })
+    ] }, d);
+  }) }) }) : null;
+}
+export {
+  j as Breadcrumbs,
+  j as default
+};
+//# sourceMappingURL=breadcrumbs.mjs.map

package/dist/components/breadcrumbs/breadcrumbs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.mjs","sources":["../../../src/components/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import { type ComponentProps, Fragment, type ReactNode } from \"react\";\nimport {\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  Breadcrumb as UiBreadcrumb,\n} from \"@/components/ui/breadcrumb\";\n\n/**\n * Breadcrumb item descriptor.\n */\nexport interface BreadcrumbsItem {\n  /**\n   * Unique identifier for each item.\n   */\n  id: string;\n  /**\n   * Visible text for the breadcrumb item.\n   */\n  text: string;\n  /**\n   * Navigation URL used for non-terminal items.\n   */\n  link: string;\n}\n\n/**\n * Props for the Breadcrumbs component.\n */\nexport interface BreadcrumbsProps\n  extends Omit<ComponentProps<typeof UiBreadcrumb>, \"children\"> {\n  /**\n   * Ordered breadcrumb entries.\n   */\n  items?: BreadcrumbsItem[];\n  /**\n   * Optional custom separator rendered between items.\n   */\n  separator?: ReactNode;\n  /**\n   * Props forwarded to each breadcrumb link item.\n   */\n  linkProps?: Omit<ComponentProps<typeof BreadcrumbLink>, \"children\" | \"href\">;\n}\n\n/**\n * Reusable breadcrumb navigation wrapper built on shadcn Base primitives.\n */\nexport function Breadcrumbs({\n  items,\n  separator,\n  linkProps,\n  ...props\n}: BreadcrumbsProps) {\n  if (!items?.length) {\n    return null;\n  }\n\n  return (\n    <UiBreadcrumb aria-label=\"breadcrumb\" {...props}>\n      <BreadcrumbList className=\"gap-1 text-xs sm:gap-1.5\">\n        {items.map(({ id, link, text }, index) => {\n          const isLast = index === items.length - 1;\n\n          return (\n            <Fragment key={id}>\n              <BreadcrumbItem className=\"gap-1\">\n                {isLast ? (\n                  <BreadcrumbPage>{text}</BreadcrumbPage>\n                ) : (\n                  <BreadcrumbLink href={link} {...linkProps}>\n                    {text}\n                  </BreadcrumbLink>\n                )}\n              </BreadcrumbItem>\n              {isLast ? null : (\n                <BreadcrumbSeparator>{separator}</BreadcrumbSeparator>\n              )}\n            </Fragment>\n          );\n        })}\n      </BreadcrumbList>\n    </UiBreadcrumb>\n  );\n}\n\nexport default Breadcrumbs;\n"],"names":["Breadcrumbs","items","separator","linkProps","props","UiBreadcrumb","BreadcrumbList","id","link","text","index","isLast","Fragment","jsx","BreadcrumbItem","BreadcrumbPage","BreadcrumbLink","BreadcrumbSeparator"],"mappings":";;;AAkDO,SAASA,EAAY;AAAA,EAC1B,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAqB;AACnB,SAAKH,GAAO,2BAKTI,GAAA,EAAa,cAAW,cAAc,GAAGD,GACxC,4BAACE,GAAA,EAAe,WAAU,4BACvB,UAAAL,EAAM,IAAI,CAAC,EAAE,IAAAM,GAAI,MAAAC,GAAM,MAAAC,EAAA,GAAQC,MAAU;AACxC,UAAMC,IAASD,MAAUT,EAAM,SAAS;AAExC,6BACGW,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAe,WAAU,SACvB,UAAAH,sBACEI,GAAA,EAAgB,UAAAN,EAAA,CAAK,IAEtB,gBAAAI,EAACG,KAAe,MAAMR,GAAO,GAAGL,GAC7B,aACH,GAEJ;AAAA,MACCQ,IAAS,OACR,gBAAAE,EAACI,GAAA,EAAqB,UAAAf,EAAA,CAAU;AAAA,IAAA,EAAA,GAXrBK,CAaf;AAAA,EAEJ,CAAC,GACH,GACF,IA3BO;AA6BX;"}

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

@@ -0,0 +1,2 @@
+export type { BreadcrumbsItem, BreadcrumbsProps } from './breadcrumbs';
+export { default, default as Breadcrumbs } from './breadcrumbs';

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

@@ -0,0 +1,55 @@
+import { ReactNode } from 'react';
+/**
+ * Props for the ConfirmDialog component.
+ */
+export interface ConfirmDialogProps {
+    /**
+     * Whether the dialog is open.
+     */
+    open: boolean;
+    /**
+     * Dialog title.
+     */
+    title: string;
+    /**
+     * Whether the dialog is in a loading state.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Whether the dialog is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Text to display on the confirm button.
+     * @default "Confirm"
+     */
+    confirmText?: string;
+    /**
+     * Text to display on the cancel button.
+     * @default "Cancel"
+     */
+    cancelText?: string;
+    /**
+     * Optional passphrase for additional confirmation.
+     */
+    passphrase?: string;
+    /**
+     * Optional content rendered inside the dialog.
+     */
+    children?: ReactNode;
+    /**
+     * Callback function to handle cancel action.
+     */
+    onCancel: () => void;
+    /**
+     * Callback function to handle confirm action.
+     */
+    onConfirm: () => void;
+}
+/**
+ * Confirm dialog for destructive or critical actions.
+ */
+export declare function ConfirmDialog({ open, title, loading, disabled, confirmText, cancelText, passphrase, children, onConfirm, onCancel, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+export default ConfirmDialog;

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