@devalok/shilp-sutra 0.1.0

package/dist/tokens/typography.css

@@ -0,0 +1,393 @@
+/* ⚠️ DEPRECATED: These px-based classes are kept for backward compatibility.
+   Use <Text variant="..."> component or text-ds-* Tailwind classes instead.
+   See src/tokens/typography-semantic.css for the canonical type scale. */
+
+/* ═══════════════════════════════════════════════════════════════════
+   TYPOGRAPHY — Font faces, type scale utilities, and prose styles
+   ═══════════════════════════════════════════════════════════════════ */
+
+/* ── Font Faces ─────────────────────────────────────────────────── */
+
+/* Google Sans (primary UI font) — Variable font: supports weights 100-900 */
+@font-face {
+  font-family: 'Google Sans';
+  src: url('../../fonts/GoogleSans-Variable.ttf') format('truetype');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Google Sans';
+  src: url('../../fonts/GoogleSans-Italic-Variable.ttf') format('truetype');
+  font-weight: 100 900;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* Ranade (accent — brand moments, hero headings, special callouts) */
+@font-face {
+  font-family: 'Ranade';
+  src: url('../../fonts/Ranade-Variable.ttf') format('truetype');
+  font-weight: 100 900;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Ranade';
+  src: url('../../fonts/Ranade-VariableItalic.ttf') format('truetype');
+  font-weight: 100 900;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* ── Title Scale (T1–T7) ───────────────────────────────────────── */
+
+.T1-Reg {
+  font-family: inherit;
+  font-size: 60px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 115%;
+  letter-spacing: -1.2px;
+}
+
+.T2-Reg {
+  font-family: inherit;
+  font-size: 48px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 115%;
+  letter-spacing: -0.96px;
+}
+
+.T3-Reg {
+  font-family: inherit;
+  font-size: 36px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 115%;
+  letter-spacing: -0.72px;
+}
+
+.T4-Reg {
+  font-family: inherit;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 115%;
+  letter-spacing: -0.64px;
+}
+
+.T5-Reg {
+  font-family: inherit;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 125%;
+  letter-spacing: -0.48px;
+}
+
+.T6-Reg {
+  font-family: inherit;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 125%;
+}
+
+.T7-Reg {
+  font-family: inherit;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 125%;
+  letter-spacing: -0.48px;
+}
+
+/* ── Body Scale (B1–B8) ────────────────────────────────────────── */
+
+.B1-Reg {
+  font-family: inherit;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+  letter-spacing: -0.32px;
+}
+
+.B2-Reg {
+  font-family: inherit;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+  letter-spacing: -0.32px;
+}
+
+.B3-Reg {
+  font-family: inherit;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+  letter-spacing: -0.32px;
+}
+
+.B4-Reg {
+  font-family: inherit;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+  letter-spacing: -0.32px;
+}
+
+.B5-Reg {
+  font-family: inherit;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 140%;
+  letter-spacing: 0.32px;
+}
+
+.B6-Reg {
+  font-family: inherit;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 140%;
+}
+
+.B7-Reg {
+  font-family: inherit;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+}
+
+.B8-Reg {
+  font-family: inherit;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+  letter-spacing: -0.28px;
+}
+
+.B2-Semibold {
+  font-family: inherit;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 150%;
+  letter-spacing: -0.32px;
+}
+
+/* ── Label Scale (L1–L6) ───────────────────────────────────────── */
+
+.L1 {
+  font-family: inherit;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 130%;
+  letter-spacing: 0.96px;
+  text-transform: uppercase;
+}
+
+.L2 {
+  font-family: inherit;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 130%;
+  letter-spacing: 0.96px;
+  text-transform: uppercase;
+}
+
+.L3 {
+  font-family: inherit;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 130%;
+  letter-spacing: 0.72px;
+  text-transform: uppercase;
+}
+
+.L4 {
+  font-family: inherit;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 130%;
+  letter-spacing: 0.6px;
+  text-transform: uppercase;
+}
+
+.L6 {
+  font-family: inherit;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 130%;
+  letter-spacing: 0.84px;
+  text-transform: uppercase;
+}
+
+/* ── Paragraph Scale (P1–P7) ───────────────────────────────────── */
+/* NOTE: P2 (0.36px tracking) and B5-Reg (0.32px tracking) are near-identical
+   at 16px/140%. P2 is for paragraph blocks, B5-Reg for inline body text. */
+
+.P1 {
+  font-family: inherit;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 140%;
+  letter-spacing: 0.36px;
+}
+
+.P2 {
+  font-family: inherit;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 140%;
+  letter-spacing: 0.36px;
+}
+
+.P3 {
+  font-family: inherit;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 140%;
+  letter-spacing: 0.36px;
+}
+
+.P4 {
+  font-family: inherit;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 140%;
+  letter-spacing: 0.36px;
+}
+
+.P5 {
+  font-family: inherit;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 140%;
+  letter-spacing: 0.16px;
+}
+
+.P6 {
+  font-family: inherit;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 140%;
+}
+
+.P7 {
+  font-family: inherit;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 140%;
+  letter-spacing: 0.14px;
+}
+
+/* ── Weight Modifier ────────────────────────────────────────────── */
+
+.semibold {
+  font-weight: 600;
+}
+
+/* ── Responsive Overrides ───────────────────────────────────────── */
+
+@media (max-width: 767px) {
+  .T5-Reg {
+    font-size: 16px;
+  }
+}
+
+/* ── Prose Styles (Devsabha AI Insights) ────────────────────────── */
+
+.prose-devsabha {
+  font-family: 'Ranade', sans-serif;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--color-text-secondary);
+}
+
+.prose-devsabha h1,
+.prose-devsabha h2,
+.prose-devsabha h3,
+.prose-devsabha h4 {
+  font-family: 'Ranade', sans-serif;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+}
+
+.prose-devsabha h1 { font-size: 18px; }
+.prose-devsabha h2 { font-size: 16px; }
+.prose-devsabha h3 { font-size: 14px; }
+.prose-devsabha h4 { font-size: 14px; }
+
+.prose-devsabha p {
+  margin-bottom: 0.5em;
+}
+
+.prose-devsabha ul {
+  list-style-type: disc;
+  padding-left: 1.5em;
+  margin-bottom: 0.5em;
+}
+
+.prose-devsabha ol {
+  list-style-type: decimal;
+  padding-left: 1.5em;
+  margin-bottom: 0.5em;
+}
+
+.prose-devsabha li {
+  margin-bottom: 0.25em;
+}
+
+.prose-devsabha strong {
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.prose-devsabha em {
+  font-style: italic;
+}
+
+.prose-devsabha code {
+  font-size: 12px;
+  background: var(--color-layer-03);
+  border-radius: 4px;
+  padding: 0.15em 0.4em;
+}
+
+.prose-devsabha blockquote {
+  border-left: 3px solid var(--color-border-strong);
+  padding-left: 1em;
+  margin: 0.5em 0;
+  color: var(--color-text-tertiary);
+}
+
+.prose-devsabha *:first-child {
+  margin-top: 0;
+}
+
+.prose-devsabha *:last-child {
+  margin-bottom: 0;
+}

package/dist/ui/accordion.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import * as AccordionPrimitive from '@primitives/react-accordion';
+/**
+ * Accordion compound component — vertically stacked, collapsible content sections.
+ *
+ * **Parts (in composition order):**
+ * - `Accordion` — root; controls single vs. multiple open panels (this root)
+ * - `AccordionItem` — individual collapsible section (requires `value` prop)
+ * - `AccordionTrigger` — the clickable header row (chevron icon auto-renders and rotates)
+ * - `AccordionContent` — the collapsible body revealed when the item is open
+ *
+ * **`type` prop (required on root):**
+ * - `"single"` — only one panel open at a time; supports `collapsible` prop to re-close the active item
+ * - `"multiple"` — multiple panels open simultaneously (value is `string[]`); `collapsible` is NOT valid here
+ *
+ * @compound
+ * @example
+ * // Single-open FAQ accordion:
+ * <Accordion type="single" defaultValue="item-1" collapsible>
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger>What is Shilp Sutra?</AccordionTrigger>
+ *     <AccordionContent>
+ *       A React design system built for Next.js App Router, with full accessibility baked in.
+ *     </AccordionContent>
+ *   </AccordionItem>
+ *   <AccordionItem value="item-2">
+ *     <AccordionTrigger>Is dark mode supported?</AccordionTrigger>
+ *     <AccordionContent>
+ *       Yes — add the <code>.dark</code> class to the root element to activate it.
+ *     </AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ *
+ * @example
+ * // Multiple-open controlled accordion:
+ * const [open, setOpen] = useState<string[]>(['billing'])
+ * <Accordion type="multiple" value={open} onValueChange={setOpen}>
+ *   <AccordionItem value="billing">
+ *     <AccordionTrigger>Billing</AccordionTrigger>
+ *     <AccordionContent>Your billing details here.</AccordionContent>
+ *   </AccordionItem>
+ *   <AccordionItem value="security">
+ *     <AccordionTrigger>Security</AccordionTrigger>
+ *     <AccordionContent>Security settings here.</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ */
+declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+//# sourceMappingURL=accordion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/ui/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,6BAA6B,CAAA;AAKjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,QAAA,MAAM,SAAS,8JAA0B,CAAA;AAEzC,QAAA,MAAM,aAAa,iKASjB,CAAA;AAGF,QAAA,MAAM,gBAAgB,0KAiBpB,CAAA;AAGF,QAAA,MAAM,gBAAgB,oKAWpB,CAAA;AAGF,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/ui/accordion.js

@@ -0,0 +1,46 @@
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import * as s from "react";
+import { Root as m, Content as n, Item as l, Header as f, Trigger as d } from "../primitives/react-accordion.js";
+import { IconChevronDown as p } from "@tabler/icons-react";
+import { cn as i } from "./lib/utils.js";
+const h = m, u = s.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ r(
+  l,
+  {
+    ref: t,
+    className: i("border-b border-border-subtle", e),
+    ...o
+  }
+));
+u.displayName = "AccordionItem";
+const x = s.forwardRef(({ className: e, children: o, ...t }, a) => /* @__PURE__ */ r(f, { className: "flex", children: /* @__PURE__ */ c(
+  d,
+  {
+    ref: a,
+    className: i(
+      "flex flex-1 items-center justify-between py-ds-05 text-left text-ds-md font-medium transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus [&[data-state=open]>svg]:rotate-180",
+      e
+    ),
+    ...t,
+    children: [
+      o,
+      /* @__PURE__ */ r(p, { className: "h-ico-sm w-ico-sm shrink-0 text-text-secondary transition-transform duration-moderate-02" })
+    ]
+  }
+) }));
+x.displayName = d.displayName;
+const N = s.forwardRef(({ className: e, children: o, ...t }, a) => /* @__PURE__ */ r(
+  n,
+  {
+    ref: a,
+    className: "transition-all duration-moderate-02 ease-productive-standard data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down w-full overflow-hidden text-ds-md",
+    ...t,
+    children: /* @__PURE__ */ r("div", { className: i("pb-ds-05 pt-0", e), children: o })
+  }
+));
+N.displayName = n.displayName;
+export {
+  h as Accordion,
+  N as AccordionContent,
+  u as AccordionItem,
+  x as AccordionTrigger
+};

package/dist/ui/alert-dialog.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@primitives/react-alert-dialog';
+declare const AlertDialog: React.FC<AlertDialogPrimitive.AlertDialogProps>;
+declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogPortal: React.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
+declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const AlertDialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };
+//# sourceMappingURL=alert-dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../src/ui/alert-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,gCAAgC,CAAA;AAItE,QAAA,MAAM,WAAW,iDAA4B,CAAA;AAE7C,QAAA,MAAM,kBAAkB,wHAA+B,CAAA;AAEvD,QAAA,MAAM,iBAAiB,uDAA8B,CAAA;AAErD,QAAA,MAAM,kBAAkB,wKAYtB,CAAA;AAGF,QAAA,MAAM,kBAAkB,wKAetB,CAAA;AAGF,QAAA,MAAM,iBAAiB;8BAGpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAA;AAGD,QAAA,MAAM,iBAAiB;8BAGpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAA;AAGD,QAAA,MAAM,gBAAgB,8KAYpB,CAAA;AAGF,QAAA,MAAM,sBAAsB,wLAS1B,CAAA;AAIF,QAAA,MAAM,iBAAiB,6KAYrB,CAAA;AAGF,QAAA,MAAM,iBAAiB,6KAYrB,CAAA;AAGF,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,GAClB,CAAA"}

package/dist/ui/alert-dialog.js

@@ -0,0 +1,117 @@
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
+import * as i from "react";
+import { Root as g, Portal as x, Trigger as y, Action as l, Cancel as r, Content as d, Description as n, Overlay as c, Title as m } from "../primitives/react-alert-dialog.js";
+import { cn as s } from "./lib/utils.js";
+const C = g, z = y, b = x, f = i.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
+  c,
+  {
+    ref: a,
+    className: s(
+      "fixed inset-0 z-modal bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      e
+    ),
+    ...t
+  }
+));
+f.displayName = c.displayName;
+const u = i.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ p(b, { children: [
+  /* @__PURE__ */ o(f, {}),
+  /* @__PURE__ */ o(
+    d,
+    {
+      ref: a,
+      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
+    }
+  )
+] }));
+u.displayName = d.displayName;
+const v = ({
+  className: e,
+  ...t
+}) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: s(
+      "flex flex-col space-y-ds-02b text-center sm:text-left",
+      e
+    ),
+    ...t
+  }
+);
+v.displayName = "AlertDialogHeader";
+const N = ({
+  className: e,
+  ...t
+}) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: s(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-ds-03",
+      e
+    ),
+    ...t
+  }
+);
+N.displayName = "AlertDialogFooter";
+const D = i.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
+  m,
+  {
+    ref: a,
+    className: s(
+      "text-ds-lg font-semibold",
+      e
+    ),
+    ...t
+  }
+));
+D.displayName = m.displayName;
+const A = i.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
+  n,
+  {
+    ref: a,
+    className: s("text-ds-md text-text-secondary", e),
+    ...t
+  }
+));
+A.displayName = n.displayName;
+const w = i.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
+  l,
+  {
+    ref: a,
+    className: s(
+      "inline-flex h-ds-md items-center justify-center rounded-ds-md px-ds-05 text-ds-md font-semibold transition-colors bg-interactive text-text-on-color hover:bg-interactive-hover active:bg-interactive-active shadow-01 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-[0.38]",
+      e
+    ),
+    ...t
+  }
+));
+w.displayName = l.displayName;
+const h = i.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
+  r,
+  {
+    ref: a,
+    className: s(
+      "inline-flex h-ds-md items-center justify-center rounded-ds-md px-ds-05 text-ds-md font-semibold transition-colors bg-transparent text-text-secondary border border-border hover:bg-layer-02 hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-[0.38]",
+      e
+    ),
+    ...t
+  }
+));
+h.displayName = r.displayName;
+export {
+  C as AlertDialog,
+  w as AlertDialogAction,
+  h as AlertDialogCancel,
+  u as AlertDialogContent,
+  A as AlertDialogDescription,
+  N as AlertDialogFooter,
+  v as AlertDialogHeader,
+  f as AlertDialogOverlay,
+  b as AlertDialogPortal,
+  D as AlertDialogTitle,
+  z as AlertDialogTrigger
+};

package/dist/ui/alert.d.ts

@@ -0,0 +1,47 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const alertVariants: (props?: ({
+    variant?: "error" | "warning" | "success" | "info" | "neutral" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Props for Alert — an inline message block with a colored icon, optional title, optional body,
+ * and an optional dismiss button. Renders with `role="alert"` for screen reader announcements.
+ *
+ * **Variants:** `info` (default, blue tones) | `success` | `warning` | `error` | `neutral`
+ * The matching icon (info circle, checkmark, triangle, alert circle) is auto-selected by variant.
+ *
+ * **Alert vs Banner:** Alert is inline (inside page content). Banner is a full-width notification
+ * strip rendered at the top of a page/section (see `<Banner>`).
+ *
+ * **Dismissible:** Provide `onDismiss` to show an × button. Absence of the prop = non-dismissible.
+ *
+ * @example
+ * // Informational tip inside a settings form:
+ * <Alert title="Tip" variant="info">
+ *   Changes take effect after you save and reload the page.
+ * </Alert>
+ *
+ * @example
+ * // Error feedback after a failed API call (dismissible):
+ * <Alert variant="error" title="Save failed" onDismiss={() => setError(null)}>
+ *   Your changes could not be saved. Please try again.
+ * </Alert>
+ *
+ * @example
+ * // Success confirmation after publishing:
+ * <Alert variant="success" title="Published!">
+ *   Your post is now live and visible to all subscribers.
+ * </Alert>
+ *
+ * @example
+ * // Neutral inline note (no colored intent):
+ * <Alert variant="neutral">This field is auto-populated from your profile.</Alert>
+ * // These are just a few ways — feel free to combine props creatively!
+ */
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
+    title?: string;
+    onDismiss?: () => void;
+}
+declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+export { Alert, alertVariants };
+//# sourceMappingURL=alert.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../src/ui/alert.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,aAAa;;8EAmBlB,CAAA;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,KAAK,mFAwBV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}