@nexub/react 1.0.0 → 1.1.0

package/dist/chunk-BMVAZIAJ.js

@@ -0,0 +1,187 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/DataTable/DataTable.tsx
+import * as React from "react";
+import {
+  useReactTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  flexRender
+} from "@tanstack/react-table";
+import { ArrowUp, ArrowDown, ChevronsUpDown } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TableRoot = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "w-full overflow-auto", children: /* @__PURE__ */ jsx(
+  "table",
+  {
+    ref,
+    className: cn("w-full caption-bottom text-sm", className),
+    ...props
+  }
+) }));
+TableRoot.displayName = "DataTable.TableRoot";
+var TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "thead",
+  {
+    ref,
+    className: cn("[&_tr]:border-b border-[var(--color-border-default)]", className),
+    ...props
+  }
+));
+TableHeader.displayName = "DataTable.TableHeader";
+var TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tbody",
+  {
+    ref,
+    className: cn("[&_tr:last-child]:border-0", className),
+    ...props
+  }
+));
+TableBody.displayName = "DataTable.TableBody";
+var TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tr",
+  {
+    ref,
+    className: cn(
+      "border-b border-[var(--color-border-default)] transition-colors hover:bg-[var(--color-bg-subtle)] data-[state=selected]:bg-[var(--color-bg-subtle)]",
+      className
+    ),
+    ...props
+  }
+));
+TableRow.displayName = "DataTable.TableRow";
+var TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "th",
+  {
+    ref,
+    className: cn(
+      "h-10 px-4 text-left align-middle text-xs font-medium text-[var(--color-text-muted)] [&:has([role=checkbox])]:pr-0",
+      className
+    ),
+    ...props
+  }
+));
+TableHead.displayName = "DataTable.TableHead";
+var TableCell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "td",
+  {
+    ref,
+    className: cn(
+      "px-4 py-3 align-middle text-[var(--color-text-primary)] [&:has([role=checkbox])]:pr-0",
+      className
+    ),
+    ...props
+  }
+));
+TableCell.displayName = "DataTable.TableCell";
+function DataTable({
+  columns,
+  data,
+  enableSorting = false,
+  enableRowSelection = false,
+  pagination,
+  className,
+  ...props
+}) {
+  const [sorting, setSorting] = React.useState([]);
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [paginationState, setPaginationState] = React.useState({
+    pageIndex: 0,
+    pageSize: pagination?.pageSize ?? 20
+  });
+  const tableState = React.useMemo(
+    () => ({
+      sorting: enableSorting ? sorting : void 0,
+      rowSelection: enableRowSelection ? rowSelection : void 0,
+      pagination: pagination ? paginationState : void 0
+    }),
+    [enableSorting, sorting, enableRowSelection, rowSelection, pagination, paginationState]
+  );
+  const table = useReactTable({
+    data,
+    columns,
+    state: tableState,
+    onSortingChange: enableSorting ? setSorting : void 0,
+    onRowSelectionChange: enableRowSelection ? setRowSelection : void 0,
+    onPaginationChange: pagination ? setPaginationState : void 0,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: enableSorting ? getSortedRowModel() : void 0,
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: pagination ? getPaginationRowModel() : void 0,
+    enableRowSelection,
+    manualPagination: false
+  });
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), ...props, children: [
+    /* @__PURE__ */ jsxs(TableRoot, { children: [
+      /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
+        TableHead,
+        {
+          "aria-sort": enableSorting && header.column.getCanSort() ? header.column.getIsSorted() === "asc" ? "ascending" : header.column.getIsSorted() === "desc" ? "descending" : "none" : void 0,
+          children: header.isPlaceholder ? null : enableSorting && header.column.getCanSort() ? /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: header.column.getToggleSortingHandler(),
+              className: "inline-flex items-center gap-1 hover:text-[var(--color-text-primary)]",
+              children: [
+                flexRender(header.column.columnDef.header, header.getContext()),
+                header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { size: "xs", "aria-hidden": "true" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { size: "xs", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { size: "xs", className: "opacity-40", "aria-hidden": "true" })
+              ]
+            }
+          ) : flexRender(header.column.columnDef.header, header.getContext())
+        },
+        header.id
+      )) }, headerGroup.id)) }),
+      /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
+        TableRow,
+        {
+          "data-state": enableRowSelection && row.getIsSelected() ? "selected" : void 0,
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+        },
+        row.id
+      )) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+        TableCell,
+        {
+          colSpan: columns.length,
+          className: "h-24 text-center text-[var(--color-text-muted)]",
+          children: "No results."
+        }
+      ) }) })
+    ] }),
+    pagination && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 text-sm text-[var(--color-text-muted)]", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Page ",
+        table.getState().pagination.pageIndex + 1,
+        " of ",
+        table.getPageCount()
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => table.previousPage(),
+            disabled: !table.getCanPreviousPage(),
+            className: "rounded border border-[var(--color-border-default)] px-3 py-2 min-h-[44px] disabled:opacity-50",
+            children: "Previous"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => table.nextPage(),
+            disabled: !table.getCanNextPage(),
+            className: "rounded border border-[var(--color-border-default)] px-3 py-2 min-h-[44px] disabled:opacity-50",
+            children: "Next"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+export {
+  DataTable
+};

package/dist/chunk-BTZW34TX.js

@@ -0,0 +1,76 @@
+'use client';
+import {
+  glassSurfaceClass
+} from "./chunk-ROZVVWPV.js";
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/TopNav/TopNav.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
+var Root = React.forwardRef(
+  ({ className, children, surface = "solid", ...props }, ref) => /* @__PURE__ */ jsx(
+    "header",
+    {
+      ref,
+      className: cn(
+        "sticky top-0 z-[var(--z-sticky,100)] flex h-[var(--size-nav-header,64px)] items-center border-b border-[var(--color-border-default)] bg-[var(--color-bg-default)] px-4",
+        surface === "glass" && glassSurfaceClass,
+        className
+      ),
+      "data-material": surface === "glass" ? "glass" : void 0,
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center gap-4", children })
+    }
+  )
+);
+Root.displayName = "TopNav.Root";
+var Logo = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("shrink-0 flex items-center", className), ...props })
+);
+Logo.displayName = "TopNav.Logo";
+var Menu = React.forwardRef(
+  ({ className, ...props }, ref) => (
+    // Scrolls horizontally on narrow screens rather than hiding the links.
+    /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref,
+        "aria-label": "Main",
+        className: cn("flex min-w-0 items-center gap-1 overflow-x-auto", className),
+        ...props
+      }
+    )
+  )
+);
+Menu.displayName = "TopNav.Menu";
+var Item = React.forwardRef(
+  ({ className, active, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        "aria-current": active ? "page" : void 0,
+        className: cn(
+          "inline-flex h-9 shrink-0 items-center rounded-md px-4 text-sm font-medium transition-colors",
+          active ? "bg-[var(--color-bg-subtle)] text-[var(--color-text-primary)]" : "text-[var(--color-text-muted)] hover:bg-[var(--color-bg-subtle)] hover:text-[var(--color-text-primary)]",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Item.displayName = "TopNav.Item";
+var Actions = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("ml-auto flex items-center gap-2", className), ...props })
+);
+Actions.displayName = "TopNav.Actions";
+var TopNav = { Root, Logo, Menu, Item, Actions };
+
+export {
+  TopNav
+};

package/dist/chunk-BUBYXAJK.js

@@ -0,0 +1,20 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Box/Box.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
+var Box = React.forwardRef(
+  ({ asChild = false, className, children, ...rest }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(Comp, { ref, className: cn(className), ...rest, children });
+  }
+);
+Box.displayName = "Box";
+
+export {
+  Box
+};

package/dist/chunk-BV3U3ATL.js

@@ -0,0 +1 @@
+'use client';

package/dist/chunk-BYCTJHXY.js

@@ -0,0 +1,75 @@
+'use client';
+import {
+  avatarVariants
+} from "./chunk-CPV367VS.js";
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/AvatarGroup/AvatarGroup.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var avatarGroupVariants = cva("flex items-center", {
+  variants: {
+    spacing: {
+      sm: "[&>*:not(:first-child)]:-ml-3",
+      md: "[&>*:not(:first-child)]:-ml-2",
+      lg: "[&>*:not(:first-child)]:-ml-1"
+    }
+  },
+  defaultVariants: {
+    spacing: "md"
+  }
+});
+var AvatarGroup = React.forwardRef(
+  ({ className, max, size = "md", spacing, children, ...props }, ref) => {
+    const items = React.Children.toArray(children);
+    const visibleItems = max !== void 0 ? items.slice(0, max) : items;
+    const overflowCount = max !== void 0 && items.length > max ? items.length - max : 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(avatarGroupVariants({ spacing }), className),
+        role: "group",
+        ...props,
+        children: [
+          visibleItems.map((child, index) => {
+            if (!React.isValidElement(child)) return child;
+            const childWithSize = React.cloneElement(
+              child,
+              { size }
+            );
+            return /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "ring-2 ring-[var(--color-bg-default)] rounded-full inline-flex",
+                children: childWithSize
+              },
+              child.key ?? index
+            );
+          }),
+          overflowCount > 0 && /* @__PURE__ */ jsx("span", { className: "ring-2 ring-[var(--color-bg-default)] rounded-full inline-flex", children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(avatarVariants({ size }), "font-medium"),
+              role: "img",
+              "aria-label": `${overflowCount} more`,
+              children: /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
+                "+",
+                overflowCount
+              ] })
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
+
+export {
+  avatarGroupVariants,
+  AvatarGroup
+};

package/dist/chunk-BYF223HT.js

@@ -0,0 +1,92 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Progress/Progress.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var progressTrackVariants = cva(
+  "relative w-full overflow-hidden rounded-full bg-[var(--color-bg-muted)]",
+  {
+    variants: {
+      size: {
+        sm: "h-1",
+        md: "h-2",
+        lg: "h-3"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var progressFillVariants = cva(
+  "h-full rounded-full transition-all duration-300 ease-in-out",
+  {
+    variants: {
+      tone: {
+        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)]"
+      },
+      animated: {
+        true: "bg-[length:200%_100%] animate-[progress-stripes_1s_linear_infinite]"
+      }
+    },
+    defaultVariants: {
+      tone: "neutral"
+    }
+  }
+);
+var Progress = React.forwardRef(
+  ({
+    className,
+    size,
+    tone = "neutral",
+    value = 0,
+    max = 100,
+    animated = false,
+    ...props
+  }, ref) => {
+    const clampedValue = Math.min(Math.max(value, 0), max);
+    const percentage = clampedValue / max * 100;
+    const isIndeterminate = value === void 0 || value === null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "progressbar",
+        "aria-valuenow": isIndeterminate ? void 0 : clampedValue,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        className: cn(progressTrackVariants({ size }), className),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              progressFillVariants({ tone }),
+              animated && "animate-pulse"
+            ),
+            style: { width: `${percentage}%` }
+          }
+        )
+      }
+    );
+  }
+);
+Progress.displayName = "Progress";
+
+export {
+  progressTrackVariants,
+  progressFillVariants,
+  Progress
+};

package/dist/chunk-CPV367VS.js

@@ -0,0 +1,106 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Avatar/Avatar.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var avatarVariants = cva(
+  "relative inline-flex items-center justify-center shrink-0 rounded-full overflow-hidden bg-[var(--color-bg-muted)] text-[var(--color-text-muted)] font-medium select-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 w-6 text-[10px]",
+        sm: "h-8 w-8 text-xs",
+        md: "h-10 w-10 text-sm",
+        lg: "h-12 w-12 text-base",
+        xl: "h-16 w-16 text-xl"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var badgeSizeMap = {
+  xs: "h-1.5 w-1.5",
+  sm: "h-2 w-2",
+  md: "h-2.5 w-2.5",
+  lg: "h-3 w-3",
+  xl: "h-3.5 w-3.5"
+};
+function getInitials(name) {
+  const parts = name.trim().split(/\s+/);
+  const first = parts[0] ?? "";
+  if (parts.length === 1) return first.charAt(0).toUpperCase();
+  const last = parts[parts.length - 1] ?? "";
+  return (first.charAt(0) + last.charAt(0)).toUpperCase();
+}
+var Avatar = React.forwardRef(
+  ({
+    className,
+    size = "md",
+    src,
+    name,
+    fallback,
+    badge,
+    badgeColor,
+    ...props
+  }, ref) => {
+    const [imgError, setImgError] = React.useState(false);
+    const showImage = Boolean(src) && !imgError;
+    const initials = name ? getInitials(name) : null;
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: cn(avatarVariants({ size }), className),
+        "aria-label": name ?? void 0,
+        role: "img",
+        ...props,
+        children: [
+          showImage ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src,
+              alt: name ?? "",
+              className: "h-full w-full object-cover",
+              onError: () => setImgError(true)
+            }
+          ) : initials ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: initials }) : fallback ? fallback : (
+            /* Generic user icon */
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                "aria-hidden": "true",
+                viewBox: "0 0 24 24",
+                fill: "currentColor",
+                className: "h-[55%] w-[55%]",
+                children: /* @__PURE__ */ jsx("path", { d: "M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z" })
+              }
+            )
+          ),
+          badge && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "absolute bottom-0 right-0 rounded-full ring-2 ring-[var(--color-bg-default)]",
+                badgeSizeMap[size ?? "md"],
+                badgeColor ?? "bg-[var(--color-semantic-success-default)]"
+              ),
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+
+export {
+  avatarVariants,
+  Avatar
+};

package/dist/chunk-CVBAWKNG.js

@@ -0,0 +1,124 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Input/Input.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var inputVariants = cva(
+  [
+    // The wrapper owns ALL focus styling (border + ring). Strip every possible
+    // focus indicator from the inner <input> so we never get a double ring.
+    "flex-1 min-w-0 bg-transparent",
+    "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)]",
+    "text-[var(--color-text-primary)]",
+    "disabled:opacity-50 disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-sm",
+        md: "text-sm",
+        lg: "text-base"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var inputWrapperVariants = cva(
+  [
+    "flex items-center w-full rounded-md border bg-[var(--color-bg-default)] transition-colors",
+    "border-[var(--color-border-input)]",
+    // On focus: the border shifts to the ring color and the ring is a
+    // semi-transparent halo. One hard 1 px border + one soft 2 px glow =
+    // a single clean focus indicator. No double ring.
+    "focus-within:outline-none focus-within:border-[var(--color-ring-default)] focus-within:ring-2 focus-within:ring-[color-mix(in_srgb,var(--color-ring-default)_25%,transparent)]",
+    "has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-8 px-3 gap-1.5",
+        md: "h-9 px-3 gap-2",
+        lg: "h-10 px-4 gap-2"
+      },
+      invalid: {
+        true: "border-[var(--color-danger-500)] focus-within:border-[var(--color-danger-500)] focus-within:ring-[color-mix(in_srgb,var(--color-danger-500)_25%,transparent)]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var addonVariants = cva(
+  [
+    "flex items-center self-stretch px-3 text-[var(--color-text-muted)] bg-[var(--color-bg-subtle)]",
+    "border-[var(--color-border-default)] shrink-0"
+  ],
+  {
+    variants: {
+      side: {
+        leading: "border-r rounded-l-md",
+        trailing: "border-l rounded-r-md"
+      }
+    }
+  }
+);
+var Input = React.forwardRef(
+  ({
+    className,
+    size,
+    invalid,
+    leadingAddon,
+    trailingAddon,
+    leadingIcon,
+    trailingIcon,
+    wrapperClassName,
+    disabled,
+    ...props
+  }, ref) => {
+    const hasAddon = Boolean(leadingAddon ?? trailingAddon);
+    const inputEl = /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        className: cn(inputVariants({ size }), className),
+        "aria-invalid": invalid ?? void 0,
+        disabled,
+        ...props
+      }
+    );
+    if (hasAddon) {
+      return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full rounded-md overflow-hidden border border-[var(--color-border-input)]", invalid && "border-[var(--color-danger-500)]"), children: [
+        leadingAddon && /* @__PURE__ */ jsx("span", { className: cn(addonVariants({ side: "leading" })), children: leadingAddon }),
+        /* @__PURE__ */ jsxs("div", { className: cn(inputWrapperVariants({ size, invalid }), "rounded-none border-0 ring-offset-0", wrapperClassName), children: [
+          leadingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-text-muted)]", children: leadingIcon }),
+          inputEl,
+          trailingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-text-muted)]", children: trailingIcon })
+        ] }),
+        trailingAddon && /* @__PURE__ */ jsx("span", { className: cn(addonVariants({ side: "trailing" })), children: trailingAddon })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs("div", { className: cn(inputWrapperVariants({ size, invalid }), wrapperClassName), children: [
+      leadingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-text-muted)]", children: leadingIcon }),
+      inputEl,
+      trailingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-text-muted)]", children: trailingIcon })
+    ] });
+  }
+);
+Input.displayName = "Input";
+
+export {
+  inputVariants,
+  inputWrapperVariants,
+  addonVariants,
+  Input
+};