@azmr/ui 0.3.0 → 0.4.1

package/README.md

@@ -1,6 +1,6 @@
 # @azmr/ui
 
-React components wired to reactive Signals. The `Grid` component re-renders automatically when its Signal changes — no state management needed.
+Accessible React design system built on Base UI and Tailwind v4 tokens: buttons, menus, modals, tables, toasts and more. Components that take a Signal, such as `Grid`, re-render when it changes, with no state management needed.
 
 ## Install
 
@@ -237,7 +237,7 @@ All cell values are rendered through React's JSX escaping — `dangerouslySetInn
 
 ## Documentation
 
-Full docs at [docs.azmara.io](https://docs.azmara.io)
+Full docs at [platform.azmara.io](https://platform.azmara.io/docs/packages/ui)
 
 ## License
 

package/dist/breadcrumb.js

@@ -1,6 +1,10 @@
 import {
   renderElement
 } from "./chunk-LTOLV67A.js";
+import {
+  ChevronRight,
+  Ellipsis
+} from "./chunk-KN3OU7HF.js";
 import {
   Icon
 } from "./chunk-Q4PPM2SU.js";
@@ -9,7 +13,6 @@ import {
 } from "./chunk-7EOSDFS3.js";
 
 // src/components/breadcrumb/breadcrumb.tsx
-import { ChevronRight, Ellipsis } from "lucide-react";
 import {
   Fragment,
   forwardRef

package/dist/{chunk-EFHRRLAW.js → chunk-D6B4MBMA.js}

@@ -3,6 +3,11 @@ import {
   FLOATING_MOTION,
   POSITION_DEFAULTS
 } from "./chunk-LZMX27IZ.js";
+import {
+  Check,
+  ChevronRight,
+  Circle
+} from "./chunk-ORAD4PGE.js";
 import {
   Icon
 } from "./chunk-XRZHP6BD.js";
@@ -17,7 +22,6 @@ import { forwardRef as forwardRef2 } from "react";
 import { ContextMenu } from "@base-ui/react/context-menu";
 
 // src/components/menu/parts.tsx
-import { Check, ChevronRight, Circle } from "lucide-react";
 import { forwardRef } from "react";
 
 // src/primitives/menu.ts

package/dist/chunk-KN3OU7HF.js

@@ -0,0 +1,258 @@
+// src/icons/glyphs.ts
+import {
+  ArrowDown as ArrowDownNode,
+  ArrowLeft as ArrowLeftNode,
+  ArrowRight as ArrowRightNode,
+  ArrowUpDown as ArrowUpDownNode,
+  ArrowUp as ArrowUpNode,
+  Bell as BellNode,
+  Calendar as CalendarNode,
+  Check as CheckNode,
+  ChevronDown as ChevronDownNode,
+  ChevronLeft as ChevronLeftNode,
+  ChevronRight as ChevronRightNode,
+  ChevronsLeft as ChevronsLeftNode,
+  ChevronsRight as ChevronsRightNode,
+  ChevronsUpDown as ChevronsUpDownNode,
+  ChevronUp as ChevronUpNode,
+  CircleAlert as CircleAlertNode,
+  CircleCheck as CircleCheckNode,
+  CircleDot as CircleDotNode,
+  Circle as CircleNode,
+  CircleX as CircleXNode,
+  Clock as ClockNode,
+  Copy as CopyNode,
+  Download as DownloadNode,
+  Ellipsis as EllipsisNode,
+  EllipsisVertical as EllipsisVerticalNode,
+  ExternalLink as ExternalLinkNode,
+  Eye as EyeNode,
+  EyeOff as EyeOffNode,
+  Funnel as FunnelNode,
+  GripVertical as GripVerticalNode,
+  House as HouseNode,
+  Info as InfoNode,
+  LoaderCircle as LoaderCircleNode,
+  Lock as LockNode,
+  LogOut as LogOutNode,
+  Mail as MailNode,
+  Menu as MenuNode,
+  Minus as MinusNode,
+  Monitor as MonitorNode,
+  Moon as MoonNode,
+  PanelLeft as PanelLeftNode,
+  Paperclip as PaperclipNode,
+  Pencil as PencilNode,
+  Plus as PlusNode,
+  RefreshCw as RefreshCwNode,
+  Save as SaveNode,
+  Search as SearchNode,
+  Settings as SettingsNode,
+  SquareCheck as SquareCheckNode,
+  SquareMinus as SquareMinusNode,
+  Square as SquareNode,
+  Star as StarNode,
+  Sun as SunNode,
+  Trash2 as Trash2Node,
+  TriangleAlert as TriangleAlertNode,
+  Upload as UploadNode,
+  User as UserNode,
+  Users as UsersNode,
+  X as XNode
+} from "lucide";
+
+// src/icons/glyph.tsx
+import {
+  createElement,
+  forwardRef
+} from "react";
+var VIEWBOX_SIZE = 24;
+var reactAttribute = (name) => name.startsWith("aria-") || name.startsWith("data-") ? name : name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+var hasAccessibleProp = (props) => Object.keys(props).some((key) => key.startsWith("aria-") || key === "role" || key === "title");
+var pascal = (kebab) => kebab.replace(/(^|-)([a-z0-9])/g, (_, __, letter) => letter.toUpperCase());
+function createGlyph(name, node, aliases = []) {
+  const shapes = node.map(([tag, attributes], index) => {
+    const props = {};
+    for (const [key, value] of Object.entries(attributes)) {
+      if (value !== void 0) props[reactAttribute(key)] = value;
+    }
+    return createElement(tag, { key: index, ...props });
+  });
+  const glyph = forwardRef(function Glyph({
+    size = VIEWBOX_SIZE,
+    color = "currentColor",
+    strokeWidth = 2,
+    absoluteStrokeWidth = false,
+    className,
+    children,
+    ...rest
+  }, ref) {
+    const classes = [
+      "lucide",
+      `lucide-${name}`,
+      ...aliases.map((alias) => `lucide-${alias}`),
+      ...className?.split(" ") ?? []
+    ].filter((value, index, all) => value !== "" && all.indexOf(value) === index);
+    return createElement(
+      "svg",
+      {
+        ref,
+        xmlns: "http://www.w3.org/2000/svg",
+        width: size,
+        height: size,
+        viewBox: `0 0 ${VIEWBOX_SIZE} ${VIEWBOX_SIZE}`,
+        fill: "none",
+        stroke: color,
+        strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * VIEWBOX_SIZE / Number(size) : strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: classes.join(" "),
+        ...children || hasAccessibleProp(rest) ? {} : { "aria-hidden": "true" },
+        ...rest
+      },
+      ...shapes,
+      children
+    );
+  });
+  glyph.displayName = pascal(name);
+  return glyph;
+}
+
+// src/icons/glyphs.ts
+var ArrowDown = /* @__PURE__ */ createGlyph("arrow-down", ArrowDownNode);
+var ArrowLeft = /* @__PURE__ */ createGlyph("arrow-left", ArrowLeftNode);
+var ArrowRight = /* @__PURE__ */ createGlyph("arrow-right", ArrowRightNode);
+var ArrowUp = /* @__PURE__ */ createGlyph("arrow-up", ArrowUpNode);
+var ArrowUpDown = /* @__PURE__ */ createGlyph("arrow-up-down", ArrowUpDownNode);
+var Bell = /* @__PURE__ */ createGlyph("bell", BellNode);
+var Calendar = /* @__PURE__ */ createGlyph("calendar", CalendarNode);
+var Check = /* @__PURE__ */ createGlyph("check", CheckNode);
+var ChevronDown = /* @__PURE__ */ createGlyph("chevron-down", ChevronDownNode);
+var ChevronLeft = /* @__PURE__ */ createGlyph("chevron-left", ChevronLeftNode);
+var ChevronRight = /* @__PURE__ */ createGlyph("chevron-right", ChevronRightNode);
+var ChevronsLeft = /* @__PURE__ */ createGlyph("chevrons-left", ChevronsLeftNode);
+var ChevronsRight = /* @__PURE__ */ createGlyph("chevrons-right", ChevronsRightNode);
+var ChevronsUpDown = /* @__PURE__ */ createGlyph("chevrons-up-down", ChevronsUpDownNode);
+var ChevronUp = /* @__PURE__ */ createGlyph("chevron-up", ChevronUpNode);
+var Circle = /* @__PURE__ */ createGlyph("circle", CircleNode);
+var CircleAlert = /* @__PURE__ */ createGlyph("circle-alert", CircleAlertNode, [
+  "alert-circle"
+]);
+var CircleCheck = /* @__PURE__ */ createGlyph("circle-check", CircleCheckNode, [
+  "check-circle-2"
+]);
+var CircleDot = /* @__PURE__ */ createGlyph("circle-dot", CircleDotNode);
+var CircleX = /* @__PURE__ */ createGlyph("circle-x", CircleXNode, ["x-circle"]);
+var Clock = /* @__PURE__ */ createGlyph("clock", ClockNode);
+var Copy = /* @__PURE__ */ createGlyph("copy", CopyNode);
+var Download = /* @__PURE__ */ createGlyph("download", DownloadNode);
+var Ellipsis = /* @__PURE__ */ createGlyph("ellipsis", EllipsisNode, ["more-horizontal"]);
+var EllipsisVertical = /* @__PURE__ */ createGlyph(
+  "ellipsis-vertical",
+  EllipsisVerticalNode,
+  ["more-vertical"]
+);
+var ExternalLink = /* @__PURE__ */ createGlyph("external-link", ExternalLinkNode);
+var Eye = /* @__PURE__ */ createGlyph("eye", EyeNode);
+var EyeOff = /* @__PURE__ */ createGlyph("eye-off", EyeOffNode);
+var Funnel = /* @__PURE__ */ createGlyph("funnel", FunnelNode, ["filter"]);
+var GripVertical = /* @__PURE__ */ createGlyph("grip-vertical", GripVerticalNode);
+var House = /* @__PURE__ */ createGlyph("house", HouseNode, ["home"]);
+var Info = /* @__PURE__ */ createGlyph("info", InfoNode);
+var LoaderCircle = /* @__PURE__ */ createGlyph("loader-circle", LoaderCircleNode, [
+  "loader-2"
+]);
+var Lock = /* @__PURE__ */ createGlyph("lock", LockNode);
+var LogOut = /* @__PURE__ */ createGlyph("log-out", LogOutNode);
+var Mail = /* @__PURE__ */ createGlyph("mail", MailNode);
+var Menu = /* @__PURE__ */ createGlyph("menu", MenuNode);
+var Minus = /* @__PURE__ */ createGlyph("minus", MinusNode);
+var Monitor = /* @__PURE__ */ createGlyph("monitor", MonitorNode);
+var Moon = /* @__PURE__ */ createGlyph("moon", MoonNode);
+var PanelLeft = /* @__PURE__ */ createGlyph("panel-left", PanelLeftNode, ["sidebar"]);
+var Paperclip = /* @__PURE__ */ createGlyph("paperclip", PaperclipNode);
+var Pencil = /* @__PURE__ */ createGlyph("pencil", PencilNode);
+var Plus = /* @__PURE__ */ createGlyph("plus", PlusNode);
+var RefreshCw = /* @__PURE__ */ createGlyph("refresh-cw", RefreshCwNode);
+var Save = /* @__PURE__ */ createGlyph("save", SaveNode);
+var Search = /* @__PURE__ */ createGlyph("search", SearchNode);
+var Settings = /* @__PURE__ */ createGlyph("settings", SettingsNode);
+var Square = /* @__PURE__ */ createGlyph("square", SquareNode);
+var SquareCheck = /* @__PURE__ */ createGlyph("square-check", SquareCheckNode, [
+  "check-square-2"
+]);
+var SquareMinus = /* @__PURE__ */ createGlyph("square-minus", SquareMinusNode, [
+  "minus-square"
+]);
+var Star = /* @__PURE__ */ createGlyph("star", StarNode);
+var Sun = /* @__PURE__ */ createGlyph("sun", SunNode);
+var Trash2 = /* @__PURE__ */ createGlyph("trash", Trash2Node, ["trash-2"]);
+var TriangleAlert = /* @__PURE__ */ createGlyph("triangle-alert", TriangleAlertNode, [
+  "alert-triangle"
+]);
+var Upload = /* @__PURE__ */ createGlyph("upload", UploadNode);
+var User = /* @__PURE__ */ createGlyph("user", UserNode);
+var Users = /* @__PURE__ */ createGlyph("users", UsersNode);
+var X = /* @__PURE__ */ createGlyph("x", XNode);
+
+export {
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  ArrowUp,
+  ArrowUpDown,
+  Bell,
+  Calendar,
+  Check,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  ChevronsUpDown,
+  ChevronUp,
+  Circle,
+  CircleAlert,
+  CircleCheck,
+  CircleDot,
+  CircleX,
+  Clock,
+  Copy,
+  Download,
+  Ellipsis,
+  EllipsisVertical,
+  ExternalLink,
+  Eye,
+  EyeOff,
+  Funnel,
+  GripVertical,
+  House,
+  Info,
+  LoaderCircle,
+  Lock,
+  LogOut,
+  Mail,
+  Menu,
+  Minus,
+  Monitor,
+  Moon,
+  PanelLeft,
+  Paperclip,
+  Pencil,
+  Plus,
+  RefreshCw,
+  Save,
+  Search,
+  Settings,
+  Square,
+  SquareCheck,
+  SquareMinus,
+  Star,
+  Sun,
+  Trash2,
+  TriangleAlert,
+  Upload,
+  User,
+  Users,
+  X
+};

package/dist/chunk-ORAD4PGE.js

@@ -0,0 +1,150 @@
+"use client";
+
+// src/icons/glyphs.ts
+import {
+  ArrowDown as ArrowDownNode,
+  ArrowLeft as ArrowLeftNode,
+  ArrowRight as ArrowRightNode,
+  ArrowUpDown as ArrowUpDownNode,
+  ArrowUp as ArrowUpNode,
+  Bell as BellNode,
+  Calendar as CalendarNode,
+  Check as CheckNode,
+  ChevronDown as ChevronDownNode,
+  ChevronLeft as ChevronLeftNode,
+  ChevronRight as ChevronRightNode,
+  ChevronsLeft as ChevronsLeftNode,
+  ChevronsRight as ChevronsRightNode,
+  ChevronsUpDown as ChevronsUpDownNode,
+  ChevronUp as ChevronUpNode,
+  CircleAlert as CircleAlertNode,
+  CircleCheck as CircleCheckNode,
+  CircleDot as CircleDotNode,
+  Circle as CircleNode,
+  CircleX as CircleXNode,
+  Clock as ClockNode,
+  Copy as CopyNode,
+  Download as DownloadNode,
+  Ellipsis as EllipsisNode,
+  EllipsisVertical as EllipsisVerticalNode,
+  ExternalLink as ExternalLinkNode,
+  Eye as EyeNode,
+  EyeOff as EyeOffNode,
+  Funnel as FunnelNode,
+  GripVertical as GripVerticalNode,
+  House as HouseNode,
+  Info as InfoNode,
+  LoaderCircle as LoaderCircleNode,
+  Lock as LockNode,
+  LogOut as LogOutNode,
+  Mail as MailNode,
+  Menu as MenuNode,
+  Minus as MinusNode,
+  Monitor as MonitorNode,
+  Moon as MoonNode,
+  PanelLeft as PanelLeftNode,
+  Paperclip as PaperclipNode,
+  Pencil as PencilNode,
+  Plus as PlusNode,
+  RefreshCw as RefreshCwNode,
+  Save as SaveNode,
+  Search as SearchNode,
+  Settings as SettingsNode,
+  SquareCheck as SquareCheckNode,
+  SquareMinus as SquareMinusNode,
+  Square as SquareNode,
+  Star as StarNode,
+  Sun as SunNode,
+  Trash2 as Trash2Node,
+  TriangleAlert as TriangleAlertNode,
+  Upload as UploadNode,
+  User as UserNode,
+  Users as UsersNode,
+  X as XNode
+} from "lucide";
+
+// src/icons/glyph.tsx
+import {
+  createElement,
+  forwardRef
+} from "react";
+var VIEWBOX_SIZE = 24;
+var reactAttribute = (name) => name.startsWith("aria-") || name.startsWith("data-") ? name : name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+var hasAccessibleProp = (props) => Object.keys(props).some((key) => key.startsWith("aria-") || key === "role" || key === "title");
+var pascal = (kebab) => kebab.replace(/(^|-)([a-z0-9])/g, (_, __, letter) => letter.toUpperCase());
+function createGlyph(name, node, aliases = []) {
+  const shapes = node.map(([tag, attributes], index) => {
+    const props = {};
+    for (const [key, value] of Object.entries(attributes)) {
+      if (value !== void 0) props[reactAttribute(key)] = value;
+    }
+    return createElement(tag, { key: index, ...props });
+  });
+  const glyph = forwardRef(function Glyph({
+    size = VIEWBOX_SIZE,
+    color = "currentColor",
+    strokeWidth = 2,
+    absoluteStrokeWidth = false,
+    className,
+    children,
+    ...rest
+  }, ref) {
+    const classes = [
+      "lucide",
+      `lucide-${name}`,
+      ...aliases.map((alias) => `lucide-${alias}`),
+      ...className?.split(" ") ?? []
+    ].filter((value, index, all) => value !== "" && all.indexOf(value) === index);
+    return createElement(
+      "svg",
+      {
+        ref,
+        xmlns: "http://www.w3.org/2000/svg",
+        width: size,
+        height: size,
+        viewBox: `0 0 ${VIEWBOX_SIZE} ${VIEWBOX_SIZE}`,
+        fill: "none",
+        stroke: color,
+        strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * VIEWBOX_SIZE / Number(size) : strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: classes.join(" "),
+        ...children || hasAccessibleProp(rest) ? {} : { "aria-hidden": "true" },
+        ...rest
+      },
+      ...shapes,
+      children
+    );
+  });
+  glyph.displayName = pascal(name);
+  return glyph;
+}
+
+// src/icons/glyphs.ts
+var Check = /* @__PURE__ */ createGlyph("check", CheckNode);
+var ChevronDown = /* @__PURE__ */ createGlyph("chevron-down", ChevronDownNode);
+var ChevronRight = /* @__PURE__ */ createGlyph("chevron-right", ChevronRightNode);
+var Circle = /* @__PURE__ */ createGlyph("circle", CircleNode);
+var CircleAlert = /* @__PURE__ */ createGlyph("circle-alert", CircleAlertNode, [
+  "alert-circle"
+]);
+var CircleCheck = /* @__PURE__ */ createGlyph("circle-check", CircleCheckNode, [
+  "check-circle-2"
+]);
+var Info = /* @__PURE__ */ createGlyph("info", InfoNode);
+var TriangleAlert = /* @__PURE__ */ createGlyph("triangle-alert", TriangleAlertNode, [
+  "alert-triangle"
+]);
+var X = /* @__PURE__ */ createGlyph("x", XNode);
+
+export {
+  Check,
+  ChevronDown,
+  ChevronRight,
+  Circle,
+  CircleAlert,
+  CircleCheck,
+  Info,
+  TriangleAlert,
+  X
+};

package/dist/disclosure.js

@@ -1,4 +1,7 @@
 "use client";
+import {
+  ChevronDown
+} from "./chunk-ORAD4PGE.js";
 import {
   Icon
 } from "./chunk-XRZHP6BD.js";
@@ -7,7 +10,6 @@ import {
 } from "./chunk-2TQSHVXA.js";
 
 // src/components/disclosure/accordion.tsx
-import { ChevronDown } from "lucide-react";
 import { createElement, forwardRef } from "react";
 
 // src/primitives/accordion.ts

package/dist/display.js

@@ -1,6 +1,13 @@
 import {
   motionPresets
 } from "./chunk-GLB75NT3.js";
+import {
+  CircleAlert,
+  CircleCheck,
+  Info,
+  TriangleAlert,
+  X
+} from "./chunk-KN3OU7HF.js";
 import {
   Icon
 } from "./chunk-Q4PPM2SU.js";
@@ -9,7 +16,6 @@ import {
 } from "./chunk-7EOSDFS3.js";
 
 // src/components/display/alert.tsx
-import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from "lucide-react";
 import { forwardRef } from "react";
 
 // src/components/display/status.ts
@@ -160,7 +166,6 @@ var CardFooter = forwardRef3(function CardFooter2({ className, ...props }, ref)
 });
 
 // src/components/display/chip.tsx
-import { X as X2 } from "lucide-react";
 import { forwardRef as forwardRef4 } from "react";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var Chip = forwardRef4(function Chip2({ onRemove, removeLabel, className, children, ...props }, ref) {
@@ -174,7 +179,7 @@ var Chip = forwardRef4(function Chip2({ onRemove, removeLabel, className, childr
         "aria-label": label,
         onClick: onRemove,
         className: "rounded-sm p-0.5 outline-none transition-colors duration-(--motion-duration-fast) hover:bg-foreground/10 focus-visible:ring-2 focus-visible:ring-ring",
-        children: /* @__PURE__ */ jsx4(Icon, { icon: X2, size: "xs" })
+        children: /* @__PURE__ */ jsx4(Icon, { icon: X, size: "xs" })
       }
     )
   ] });

package/dist/{types-BBudf463.d.ts → glyph-Cj0bpG8i.d.ts}

@@ -1,4 +1,4 @@
-import { SVGProps, ComponentType } from 'react';
+import { SVGProps, ComponentType, ForwardRefExoticComponent, RefAttributes } from 'react';
 
 /** The size scale. A number is a literal pixel size (width and height). */
 type IconSize = "xs" | "sm" | "md" | "lg" | "xl" | number;
@@ -36,4 +36,17 @@ interface IconProps extends Omit<SVGProps<SVGSVGElement>, "ref" | "size" | "chil
     "aria-labelledby"?: string;
 }
 
-export type { IconProps as I, IconComponent as a, IconRenderProps as b, IconSize as c };
+/** The props Lucide's React icons accept, so a glyph drops in wherever one was used. */
+interface GlyphProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
+    /** Width and height. Default 24. */
+    size?: string | number;
+    /** Stroke colour. Default `currentColor`. */
+    color?: string;
+    /** Default 2. */
+    strokeWidth?: string | number;
+    /** Keep the stroke width the same in screen pixels at any size. */
+    absoluteStrokeWidth?: boolean;
+}
+type Glyph = ForwardRefExoticComponent<GlyphProps & RefAttributes<SVGSVGElement>>;
+
+export type { Glyph as G, IconProps as I, IconComponent as a, GlyphProps as b, IconRenderProps as c, IconSize as d };

package/dist/icons/lucide.d.ts

@@ -1,6 +1,5 @@
 import * as react from 'react';
-import { I as IconProps } from '../types-BBudf463.js';
-import * as lucide_react from 'lucide-react';
+import { I as IconProps, G as Glyph } from '../glyph-Cj0bpG8i.js';
 
 /**
  * A small, curated set of Lucide icons (ISC licence): the ones components and everyday UI need.
@@ -9,69 +8,69 @@ import * as lucide_react from 'lucide-react';
  * import are bundled.
  */
 declare const lucideIcons: {
-    readonly "arrow-down": lucide_react.LucideIcon;
-    readonly "arrow-left": lucide_react.LucideIcon;
-    readonly "arrow-right": lucide_react.LucideIcon;
-    readonly "arrow-up": lucide_react.LucideIcon;
-    readonly "arrow-up-down": lucide_react.LucideIcon;
-    readonly bell: lucide_react.LucideIcon;
-    readonly calendar: lucide_react.LucideIcon;
-    readonly check: lucide_react.LucideIcon;
-    readonly "chevron-down": lucide_react.LucideIcon;
-    readonly "chevron-left": lucide_react.LucideIcon;
-    readonly "chevron-right": lucide_react.LucideIcon;
-    readonly "chevron-up": lucide_react.LucideIcon;
-    readonly "chevrons-left": lucide_react.LucideIcon;
-    readonly "chevrons-right": lucide_react.LucideIcon;
-    readonly "chevrons-up-down": lucide_react.LucideIcon;
-    readonly circle: lucide_react.LucideIcon;
-    readonly "circle-alert": lucide_react.LucideIcon;
-    readonly "circle-check": lucide_react.LucideIcon;
-    readonly "circle-dot": lucide_react.LucideIcon;
-    readonly "circle-x": lucide_react.LucideIcon;
-    readonly clock: lucide_react.LucideIcon;
-    readonly copy: lucide_react.LucideIcon;
-    readonly download: lucide_react.LucideIcon;
-    readonly ellipsis: lucide_react.LucideIcon;
-    readonly "ellipsis-vertical": lucide_react.LucideIcon;
-    readonly "external-link": lucide_react.LucideIcon;
-    readonly eye: lucide_react.LucideIcon;
-    readonly "eye-off": lucide_react.LucideIcon;
-    readonly funnel: lucide_react.LucideIcon;
-    readonly "grip-vertical": lucide_react.LucideIcon;
-    readonly house: lucide_react.LucideIcon;
-    readonly info: lucide_react.LucideIcon;
-    readonly "loader-circle": lucide_react.LucideIcon;
-    readonly lock: lucide_react.LucideIcon;
-    readonly "log-out": lucide_react.LucideIcon;
-    readonly mail: lucide_react.LucideIcon;
-    readonly menu: lucide_react.LucideIcon;
-    readonly minus: lucide_react.LucideIcon;
-    readonly monitor: lucide_react.LucideIcon;
-    readonly moon: lucide_react.LucideIcon;
-    readonly "panel-left": lucide_react.LucideIcon;
-    readonly paperclip: lucide_react.LucideIcon;
-    readonly pencil: lucide_react.LucideIcon;
-    readonly plus: lucide_react.LucideIcon;
-    readonly "refresh-cw": lucide_react.LucideIcon;
-    readonly save: lucide_react.LucideIcon;
-    readonly search: lucide_react.LucideIcon;
-    readonly settings: lucide_react.LucideIcon;
-    readonly square: lucide_react.LucideIcon;
-    readonly "square-check": lucide_react.LucideIcon;
-    readonly "square-minus": lucide_react.LucideIcon;
-    readonly star: lucide_react.LucideIcon;
-    readonly sun: lucide_react.LucideIcon;
-    readonly "trash-2": lucide_react.LucideIcon;
-    readonly "triangle-alert": lucide_react.LucideIcon;
-    readonly upload: lucide_react.LucideIcon;
-    readonly user: lucide_react.LucideIcon;
-    readonly users: lucide_react.LucideIcon;
-    readonly x: lucide_react.LucideIcon;
+    readonly "arrow-down": Glyph;
+    readonly "arrow-left": Glyph;
+    readonly "arrow-right": Glyph;
+    readonly "arrow-up": Glyph;
+    readonly "arrow-up-down": Glyph;
+    readonly bell: Glyph;
+    readonly calendar: Glyph;
+    readonly check: Glyph;
+    readonly "chevron-down": Glyph;
+    readonly "chevron-left": Glyph;
+    readonly "chevron-right": Glyph;
+    readonly "chevron-up": Glyph;
+    readonly "chevrons-left": Glyph;
+    readonly "chevrons-right": Glyph;
+    readonly "chevrons-up-down": Glyph;
+    readonly circle: Glyph;
+    readonly "circle-alert": Glyph;
+    readonly "circle-check": Glyph;
+    readonly "circle-dot": Glyph;
+    readonly "circle-x": Glyph;
+    readonly clock: Glyph;
+    readonly copy: Glyph;
+    readonly download: Glyph;
+    readonly ellipsis: Glyph;
+    readonly "ellipsis-vertical": Glyph;
+    readonly "external-link": Glyph;
+    readonly eye: Glyph;
+    readonly "eye-off": Glyph;
+    readonly funnel: Glyph;
+    readonly "grip-vertical": Glyph;
+    readonly house: Glyph;
+    readonly info: Glyph;
+    readonly "loader-circle": Glyph;
+    readonly lock: Glyph;
+    readonly "log-out": Glyph;
+    readonly mail: Glyph;
+    readonly menu: Glyph;
+    readonly minus: Glyph;
+    readonly monitor: Glyph;
+    readonly moon: Glyph;
+    readonly "panel-left": Glyph;
+    readonly paperclip: Glyph;
+    readonly pencil: Glyph;
+    readonly plus: Glyph;
+    readonly "refresh-cw": Glyph;
+    readonly save: Glyph;
+    readonly search: Glyph;
+    readonly settings: Glyph;
+    readonly square: Glyph;
+    readonly "square-check": Glyph;
+    readonly "square-minus": Glyph;
+    readonly star: Glyph;
+    readonly sun: Glyph;
+    readonly "trash-2": Glyph;
+    readonly "triangle-alert": Glyph;
+    readonly upload: Glyph;
+    readonly user: Glyph;
+    readonly users: Glyph;
+    readonly x: Glyph;
 };
 declare const Icon: react.ForwardRefExoticComponent<Omit<IconProps, "name" | "icon"> & {
-    name: "x" | "search" | "menu" | "square" | "copy" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrow-up-down" | "bell" | "calendar" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chevrons-left" | "chevrons-right" | "chevrons-up-down" | "circle" | "circle-alert" | "circle-check" | "circle-dot" | "circle-x" | "clock" | "download" | "ellipsis" | "ellipsis-vertical" | "external-link" | "eye" | "eye-off" | "funnel" | "grip-vertical" | "house" | "info" | "loader-circle" | "lock" | "log-out" | "mail" | "minus" | "monitor" | "moon" | "panel-left" | "paperclip" | "pencil" | "plus" | "refresh-cw" | "save" | "settings" | "square-check" | "square-minus" | "star" | "sun" | "trash-2" | "triangle-alert" | "upload" | "user" | "users";
+    name: "x" | "search" | "menu" | "square" | "copy" | "circle" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrow-up-down" | "bell" | "calendar" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevrons-left" | "chevrons-right" | "chevrons-up-down" | "chevron-up" | "circle-alert" | "circle-check" | "circle-dot" | "circle-x" | "clock" | "download" | "ellipsis" | "ellipsis-vertical" | "external-link" | "eye" | "eye-off" | "funnel" | "grip-vertical" | "house" | "info" | "loader-circle" | "lock" | "log-out" | "mail" | "minus" | "monitor" | "moon" | "panel-left" | "paperclip" | "pencil" | "plus" | "refresh-cw" | "save" | "settings" | "square-check" | "square-minus" | "star" | "sun" | "trash-2" | "triangle-alert" | "upload" | "user" | "users";
 } & react.RefAttributes<SVGSVGElement>>;
-declare const iconNames: readonly ("x" | "search" | "menu" | "square" | "copy" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrow-up-down" | "bell" | "calendar" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chevrons-left" | "chevrons-right" | "chevrons-up-down" | "circle" | "circle-alert" | "circle-check" | "circle-dot" | "circle-x" | "clock" | "download" | "ellipsis" | "ellipsis-vertical" | "external-link" | "eye" | "eye-off" | "funnel" | "grip-vertical" | "house" | "info" | "loader-circle" | "lock" | "log-out" | "mail" | "minus" | "monitor" | "moon" | "panel-left" | "paperclip" | "pencil" | "plus" | "refresh-cw" | "save" | "settings" | "square-check" | "square-minus" | "star" | "sun" | "trash-2" | "triangle-alert" | "upload" | "user" | "users")[];
+declare const iconNames: readonly ("x" | "search" | "menu" | "square" | "copy" | "circle" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrow-up-down" | "bell" | "calendar" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevrons-left" | "chevrons-right" | "chevrons-up-down" | "chevron-up" | "circle-alert" | "circle-check" | "circle-dot" | "circle-x" | "clock" | "download" | "ellipsis" | "ellipsis-vertical" | "external-link" | "eye" | "eye-off" | "funnel" | "grip-vertical" | "house" | "info" | "loader-circle" | "lock" | "log-out" | "mail" | "minus" | "monitor" | "moon" | "panel-left" | "paperclip" | "pencil" | "plus" | "refresh-cw" | "save" | "settings" | "square-check" | "square-minus" | "star" | "sun" | "trash-2" | "triangle-alert" | "upload" | "user" | "users")[];
 
 export { Icon, iconNames, lucideIcons };

package/dist/icons/lucide.js

@@ -1,10 +1,6 @@
 import {
   createIconSet
 } from "../chunk-2RIWL363.js";
-import "../chunk-Q4PPM2SU.js";
-import "../chunk-7EOSDFS3.js";
-
-// src/icons/lucide.ts
 import {
   ArrowDown,
   ArrowLeft,
@@ -17,10 +13,10 @@ import {
   ChevronDown,
   ChevronLeft,
   ChevronRight,
+  ChevronUp,
   ChevronsLeft,
   ChevronsRight,
   ChevronsUpDown,
-  ChevronUp,
   Circle,
   CircleAlert,
   CircleCheck,
@@ -65,7 +61,11 @@ import {
   User,
   Users,
   X
-} from "lucide-react";
+} from "../chunk-KN3OU7HF.js";
+import "../chunk-Q4PPM2SU.js";
+import "../chunk-7EOSDFS3.js";
+
+// src/icons/lucide.ts
 var lucideIcons = {
   "arrow-down": ArrowDown,
   "arrow-left": ArrowLeft,

package/dist/icons.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
-import { I as IconProps, a as IconComponent } from './types-BBudf463.js';
-export { b as IconRenderProps, c as IconSize } from './types-BBudf463.js';
+import { I as IconProps, a as IconComponent } from './glyph-Cj0bpG8i.js';
+export { G as Glyph, b as GlyphProps, c as IconRenderProps, d as IconSize } from './glyph-Cj0bpG8i.js';
+export { IconNode } from 'lucide';
 
 type SetIconProps<Name extends string> = Omit<IconProps, "icon" | "name"> & {
     name: Name;

package/dist/menu.js

@@ -18,8 +18,9 @@ import {
   MenuSub,
   MenuSubContent,
   MenuSubTrigger
-} from "./chunk-EFHRRLAW.js";
+} from "./chunk-D6B4MBMA.js";
 import "./chunk-LZMX27IZ.js";
+import "./chunk-ORAD4PGE.js";
 import "./chunk-XRZHP6BD.js";
 import "./chunk-2TQSHVXA.js";
 export {

package/dist/modal.js

@@ -1,4 +1,7 @@
 "use client";
+import {
+  X
+} from "./chunk-ORAD4PGE.js";
 import {
   Icon
 } from "./chunk-XRZHP6BD.js";
@@ -16,7 +19,6 @@ import { forwardRef as forwardRef2, useCallback, useRef } from "react";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
 
 // src/components/modal/shared.tsx
-import { X } from "lucide-react";
 import {
   createContext,
   forwardRef,

package/dist/pagination.js

@@ -1,6 +1,11 @@
 import {
   renderElement
 } from "./chunk-LTOLV67A.js";
+import {
+  ChevronLeft,
+  ChevronRight,
+  Ellipsis
+} from "./chunk-KN3OU7HF.js";
 import {
   Icon
 } from "./chunk-Q4PPM2SU.js";
@@ -42,7 +47,6 @@ function getPageRange({
 }
 
 // src/components/pagination/pagination.tsx
-import { ChevronLeft, ChevronRight, Ellipsis } from "lucide-react";
 import {
   forwardRef
 } from "react";

package/dist/split-button.js

@@ -3,8 +3,11 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuTrigger
-} from "./chunk-EFHRRLAW.js";
+} from "./chunk-D6B4MBMA.js";
 import "./chunk-LZMX27IZ.js";
+import {
+  ChevronDown
+} from "./chunk-ORAD4PGE.js";
 import {
   Icon
 } from "./chunk-XRZHP6BD.js";
@@ -22,7 +25,6 @@ import {
 } from "./chunk-2TQSHVXA.js";
 
 // src/components/split-button/split-button.tsx
-import { ChevronDown } from "lucide-react";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var SplitButton = forwardRef(function SplitButton2({ children, menu, menuLabel, variant = "default", size = "md", disabled, className, ...props }, ref) {

package/dist/stepper.js

@@ -1,3 +1,7 @@
+import {
+  Check,
+  X
+} from "./chunk-KN3OU7HF.js";
 import {
   Icon
 } from "./chunk-Q4PPM2SU.js";
@@ -6,7 +10,6 @@ import {
 } from "./chunk-7EOSDFS3.js";
 
 // src/components/stepper/stepper.tsx
-import { Check, X } from "lucide-react";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var STATUS_LABELS = {

package/dist/toast.js

@@ -1,4 +1,11 @@
 "use client";
+import {
+  CircleAlert,
+  CircleCheck,
+  Info,
+  TriangleAlert,
+  X
+} from "./chunk-ORAD4PGE.js";
 import {
   Icon
 } from "./chunk-XRZHP6BD.js";
@@ -75,7 +82,6 @@ var toast = Object.assign(show(void 0), {
 });
 
 // src/components/toast/toaster.tsx
-import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var VIEWPORT = "fixed z-(--z-toast) w-[calc(100vw-2rem)] outline-none sm:w-96";
 var PLACEMENT = {

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@azmr/ui",
-  "version": "0.3.0",
-  "description": "React UI components wired to reactive Signals — Grid, useSignal",
+  "version": "0.4.1",
+  "description": "Accessible React design system on Base UI and Tailwind v4 tokens — buttons, menus, modals, tables, toasts and more, with Signal-aware hooks",
   "type": "module",
   "license": "MIT",
   "author": "Alshafaraz Gazi <alshafaraz.gazi@gmail.com>",
-  "homepage": "https://docs.azmara.io",
+  "homepage": "https://platform.azmara.io/docs/packages/ui",
+  "bugs": {
+    "url": "https://github.com/azmara-labs/platform/issues"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/azmara-labs/platform.git",
@@ -18,7 +21,10 @@
     "reactive",
     "signals",
     "data-table",
-    "azmara"
+    "azmara",
+    "design-system",
+    "base-ui",
+    "tailwindcss"
   ],
   "engines": {
     "node": ">=18.0.0"
@@ -171,14 +177,15 @@
     "@base-ui/react": "^1.9.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.57.0",
+    "lucide": "^1.59.0",
+    "lucide-react": "^1.59.0",
     "tailwind-merge": "^3.7.0"
   },
   "peerDependencies": {
     "@azmr/core": ">=0.0.2 <1.0.0",
+    "motion": "^14.0.0",
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "motion": "^14.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
     "@mui/icons-material": "^9.5.0",
@@ -201,13 +208,13 @@
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-hook-form": "^7.90.0",
-    "shadcn": "4.21.4",
+    "shadcn": "4.22.1",
     "size-limit": "^14.2.0",
     "tailwindcss": "^4.3.3",
     "tsup": "^8.5.1",
     "typescript": "^5.7.3",
     "vitest": "^4.1.11",
-    "@azmr/core": "0.1.0"
+    "@azmr/core": "0.1.1"
   },
   "publishConfig": {
     "access": "public"
@@ -226,6 +233,7 @@
     "size": "size-limit && node scripts/check-css-size.mjs",
     "verify:consumer": "node scripts/verify-consumer.mjs",
     "build:registry": "node scripts/build-registry.mjs",
+    "verify:guides": "node scripts/verify-guides.mjs",
     "verify:registry": "node scripts/verify-registry.mjs"
   }
 }