@cystackapp/ui 1.4.1 → 2.0.0

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

@@ -0,0 +1,11 @@
+import { InternalToastProps } from './types';
+import { Observable } from '../../utils/observable';
+interface Props {
+    toast: InternalToastProps;
+    observable: Observable<InternalToastProps>;
+}
+/** 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.Element;
+export {};

package/dist/components/toast/ToastSlice.js

@@ -0,0 +1,103 @@
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import { useState as f, useRef as y, useMemo as T, useCallback as p, useEffect as l } from "react";
+import { XClose as x } from "@untitled-ui/icons-react";
+import { Button as w } from "../button/Button.js";
+import { iconByToastType as B, styleToastType as N } from "./icons.js";
+import { cn as m } from "../../utils/cn.js";
+const k = 4e3, W = ({ toast: e, observable: r }) => {
+  var a, d;
+  const [h, g] = f(!1), n = y(null), o = T(() => ["peach"].includes(e.type) ? "gradient" : "normal", [e.type]), s = p(
+    (t) => {
+      r.notify({ ...t, status: "dismissed" });
+    },
+    [r]
+  ), u = p(
+    (t) => {
+      r.notify({ ...t, status: "destroyed" });
+    },
+    [r]
+  );
+  return l(() => {
+    g(!0);
+  }, []), l(() => {
+    const t = setTimeout(() => {
+      s(e);
+    }, k);
+    return () => clearTimeout(t);
+  }, [e, s]), /* @__PURE__ */ c(
+    "div",
+    {
+      ref: n,
+      style: h ? e.status === "dismissed" ? (
+        // The last state before toast is destroyed
+        {
+          height: 0,
+          minHeight: 0,
+          opacity: 0,
+          marginBottom: 0,
+          paddingTop: 0,
+          paddingBottom: 0,
+          borderWidth: 0
+        }
+      ) : (
+        // The stable state
+        {
+          height: (d = n.current) == null ? void 0 : d.offsetHeight,
+          marginBottom: "0.75rem",
+          paddingTop: "0.75rem",
+          paddingBottom: "0.75rem",
+          borderWidth: "1px"
+        }
+      ) : (
+        // The first state: before toast is mounted
+        {
+          transform: "translate(0, -100%)",
+          height: (a = n.current) == null ? void 0 : a.offsetHeight,
+          marginBottom: "0.75rem",
+          paddingTop: "0.75rem",
+          paddingBottom: "0.75rem",
+          borderWidth: "1px"
+        }
+      ),
+      className: m(
+        "px-6 flex items-center gap-3 rounded-md duration-300 ease-out shadow-sm-01 min-h-16 overflow-hidden",
+        N[e.type],
+        o === "gradient" && "text-white"
+      ),
+      onTransitionEnd: (t) => {
+        t.target === t.currentTarget && t.propertyName === "height" && u(e);
+      },
+      children: [
+        B[e.type],
+        /* @__PURE__ */ c("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ i("span", { className: "text-md font-medium w-80 min-h-[1em] wrap-break-words", children: e.message }),
+          e.detail ? /* @__PURE__ */ i(
+            "span",
+            {
+              className: m(
+                "text-sm w-80 min-h-[1em] wrap-break-words line-clamp-3",
+                o === "gradient" ? "text-white" : "text-gray-v2-500"
+              ),
+              children: e.detail
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ i(
+          w,
+          {
+            variant: "tertiary",
+            color: "gray",
+            onClick: () => s(e),
+            className: m(
+              o === "gradient" && "text-white hover:bg-transparent"
+            ),
+            children: /* @__PURE__ */ i(x, { className: "size-5 shrink-0 text-gray-v2-400" })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  W as ToastSlice
+};

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

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { ToastType } from './types';
+export declare const styleToastType: {
+    [T in ToastType]: string;
+};
+export declare const iconByToastType: {
+    [T in ToastType]: ReactNode;
+};

package/dist/components/toast/icons.js

@@ -0,0 +1,19 @@
+import { jsx as e } from "react/jsx-runtime";
+import { InfoCircle as r, XCircle as s, CheckCircle as i } from "@untitled-ui/icons-react";
+const a = {
+  success: "bg-white border-success-v2-500",
+  error: "bg-white border-error-v2-500",
+  warning: "bg-white border-warning-v2-500",
+  info: "bg-white border-blue-v2-500",
+  peach: "bg-gradient-to-br from-[#d74874] to-[#da805f] border-transparent"
+}, c = {
+  success: /* @__PURE__ */ e(i, { className: "text-success-v2-500 size-6 shrink-0" }),
+  error: /* @__PURE__ */ e(s, { className: "text-error-v2-500 size-6 shrink-0" }),
+  warning: /* @__PURE__ */ e(r, { className: "text-warning-v2-500 size-6 shrink-0" }),
+  info: /* @__PURE__ */ e(r, { className: "text-blue-v2-500 size-6 shrink-0" }),
+  peach: /* @__PURE__ */ e(r, { className: "text-white size-6 shrink-0" })
+};
+export {
+  c as iconByToastType,
+  a as styleToastType
+};

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

@@ -0,0 +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.Element;
+export declare const createToast: (newToast: WrittenOnTheToast) => void;

package/dist/components/toast/index.js

@@ -0,0 +1,35 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useEffect as a } from "react";
+import { ToastSlice as n } from "./ToastSlice.js";
+import { useToastList as i } from "./use-toast-list.js";
+import { Observable as c } from "../../utils/observable.js";
+const l = () => window.isSecureContext ? crypto.randomUUID() : crypto.getRandomValues(new Uint32Array(1))[0].toString(), e = new c(), s = /* @__PURE__ */ new Set(), b = () => {
+  const o = i(e);
+  return a(() => {
+    const t = Symbol();
+    return s.add(t), () => {
+      s.delete(t);
+    };
+  }, []), /* @__PURE__ */ r("div", { className: "flex flex-col", children: o.map((t) => /* @__PURE__ */ r(
+    n,
+    {
+      toast: t,
+      observable: e
+    },
+    `toast-${t.id}`
+  )) });
+}, T = (o) => {
+  process.env.NODE_ENV !== "production" && s.size === 0 && console.warn(
+    "[Toaster] createToast was called but no <Toaster> is mounted. This toast will be lost."
+  );
+  const t = {
+    ...o,
+    id: l(),
+    status: "stable"
+  };
+  e.notify(t);
+};
+export {
+  b as Toaster,
+  T as createToast
+};

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

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export type ToastType = "error" | "warning" | "success" | "info" | "peach";
+type ToastStatus = "stable" | "dismissed" | "destroyed";
+/** The name is Bon, Jambon. */
+export interface WrittenOnTheToast {
+    type: ToastType;
+    message: string;
+    detail?: ReactNode;
+}
+export interface InternalToastProps extends WrittenOnTheToast {
+    id: string;
+    status: ToastStatus;
+}
+export {};

package/dist/components/toast/use-toast-list.d.ts

@@ -0,0 +1,4 @@
+import { InternalToastProps } from './types';
+import { Observable } from '../../utils/observable';
+/** Returns the list of current existing toasts. */
+export declare const useToastList: (observable: Observable<InternalToastProps>) => InternalToastProps[];

package/dist/components/toast/use-toast-list.js

@@ -0,0 +1,27 @@
+import { useState as d, useEffect as f } from "react";
+import { flushSync as m } from "react-dom";
+const c = (i) => {
+  const [u, r] = d([]);
+  return f(() => i.subscribe((s) => {
+    if (s.status === "dismissed") {
+      r(
+        (t) => t.map(
+          (e) => e.id === s.id ? { ...e, status: "dismissed" } : e
+        )
+      );
+      return;
+    }
+    if (s.status === "destroyed") {
+      r((t) => t.filter((e) => e.id !== s.id));
+      return;
+    }
+    setTimeout(() => {
+      m(() => {
+        r((t) => [...t, s]);
+      });
+    });
+  }), [i]), u;
+};
+export {
+  c as useToastList
+};

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
+};