@sruim/nexus-design 0.0.1

package/README.md

@@ -0,0 +1,195 @@
+# Nexus Design System
+
+A modern React component library built with Radix UI primitives and UnoCSS.
+
+[中文文档](./README_CN.md) | [API Reference](./docs/api-reference.md)
+
+## Features
+
+- **Radix UI Primitives** - Accessible, unstyled components as foundation
+- **UnoCSS Styling** - Atomic CSS with custom theme tokens
+- **TypeScript** - Full type safety with strict mode
+- **Dark Theme** - Obsidian-based dark mode design
+- **Glass Effects** - Frosted glass materials (FrostGlass, DeepGlass)
+- **Compound Components** - Flexible composition patterns
+
+## Installation
+
+```bash
+pnpm add @sruim/nexus-design
+```
+
+**Peer Dependencies:**
+
+```bash
+pnpm add react react-dom
+```
+
+## Quick Start
+
+### 1. Configure UnoCSS
+
+```typescript
+// uno.config.ts
+import { theme } from '@sruim/nexus-design/theme';
+import { defineConfig, presetUno } from 'unocss';
+
+export default defineConfig({
+  presets: [presetUno()],
+  theme,
+});
+```
+
+### 2. Import Styles
+
+```typescript
+// main.tsx
+import '@sruim/nexus-design/style.css';
+```
+
+### 3. Setup Dialoger
+
+Required for imperative dialog APIs (`Dialog.show`, `Confirm.show`):
+
+```tsx
+import { Dialoger } from '@sruim/nexus-design/ui';
+
+function App() {
+  return (
+    <>
+      <YourApp />
+      <Dialoger />
+    </>
+  );
+}
+```
+
+### 4. Use Components
+
+```tsx
+import { Button, Dialog, Select } from '@sruim/nexus-design/ui';
+import { IconButton } from '@sruim/nexus-design/components';
+
+function Example() {
+  return (
+    <div>
+      <Button variant="solid">Click Me</Button>
+      <IconButton icon="i-nexus:download" text="Download" />
+    </div>
+  );
+}
+```
+
+## Import Paths
+
+| Path | Description |
+|------|-------------|
+| `@sruim/nexus-design` | All exports |
+| `@sruim/nexus-design/ui` | UI primitives (Button, Dialog, Select...) |
+| `@sruim/nexus-design/components` | Composite components (Icon, IconButton...) |
+| `@sruim/nexus-design/utils` | Utilities (cn, sleep, copy...) |
+| `@sruim/nexus-design/theme` | UnoCSS theme configuration |
+| `@sruim/nexus-design/style.css` | Global styles |
+
+## Components
+
+### UI Primitives
+
+| Component | Description |
+|-----------|-------------|
+| `Button` | Primary button with solid/hollow/plain variants |
+| `Dialog` | Modal dialog with imperative API |
+| `Confirm` | Confirmation dialog |
+| `Select` | Dropdown select |
+| `Tabs` | Tab navigation |
+| `Popover` | Floating popover |
+| `Tooltip` | Hover tooltip |
+| `Checkbox` | Checkbox input |
+| `Switch` | Toggle switch |
+| `Slider` | Range slider with optional input |
+| `Progress` | Progress bar |
+| `Toggle` | Toggle button |
+| `ToggleGroup` | Toggle button group |
+| `Avatar` | User avatar |
+| `Badge` | Notification badge |
+| `Drawer` | Bottom sheet drawer |
+| `Form` | Form with Zod validation |
+
+### Composite Components
+
+| Component | Description |
+|-----------|-------------|
+| `Icon` | UnoCSS icon wrapper |
+| `IconButton` | Button with icon |
+| `ImgUploader` | Image upload component |
+| `ImgViewer` | Image viewer |
+| `ModelUploader` | 3D model upload |
+| `Tree` | Tree view |
+| `Loading` | Loading indicator |
+| `Loadable` | Async content wrapper |
+
+## Theme Tokens
+
+### Colors
+
+```tsx
+// Dark backgrounds
+bg-obsidian-100  // #020617
+bg-obsidian-200  // #0F172A
+bg-obsidian-300  // #1E293B
+
+// Primary accent
+bg-core-blue     // #3B82F6
+
+// Status
+text-status-error    // #F43F5E
+text-status-success  // #10B981
+text-status-warning  // #F59E0B
+
+// Text
+text-text-primary    // #FFFFFF
+text-text-secondary  // #CBD5E1
+text-text-disabled   // #64748B
+```
+
+### Glass Materials
+
+```tsx
+import { FrostGlass, DeepGlass } from '@sruim/nexus-design/tokens/materials';
+
+// FrostGlass: backdrop-blur-12 bg-slate-900/70 border border-white/10
+// DeepGlass: backdrop-blur-12 bg-slate-950/90
+```
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start Storybook
+pnpm storybook
+
+# Build library
+pnpm build
+
+# Type check
+pnpm typecheck
+
+# Lint
+pnpm lint
+```
+
+## Tech Stack
+
+- React 19
+- TypeScript 5.8
+- Radix UI
+- UnoCSS
+- Vite
+- Storybook
+- Zod + React Hook Form
+
+## License
+
+MIT

package/dist/assets/grid.webp.js

@@ -0,0 +1,3 @@
+const grid = "data:image/webp;base64,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";
+
+export { grid as default };

package/dist/components/credits-button/index.d.ts

@@ -0,0 +1,8 @@
+import { Button } from '../../ui';
+interface Props extends Omit<React.ComponentProps<typeof Button>, 'children'> {
+    count?: number;
+    text?: string;
+    children?: React.ReactNode;
+}
+export declare const CreditsButton: React.FC<Props>;
+export {};

package/dist/components/credits-button/index.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@radix-ui/react-portal';
+import '../../ui/avatar/index.js';
+import '../../utils/config.js';
+import { Button } from '../../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 { Icon } from '../icon/index.js';
+
+const CreditsButton = (props) => {
+  return /* @__PURE__ */ jsxs(Button, { variant: "solid", size: "large", ...props, children: [
+    props.children,
+    props.text,
+    props.count ? /* @__PURE__ */ jsxs("div", { className: "flex items-center pl-1.5", children: [
+      /* @__PURE__ */ jsx(Icon, { className: "size-5", icon: "i-nexus-bolt-monotone" }),
+      /* @__PURE__ */ jsx("span", { className: "pl-1.5", children: props.count })
+    ] }) : null
+  ] });
+};
+
+export { CreditsButton };

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

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+    icon: string;
+    className?: string;
+}
+export declare const Icon: React.FC<Props>;
+export {};

package/dist/components/icon/index.js

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../utils/config.js';
+import '@radix-ui/react-portal';
+import '../../ui/avatar/index.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';
+
+const Icon = ({ icon, className, ...props }) => {
+  return /* @__PURE__ */ jsx("div", { className: cn(icon, "v-mid", className), ...props });
+};
+
+export { Icon };

package/dist/components/icon-button/index.d.ts

@@ -0,0 +1,9 @@
+import { Button } from '../../ui';
+import { default as React } from 'react';
+interface Props extends Omit<React.ComponentProps<typeof Button>, 'children'> {
+    icon?: string;
+    iconClassName?: string;
+    text?: string;
+}
+export declare const IconButton: React.FC<Props>;
+export {};

package/dist/components/icon-button/index.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@radix-ui/react-portal';
+import '../../ui/avatar/index.js';
+import { cn } from '../../utils/config.js';
+import { Button } from '../../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 { Icon } from '../icon/index.js';
+
+const IconButton = ({ icon, text, iconClassName, ...props }) => {
+  return /* @__PURE__ */ jsxs(Button, { variant: "solid", size: "large", ...props, children: [
+    icon && /* @__PURE__ */ jsx(Icon, { className: cn("mr-1 size-5", iconClassName), icon }),
+    text
+  ] });
+};
+
+export { IconButton };

package/dist/components/img-uploader/index.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+interface InputProps {
+    onChange: (file: File | File[]) => void;
+    multiple?: boolean;
+}
+interface Props {
+    className?: string;
+    icon?: string;
+    title?: string;
+    description?: string;
+    required?: boolean;
+    onChange: (file: File | File[]) => void;
+    multiple?: boolean;
+}
+interface IImgUploader extends React.FC<Props> {
+    Input: React.FC<InputProps>;
+}
+export declare const ImgUploader: IImgUploader;
+export {};

package/dist/components/img-uploader/index.js

@@ -0,0 +1,107 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { FrostGlass } from '../../tokens/materials.js';
+import '@radix-ui/react-portal';
+import '../../ui/avatar/index.js';
+import { cn } from '../../utils/config.js';
+import { checkSize, checkType } from '../../utils/utils.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 { useState, useCallback } from '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 grid from '../../assets/grid.webp.js';
+import { Icon } from '../icon/index.js';
+import { toast } from 'sonner';
+
+const Input = ({ onChange, multiple = false }) => {
+  const handleChange = (e) => {
+    const image = e.target.files?.[0];
+    if (!image) return;
+    if (!checkSize(image, 5)) {
+      toast.error("The uploaded file size cannot exceed 5 MB");
+      return;
+    }
+    if (!checkType(image, "image")) {
+      toast.error("This file type is not supported.");
+      return;
+    }
+    onChange(multiple ? Array.from(e.target.files || []) : image);
+    e.target.value = "";
+  };
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      className: "absolute inset-0 cursor-pointer opacity-0",
+      type: "file",
+      max: 10,
+      multiple,
+      accept: "image/png,image/webp,image/jpg,image/jpeg",
+      onChange: handleChange
+    }
+  );
+};
+const BaseStyle = "relative size-full flex flex-col items-center justify-center overflow-hidden transition-colors duration-fast ease-smooth hover:bg-surface-hover";
+const BorderStyle = "box-border border border-dashed border-white/20";
+const DragOverStyle = cn("bg-core-blue/10 w-full hover:bg-core-blue/10", FrostGlass);
+const ImgUploader = ({
+  className,
+  icon,
+  title,
+  description,
+  required,
+  onChange,
+  multiple
+}) => {
+  const [isDragOver, setIsDragOver] = useState(false);
+  const handleDragEnter = useCallback(() => setIsDragOver(true), []);
+  const handleDragLeave = useCallback(() => setIsDragOver(false), []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(BaseStyle, BorderStyle, className, isDragOver && DragOverStyle),
+      onDragOver: handleDragEnter,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDragLeave,
+      children: [
+        icon && /* @__PURE__ */ jsx(Icon, { className: "size-5", icon }),
+        title && /* @__PURE__ */ jsx("div", { className: "my-1.5 max-w-2/3 w-37.5 text-center text-wrap text-2.5 text-text-primary", children: title }),
+        description && /* @__PURE__ */ jsx("div", { className: "max-w-2/3 w-37.5 text-center text-wrap text-2.5 text-text-secondary", children: description }),
+        required && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            className: "absolute right-3 top-3 size-3 text-status-error",
+            icon: "i-nexus:required-monotone"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute left-0 top-0 z-0 size-full bg-contain bg-repeat",
+            style: { backgroundImage: `url(${grid})` }
+          }
+        ),
+        /* @__PURE__ */ jsx(Input, { onChange, multiple })
+      ]
+    }
+  );
+};
+ImgUploader.Input = Input;
+
+export { ImgUploader };

package/dist/components/img-viewer/index.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+type ImgSource = string | File;
+interface ImgViewerProps {
+    className?: string;
+    src: ImgSource | ImgSource[];
+    children?: React.ReactNode;
+}
+interface ImgViewerComponent extends React.FC<ImgViewerProps> {
+    Delete: typeof Delete;
+}
+interface DeleteProps extends React.HTMLAttributes<HTMLButtonElement> {
+    onClick?: () => void;
+}
+declare const Delete: React.ForwardRefExoticComponent<DeleteProps & React.RefAttributes<HTMLButtonElement>>;
+declare const ImgViewer: ImgViewerComponent;
+export { ImgViewer };

package/dist/components/img-viewer/index.js

@@ -0,0 +1,80 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cn } from '../../utils/config.js';
+import '@radix-ui/react-portal';
+import '../../ui/avatar/index.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 * as React from 'react';
+import { useState, useEffect, useMemo } from '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 { Icon } from '../icon/index.js';
+
+const BaseStyle = "group relative size-full overflow-hidden";
+const BorderStyle = "box-border border border-white/8";
+const Delete = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    ref,
+    className: cn(
+      "absolute bottom-3 right-3 opacity-0 rounded-1/2 transition-opacity duration-base ease-smooth group-hover:opacity-100 group-hover:bg-black/60",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(Icon, { className: "m-2 size-5 text-text-primary", icon: "i-nexus:delete-monotone" })
+  }
+));
+const ImgViewer = ({ src, className, children }) => {
+  const [images, setImages] = useState([]);
+  useEffect(() => {
+    const array = Array.isArray(src) ? src : [src];
+    const images2 = array.filter(Boolean).map((source) => {
+      if (source instanceof File) return URL.createObjectURL(source);
+      return source;
+    });
+    setImages(images2);
+  }, [src]);
+  const Inner = useMemo(() => {
+    if (images.length === 1) {
+      return /* @__PURE__ */ jsx("img", { src: images[0], alt: "preview-img", className: "size-full object-contain" });
+    }
+    if (images.length > 1) {
+      const rotation = [-15, 0, 15];
+      return images.slice(-3).map((url, index) => /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: url,
+          alt: `preview-img-${index}`,
+          className: "absolute left-1/2 top-1/2 size-4/5 rounded-3.5 object-contain shadow-2xl",
+          style: { transform: `translate(-50%, -50%) rotate(${rotation[index]}deg)` }
+        },
+        `${url}${index}`
+      ));
+    }
+    return null;
+  }, [images]);
+  return /* @__PURE__ */ jsxs("div", { className: cn(BaseStyle, BorderStyle, className), children: [
+    Inner,
+    children
+  ] });
+};
+ImgViewer.Delete = Delete;
+
+export { ImgViewer };

package/dist/components/index.d.ts

@@ -0,0 +1,9 @@
+export * from './credits-button';
+export * from './icon';
+export * from './icon-button';
+export * from './img-uploader';
+export * from './img-viewer';
+export * from './loadable';
+export * from './loading';
+export * from './model-uploader';
+export * from './tree';

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

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+interface Props {
+    className?: string;
+    onLoadMore: () => Promise<void> | void;
+    children: React.ReactNode;
+}
+export declare const Loadable: React.FC<Props>;
+export {};

package/dist/components/loadable/index.js

@@ -0,0 +1,67 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { cn } from '../../utils/config.js';
+import '@radix-ui/react-portal';
+import '../../ui/avatar/index.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 { useRef, useState, useLayoutEffect } from '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 { Loading } from '../loading/index.js';
+
+const Loadable = ({ children, onLoadMore, className }) => {
+  const ref = useRef(null);
+  const loadMoreRef = useRef(onLoadMore);
+  const loadingRef = useRef(false);
+  const [loading, setLoading] = useState(false);
+  loadMoreRef.current = onLoadMore;
+  loadingRef.current = loading;
+  useLayoutEffect(() => {
+    if (!ref.current) return;
+    const observer = new IntersectionObserver(async ([entry]) => {
+      if (entry.intersectionRatio <= 0) return;
+      if (loadingRef.current) return;
+      try {
+        setLoading(true);
+        loadingRef.current = true;
+        await loadMoreRef.current();
+      } catch (error) {
+        console.error("加载更多数据时发生错误:", error);
+      } finally {
+        setLoading(false);
+        loadingRef.current = false;
+      }
+    });
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    /* @__PURE__ */ jsx("div", { ref, className: "min-h-10 w-full", children: loading && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("w-full flex flex-col items-center justify-center gap-2 mt-5", className),
+        children: /* @__PURE__ */ jsx(Loading.Icon, { className: "max-w-10" })
+      }
+    ) })
+  ] });
+};
+
+export { Loadable };