@cystackapp/ui 1.5.0 → 2.0.0

package/dist/components/textarea/Textarea.js

@@ -0,0 +1,36 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { cn as s } from "../../utils/cn.js";
+const e = {
+  default: "border-gray-v2-300 focus-within:border-brand-v2 focus-within:outline-brand-v2",
+  invalid: "border-error-v2-300 focus-within:border-error-v2 focus-within:outline-error-v2",
+  disabled: "bg-gray-v2-50 border-gray-v2-300 cursor-not-allowed"
+}, c = l(
+  ({ invalid: a, className: i, disabled: r, rows: n = 4, ...o }, d) => /* @__PURE__ */ t(
+    "span",
+    {
+      className: s(
+        "bg-white rounded-lg border shadow-xs flex px-3 py-2.5 text-md transition-all outline outline-transparent",
+        a ? e.invalid : e.default,
+        { [e.disabled]: r },
+        i
+      ),
+      children: /* @__PURE__ */ t(
+        "textarea",
+        {
+          ref: d,
+          disabled: r,
+          "aria-invalid": a,
+          rows: n,
+          className: "flex-1 min-w-0 bg-transparent outline-none resize-y text-gray-v2-900 placeholder:text-gray-v2-500 disabled:text-gray-v2-400 disabled:cursor-not-allowed disabled:resize-none",
+          ...o,
+          placeholder: r ? void 0 : o.placeholder
+        }
+      )
+    }
+  )
+);
+c.displayName = "Textarea";
+export {
+  c as Textarea
+};

package/dist/components/toast/ToastSlice.d.ts

@@ -7,5 +7,5 @@ interface Props {
 /** A slice of toast. Freshly out of the toaster, crunchy on the outside, soft and tender on the inside.
  * Or is it just notification's UI.
  */
-export declare const ToastSlice: ({ toast, observable }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const ToastSlice: ({ toast, observable }: Props) => import("react").JSX.Element;
 export {};

package/dist/components/toast/index.d.ts

@@ -1,4 +1,4 @@
 import { WrittenOnTheToast } from './types';
 /** Where we store the newly cooked toasts. When a toast is created, it will appear here. */
-export declare const Toaster: () => import("react/jsx-runtime").JSX.Element;
+export declare const Toaster: () => import("react").JSX.Element;
 export declare const createToast: (newToast: WrittenOnTheToast) => void;

package/dist/components/tooltip/Tooltip.d.ts

@@ -7,5 +7,5 @@ interface Props {
     disabled?: boolean;
     className?: string;
 }
-export declare const Tooltip: ({ content, children, position, disabled, className, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ content, children, position, disabled, className, }: Props) => import("react").JSX.Element;
 export {};

package/dist/filters/FilterDropdown.d.ts

@@ -0,0 +1,9 @@
+import { FilterOption } from './types';
+export interface FilterDropdownProps {
+    label: string;
+    value: string | undefined;
+    options: FilterOption[];
+    onChange: (value: string | undefined) => void;
+    disabled?: boolean;
+}
+export declare const FilterDropdown: ({ label, value, options, onChange, disabled, }: FilterDropdownProps) => import("react").JSX.Element;

package/dist/filters/FilterDropdown.js

@@ -0,0 +1,57 @@
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { XClose as b, ChevronDown as v } from "@untitled-ui/icons-react";
+import { cn as g } from "../utils/cn.js";
+import { Dropdown as p } from "../components/dropdown/Dropdown.js";
+const u = ({
+  label: n,
+  value: t,
+  options: i,
+  onChange: a,
+  disabled: o = !1
+}) => {
+  var s;
+  const c = i.map((e) => ({
+    id: e.value,
+    label: e.label,
+    icon: e.icon
+  })), d = ((s = i.find((e) => e.value === t)) == null ? void 0 : s.label) ?? t, l = t !== void 0;
+  return /* @__PURE__ */ r(
+    p,
+    {
+      items: c,
+      selected: t,
+      onSelect: (e) => a(e.id),
+      disabled: o,
+      children: /* @__PURE__ */ m(
+        "button",
+        {
+          type: "button",
+          disabled: o,
+          className: g(
+            "inline-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-gray-v2-700 shadow-xs transition-all outline-2 outline-transparent hover:bg-gray-v2-50 focus:outline-brand-v2-400",
+            o && "cursor-not-allowed bg-gray-v2-50 text-gray-v2-400 border-gray-v2-200"
+          ),
+          children: [
+            /* @__PURE__ */ r("span", { children: l ? `${n}: ${d}` : n }),
+            l ? /* @__PURE__ */ r(
+              "span",
+              {
+                role: "button",
+                "aria-label": "Clear filter",
+                tabIndex: -1,
+                onClick: (e) => {
+                  e.stopPropagation(), a(void 0);
+                },
+                className: "inline-flex shrink-0 items-center rounded text-gray-v2-500 hover:text-gray-v2-700",
+                children: /* @__PURE__ */ r(b, { className: "h-5 w-5" })
+              }
+            ) : /* @__PURE__ */ r(v, { className: "h-5 w-5 shrink-0 text-gray-v2-500" })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  u as FilterDropdown
+};

package/dist/filters/types.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export interface FilterOption {
+    value: string;
+    label: string;
+    icon?: ReactNode;
+}
+export interface ParamCodec<T> {
+    serialize: (value: T) => string | null;
+    deserialize: (raw: string) => T;
+    debounceMs?: number;
+}

package/dist/filters/url-params.d.ts

@@ -0,0 +1,5 @@
+import { ParamCodec } from './types';
+export declare const stringCodec: ParamCodec<string | undefined>;
+export declare const numberCodec: ParamCodec<number | undefined>;
+export declare const csvCodec: ParamCodec<string[]>;
+export declare const searchCodec: ParamCodec<string | undefined>;

package/dist/filters/url-params.js

@@ -0,0 +1,20 @@
+const i = {
+  serialize: (e) => e !== void 0 ? e : null,
+  deserialize: (e) => e
+}, s = {
+  serialize: (e) => e !== void 0 ? String(e) : null,
+  deserialize: (e) => Number(e)
+}, l = {
+  serialize: (e) => e.length > 0 ? e.join(",") : null,
+  deserialize: (e) => e.split(",")
+}, n = {
+  serialize: (e) => e || null,
+  deserialize: (e) => e,
+  debounceMs: 300
+};
+export {
+  l as csvCodec,
+  s as numberCodec,
+  n as searchCodec,
+  i as stringCodec
+};

package/dist/filters/use-filters.d.ts

@@ -0,0 +1,13 @@
+import { ParamCodec } from './types';
+interface UseFiltersOptions<T extends Record<string, unknown>> {
+    urlSync?: {
+        [K in keyof T]?: ParamCodec<T[K]>;
+    };
+}
+export declare function useFilters<T extends Record<string, unknown>>(defaults: T, options?: UseFiltersOptions<T>): {
+    params: T;
+    debouncedParams: T;
+    setParam: <K extends keyof T>(key: K, value: T[K]) => void;
+    reset: (keys?: Array<keyof T>) => void;
+};
+export {};

package/dist/filters/use-filters.js

@@ -0,0 +1,63 @@
+import { useState as f, useRef as y } from "react";
+function d(r, e, i) {
+  return e ? Object.fromEntries(
+    Object.keys(r).map((n) => {
+      const S = e[n], m = i.get(n), w = S && m !== null ? S.deserialize(m) : r[n];
+      return [n, w];
+    })
+  ) : r;
+}
+function h(r, e) {
+  const i = new URLSearchParams(window.location.search);
+  e !== null ? i.set(r, e) : i.delete(r);
+  const n = i.toString(), S = n ? `${window.location.pathname}?${n}` : window.location.pathname;
+  window.history.replaceState(null, "", S);
+}
+function R(r, e) {
+  const [i, n] = f(
+    () => d(
+      r,
+      e == null ? void 0 : e.urlSync,
+      new URLSearchParams(window.location.search)
+    )
+  ), [S, m] = f(
+    () => d(
+      r,
+      e == null ? void 0 : e.urlSync,
+      new URLSearchParams(window.location.search)
+    )
+  ), w = y({});
+  function b(l, s) {
+    var a;
+    n((o) => ({ ...o, [l]: s }));
+    const u = (a = e == null ? void 0 : e.urlSync) == null ? void 0 : a[l], c = u == null ? void 0 : u.debounceMs, t = String(l);
+    c !== void 0 ? (clearTimeout(w.current[t]), w.current[t] = setTimeout(() => {
+      m((o) => ({ ...o, [l]: s }));
+    }, c)) : m((o) => ({ ...o, [l]: s })), u && h(t, u.serialize(s));
+  }
+  function P(l) {
+    const s = l ?? Object.keys(r);
+    n((c) => {
+      const t = { ...c };
+      for (const a of s) t[a] = r[a];
+      return t;
+    }), m((c) => {
+      const t = { ...c };
+      for (const a of s) {
+        const o = String(a);
+        clearTimeout(w.current[o]), delete w.current[o], t[a] = r[a];
+      }
+      return t;
+    });
+    const u = e == null ? void 0 : e.urlSync;
+    if (u)
+      for (const c of s) {
+        const t = u[c];
+        t && h(String(c), t.serialize(r[c]));
+      }
+  }
+  return { params: i, debouncedParams: S, setParam: b, reset: P };
+}
+export {
+  R as useFilters
+};

package/dist/hooks/use-countdown.d.ts

@@ -0,0 +1,4 @@
+export declare function useCountdown(initialSeconds: number): {
+    secondsLeft: number;
+    reset: () => void;
+};

package/dist/hooks/use-countdown.js

@@ -0,0 +1,18 @@
+import { useState as u, useEffect as c, useCallback as f } from "react";
+function l(e) {
+  const [t, r] = u(e);
+  c(() => {
+    if (t === 0) return;
+    const n = setInterval(() => {
+      r((o) => o - 1);
+    }, 1e3);
+    return () => clearInterval(n);
+  }, [t]);
+  const s = f(() => {
+    r(e);
+  }, [e]);
+  return { secondsLeft: t, reset: s };
+}
+export {
+  l as useCountdown
+};

package/dist/i18n/resources.js

@@ -0,0 +1,23 @@
+import o from "../components/loading-state/locale/en.json.js";
+import n from "../components/notification/locale/en.json.js";
+import t from "../components/table/locale/en.json.js";
+import e from "../components/loading-state/locale/vi.json.js";
+import i from "../components/notification/locale/vi.json.js";
+import m from "../components/table/locale/vi.json.js";
+const l = {
+  en: {
+    // --- Flat namespace keys matching folder paths (for i18n-ally) ---
+    "components/loading-state": o,
+    "components/notification": n,
+    "components/table": t
+  },
+  vi: {
+    // --- Flat namespace keys matching folder paths (for i18n-ally) ---
+    "components/loading-state": e,
+    "components/notification": i,
+    "components/table": m
+  }
+};
+export {
+  l as resources
+};

package/dist/index.d.ts

@@ -34,4 +34,56 @@ export { Modal } from './components/modal/Modal';
 export { ModalHeaderIcon } from './components/modal/helpers/HeaderIcon';
 export { ModalTitle } from './components/modal/helpers/Title';
 export { useClickOutsideModal } from './components/modal/use-click-outside-modal';
+export { Accordion } from './components/accordion/Accordion';
+export { BackgroundPatternGrid } from './components/background-pattern/BackgroundPatternGrid';
+export { Breadcrumb } from './components/breadcrumb/Breadcrumb';
+export { Dropdown } from './components/dropdown/Dropdown';
+export type { DropdownItem, DropdownEntry } from './components/dropdown/types';
+export { Select } from './components/select/Select';
+export { FormField } from './components/form-field/FormField';
+export { FilterDropdown } from './filters/FilterDropdown';
+export type { FilterDropdownProps } from './filters/FilterDropdown';
+export type { FilterOption } from './filters/types';
+export { useFilters } from './filters/use-filters';
+export { stringCodec, searchCodec, numberCodec, csvCodec, } from './filters/url-params';
+export { Searchbox } from './components/searchbox/Searchbox';
+export { OperatingSystemIcon } from './components/operating-system-icon/OperatingSystemIcon';
+export { EmptyState } from './components/empty-state/EmptyState';
+export { Loader } from './components/loading-state/Loader';
+export { LoadingState } from './components/loading-state/LoadingState';
+export { Table } from './components/table/Table';
+export type { ColumnDef, PaginationState, SelectionState, SortState, } from './components/table/types';
+export { TableActionButton } from './components/table/TableActionButton';
+export type { TableActionItem } from './components/table/TableActionButton';
+export { ExpandableTable } from './components/table/expandable/ExpandableTable';
+export { Media } from './components/media/Media';
+export { NotificationBox, createNotification, } from './components/notification/index';
+export { DonutChart } from './components/chart/donut-chart/DonutChart';
+export { ChartLegend } from './components/chart/chart-legend/ChartLegend';
+export type { ChartDataItem } from './components/chart/types';
+export type { DonutTooltipPayload } from './components/chart/donut-chart/donut-tooltip';
+export { Drawer } from './components/drawer/Drawer';
+export type { DrawerProps } from './components/drawer/Drawer';
+export { Radio } from './components/radio/Radio';
+export { Textarea } from './components/textarea/Textarea';
+export { Tabs } from './components/tabs/Tabs';
+export type { TabItem, TabsVariant } from './components/tabs/Tabs';
+export { Avatar } from './components/avatar/Avatar';
+export type { AvatarSize } from './components/avatar/Avatar';
+export { Alert } from './components/alert/Alert';
+export type { AlertType } from './components/alert/Alert';
+export { Banner } from './components/banner/Banner';
+export { FeaturedIcon } from './components/featured-icon/FeaturedIcon';
+export { Skeleton } from './components/skeleton/Skeleton';
+export { ProgressBar } from './components/progress-bar/ProgressBar';
+export { Divider } from './components/divider/Divider';
+export { TagsInput } from './components/tags-input/TagsInput';
+export type { TagsInputProps } from './components/tags-input/TagsInput';
+export { KeyboardShortcutLabel } from './components/keyboard-shortcut-label/KeyboardShortcutLabel';
+export { useCountdown } from './hooks/use-countdown';
+export { useDebounce } from './utils/use-debounce';
+export { useToastList } from './components/toast/use-toast-list';
+export type { InternalToastProps } from './components/toast/types';
+export { resources } from './i18n/resources';
 export { cn } from './utils/cn';
+export { Observable } from './utils/observable';

package/dist/index.js

@@ -1,63 +1,145 @@
 import { Button as e } from "./components/button/Button.js";
-import { Badge as m } from "./components/badge/Badge.js";
+import { Badge as p } from "./components/badge/Badge.js";
 import { BadgeTag as x, TAG_ICON_COLOR_CLASSES as f, getBadgeAutoColor as a } from "./components/badge/variants/BadgeTag.js";
-import { BadgeMore as i } from "./components/badge/variants/BadgeMore.js";
-import { useResizeObserver as l } from "./hooks/element-shift/use-resize-observer.js";
-import { useScrollListener as u } from "./hooks/element-shift/use-scroll-listener.js";
+import { BadgeMore as n } from "./components/badge/variants/BadgeMore.js";
+import { useResizeObserver as d } from "./hooks/element-shift/use-resize-observer.js";
+import { useScrollListener as c } from "./hooks/element-shift/use-scroll-listener.js";
 import { useWindowResizeListener as b } from "./hooks/element-shift/use-window-resize-listener.js";
-import { useMutationObserver as c } from "./hooks/element-shift/use-mutation-observer.js";
+import { useMutationObserver as T } from "./hooks/element-shift/use-mutation-observer.js";
 import { useTransitionEndListener as S } from "./hooks/element-shift/use-transition-end-listener.js";
-import { useAnimationFrame as O } from "./hooks/element-shift/use-animation-frame.js";
-import { useElementShift as L } from "./hooks/element-shift/use-element-shift.js";
-import { Combobox as A } from "./components/combobox/Combobox.js";
-import { useValidatedCombobox as h } from "./components/combobox/use-validated-combobox.js";
-import { ErrorState as P } from "./components/error-state/ErrorState.js";
-import { PageTitle as _ } from "./components/page-title/PageTitle.js";
-import { Popover as w } from "./components/popover/Popover.js";
-import { usePopoverCoord as F } from "./components/popover/use-popover-coord.js";
-import { Checkbox as H } from "./components/checkbox/Checkbox.js";
-import { Switch as V } from "./components/switch/Switch.js";
-import { Tooltip as j } from "./components/tooltip/Tooltip.js";
-import { Collapsible as y } from "./components/collapsible/Collapsible.js";
-import { Card as J } from "./components/card/Card.js";
+import { useAnimationFrame as L } from "./hooks/element-shift/use-animation-frame.js";
+import { useElementShift as v } from "./hooks/element-shift/use-element-shift.js";
+import { Combobox as O } from "./components/combobox/Combobox.js";
+import { useValidatedCombobox as w } from "./components/combobox/use-validated-combobox.js";
+import { ErrorState as E } from "./components/error-state/ErrorState.js";
+import { PageTitle as I } from "./components/page-title/PageTitle.js";
+import { Popover as k } from "./components/popover/Popover.js";
+import { usePopoverCoord as y } from "./components/popover/use-popover-coord.js";
+import { Checkbox as _ } from "./components/checkbox/Checkbox.js";
+import { Switch as G } from "./components/switch/Switch.js";
+import { Tooltip as K } from "./components/tooltip/Tooltip.js";
+import { Collapsible as W } from "./components/collapsible/Collapsible.js";
+import { Card as q } from "./components/card/Card.js";
 import { Input as Q } from "./components/input/Input.js";
 import { Toaster as X, createToast as Y } from "./components/toast/index.js";
 import { Modal as $ } from "./components/modal/Modal.js";
 import { ModalHeaderIcon as ro } from "./components/modal/helpers/HeaderIcon.js";
 import { ModalTitle as to } from "./components/modal/helpers/Title.js";
-import { useClickOutsideModal as po } from "./components/modal/use-click-outside-modal.js";
-import { cn as fo } from "./utils/cn.js";
+import { useClickOutsideModal as mo } from "./components/modal/use-click-outside-modal.js";
+import { Accordion as fo } from "./components/accordion/Accordion.js";
+import { BackgroundPatternGrid as io } from "./components/background-pattern/BackgroundPatternGrid.js";
+import { Breadcrumb as so } from "./components/breadcrumb/Breadcrumb.js";
+import { Dropdown as co } from "./components/dropdown/Dropdown.js";
+import { Select as bo } from "./components/select/Select.js";
+import { FormField as To } from "./components/form-field/FormField.js";
+import { FilterDropdown as So } from "./filters/FilterDropdown.js";
+import { useFilters as Lo } from "./filters/use-filters.js";
+import { csvCodec as vo, numberCodec as Ao, searchCodec as Oo, stringCodec as Mo } from "./filters/url-params.js";
+import { Searchbox as Do } from "./components/searchbox/Searchbox.js";
+import { OperatingSystemIcon as Fo } from "./components/operating-system-icon/OperatingSystemIcon.js";
+import { EmptyState as Po } from "./components/empty-state/EmptyState.js";
+import { Loader as Ro } from "./components/loading-state/Loader.js";
+import { LoadingState as No } from "./components/loading-state/LoadingState.js";
+import { Table as zo } from "./components/table/Table.js";
+import { TableActionButton as Ho } from "./components/table/TableActionButton.js";
+import { ExpandableTable as Vo } from "./components/table/expandable/ExpandableTable.js";
+import { Media as jo } from "./components/media/Media.js";
+import { NotificationBox as Jo, createNotification as Qo } from "./components/notification/index.js";
+import { DonutChart as Xo } from "./components/chart/donut-chart/DonutChart.js";
+import { ChartLegend as Zo } from "./components/chart/chart-legend/ChartLegend.js";
+import { Drawer as or } from "./components/drawer/Drawer.js";
+import { Radio as er } from "./components/radio/Radio.js";
+import { Textarea as pr } from "./components/textarea/Textarea.js";
+import { Tabs as xr } from "./components/tabs/Tabs.js";
+import { Avatar as ar } from "./components/avatar/Avatar.js";
+import { Alert as nr } from "./components/alert/Alert.js";
+import { Banner as dr } from "./components/banner/Banner.js";
+import { FeaturedIcon as cr } from "./components/featured-icon/FeaturedIcon.js";
+import { Skeleton as br } from "./components/skeleton/Skeleton.js";
+import { ProgressBar as Tr } from "./components/progress-bar/ProgressBar.js";
+import { Divider as Sr } from "./components/divider/Divider.js";
+import { TagsInput as Lr } from "./components/tags-input/TagsInput.js";
+import { KeyboardShortcutLabel as vr } from "./components/keyboard-shortcut-label/KeyboardShortcutLabel.js";
+import { useCountdown as Or } from "./hooks/use-countdown.js";
+import { useDebounce as wr } from "./utils/use-debounce.js";
+import { useToastList as Er } from "./components/toast/use-toast-list.js";
+import { resources as Ir } from "./i18n/resources.js";
+import { cn as kr } from "./utils/cn.js";
+import { Observable as yr } from "./utils/observable.js";
 export {
-  m as Badge,
-  i as BadgeMore,
+  fo as Accordion,
+  nr as Alert,
+  ar as Avatar,
+  io as BackgroundPatternGrid,
+  p as Badge,
+  n as BadgeMore,
   x as BadgeTag,
+  dr as Banner,
+  so as Breadcrumb,
   e as Button,
-  J as Card,
-  H as Checkbox,
-  y as Collapsible,
-  A as Combobox,
-  P as ErrorState,
+  q as Card,
+  Zo as ChartLegend,
+  _ as Checkbox,
+  W as Collapsible,
+  O as Combobox,
+  Sr as Divider,
+  Xo as DonutChart,
+  or as Drawer,
+  co as Dropdown,
+  Po as EmptyState,
+  E as ErrorState,
+  Vo as ExpandableTable,
+  cr as FeaturedIcon,
+  So as FilterDropdown,
+  To as FormField,
   Q as Input,
+  vr as KeyboardShortcutLabel,
+  Ro as Loader,
+  No as LoadingState,
+  jo as Media,
   $ as Modal,
   ro as ModalHeaderIcon,
   to as ModalTitle,
-  _ as PageTitle,
-  w as Popover,
-  V as Switch,
+  Jo as NotificationBox,
+  yr as Observable,
+  Fo as OperatingSystemIcon,
+  I as PageTitle,
+  k as Popover,
+  Tr as ProgressBar,
+  er as Radio,
+  Do as Searchbox,
+  bo as Select,
+  br as Skeleton,
+  G as Switch,
   f as TAG_ICON_COLOR_CLASSES,
+  zo as Table,
+  Ho as TableActionButton,
+  xr as Tabs,
+  Lr as TagsInput,
+  pr as Textarea,
   X as Toaster,
-  j as Tooltip,
-  fo as cn,
+  K as Tooltip,
+  kr as cn,
+  Qo as createNotification,
   Y as createToast,
+  vo as csvCodec,
   a as getBadgeAutoColor,
-  O as useAnimationFrame,
-  po as useClickOutsideModal,
-  L as useElementShift,
-  c as useMutationObserver,
-  F as usePopoverCoord,
-  l as useResizeObserver,
-  u as useScrollListener,
+  Ao as numberCodec,
+  Ir as resources,
+  Oo as searchCodec,
+  Mo as stringCodec,
+  L as useAnimationFrame,
+  mo as useClickOutsideModal,
+  Or as useCountdown,
+  wr as useDebounce,
+  v as useElementShift,
+  Lo as useFilters,
+  T as useMutationObserver,
+  y as usePopoverCoord,
+  d as useResizeObserver,
+  c as useScrollListener,
+  Er as useToastList,
   S as useTransitionEndListener,
-  h as useValidatedCombobox,
+  w as useValidatedCombobox,
   b as useWindowResizeListener
 };