@component-labs/ui 0.0.1

package/dist/dialog.d.ts

@@ -0,0 +1,4 @@
+export { Dialog } from './components/dialog/Dialog';
+export type { DialogRootProps, DialogTriggerProps, DialogContentProps, DialogTitleProps, DialogDescriptionProps, DialogFooterProps, DialogCloseProps, } from './components/dialog/Dialog';
+export { dialogDocs } from './components/dialog/Dialog.docs';
+//# sourceMappingURL=dialog.d.ts.map

package/dist/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../src/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,YAAY,EACV,eAAe,EACf,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC"}

package/dist/dialog.js

@@ -0,0 +1,323 @@
+import { jsxs as p, jsx as n, Fragment as R } from "react/jsx-runtime";
+import { D as B, u as w, H as F, a as O, b as E, d as P } from "./Z32PU2LQ-CPSDShGU.js";
+import { f as s, c as g, a as d, l as f, h as C, C as A, d as $, J as I, m as S } from "./U6HHPQDW-BkT6kvCd.js";
+import { useContext as c, useMemo as v, useRef as j, createContext as z, forwardRef as u } from "react";
+import { u as L } from "./HMKTUWOU-DlOdK4rt.js";
+import { a as b, c as r } from "./utils-BZvHF7th.js";
+var M = "p", U = g(function({ store: o, ...e }) {
+  const a = c(B), i = f(e.id);
+  return C(() => (a == null || a(i), () => a == null ? void 0 : a(void 0)), [a, i]), e = {
+    id: i,
+    ...e
+  }, A(e);
+}), V = s(function(o) {
+  const e = U(o);
+  return d(M, e);
+}), W = "button", J = g(
+  function({ store: o, ...e }) {
+    const a = w();
+    o = o || a;
+    const i = e.onClick, l = $((m) => {
+      i == null || i(m), !m.defaultPrevented && (o == null || o.hide());
+    });
+    return e = {
+      "data-dialog-dismiss": "",
+      children: v(
+        () => /* @__PURE__ */ p(
+          "svg",
+          {
+            "aria-label": "Dismiss popup",
+            display: "block",
+            fill: "none",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 1.5,
+            viewBox: "0 0 16 16",
+            height: "1em",
+            width: "1em",
+            children: [
+              /* @__PURE__ */ n("line", { x1: "4", y1: "4", x2: "12", y2: "12" }),
+              /* @__PURE__ */ n("line", { x1: "4", y1: "12", x2: "12", y2: "4" })
+            ]
+          }
+        ),
+        []
+      ),
+      ...e,
+      onClick: l
+    }, e = L(e), e;
+  }
+), q = s(function(o) {
+  const e = J(o);
+  return d(W, e);
+}), G = "h1", h = g(
+  function(o) {
+    const e = j(null), a = c(F) || 1, i = `h${a}`, l = I(e, i), D = v(
+      () => !!l && /^h\d$/.test(l),
+      [l]
+    );
+    return o = {
+      render: /* @__PURE__ */ n(i, {}),
+      role: D ? void 0 : "heading",
+      "aria-level": D ? void 0 : a,
+      ...o,
+      ref: S(e, o.ref)
+    }, o;
+  }
+);
+s(function(o) {
+  const e = h(o);
+  return d(G, e);
+});
+var K = "h1", Q = g(
+  function({ store: o, ...e }) {
+    const a = c(O), i = f(e.id);
+    return C(() => (a == null || a(i), () => a == null ? void 0 : a(void 0)), [a, i]), e = {
+      id: i,
+      ...e
+    }, e = h(e), e;
+  }
+), X = s(function(o) {
+  const e = Q(o);
+  return d(K, e);
+});
+const Y = b([
+  "fixed inset-0 z-50 bg-black/50",
+  "data-enter:animate-in data-enter:fade-in-0",
+  "data-leave:animate-out data-leave:fade-out-0"
+]), Z = b([
+  "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
+  "w-full max-w-lg",
+  "rounded-lg border bg-white p-6 shadow-lg",
+  "dark:bg-gray-900 dark:border-gray-700",
+  "data-enter:animate-in data-enter:fade-in-0 data-enter:zoom-in-95",
+  "data-leave:animate-out data-leave:fade-out-0 data-leave:zoom-out-95"
+]);
+function _({
+  children: t,
+  open: o,
+  onOpenChange: e,
+  defaultOpen: a
+}) {
+  const i = P({
+    open: o,
+    setOpen: e,
+    defaultOpen: a
+  });
+  return /* @__PURE__ */ n(y.Provider, { value: i, children: t });
+}
+const y = z(null);
+function x() {
+  const t = c(y);
+  if (!t)
+    throw new Error("Dialog components must be used within DialogRoot");
+  return t;
+}
+function ee({ children: t, className: o }) {
+  const e = x();
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      onClick: () => e.setOpen(!0),
+      className: o,
+      type: "button",
+      children: t
+    }
+  );
+}
+const T = u(
+  ({ backdrop: t = !0, className: o, children: e, ...a }, i) => {
+    const l = x();
+    return /* @__PURE__ */ p(R, { children: [
+      t && /* @__PURE__ */ n(
+        "div",
+        {
+          className: Y(),
+          onClick: () => l.setOpen(!1)
+        }
+      ),
+      /* @__PURE__ */ n(
+        E,
+        {
+          ref: i,
+          store: l,
+          className: r(Z(), o),
+          ...a,
+          children: e
+        }
+      )
+    ] });
+  }
+);
+T.displayName = "DialogContent";
+function oe({ children: t, className: o }) {
+  return /* @__PURE__ */ n("div", { className: r("mb-4 space-y-1.5", o), children: t });
+}
+const k = u(
+  ({ children: t, className: o }, e) => /* @__PURE__ */ n(
+    X,
+    {
+      ref: e,
+      className: r(
+        "text-lg font-semibold text-gray-900 dark:text-gray-100",
+        o
+      ),
+      children: t
+    }
+  )
+);
+k.displayName = "DialogTitle";
+const H = u(({ children: t, className: o }, e) => /* @__PURE__ */ n(
+  V,
+  {
+    ref: e,
+    className: r("text-sm text-gray-500 dark:text-gray-400", o),
+    children: t
+  }
+));
+H.displayName = "DialogDescription";
+function te({ children: t, className: o }) {
+  return /* @__PURE__ */ n("div", { className: r("mt-6 flex justify-end gap-2", o), children: t });
+}
+const N = u(
+  ({ children: t, className: o }, e) => /* @__PURE__ */ n(q, { ref: e, className: o, children: t })
+);
+N.displayName = "DialogClose";
+const ge = {
+  Root: _,
+  Trigger: ee,
+  Content: T,
+  Header: oe,
+  Title: k,
+  Description: H,
+  Footer: te,
+  Close: N
+}, de = {
+  name: "Dialog",
+  description: "Modal dialog with focus trap and accessible dismissal, built on Ariakit.",
+  category: "Feedback",
+  installation: "pnpm add @component-labs/ui",
+  usage: `import { Dialog } from "@component-labs/ui";
+
+<Dialog.Root>
+  <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>Title</Dialog.Title>
+      <Dialog.Description>Description</Dialog.Description>
+    </Dialog.Header>
+    <Dialog.Footer>
+      <Dialog.Close>Close</Dialog.Close>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>`,
+  props: [
+    {
+      name: "open",
+      type: "boolean",
+      description: "Controlled open state (Dialog.Root)"
+    },
+    {
+      name: "onOpenChange",
+      type: "(open: boolean) => void",
+      description: "Callback when open state changes (Dialog.Root)"
+    },
+    {
+      name: "defaultOpen",
+      type: "boolean",
+      description: "Default open state for uncontrolled usage (Dialog.Root)",
+      default: "false"
+    },
+    {
+      name: "backdrop",
+      type: "boolean",
+      description: "Whether to show the backdrop overlay (Dialog.Content)",
+      default: "true"
+    }
+  ],
+  examples: [
+    {
+      title: "Basic Dialog",
+      code: `<Dialog.Root>
+  <Dialog.Trigger>
+    <Button>Open Dialog</Button>
+  </Dialog.Trigger>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>Are you sure?</Dialog.Title>
+      <Dialog.Description>
+        This action cannot be undone.
+      </Dialog.Description>
+    </Dialog.Header>
+    <Dialog.Footer>
+      <Dialog.Close>
+        <Button variant="ghost">Cancel</Button>
+      </Dialog.Close>
+      <Button variant="destructive">Delete</Button>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>`,
+      description: "Simple confirmation dialog"
+    },
+    {
+      title: "Controlled Dialog",
+      code: `const [open, setOpen] = useState(false);
+
+<Dialog.Root open={open} onOpenChange={setOpen}>
+  <Dialog.Trigger>
+    <Button>Open</Button>
+  </Dialog.Trigger>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>Controlled Dialog</Dialog.Title>
+    </Dialog.Header>
+    <p>Dialog is {open ? 'open' : 'closed'}</p>
+  </Dialog.Content>
+</Dialog.Root>`,
+      description: "Using dialog in controlled mode"
+    },
+    {
+      title: "Form Dialog",
+      code: `<Dialog.Root>
+  <Dialog.Trigger>
+    <Button>Add User</Button>
+  </Dialog.Trigger>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>Create Account</Dialog.Title>
+      <Dialog.Description>
+        Enter user details below
+      </Dialog.Description>
+    </Dialog.Header>
+    <form className="space-y-4">
+      <Input label="Name" />
+      <Input label="Email" type="email" />
+    </form>
+    <Dialog.Footer>
+      <Dialog.Close>
+        <Button variant="outline">Cancel</Button>
+      </Dialog.Close>
+      <Button type="submit">Create</Button>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>`,
+      description: "Dialog with form content"
+    }
+  ],
+  accessibility: [
+    "Built on Ariakit's accessible Dialog component",
+    "Focus trap - keeps focus within dialog",
+    "Escape key to close",
+    "Click outside/backdrop to dismiss",
+    "Proper ARIA attributes (role='dialog', aria-modal)",
+    "Focus returns to trigger on close",
+    "Screen reader announcements"
+  ],
+  relatedComponents: ["Toast"]
+};
+export {
+  ge as Dialog,
+  de as dialogDocs
+};
+//# sourceMappingURL=dialog.js.map

package/dist/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","sources":["../../../node_modules/.pnpm/@ariakit+react-core@0.4.21_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@ariakit/react-core/esm/__chunks/WHZCNP67.js","../../../node_modules/.pnpm/@ariakit+react-core@0.4.21_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@ariakit/react-core/esm/__chunks/OCCHVUS4.js","../../../node_modules/.pnpm/@ariakit+react-core@0.4.21_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@ariakit/react-core/esm/__chunks/FLYCYZJT.js","../../../node_modules/.pnpm/@ariakit+react-core@0.4.21_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@ariakit/react-core/esm/__chunks/O4VW3LHI.js","../src/components/dialog/Dialog.tsx","../src/components/dialog/Dialog.docs.ts"],"sourcesContent":["\"use client\";\nimport {\n  DialogDescriptionContext\n} from \"./A62MDFCW.js\";\nimport {\n  createElement,\n  createHook,\n  forwardRef\n} from \"./GWSL6KNJ.js\";\nimport {\n  useId,\n  useSafeLayoutEffect\n} from \"./KPHZR4MB.js\";\n\n// src/dialog/dialog-description.tsx\nimport { removeUndefinedValues } from \"@ariakit/core/utils/misc\";\nimport { useContext } from \"react\";\nvar TagName = \"p\";\nvar useDialogDescription = createHook(function useDialogDescription2({ store, ...props }) {\n  const setDescriptionId = useContext(DialogDescriptionContext);\n  const id = useId(props.id);\n  useSafeLayoutEffect(() => {\n    setDescriptionId == null ? void 0 : setDescriptionId(id);\n    return () => setDescriptionId == null ? void 0 : setDescriptionId(void 0);\n  }, [setDescriptionId, id]);\n  props = {\n    id,\n    ...props\n  };\n  return removeUndefinedValues(props);\n});\nvar DialogDescription = forwardRef(function DialogDescription2(props) {\n  const htmlProps = useDialogDescription(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport {\n  useDialogDescription,\n  DialogDescription\n};\n","\"use client\";\nimport {\n  useDialogScopedContext\n} from \"./A62MDFCW.js\";\nimport {\n  useButton\n} from \"./HMKTUWOU.js\";\nimport {\n  createElement,\n  createHook,\n  forwardRef\n} from \"./GWSL6KNJ.js\";\nimport {\n  useEvent\n} from \"./KPHZR4MB.js\";\n\n// src/dialog/dialog-dismiss.tsx\nimport { useMemo } from \"react\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nvar TagName = \"button\";\nvar useDialogDismiss = createHook(\n  function useDialogDismiss2({ store, ...props }) {\n    const context = useDialogScopedContext();\n    store = store || context;\n    const onClickProp = props.onClick;\n    const onClick = useEvent((event) => {\n      onClickProp == null ? void 0 : onClickProp(event);\n      if (event.defaultPrevented) return;\n      store == null ? void 0 : store.hide();\n    });\n    const children = useMemo(\n      () => /* @__PURE__ */ jsxs(\n        \"svg\",\n        {\n          \"aria-label\": \"Dismiss popup\",\n          display: \"block\",\n          fill: \"none\",\n          stroke: \"currentColor\",\n          strokeLinecap: \"round\",\n          strokeLinejoin: \"round\",\n          strokeWidth: 1.5,\n          viewBox: \"0 0 16 16\",\n          height: \"1em\",\n          width: \"1em\",\n          children: [\n            /* @__PURE__ */ jsx(\"line\", { x1: \"4\", y1: \"4\", x2: \"12\", y2: \"12\" }),\n            /* @__PURE__ */ jsx(\"line\", { x1: \"4\", y1: \"12\", x2: \"12\", y2: \"4\" })\n          ]\n        }\n      ),\n      []\n    );\n    props = {\n      \"data-dialog-dismiss\": \"\",\n      children,\n      ...props,\n      onClick\n    };\n    props = useButton(props);\n    return props;\n  }\n);\nvar DialogDismiss = forwardRef(function DialogDismiss2(props) {\n  const htmlProps = useDialogDismiss(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport {\n  useDialogDismiss,\n  DialogDismiss\n};\n","\"use client\";\nimport {\n  HeadingContext\n} from \"./CZ4GFWYL.js\";\nimport {\n  createElement,\n  createHook,\n  forwardRef\n} from \"./GWSL6KNJ.js\";\nimport {\n  useMergeRefs,\n  useTagName\n} from \"./KPHZR4MB.js\";\n\n// src/heading/heading.tsx\nimport { useContext, useMemo, useRef } from \"react\";\nimport { jsx } from \"react/jsx-runtime\";\nvar TagName = \"h1\";\nvar useHeading = createHook(\n  function useHeading2(props) {\n    const ref = useRef(null);\n    const level = useContext(HeadingContext) || 1;\n    const Element = `h${level}`;\n    const tagName = useTagName(ref, Element);\n    const isNativeHeading = useMemo(\n      () => !!tagName && /^h\\d$/.test(tagName),\n      [tagName]\n    );\n    props = {\n      render: /* @__PURE__ */ jsx(Element, {}),\n      role: !isNativeHeading ? \"heading\" : void 0,\n      \"aria-level\": !isNativeHeading ? level : void 0,\n      ...props,\n      ref: useMergeRefs(ref, props.ref)\n    };\n    return props;\n  }\n);\nvar Heading = forwardRef(function Heading2(props) {\n  const htmlProps = useHeading(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport {\n  useHeading,\n  Heading\n};\n","\"use client\";\nimport {\n  useHeading\n} from \"./FLYCYZJT.js\";\nimport {\n  DialogHeadingContext\n} from \"./A62MDFCW.js\";\nimport {\n  createElement,\n  createHook,\n  forwardRef\n} from \"./GWSL6KNJ.js\";\nimport {\n  useId,\n  useSafeLayoutEffect\n} from \"./KPHZR4MB.js\";\n\n// src/dialog/dialog-heading.tsx\nimport { useContext } from \"react\";\nvar TagName = \"h1\";\nvar useDialogHeading = createHook(\n  function useDialogHeading2({ store, ...props }) {\n    const setHeadingId = useContext(DialogHeadingContext);\n    const id = useId(props.id);\n    useSafeLayoutEffect(() => {\n      setHeadingId == null ? void 0 : setHeadingId(id);\n      return () => setHeadingId == null ? void 0 : setHeadingId(void 0);\n    }, [setHeadingId, id]);\n    props = {\n      id,\n      ...props\n    };\n    props = useHeading(props);\n    return props;\n  }\n);\nvar DialogHeading = forwardRef(function DialogHeading2(props) {\n  const htmlProps = useDialogHeading(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport {\n  useDialogHeading,\n  DialogHeading\n};\n","import {\n  Dialog as AriaDialog,\n  DialogDismiss,\n  DialogHeading,\n  DialogDescription as AriaDialogDescription,\n  useDialogStore,\n  type DialogProps as AriaDialogProps,\n  type DialogStore,\n} from \"@ariakit/react\";\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport { cn } from \"../../lib/utils\";\n\nconst overlayVariants = cva([\n  \"fixed inset-0 z-50 bg-black/50\",\n  \"data-enter:animate-in data-enter:fade-in-0\",\n  \"data-leave:animate-out data-leave:fade-out-0\",\n]);\n\nconst dialogVariants = cva([\n  \"fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2\",\n  \"w-full max-w-lg\",\n  \"rounded-lg border bg-white p-6 shadow-lg\",\n  \"dark:bg-gray-900 dark:border-gray-700\",\n  \"data-enter:animate-in data-enter:fade-in-0 data-enter:zoom-in-95\",\n  \"data-leave:animate-out data-leave:fade-out-0 data-leave:zoom-out-95\",\n]);\n\n// Dialog Root with Store\nexport interface DialogRootProps {\n  children: ReactNode;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  defaultOpen?: boolean;\n}\n\nexport function DialogRoot({\n  children,\n  open,\n  onOpenChange,\n  defaultOpen,\n}: DialogRootProps) {\n  const dialog = useDialogStore({\n    open,\n    setOpen: onOpenChange,\n    defaultOpen,\n  });\n\n  return <DialogContext.Provider value={dialog}>{children}</DialogContext.Provider>;\n}\n\n// Context for dialog store\nimport { createContext, useContext } from \"react\";\n\nconst DialogContext = createContext<DialogStore | null>(null);\n\nfunction useDialog() {\n  const context = useContext(DialogContext);\n  if (!context) {\n    throw new Error(\"Dialog components must be used within DialogRoot\");\n  }\n  return context;\n}\n\n// Dialog Trigger\nexport interface DialogTriggerProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport function DialogTrigger({ children, className }: DialogTriggerProps) {\n  const dialog = useDialog();\n\n  return (\n    <button\n      onClick={() => dialog.setOpen(true)}\n      className={className}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  );\n}\n\n// Dialog Content\nexport interface DialogContentProps extends Omit<AriaDialogProps, \"store\"> {\n  /** Whether to show the backdrop overlay */\n  backdrop?: boolean;\n}\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n  ({ backdrop = true, className, children, ...props }, ref) => {\n    const dialog = useDialog();\n\n    return (\n      <>\n        {backdrop && (\n          <div\n            className={overlayVariants()}\n            onClick={() => dialog.setOpen(false)}\n          />\n        )}\n        <AriaDialog\n          ref={ref}\n          store={dialog}\n          className={cn(dialogVariants(), className)}\n          {...props}\n        >\n          {children}\n        </AriaDialog>\n      </>\n    );\n  },\n);\n\nDialogContent.displayName = \"DialogContent\";\n\n// Dialog Header\nexport interface DialogHeaderProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport function DialogHeader({ children, className }: DialogHeaderProps) {\n  return (\n    <div className={cn(\"mb-4 space-y-1.5\", className)}>\n      {children}\n    </div>\n  );\n}\n\n// Dialog Title\nexport interface DialogTitleProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(\n  ({ children, className }, ref) => {\n    return (\n      <DialogHeading\n        ref={ref}\n        className={cn(\n          \"text-lg font-semibold text-gray-900 dark:text-gray-100\",\n          className,\n        )}\n      >\n        {children}\n      </DialogHeading>\n    );\n  },\n);\n\nDialogTitle.displayName = \"DialogTitle\";\n\n// Dialog Description\nexport interface DialogDescriptionProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport const DialogDescription = forwardRef<\n  HTMLParagraphElement,\n  DialogDescriptionProps\n>(({ children, className }, ref) => {\n  return (\n    <AriaDialogDescription\n      ref={ref}\n      className={cn(\"text-sm text-gray-500 dark:text-gray-400\", className)}\n    >\n      {children}\n    </AriaDialogDescription>\n  );\n});\n\nDialogDescription.displayName = \"DialogDescription\";\n\n// Dialog Footer\nexport interface DialogFooterProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport function DialogFooter({ children, className }: DialogFooterProps) {\n  return (\n    <div className={cn(\"mt-6 flex justify-end gap-2\", className)}>\n      {children}\n    </div>\n  );\n}\n\n// Dialog Close\nexport interface DialogCloseProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport const DialogClose = forwardRef<HTMLButtonElement, DialogCloseProps>(\n  ({ children, className }, ref) => {\n    return (\n      <DialogDismiss ref={ref} className={className}>\n        {children}\n      </DialogDismiss>\n    );\n  },\n);\n\nDialogClose.displayName = \"DialogClose\";\n\n// Compound component export\nexport const Dialog = {\n  Root: DialogRoot,\n  Trigger: DialogTrigger,\n  Content: DialogContent,\n  Header: DialogHeader,\n  Title: DialogTitle,\n  Description: DialogDescription,\n  Footer: DialogFooter,\n  Close: DialogClose,\n};\n","import type { ComponentDoc } from \"../../types/docs\";\n\nexport const dialogDocs: ComponentDoc = {\n  name: \"Dialog\",\n  description: \"Modal dialog with focus trap and accessible dismissal, built on Ariakit.\",\n  category: \"Feedback\",\n  installation: `pnpm add @component-labs/ui`,\n  usage: `import { Dialog } from \"@component-labs/ui\";\n\n<Dialog.Root>\n  <Dialog.Trigger>Open Dialog</Dialog.Trigger>\n  <Dialog.Content>\n    <Dialog.Header>\n      <Dialog.Title>Title</Dialog.Title>\n      <Dialog.Description>Description</Dialog.Description>\n    </Dialog.Header>\n    <Dialog.Footer>\n      <Dialog.Close>Close</Dialog.Close>\n    </Dialog.Footer>\n  </Dialog.Content>\n</Dialog.Root>`,\n  props: [\n    {\n      name: \"open\",\n      type: \"boolean\",\n      description: \"Controlled open state (Dialog.Root)\",\n    },\n    {\n      name: \"onOpenChange\",\n      type: \"(open: boolean) => void\",\n      description: \"Callback when open state changes (Dialog.Root)\",\n    },\n    {\n      name: \"defaultOpen\",\n      type: \"boolean\",\n      description: \"Default open state for uncontrolled usage (Dialog.Root)\",\n      default: \"false\",\n    },\n    {\n      name: \"backdrop\",\n      type: \"boolean\",\n      description: \"Whether to show the backdrop overlay (Dialog.Content)\",\n      default: \"true\",\n    },\n  ],\n  examples: [\n    {\n      title: \"Basic Dialog\",\n      code: `<Dialog.Root>\n  <Dialog.Trigger>\n    <Button>Open Dialog</Button>\n  </Dialog.Trigger>\n  <Dialog.Content>\n    <Dialog.Header>\n      <Dialog.Title>Are you sure?</Dialog.Title>\n      <Dialog.Description>\n        This action cannot be undone.\n      </Dialog.Description>\n    </Dialog.Header>\n    <Dialog.Footer>\n      <Dialog.Close>\n        <Button variant=\"ghost\">Cancel</Button>\n      </Dialog.Close>\n      <Button variant=\"destructive\">Delete</Button>\n    </Dialog.Footer>\n  </Dialog.Content>\n</Dialog.Root>`,\n      description: \"Simple confirmation dialog\",\n    },\n    {\n      title: \"Controlled Dialog\",\n      code: `const [open, setOpen] = useState(false);\n\n<Dialog.Root open={open} onOpenChange={setOpen}>\n  <Dialog.Trigger>\n    <Button>Open</Button>\n  </Dialog.Trigger>\n  <Dialog.Content>\n    <Dialog.Header>\n      <Dialog.Title>Controlled Dialog</Dialog.Title>\n    </Dialog.Header>\n    <p>Dialog is {open ? 'open' : 'closed'}</p>\n  </Dialog.Content>\n</Dialog.Root>`,\n      description: \"Using dialog in controlled mode\",\n    },\n    {\n      title: \"Form Dialog\",\n      code: `<Dialog.Root>\n  <Dialog.Trigger>\n    <Button>Add User</Button>\n  </Dialog.Trigger>\n  <Dialog.Content>\n    <Dialog.Header>\n      <Dialog.Title>Create Account</Dialog.Title>\n      <Dialog.Description>\n        Enter user details below\n      </Dialog.Description>\n    </Dialog.Header>\n    <form className=\"space-y-4\">\n      <Input label=\"Name\" />\n      <Input label=\"Email\" type=\"email\" />\n    </form>\n    <Dialog.Footer>\n      <Dialog.Close>\n        <Button variant=\"outline\">Cancel</Button>\n      </Dialog.Close>\n      <Button type=\"submit\">Create</Button>\n    </Dialog.Footer>\n  </Dialog.Content>\n</Dialog.Root>`,\n      description: \"Dialog with form content\",\n    },\n  ],\n  accessibility: [\n    \"Built on Ariakit's accessible Dialog component\",\n    \"Focus trap - keeps focus within dialog\",\n    \"Escape key to close\",\n    \"Click outside/backdrop to dismiss\",\n    \"Proper ARIA attributes (role='dialog', aria-modal)\",\n    \"Focus returns to trigger on close\",\n    \"Screen reader announcements\",\n  ],\n  relatedComponents: [\"Toast\"],\n};\n"],"names":["TagName","useDialogDescription","createHook","store","props","setDescriptionId","useContext","DialogDescriptionContext","id","useId","useSafeLayoutEffect","removeUndefinedValues","DialogDescription","forwardRef","htmlProps","createElement","useDialogDismiss","context","useDialogScopedContext","onClickProp","onClick","useEvent","event","useMemo","jsxs","jsx","useButton","DialogDismiss","useHeading","ref","useRef","level","HeadingContext","Element","tagName","useTagName","isNativeHeading","useMergeRefs","useDialogHeading","setHeadingId","DialogHeadingContext","DialogHeading","overlayVariants","cva","dialogVariants","DialogRoot","children","open","onOpenChange","defaultOpen","dialog","useDialogStore","DialogContext","createContext","useDialog","DialogTrigger","className","DialogContent","backdrop","Fragment","AriaDialog","cn","DialogHeader","DialogTitle","AriaDialogDescription","DialogFooter","DialogClose","Dialog","dialogDocs"],"mappings":"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","x_google_ignoreList":[0,1,2,3]}

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+export { Button } from './components/button/Button';
+export { Checkbox } from './components/checkbox/Checkbox';
+export { Combobox } from './components/combobox/Combobox';
+export { DataTable } from './components/data-table/DataTable';
+export { Dialog } from './components/dialog/Dialog';
+export { Input } from './components/input/Input';
+export { Menu } from './components/menu/Menu';
+export { Switch } from './components/switch/Switch';
+export type { ButtonProps } from './components/button/Button';
+export type { CheckboxProps } from './components/checkbox/Checkbox';
+export type { ComboboxProps, ComboboxOption } from './components/combobox/Combobox';
+export type { TableProps as DataTableProps } from './components/data-table/DataTable';
+export type { InputProps } from './components/input/Input';
+export type { SwitchProps } from './components/switch/Switch';
+export type { MenuRootProps, MenuTriggerProps, MenuContentProps, MenuItemComponentProps as MenuItemProps, MenuItemCheckboxComponentProps as MenuItemCheckboxProps, MenuSeparatorComponentProps as MenuSeparatorProps, } from './components/menu/Menu';
+export type { DialogRootProps, DialogTriggerProps, DialogContentProps, DialogTitleProps, DialogDescriptionProps, DialogFooterProps, DialogCloseProps, } from './components/dialog/Dialog';
+export { cn } from './lib/utils';
+export { buttonDocs } from './components/button/Button.docs';
+export { checkboxDocs } from './components/checkbox/Checkbox.docs';
+export { comboboxDocs } from './components/combobox/Combobox.docs';
+export { dataTableDocs } from './components/data-table/DataTable.docs';
+export { dialogDocs } from './components/dialog/Dialog.docs';
+export { inputDocs } from './components/input/Input.docs';
+export { menuDocs } from './components/menu/Menu.docs';
+export { switchDocs } from './components/switch/Switch.docs';
+export type { ComponentDoc, PropDoc, ExampleDoc } from './types/docs';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAGpD,YAAY,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAC9D,YAAY,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AACpE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AACpF,YAAY,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACtF,YAAY,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAC3D,YAAY,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAG9D,YAAY,EACV,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,sBAAsB,IAAI,aAAa,EACvC,8BAA8B,IAAI,qBAAqB,EACvD,2BAA2B,IAAI,kBAAkB,GAClD,MAAM,wBAAwB,CAAC;AAGhC,YAAY,EACV,eAAe,EACf,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAGjC,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAG7D,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/input.d.ts

@@ -0,0 +1,4 @@
+export { Input } from './components/input/Input';
+export type { InputProps } from './components/input/Input';
+export { inputDocs } from './components/input/Input.docs';
+//# sourceMappingURL=input.d.ts.map

package/dist/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../src/input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,YAAY,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/input.js

@@ -0,0 +1,230 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { c as l, a as y } from "./utils-BZvHF7th.js";
+import { forwardRef as h } from "react";
+const b = y(
+  [
+    "w-full rounded-lg border px-3 py-2",
+    "text-sm font-medium",
+    "transition-all duration-200",
+    "focus:outline-none focus:ring-2 focus:ring-primary-600 focus:ring-offset-2",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "placeholder:text-gray-400 dark:placeholder:text-gray-500"
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          "bg-white dark:bg-gray-900",
+          "border-gray-300 dark:border-gray-700",
+          "text-gray-900 dark:text-gray-100",
+          "hover:border-gray-400 dark:hover:border-gray-600"
+        ],
+        outline: [
+          "bg-transparent",
+          "border-primary-600 dark:border-primary-500",
+          "text-gray-900 dark:text-gray-100",
+          "hover:bg-primary-50 dark:hover:bg-primary-950"
+        ],
+        error: [
+          "bg-white dark:bg-gray-900",
+          "border-error-600 dark:border-error-500",
+          "text-gray-900 dark:text-gray-100",
+          "focus:ring-error-600"
+        ]
+      },
+      size: {
+        sm: "h-9 text-sm",
+        md: "h-10 text-base",
+        lg: "h-11 text-lg"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+), g = h(
+  ({
+    variant: d,
+    size: p,
+    label: i,
+    helperText: n,
+    error: t,
+    startIcon: a,
+    endIcon: r,
+    className: c,
+    ...u
+  }, m) => {
+    const o = !!t;
+    return /* @__PURE__ */ s("div", { className: "w-full space-y-1.5", children: [
+      i && /* @__PURE__ */ e("label", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: i }),
+      /* @__PURE__ */ s("div", { className: "relative", children: [
+        a && /* @__PURE__ */ e("div", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500", children: a }),
+        /* @__PURE__ */ e(
+          "input",
+          {
+            ref: m,
+            className: l(
+              b({ variant: o ? "error" : d, size: p }),
+              a && "pl-10",
+              r && "pr-10",
+              c
+            ),
+            ...u
+          }
+        ),
+        r && /* @__PURE__ */ e("div", { className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500", children: r })
+      ] }),
+      (n || t) && /* @__PURE__ */ e(
+        "p",
+        {
+          className: l(
+            "text-xs",
+            o ? "text-error-600 dark:text-error-400" : "text-gray-500 dark:text-gray-400"
+          ),
+          children: t || n
+        }
+      )
+    ] });
+  }
+);
+g.displayName = "Input";
+const k = {
+  name: "Input",
+  description: "Text input with validation, icon support, and accessible states.",
+  category: "Inputs",
+  installation: "pnpm add @component-labs/ui",
+  usage: `import { Input } from "@component-labs/ui";
+
+<Input placeholder="Enter your email" />`,
+  props: [
+    {
+      name: "variant",
+      type: "'default' | 'outline' | 'error'",
+      description: "Visual style variant",
+      default: "'default'"
+    },
+    {
+      name: "size",
+      type: "'sm' | 'md' | 'lg'",
+      description: "Size of the input",
+      default: "'md'"
+    },
+    {
+      name: "label",
+      type: "ReactNode",
+      description: "Label text above the input"
+    },
+    {
+      name: "helperText",
+      type: "ReactNode",
+      description: "Helper text below the input"
+    },
+    {
+      name: "error",
+      type: "string",
+      description: "Error message (automatically sets variant to error)"
+    },
+    {
+      name: "startIcon",
+      type: "ReactNode",
+      description: "Icon to display before the input text"
+    },
+    {
+      name: "endIcon",
+      type: "ReactNode",
+      description: "Icon to display after the input text"
+    },
+    {
+      name: "placeholder",
+      type: "string",
+      description: "Placeholder text"
+    },
+    {
+      name: "disabled",
+      type: "boolean",
+      description: "Whether the input is disabled",
+      default: "false"
+    }
+  ],
+  examples: [
+    {
+      title: "Basic Input",
+      code: '<Input placeholder="Enter your email" />',
+      description: "Simple text input"
+    },
+    {
+      title: "With Label",
+      code: `<Input
+  label="Email Address"
+  placeholder="you@example.com"
+  type="email"
+/>`,
+      description: "Input with label"
+    },
+    {
+      title: "With Helper Text",
+      code: `<Input
+  label="Username"
+  helperText="Must be unique and at least 3 characters"
+  placeholder="johndoe"
+/>`,
+      description: "Input with helper text"
+    },
+    {
+      title: "With Error",
+      code: `<Input
+  label="Email"
+  error="Please enter a valid email address"
+  value="invalid-email"
+/>`,
+      description: "Input with error state"
+    },
+    {
+      title: "With Icons",
+      code: `<div className="space-y-4">
+  <Input
+    label="Search"
+    placeholder="Search..."
+    startIcon={<SearchIcon />}
+  />
+  <Input
+    label="Password"
+    type="password"
+    endIcon={<EyeIcon />}
+  />
+</div>`,
+      description: "Inputs with start and end icons"
+    },
+    {
+      title: "Sizes",
+      code: `<div className="space-y-4">
+  <Input size="sm" placeholder="Small input" />
+  <Input size="md" placeholder="Medium input" />
+  <Input size="lg" placeholder="Large input" />
+</div>`,
+      description: "Different input sizes"
+    },
+    {
+      title: "Disabled State",
+      code: `<Input
+  label="Disabled Input"
+  placeholder="Cannot edit"
+  disabled
+/>`,
+      description: "Disabled input"
+    }
+  ],
+  accessibility: [
+    "Proper label association with input",
+    "ARIA attributes for error states",
+    "Focus visible states with ring indicator",
+    "Disabled state prevents interaction",
+    "Helper text announced by screen readers"
+  ]
+};
+export {
+  g as Input,
+  k as inputDocs
+};
+//# sourceMappingURL=input.js.map