@nexub/react 1.0.0 → 1.1.0

package/dist/chunk-4BTP4464.js

@@ -0,0 +1,92 @@
+'use client';
+import {
+  glassSurfaceClass
+} from "./chunk-ROZVVWPV.js";
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Drawer/Drawer.tsx
+import * as React from "react";
+import { Drawer as VaulDrawer } from "vaul";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Root = VaulDrawer.Root;
+var Trigger = VaulDrawer.Trigger;
+var Portal = VaulDrawer.Portal;
+var Close = VaulDrawer.Close;
+var Overlay = VaulDrawer.Overlay;
+var Content = React.forwardRef(({ className, children, side = "right", surface = "solid", ...props }, ref) => {
+  const sideMap = {
+    right: "inset-y-0 right-0 h-full w-3/4 max-w-sm border-l",
+    left: "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r",
+    top: "inset-x-0 top-0 w-full border-b",
+    bottom: "inset-x-0 bottom-0 w-full border-t rounded-t-2xl"
+  };
+  return /* @__PURE__ */ jsxs(
+    VaulDrawer.Content,
+    {
+      ref,
+      className: cn(
+        "fixed z-[var(--z-modal)] flex flex-col bg-[var(--color-bg-default)] shadow-xl focus:outline-none",
+        sideMap[side],
+        surface === "glass" && glassSurfaceClass,
+        className
+      ),
+      "data-material": surface === "glass" ? "glass" : void 0,
+      ...props,
+      children: [
+        side === "bottom" && /* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 h-2 w-20 rounded-full bg-[var(--color-border-default)]" }),
+        children
+      ]
+    }
+  );
+});
+Content.displayName = "Drawer.Content";
+var Title = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    VaulDrawer.Title,
+    {
+      ref,
+      className: cn("text-lg font-semibold text-[var(--color-text-primary)]", className),
+      ...props
+    }
+  )
+);
+Title.displayName = "Drawer.Title";
+var Description = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    VaulDrawer.Description,
+    {
+      ref,
+      className: cn("text-sm text-[var(--color-text-muted)]", className),
+      ...props
+    }
+  )
+);
+Description.displayName = "Drawer.Description";
+var Header = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-1.5 p-6", className), ...props })
+);
+Header.displayName = "Drawer.Header";
+var Footer = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mt-auto flex flex-col gap-2 p-6", className), ...props })
+);
+Footer.displayName = "Drawer.Footer";
+var Drawer = {
+  Root,
+  Trigger,
+  Portal,
+  Overlay,
+  Content,
+  Close,
+  Title,
+  Description,
+  Header,
+  Footer
+};
+var Sheet = Drawer;
+
+export {
+  Drawer,
+  Sheet
+};

package/dist/chunk-4NGB7XIM.js

@@ -0,0 +1,88 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Sidebar/Sidebar.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Root = React.forwardRef(
+  ({ className, collapsed = false, ...props }, ref) => /* @__PURE__ */ jsx(
+    "nav",
+    {
+      ref,
+      "aria-label": "Sidebar",
+      "data-collapsed": collapsed,
+      className: cn(
+        "group/sidebar flex flex-col gap-1 bg-[var(--color-bg-default)] border-r border-[var(--color-border-default)] transition-all duration-200",
+        collapsed ? "w-[var(--size-nav-sidebar-collapsed,56px)]" : "w-[var(--size-nav-sidebar,240px)]",
+        "h-full overflow-y-auto overflow-x-hidden",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Root.displayName = "Sidebar.Root";
+var Group = React.forwardRef(
+  ({ className, label, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-0.5 p-2", className), ...props, children: [
+    label && /* @__PURE__ */ jsx("p", { className: "px-2 py-1 text-xs font-semibold uppercase tracking-wider text-[var(--color-text-muted)]", children: label }),
+    children
+  ] })
+);
+Group.displayName = "Sidebar.Group";
+var Item = React.forwardRef(
+  ({ className, icon, active, asChild, children, ...props }, ref) => {
+    const child = asChild && React.isValidElement(children) ? children : null;
+    const label = child ? child.props.children : children;
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", "aria-hidden": "true", children: icon }),
+      /* @__PURE__ */ jsx("span", { className: "flex-1 truncate group-data-[collapsed=true]/sidebar:sr-only", children: label })
+    ] });
+    const itemProps = {
+      ref,
+      "aria-current": active ? "page" : void 0,
+      // Native tooltip for the icon-only collapsed state.
+      title: typeof label === "string" ? label : void 0,
+      className: cn(
+        "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
+        active ? "bg-[var(--color-fill-primary)] text-white" : "text-[var(--color-text-primary)] hover:bg-[var(--color-bg-subtle)]",
+        className
+      ),
+      ...props
+    };
+    return child ? /* @__PURE__ */ jsx(Slot, { ...itemProps, children: React.cloneElement(child, void 0, content) }) : /* @__PURE__ */ jsx("a", { ...itemProps, children: content });
+  }
+);
+Item.displayName = "Sidebar.Item";
+var Separator = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "hr",
+    {
+      ref,
+      className: cn("my-2 border-[var(--color-border-default)]", className),
+      ...props
+    }
+  )
+);
+Separator.displayName = "Sidebar.Separator";
+var Footer = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "mt-auto border-t border-[var(--color-border-default)] p-4",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Footer.displayName = "Sidebar.Footer";
+var Sidebar = { Root, Group, Item, Separator, Footer };
+
+export {
+  Sidebar
+};

package/dist/chunk-4OCXGNP3.js

@@ -0,0 +1,85 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/StatusPill/StatusPill.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var statusPillVariants = cva(
+  "inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium select-none",
+  {
+    variants: {
+      tone: {
+        neutral: "bg-[var(--color-neutral-100)] text-[var(--color-neutral-700)] border border-[var(--color-neutral-200)]",
+        info: "bg-[var(--color-semantic-info-default)]/10 text-[var(--color-semantic-info-default)] border border-[var(--color-semantic-info-default)]/20",
+        success: "bg-[var(--color-semantic-success-default)]/10 text-[var(--color-semantic-success-default)] border border-[var(--color-semantic-success-default)]/20",
+        warning: "bg-[var(--color-semantic-warning-default)]/10 text-[var(--color-semantic-warning-default)] border border-[var(--color-semantic-warning-default)]/20",
+        danger: "bg-[var(--color-semantic-error-default)]/10 text-[var(--color-semantic-error-default)] border border-[var(--color-semantic-error-default)]/20",
+        leap: "bg-[var(--color-leap-500)]/10 text-[var(--color-leap-700)] border border-[var(--color-leap-500)]/20",
+        bookub: "bg-[var(--color-bookub-500)]/10 text-[var(--color-bookub-700)] border border-[var(--color-bookub-500)]/20",
+        payub: "bg-[var(--color-payub-500)]/10 text-[var(--color-payub-700)] border border-[var(--color-payub-500)]/20",
+        founderub: "bg-[var(--color-founderub-500)]/10 text-[var(--color-founderub-700)] border border-[var(--color-founderub-500)]/20"
+      }
+    },
+    defaultVariants: {
+      tone: "neutral"
+    }
+  }
+);
+var dotColorMap = {
+  neutral: "bg-[var(--color-neutral-500)]",
+  info: "bg-[var(--color-semantic-info-default)]",
+  success: "bg-[var(--color-semantic-success-default)]",
+  warning: "bg-[var(--color-semantic-warning-default)]",
+  danger: "bg-[var(--color-semantic-error-default)]",
+  leap: "bg-[var(--color-leap-500)]",
+  bookub: "bg-[var(--color-bookub-500)]",
+  payub: "bg-[var(--color-payub-500)]",
+  founderub: "bg-[var(--color-founderub-500)]"
+};
+var pulseTones = ["success", "info"];
+var StatusPill = React.forwardRef(
+  ({ className, tone = "neutral", label, dot = false, ...props }, ref) => {
+    const shouldPulse = dot && pulseTones.includes(tone);
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: cn(statusPillVariants({ tone }), className),
+        ...props,
+        children: [
+          dot && /* @__PURE__ */ jsxs("span", { className: "relative inline-flex h-2 w-2 shrink-0", children: [
+            shouldPulse && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "animate-ping absolute inline-flex h-full w-full rounded-full opacity-75",
+                  dotColorMap[tone]
+                ),
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "relative inline-flex rounded-full h-2 w-2",
+                  dotColorMap[tone]
+                )
+              }
+            )
+          ] }),
+          label
+        ]
+      }
+    );
+  }
+);
+StatusPill.displayName = "StatusPill";
+
+export {
+  statusPillVariants,
+  StatusPill
+};

package/dist/chunk-52KTX5A7.js

@@ -0,0 +1,119 @@
+'use client';
+import {
+  inputWrapperVariants
+} from "./chunk-CVBAWKNG.js";
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/NumberInput/NumberInput.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var formatValue = (v, precision) => {
+  if (precision !== void 0) return v.toFixed(precision);
+  return String(v);
+};
+var clampValue = (v, min, max) => {
+  let result = v;
+  if (min !== void 0 && result < min) result = min;
+  if (max !== void 0 && result > max) result = max;
+  return result;
+};
+var NumberInput = React.forwardRef(
+  ({
+    className,
+    size = "md",
+    min,
+    max,
+    step = 1,
+    precision,
+    showSteppers = false,
+    value,
+    defaultValue = 0,
+    onChange,
+    invalid,
+    disabled,
+    ...props
+  }, ref) => {
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const controlled = value !== void 0;
+    const currentValue = controlled ? value : internalValue;
+    const commit = (next) => {
+      const clamped = clampValue(next, min, max);
+      if (!controlled) setInternalValue(clamped);
+      onChange?.(clamped);
+    };
+    const handleChange = (e) => {
+      const parsed = parseFloat(e.target.value);
+      if (!isNaN(parsed)) commit(parsed);
+    };
+    const increment = () => commit(currentValue + step);
+    const decrement = () => commit(currentValue - step);
+    const stepperButtonClass = cn(
+      "flex items-center justify-center px-2 self-stretch shrink-0",
+      "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]",
+      "hover:bg-[var(--color-bg-subtle)] transition-colors",
+      "disabled:opacity-50 disabled:pointer-events-none",
+      "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--color-ring-default)]"
+    );
+    return /* @__PURE__ */ jsxs("div", { className: cn(inputWrapperVariants({ size, invalid }), "pr-0 gap-0", className), children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          type: "number",
+          value: formatValue(currentValue, precision),
+          onChange: handleChange,
+          min,
+          max,
+          step,
+          disabled,
+          "aria-invalid": invalid ?? void 0,
+          className: cn(
+            // Wrapper owns ALL focus styling — strip every indicator from the inner input.
+            "flex-1 min-w-0 bg-transparent text-[var(--color-text-primary)]",
+            "border-0 shadow-none",
+            "outline-none focus:outline-none focus-visible:outline-none",
+            "ring-0 focus:ring-0 focus-visible:ring-0",
+            "placeholder:text-[var(--color-text-placeholder)]",
+            "disabled:opacity-50 disabled:cursor-not-allowed",
+            "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+            size === "sm" ? "text-sm" : size === "lg" ? "text-base" : "text-sm"
+          ),
+          ...props
+        }
+      ),
+      showSteppers && /* @__PURE__ */ jsxs("div", { className: "flex flex-col border-l border-[var(--color-border-default)] self-stretch", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            onClick: increment,
+            disabled: disabled || max !== void 0 && currentValue >= max,
+            className: cn(stepperButtonClass, "border-b border-[var(--color-border-default)] text-xs leading-none flex-1"),
+            "aria-label": "Increment",
+            children: "\u25B2"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            onClick: decrement,
+            disabled: disabled || min !== void 0 && currentValue <= min,
+            className: cn(stepperButtonClass, "text-xs leading-none flex-1"),
+            "aria-label": "Decrement",
+            children: "\u25BC"
+          }
+        )
+      ] })
+    ] });
+  }
+);
+NumberInput.displayName = "NumberInput";
+
+export {
+  NumberInput
+};

package/dist/chunk-6AZP6VBM.js

@@ -0,0 +1,62 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/EmptyState/EmptyState.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var Root = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex flex-col items-center justify-center gap-4 py-16 text-center",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Root.displayName = "EmptyState.Root";
+var Illustration = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("text-[var(--color-text-muted)]", className),
+      ...props
+    }
+  )
+);
+Illustration.displayName = "EmptyState.Illustration";
+var Title = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "h3",
+    {
+      ref,
+      className: cn("text-lg font-semibold text-[var(--color-text-primary)]", className),
+      ...props
+    }
+  )
+);
+Title.displayName = "EmptyState.Title";
+var Description = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    ref,
+    className: cn("max-w-sm text-sm text-[var(--color-text-muted)]", className),
+    ...props
+  }
+));
+Description.displayName = "EmptyState.Description";
+var Actions = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center gap-2", className), ...props })
+);
+Actions.displayName = "EmptyState.Actions";
+var EmptyState = { Root, Illustration, Title, Description, Actions };
+
+export {
+  EmptyState
+};

package/dist/chunk-6Y734SXN.js

@@ -0,0 +1,51 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Container/Container.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var containerVariants = cva("mx-auto w-full", {
+  variants: {
+    size: {
+      sm: "max-w-[var(--container-sm,640px)]",
+      md: "max-w-[var(--container-md,768px)]",
+      lg: "max-w-[var(--container-lg,1024px)]",
+      xl: "max-w-[var(--container-xl,1280px)]",
+      "2xl": "max-w-[var(--container-2xl,1536px)]",
+      nexub: "max-w-[var(--container-nexub,1440px)]",
+      prose: "max-w-[var(--container-prose,65ch)]"
+    },
+    paddingX: {
+      true: "px-4 sm:px-6 lg:px-8",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    size: "xl",
+    paddingX: true
+  }
+});
+var Container = React.forwardRef(
+  ({ size, paddingX = true, asChild = false, className, children, ...rest }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: cn(containerVariants({ size, paddingX }), className),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Container.displayName = "Container";
+
+export {
+  containerVariants,
+  Container
+};

package/dist/chunk-7B4FS7VQ.js

@@ -0,0 +1,150 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Select/Select.tsx
+import * as React from "react";
+import * as RadixSelect from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Root2 = RadixSelect.Root;
+var Group2 = RadixSelect.Group;
+var Value2 = RadixSelect.Value;
+var Trigger2 = React.forwardRef(
+  ({ className, children, invalid, ...props }, ref) => /* @__PURE__ */ jsxs(
+    RadixSelect.Trigger,
+    {
+      ref,
+      className: cn(
+        "flex h-9 w-full items-center justify-between rounded-md border border-[var(--color-border-input)] bg-[var(--color-bg-default)] px-3 py-2 text-sm",
+        // Border shifts to ring color on focus; ring is a semi-transparent halo.
+        "placeholder:text-[var(--color-text-muted)] focus:outline-none focus:border-[var(--color-ring-default)] focus:ring-2 focus:ring-[color-mix(in_srgb,var(--color-ring-default)_25%,transparent)]",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        invalid && "border-[var(--color-semantic-error-default)] focus:border-[var(--color-semantic-error-default)] focus:ring-[color-mix(in_srgb,var(--color-semantic-error-default)_25%,transparent)]",
+        "[&>span]:line-clamp-1",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(RadixSelect.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { size: "sm", className: "opacity-50", "aria-hidden": "true" }) })
+      ]
+    }
+  )
+);
+Trigger2.displayName = "Select.Trigger";
+var ScrollUpButton2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixSelect.ScrollUpButton,
+    {
+      ref,
+      className: cn("flex cursor-default items-center justify-center py-1", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronUp, { size: "sm", "aria-hidden": "true" })
+    }
+  )
+);
+ScrollUpButton2.displayName = "Select.ScrollUpButton";
+var ScrollDownButton2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixSelect.ScrollDownButton,
+    {
+      ref,
+      className: cn("flex cursor-default items-center justify-center py-1", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronDown, { size: "sm", "aria-hidden": "true" })
+    }
+  )
+);
+ScrollDownButton2.displayName = "Select.ScrollDownButton";
+var Content2 = React.forwardRef(
+  ({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(RadixSelect.Portal, { children: /* @__PURE__ */ jsxs(
+    RadixSelect.Content,
+    {
+      ref,
+      className: cn(
+        "relative z-[var(--z-popover)] max-h-96 min-w-32 overflow-hidden rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-default)] shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 w-[var(--radix-select-trigger-width)]",
+        className
+      ),
+      position,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ScrollUpButton2, {}),
+        /* @__PURE__ */ jsx(
+          RadixSelect.Viewport,
+          {
+            className: cn(
+              "p-1",
+              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(ScrollDownButton2, {})
+      ]
+    }
+  ) })
+);
+Content2.displayName = "Select.Content";
+var Label2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixSelect.Label,
+    {
+      ref,
+      className: cn("px-2 py-1.5 text-xs font-semibold text-[var(--color-text-muted)]", className),
+      ...props
+    }
+  )
+);
+Label2.displayName = "Select.Label";
+var Item2 = React.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    RadixSelect.Item,
+    {
+      ref,
+      className: cn(
+        "relative flex w-full cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none",
+        "focus:bg-[var(--color-bg-subtle)] focus:text-[var(--color-text-primary)]",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(RadixSelect.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: "xs", "aria-hidden": "true" }) }) }),
+        /* @__PURE__ */ jsx(RadixSelect.ItemText, { children })
+      ]
+    }
+  )
+);
+Item2.displayName = "Select.Item";
+var Separator2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixSelect.Separator,
+    {
+      ref,
+      className: cn("-mx-1 my-1 h-px bg-[var(--color-border-default)]", className),
+      ...props
+    }
+  )
+);
+Separator2.displayName = "Select.Separator";
+var Select = {
+  Root: Root2,
+  Group: Group2,
+  Value: Value2,
+  Trigger: Trigger2,
+  ScrollUpButton: ScrollUpButton2,
+  ScrollDownButton: ScrollDownButton2,
+  Content: Content2,
+  Label: Label2,
+  Item: Item2,
+  Separator: Separator2
+};
+
+export {
+  Select
+};