@nexus-cross/design-system 1.0.4-beta.1 → 1.0.4

package/dist/chunks/{chunk-VH5FF6DZ.mjs → chunk-GX6GSWX3.mjs}

@@ -1,18 +1,18 @@
-import { cn } from './chunk-XALPBGSC.mjs';
+import { cn } from './chunk-MCKOWMLS.mjs';
 import * as React from 'react';
 import { cva } from 'class-variance-authority';
 import { jsx } from 'react/jsx-runtime';
 
-var dividerVariants = cva("nx:shrink-0 nx:border-border-default", {
+var dividerVariants = cva("nexus-divider", {
   variants: {
     orientation: {
-      horizontal: "nx:w-full nx:border-t",
-      vertical: "nx:self-stretch nx:border-l"
+      horizontal: "nexus-divider--horizontal",
+      vertical: "nexus-divider--vertical"
     },
     variant: {
-      solid: "nx:border-solid",
-      dashed: "nx:border-dashed",
-      dotted: "nx:border-dotted"
+      solid: "nexus-divider--solid",
+      dashed: "nexus-divider--dashed",
+      dotted: "nexus-divider--dotted"
     }
   },
   defaultVariants: {

package/dist/chunks/chunk-H2G5FMRN.mjs

@@ -0,0 +1,75 @@
+import { cn } from './chunk-MCKOWMLS.mjs';
+import * as React from 'react';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var sliderVariants = cva("nexus-slider", {
+  variants: {
+    size: {
+      sm: "nexus-slider--sm",
+      md: "nexus-slider--md",
+      lg: "nexus-slider--lg"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+var Slider = React.forwardRef(
+  ({
+    className,
+    size,
+    value,
+    defaultValue,
+    onValueChange,
+    onValueCommit,
+    showValue = false,
+    formatValue,
+    label,
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled,
+    ...props
+  }, ref) => {
+    const [internalValue, setInternalValue] = React.useState(
+      defaultValue ?? [min]
+    );
+    const currentValue = value ?? internalValue;
+    const handleChange = React.useCallback(
+      (val) => {
+        if (!value) setInternalValue(val);
+        onValueChange?.(val);
+      },
+      [value, onValueChange]
+    );
+    const display = formatValue ? currentValue.map(formatValue).join(" \u2013 ") : currentValue.join(" \u2013 ");
+    return /* @__PURE__ */ jsxs("div", { className: cn("nexus-slider-wrapper", className), children: [
+      (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "nexus-slider__header", children: [
+        label && /* @__PURE__ */ jsx("span", { className: "nexus-slider__label", children: label }),
+        showValue && /* @__PURE__ */ jsx("span", { className: "nexus-slider__value", children: display })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        SliderPrimitive.Root,
+        {
+          ref,
+          className: cn(sliderVariants({ size })),
+          value: currentValue,
+          onValueChange: handleChange,
+          onValueCommit,
+          min,
+          max,
+          step,
+          disabled,
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "nexus-slider__track", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "nexus-slider__range" }) }),
+            currentValue.map((_, i) => /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "nexus-slider__thumb" }, i))
+          ]
+        }
+      )
+    ] });
+  }
+);
+Slider.displayName = "Slider";
+
+export { Slider, sliderVariants };

package/dist/chunks/chunk-H2V7RHYV.mjs

@@ -0,0 +1,120 @@
+import { cn } from './chunk-MCKOWMLS.mjs';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var tagInputVariants = cva("nexus-tag-input", {
+  variants: {
+    size: {
+      sm: "nexus-tag-input--sm",
+      md: "nexus-tag-input--md",
+      lg: "nexus-tag-input--lg"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+var CloseIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8", strokeLinecap: "round" }) });
+var TagInput = React.forwardRef(
+  ({
+    className,
+    size,
+    value,
+    defaultValue = [],
+    onChange,
+    placeholder = "\uD0DC\uADF8 \uC785\uB825 \uD6C4 Enter",
+    max,
+    disabled,
+    allowDuplicates = false,
+    label,
+    description,
+    ...props
+  }, ref) => {
+    const [internalTags, setInternalTags] = React.useState(defaultValue);
+    const [inputValue, setInputValue] = React.useState("");
+    const inputRef = React.useRef(null);
+    const tags = value ?? internalTags;
+    const updateTags = React.useCallback(
+      (next) => {
+        if (!value) setInternalTags(next);
+        onChange?.(next);
+      },
+      [value, onChange]
+    );
+    const addTag = React.useCallback(
+      (tag) => {
+        const trimmed = tag.trim();
+        if (!trimmed) return;
+        if (!allowDuplicates && tags.includes(trimmed)) return;
+        if (max && tags.length >= max) return;
+        updateTags([...tags, trimmed]);
+        setInputValue("");
+      },
+      [tags, allowDuplicates, max, updateTags]
+    );
+    const removeTag = React.useCallback(
+      (index) => {
+        updateTags(tags.filter((_, i) => i !== index));
+      },
+      [tags, updateTags]
+    );
+    const handleKeyDown = React.useCallback(
+      (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          addTag(inputValue);
+        } else if (e.key === "Backspace" && !inputValue && tags.length > 0) {
+          removeTag(tags.length - 1);
+        }
+      },
+      [inputValue, tags, addTag, removeTag]
+    );
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("nexus-tag-input-wrapper", className), ...props, children: [
+      label && /* @__PURE__ */ jsx("label", { className: "nexus-tag-input__label", children: label }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            tagInputVariants({ size }),
+            disabled && "nexus-tag-input--disabled"
+          ),
+          onClick: () => inputRef.current?.focus(),
+          children: [
+            tags.map((tag, i) => /* @__PURE__ */ jsxs("span", { className: "nexus-tag-input__tag", children: [
+              /* @__PURE__ */ jsx("span", { children: tag }),
+              !disabled && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "nexus-tag-input__tag-close",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    removeTag(i);
+                  },
+                  "aria-label": `Remove ${tag}`,
+                  children: /* @__PURE__ */ jsx(CloseIcon, { className: "nexus-tag-input__tag-close-icon" })
+                }
+              )
+            ] }, `${tag}-${i}`)),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                className: "nexus-tag-input__input",
+                value: inputValue,
+                onChange: (e) => setInputValue(e.target.value),
+                onKeyDown: handleKeyDown,
+                placeholder: tags.length === 0 ? placeholder : "",
+                disabled,
+                "aria-label": label ?? "Tag input"
+              }
+            )
+          ]
+        }
+      ),
+      description && /* @__PURE__ */ jsx("p", { className: "nexus-tag-input__description", children: description })
+    ] });
+  }
+);
+TagInput.displayName = "TagInput";
+
+export { TagInput, tagInputVariants };