@sruim/nexus-design 0.0.1

package/dist/components/loading/assets/loading.webp.js

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

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

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+declare const Root: React.ForwardRefExoticComponent<React.HtmlHTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const Overlay: React.ForwardRefExoticComponent<React.HtmlHTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const Icon: React.ForwardRefExoticComponent<React.HtmlHTMLAttributes<HTMLImageElement> & React.RefAttributes<HTMLImageElement>>;
+interface LoadingProps {
+    className?: string;
+    children?: React.ReactNode;
+}
+interface Loading extends React.FC<LoadingProps> {
+    Root: typeof Root;
+    Overlay: typeof Overlay;
+    Icon: typeof Icon;
+    show: (loading?: React.ReactNode) => () => Promise<void>;
+}
+declare const Loading: Loading;
+export { Loading };

package/dist/components/loading/index.js

@@ -0,0 +1,85 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { DeepGlass } from '../../tokens/materials.js';
+import { cn } from '../../utils/config.js';
+import { Portal } from '@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__default 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 { createRoot } from 'react-dom/client';
+import loading from './assets/loading.webp.js';
+
+const Root = React__default.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "fixed inset-0 flex flex-col items-center justify-center z-60 pointer-events-auto",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Root.displayName = "LoadingRoot";
+const Overlay = React__default.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("absolute inset-0", DeepGlass, className), ...props })
+);
+Overlay.displayName = "LoadingOverlay";
+const Icon = React__default.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "img",
+    {
+      ref,
+      className: cn("w-15% max-w-16 animate-spin aspect-square", className),
+      src: loading,
+      alt: "loading...",
+      ...props
+    }
+  )
+);
+Icon.displayName = "LoadingIcon";
+const Loading = ({ children, className }) => /* @__PURE__ */ jsxs(Root, { children: [
+  /* @__PURE__ */ jsx(Overlay, { className }),
+  children
+] });
+const PortalLoading = ({ children }) => /* @__PURE__ */ jsx(Portal, { asChild: true, children: children ? children : /* @__PURE__ */ jsx(Loading, { children: /* @__PURE__ */ jsx(Icon, {}) }) });
+Loading.Icon = Icon;
+Loading.Overlay = Overlay;
+Loading.Root = Root;
+Loading.show = (loading2) => {
+  if (window === void 0) {
+    console.warn("Dialog.show is not supported in Server Side");
+    return () => Promise.resolve();
+  }
+  let container = document.createDocumentFragment();
+  let root = createRoot(container);
+  root.render(/* @__PURE__ */ jsx(PortalLoading, { children: loading2 }));
+  return () => Promise.resolve().then(() => {
+    root?.unmount();
+    container = null;
+    root = null;
+  });
+};
+
+export { Loading };

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

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

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

@@ -0,0 +1,93 @@
+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 '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 }) => {
+  const handleChange = (e) => {
+    const model = e.target.files?.[0];
+    if (!model) return;
+    if (!checkSize(model, 50)) {
+      toast.error("The uploaded file size cannot exceed 50 MB");
+      return;
+    }
+    if (!checkType(model, "model")) {
+      toast.error("This file type is not supported.");
+      return;
+    }
+    onChange(model);
+    e.target.value = "";
+  };
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      className: "absolute inset-0 cursor-pointer opacity-0",
+      type: "file",
+      max: 1,
+      multiple: false,
+      accept: ".fbx,.obj,.stl,.glb",
+      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 = cn("box-border border border-dashed border-white/20", FrostGlass);
+const ModelUploader = ({
+  className,
+  icon,
+  title,
+  description,
+  required,
+  onChange
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: cn(BaseStyle, BorderStyle, className), children: [
+    icon && /* @__PURE__ */ jsx(Icon, { className: "size-4", icon }),
+    title && /* @__PURE__ */ jsx("div", { className: "my-1 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-6 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 })
+  ] });
+};
+ModelUploader.Input = Input;
+
+export { ModelUploader };

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

@@ -0,0 +1,14 @@
+import { ITreeNode } from './node';
+export type { ITreeNode } from './node';
+interface Props {
+    data: ITreeNode[];
+    selected: string[];
+    expanded: string[];
+    readOnly?: boolean;
+    onDelete: (name: string) => void;
+    onNameChange: (name: string, value: string) => void;
+    onVisibleChange: (name: string) => void;
+    onSelectChange: (name: string) => void;
+    onExpandedChange: (name: string) => void;
+}
+export declare const Tree: React.FC<Props>;

package/dist/components/tree/index.js

@@ -0,0 +1,50 @@
+import { jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import { TreeNode } from './node.js';
+
+const Tree = ({
+  data,
+  selected,
+  expanded,
+  readOnly,
+  onDelete,
+  onNameChange,
+  onVisibleChange,
+  onSelectChange,
+  onExpandedChange
+}) => {
+  const renderTree = useCallback(
+    (nodes, level = 0) => {
+      return nodes.map((node) => /* @__PURE__ */ jsx(
+        TreeNode,
+        {
+          node,
+          level,
+          selected,
+          expanded,
+          readOnly,
+          onDelete,
+          onSelectChange,
+          onExpandedChange,
+          onNameChange,
+          onVisibleChange,
+          children: node.children && node.children.length && renderTree(node.children, level < 5 ? level + 1 : 5)
+        },
+        node.name
+      ));
+    },
+    [
+      selected,
+      expanded,
+      readOnly,
+      onDelete,
+      onSelectChange,
+      onExpandedChange,
+      onNameChange,
+      onVisibleChange
+    ]
+  );
+  return /* @__PURE__ */ jsx("ul", { className: "w-full list-none", children: renderTree(data) });
+};
+
+export { Tree };

package/dist/components/tree/node.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+export interface ITreeNode {
+    name: string;
+    displayName: string;
+    visible: boolean;
+    disabled: boolean;
+    children: ITreeNode[];
+}
+interface Props {
+    node: ITreeNode;
+    selected: string[];
+    expanded: string[];
+    level: number;
+    readOnly?: boolean;
+    onDelete: (name: string) => void;
+    onNameChange: (name: string, value: string) => void;
+    onVisibleChange: (name: string) => void;
+    onSelectChange: (name: string) => void;
+    onExpandedChange: (name: string) => void;
+    children?: React.ReactNode;
+}
+export declare const TreeNode: React.FC<Props>;
+export {};

package/dist/components/tree/node.js

@@ -0,0 +1,185 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '@radix-ui/react-portal';
+import '../../ui/avatar/index.js';
+import { cn } from '../../utils/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 { useState, useRef, useMemo } from 'react';
+import { Popover } from '../../ui/popover/index.js';
+import '../../ui/progress.js';
+import '../../ui/select/index.js';
+import '../../ui/slider/index.js';
+import { SnapInput } from '../../ui/snap-input.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 TreeNode = ({
+  node,
+  selected,
+  expanded,
+  level,
+  readOnly,
+  onDelete,
+  onSelectChange,
+  onExpandedChange,
+  onNameChange,
+  onVisibleChange,
+  children
+}) => {
+  const { name, displayName, visible, disabled } = node;
+  const isExpanded = expanded.includes(name);
+  const isSelected = selected.includes(name);
+  const canExpand = Boolean(children);
+  const [edit, setEdit] = useState(false);
+  const clickTimerRef = useRef(0);
+  const computedStyle = useMemo(() => {
+    if (disabled) return "opacity-50 cursor-not-allowed";
+    if (isSelected) return level ? "bg-core-blue/10" : "bg-core-blue/20";
+    if (visible) return level ? "hover:bg-surface-dim" : "hover:bg-surface-hover";
+    if (!visible) return "opacity-50";
+    return "";
+  }, [disabled, isSelected, visible, level]);
+  const Expanded = useMemo(() => {
+    return /* @__PURE__ */ jsx("div", { className: "size-3", children: canExpand && /* @__PURE__ */ jsx(
+      Icon,
+      {
+        className: "size-3 text-text-disabled data-[state=close]-rotate-180",
+        "data-state": isExpanded ? "open" : "close",
+        icon: "i-nexus:arrow-monotone",
+        onClick: (e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          onExpandedChange(name);
+        }
+      }
+    ) });
+  }, [canExpand, isExpanded, name, onExpandedChange]);
+  const NamePart = useMemo(() => {
+    if (edit) {
+      return /* @__PURE__ */ jsx(
+        SnapInput,
+        {
+          className: "mx-1 h-7 min-w-0 border border-core-blue rounded-2 bg-transparent p-2 text-3 outline-none",
+          value: displayName,
+          autoFocus: true,
+          onChange: (value) => {
+            setEdit(false);
+            onNameChange(name, value);
+          }
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("div", { className: "flex-1 truncate text-start text-3", children: displayName });
+  }, [displayName, edit, name, onNameChange]);
+  const Node = useMemo(() => {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: "h-full flex flex-1 items-center justify-center gap-1 overflow-hidden",
+        disabled,
+        onClick: (e) => {
+          e.stopPropagation();
+          if (clickTimerRef.current) {
+            clearTimeout(clickTimerRef.current);
+            clickTimerRef.current = 0;
+          }
+          clickTimerRef.current = window.setTimeout(() => {
+            onSelectChange(name);
+            clickTimerRef.current = 0;
+          }, 100);
+        },
+        onDoubleClick: (e) => {
+          e.stopPropagation();
+          if (clickTimerRef.current) {
+            clearTimeout(clickTimerRef.current);
+            clickTimerRef.current = 0;
+          }
+          if (!readOnly) setEdit(true);
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              className: "mr-2 flex-shrink-0 text-text-secondary",
+              icon: children ? "i-nexus:group-monotone" : "i-nexus:cube-monotone"
+            }
+          ),
+          NamePart
+        ]
+      }
+    );
+  }, [NamePart, children, disabled, name, onSelectChange, readOnly]);
+  const Visible = useMemo(() => {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "rounded-1.5 p-1 hover:bg-surface-hover",
+        onClick: (e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          onVisibleChange(name);
+        },
+        disabled,
+        children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            className: "size-4",
+            icon: visible ? "i-nexus:visible-monotone" : "i-nexus:invisible-monotone"
+          }
+        )
+      }
+    );
+  }, [disabled, name, onVisibleChange, visible]);
+  const Menu = useMemo(() => {
+    if (readOnly) return null;
+    return /* @__PURE__ */ jsxs(Popover, { children: [
+      /* @__PURE__ */ jsx(Popover.Trigger, { disabled, className: "rounded-1.5 p-1 hover:bg-surface-hover", children: /* @__PURE__ */ jsx(Icon, { className: "size-4", icon: "i-nexus:more-horizontal-monotone" }) }),
+      /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Content, { className: "w-38 rounded-4 p-2", side: "bottom", align: "end", sideOffset: 6, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: "w-full flex items-center gap-1 rounded-5 px-1.5 py-2 hover:bg-surface-hover",
+          onClick: () => onDelete(name),
+          disabled,
+          children: [
+            /* @__PURE__ */ jsx(Icon, { className: "size-4", icon: "i-nexus:delete-monotone" }),
+            /* @__PURE__ */ jsx("p", { className: "text-3", children: "Delete" })
+          ]
+        }
+      ) }) })
+    ] });
+  }, [disabled, name, onDelete, readOnly]);
+  return /* @__PURE__ */ jsxs("li", { className: "tree-node relative w-full", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("flex items-center w-full h-8.5 cursor-pointer", computedStyle),
+        style: { paddingLeft: `${level * 1}rem` },
+        children: [
+          Expanded,
+          Node,
+          /* @__PURE__ */ jsxs("div", { className: "mr-3 flex gap-1", children: [
+            Visible,
+            Menu
+          ] })
+        ]
+      }
+    ),
+    canExpand && isExpanded && /* @__PURE__ */ jsx("ul", { className: "w-full", children })
+  ] });
+};
+
+export { TreeNode };

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './theme';
+export * from './ui';
+export * from './utils';

package/dist/index.js

@@ -0,0 +1,43 @@
+export { CreditsButton } from './components/credits-button/index.js';
+export { Icon } from './components/icon/index.js';
+export { IconButton } from './components/icon-button/index.js';
+export { ImgUploader } from './components/img-uploader/index.js';
+export { ImgViewer } from './components/img-viewer/index.js';
+export { Loadable } from './components/loadable/index.js';
+export { Loading } from './components/loading/index.js';
+export { ModelUploader } from './components/model-uploader/index.js';
+export { Tree } from './components/tree/index.js';
+export { theme } from './theme.js';
+export * from '@radix-ui/react-portal';
+export { Avatar } from './ui/avatar/index.js';
+export { Badge } from './ui/badge/index.js';
+export { Button } from './ui/button.js';
+export { Carousel, useCarousel } from './ui/carousel/index.js';
+export { Checkbox } from './ui/checkbox/index.js';
+export { Collapsible } from './ui/collapsible/index.js';
+export { Confirm } from './ui/dialog/confirm.js';
+export { Dialog, Dialoger } from './ui/dialog/dialog.js';
+export { Drawer } from './ui/drawer.js';
+export { Form, useForm, useFormField } from './ui/form.js';
+export { InputOTP } from './ui/input-otp.js';
+export { Label } from './ui/label.js';
+export { Masonry } from './ui/masonry/index.js';
+export { Popover } from './ui/popover/index.js';
+export { Progress } from './ui/progress.js';
+export { Select } from './ui/select/index.js';
+export { Slider } from './ui/slider/index.js';
+export { SnapInput } from './ui/snap-input.js';
+export { Toaster } from './ui/sonner.js';
+export { Switch } from './ui/switch.js';
+export { Table } from './ui/table/index.js';
+export { Tabs } from './ui/tabs/index.js';
+export { BaseStyle, ButtonStyle, NavigationStyle, Toggle, iconClassName } from './ui/toggle/toggle.js';
+export { ToggleGroup } from './ui/toggle/toggle-group.js';
+export { Tooltip } from './ui/tooltip/index.js';
+export { cn } from './utils/config.js';
+export { checkSize, checkType, copy, download, getSuffix, isMobileDevice, jump, sleep } from './utils/utils.js';
+/* empty css           */
+export { useFormContext } from 'react-hook-form';
+export { toast } from 'sonner';
+import * as reactTable from '@tanstack/react-table';
+export { reactTable as TanstackTable };