@cystackapp/ui 1.5.0 → 2.0.0

package/dist/components/searchbox/Searchbox.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+}
+export declare const Searchbox: ({ value, onChange, placeholder }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/searchbox/Searchbox.js

@@ -0,0 +1,15 @@
+import { jsx as r } from "react/jsx-runtime";
+import { SearchLg as m } from "@untitled-ui/icons-react";
+import { Input as p } from "../input/Input.js";
+const s = ({ value: o, onChange: t, placeholder: e }) => /* @__PURE__ */ r(
+  p,
+  {
+    prefix: /* @__PURE__ */ r(m, { className: "h-4 w-4 shrink-0 text-gray-v2-400" }),
+    value: o,
+    onChange: (a) => t(a.target.value),
+    placeholder: e
+  }
+);
+export {
+  s as Searchbox
+};

package/dist/components/select/Select.d.ts

@@ -0,0 +1,11 @@
+import { DropdownEntry, DropdownItem } from '../dropdown/types';
+interface Props {
+    id?: string;
+    items: DropdownEntry[];
+    selected: string;
+    onSelect: (item: DropdownItem) => void;
+    placeholder?: string;
+    disabled?: boolean;
+}
+export declare const Select: ({ id, items, selected, onSelect, placeholder, disabled, }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/select/Select.js

@@ -0,0 +1,44 @@
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { ChevronDown as m } from "@untitled-ui/icons-react";
+import { Dropdown as b } from "../dropdown/Dropdown.js";
+import { flattenItems as u } from "../dropdown/dropdown-utils.js";
+const x = ({
+  id: o,
+  items: r,
+  selected: a,
+  onSelect: s,
+  placeholder: i = "",
+  disabled: l = !1
+}) => {
+  var n;
+  const t = (n = u(r).find(
+    (d) => d.id === a
+  )) == null ? void 0 : n.label;
+  return /* @__PURE__ */ e(
+    b,
+    {
+      items: r,
+      selected: a,
+      onSelect: s,
+      syncWidth: !0,
+      disabled: l,
+      className: "w-full",
+      children: /* @__PURE__ */ c(
+        "button",
+        {
+          id: o,
+          type: "button",
+          disabled: l,
+          className: "w-full flex items-center justify-between gap-2 min-h-10 rounded-lg border border-gray-v2-300 bg-white px-3 py-2 text-sm font-semibold text-left text-gray-v2-700 shadow-xs transition-all outline-2 outline-transparent hover:bg-gray-v2-50 focus:outline-brand-v2-400 disabled:cursor-not-allowed disabled:bg-gray-v2-50 disabled:text-gray-v2-400 disabled:border-gray-v2-200",
+          children: [
+            t ? /* @__PURE__ */ e("span", { className: "truncate", title: t, children: t }) : /* @__PURE__ */ e("span", { className: "truncate text-gray-v2-400", children: i }),
+            /* @__PURE__ */ e(m, { className: "h-4 w-4 shrink-0 text-gray-v2-500" })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  x as Select
+};

package/dist/components/skeleton/Skeleton.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    className?: string;
+}
+/**
+ * Loading placeholder block. Size it with width/height utilities:
+ *
+ * @example
+ * ```tsx
+ * <Skeleton className="h-4 w-48" />
+ * <Skeleton className="size-10 rounded-full" />
+ * ```
+ */
+export declare const Skeleton: ({ className }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/skeleton/Skeleton.js

@@ -0,0 +1,12 @@
+import { jsx as o } from "react/jsx-runtime";
+import { cn as r } from "../../utils/cn.js";
+const n = ({ className: e }) => /* @__PURE__ */ o(
+  "span",
+  {
+    "aria-hidden": "true",
+    className: r("block animate-pulse rounded-md bg-gray-v2-100", e)
+  }
+);
+export {
+  n as Skeleton
+};

package/dist/components/switch/Switch.d.ts

@@ -3,5 +3,5 @@ interface Props extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "
     checked?: boolean;
     onChange?: (checked: boolean) => void;
 }
-export declare const Switch: ({ checked, onChange, className, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Switch: ({ checked, onChange, className, ...rest }: Props) => import("react").JSX.Element;
 export {};

package/dist/components/table/Table.d.ts

@@ -0,0 +1,32 @@
+import { To } from 'react-router-dom';
+import { ColumnDef, EmptyStateConfig, PaginationState, SelectionState, SortState } from './types';
+interface TableProps<TData> {
+    data: TData[] | undefined;
+    columns: ColumnDef<TData>[];
+    /** Returns the unique key for a row. */
+    rowKey: (row: TData) => string;
+    isLoading?: boolean;
+    selection?: SelectionState;
+    sort?: SortState;
+    pagination?: PaginationState;
+    /** Click handler for an entire row. Mutually exclusive with `getRowHref`. */
+    onRowClick?: (row: TData) => void;
+    /** When provided, rows render as `<Link>` elements navigating to this URL. */
+    getRowHref?: (row: TData) => To;
+    /** Configures the empty-state view. Falls back to a generic message. */
+    emptyState?: EmptyStateConfig;
+    /**
+     * When true, the table body height is calculated so the table never causes
+     * the page to scroll — it fits exactly within the remaining viewport height.
+     */
+    fitPageHeight?: boolean;
+    className?: string;
+}
+/**
+ * Data table with optional sorting, row selection, pagination, and row linking.
+ *
+ * Pass `fitPageHeight` to make the body height fill the remaining viewport
+ * without causing the page to scroll.
+ */
+export declare const Table: <TData>({ data, columns, rowKey, isLoading, selection, sort, pagination, onRowClick, getRowHref, emptyState, fitPageHeight, className, }: TableProps<TData>) => import("react").JSX.Element;
+export {};

package/dist/components/table/Table.js

@@ -0,0 +1,128 @@
+import { jsx as l, jsxs as f, Fragment as J } from "react/jsx-runtime";
+import { useMemo as K } from "react";
+import { useTranslation as L } from "react-i18next";
+import { Checkbox as O } from "../checkbox/Checkbox.js";
+import { EmptyState as Q } from "../empty-state/EmptyState.js";
+import { LoadingState as U } from "../loading-state/LoadingState.js";
+import { cn as p } from "../../utils/cn.js";
+import { TableCell as T } from "./TableCell.js";
+import { TableHeader as V } from "./TableHeader.js";
+import { TablePagination as W } from "./TablePagination.js";
+import { TableRow as X } from "./TableRow.js";
+import { buildGridTemplate as Y } from "./table-utils.js";
+import { useRowSelection as Z } from "./hooks/use-row-selection.js";
+import { useFitPageHeight as _ } from "./hooks/use-fit-page-height.js";
+const nr = ({
+  data: d = [],
+  columns: e,
+  rowKey: h,
+  isLoading: a,
+  selection: o,
+  sort: N,
+  pagination: v,
+  onRowClick: m,
+  getRowHref: s,
+  emptyState: r,
+  fitPageHeight: b,
+  className: t
+}) => {
+  const { t: k } = L("components/table"), { bodyRef: C, paginationRef: j, maxHeight: A } = _(), { isSelected: F, toggleRow: E, selectAllProps: G } = Z({
+    selection: o,
+    data: d,
+    rowKey: h,
+    isLoading: a
+  }), M = K(
+    () => Y(e, { hasSelection: !!o }),
+    [e, o]
+  ), P = a || d.length === 0;
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: p(
+        "bg-white border border-gray-v2-200 shadow-xs rounded-xl flex flex-col min-h-0 overflow-hidden",
+        t
+      ),
+      children: P ? /* @__PURE__ */ l("div", { className: "flex items-center justify-center", children: a ? /* @__PURE__ */ l(U, {}) : /* @__PURE__ */ l(
+        Q,
+        {
+          title: (r == null ? void 0 : r.title) ?? k("emptyState"),
+          supportingText: r == null ? void 0 : r.supportingText,
+          type: r == null ? void 0 : r.type,
+          buttons: r == null ? void 0 : r.actions
+        }
+      ) }) : /* @__PURE__ */ f(J, { children: [
+        /* @__PURE__ */ f(
+          "div",
+          {
+            className: "grid flex-1 min-h-0 overflow-x-auto",
+            style: { gridTemplateColumns: M },
+            children: [
+              /* @__PURE__ */ l(
+                V,
+                {
+                  columns: e,
+                  sort: N,
+                  selectAll: G
+                }
+              ),
+              /* @__PURE__ */ l(
+                "div",
+                {
+                  ref: b ? C : void 0,
+                  className: "grid grid-cols-subgrid col-span-full overflow-x-hidden overflow-y-auto",
+                  style: b ? { maxHeight: A } : void 0,
+                  children: d.map((n, u) => {
+                    var g;
+                    const c = h(n), x = F(c), q = u === d.length - 1, z = !!m || !!s, B = (g = o == null ? void 0 : o.disabledKeys) == null ? void 0 : g.includes(c);
+                    return /* @__PURE__ */ f(
+                      X,
+                      {
+                        href: s == null ? void 0 : s(n),
+                        onClick: m && !s ? () => m(n) : void 0,
+                        className: p(
+                          x && "bg-gray-v2-50",
+                          !q && "border-b border-gray-v2-200",
+                          z && "cursor-pointer"
+                        ),
+                        children: [
+                          o ? /* @__PURE__ */ l(T, { align: "center", children: /* @__PURE__ */ l(
+                            O,
+                            {
+                              checked: x,
+                              disabled: B,
+                              onClick: (i) => E(c, i)
+                            }
+                          ) }) : null,
+                          e.map((i, D) => /* @__PURE__ */ l(
+                            T,
+                            {
+                              align: i.align,
+                              className: i.cellClassName,
+                              children: i.cell(n, u)
+                            },
+                            i.id ? i.id : D
+                          ))
+                        ]
+                      },
+                      c
+                    );
+                  })
+                }
+              )
+            ]
+          }
+        ),
+        v ? /* @__PURE__ */ l(
+          W,
+          {
+            ref: b ? j : void 0,
+            pagination: v
+          }
+        ) : null
+      ] })
+    }
+  );
+};
+export {
+  nr as Table
+};

package/dist/components/table/TableActionButton.d.ts

@@ -0,0 +1,15 @@
+import { ComponentType, SVGProps } from 'react';
+export interface TableActionItem {
+    id: string;
+    label: string;
+    icon?: ComponentType<SVGProps<SVGSVGElement>>;
+    danger?: boolean;
+    disabled?: boolean;
+    onSelect: () => void;
+}
+interface Props {
+    items: TableActionItem[];
+    disabled?: boolean;
+}
+export declare const TableActionButton: ({ items, disabled }: Props) => import("react").JSX.Element | null;
+export {};

package/dist/components/table/TableActionButton.js

@@ -0,0 +1,50 @@
+import { jsx as e } from "react/jsx-runtime";
+import { DotsVertical as i } from "@untitled-ui/icons-react";
+import { cn as d } from "../../utils/cn.js";
+import { Dropdown as c } from "../dropdown/Dropdown.js";
+const u = ({ items: n, disabled: r = !1 }) => {
+  const l = n.map((o) => ({
+    id: o.id,
+    label: o.label,
+    icon: o.icon ? /* @__PURE__ */ e(o.icon, { className: "h-5 w-5" }) : void 0,
+    danger: o.danger,
+    disabled: o.disabled
+  }));
+  return n.length === 0 ? null : /* @__PURE__ */ e(
+    "div",
+    {
+      onClick: (o) => {
+        o.stopPropagation(), o.preventDefault();
+      },
+      children: /* @__PURE__ */ e(
+        c,
+        {
+          items: l,
+          onSelect: (o) => {
+            const t = n.find((a) => a.id === o.id);
+            t == null || t.onSelect();
+          },
+          placement: "bottomRight",
+          disabled: r,
+          children: /* @__PURE__ */ e(
+            "button",
+            {
+              "aria-label": "Actions",
+              disabled: r,
+              className: d(
+                "inline-flex items-center justify-center rounded-md p-2.5",
+                "text-gray-v2-400 hover:bg-gray-v2-50",
+                "focus:outline-2 focus:outline-brand-v2-400",
+                "disabled:text-gray-v2-300 disabled:cursor-not-allowed disabled:hover:bg-transparent"
+              ),
+              children: /* @__PURE__ */ e(i, { className: "h-5 w-5" })
+            }
+          )
+        }
+      )
+    }
+  );
+};
+export {
+  u as TableActionButton
+};

package/dist/components/table/TableCell.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { ColumnAlign } from './types';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    align?: ColumnAlign;
+    children?: ReactNode;
+}
+export declare const TableCell: ({ align, className, children, ...props }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/table/TableCell.js

@@ -0,0 +1,26 @@
+import { jsx as s } from "react/jsx-runtime";
+import { cn as n } from "../../utils/cn.js";
+const f = {
+  left: "justify-start text-left",
+  center: "justify-center text-center",
+  right: "justify-end text-right"
+}, l = ({
+  align: t = "left",
+  className: e,
+  children: r,
+  ...i
+}) => /* @__PURE__ */ s(
+  "div",
+  {
+    ...i,
+    className: n(
+      "bg-inherit p-3 text-sm text-gray-v2-600 flex items-center gap-x-2",
+      f[t],
+      e
+    ),
+    children: r
+  }
+);
+export {
+  l as TableCell
+};

package/dist/components/table/TableHeader.d.ts

@@ -0,0 +1,15 @@
+import { ColumnDef, SortState } from './types';
+interface SelectAllProps {
+    checked: boolean;
+    ready: boolean;
+    onChange: () => void;
+}
+interface Props<TData> {
+    columns: ColumnDef<TData>[];
+    sort?: SortState;
+    selectAll?: SelectAllProps;
+    /** Number of empty leading cells to render before the select-all and data columns. */
+    leadingCells?: number;
+}
+export declare const TableHeader: <TData>({ columns, sort, selectAll, leadingCells, }: Props<TData>) => import("react").JSX.Element;
+export {};

package/dist/components/table/TableHeader.js

@@ -0,0 +1,36 @@
+import { jsxs as g, jsx as d } from "react/jsx-runtime";
+import { Checkbox as l } from "../checkbox/Checkbox.js";
+import { TableHeaderCell as n } from "./TableHeaderCell.js";
+const C = ({
+  columns: o,
+  sort: r,
+  selectAll: a,
+  leadingCells: h = 0
+}) => /* @__PURE__ */ g("div", { className: "grid grid-cols-subgrid col-span-full rounded-t-xl overflow-hidden", children: [
+  Array.from({ length: h }).map((e, s) => /* @__PURE__ */ d(n, {}, `leading-${s}`)),
+  a ? /* @__PURE__ */ d(n, { align: "center", children: a.ready ? /* @__PURE__ */ d(
+    l,
+    {
+      checked: a.checked,
+      onClick: a.onChange
+    }
+  ) : null }) : null,
+  o.map((e, s) => {
+    const i = e.sortKeys && r ? e.sortKeys.asc === r.value ? 1 : e.sortKeys.desc === r.value ? -1 : 0 : void 0, t = () => {
+      !e.sortKeys || !r || (i === 0 ? r.onChange(e.sortKeys.asc) : i === 1 ? r.onChange(e.sortKeys.desc) : i === -1 && r.onChange(""));
+    };
+    return /* @__PURE__ */ d(
+      n,
+      {
+        align: e.align,
+        sort: i,
+        onClick: e.sortKeys && r ? t : void 0,
+        children: e.header
+      },
+      e.id ? e.id : s
+    );
+  })
+] });
+export {
+  C as TableHeader
+};

package/dist/components/table/TableHeaderCell.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { ColumnAlign } from './types';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    align?: ColumnAlign;
+    /** -1: desc, 0: not active, 1: asc, undefined: not sortable. */
+    sort?: -1 | 0 | 1;
+    children?: ReactNode;
+}
+export declare const TableHeaderCell: ({ align, sort, className, children, ...props }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/table/TableHeaderCell.js

@@ -0,0 +1,35 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { ChevronUp as c, ChevronDown as i, ChevronSelectorVertical as m } from "@untitled-ui/icons-react";
+import { cn as f } from "../../utils/cn.js";
+const x = {
+  left: "justify-start text-left",
+  center: "justify-center text-center",
+  right: "justify-end text-right"
+}, v = ({
+  align: s = "left",
+  sort: t,
+  className: n,
+  children: l,
+  ...o
+}) => {
+  const r = t !== void 0;
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      ...o,
+      className: f(
+        "bg-white text-xs font-semibold text-gray-v2 border-b border-gray-v2-200 p-3 flex items-center gap-1",
+        x[s],
+        r && "cursor-pointer select-none",
+        n
+      ),
+      children: [
+        l,
+        r ? /* @__PURE__ */ e("span", { className: "flex items-center text-gray-v2-400", children: t === 1 ? /* @__PURE__ */ e(c, { className: "h-3.5 w-3.5" }) : t === -1 ? /* @__PURE__ */ e(i, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ e(m, { className: "h-3.5 w-3.5" }) }) : null
+      ]
+    }
+  );
+};
+export {
+  v as TableHeaderCell
+};

package/dist/components/table/TablePagination.d.ts

@@ -0,0 +1,6 @@
+import { PaginationState } from './types';
+interface Props {
+    pagination: PaginationState;
+}
+export declare const TablePagination: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/table/TablePagination.js

@@ -0,0 +1,69 @@
+import { jsxs as r, jsx as n } from "react/jsx-runtime";
+import { ChevronDown as u } from "@untitled-ui/icons-react";
+import { forwardRef as h } from "react";
+import { useTranslation as f } from "react-i18next";
+import { Button as i } from "../button/Button.js";
+import { Dropdown as y } from "../dropdown/Dropdown.js";
+const v = [10, 25, 50, 100], x = h(
+  ({ pagination: d }, g) => {
+    const { t: e } = f("components/table"), { total: s, page: t, pageSize: o, onPageChange: l, onPageSizeChange: c } = d, m = Math.max(1, Math.ceil(s / o)), p = v.map((a) => ({
+      id: String(a),
+      label: e("perPage", { count: a })
+    }));
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        ref: g,
+        className: "flex items-center justify-between px-3 py-2 h-14.5 border-t border-gray-v2-200",
+        children: [
+          /* @__PURE__ */ r("div", { className: "text-sm font-medium text-gray-v2-700", children: [
+            /* @__PURE__ */ r("b", { children: [
+              e("numOfResults", { count: s }),
+              " |"
+            ] }),
+            " ",
+            e("pageNumber", { current: t, total: m })
+          ] }),
+          /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
+            t > 1 ? /* @__PURE__ */ n(
+              i,
+              {
+                variant: "secondary",
+                color: "gray",
+                size: "sm",
+                onClick: () => l(t - 1),
+                children: e("previous")
+              }
+            ) : null,
+            t < m ? /* @__PURE__ */ n(
+              i,
+              {
+                variant: "secondary",
+                color: "gray",
+                size: "sm",
+                onClick: () => l(t + 1),
+                children: e("next")
+              }
+            ) : null,
+            c ? /* @__PURE__ */ n(
+              y,
+              {
+                items: p,
+                selected: String(o),
+                onSelect: (a) => c(Number(a.id)),
+                children: /* @__PURE__ */ r(i, { variant: "secondary", color: "gray", size: "sm", children: [
+                  e("perPage", { count: o }),
+                  /* @__PURE__ */ n(u, { className: "h-4 w-4 text-gray-v2-400" })
+                ] })
+              }
+            ) : null
+          ] })
+        ]
+      }
+    );
+  }
+);
+x.displayName = "TablePagination";
+export {
+  x as TablePagination
+};

package/dist/components/table/TableRow.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { To } from 'react-router-dom';
+interface Props extends HTMLAttributes<HTMLElement> {
+    href?: To;
+    children?: ReactNode;
+}
+/**
+ * Renders a row as either a `<Link>` (when `href` is provided) or a `<div>`.
+ * Both forms participate in the parent grid via `grid-cols-subgrid`.
+ */
+export declare const TableRow: ({ href, className, ...props }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/table/TableRow.js

@@ -0,0 +1,9 @@
+import { jsx as i } from "react/jsx-runtime";
+import { Link as l } from "react-router-dom";
+import { cn as n } from "../../utils/cn.js";
+const t = "grid grid-cols-subgrid col-span-full relative no-underline bg-white text-current transition-colors duration-200 hover:bg-gray-v2-50 last:rounded-b-xl", d = ({ href: r, className: e, ...o }) => r !== void 0 ? (o.onClick !== void 0 && console.warn(
+  "TableRow: onClick is ignored when href is set. Use one or the other."
+), /* @__PURE__ */ i(l, { to: r, ...o, className: n(t, e) })) : /* @__PURE__ */ i("div", { ...o, className: n(t, e) });
+export {
+  d as TableRow
+};

package/dist/components/table/expandable/ExpandableTable.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { ColumnDef, SelectionState, SortState, PaginationState, EmptyStateConfig } from '../types';
+interface Props<TData> {
+    data?: TData[];
+    /** Returns the unique key for a row. */
+    rowKey: (row: TData) => string;
+    isLoading?: boolean;
+    columns: ColumnDef<TData>[];
+    selection?: SelectionState;
+    sort?: SortState;
+    pagination?: PaginationState;
+    /**
+     * When true, the table body height is calculated so the table never causes
+     * the page to scroll — it fits exactly within the remaining viewport height.
+     */
+    fitPageHeight?: boolean;
+    maxHeight?: string;
+    /** Configures the empty-state view. Falls back to a generic message. */
+    emptyState?: EmptyStateConfig;
+    /** Renders the expanded content below a row when it is toggled open. */
+    expandContent: (item: TData) => ReactNode;
+}
+/**
+ * Data table with accordion-style expandable rows.
+ *
+ * Pass `fitPageHeight` to make the body fill the remaining viewport height
+ * without causing the page to scroll.
+ */
+export declare const ExpandableTable: <TData>({ data, rowKey, isLoading, columns, selection, sort, pagination, fitPageHeight, maxHeight, emptyState, expandContent, }: Props<TData>) => import("react").JSX.Element;
+export {};