@devalok/shilp-sutra 0.1.0

package/dist/ui/data-table.js

@@ -0,0 +1,491 @@
+import { jsxs as r, jsx as l } from "react/jsx-runtime";
+import we, { useState as d, useRef as J, useEffect as Q, useCallback as ve } from "react";
+import { useReactTable as De, getExpandedRowModel as Ie, getPaginationRowModel as Re, getFilteredRowModel as Fe, getSortedRowModel as ze, getCoreRowModel as Pe, flexRender as E } from "@tanstack/react-table";
+import { useVirtualizer as ke } from "@tanstack/react-virtual";
+import { IconArrowUp as Ee, IconArrowDown as Me, IconArrowsSort as Te, IconSearch as Ve, IconChevronLeft as $e, IconChevronRight as L } from "@tabler/icons-react";
+import { Table as He, TableHeader as je, TableRow as y, TableHead as U, TableBody as M, TableCell as T } from "./table.js";
+import { Checkbox as q } from "./checkbox.js";
+import { cn as i } from "./lib/utils.js";
+import { DataTableToolbar as _e } from "./data-table-toolbar.js";
+const Ae = {
+  compact: "py-ds-02",
+  standard: "py-ds-05",
+  comfortable: "py-ds-07"
+};
+function Be({
+  initialValue: v,
+  onSave: S,
+  onCancel: D
+}) {
+  const [x, h] = d(v), c = J(null);
+  Q(() => {
+    var s, C;
+    (s = c.current) == null || s.focus(), (C = c.current) == null || C.select();
+  }, []);
+  const u = ve(() => {
+    S(x);
+  }, [S, x]);
+  return /* @__PURE__ */ l(
+    "input",
+    {
+      ref: c,
+      type: "text",
+      value: x,
+      onChange: (s) => h(s.target.value),
+      onBlur: u,
+      onKeyDown: (s) => {
+        s.key === "Enter" ? (s.preventDefault(), u()) : s.key === "Escape" && (s.preventDefault(), D());
+      },
+      className: i(
+        "h-ds-xs-plus w-full rounded-ds-md",
+        "border border-border-interactive bg-field",
+        "px-ds-02 text-ds-sm",
+        "text-text-primary placeholder:text-text-placeholder",
+        "outline-none focus:border-[var(--color-border-focus)]"
+      ),
+      "aria-label": "Edit cell value"
+    }
+  );
+}
+function Ge({
+  columns: v,
+  data: S,
+  className: D,
+  noResultsText: x,
+  sortable: h = !1,
+  filterable: c = !1,
+  globalFilter: u = !1,
+  paginated: s = !1,
+  pageSize: C,
+  pageSizeOptions: W,
+  selectable: I = !1,
+  onSelectionChange: V,
+  toolbar: $ = !1,
+  density: X = "standard",
+  columnPinning: p,
+  editable: Z = !1,
+  onCellEdit: R,
+  expandable: N = !1,
+  renderExpanded: H,
+  virtualRows: m = !1,
+  virtualRowHeight: ee = 48,
+  maxHeight: te = 600
+}) {
+  const [le, ne] = d([]), [oe, ae] = d([]), [F, z] = d(""), [se, re] = d({
+    pageIndex: 0,
+    pageSize: C ?? 10
+  }), [j, de] = d({}), [ie, ce] = d({}), [_, ue] = d({
+    left: (p == null ? void 0 : p.left) ?? [],
+    right: (p == null ? void 0 : p.right) ?? []
+  }), [A, me] = d(X), [b, P] = d(null), [ge, fe] = d({}), B = J(null), pe = {
+    id: "_select",
+    header: ({ table: e }) => /* @__PURE__ */ l(
+      q,
+      {
+        checked: e.getIsAllPageRowsSelected(),
+        indeterminate: e.getIsSomePageRowsSelected(),
+        onCheckedChange: (t) => e.toggleAllPageRowsSelected(!!t),
+        "aria-label": "Select all rows"
+      }
+    ),
+    cell: ({ row: e }) => /* @__PURE__ */ l(
+      q,
+      {
+        checked: e.getIsSelected(),
+        onCheckedChange: (t) => e.toggleSelected(!!t),
+        "aria-label": "Select row"
+      }
+    ),
+    enableSorting: !1,
+    enableColumnFilter: !1,
+    enableHiding: !1
+  }, be = {
+    id: "_expand",
+    header: () => null,
+    cell: ({ row: e }) => /* @__PURE__ */ l(
+      "button",
+      {
+        type: "button",
+        onClick: () => e.toggleExpanded(),
+        "aria-label": e.getIsExpanded() ? "Collapse row" : "Expand row",
+        className: "flex items-center justify-center p-ds-01 rounded hover:bg-layer-02 transition-colors",
+        children: /* @__PURE__ */ l(
+          L,
+          {
+            size: 16,
+            className: i(
+              "transition-transform duration-200",
+              e.getIsExpanded() && "rotate-90"
+            ),
+            "aria-hidden": "true"
+          }
+        )
+      }
+    ),
+    enableSorting: !1,
+    enableColumnFilter: !1,
+    enableHiding: !1
+  }, k = [
+    ...I ? [pe] : [],
+    ...N ? [be] : [],
+    ...v
+  ], g = {
+    columnVisibility: ie,
+    columnPinning: _
+  };
+  h && (g.sorting = le), (c || u) && (g.columnFilters = oe, g.globalFilter = F), s && (g.pagination = se), I && (g.rowSelection = j), N && (g.expanded = ge);
+  const o = De({
+    data: S,
+    columns: k,
+    state: g,
+    onColumnVisibilityChange: ce,
+    onColumnPinningChange: ue,
+    getCoreRowModel: Pe(),
+    ...h && {
+      onSortingChange: ne,
+      getSortedRowModel: ze()
+    },
+    ...(c || u) && {
+      onColumnFiltersChange: ae,
+      onGlobalFilterChange: z,
+      getFilteredRowModel: Fe()
+    },
+    ...s && {
+      onPaginationChange: re,
+      getPaginationRowModel: Re()
+    },
+    ...I && {
+      onRowSelectionChange: de,
+      enableRowSelection: !0
+    },
+    ...N && {
+      onExpandedChange: fe,
+      getExpandedRowModel: Ie()
+    }
+  });
+  Q(() => {
+    if (V) {
+      const e = o.getFilteredSelectedRowModel().rows.map((t) => t.original);
+      V(e);
+    }
+  }, [j]);
+  function G(e) {
+    const { left: t = [], right: a = [] } = _, n = t.indexOf(e), f = a.indexOf(e);
+    return n !== -1 ? {
+      className: "sticky bg-layer-01 z-raised",
+      style: { left: 0 }
+    } : f !== -1 ? {
+      className: "sticky bg-layer-01 z-raised",
+      style: { right: 0 }
+    } : { className: "", style: {} };
+  }
+  function xe(e) {
+    if (!Z || e === "_select" || e === "_expand") return !1;
+    const t = o.getColumn(e);
+    if (!t) return !1;
+    const a = t.columnDef.meta;
+    return (a == null ? void 0 : a.enableEditing) !== !1;
+  }
+  const he = Ae[A], w = o.getRowModel().rows, O = ke({
+    count: m ? w.length : 0,
+    getScrollElement: () => B.current,
+    estimateSize: () => ee,
+    overscan: 10
+  });
+  function Y(e, t) {
+    const a = e.getVisibleCells();
+    return /* @__PURE__ */ l(
+      y,
+      {
+        "data-state": e.getIsSelected() && "selected",
+        style: t,
+        className: m ? "absolute w-full flex" : void 0,
+        children: a.map((n) => {
+          const f = G(n.column.id), Ce = (b == null ? void 0 : b.rowIndex) === e.index && (b == null ? void 0 : b.columnId) === n.column.id;
+          return /* @__PURE__ */ l(
+            T,
+            {
+              className: i(
+                he,
+                f.className,
+                m && "flex-1"
+              ),
+              style: f.style,
+              onDoubleClick: () => {
+                xe(n.column.id) && P({
+                  rowIndex: e.index,
+                  columnId: n.column.id
+                });
+              },
+              children: Ce ? /* @__PURE__ */ l(
+                Be,
+                {
+                  initialValue: String(n.getValue() ?? ""),
+                  onSave: (Ne) => {
+                    R == null || R(e.index, n.column.id, Ne), P(null);
+                  },
+                  onCancel: () => P(null)
+                }
+              ) : E(n.column.columnDef.cell, n.getContext())
+            },
+            n.id
+          );
+        })
+      },
+      e.id
+    );
+  }
+  function ye(e, t) {
+    return !N || !e.getIsExpanded() || !H ? null : /* @__PURE__ */ l(
+      y,
+      {
+        style: t,
+        className: m ? "absolute w-full flex" : void 0,
+        children: /* @__PURE__ */ l(
+          T,
+          {
+            colSpan: k.length,
+            className: i(
+              "bg-layer-02 p-ds-05",
+              m && "flex-1"
+            ),
+            children: H(e.original)
+          }
+        )
+      },
+      `${e.id}-expanded`
+    );
+  }
+  function Se() {
+    if (!w.length)
+      return /* @__PURE__ */ l(M, { children: /* @__PURE__ */ l(y, { children: /* @__PURE__ */ l(
+        T,
+        {
+          colSpan: k.length,
+          className: "h-24 text-center text-text-tertiary",
+          children: x || "No results."
+        }
+      ) }) });
+    if (m) {
+      const e = O.getVirtualItems(), t = O.getTotalSize();
+      return /* @__PURE__ */ l(
+        M,
+        {
+          style: {
+            height: `${t}px`,
+            position: "relative"
+          },
+          children: e.map((a) => {
+            const n = w[a.index];
+            return Y(n, {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: `${a.size}px`,
+              transform: `translateY(${a.start}px)`
+            });
+          })
+        }
+      );
+    }
+    return /* @__PURE__ */ l(M, { children: w.map((e) => /* @__PURE__ */ r(we.Fragment, { children: [
+      Y(e),
+      ye(e)
+    ] }, e.id)) });
+  }
+  const K = /* @__PURE__ */ r(He, { children: [
+    /* @__PURE__ */ r(je, { children: [
+      o.getHeaderGroups().map((e) => /* @__PURE__ */ l(y, { children: e.headers.map((t) => {
+        const a = h && t.column.getCanSort(), n = t.column.getIsSorted(), f = G(t.column.id);
+        return /* @__PURE__ */ l(
+          U,
+          {
+            className: f.className,
+            style: f.style,
+            children: t.isPlaceholder ? null : a ? /* @__PURE__ */ r(
+              "button",
+              {
+                type: "button",
+                className: i(
+                  "flex items-center gap-ds-01 font-medium",
+                  "cursor-pointer select-none",
+                  "-ml-ds-01 rounded px-ds-01 py-ds-01",
+                  "hover:bg-layer-02 transition-colors"
+                ),
+                onClick: t.column.getToggleSortingHandler(),
+                "aria-label": `Sort by ${typeof t.column.columnDef.header == "string" ? t.column.columnDef.header : t.column.id}`,
+                children: [
+                  E(
+                    t.column.columnDef.header,
+                    t.getContext()
+                  ),
+                  n === "asc" ? /* @__PURE__ */ l(
+                    Ee,
+                    {
+                      className: "size-4 text-text-secondary",
+                      "aria-hidden": "true"
+                    }
+                  ) : n === "desc" ? /* @__PURE__ */ l(
+                    Me,
+                    {
+                      className: "size-4 text-text-secondary",
+                      "aria-hidden": "true"
+                    }
+                  ) : /* @__PURE__ */ l(
+                    Te,
+                    {
+                      className: "size-4 text-text-tertiary",
+                      "aria-hidden": "true"
+                    }
+                  )
+                ]
+              }
+            ) : E(
+              t.column.columnDef.header,
+              t.getContext()
+            )
+          },
+          t.id
+        );
+      }) }, e.id)),
+      c && o.getHeaderGroups().map((e) => /* @__PURE__ */ l(y, { children: e.headers.map((t) => /* @__PURE__ */ l(U, { className: "py-ds-01", children: t.isPlaceholder || t.column.columnDef.enableColumnFilter === !1 ? null : /* @__PURE__ */ l(
+        "input",
+        {
+          type: "text",
+          value: t.column.getFilterValue() ?? "",
+          onChange: (a) => t.column.setFilterValue(a.target.value),
+          placeholder: `Filter ${typeof t.column.columnDef.header == "string" ? t.column.columnDef.header : ""}...`,
+          "aria-label": `Filter ${typeof t.column.columnDef.header == "string" ? t.column.columnDef.header : t.column.id}`,
+          className: i(
+            "h-ds-xs-plus w-full rounded-ds-md",
+            "border border-border bg-field",
+            "px-ds-02 text-ds-sm",
+            "text-text-primary placeholder:text-text-placeholder",
+            "outline-none focus:border-[var(--color-border-focus)]"
+          )
+        }
+      ) }, `${t.id}-filter`)) }, `${e.id}-filters`))
+    ] }),
+    Se()
+  ] });
+  return /* @__PURE__ */ r("div", { className: i(D), children: [
+    $ && /* @__PURE__ */ l(
+      _e,
+      {
+        table: o,
+        globalFilter: u,
+        globalFilterValue: F,
+        onGlobalFilterChange: z,
+        density: A,
+        onDensityChange: me
+      }
+    ),
+    u && !$ && /* @__PURE__ */ r("div", { className: "flex items-center gap-ds-03 pb-ds-04 border-b border-border-subtle mb-ds-04", children: [
+      /* @__PURE__ */ l(
+        Ve,
+        {
+          size: 16,
+          className: "text-icon-secondary",
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ l(
+        "input",
+        {
+          type: "text",
+          value: F,
+          onChange: (e) => z(e.target.value),
+          placeholder: "Search all columns...",
+          "aria-label": "Search all columns",
+          className: i(
+            "flex-1 bg-transparent text-ds-md",
+            "text-text-primary placeholder:text-text-placeholder",
+            "outline-none"
+          )
+        }
+      )
+    ] }),
+    m ? /* @__PURE__ */ l(
+      "div",
+      {
+        ref: B,
+        style: { maxHeight: `${te}px`, overflowY: "auto" },
+        children: K
+      }
+    ) : K,
+    s && /* @__PURE__ */ r("div", { className: "flex items-center justify-between px-ds-03 py-ds-04 border-t border-border-subtle", children: [
+      /* @__PURE__ */ r("span", { className: "text-ds-sm text-text-secondary", children: [
+        o.getFilteredRowModel().rows.length,
+        " total rows"
+      ] }),
+      /* @__PURE__ */ r("div", { className: "flex items-center gap-ds-03", children: [
+        /* @__PURE__ */ l(
+          "select",
+          {
+            value: o.getState().pagination.pageSize,
+            onChange: (e) => {
+              o.setPageSize(Number(e.target.value));
+            },
+            "aria-label": "Rows per page",
+            className: i(
+              "h-ds-sm rounded-ds-md",
+              "border border-border bg-field",
+              "px-ds-03 text-ds-sm",
+              "text-text-primary"
+            ),
+            children: (W ?? [10, 20, 50, 100]).map((e) => /* @__PURE__ */ r("option", { value: e, children: [
+              e,
+              " rows"
+            ] }, e))
+          }
+        ),
+        /* @__PURE__ */ l(
+          "button",
+          {
+            type: "button",
+            disabled: !o.getCanPreviousPage(),
+            onClick: () => o.previousPage(),
+            "aria-label": "Previous page",
+            className: i(
+              "h-ds-sm w-ds-sm flex items-center justify-center",
+              "rounded-ds-md border border-border",
+              "enabled:hover:bg-layer-02",
+              "disabled:opacity-[0.38] disabled:cursor-not-allowed",
+              "transition-colors"
+            ),
+            children: /* @__PURE__ */ l($e, { size: 16, "aria-hidden": "true" })
+          }
+        ),
+        /* @__PURE__ */ r("span", { className: "text-ds-sm text-text-secondary", children: [
+          "Page ",
+          o.getState().pagination.pageIndex + 1,
+          " of",
+          " ",
+          o.getPageCount()
+        ] }),
+        /* @__PURE__ */ l(
+          "button",
+          {
+            type: "button",
+            disabled: !o.getCanNextPage(),
+            onClick: () => o.nextPage(),
+            "aria-label": "Next page",
+            className: i(
+              "h-ds-sm w-ds-sm flex items-center justify-center",
+              "rounded-ds-md border border-border",
+              "enabled:hover:bg-layer-02",
+              "disabled:opacity-[0.38] disabled:cursor-not-allowed",
+              "transition-colors"
+            ),
+            children: /* @__PURE__ */ l(L, { size: 16, "aria-hidden": "true" })
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+Ge.displayName = "DataTable";
+export {
+  Ge as DataTable
+};

package/dist/ui/dialog.d.ts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@primitives/react-dialog';
+/**
+ * Dialog compound component — accessible modal overlay with focus trap and Escape dismissal.
+ *
+ * **Parts (in composition order):**
+ * - `Dialog` — manages open/closed state (this root)
+ * - `DialogTrigger` — element that opens the dialog (use `asChild` to render your own button)
+ * - `DialogContent` — the modal panel (auto-includes portal, overlay, and close button)
+ * - `DialogHeader` — optional layout wrapper for title + description
+ * - `DialogTitle` — required for accessibility (sets the dialog's ARIA label)
+ * - `DialogDescription` — optional subtitle text
+ * - `DialogFooter` — optional layout wrapper for action buttons
+ * - `DialogClose` — manual close trigger (a close button is already built into DialogContent)
+ * - `DialogContentRaw` — use instead of DialogContent when you need full portal/overlay control
+ * - `DialogPortal` — low-level portal wrapper (exported for custom layout; used internally by DialogContent)
+ * - `DialogOverlay` — the backdrop element (exported for custom overlay styling or positioning)
+ *
+ * @compound
+ * @example
+ * // Confirmation dialog:
+ * <Dialog>
+ *   <DialogTrigger asChild>
+ *     <Button variant="error">Delete project</Button>
+ *   </DialogTrigger>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *       <DialogTitle>Are you absolutely sure?</DialogTitle>
+ *       <DialogDescription>
+ *         This action cannot be undone. This will permanently delete your project.
+ *       </DialogDescription>
+ *     </DialogHeader>
+ *     <DialogFooter>
+ *       <DialogClose asChild><Button variant="secondary">Cancel</Button></DialogClose>
+ *       <Button variant="error" onClick={handleDelete}>Delete</Button>
+ *     </DialogFooter>
+ *   </DialogContent>
+ * </Dialog>
+ *
+ * @example
+ * // Controlled open state (no trigger in markup):
+ * const [open, setOpen] = useState(false)
+ * <Dialog open={open} onOpenChange={setOpen}>
+ *   <DialogContent>
+ *     <DialogTitle>Edit profile</DialogTitle>
+ *     // form fields
+ *   </DialogContent>
+ * </Dialog>
+ */
+declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * DialogContentRaw -- a minimal forwardRef wrapper around the primitive Content.
+ * Unlike DialogContent, it does NOT include Portal, Overlay, or CloseButton.
+ * Use this when you need full control over portal/overlay/close behaviour
+ * (e.g. CommandPalette in shared/).
+ */
+declare const DialogContentRaw: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogContentRaw, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };
+//# sourceMappingURL=dialog.d.ts.map

package/dist/ui/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/ui/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAK3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,QAAA,MAAM,MAAM,uCAAuB,CAAA;AAEnC,QAAA,MAAM,aAAa,8GAA0B,CAAA;AAE7C,QAAA,MAAM,YAAY,6CAAyB,CAAA;AAE3C,QAAA,MAAM,WAAW,4GAAwB,CAAA;AAEzC,QAAA,MAAM,aAAa,8JAYjB,CAAA;AAGF,QAAA,MAAM,aAAa,8JAqBjB,CAAA;AAGF;;;;;GAKG;AACH,QAAA,MAAM,gBAAgB,8JASpB,CAAA;AAGF,QAAA,MAAM,YAAY;8BAGf,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAA;AAGD,QAAA,MAAM,YAAY;8BAGf,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAA;AAGD,QAAA,MAAM,WAAW,oKAYf,CAAA;AAGF,QAAA,MAAM,iBAAiB,8KASrB,CAAA;AAGF,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAA"}

package/dist/ui/dialog.js

@@ -0,0 +1,110 @@
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import * as l from "react";
+import { Root as g, Close as r, Portal as y, Trigger as x, Content as i, Description as n, Overlay as c, Title as m } from "../primitives/react-dialog.js";
+import { IconX as N } from "@tabler/icons-react";
+import { cn as s } from "./lib/utils.js";
+const F = g, H = x, u = y, O = r, f = l.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ o(
+  c,
+  {
+    ref: t,
+    className: s(
+      "fixed inset-0 z-overlay bg-overlay duration-moderate-02 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      e
+    ),
+    ...a
+  }
+));
+f.displayName = c.displayName;
+const D = l.forwardRef(({ className: e, children: a, ...t }, p) => /* @__PURE__ */ d(u, { children: [
+  /* @__PURE__ */ o(f, {}),
+  /* @__PURE__ */ d(
+    i,
+    {
+      ref: p,
+      className: s(
+        "fixed left-[50%] top-[50%] z-modal grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-ds-05 border border-border bg-layer-01 p-ds-06 shadow-04 rounded-ds-xl duration-moderate-02 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+        e
+      ),
+      ...t,
+      children: [
+        a,
+        /* @__PURE__ */ d(r, { className: "absolute right-ds-05 top-ds-05 rounded-ds-sm text-icon-secondary transition-colors hover:text-icon-primary hover:bg-field focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus disabled:pointer-events-none", children: [
+          /* @__PURE__ */ o(N, { className: "h-ico-lg w-ico-lg" }),
+          /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+D.displayName = i.displayName;
+const b = l.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ o(
+  i,
+  {
+    ref: t,
+    className: s(e),
+    ...a
+  }
+));
+b.displayName = "DialogContentRaw";
+const v = ({
+  className: e,
+  ...a
+}) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: s(
+      "flex flex-col space-y-ds-02b text-center sm:text-left",
+      e
+    ),
+    ...a
+  }
+);
+v.displayName = "DialogHeader";
+const w = ({
+  className: e,
+  ...a
+}) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: s(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-ds-03",
+      e
+    ),
+    ...a
+  }
+);
+w.displayName = "DialogFooter";
+const h = l.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ o(
+  m,
+  {
+    ref: t,
+    className: s(
+      "text-ds-lg font-semibold",
+      e
+    ),
+    ...a
+  }
+));
+h.displayName = m.displayName;
+const R = l.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ o(
+  n,
+  {
+    ref: t,
+    className: s("text-ds-md text-text-secondary", e),
+    ...a
+  }
+));
+R.displayName = n.displayName;
+export {
+  F as Dialog,
+  O as DialogClose,
+  D as DialogContent,
+  b as DialogContentRaw,
+  R as DialogDescription,
+  w as DialogFooter,
+  v as DialogHeader,
+  f as DialogOverlay,
+  u as DialogPortal,
+  h as DialogTitle,
+  H as DialogTrigger
+};