@cystackapp/ui 1.4.1 → 2.0.0

package/dist/components/keyboard-shortcut-label/KeyboardShortcutLabel.js

@@ -0,0 +1,18 @@
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import { cn as m } from "../../utils/cn.js";
+const x = ({ name: e, Icon: r, className: t }) => /* @__PURE__ */ s(
+  "div",
+  {
+    className: m(
+      "px-1 py-px flex items-center gap-1 text-xs font-medium text-gray-v2 border border-gray-v2-200 rounded-md",
+      t
+    ),
+    children: [
+      e,
+      r && /* @__PURE__ */ o(r, { className: "size-3.5 shrink-0" })
+    ]
+  }
+);
+export {
+  x as KeyboardShortcutLabel
+};

package/dist/components/loading-state/Loader.d.ts

@@ -0,0 +1,20 @@
+interface LoaderProps {
+    /** Size of the loader in rem. Default 4. */
+    baseSize?: number;
+    /** Number of dot particles. Default 16. */
+    particleCount?: number;
+    /** Override the default brand color with a custom hex/rgb value. */
+    color?: string;
+}
+/**
+ * Rotating-dot spinner. Can be used standalone or inside other components.
+ *
+ * @example
+ * ```tsx
+ * <Loader />                          // default 4 rem, 16 dots
+ * <Loader baseSize={1} />             // small inline spinner
+ * <Loader color="#e53e3e" />          // custom color
+ * ```
+ */
+export declare const Loader: ({ baseSize, particleCount, color, }: LoaderProps) => import("react").JSX.Element;
+export {};

package/dist/components/loading-state/Loader.js

@@ -0,0 +1,38 @@
+import { jsx as e } from "react/jsx-runtime";
+const n = 0.1, m = 0.1, s = 1, I = ({
+  baseSize: r = 4,
+  particleCount: t = 16,
+  color: l
+}) => {
+  const a = {
+    position: "absolute",
+    height: r * n + "rem",
+    width: r * m + "rem",
+    left: r * (0.5 - m / 2) + "rem",
+    top: r * (0.5 - n) / 4 + "rem",
+    transformOrigin: r * m / 2 + "rem " + r * 0.45 + "rem"
+  };
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: "relative",
+      style: { height: r + "rem", width: r + "rem" },
+      children: Array.from({ length: t }, (d, o) => /* @__PURE__ */ e(
+        "span",
+        {
+          className: "animate-pseudo-rotate h-2 w-2 rounded-full bg-brand-v2-600",
+          style: {
+            ...a,
+            backgroundColor: l,
+            rotate: 360 / t * o + "deg",
+            animationDelay: -(s / t) * o + "s"
+          }
+        },
+        o
+      ))
+    }
+  );
+};
+export {
+  I as Loader
+};

package/dist/components/loading-state/LoadingState.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    className?: string;
+    text?: string;
+}
+/**
+ * Loading state for CyStack Platform, with a little bit of fun.
+ *
+ * @example
+ * ```tsx
+ * <LoadingState />
+ * <LoadingState className="min-h-screen" />
+ * ```
+ */
+export declare const LoadingState: ({ className, text }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/loading-state/LoadingState.js

@@ -0,0 +1,47 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { useState as p, useMemo as g, useEffect as x } from "react";
+import { useTranslation as v } from "react-i18next";
+import { cn as N } from "../../utils/cn.js";
+import { Loader as c } from "./Loader.js";
+const T = 5e3, L = ({ className: l, text: o }) => {
+  const { t: i } = v("components/loading-state"), [m, d] = p(!1), f = g(() => {
+    const t = {
+      normal: 9994,
+      cat: 6
+    }, r = Object.keys(t), u = r.reduce((a, h) => a + t[h], 0);
+    let s = Math.floor(Math.random() * u);
+    for (const a of r)
+      if (s -= t[a], s < 0) return a;
+    return "normal";
+  }, []);
+  return x(() => {
+    const t = setTimeout(() => {
+      d(!0);
+    }, T);
+    return () => clearTimeout(t);
+  }, []), /* @__PURE__ */ e(
+    "div",
+    {
+      className: N(
+        "flex h-40 w-full items-center justify-center py-12",
+        l
+      ),
+      children: f === "cat" ? /* @__PURE__ */ n("div", { className: "relative", children: [
+        /* @__PURE__ */ e(
+          "img",
+          {
+            src: "/loading-cat.jpg",
+            className: "max-h-40 overflow-hidden object-cover"
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "absolute left-18 top-18", children: /* @__PURE__ */ e(c, { baseSize: 1 }) })
+      ] }) : /* @__PURE__ */ n("div", { className: "flex flex-col items-center gap-5", children: [
+        /* @__PURE__ */ e(c, {}),
+        o ? /* @__PURE__ */ e("span", { className: "text-lg font-medium text-gray-v2-700", children: o }) : m ? /* @__PURE__ */ e("span", { className: "text-lg font-medium text-gray-v2-700", children: i("loading") }) : null
+      ] })
+    }
+  );
+};
+export {
+  L as LoadingState
+};

package/dist/components/loading-state/locale/en.json.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  "loading": "Loading..."
+}
+;
+
+export default _default;

package/dist/components/loading-state/locale/en.json.js

@@ -0,0 +1,7 @@
+const n = "Loading...", o = {
+  loading: n
+};
+export {
+  o as default,
+  n as loading
+};

package/dist/components/loading-state/locale/vi.json.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  "loading": "Đang tải..."
+}
+;
+
+export default _default;

package/dist/components/loading-state/locale/vi.json.js

@@ -0,0 +1,7 @@
+const t = "Đang tải...", n = {
+  loading: t
+};
+export {
+  n as default,
+  t as loading
+};

package/dist/components/media/Media.d.ts

@@ -0,0 +1,7 @@
+import { ObjectHTMLAttributes } from 'react';
+interface Props extends Omit<ObjectHTMLAttributes<HTMLObjectElement>, "data"> {
+    data?: HTMLObjectElement["data"] | null;
+}
+/** Extends a HTML Object tag since it can display multiple types of media with fallback. */
+export declare const Media: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLObjectElement>>;
+export {};

package/dist/components/media/Media.js

@@ -0,0 +1,25 @@
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+import { cn as i } from "../../utils/cn.js";
+import { Image02 as t } from "@untitled-ui/icons-react";
+const l = r(
+  ({ ...e }, c) => e.data ? /* @__PURE__ */ a(
+    "object",
+    {
+      type: "image/png",
+      ref: c,
+      ...e,
+      data: e.data,
+      className: i(
+        "flex justify-center items-center size-7 shrink-0 object-cover",
+        e.className
+      ),
+      children: e.children ? e.children : /* @__PURE__ */ a(t, { className: "size-full text-gray-v2-400" })
+    },
+    e.data
+  ) : e.children ? e.children : /* @__PURE__ */ a("div", { className: i("size-7 shrink-0 object-cover", e.className), children: /* @__PURE__ */ a(t, { className: "size-full text-gray-v2-400" }) })
+);
+l.displayName = "Media";
+export {
+  l as Media
+};

package/dist/components/modal/Modal.d.ts

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

package/dist/components/modal/Modal.js

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

package/dist/components/modal/helpers/HeaderIcon.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode, SVGProps } from 'react';
+type IconType = "brand" | "gray" | "success" | "warning" | "error";
+interface Props {
+    type?: IconType;
+    Icon: (props: SVGProps<SVGSVGElement>) => ReactNode;
+}
+export declare const ModalHeaderIcon: ({ type, Icon }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/modal/helpers/HeaderIcon.js

@@ -0,0 +1,32 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import "react";
+import { cn as n } from "../../../utils/cn.js";
+import a from "./circles-sm.svg.js";
+const t = {
+  brand: "bg-brand-v2-100 border-brand-v2-50",
+  gray: "bg-gray-v2-100 border-gray-v2-50",
+  success: "bg-success-v2-100 border-success-v2-50",
+  warning: "bg-warning-v2-100 border-warning-v2-50",
+  error: "bg-error-v2-100 border-error-v2-50"
+}, c = {
+  brand: "text-brand-v2-600",
+  gray: "text-gray-v2-600",
+  success: "text-success-v2-600",
+  warning: "text-warning-v2-600",
+  error: "text-error-v2-600"
+}, g = ({ type: r = "brand", Icon: s }) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: n(
+      "relative h-13 w-13 min-w-13 flex items-center justify-center rounded-full border-8",
+      t[r]
+    ),
+    children: [
+      /* @__PURE__ */ e(s, { className: n("h-6 w-6 min-w-6", c[r]) }),
+      /* @__PURE__ */ e(a, { className: "absolute h-84 w-84 min-w-84 pointer-events-none" })
+    ]
+  }
+);
+export {
+  g as ModalHeaderIcon
+};

package/dist/components/modal/helpers/Title.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+interface Props {
+    children: ReactNode;
+}
+export declare const ModalTitle: ({ children }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/modal/helpers/Title.js

@@ -0,0 +1,9 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useModalContext as r } from "../modal-context.js";
+const i = ({ children: t }) => {
+  const o = r();
+  return /* @__PURE__ */ e("h2", { id: o, className: "text-lg font-semibold text-gray-v2-900", children: t });
+};
+export {
+  i as ModalTitle
+};

package/dist/components/modal/helpers/circles-sm.svg.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const r = (t) => /* @__PURE__ */ e.createElement("svg", { height: 336, width: 336, viewBox: "0 0 336 336", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("radialGradient", { id: "radialGradient-mask", cx: "50%", cy: "50%", r: "50%", fx: "50%", fy: "50%" }, /* @__PURE__ */ e.createElement("stop", { offset: "0%", stopColor: "white" }), /* @__PURE__ */ e.createElement("stop", { offset: "100%", stopColor: "black" })), /* @__PURE__ */ e.createElement("mask", { id: "background-pattern-decorative-mask" }, /* @__PURE__ */ e.createElement("rect", { x: 0, y: 0, height: "100%", width: "100%", fill: "url(#radialGradient-mask)" }))), /* @__PURE__ */ e.createElement("g", { mask: "url(#background-pattern-decorative-mask)" }, /* @__PURE__ */ e.createElement("circle", { cx: 168, cy: 168, r: 168, stroke: "#E9EAEB", fill: "transparent" }), /* @__PURE__ */ e.createElement("circle", { cx: 168, cy: 168, r: 144, stroke: "#E9EAEB", fill: "transparent" }), /* @__PURE__ */ e.createElement("circle", { cx: 168, cy: 168, r: 120, stroke: "#E9EAEB", fill: "transparent" }), /* @__PURE__ */ e.createElement("circle", { cx: 168, cy: 168, r: 96, stroke: "#E9EAEB", fill: "transparent" }), /* @__PURE__ */ e.createElement("circle", { cx: 168, cy: 168, r: 72, stroke: "#E9EAEB", fill: "transparent" }), /* @__PURE__ */ e.createElement("circle", { cx: 168, cy: 168, r: 48, stroke: "#E9EAEB", fill: "transparent" })));
+export {
+  r as default
+};

package/dist/components/modal/modal-context.d.ts

@@ -0,0 +1,2 @@
+export declare const ModalContext: import('react').Context<string | undefined>;
+export declare function useModalContext(): string | undefined;

package/dist/components/modal/modal-context.js

@@ -0,0 +1,9 @@
+import { createContext as t, useContext as o } from "react";
+const e = t(void 0);
+function r() {
+  return o(e);
+}
+export {
+  e as ModalContext,
+  r as useModalContext
+};

package/dist/components/modal/use-click-outside-modal.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare const useClickOutsideModal: (onClose: () => void, overlayRef: RefObject<HTMLDivElement>, modalRefs: RefObject<HTMLElement>[]) => void;

package/dist/components/modal/use-click-outside-modal.js

@@ -0,0 +1,15 @@
+import { useEffect as u } from "react";
+const d = (e, n, r) => {
+  u(() => {
+    function i(o) {
+      const { target: t } = o;
+      t instanceof Node && n.current && n.current.contains(t) && r.every((c) => !c.current || !c.current.contains(t)) && e();
+    }
+    return window.addEventListener("mousedown", i), () => {
+      window.removeEventListener("mousedown", i);
+    };
+  }, [n, r, e]);
+};
+export {
+  d as useClickOutsideModal
+};

package/dist/components/notification/NotificationBanner.d.ts

@@ -0,0 +1,9 @@
+import { InternalToastProps } from '../toast/types';
+import { Observable } from '../../utils/observable';
+interface Props {
+    toast: InternalToastProps;
+    observable: Observable<InternalToastProps>;
+}
+/** Just notification's UI. */
+export declare const NotificationBanner: ({ toast, observable }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/notification/NotificationBanner.js

@@ -0,0 +1,97 @@
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { useState as g, useRef as u, useMemo as x, useCallback as l, useEffect as y } from "react";
+import { useTranslation as v } from "react-i18next";
+import { XClose as w } from "@untitled-ui/icons-react";
+import { iconByNotificationType as b } from "./icons.js";
+const H = ({ toast: e, observable: i }) => {
+  var d, m;
+  const { t: c } = v("components/notification"), [p, f] = g(!1), n = u(null), s = x(() => ["peach"].includes(e.type) ? "gradient" : "normal", [e.type]), a = l(
+    (t) => {
+      i.notify({ ...t, status: "dismissed" });
+    },
+    [i]
+  ), h = l(
+    (t) => {
+      i.notify({ ...t, status: "destroyed" });
+    },
+    [i]
+  );
+  return y(() => {
+    f(!0);
+  }, []), /* @__PURE__ */ o(
+    "div",
+    {
+      ref: n,
+      style: p ? e.status === "dismissed" ? (
+        // The last state before toast is destroyed
+        {
+          height: 0,
+          minHeight: 0,
+          opacity: 0,
+          paddingTop: 0,
+          paddingBottom: 0,
+          borderWidth: 0
+        }
+      ) : (
+        // The stable state
+        {
+          height: (m = n.current) == null ? void 0 : m.offsetHeight,
+          paddingTop: "1rem",
+          paddingBottom: "1rem",
+          borderWidth: "1px"
+        }
+      ) : (
+        // The first state: before toast is mounted
+        {
+          transform: "translate(0, 100%)",
+          height: (d = n.current) == null ? void 0 : d.offsetHeight,
+          paddingTop: "1rem",
+          paddingBottom: "1rem",
+          borderWidth: "1px"
+        }
+      ),
+      className: "v2 relative px-4 w-[80vw] flex items-start gap-4 rounded-lg duration-300 ease-out overflow-hidden border-gray-v2-300 bg-white shadow-xs",
+      onTransitionEnd: (t) => {
+        t.target === t.currentTarget && t.propertyName === "height" && h(e);
+      },
+      children: [
+        b[e.type],
+        /* @__PURE__ */ o("div", { className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ o("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ r("span", { className: "text-sm font-semibold text-gray-v2-700 min-h-[1em] wrap-break-words", children: e.message }),
+            e.detail ? /* @__PURE__ */ r(
+              "span",
+              {
+                className: `text-sm min-h-[1em] wrap-break-words ${s === "gradient" ? "text-white" : "text-gray-v2-600"}`,
+                children: e.detail
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ r(
+            "button",
+            {
+              className: "text-sm font-semibold text-brand-v2-700 hover:text-brand-v2-800 w-fit",
+              onClick: () => {
+                a(e);
+              },
+              children: c("button.ok")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r(
+          "button",
+          {
+            className: `absolute m-2 top-2 right-2 flex text-gray-v2-400 ${s === "gradient" ? "bg-transparent hover:bg-transparent" : void 0}`,
+            onClick: () => {
+              a(e);
+            },
+            children: /* @__PURE__ */ r(w, { className: "h-5 w-5 min-w-5" })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  H as NotificationBanner
+};

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

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+import { ToastType } from '../toast/types';
+export declare const iconByNotificationType: {
+    [S in ToastType]: ReactNode;
+};

package/dist/components/notification/icons.js

@@ -0,0 +1,29 @@
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { InfoCircle as a, AlertTriangle as c, AlertCircle as n, CheckCircle as i } from "@untitled-ui/icons-react";
+const r = ({
+  colorClassName: s,
+  children: l
+}) => /* @__PURE__ */ o("div", { className: "relative flex", children: [
+  l,
+  /* @__PURE__ */ e(
+    "span",
+    {
+      className: "absolute -top-[0.21rem] -left-[0.21rem] h-[1.67rem] w-[1.67rem] rounded-full border-[1.67px] opacity-30 " + s
+    }
+  ),
+  /* @__PURE__ */ e(
+    "span",
+    {
+      className: "absolute -top-[0.47rem] -left-[0.47rem] h-[2.19rem] w-[2.19rem] rounded-full border-[1.67px] opacity-10 " + s
+    }
+  )
+] }), d = {
+  success: /* @__PURE__ */ e(r, { colorClassName: "border-success-v2-600", children: /* @__PURE__ */ e(i, { className: "h-5 w-5 min-w-5 text-success-v2-600" }) }),
+  error: /* @__PURE__ */ e(r, { colorClassName: "border-error-v2-600", children: /* @__PURE__ */ e(n, { className: "h-5 w-5 min-w-5 text-error-v2-600" }) }),
+  warning: /* @__PURE__ */ e(r, { colorClassName: "border-warning-v2-600", children: /* @__PURE__ */ e(c, { className: "h-5 w-5 min-w-5 text-warning-v2-600" }) }),
+  info: /* @__PURE__ */ e(r, { colorClassName: "border-blue-v2-600", children: /* @__PURE__ */ e(a, { className: "h-5 w-5 min-w-5 text-blue-v2-600" }) }),
+  peach: /* @__PURE__ */ e(r, { colorClassName: "border-brand-v2-600", children: /* @__PURE__ */ e(a, { className: "h-5 w-5 min-w-5 text-brand-v2-600" }) })
+};
+export {
+  d as iconByNotificationType
+};

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

@@ -0,0 +1,4 @@
+import { WrittenOnTheToast } from '../toast/types';
+/** Where we store notifications that requires user interaction. */
+export declare const NotificationBox: () => import("react").JSX.Element;
+export declare const createNotification: (newToast: WrittenOnTheToast) => void;

package/dist/components/notification/index.js

@@ -0,0 +1,26 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useToastList as n } from "../toast/use-toast-list.js";
+import { Observable as r } from "../../utils/observable.js";
+import { NotificationBanner as a } from "./NotificationBanner.js";
+const s = () => window.isSecureContext ? crypto.randomUUID() : crypto.getRandomValues(new Uint32Array(1))[0].toString(), e = new r(), p = () => {
+  const o = n(e);
+  return /* @__PURE__ */ i("div", { className: "flex flex-col gap-2", children: o.map((t) => /* @__PURE__ */ i(
+    a,
+    {
+      toast: t,
+      observable: e
+    },
+    `toast-${t.id}`
+  )) });
+}, d = (o) => {
+  const t = {
+    ...o,
+    id: s(),
+    status: "stable"
+  };
+  e.notify(t);
+};
+export {
+  p as NotificationBox,
+  d as createNotification
+};

package/dist/components/notification/locale/en.json.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+  "button": {
+    "ok": "Ok, got it"
+  }
+}
+;
+
+export default _default;

package/dist/components/notification/locale/en.json.js

@@ -0,0 +1,7 @@
+const t = { ok: "Ok, got it" }, o = {
+  button: t
+};
+export {
+  t as button,
+  o as default
+};

package/dist/components/notification/locale/vi.json.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+  "button": {
+    "ok": "Đã hiểu"
+  }
+}
+;
+
+export default _default;

package/dist/components/notification/locale/vi.json.js

@@ -0,0 +1,7 @@
+const o = { ok: "Đã hiểu" }, t = {
+  button: o
+};
+export {
+  o as button,
+  t as default
+};

package/dist/components/operating-system-icon/OperatingSystemIcon.d.ts

@@ -0,0 +1,6 @@
+import { SVGAttributes } from 'react';
+interface Props extends SVGAttributes<SVGSVGElement> {
+    osName: string | null | undefined;
+}
+export declare const OperatingSystemIcon: ({ osName, ...props }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/operating-system-icon/OperatingSystemIcon.js

@@ -0,0 +1,19 @@
+import { jsx as i } from "react/jsx-runtime";
+import m from "./assets/logo-windows-10.svg.js";
+import p from "./assets/logo-apple.svg.js";
+import g from "./assets/logo-ubuntu.svg.js";
+import d from "./assets/logo-android.svg.js";
+import { Monitor01 as u } from "@untitled-ui/icons-react";
+import { keyTypeguard as f } from "../../utils/key-typeguard.js";
+const r = {
+  windows: m,
+  darwin: p,
+  ubuntu: g,
+  android: d
+}, l = ({ osName: o, ...t }) => {
+  const n = o != null && f(o, r) ? r[o] : u;
+  return /* @__PURE__ */ i(n, { ...t });
+};
+export {
+  l as OperatingSystemIcon
+};

package/dist/components/operating-system-icon/assets/logo-android.svg.js

@@ -0,0 +1,5 @@
+import * as C from "react";
+const t = (e) => /* @__PURE__ */ C.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ C.createElement("path", { d: "M23.933 18.3905C23.9251 18.3416 23.9176 18.2933 23.9094 18.2449C23.7018 16.9981 23.297 15.792 22.71 14.6714C22.1354 13.5734 21.3938 12.5703 20.5116 11.6978C19.8674 11.0599 19.1531 10.4962 18.3822 10.0173C18.3868 10.0098 18.3907 10.0016 18.3953 9.99398C18.6374 9.57762 18.8802 9.16173 19.1224 8.74518L19.8326 7.5255C20.0031 7.23374 20.1731 6.94123 20.3424 6.64947C20.4282 6.50228 20.4784 6.33729 20.4891 6.16749C20.4999 5.99769 20.4709 5.82772 20.4045 5.67097C20.3136 5.45478 20.155 5.27358 19.9523 5.15427C19.8092 5.06985 19.6489 5.0185 19.4832 5.004C19.414 4.99815 19.3444 4.99872 19.2753 5.00568C19.1021 5.02327 18.9357 5.08149 18.7895 5.17556C18.6434 5.26963 18.5217 5.39687 18.4345 5.54683C18.2645 5.83869 18.0944 6.1311 17.9247 6.42286L17.2145 7.64263C16.9723 8.05909 16.7295 8.47498 16.4874 8.89143C16.461 8.93689 16.4343 8.98224 16.4079 9.02835C16.3712 9.0137 16.3348 8.99914 16.2981 8.98523C14.9631 8.47843 13.5148 8.20123 12.0009 8.20123C11.9595 8.20123 11.9185 8.20123 11.8768 8.20179C10.5308 8.21514 9.23756 8.44819 8.031 8.86633C7.89188 8.91469 7.75372 8.96578 7.61663 9.01958C7.59206 8.97711 7.56675 8.93455 7.54256 8.89199C7.30041 8.47554 7.05759 8.05965 6.81553 7.64319L6.10528 6.42333C5.93484 6.13157 5.76478 5.83915 5.59538 5.5473C5.49058 5.36689 5.33627 5.21999 5.15055 5.12384C4.96483 5.02769 4.75541 4.98628 4.54688 5.00447C4.38087 5.01849 4.22025 5.06994 4.07719 5.15492C3.92009 5.24772 3.78872 5.37806 3.69497 5.53414C3.66862 5.57838 3.64509 5.62439 3.62541 5.67162C3.52271 5.91412 3.51058 6.1852 3.59119 6.43583C3.61547 6.50919 3.64687 6.58087 3.68709 6.65013C3.85746 6.9419 4.02743 7.23391 4.197 7.52615C4.43419 7.93281 4.67081 8.33937 4.90763 8.74592C5.14969 9.16238 5.39213 9.57827 5.63419 9.99473C5.63606 9.99827 5.6385 10.0017 5.64028 10.0052C5.15315 10.3065 4.68814 10.6419 4.24875 11.0088C3.46278 11.6655 2.76347 12.4186 2.1675 13.2502C1.84262 13.7034 1.55003 14.1787 1.29188 14.6726C0.846133 15.5237 0.504838 16.425 0.275344 17.3572C0.203327 17.6512 0.142316 17.9477 0.0924375 18.2461C0.0842813 18.2945 0.0767813 18.3434 0.0692813 18.3917C0.0421861 18.5665 0.0190864 18.7419 0 18.9177H24C23.9808 18.7412 23.9579 18.5658 23.9312 18.3916L23.933 18.3905Z", fill: "#34A853" }), /* @__PURE__ */ C.createElement("path", { d: "M18.2431 15.6134C18.7233 15.2952 18.7931 14.5588 18.3988 13.9689C18.0048 13.3788 17.2961 13.1586 16.8161 13.4768C16.3359 13.795 16.2659 14.5314 16.6602 15.1214C17.0543 15.7114 17.7632 15.9317 18.2431 15.6134ZM7.36137 15.1234C7.75568 14.5335 7.68574 13.7972 7.20555 13.4789C6.72527 13.1606 6.0168 13.3809 5.62249 13.9708C5.22846 14.5609 5.2983 15.2972 5.7783 15.6155C6.25849 15.9338 6.96733 15.7135 7.36137 15.1234Z", fill: "#202124" }));
+export {
+  t as default
+};