@cystackapp/ui 1.4.1 → 2.0.0

package/dist/components/chart/donut-chart/DonutChart.d.ts

@@ -0,0 +1,55 @@
+import { ReactNode, SVGAttributes } from 'react';
+import { DonutTooltipPayload } from './donut-tooltip';
+import { ChartDataItem } from '../types';
+/**
+ * Props for the `DonutChart` component.
+ *
+ * At minimum, provide `data`. The chart renders a built-in tooltip by default;
+ * pass `tooltip` to override, or `tooltip={null}` to disable.
+ */
+interface DonutChartProps extends Omit<SVGAttributes<SVGSVGElement>, "viewBox"> {
+    /** Chart data slices. Zero-value items are filtered automatically. */
+    data: ChartDataItem[];
+    /**
+     * Custom tooltip renderer. Receives the hovered item, total value, and unit.
+     * - Omit to use the built-in tooltip.
+     * - Pass `null` to disable tooltips entirely.
+     */
+    tooltip?: ((payload: DonutTooltipPayload) => ReactNode) | null;
+    /** Format unit label for tooltip display. Receives the hovered item's value. */
+    getUnit?: (count: number) => string;
+    /**
+     * Ratio of the inner hole radius to the outer radius.
+     * - `0` renders a pie chart (no hole).
+     * - `0.56` is the default donut.
+     * - `1` is degenerate (invisible).
+     */
+    holeRatio?: number;
+    /** Color of the empty-state placeholder ring. */
+    emptyColor?: string;
+}
+/**
+ * SVG donut chart with built-in tooltip.
+ *
+ * Use `className` to control the rendered size, e.g. `className="w-32 h-32"`.
+ *
+ * @example
+ * ```tsx
+ * // Minimal — tooltip works out of the box
+ * <DonutChart data={[
+ *   { id: "a", name: "Critical", value: 12, color: "#e11d48" },
+ *   { id: "b", name: "High",     value: 25, color: "#f97316" },
+ * ]} />
+ *
+ * // Custom size via className
+ * <DonutChart data={chartData} className="w-40 h-40" />
+ *
+ * // Pie chart (no hole)
+ * <DonutChart data={chartData} holeRatio={0} />
+ *
+ * // Disable tooltip
+ * <DonutChart data={chartData} tooltip={null} />
+ * ```
+ */
+export declare const DonutChart: import('react').ForwardRefExoticComponent<DonutChartProps & import('react').RefAttributes<SVGSVGElement>>;
+export {};

package/dist/components/chart/donut-chart/DonutChart.js

@@ -0,0 +1,110 @@
+import { jsxs as m, Fragment as E, jsx as d } from "react/jsx-runtime";
+import { forwardRef as C, useMemo as p, useState as A, useCallback as R } from "react";
+import { computeSegments as w, DonutSegments as F } from "./DonutSegments.js";
+import { defaultTooltipRenderer as I, renderTooltipPortal as j } from "./donut-tooltip.js";
+const v = 200, N = 0.56, P = "var(--color-gray-v2-200)", n = v / 2, o = { x: n, y: n }, U = C(
+  ({
+    data: s,
+    tooltip: y = I,
+    getUnit: a,
+    holeRatio: T = N,
+    emptyColor: D = P,
+    className: L,
+    ...M
+  }, O) => {
+    const l = n * T, S = p(
+      () => s.filter((e) => e.value > 0),
+      [s]
+    ), r = p(
+      () => s.reduce((e, u) => e + u.value, 0),
+      [s]
+    ), [i, g] = A({ x: 0, y: 0, visible: !1, payload: null }), h = R(
+      (e, u, b) => {
+        g({
+          x: u + 8,
+          y: b + 8,
+          visible: !0,
+          payload: {
+            item: e,
+            totalValue: r,
+            unit: a ? a(e.value) : ""
+          }
+        });
+      },
+      [r, a]
+    ), f = R(() => {
+      g((e) => ({ ...e, visible: !1, payload: null }));
+    }, []), t = p(
+      () => w(
+        S,
+        r,
+        n,
+        l,
+        o
+      ),
+      [S, r, l]
+    ), _ = t.length > 1, c = t.length === 1, x = t.length === 0;
+    return /* @__PURE__ */ m(E, { children: [
+      /* @__PURE__ */ m(
+        "svg",
+        {
+          ref: O,
+          className: L,
+          viewBox: `0 0 ${v} ${v}`,
+          ...M,
+          children: [
+            _ && /* @__PURE__ */ d(
+              F,
+              {
+                segments: t,
+                outerRadius: n,
+                innerRadius: l,
+                center: o,
+                onSegmentEnter: h,
+                onSegmentLeave: f
+              }
+            ),
+            (c || x) && /* @__PURE__ */ m(E, { children: [
+              /* @__PURE__ */ d(
+                "circle",
+                {
+                  cx: o.x,
+                  cy: o.y,
+                  r: n,
+                  fill: c ? t[0].item.color : D,
+                  opacity: x ? 0.4 : 1,
+                  onMouseMove: c ? (e) => h(
+                    t[0].item,
+                    e.clientX,
+                    e.clientY
+                  ) : void 0,
+                  onMouseOut: c ? f : void 0
+                }
+              ),
+              l > 0 && /* @__PURE__ */ d(
+                "circle",
+                {
+                  cx: o.x,
+                  cy: o.y,
+                  r: l,
+                  fill: "white"
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      y && j(
+        i.y,
+        i.x,
+        i.visible,
+        i.payload,
+        y
+      )
+    ] });
+  }
+);
+U.displayName = "DonutChart";
+export {
+  U as DonutChart
+};

package/dist/components/chart/donut-chart/DonutSegments.d.ts

@@ -0,0 +1,25 @@
+import { ChartDataItem } from '../types';
+export interface Point {
+    x: number;
+    y: number;
+}
+/** Pre-computed geometry for a single donut segment. */
+export interface DonutSegment {
+    item: ChartDataItem;
+    startAngle: number;
+    endAngle: number;
+    outerStart: Point;
+    outerEnd: Point;
+    innerEnd: Point;
+}
+export declare function computeSegments(data: ChartDataItem[], totalValue: number, outerRadius: number, innerRadius: number, center: Point): DonutSegment[];
+interface Props {
+    segments: DonutSegment[];
+    outerRadius: number;
+    innerRadius: number;
+    center: Point;
+    onSegmentEnter: (item: ChartDataItem, x: number, y: number) => void;
+    onSegmentLeave: () => void;
+}
+export declare const DonutSegments: ({ segments, outerRadius, innerRadius, center, onSegmentEnter, onSegmentLeave, }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/chart/donut-chart/DonutSegments.js

@@ -0,0 +1,51 @@
+import { jsx as $, Fragment as p } from "react/jsx-runtime";
+function l(o, e, t) {
+  const r = o * Math.PI / 180;
+  return {
+    x: Math.sin(r) * e + t.x,
+    y: -Math.cos(r) * e + t.y
+  };
+}
+function m(o, e, t, r) {
+  const c = Math.abs(t - e) % 360 > 180 ? 1 : 0, u = t >= e ? 1 : 0, n = l(t, o, r);
+  return `A ${o} ${o} 0 ${c} ${u} ${n.x} ${n.y}`;
+}
+function M(o, e, t, r) {
+  const { outerStart: c, innerEnd: u, startAngle: n, endAngle: i } = o, a = m(e, n, i, r), s = m(t, i, n, r);
+  return `M ${c.x} ${c.y} ${a} L ${u.x} ${u.y} ${s}`;
+}
+function h(o, e, t, r, c) {
+  let u = 0;
+  return o.map((n) => {
+    const i = n.value / e * 360, a = u, s = a + i;
+    return u = s, {
+      item: n,
+      startAngle: a,
+      endAngle: s,
+      outerStart: l(a, t, c),
+      outerEnd: l(s, t, c),
+      innerEnd: l(s, r, c)
+    };
+  });
+}
+const x = ({
+  segments: o,
+  outerRadius: e,
+  innerRadius: t,
+  center: r,
+  onSegmentEnter: c,
+  onSegmentLeave: u
+}) => /* @__PURE__ */ $(p, { children: o.map((n) => /* @__PURE__ */ $(
+  "path",
+  {
+    fill: n.item.color,
+    d: M(n, e, t, r),
+    onMouseMove: (i) => c(n.item, i.clientX, i.clientY),
+    onMouseOut: u
+  },
+  n.item.id
+)) });
+export {
+  x as DonutSegments,
+  h as computeSegments
+};

package/dist/components/chart/donut-chart/donut-tooltip.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { ChartDataItem } from '../types';
+/** Payload passed to a custom tooltip renderer. */
+export interface DonutTooltipPayload {
+    item: ChartDataItem;
+    totalValue: number;
+    /** Formatted unit label, e.g. "tickets". Empty string when `getUnit` is not provided. */
+    unit: string;
+}
+/**
+ * Built-in tooltip renderer.
+ * Shows the item name, value with unit, and percentage of total.
+ */
+export declare const defaultTooltipRenderer: ({ item, totalValue, unit, }: DonutTooltipPayload) => ReactNode;
+/**
+ * Render the tooltip into `document.body` via a portal.
+ * This is a plain function (not a component) to avoid `ReactPortal` vs `ReactNode`
+ * type mismatch issues between `@types/react` and `@types/react-dom`.
+ */
+export declare function renderTooltipPortal(top: number, left: number, visible: boolean, payload: DonutTooltipPayload | null, renderer: (payload: DonutTooltipPayload) => ReactNode): ReactNode;

package/dist/components/chart/donut-chart/donut-tooltip.js

@@ -0,0 +1,37 @@
+import { jsxs as t, jsx as d } from "react/jsx-runtime";
+import { createPortal as c } from "react-dom";
+const a = ({
+  item: e,
+  totalValue: r,
+  unit: n
+}) => {
+  const o = r > 0 ? (e.value / r * 100).toFixed() : "0";
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      style: { backgroundColor: e.color },
+      className: "rounded-md p-3 shadow-lg whitespace-pre text-white font-medium text-sm",
+      children: [
+        /* @__PURE__ */ d("p", { children: e.name }),
+        /* @__PURE__ */ t("p", { children: [
+          e.value,
+          " ",
+          n,
+          " (",
+          o,
+          "%)"
+        ] })
+      ]
+    }
+  );
+};
+function p(e, r, n, o, l) {
+  return !n || !o ? null : c(
+    /* @__PURE__ */ d("div", { style: { top: e, left: r }, className: "fixed z-10 pointer-events-none", children: l(o) }),
+    document.body
+  );
+}
+export {
+  a as defaultTooltipRenderer,
+  p as renderTooltipPortal
+};

package/dist/components/chart/types.d.ts

@@ -0,0 +1,8 @@
+/** A single data entry shared across chart components (DonutChart, ChartLegend, etc.). */
+export interface ChartDataItem {
+    id: string;
+    name: string;
+    value: number;
+    /** Resolved CSS color string (hex, rgb, etc.). */
+    color: string;
+}

package/dist/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,6 @@
+import { InputHTMLAttributes } from 'react';
+interface Props extends InputHTMLAttributes<HTMLInputElement> {
+    indeterminate?: boolean;
+}
+export declare const Checkbox: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/checkbox/Checkbox.js

@@ -0,0 +1,72 @@
+import { jsxs as l, jsx as s } from "react/jsx-runtime";
+import { Check as d, Minus as b } from "@untitled-ui/icons-react";
+import { forwardRef as u } from "react";
+import { cn as t } from "../../utils/cn.js";
+const c = u(
+  ({ checked: a, indeterminate: o, className: r, ...e }, n) => {
+    const i = !!o && !a;
+    return /* @__PURE__ */ l(
+      "label",
+      {
+        className: t(
+          "relative size-5 shrink-0 block rounded-md bg-white transition-all ease-out border overflow-hidden",
+          a || i ? e.disabled ? "border-gray-v2-300" : "border-brand-v2-600" : "border-gray-v2-300",
+          { "bg-gray-v2-50": e.disabled },
+          r
+        ),
+        children: [
+          /* @__PURE__ */ s(
+            "input",
+            {
+              ref: n,
+              ...e,
+              checked: a,
+              className: t(
+                "absolute top-0 left-0 z-10 size-full rounded-md appearance-none",
+                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-v2-400",
+                e.disabled ? "cursor-not-allowed" : "cursor-pointer"
+              ),
+              type: "checkbox"
+            }
+          ),
+          /* @__PURE__ */ l(
+            "span",
+            {
+              className: t(
+                "relative size-full transition-all ease-out rounded-0.5 flex justify-center items-center",
+                { "bg-brand-v2-600": !e.disabled },
+                { "scale-[40%] opacity-0 rotate-12": !(a || i) }
+              ),
+              children: [
+                /* @__PURE__ */ s(
+                  d,
+                  {
+                    className: t(
+                      "absolute size-[70%] transition-all ease-out",
+                      e.disabled ? "text-gray-v2-300" : "text-white",
+                      { "scale-0": !a }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ s(
+                  b,
+                  {
+                    className: t(
+                      "absolute size-[70%] transition-all ease-out",
+                      e.disabled ? "text-gray-v2-300" : "text-white",
+                      { "scale-0": !i }
+                    )
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+c.displayName = "Checkbox";
+export {
+  c as Checkbox
+};

package/dist/components/checkbox/CheckboxTestStory.d.ts

@@ -0,0 +1,7 @@
+export declare function CheckboxUnchecked(): import("react").JSX.Element;
+export declare function CheckboxChecked(): import("react").JSX.Element;
+export declare function CheckboxIndeterminate(): import("react").JSX.Element;
+export declare function CheckboxCheckedAndIndeterminate(): import("react").JSX.Element;
+export declare function CheckboxDisabled(): import("react").JSX.Element;
+export declare function CheckboxDisabledChecked(): import("react").JSX.Element;
+export declare function CheckboxWithClickCounter(): import("react").JSX.Element;

package/dist/components/collapsible/Collapsible.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+interface Props {
+    expanded: boolean;
+    duration?: number;
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * Pure animated collapse container. No trigger, no label — just an outer
+ * grid whose row template animates between `0fr` and `1fr`, with a delayed
+ * `visibility` transition so collapsed content is unreachable by pointer,
+ * focus, and assistive tech once the fade finishes.
+ *
+ * Consumers own the toggle UI (e.g. `Accordion` wraps its own `role=button`
+ * label around this; `Card` keeps its collapse button in `CardHeader`).
+ *
+ * @param expanded - Whether the content is shown.
+ * @param duration - Transition duration in milliseconds (default: 300).
+ */
+export declare const Collapsible: ({ expanded, duration, className, children, }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/collapsible/Collapsible.js

@@ -0,0 +1,50 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useState as f, useEffect as c } from "react";
+import { cn as s } from "../../utils/cn.js";
+const g = ({
+  expanded: i,
+  duration: n = 300,
+  className: e,
+  children: a
+}) => {
+  const t = `${n}ms`, [l, o] = f(
+    i ? "visible" : "hidden"
+  );
+  return c(() => {
+    i && o("visible");
+  }, [i]), /* @__PURE__ */ r(
+    "div",
+    {
+      className: s(
+        "grid motion-safe:transition-[grid-template-rows] ease-out",
+        i ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
+        e
+      ),
+      style: { transitionDuration: t },
+      onTransitionEnd: (m) => {
+        m.propertyName === "grid-template-rows" && !i && o("hidden");
+      },
+      children: /* @__PURE__ */ r(
+        "div",
+        {
+          className: s("min-h-0", {
+            "invisible opacity-0": !i
+          }),
+          style: {
+            overflow: l,
+            transitionProperty: "opacity, visibility",
+            transitionDuration: `${t}, 0s`,
+            transitionTimingFunction: "ease-out",
+            // Delay visibility so it hides only after the fade finishes.
+            // When expanding, no delay — content becomes visible immediately.
+            transitionDelay: i ? "0s, 0s" : `0s, ${t}`
+          },
+          children: a
+        }
+      )
+    }
+  );
+};
+export {
+  g as Collapsible
+};

package/dist/components/combobox/Combobox.d.ts

@@ -92,5 +92,5 @@ interface Props {
  *
  * <Combobox value={value} onChange={handleChange} error={error} />
  */
-export declare const Combobox: ({ id, value, onChange, onBlur, getSuggestions, delimiter, placeholder, error, disabled, getBadgeProps, getLabel, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Combobox: ({ id, value, onChange, onBlur, getSuggestions, delimiter, placeholder, error, disabled, getBadgeProps, getLabel, }: Props) => import("react").JSX.Element;
 export {};

package/dist/components/divider/Divider.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+interface Props {
+    /** Optional content rendered in the middle of the divider. */
+    children?: ReactNode;
+    orientation?: "horizontal" | "vertical";
+    className?: string;
+}
+export declare const Divider: ({ children, orientation, className, }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/divider/Divider.js

@@ -0,0 +1,28 @@
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import { cn as e } from "../../utils/cn.js";
+const p = ({
+  children: t,
+  orientation: s = "horizontal",
+  className: a
+}) => s === "vertical" ? /* @__PURE__ */ r(
+  "span",
+  {
+    role: "separator",
+    "aria-orientation": "vertical",
+    className: e("self-stretch w-px bg-gray-v2-200", a)
+  }
+) : t ? /* @__PURE__ */ l(
+  "div",
+  {
+    role: "separator",
+    className: e("flex items-center gap-3 w-full", a),
+    children: [
+      /* @__PURE__ */ r("span", { className: "flex-1 h-px bg-gray-v2-200" }),
+      /* @__PURE__ */ r("span", { className: "text-sm font-medium text-gray-v2-600 whitespace-nowrap", children: t }),
+      /* @__PURE__ */ r("span", { className: "flex-1 h-px bg-gray-v2-200" })
+    ]
+  }
+) : /* @__PURE__ */ r("hr", { className: e("w-full border-0 h-px bg-gray-v2-200", a) });
+export {
+  p as Divider
+};

package/dist/components/drawer/Drawer.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export interface DrawerProps {
+    isOpen: boolean;
+    onOpenChange: (open: boolean) => void;
+    children?: ReactNode;
+    className?: string;
+}
+export declare const Drawer: ({ isOpen, onOpenChange, children, className, }: DrawerProps) => import('react').ReactPortal;

package/dist/components/drawer/Drawer.js

@@ -0,0 +1,68 @@
+import { jsx as a, jsxs as v } from "react/jsx-runtime";
+import { useRef as f, useCallback as h, useEffect as x } from "react";
+import { createPortal as g } from "react-dom";
+import { XClose as p } from "@untitled-ui/icons-react";
+import { Button as w } from "../button/Button.js";
+import { cn as d } from "../../utils/cn.js";
+import { useClickOutsideModal as E } from "../modal/use-click-outside-modal.js";
+const k = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])', A = ({
+  isOpen: e,
+  onOpenChange: r,
+  children: u,
+  className: m
+}) => {
+  const i = f(null), l = f(null), b = (t) => {
+    if (!(!e || l.current === null) && (t.key === "Escape" && r(!1), t.key === "Tab")) {
+      const o = Array.from(
+        l.current.querySelectorAll(k)
+      ).filter((y) => !y.closest("[inert]"));
+      if (o.length === 0) return;
+      const s = o[0], c = o[o.length - 1];
+      t.shiftKey ? document.activeElement === s && (t.preventDefault(), c.focus()) : document.activeElement === c && (t.preventDefault(), s.focus());
+    }
+  }, n = h(() => r(!1), [r]);
+  return E(n, i, [l]), x(() => (document.body.classList.toggle("overflow-hidden", e), () => document.body.classList.remove("overflow-hidden")), [e]), g(
+    /* @__PURE__ */ a(
+      "div",
+      {
+        ref: i,
+        className: d(
+          "fixed inset-0 flex items-center justify-end z-10 transition-all duration-300 bg-gray-v2-950/48",
+          { "invisible opacity-0": !e }
+        ),
+        onKeyDown: b,
+        children: /* @__PURE__ */ v(
+          "div",
+          {
+            ref: l,
+            role: "dialog",
+            "aria-modal": "true",
+            className: d(
+              "relative h-full w-104 bg-white flex flex-col overflow-hidden transition-all duration-300",
+              { "translate-x-full": !e },
+              m
+            ),
+            children: [
+              /* @__PURE__ */ a(
+                w,
+                {
+                  variant: "tertiary",
+                  color: "gray",
+                  className: "absolute right-0 top-0 m-4",
+                  onClick: n,
+                  "aria-label": "Close",
+                  children: /* @__PURE__ */ a(p, { className: "size-6 shrink-0 text-gray-v2-400" })
+                }
+              ),
+              u
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+};
+export {
+  A as Drawer
+};

package/dist/components/dropdown/Dropdown.d.ts

@@ -0,0 +1,45 @@
+import { DropdownProps } from './types';
+/**
+ * Generic standalone dropdown for action menus, context menus, or selection lists.
+ *
+ * Supports controlled (`open`) and uncontrolled (`defaultOpen`) open state.
+ * When `selected` is provided, the dropdown shows checkmarks (selection mode).
+ * Otherwise it behaves as a plain action menu.
+ *
+ * @example
+ * // Action menu
+ * <Dropdown
+ *   items={[
+ *     { id: "edit", label: "Edit", icon: <Edit01 /> },
+ *     { type: "divider" },
+ *     { id: "delete", label: "Delete", danger: true },
+ *   ]}
+ *   onSelect={(item) => handleAction(item.id)}
+ * >
+ *   <IconButton icon={<DotsVertical />} />
+ * </Dropdown>
+ *
+ * @example
+ * // Selection dropdown with checkmarks
+ * <Dropdown
+ *   items={statusOptions}
+ *   selected={currentStatus}
+ *   onSelect={(item) => setStatus(item.id)}
+ *   syncWidth
+ * >
+ *   <Button>{currentStatusLabel} <ChevronDown /></Button>
+ * </Dropdown>
+ *
+ * @example
+ * // Custom item rendering
+ * <Dropdown
+ *   items={[
+ *     { id: "high", label: "High", render: () => <Badge color="error">High</Badge> },
+ *     { id: "low", label: "Low", render: () => <Badge color="success">Low</Badge> },
+ *   ]}
+ *   onSelect={handleSelect}
+ * >
+ *   <Button>Priority</Button>
+ * </Dropdown>
+ */
+export declare const Dropdown: ({ items, onSelect, selected, open: openProp, defaultOpen, onOpenChange, placement, syncWidth, children, menuClassName, className, disabled, }: DropdownProps) => import("react").JSX.Element;