@cystackapp/ui 2.0.0 → 2.0.1

package/dist/components/dropdown/DropdownMenu.js

@@ -26,7 +26,7 @@ const z = ({
       role: "menu",
       "aria-activedescendant": e ?? void 0,
       className: $(
-        "z-20 rounded-lg border border-gray-v2-200 bg-white p-1 shadow-lg transition-all",
+        "z-50 rounded-lg border border-gray-v2-200 bg-white p-1 shadow-lg transition-all",
         "max-h-[40vh] overflow-auto",
         !c && "invisible pointer-events-none scale-95 opacity-0",
         b

package/dist/components/sidebar/SidebarSecondMenu.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+export interface SidebarSecondMenuItem {
+    key: string;
+    label: ReactNode;
+    to: string;
+    active?: boolean;
+}
+interface SidebarSecondMenuProps {
+    /** Where the back button navigates to (e.g. the product dashboard). */
+    backTo: string;
+    backLabel: ReactNode;
+    title: ReactNode;
+    items: SidebarSecondMenuItem[];
+    /** Called on every link click — lets a mobile drawer close on navigation. */
+    onNavigate?: () => void;
+    className?: string;
+}
+/**
+ * Contextual second-level sidebar panel — the settings-style menu used by the
+ * CyStack platform when entering an area with its own sub-navigation (account
+ * settings, workspace settings…). Renders a back link, a panel title and a
+ * vertical list of sub-pages. Pair it with a collapsed icon rail on the left.
+ *
+ * @example
+ * ```tsx
+ * <SidebarSecondMenu
+ *   backTo="/"
+ *   backLabel="Dashboard"
+ *   title="Account settings"
+ *   items={[
+ *     { key: "profile", label: "Personal details", to: "/settings/account", active: true },
+ *     { key: "security", label: "Security", to: "/settings/security" },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const SidebarSecondMenu: ({ backTo, backLabel, title, items, onNavigate, className, }: SidebarSecondMenuProps) => import("react").JSX.Element;
+export {};

package/dist/components/sidebar/SidebarSecondMenu.js

@@ -0,0 +1,50 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { FlipBackward as m } from "@untitled-ui/icons-react";
+import { Link as r } from "react-router-dom";
+import { cn as a } from "../../utils/cn.js";
+const b = ({
+  backTo: n,
+  backLabel: d,
+  title: i,
+  items: s,
+  onNavigate: t,
+  className: c
+}) => /* @__PURE__ */ l(
+  "div",
+  {
+    className: a(
+      "px-4 py-6 flex flex-col gap-4 w-full overflow-y-auto overflow-x-hidden",
+      c
+    ),
+    children: [
+      /* @__PURE__ */ e(r, { to: n, onClick: t, className: "no-underline", children: /* @__PURE__ */ l(
+        "button",
+        {
+          type: "button",
+          className: "flex items-center gap-2 w-fit rounded-lg font-semibold text-md text-brand-v2-700 hover:text-brand-v2-800 whitespace-nowrap",
+          children: [
+            /* @__PURE__ */ e(m, { className: "h-5 w-5 min-w-5" }),
+            d
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ e("span", { className: "text-lg font-semibold text-gray-v2-900 whitespace-nowrap", children: i }),
+      /* @__PURE__ */ e("div", { className: "flex flex-col gap-0.5", children: s.map((o) => /* @__PURE__ */ e(
+        r,
+        {
+          to: o.to,
+          onClick: t,
+          className: a(
+            "py-2 pl-3 pr-3 my-0.5 no-underline text-md font-semibold rounded-md transition-all",
+            o.active ? "bg-brand-v2-50 text-brand-v2-700" : "hover:bg-gray-v2-50 text-gray-v2-700 hover:text-gray-v2-700"
+          ),
+          children: o.label
+        },
+        o.key
+      )) })
+    ]
+  }
+);
+export {
+  b as SidebarSecondMenu
+};

package/dist/components/stat-banner-card/StatBannerCard.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+export type StatBannerColor = "blue" | "success" | "warning" | "error";
+interface StatBannerCardProps {
+    label: ReactNode;
+    /** `null` renders as "--" (no data). */
+    value: number | null;
+    color: StatBannerColor;
+    isPercentage?: boolean;
+    isLoading?: boolean;
+    className?: string;
+}
+/**
+ * Colored stat banner — the tinted hero card with a big number and a small
+ * accent marker on the right edge, used at the top of asset list pages on the
+ * CyStack platform (e.g. "Tổng số tên miền 1839").
+ *
+ * @example
+ * ```tsx
+ * <StatBannerCard label="Total domains" value={1839} color="blue" />
+ * <StatBannerCard label="Vulnerable" value={0} color="success" isPercentage />
+ * ```
+ */
+export declare const StatBannerCard: ({ label, value, color, isPercentage, isLoading, className, }: StatBannerCardProps) => import("react").JSX.Element;
+export {};

package/dist/components/stat-banner-card/StatBannerCard.js

@@ -0,0 +1,49 @@
+import { jsxs as n, jsx as e, Fragment as c } from "react/jsx-runtime";
+import { cn as t } from "../../utils/cn.js";
+import { Loader as m } from "../loading-state/Loader.js";
+const d = {
+  blue: "bg-blue-v2-100",
+  success: "bg-success-v2-100",
+  warning: "bg-warning-v2-100",
+  error: "bg-error-v2-100"
+}, g = {
+  blue: "bg-blue-v2",
+  success: "bg-success-v2",
+  warning: "bg-warning-v2",
+  error: "bg-error-v2"
+}, x = ({
+  label: a,
+  value: s,
+  color: r,
+  isPercentage: l = !1,
+  isLoading: i = !1,
+  className: o
+}) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: t(
+      "flex items-center justify-between rounded-xl text-gray-v2-900 transition-colors shadow-xs overflow-hidden relative",
+      d[r],
+      o
+    ),
+    children: [
+      /* @__PURE__ */ e("span", { className: "px-3 lg:px-6 text-lg font-medium", children: a }),
+      /* @__PURE__ */ e("span", { className: "px-3 lg:px-6 py-3 text-display-sm font-semibold", children: i ? /* @__PURE__ */ e("span", { className: "h-9.5 w-9.5 min-w-9.5 flex items-center justify-center", children: /* @__PURE__ */ e(m, { baseSize: 1.25, particleCount: 24 }) }) : s === null ? "--" : /* @__PURE__ */ n(c, { children: [
+        s.toFixed(),
+        l ? /* @__PURE__ */ e("span", { className: "text-display-xs", children: "%" }) : null
+      ] }) }),
+      /* @__PURE__ */ e(
+        "span",
+        {
+          className: t(
+            "absolute right-0 top-0 bottom-0 my-auto h-10 w-1.5 rounded-l-full",
+            g[r]
+          )
+        }
+      )
+    ]
+  }
+);
+export {
+  x as StatBannerCard
+};

package/dist/index.d.ts

@@ -70,6 +70,10 @@ 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';

package/dist/index.js

@@ -1,15 +1,15 @@
 import { Button as e } from "./components/button/Button.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 n } from "./components/badge/variants/BadgeMore.js";
-import { useResizeObserver as d } from "./hooks/element-shift/use-resize-observer.js";
+import { BadgeMore as i } from "./components/badge/variants/BadgeMore.js";
+import { useResizeObserver as s } 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 T } from "./hooks/element-shift/use-mutation-observer.js";
-import { useTransitionEndListener as S } from "./hooks/element-shift/use-transition-end-listener.js";
+import { useMutationObserver as S } from "./hooks/element-shift/use-mutation-observer.js";
+import { useTransitionEndListener as g } from "./hooks/element-shift/use-transition-end-listener.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 { Combobox as M } 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";
@@ -27,14 +27,14 @@ import { ModalHeaderIcon as ro } from "./components/modal/helpers/HeaderIcon.js"
 import { ModalTitle as to } from "./components/modal/helpers/Title.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 { BackgroundPatternGrid as no } 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 { FormField as So } from "./components/form-field/FormField.js";
+import { FilterDropdown as go } 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 { csvCodec as vo, numberCodec as Ao, searchCodec as Mo, stringCodec as Oo } 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";
@@ -52,48 +52,50 @@ 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";
+import { SidebarSecondMenu as ir } from "./components/sidebar/SidebarSecondMenu.js";
+import { StatBannerCard as sr } from "./components/stat-banner-card/StatBannerCard.js";
+import { Alert as cr } from "./components/alert/Alert.js";
+import { Banner as br } from "./components/banner/Banner.js";
+import { FeaturedIcon as Sr } from "./components/featured-icon/FeaturedIcon.js";
+import { Skeleton as gr } from "./components/skeleton/Skeleton.js";
+import { ProgressBar as Lr } from "./components/progress-bar/ProgressBar.js";
+import { Divider as vr } from "./components/divider/Divider.js";
+import { TagsInput as Mr } from "./components/tags-input/TagsInput.js";
+import { KeyboardShortcutLabel as wr } from "./components/keyboard-shortcut-label/KeyboardShortcutLabel.js";
+import { useCountdown as Er } from "./hooks/use-countdown.js";
+import { useDebounce as Ir } from "./utils/use-debounce.js";
+import { useToastList as kr } from "./components/toast/use-toast-list.js";
+import { resources as yr } from "./i18n/resources.js";
+import { cn as _r } from "./utils/cn.js";
+import { Observable as Gr } from "./utils/observable.js";
 export {
   fo as Accordion,
-  nr as Alert,
+  cr as Alert,
   ar as Avatar,
-  io as BackgroundPatternGrid,
+  no as BackgroundPatternGrid,
   p as Badge,
-  n as BadgeMore,
+  i as BadgeMore,
   x as BadgeTag,
-  dr as Banner,
+  br as Banner,
   so as Breadcrumb,
   e as Button,
   q as Card,
   Zo as ChartLegend,
   _ as Checkbox,
   W as Collapsible,
-  O as Combobox,
-  Sr as Divider,
+  M as Combobox,
+  vr 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,
+  Sr as FeaturedIcon,
+  go as FilterDropdown,
+  So as FormField,
   Q as Input,
-  vr as KeyboardShortcutLabel,
+  wr as KeyboardShortcutLabel,
   Ro as Loader,
   No as LoadingState,
   jo as Media,
@@ -101,45 +103,47 @@ export {
   ro as ModalHeaderIcon,
   to as ModalTitle,
   Jo as NotificationBox,
-  yr as Observable,
+  Gr as Observable,
   Fo as OperatingSystemIcon,
   I as PageTitle,
   k as Popover,
-  Tr as ProgressBar,
+  Lr as ProgressBar,
   er as Radio,
   Do as Searchbox,
   bo as Select,
-  br as Skeleton,
+  ir as SidebarSecondMenu,
+  gr as Skeleton,
+  sr as StatBannerCard,
   G as Switch,
   f as TAG_ICON_COLOR_CLASSES,
   zo as Table,
   Ho as TableActionButton,
   xr as Tabs,
-  Lr as TagsInput,
+  Mr as TagsInput,
   pr as Textarea,
   X as Toaster,
   K as Tooltip,
-  kr as cn,
+  _r as cn,
   Qo as createNotification,
   Y as createToast,
   vo as csvCodec,
   a as getBadgeAutoColor,
   Ao as numberCodec,
-  Ir as resources,
-  Oo as searchCodec,
-  Mo as stringCodec,
+  yr as resources,
+  Mo as searchCodec,
+  Oo as stringCodec,
   L as useAnimationFrame,
   mo as useClickOutsideModal,
-  Or as useCountdown,
-  wr as useDebounce,
+  Er as useCountdown,
+  Ir as useDebounce,
   v as useElementShift,
   Lo as useFilters,
-  T as useMutationObserver,
+  S as useMutationObserver,
   y as usePopoverCoord,
-  d as useResizeObserver,
+  s as useResizeObserver,
   c as useScrollListener,
-  Er as useToastList,
-  S as useTransitionEndListener,
+  kr as useToastList,
+  g as useTransitionEndListener,
   w as useValidatedCombobox,
   b as useWindowResizeListener
 };

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@cystackapp/ui",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "CyStack design system — reusable React UI components built with Tailwind CSS v4",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://git.cystack.org/platform/ui.git"
+    "url": "https://github.com/cystack/ui.git"
   },
   "type": "module",
   "main": "./dist/index.js",
@@ -40,10 +40,10 @@
   "peerDependencies": {
     "@untitled-ui/icons-react": "^0.1.4",
     "i18next": ">=23.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-i18next": "^15.0.0",
-    "react-router-dom": "^6.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-i18next": "^15.0.0 || ^16.0.0 || ^17.0.0",
+    "react-router-dom": "^6.0.0 || ^7.0.0"
   },
   "dependencies": {
     "clsx": "^2.1.1",