@cystackapp/ui 1.5.0 → 2.0.1

package/dist/components/tags-input/TagsInput.d.ts

@@ -0,0 +1,18 @@
+import { BadgeColor } from '../badge/badge-utils';
+export interface TagsInputProps {
+    tags: string[];
+    onTagsChange: (tags: string[]) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Marks the field as in an error state — switches the focus ring to error-v2. */
+    invalid?: boolean;
+    /** Fixed badge color for every tag. Defaults to a per-tag auto color. */
+    color?: BadgeColor;
+    /** Controlled text of the inner input (e.g. to drive an external search). */
+    value?: string;
+    onValueChange?: (value: string) => void;
+    /** Overrides the default removal behavior for a single tag. */
+    onRemove?: (tag: string) => void;
+    className?: string;
+}
+export declare const TagsInput: ({ tags, onTagsChange, placeholder, disabled, invalid, color, value, onValueChange, onRemove, className, }: TagsInputProps) => import("react").JSX.Element;

package/dist/components/tags-input/TagsInput.js

@@ -0,0 +1,78 @@
+import { jsxs as S, jsx as p } from "react/jsx-runtime";
+import { useRef as T, useState as A } from "react";
+import { cn as B } from "../../utils/cn.js";
+import { Badge as D } from "../badge/Badge.js";
+import { getBadgeAutoColor as E } from "../badge/variants/BadgeTag.js";
+const l = {
+  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"
+}, _ = ({
+  tags: t,
+  onTagsChange: s,
+  placeholder: m,
+  disabled: o,
+  invalid: v,
+  color: h,
+  value: a,
+  onValueChange: n,
+  onRemove: c,
+  className: x
+}) => {
+  const d = T(null), [g, w] = A(""), i = a !== void 0 ? a : g, u = (r) => {
+    w(r), n == null || n(r);
+  }, f = (r) => {
+    o || (c ? c(t[r]) : s(t.filter((e, k) => k !== r)));
+  }, y = (r) => {
+    var e;
+    r.target === r.currentTarget && ((e = d.current) == null || e.focus());
+  }, b = (r) => {
+    if (r.key === "Enter") {
+      r.preventDefault();
+      const e = i.trim();
+      if (e.length === 0) return;
+      s([...t, e]), u("");
+    }
+    r.key === "Backspace" && i.length === 0 && t.length > 0 && f(t.length - 1);
+  };
+  return /* @__PURE__ */ S(
+    "div",
+    {
+      onClick: y,
+      className: B(
+        "bg-white rounded-lg border shadow-xs flex flex-wrap items-center gap-1.5 px-3 py-2 min-h-10 text-md transition-all outline outline-transparent cursor-text",
+        v ? l.invalid : l.default,
+        { [l.disabled]: o },
+        x
+      ),
+      children: [
+        t.map((r, e) => /* @__PURE__ */ p(
+          D,
+          {
+            color: h ?? E(r),
+            size: "sm",
+            onClose: o ? void 0 : () => f(e),
+            children: r
+          },
+          `${r}-${e}`
+        )),
+        /* @__PURE__ */ p(
+          "input",
+          {
+            ref: d,
+            type: "text",
+            disabled: o,
+            value: i,
+            onChange: (r) => u(r.target.value),
+            onKeyDown: b,
+            placeholder: o ? void 0 : m,
+            className: "flex-1 min-w-16 bg-transparent outline-none text-gray-v2-900 placeholder:text-gray-v2-500 disabled:text-gray-v2-400 disabled:cursor-not-allowed"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  _ as TagsInput
+};

package/dist/components/tags-input/TagsInputTestStory.d.ts

@@ -0,0 +1,3 @@
+export declare function TagsInputBasic({ disabled }: {
+    disabled?: boolean;
+}): import("react").JSX.Element;

package/dist/components/textarea/Textarea.d.ts

@@ -0,0 +1,7 @@
+import { TextareaHTMLAttributes } from 'react';
+interface Props extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Marks the textarea as in an error state — switches the focus ring to error-v2. */
+    invalid?: boolean;
+}
+export declare const Textarea: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLTextAreaElement>>;
+export {};

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,60 @@ 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 { SidebarSecondMenu } from './components/sidebar/SidebarSecondMenu';
+export type { SidebarSecondMenuItem } from './components/sidebar/SidebarSecondMenu';
+export { StatBannerCard } from './components/stat-banner-card/StatBannerCard';
+export type { StatBannerColor } from './components/stat-banner-card/StatBannerCard';
+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';