@cystackapp/ui 1.4.1 → 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 VanHo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,14 +1,14 @@
 # @cystackapp/ui
 
-Reusable React UI components used across CyStack's platform dashboards. Built
-with React 18, TypeScript and Tailwind CSS v4.
+CyStack design system — reusable React UI components used across CyStack's
+platform dashboards. Built with React 18, TypeScript and Tailwind CSS v4.
 
 ## Installation
 
 ```bash
-yarn add @cystackapp/ui
-# or
 npm install @cystackapp/ui
+# or
+yarn add @cystackapp/ui
 ```
 
 ### Peer dependencies
@@ -16,17 +16,17 @@ npm install @cystackapp/ui
 Install these in the host app if not already present:
 
 ```bash
-yarn add react react-dom react-router-dom react-i18next i18next @untitled-ui/icons-react
+npm install react react-dom react-router-dom react-i18next i18next @untitled-ui/icons-react
 ```
 
-| Package                    | Version      |
-| -------------------------- | ------------ |
-| `react`                    | `^18.0.0`    |
-| `react-dom`                | `^18.0.0`    |
-| `react-router-dom`         | `^6.0.0`     |
-| `react-i18next`            | `^15.0.0`    |
-| `i18next`                  | `23.7.7`     |
-| `@untitled-ui/icons-react` | `^0.1.4`     |
+| Package                    | Version   |
+| -------------------------- | --------- |
+| `react`                    | `^18.0.0` |
+| `react-dom`                | `^18.0.0` |
+| `react-router-dom`         | `^6.0.0`  |
+| `react-i18next`            | `^15.0.0` |
+| `i18next`                  | `>=23`    |
+| `@untitled-ui/icons-react` | `^0.1.4`  |
 
 ## Setup
 
@@ -39,13 +39,22 @@ use **Tailwind CSS v4** and import the theme once in its root stylesheet:
 @import "@cystackapp/ui/theme.css";
 ```
 
-`theme.css` registers CSS variables (color tokens, spacing, etc.) and a `@source`
-directive so Tailwind can scan the package's classes.
+`theme.css` registers CSS variables (color tokens, spacing, etc.) and a
+`@source` directive so Tailwind can scan the package's classes.
+
+Some components (`Table`, `LoadingState`, `Notification`, …) render translated
+text via `react-i18next`. Merge the package's resources into the host app's
+i18next instance:
+
+```ts
+import { resources as uiResources } from "@cystackapp/ui";
+// merge uiResources into your i18next init
+```
 
 ## Usage
 
 ```tsx
-import { Badge, Tooltip, Popover, cn } from "@cystackapp/ui";
+import { Badge, Button, Tooltip, cn } from "@cystackapp/ui";
 
 export const Example = () => (
   <Tooltip content="Hello">
@@ -58,47 +67,68 @@ export const Example = () => (
 
 ### Available exports
 
-**Components**
+**Form controls** — `Button`, `Input`, `Textarea`, `Checkbox`, `Radio`,
+`Switch`, `Select`, `Combobox`, `Searchbox`, `TagsInput`, `FormField`
+
+**Display** — `Badge`, `BadgeTag`, `BadgeMore`, `Avatar`, `Card`, `Divider`,
+`Skeleton`, `ProgressBar`, `Media`, `OperatingSystemIcon`, `FeaturedIcon`,
+`KeyboardShortcutLabel`, `BackgroundPatternGrid`
+
+**Feedback** — `Alert`, `Banner`, `Toaster`/`createToast`,
+`NotificationBox`/`createNotification`, `EmptyState`, `ErrorState`,
+`LoadingState`, `Loader`
 
-- `Badge`, `BadgeTag`, `BadgeMore`
-- `Combobox`
-- `ErrorState`
-- `PageTitle`
-- `Popover`
-- `Switch`
-- `Tooltip`
+**Overlays** — `Modal`, `Drawer`, `Popover`, `Tooltip`, `Dropdown`
 
-**Hooks**
+**Navigation** — `Tabs`, `Breadcrumb`, `PageTitle`
 
-- `useResizeObserver`
-- `useScrollListener`
-- `useWindowResizeListener`
-- `useMutationObserver`
-- `useTransitionEndListener`
-- `useAnimationFrame`
-- `useElementShift`
-- `usePopoverCoord`
-- `useValidatedCombobox`
+**Data** — `Table`, `ExpandableTable`, `TableActionButton`, `FilterDropdown`,
+`useFilters`, `DonutChart`, `ChartLegend`
 
-**Utilities**
+**Disclosure** — `Accordion`, `Collapsible`
 
-- `cn` — `clsx` + `tailwind-merge` wrapper for conditional class names
-- `getBadgeAutoColor`, `TAG_ICON_COLOR_CLASSES`
+**Hooks** — `useResizeObserver`, `useScrollListener`,
+`useWindowResizeListener`, `useMutationObserver`, `useTransitionEndListener`,
+`useAnimationFrame`, `useElementShift`, `usePopoverCoord`,
+`useValidatedCombobox`, `useClickOutsideModal`, `useCountdown`, `useDebounce`,
+`useToastList`
 
-**Types**
+**Utilities** — `cn` (clsx + tailwind-merge), `Observable`,
+`getBadgeAutoColor`, URL param codecs (`stringCodec`, `searchCodec`,
+`numberCodec`, `csvCodec`)
 
-- `BadgeProps`, `BadgeColor`, `BadgeSize`, `BadgeType`
-- `ComboboxSuggestionItem`
-- `PopoverPosition`
+The authoritative list lives in [`src/index.ts`](./src/index.ts) — anything not
+exported there is internal and may change without notice.
+
+## Development
+
+```bash
+npm install          # install dependencies
+npm run storybook    # component playground at :6007
+npm run build        # build dist/ (vite + dts)
+npm run typecheck    # tsc --noEmit
+npm run lint         # eslint
+npm run test         # vitest + playwright component tests
+npm run i18n         # regenerate src/i18n/resources.ts from locale/ folders
+```
+
+Component tests need Playwright browsers on first run:
+
+```bash
+npx playwright install chromium
+```
 
-The authoritative list lives in
-[`src/index.ts`](./src/index.ts) — anything not exported there is internal and
-may change without notice.
+## Publishing
 
-## Versioning
+CI publishes to npm automatically. On pushes to `main` (or tags), the `build`
+job runs `cystack-deployer`, which builds the [`Dockerfile`](./Dockerfile):
+install → typecheck + lint → build → [`scripts/publish.sh`](./scripts/publish.sh).
+The publish step skips when the version in `package.json` already exists on
+the registry, so re-runs are safe.
 
-Semver via [Changesets](https://github.com/changesets/changesets). Release notes
-in [`CHANGELOG.md`](./CHANGELOG.md).
+To release: bump `version` in `package.json`, update `CHANGELOG.md`, and merge
+to `main`. The `NPM_TOKEN` build arg / CI variable must hold an npm automation
+token with publish access to the `@cystackapp` scope.
 
 ## License
 

package/dist/assets/background-pattern-grid.svg.js

@@ -0,0 +1,7 @@
+import * as e from "react";
+const E = (t) => /* @__PURE__ */ e.createElement("svg", { width: 480, height: 480, viewBox: "0 0 480 480", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("mask", { id: "mask0_4933_393121", style: {
+  maskType: "alpha"
+}, maskUnits: "userSpaceOnUse", x: 0, y: 0, width: 480, height: 480 }, /* @__PURE__ */ e.createElement("rect", { width: 480, height: 480, fill: "url(#paint0_radial_4933_393121)" })), /* @__PURE__ */ e.createElement("g", { mask: "url(#mask0_4933_393121)" }, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#clip0_4933_393121)" }, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#clip1_4933_393121)" }, /* @__PURE__ */ e.createElement("line", { x1: 0.5, x2: 0.5, y2: 480, stroke: "#E9EAEB" }), /* @__PURE__ */ e.createElement("line", { x1: 32.5, x2: 32.5, y2: 480, stroke: "#E9EAEB" }), /* @__PURE__ */ e.createElement("line", { x1: 64.5, x2: 64.5, y2: 480, stroke: "#E9EAEB" }), /* @__PURE__ */ e.createElement("line", { x1: 96.5, x2: 96.5, y2: 480, stroke: "#E9EAEB" }), /* @__PURE__ */ e.createElement("line", { x1: 128.5, x2: 128.5, y2: 480, stroke: "#E9EAEB" }), /* @__PURE__ */ e.createElement("line", { x1: 160.5, x2: 160.5, y2: 480, stroke: "#E9EAEB" }), /* @__PURE__ */ e.createElement("line", { x1: 192.5, x2: 192.5, y2: 480, stroke: "#E9EAEB" }), /* @__PURE__ */ e.createElement("line", { x1: 224.5, x2: 224.5, y2: 480, stroke: "#E9EAEB" }), /* @__PURE__ */ e.createElement("line", { x1: 256.5, x2: 256.5, y2: 480, stroke: "#E9EAEB" }), /* @__PURE__ */ e.createElement("line", { x1: 288.5, x2: 288.5, y2: 480, stroke: "#E9EAEB" }), /* @__PURE__ */ e.createElement("line", { x1: 320.5, x2: 320.5, y2: 480, stroke: "#E9EAEB" }), /* @__PURE__ */ e.createElement("line", { x1: 352.5, x2: 352.5, y2: 480, stroke: "#E9EAEB" }), /* @__PURE__ */ e.createElement("line", { x1: 384.5, x2: 384.5, y2: 480, stroke: "#E9EAEB" }), /* @__PURE__ */ e.createElement("line", { x1: 416.5, x2: 416.5, y2: 480, stroke: "#E9EAEB" }), /* @__PURE__ */ e.createElement("line", { x1: 448.5, x2: 448.5, y2: 480, stroke: "#E9EAEB" })), /* @__PURE__ */ e.createElement("rect", { x: 0.5, y: 0.5, width: 479, height: 479, stroke: "#E9EAEB" }), /* @__PURE__ */ e.createElement("g", { clipPath: "url(#clip2_4933_393121)" }, /* @__PURE__ */ e.createElement("line", { y1: 31.5, x2: 480, y2: 31.5, stroke: "#E9EAEB" }), /* @__PURE__ */ e.createElement("line", { y1: 63.5, x2: 480, y2: 63.5, stroke: "#E9EAEB" }), /* @__PURE__ */ e.createElement("line", { y1: 95.5, x2: 480, y2: 95.5, stroke: "#E9EAEB" }), /* @__PURE__ */ e.createElement("line", { y1: 127.5, x2: 480, y2: 127.5, stroke: "#E9EAEB" }), /* @__PURE__ */ e.createElement("line", { y1: 159.5, x2: 480, y2: 159.5, stroke: "#E9EAEB" }), /* @__PURE__ */ e.createElement("line", { y1: 191.5, x2: 480, y2: 191.5, stroke: "#E9EAEB" }), /* @__PURE__ */ e.createElement("line", { y1: 223.5, x2: 480, y2: 223.5, stroke: "#E9EAEB" }), /* @__PURE__ */ e.createElement("line", { y1: 255.5, x2: 480, y2: 255.5, stroke: "#E9EAEB" }), /* @__PURE__ */ e.createElement("line", { y1: 287.5, x2: 480, y2: 287.5, stroke: "#E9EAEB" }), /* @__PURE__ */ e.createElement("line", { y1: 319.5, x2: 480, y2: 319.5, stroke: "#E9EAEB" }), /* @__PURE__ */ e.createElement("line", { y1: 351.5, x2: 480, y2: 351.5, stroke: "#E9EAEB" }), /* @__PURE__ */ e.createElement("line", { y1: 383.5, x2: 480, y2: 383.5, stroke: "#E9EAEB" }), /* @__PURE__ */ e.createElement("line", { y1: 415.5, x2: 480, y2: 415.5, stroke: "#E9EAEB" }), /* @__PURE__ */ e.createElement("line", { y1: 447.5, x2: 480, y2: 447.5, stroke: "#E9EAEB" }), /* @__PURE__ */ e.createElement("line", { y1: 479.5, x2: 480, y2: 479.5, stroke: "#E9EAEB" })), /* @__PURE__ */ e.createElement("rect", { x: 0.5, y: 0.5, width: 479, height: 479, stroke: "#E9EAEB" }))), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("radialGradient", { id: "paint0_radial_4933_393121", cx: 0, cy: 0, r: 1, gradientUnits: "userSpaceOnUse", gradientTransform: "translate(240 240) rotate(90) scale(240 240)" }, /* @__PURE__ */ e.createElement("stop", null), /* @__PURE__ */ e.createElement("stop", { offset: 1, stopOpacity: 0 })), /* @__PURE__ */ e.createElement("clipPath", { id: "clip0_4933_393121" }, /* @__PURE__ */ e.createElement("rect", { width: 480, height: 480, fill: "white" })), /* @__PURE__ */ e.createElement("clipPath", { id: "clip1_4933_393121" }, /* @__PURE__ */ e.createElement("rect", { width: 480, height: 480, fill: "white" })), /* @__PURE__ */ e.createElement("clipPath", { id: "clip2_4933_393121" }, /* @__PURE__ */ e.createElement("rect", { width: 480, height: 480, fill: "white" }))));
+export {
+  E as default
+};

package/dist/assets/empty-cloud.svg.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const r = (t) => /* @__PURE__ */ e.createElement("svg", { width: 180, height: 136, viewBox: "0 0 180 136", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("circle", { cx: 90, cy: 64, r: 64, fill: "#E9EAEB" }), /* @__PURE__ */ e.createElement("circle", { cx: 24, cy: 20, r: 6, fill: "#F5F5F5" }), /* @__PURE__ */ e.createElement("circle", { cx: 21, cy: 112, r: 8, fill: "#F5F5F5" }), /* @__PURE__ */ e.createElement("circle", { cx: 164, cy: 36, r: 8, fill: "#F5F5F5" }), /* @__PURE__ */ e.createElement("circle", { cx: 153, cy: 9, r: 5, fill: "#F5F5F5" }), /* @__PURE__ */ e.createElement("g", { filter: "url(#filter0_ddd_1182_2026)" }, /* @__PURE__ */ e.createElement("path", { d: "M92 16C78.534 16 66.6222 22.6541 59.3733 32.8536C57.0062 32.2954 54.5376 32 52 32C34.3269 32 20 46.3269 20 64C20 81.6731 34.3269 96 52 96H132C147.464 96 160 83.464 160 68C160 52.536 147.464 40 132 40C130.902 40 129.818 40.0633 128.752 40.1863C122.623 25.9596 108.475 16 92 16Z", fill: "#FAFAFA" }), /* @__PURE__ */ e.createElement("circle", { cx: 52, cy: 64, r: 32, fill: "url(#paint0_linear_1182_2026)" }), /* @__PURE__ */ e.createElement("circle", { cx: 92, cy: 56, r: 40, fill: "url(#paint1_linear_1182_2026)" }), /* @__PURE__ */ e.createElement("circle", { cx: 132, cy: 68, r: 28, fill: "url(#paint2_linear_1182_2026)" })), /* @__PURE__ */ e.createElement("path", { d: "M62 88C62 72.536 74.536 60 90 60C105.464 60 118 72.536 118 88C118 103.464 105.464 116 90 116C74.536 116 62 103.464 62 88Z", fill: "#344054", fillOpacity: 0.4 }), /* @__PURE__ */ e.createElement("path", { d: "M100.5 98.5L96.4168 94.4167M99.3333 87.4167C99.3333 92.8935 94.8935 97.3333 89.4167 97.3333C83.9398 97.3333 79.5 92.8935 79.5 87.4167C79.5 81.9398 83.9398 77.5 89.4167 77.5C94.8935 77.5 99.3333 81.9398 99.3333 87.4167Z", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("filter", { id: "filter0_ddd_1182_2026", x: 0, y: 16, width: 180, height: 120, filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ e.createElement("feFlood", { floodOpacity: 0, result: "BackgroundImageFix" }), /* @__PURE__ */ e.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), /* @__PURE__ */ e.createElement("feMorphology", { radius: 1.5, operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_1182_2026" }), /* @__PURE__ */ e.createElement("feOffset", { dy: 3 }), /* @__PURE__ */ e.createElement("feGaussianBlur", { stdDeviation: 1.5 }), /* @__PURE__ */ e.createElement("feComposite", { in2: "hardAlpha", operator: "out" }), /* @__PURE__ */ e.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" }), /* @__PURE__ */ e.createElement("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_1182_2026" }), /* @__PURE__ */ e.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), /* @__PURE__ */ e.createElement("feMorphology", { radius: 4, operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_1182_2026" }), /* @__PURE__ */ e.createElement("feOffset", { dy: 8 }), /* @__PURE__ */ e.createElement("feGaussianBlur", { stdDeviation: 4 }), /* @__PURE__ */ e.createElement("feComposite", { in2: "hardAlpha", operator: "out" }), /* @__PURE__ */ e.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" }), /* @__PURE__ */ e.createElement("feBlend", { mode: "normal", in2: "effect1_dropShadow_1182_2026", result: "effect2_dropShadow_1182_2026" }), /* @__PURE__ */ e.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), /* @__PURE__ */ e.createElement("feMorphology", { radius: 4, operator: "erode", in: "SourceAlpha", result: "effect3_dropShadow_1182_2026" }), /* @__PURE__ */ e.createElement("feOffset", { dy: 20 }), /* @__PURE__ */ e.createElement("feGaussianBlur", { stdDeviation: 12 }), /* @__PURE__ */ e.createElement("feComposite", { in2: "hardAlpha", operator: "out" }), /* @__PURE__ */ e.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" }), /* @__PURE__ */ e.createElement("feBlend", { mode: "normal", in2: "effect2_dropShadow_1182_2026", result: "effect3_dropShadow_1182_2026" }), /* @__PURE__ */ e.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect3_dropShadow_1182_2026", result: "shape" })), /* @__PURE__ */ e.createElement("linearGradient", { id: "paint0_linear_1182_2026", x1: 27.4286, y1: 42.8571, x2: 84, y2: 96, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ e.createElement("stop", { stopColor: "#D0D5DD" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.350715, stopColor: "white", stopOpacity: 0 })), /* @__PURE__ */ e.createElement("linearGradient", { id: "paint1_linear_1182_2026", x1: 61.2857, y1: 29.5714, x2: 132, y2: 95.9999, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ e.createElement("stop", { stopColor: "#D0D5DD" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.350715, stopColor: "white", stopOpacity: 0 })), /* @__PURE__ */ e.createElement("linearGradient", { id: "paint2_linear_1182_2026", x1: 110.5, y1: 49.5, x2: 160, y2: 96, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ e.createElement("stop", { stopColor: "#D0D5DD" }), /* @__PURE__ */ e.createElement("stop", { offset: 0.350715, stopColor: "white", stopOpacity: 0 }))));
+export {
+  r as default
+};

package/dist/components/accordion/Accordion.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+interface Props {
+    label?: ReactNode;
+    children?: ReactNode;
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    onToggle?: (expanded: boolean) => void;
+    className?: string;
+    duration?: number;
+}
+/** Accordion item, aka. smooth collapsible container.
+ * @param expanded - Controlled state for expansion. When provided, internal state is ignored.
+ * @param defaultExpanded - Initial expanded state for uncontrolled mode (default: true).
+ * @param onToggle - Called with the next expanded state when the label is clicked.
+ * @param label - The trigger element that toggles expansion.
+ * @param children - Content hidden when collapsed.
+ * @param duration - Transition duration in milliseconds (default: 150).
+ */
+export declare const Accordion: ({ label, children, expanded, defaultExpanded, onToggle, className, duration, }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/accordion/Accordion.js

@@ -0,0 +1,36 @@
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { useState as u } from "react";
+import { Collapsible as v } from "../collapsible/Collapsible.js";
+const k = ({
+  label: s,
+  children: a,
+  expanded: r,
+  defaultExpanded: c = !0,
+  onToggle: n,
+  className: l,
+  duration: p = 150
+}) => {
+  const [x, f] = u(c), d = r !== void 0, e = d ? r : x, i = () => {
+    const t = !e;
+    d || f(t), n == null || n(t);
+  };
+  return /* @__PURE__ */ m("div", { className: l, children: [
+    /* @__PURE__ */ o(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        "aria-expanded": e,
+        onClick: i,
+        onKeyDown: (t) => {
+          (t.key === "Enter" || t.key === " ") && (t.preventDefault(), i());
+        },
+        children: s
+      }
+    ),
+    /* @__PURE__ */ o(v, { expanded: e, duration: p, children: a })
+  ] });
+};
+export {
+  k as Accordion
+};

package/dist/components/accordion/AccordionTestStory.d.ts

@@ -0,0 +1,3 @@
+export declare const AccordionWithCallbackDisplay: (props: {
+    defaultExpanded?: boolean;
+}) => import("react").JSX.Element;

package/dist/components/alert/Alert.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export type AlertType = "brand" | "gray" | "success" | "warning" | "error";
+interface Props {
+    type?: AlertType;
+    title: ReactNode;
+    /** Supporting text rendered under the title. */
+    detail?: ReactNode;
+    /** Optional action row (e.g. buttons/links) rendered under the content. */
+    actions?: ReactNode;
+    /** When provided, renders a close/dismiss button. */
+    onClose?: () => void;
+    className?: string;
+}
+export declare const Alert: ({ type, title, detail, actions, onClose, className, }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/alert/Alert.js

@@ -0,0 +1,54 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { XClose as o, AlertCircle as d, AlertTriangle as v, CheckCircle as m, InfoCircle as i } from "@untitled-ui/icons-react";
+import { cn as g } from "../../utils/cn.js";
+const b = {
+  brand: "border-brand-v2-300 bg-brand-v2-25",
+  gray: "border-gray-v2-300 bg-gray-v2-25",
+  success: "border-success-v2-300 bg-success-v2-25",
+  warning: "border-warning-v2-300 bg-warning-v2-25",
+  error: "border-error-v2-300 bg-error-v2-25"
+}, x = {
+  brand: /* @__PURE__ */ r(i, { className: "size-5 shrink-0 text-brand-v2-600" }),
+  gray: /* @__PURE__ */ r(i, { className: "size-5 shrink-0 text-gray-v2-600" }),
+  success: /* @__PURE__ */ r(m, { className: "size-5 shrink-0 text-success-v2-600" }),
+  warning: /* @__PURE__ */ r(v, { className: "size-5 shrink-0 text-warning-v2-600" }),
+  error: /* @__PURE__ */ r(d, { className: "size-5 shrink-0 text-error-v2-600" })
+}, f = ({
+  type: e = "gray",
+  title: l,
+  detail: s,
+  actions: a,
+  onClose: t,
+  className: c
+}) => /* @__PURE__ */ n(
+  "div",
+  {
+    role: "alert",
+    className: g(
+      "relative p-4 flex items-start gap-3 rounded-xl border shadow-xs",
+      b[e],
+      c
+    ),
+    children: [
+      x[e],
+      /* @__PURE__ */ n("div", { className: "flex-1 flex flex-col gap-1 min-w-0", children: [
+        /* @__PURE__ */ r("span", { className: "text-sm font-semibold text-gray-v2-700 wrap-break-words", children: l }),
+        s !== void 0 && /* @__PURE__ */ r("span", { className: "text-sm text-gray-v2-600 wrap-break-words", children: s }),
+        a !== void 0 && /* @__PURE__ */ r("div", { className: "mt-2 flex items-center gap-3", children: a })
+      ] }),
+      t && /* @__PURE__ */ r(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Close",
+          onClick: t,
+          className: "shrink-0 flex p-0.5 text-gray-v2-400 hover:text-gray-v2-600 transition-colors cursor-pointer",
+          children: /* @__PURE__ */ r(o, { className: "size-5 shrink-0" })
+        }
+      )
+    ]
+  }
+);
+export {
+  f as Alert
+};

package/dist/components/avatar/Avatar.d.ts

@@ -0,0 +1,13 @@
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+interface Props {
+    /** Image URL. Falls back to initials (from `name`) or a placeholder icon. */
+    src?: string;
+    /** Used for initials fallback and as the image alt text. */
+    name?: string;
+    size?: AvatarSize;
+    /** Shows an online/offline status indicator dot. */
+    status?: "online" | "offline";
+    className?: string;
+}
+export declare const Avatar: ({ src, name, size, status, className }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/avatar/Avatar.js

@@ -0,0 +1,64 @@
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { useState as x } from "react";
+import { User01 as d } from "@untitled-ui/icons-react";
+import { cn as i } from "../../utils/cn.js";
+const u = {
+  xs: "size-6 text-xs",
+  sm: "size-8 text-sm",
+  md: "size-10 text-md",
+  lg: "size-12 text-lg",
+  xl: "size-14 text-xl"
+}, f = {
+  xs: "size-4",
+  sm: "size-5",
+  md: "size-6",
+  lg: "size-7",
+  xl: "size-8"
+}, S = {
+  xs: "size-1.5",
+  sm: "size-2",
+  md: "size-2.5",
+  lg: "size-3",
+  xl: "size-3.5"
+};
+function p(s) {
+  const e = s.trim().split(/\s+/);
+  return e.length === 0 || e[0].length === 0 ? "" : e.length === 1 ? e[0][0].toUpperCase() : (e[0][0] + e[e.length - 1][0]).toUpperCase();
+}
+const E = ({ src: s, name: e, size: t = "md", status: o, className: n }) => {
+  const [a, m] = x(!1), g = !!s && !a, l = e ? p(e) : "";
+  return /* @__PURE__ */ c(
+    "span",
+    {
+      className: i(
+        "relative inline-flex items-center justify-center shrink-0 rounded-full bg-gray-v2-100 border border-gray-v2-200 font-semibold text-gray-v2-600 select-none",
+        u[t],
+        n
+      ),
+      children: [
+        g ? /* @__PURE__ */ r(
+          "img",
+          {
+            src: s,
+            alt: e ?? "",
+            onError: () => m(!0),
+            className: "size-full rounded-full object-cover"
+          }
+        ) : l || /* @__PURE__ */ r(d, { className: i("text-gray-v2-500", f[t]) }),
+        o && /* @__PURE__ */ r(
+          "span",
+          {
+            className: i(
+              "absolute bottom-0 right-0 rounded-full border-[1.5px] border-white",
+              o === "online" ? "bg-success-v2-500" : "bg-gray-v2-300",
+              S[t]
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  E as Avatar
+};

package/dist/components/background-pattern/BackgroundPatternGrid.d.ts

@@ -0,0 +1 @@
+export declare const BackgroundPatternGrid: (props: React.SVGProps<SVGSVGElement>) => import("react").JSX.Element;

package/dist/components/background-pattern/BackgroundPatternGrid.js

@@ -0,0 +1,6 @@
+import { jsx as t } from "react/jsx-runtime";
+import o from "../../assets/background-pattern-grid.svg.js";
+const d = (r) => /* @__PURE__ */ t(o, { ...r });
+export {
+  d as BackgroundPatternGrid
+};

package/dist/components/badge/Badge.d.ts

@@ -26,4 +26,4 @@ export interface BadgeProps {
  * <Badge iconLeading={<AlertCircle />} onClose={handleDismiss}>Warning</Badge>
  * ```
  */
-export declare const Badge: ({ children, color, size, type, dot, iconLeading, iconTrailing, onClose, className, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Badge: ({ children, color, size, type, dot, iconLeading, iconTrailing, onClose, className, }: BadgeProps) => import("react").JSX.Element;

package/dist/components/badge/Badge.js

@@ -4,7 +4,7 @@ import { XClose as k } from "@untitled-ui/icons-react";
 import { cn as u } from "../../utils/cn.js";
 import { Tooltip as B } from "../tooltip/Tooltip.js";
 import { useResizeObserver as R } from "../../hooks/element-shift/use-resize-observer.js";
-import { BADGE_ICON_SIZE_CLASSES as T, BADGE_DOT_CLASSES as h, BADGE_MODERN_TEXT_CLASSES as w, BADGE_COLOR_CLASSES as G, BADGE_SIZE_CLASSES as O, BADGE_TYPE_CLASSES as v } from "./badge-utils.js";
+import { BADGE_DOT_CLASSES as T, BADGE_ICON_SIZE_CLASSES as h, BADGE_MODERN_TEXT_CLASSES as w, BADGE_COLOR_CLASSES as G, BADGE_SIZE_CLASSES as O, BADGE_TYPE_CLASSES as v } from "./badge-utils.js";
 const X = ({
   children: t,
   color: o = "gray",
@@ -41,7 +41,7 @@ const X = ({
           {
             className: u(
               "size-1.5 rounded-full shrink-0",
-              h[o]
+              T[o]
             )
           }
         ) : null,
@@ -55,7 +55,7 @@ const X = ({
             "aria-label": typeof t == "string" ? `Remove ${t}` : "Remove",
             onClick: m,
             className: "shrink-0 cursor-pointer rounded-full p-0 hover:opacity-70 transition-opacity",
-            children: /* @__PURE__ */ e(k, { className: T[a] })
+            children: /* @__PURE__ */ e(k, { className: h[a] })
           }
         ) : null
       ]

package/dist/components/badge/BadgeTestStory.d.ts

@@ -2,4 +2,4 @@
  * Test helper that renders a dismissible Badge and displays
  * whether the onClose callback was fired.
  */
-export declare const BadgeWithCloseDisplay: () => import("react/jsx-runtime").JSX.Element;
+export declare const BadgeWithCloseDisplay: () => import("react").JSX.Element;

package/dist/components/badge/variants/BadgeMore.d.ts

@@ -2,5 +2,5 @@ import { ReactNode } from 'react';
 interface Props {
     badges: ReactNode[];
 }
-export declare const BadgeMore: ({ badges }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export declare const BadgeMore: ({ badges }: Props) => import("react").JSX.Element | null;
 export {};

package/dist/components/badge/variants/BadgeMoreTestStory.d.ts

@@ -2,4 +2,4 @@
  * Test helper that renders a BadgeMore with a fixed set of badges
  * for use in hover interaction tests.
  */
-export declare const BadgeMoreHoverDisplay: () => import("react/jsx-runtime").JSX.Element;
+export declare const BadgeMoreHoverDisplay: () => import("react").JSX.Element;

package/dist/components/badge/variants/BadgeTag.d.ts

@@ -6,5 +6,5 @@ interface Props {
     name: string;
     size?: BadgeSize;
 }
-export declare const BadgeTag: ({ name, size }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const BadgeTag: ({ name, size }: Props) => import("react").JSX.Element;
 export {};

package/dist/components/badge/variants/BadgeTag.js

@@ -2,7 +2,7 @@ import { jsx as o } from "react/jsx-runtime";
 import { Tag01 as g } from "@untitled-ui/icons-react";
 import { cn as i } from "../../../utils/cn.js";
 import { Badge as c } from "../Badge.js";
-import { BADGE_COLORS as n, BADGE_ICON_SIZE_CLASSES as l } from "../badge-utils.js";
+import { BADGE_ICON_SIZE_CLASSES as l, BADGE_COLORS as n } from "../badge-utils.js";
 function u(t) {
   const r = Array.from(t).reduce(
     (e, a) => e + a.charCodeAt(0),

package/dist/components/banner/Banner.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+interface Props {
+    icon?: ReactNode;
+    message: ReactNode;
+    detail?: ReactNode;
+    className?: string;
+}
+export declare const Banner: ({ icon, message, detail, className }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/banner/Banner.js

@@ -0,0 +1,21 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { cn as l } from "../../utils/cn.js";
+const o = ({ icon: s, message: t, detail: e, className: a }) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: l(
+      "px-8 py-3 flex items-center gap-4 bg-brand-v2-600 text-white",
+      a
+    ),
+    children: [
+      s,
+      /* @__PURE__ */ n("div", { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ r("p", { className: "text-md font-semibold", children: t }),
+        e !== void 0 && /* @__PURE__ */ r("span", { className: "text-md font-normal", children: e })
+      ] })
+    ]
+  }
+);
+export {
+  o as Banner
+};

package/dist/components/breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    homePath: string;
+    levels: {
+        name: string;
+        path: string;
+    }[];
+    currentPage: {
+        name: string;
+        tab?: string;
+    };
+}
+export declare const Breadcrumb: ({ homePath, levels, currentPage }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/breadcrumb/Breadcrumb.js

@@ -0,0 +1,36 @@
+import { jsxs as e, jsx as a, Fragment as i } from "react/jsx-runtime";
+import { Fragment as o } from "react";
+import { Link as m } from "react-router-dom";
+import { HomeLine as c, ChevronRight as n } from "@untitled-ui/icons-react";
+const x = ({ homePath: s, levels: l, currentPage: r }) => /* @__PURE__ */ e("nav", { "aria-label": "Breadcrumb", className: "flex items-center gap-2", children: [
+  /* @__PURE__ */ a(m, { to: s, "aria-label": "Home", children: /* @__PURE__ */ a(c, { className: "h-5 w-5 text-gray-v2" }) }),
+  l.map((t) => /* @__PURE__ */ e(o, { children: [
+    /* @__PURE__ */ a(n, { className: "h-4 w-4 text-gray-v2-300" }),
+    /* @__PURE__ */ a(
+      m,
+      {
+        to: t.path,
+        className: "text-sm font-semibold text-gray-v2-600 no-underline",
+        children: t.name
+      }
+    )
+  ] }, `breadcrumb-level-${t.path}`)),
+  /* @__PURE__ */ a(n, { className: "h-4 w-4 text-gray-v2-300" }),
+  /* @__PURE__ */ e(
+    "span",
+    {
+      "aria-current": "page",
+      className: "text-sm font-semibold text-brand-v2-700",
+      children: [
+        r.name,
+        r.tab ? /* @__PURE__ */ e(i, { children: [
+          /* @__PURE__ */ a("span", { className: "text-brand-v2-300", children: " / " }),
+          r.tab
+        ] }) : null
+      ]
+    }
+  )
+] });
+export {
+  x as Breadcrumb
+};

package/dist/components/button/Button.d.ts

@@ -0,0 +1,21 @@
+import { ButtonHTMLAttributes } from 'react';
+import { ButtonColor, ButtonLoadingStyle, ButtonSize, ButtonVariant } from './button-variants';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    color?: ButtonColor;
+    size?: ButtonSize;
+    /** Show a loading spinner and disable the button. */
+    pending?: boolean;
+    /** How the spinner is positioned relative to the button label. */
+    loadingStyle?: ButtonLoadingStyle;
+}
+/**
+ * @example With icon — size-4 for sm/md, size-5 for lg
+ * ```tsx
+ * <Button size="md">
+ *   <Plus className="size-4" />
+ *   New item
+ * </Button>
+ * ```
+ */
+export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;