@sruim/nexus-design 0.0.1

package/dist/ui/table/index.js

@@ -0,0 +1,70 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../utils/config.js';
+import '@radix-ui/react-portal';
+import '../avatar/index.js';
+import '../button.js';
+import '../carousel/index.js';
+import '../checkbox/index.js';
+import '../collapsible/index.js';
+import '../dialog/confirm.js';
+import '../dialog/dialog.js';
+import '../drawer.js';
+import '../form.js';
+import '../input-otp.js';
+import '../label.js';
+import * as React from 'react';
+import '../popover/index.js';
+import '../progress.js';
+import '../select/index.js';
+import '../slider/index.js';
+import '../sonner.js';
+import '../switch.js';
+import '../tabs/index.js';
+import '../toggle/toggle.js';
+import '../toggle/toggle-group.js';
+import '../tooltip/index.js';
+import * as reactTable from '@tanstack/react-table';
+export { reactTable as TanstackTable };
+
+const TableRoot = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("table", { ref, className: cn("w-full caption-bottom text-3.5", className), ...props })
+);
+TableRoot.displayName = "Table";
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("bg-surface-secondary", className), ...props }));
+TableHeader.displayName = "TableHeader";
+const TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
+TableBody.displayName = "TableBody";
+const TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tfoot", { ref, className, ...props }));
+TableFooter.displayName = "TableFooter";
+const TableRow = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "tr",
+    {
+      ref,
+      className: cn(
+        "border-b border-border-dim transition-colors duration-fast ease-smooth hover:bg-surface-hover",
+        className
+      ),
+      ...props
+    }
+  )
+);
+TableRow.displayName = "TableRow";
+const TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("th", { className: cn("font-normal text-start", className), ref, ...props }));
+TableHead.displayName = "TableHead";
+const TableCell = React.forwardRef((props, ref) => /* @__PURE__ */ jsx("td", { ref, ...props }));
+TableCell.displayName = "TableCell";
+const TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("caption", { ref, className: cn("mt-4 text-3.5", className), ...props }));
+TableCaption.displayName = "TableCaption";
+const Table = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(TableRoot, { ...props, ref }));
+Table.displayName = "Table";
+Table.Root = TableRoot;
+Table.Body = TableBody;
+Table.Caption = TableCaption;
+Table.Cell = TableCell;
+Table.Footer = TableFooter;
+Table.Head = TableHead;
+Table.Header = TableHeader;
+Table.Row = TableRow;
+
+export { Table };

package/dist/ui/tabs/index.d.ts

@@ -0,0 +1,12 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as React from 'react';
+interface TTabs extends React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>> {
+    List: typeof List;
+    Trigger: typeof Trigger;
+    Content: typeof Content;
+}
+declare const List: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Trigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const Content: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Tabs: TTabs;
+export { Tabs };

package/dist/ui/tabs/index.js

@@ -0,0 +1,60 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../utils/config.js';
+import '@radix-ui/react-portal';
+import '../avatar/index.js';
+import '../button.js';
+import '../carousel/index.js';
+import '../checkbox/index.js';
+import '../collapsible/index.js';
+import '../dialog/confirm.js';
+import '../dialog/dialog.js';
+import '../drawer.js';
+import '../form.js';
+import '../input-otp.js';
+import '../label.js';
+import * as React from 'react';
+import '../popover/index.js';
+import '../progress.js';
+import '../select/index.js';
+import '../slider/index.js';
+import '../sonner.js';
+import '../switch.js';
+import '../table/index.js';
+import '../toggle/toggle.js';
+import '../toggle/toggle-group.js';
+import '../tooltip/index.js';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+const List = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.List,
+  {
+    ref,
+    className: cn("flex items-center justify-center", className),
+    ...props
+  }
+));
+List.displayName = TabsPrimitive.List.displayName;
+const Trigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Trigger,
+  {
+    ref,
+    className: cn("focus-visible:outline-none", className),
+    ...props
+  }
+));
+Trigger.displayName = TabsPrimitive.Trigger.displayName;
+const Content = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Content,
+  {
+    ref,
+    className: cn("focus-visible:outline-none", className),
+    ...props
+  }
+));
+Content.displayName = TabsPrimitive.Content.displayName;
+const Tabs = TabsPrimitive.Root;
+Tabs.List = List;
+Tabs.Trigger = Trigger;
+Tabs.Content = Content;
+
+export { Tabs };

package/dist/ui/toggle/index.d.ts

@@ -0,0 +1,2 @@
+export * from './toggle';
+export * from './toggle-group';

package/dist/ui/toggle/toggle-group.d.ts

@@ -0,0 +1,9 @@
+import { Variant } from './toggle';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import * as React from 'react';
+interface IToggleGroup extends React.ForwardRefExoticComponent<React.PropsWithoutRef<React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>> & React.RefAttributes<React.ComponentRef<typeof ToggleGroupPrimitive.Root>>> {
+    Item: typeof Item;
+}
+declare const ToggleGroup: IToggleGroup;
+declare const Item: React.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & Variant & React.RefAttributes<HTMLButtonElement>>;
+export { ToggleGroup };

package/dist/ui/toggle/toggle-group.js

@@ -0,0 +1,54 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../utils/config.js';
+import '@radix-ui/react-portal';
+import '../avatar/index.js';
+import '../button.js';
+import '../carousel/index.js';
+import '../checkbox/index.js';
+import '../collapsible/index.js';
+import '../dialog/confirm.js';
+import '../dialog/dialog.js';
+import '../drawer.js';
+import '../form.js';
+import '../input-otp.js';
+import '../label.js';
+import * as React from 'react';
+import '../popover/index.js';
+import '../progress.js';
+import '../select/index.js';
+import '../slider/index.js';
+import '../sonner.js';
+import '../switch.js';
+import '../table/index.js';
+import '../tabs/index.js';
+import { BaseStyle, ButtonStyle, NavigationStyle, iconClassName } from './toggle.js';
+import '../tooltip/index.js';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+
+const ToggleGroup = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToggleGroupPrimitive.Root,
+  {
+    ref,
+    className: cn("flex items-center justify-center gap-1", className),
+    ...props,
+    children
+  }
+));
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+const Item = React.forwardRef(({ className, children, variant, ...props }, ref) => {
+  let style = "";
+  if (variant === "button") {
+    style = ButtonStyle;
+  }
+  if (variant === "navigation") {
+    style = NavigationStyle;
+  }
+  if (variant === "icon") {
+    style = iconClassName;
+  }
+  return /* @__PURE__ */ jsx(ToggleGroupPrimitive.Item, { ref, className: cn(BaseStyle, style, className), ...props, children });
+});
+Item.displayName = ToggleGroupPrimitive.Item.displayName;
+ToggleGroup.Item = Item;
+
+export { ToggleGroup };

package/dist/ui/toggle/toggle.d.ts

@@ -0,0 +1,11 @@
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import * as React from 'react';
+export type Variant = {
+    variant?: 'button' | 'navigation' | 'icon';
+};
+declare const BaseStyle = "box-border flex items-center justify-center transition-colors duration-fast ease-smooth";
+declare const NavigationStyle = "text-text-disabled text-5 px-3 py-2 rounded-3 hover:bg-surface-hover data-[state=on]:bg-surface-hover data-[state=on]:text-text-primary";
+declare const ButtonStyle = "border border-white/8 rounded-6 text-3 px-3.75 py-1.75 text-text-secondary hover:bg-surface-hover data-[state=on]:bg-core-blue/20 data-[state=on]:border-core-blue data-[state=on]:text-text-primary";
+declare const iconClassName = "w-10 h-10 rounded-3 p-2 hover:bg-surface-hover data-[state=on]:text-core-blue";
+declare const Toggle: React.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref"> & Variant & React.RefAttributes<HTMLButtonElement>>;
+export { BaseStyle, ButtonStyle, iconClassName, NavigationStyle, Toggle };

package/dist/ui/toggle/toggle.js

@@ -0,0 +1,45 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../utils/config.js';
+import '@radix-ui/react-portal';
+import '../avatar/index.js';
+import '../button.js';
+import '../carousel/index.js';
+import '../checkbox/index.js';
+import '../collapsible/index.js';
+import '../dialog/confirm.js';
+import '../dialog/dialog.js';
+import '../drawer.js';
+import '../form.js';
+import '../input-otp.js';
+import '../label.js';
+import * as React from 'react';
+import '../popover/index.js';
+import '../progress.js';
+import '../select/index.js';
+import '../slider/index.js';
+import '../sonner.js';
+import '../switch.js';
+import '../table/index.js';
+import '../tabs/index.js';
+import './toggle-group.js';
+import '../tooltip/index.js';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+
+const BaseStyle = "box-border flex items-center justify-center transition-colors duration-fast ease-smooth";
+const NavigationStyle = "text-text-disabled text-5 px-3 py-2 rounded-3 hover:bg-surface-hover data-[state=on]:bg-surface-hover data-[state=on]:text-text-primary";
+const ButtonStyle = "border border-white/8 rounded-6 text-3 px-3.75 py-1.75 text-text-secondary hover:bg-surface-hover data-[state=on]:bg-core-blue/20 data-[state=on]:border-core-blue data-[state=on]:text-text-primary";
+const iconClassName = "w-10 h-10 rounded-3 p-2 hover:bg-surface-hover data-[state=on]:text-core-blue";
+const VariantStyle = {
+  button: ButtonStyle,
+  navigation: NavigationStyle,
+  icon: iconClassName
+};
+const Toggle = React.forwardRef(
+  ({ className, variant, ...props }, ref) => {
+    const style = variant ? VariantStyle[variant] : "";
+    return /* @__PURE__ */ jsx(TogglePrimitive.Root, { ref, className: cn(BaseStyle, style, className), ...props });
+  }
+);
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { BaseStyle, ButtonStyle, NavigationStyle, Toggle, iconClassName };

package/dist/ui/tooltip/index.d.ts

@@ -0,0 +1,17 @@
+import * as TooltipPrimitive from '@radix-ui/react-hover-card';
+import * as React from 'react';
+declare const Content: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.HoverCardContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface TTooltip extends React.FC<TooltipPrimitive.HoverCardProps> {
+    Trigger: typeof TooltipPrimitive.Trigger;
+    Content: typeof Content;
+    Portal: typeof TooltipPrimitive.Portal;
+    Arrow: typeof TooltipPrimitive.Arrow;
+    Tips: typeof Tips;
+}
+declare const Tooltip: TTooltip;
+interface TipsProps {
+    children: React.ReactNode;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+}
+declare const Tips: React.FC<TipsProps>;
+export { Tooltip };

package/dist/ui/tooltip/index.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '@radix-ui/react-portal';
+import '../avatar/index.js';
+import { cn } from '../../utils/config.js';
+import '../button.js';
+import '../carousel/index.js';
+import '../checkbox/index.js';
+import '../collapsible/index.js';
+import '../dialog/confirm.js';
+import '../dialog/dialog.js';
+import '../drawer.js';
+import '../form.js';
+import '../input-otp.js';
+import '../label.js';
+import * as React from 'react';
+import '../popover/index.js';
+import '../progress.js';
+import '../select/index.js';
+import '../slider/index.js';
+import '../sonner.js';
+import '../switch.js';
+import '../table/index.js';
+import '../tabs/index.js';
+import '../toggle/toggle.js';
+import '../toggle/toggle-group.js';
+import { Icon } from '../../components/icon/index.js';
+import '../../components/img-uploader/index.js';
+import '../../components/img-viewer/index.js';
+import '../../components/loading/index.js';
+import '../../components/model-uploader/index.js';
+import { FrostGlass } from '../../tokens/materials.js';
+import * as TooltipPrimitive from '@radix-ui/react-hover-card';
+
+const AnimationBaseStyle = "duration-base ease-smooth data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0";
+const AnimationInStyle = "data-[side=bottom]:slide-in-t-2 data-[side=left]:slide-in-r-2 data-[side=right]:slide-in-l-2 data-[side=top]:slide-in-b-2";
+const AnimationOutStyle = "data-[side=bottom]:slide-out-t-2 data-[side=left]:slide-out-r-2 data-[side=right]:slide-out-l-2 data-[side=top]:slide-out-b-2";
+const BaseStyle = cn("z-50 rounded-full shadow-md outline-none", FrostGlass);
+const Content = React.forwardRef(
+  ({ className, children, collisionPadding = 12, sideOffset = 12, side = "top", ...props }, ref) => /* @__PURE__ */ jsx(
+    TooltipPrimitive.Content,
+    {
+      ref,
+      side,
+      sideOffset,
+      collisionPadding,
+      className: cn(BaseStyle, AnimationBaseStyle, AnimationInStyle, AnimationOutStyle, className),
+      ...props,
+      children
+    }
+  )
+);
+Content.displayName = TooltipPrimitive.Content.displayName;
+const Tooltip = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Root, { openDelay: 0, closeDelay: 200, ...props, children });
+};
+const Tips = ({ children, side }) => {
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(Tooltip.Trigger, { children: /* @__PURE__ */ jsx(Icon, { icon: "i-nexus:tips-monotone", className: "size-4 text-text-secondary" }) }),
+    /* @__PURE__ */ jsx(Tooltip.Content, { side, className: "max-w-56 rounded-4 p-3 text-3 text-text-secondary", children })
+  ] });
+};
+Tooltip.Trigger = TooltipPrimitive.Trigger;
+Tooltip.Content = Content;
+Tooltip.Portal = TooltipPrimitive.Portal;
+Tooltip.Arrow = TooltipPrimitive.Arrow;
+Tooltip.Tips = Tips;
+
+export { Tooltip };

package/dist/utils/config.d.ts

@@ -0,0 +1,2 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/utils/config.js

@@ -0,0 +1,48 @@
+import { theme } from '../theme.js';
+import clsx from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+
+function flattenThemeColors(colorsObj, prefix = "") {
+  const result = [];
+  if (!colorsObj) return result;
+  Object.entries(colorsObj).forEach(([key, value]) => {
+    const currentKey = key === "DEFAULT" ? prefix : prefix ? `${prefix}-${key}` : key;
+    if (typeof value === "string") {
+      result.push(currentKey);
+    } else if (typeof value === "object" && value !== null) {
+      const nestedColors = flattenThemeColors(value, currentKey);
+      result.push(...nestedColors);
+    }
+  });
+  return result;
+}
+const twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      colors: flattenThemeColors(theme.colors)
+    },
+    classGroups: {
+      "font-size": [
+        {
+          text: [(arg) => !isNaN(Number(arg))]
+        }
+      ],
+      "text-color": [
+        {
+          c: [(arg) => isNaN(Number(arg))],
+          color: [(arg) => isNaN(Number(arg))]
+        }
+      ],
+      rounded: [
+        {
+          rounded: [(arg) => !isNaN(Number(arg))]
+        }
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export { cn };

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './config';
+export * from './utils';

package/dist/utils/utils.d.ts

@@ -0,0 +1,8 @@
+export declare function isMobileDevice(ua: string | null): boolean;
+export declare const sleep: (ms: number) => Promise<unknown>;
+export declare const jump: (url: string, blank?: boolean) => void;
+export declare const download: (url: string, name?: string) => void;
+export declare const copy: (copyText: string, toastText: string) => void;
+export declare const getSuffix: (file: File | string) => string | undefined;
+export declare const checkSize: (file: File, size?: number) => boolean;
+export declare const checkType: (file: File, type: "image" | "model") => boolean;

package/dist/utils/utils.js

@@ -0,0 +1,91 @@
+import '@radix-ui/react-portal';
+import '../ui/avatar/index.js';
+import 'react/jsx-runtime';
+import './config.js';
+import '../ui/button.js';
+import '../ui/carousel/index.js';
+import '../ui/checkbox/index.js';
+import '../ui/collapsible/index.js';
+import '../ui/dialog/confirm.js';
+import '../ui/dialog/dialog.js';
+import '../ui/drawer.js';
+import '../ui/form.js';
+import '../ui/input-otp.js';
+import '../ui/label.js';
+import 'react';
+import '../ui/popover/index.js';
+import '../ui/progress.js';
+import '../ui/select/index.js';
+import '../ui/slider/index.js';
+import '../ui/sonner.js';
+import '../ui/switch.js';
+import '../ui/table/index.js';
+import '../ui/tabs/index.js';
+import '../ui/toggle/toggle.js';
+import '../ui/toggle/toggle-group.js';
+import '../ui/tooltip/index.js';
+import { toast } from 'sonner';
+
+function isMobileDevice(ua) {
+  if (!ua) return false;
+  if (/android|webos|iphone|ipod|blackberry|iemobile|opera mini/i.test(ua)) {
+    return true;
+  } else {
+    return false;
+  }
+}
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+const jump = (url, blank = true) => {
+  const a = document.createElement("a");
+  a.href = url;
+  if (blank) {
+    a.target = "_blank";
+  }
+  a.click();
+};
+const download = (url, name) => {
+  const a = document.createElement("a");
+  a.href = url;
+  if (name) {
+    a.download = name;
+  }
+  a.click();
+};
+const copy = (copyText, toastText) => {
+  navigator.clipboard.writeText(copyText).then(() => {
+    toast(toastText);
+  }).catch((error) => {
+    console.error("Failed to copy text:", error);
+  });
+};
+const getSuffix = (file) => {
+  const name = typeof file === "string" ? file : file.name;
+  let suffix = name.split(".").pop()?.toLowerCase();
+  if (file instanceof File) {
+    suffix = suffix || file.type.split("/").pop();
+  }
+  return suffix;
+};
+const checkSize = (file, size = 5) => {
+  const maxFileSize = size * 1024 * 1024;
+  if (file.size > maxFileSize) {
+    console.log(`The uploaded file size cannot exceed ${size} MB`);
+    return false;
+  }
+  return true;
+};
+const checkType = (file, type) => {
+  const m = {
+    image: ["webp", "png", "jpg", "jpeg"],
+    model: ["fbx", "obj", "stl", "glb"]
+  };
+  const suffix = getSuffix(file);
+  if (m[type].findIndex((v) => v === suffix) > -1) {
+    return true;
+  } else {
+    console.log("This file type is not supported.");
+    return false;
+  }
+};
+
+export { checkSize, checkType, copy, download, getSuffix, isMobileDevice, jump, sleep };

package/package.json

@@ -0,0 +1,148 @@
+{
+  "name": "@sruim/nexus-design",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./components": {
+      "import": "./dist/components/index.js",
+      "types": "./dist/components/index.d.ts"
+    },
+    "./ui": {
+      "import": "./dist/ui/index.js",
+      "types": "./dist/ui/index.d.ts"
+    },
+    "./utils": {
+      "import": "./dist/utils/index.js",
+      "types": "./dist/utils/index.d.ts"
+    },
+    "./theme": {
+      "import": "./dist/theme.js",
+      "types": "./dist/theme.d.ts"
+    },
+    "./ui/*": {
+      "import": "./dist/ui/*.js",
+      "types": "./dist/ui/*.d.ts"
+    },
+    "./components/*": {
+      "import": "./dist/components/*.js",
+      "types": "./dist/components/*.d.ts"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepare": "husky",
+    "lint": "eslint . --fix",
+    "typecheck": "tsc --noEmit",
+    "build": "tsc -p tsconfig.build.json && vite build",
+    "dev": "vite build --watch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^4.1.3",
+    "@radix-ui/react-avatar": "^1.1.3",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-collapsible": "^1.1.3",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-hover-card": "^1.1.6",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-portal": "^1.1.4",
+    "@radix-ui/react-progress": "^1.1.2",
+    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-slider": "^1.2.3",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-switch": "^1.1.3",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-toggle": "^1.1.2",
+    "@radix-ui/react-toggle-group": "^1.1.2",
+    "@radix-ui/react-visually-hidden": "^1.1.2",
+    "@tanstack/react-table": "^8.21.2",
+    "@unocss/reset": "^66.2.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "embla-carousel-autoplay": "^8.6.0",
+    "embla-carousel-react": "^8.5.2",
+    "input-otp": "^1.4.2",
+    "lodash-es": "^4.17.21",
+    "react-hook-form": "^7.54.2",
+    "sonner": "^2.0.1",
+    "tailwind-merge": "^2.6.0",
+    "vaul": "^1.1.2",
+    "zod": "^3.25.67"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.0.0",
+    "@eslint/js": "^9.29.0",
+    "@storybook/addon-a11y": "^10.1.11",
+    "@storybook/addon-docs": "^10.1.11",
+    "@storybook/addon-onboarding": "^10.1.11",
+    "@storybook/addon-vitest": "^10.1.11",
+    "@storybook/react": "^10.1.11",
+    "@storybook/react-vite": "^10.1.11",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^22.10.6",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@typescript-eslint/eslint-plugin": "^8.34.1",
+    "@unocss/eslint-config": "^66.2.3",
+    "@unocss/postcss": "^66.2.3",
+    "@vitejs/plugin-react": "^4.5.2",
+    "@vitest/browser-playwright": "^4.0.17",
+    "@vitest/coverage-v8": "^4.0.17",
+    "eslint": "^9.29.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.5.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-storybook": "^10.1.11",
+    "globals": "^16.2.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.4.3",
+    "playwright": "^1.57.0",
+    "prettier": "^3.5.3",
+    "prettier-plugin-organize-imports": "^4.1.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.0.0",
+    "sass-embedded": "^1.89.2",
+    "storybook": "^10.1.11",
+    "stylelint": "^16.23.1",
+    "stylelint-config-standard-scss": "^15.0.1",
+    "stylelint-prettier": "^5.0.3",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.34.1",
+    "unocss": "^66.2.3",
+    "unocss-preset-animations": "^1.2.1",
+    "unocss-preset-shadcn": "^0.5.0",
+    "vite": "^6.3.5",
+    "vite-env-only": "^3.0.3",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^4.0.17"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx}": [
+      "eslint --fix"
+    ]
+  },
+  "engines": {
+    "node": ">=20.0.0",
+    "pnpm": ">=9.6.0"
+  },
+  "packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39"
+}