@nexub/react 1.0.0 → 1.2.0

package/dist/chunk-N2GIMMTF.js

@@ -0,0 +1,98 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Button/Button.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { Loader2 } from "@nexub/icons";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var toneClasses = {
+  neutral: "bg-[var(--color-bg-subtle)] text-[var(--color-text-primary)] hover:bg-[var(--color-bg-muted)]",
+  info: "bg-[var(--color-fill-info)] text-white hover:bg-[var(--color-fill-info-hover)]",
+  success: "bg-[var(--color-fill-success)] text-white hover:bg-[var(--color-fill-success-hover)]",
+  warning: "bg-[var(--color-fill-warning)] text-white hover:bg-[var(--color-fill-warning-hover)]",
+  danger: "bg-[var(--color-fill-danger)] text-white hover:bg-[var(--color-fill-danger-hover)]",
+  leap: "bg-[var(--color-fill-leap)] text-white hover:bg-[var(--color-fill-leap-hover)]",
+  bookub: "bg-[var(--color-fill-bookub)] text-white hover:bg-[var(--color-fill-bookub-hover)]",
+  payub: "bg-[var(--color-fill-payub)] text-white hover:bg-[var(--color-fill-payub-hover)]",
+  founderub: "bg-[var(--color-fill-founderub)] text-white hover:bg-[var(--color-fill-founderub-hover)]"
+};
+var buttonVariants = cva(
+  [
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)] focus-visible:ring-offset-2 ring-offset-[var(--color-ring-offset)]",
+    "disabled:opacity-50 disabled:pointer-events-none",
+    "select-none"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: "bg-[var(--color-fill-primary)] text-white hover:bg-[var(--color-fill-primary-hover)]",
+        secondary: "bg-[var(--color-bg-subtle)] text-[var(--color-text-primary)] border border-[var(--color-border-default)] hover:bg-[var(--color-bg-muted)]",
+        subtle: "bg-[var(--color-bg-subtle)] text-[var(--color-text-primary)] hover:bg-[var(--color-bg-muted)]",
+        ghost: "bg-transparent text-[var(--color-text-primary)] hover:bg-[var(--color-bg-subtle)]",
+        outline: "bg-transparent border border-[var(--color-border-default)] text-[var(--color-text-primary)] hover:bg-[var(--color-bg-subtle)]",
+        destructive: "bg-[var(--color-fill-danger)] text-white hover:bg-[var(--color-fill-danger-hover)]",
+        accent: "bg-[var(--color-fill-accent)] text-white hover:bg-[var(--color-fill-accent-hover)]",
+        link: "bg-transparent text-[var(--color-text-primary)] underline-offset-4 hover:underline"
+      },
+      size: {
+        xs: "h-7 px-2.5 text-xs",
+        sm: "h-8 px-3 text-sm",
+        md: "h-9 px-4 text-sm",
+        lg: "h-10 px-5 text-base",
+        xl: "h-12 px-6 text-base"
+      },
+      fullWidth: {
+        true: "w-full"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    tone,
+    loading = false,
+    fullWidth,
+    leadingIcon,
+    trailingIcon,
+    asChild = false,
+    disabled,
+    children,
+    ...props
+  }, ref) => {
+    const sharedProps = {
+      className: cn(
+        buttonVariants({ variant, size, fullWidth }),
+        tone ? toneClasses[tone] : "",
+        className
+      ),
+      "data-tone": tone,
+      ...props
+    };
+    if (asChild) {
+      return /* @__PURE__ */ jsx(Slot, { ref, ...sharedProps, children });
+    }
+    return /* @__PURE__ */ jsxs("button", { ref, disabled: disabled ?? loading, ...sharedProps, children: [
+      loading ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" }) : leadingIcon,
+      children,
+      !loading && trailingIcon
+    ] });
+  }
+);
+Button.displayName = "Button";
+
+export {
+  buttonVariants,
+  Button
+};

package/dist/chunk-NAIZ7R2L.js

@@ -0,0 +1,59 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/ErrorState/ErrorState.tsx
+import * as React from "react";
+import { AlertTriangle, AlertCircle, Info } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var toneConfig = {
+  error: {
+    icon: /* @__PURE__ */ jsx(AlertCircle, { size: "xl", "aria-hidden": "true" }),
+    color: "text-[var(--color-semantic-error-default)]"
+  },
+  warning: {
+    icon: /* @__PURE__ */ jsx(AlertTriangle, { size: "xl", "aria-hidden": "true" }),
+    color: "text-[var(--color-semantic-warning-default)]"
+  },
+  info: {
+    icon: /* @__PURE__ */ jsx(Info, { size: "xl", "aria-hidden": "true" }),
+    color: "text-[var(--color-semantic-info-default)]"
+  }
+};
+var ErrorState = React.forwardRef(
+  ({ className, title, description, tone = "error", onRetry, ...props }, ref) => {
+    const { icon, color } = toneConfig[tone];
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-col items-center justify-center gap-4 py-16 text-center",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: color, children: icon }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "max-w-sm text-sm text-[var(--color-text-muted)]", children: description })
+          ] }),
+          onRetry && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onRetry,
+              className: "inline-flex h-9 items-center justify-center rounded-md bg-[var(--color-fill-primary)] px-4 text-sm font-medium text-white hover:bg-[var(--color-fill-primary-hover)] transition-colors",
+              children: "Try again"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ErrorState.displayName = "ErrorState";
+
+export {
+  ErrorState
+};

package/dist/chunk-NHUQLIHL.js

@@ -0,0 +1,9 @@
+'use client';
+
+// src/hooks/useIsomorphicLayoutEffect.ts
+import { useEffect, useLayoutEffect } from "react";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
+export {
+  useIsomorphicLayoutEffect
+};

package/dist/chunk-NZ7UK3G6.js

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

package/dist/chunk-OUBBOOZE.js

@@ -0,0 +1,34 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/FormError/FormError.tsx
+import * as React from "react";
+import { AlertCircle } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FormError = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "p",
+      {
+        ref,
+        role: "alert",
+        className: cn(
+          "flex items-center gap-1.5 text-sm text-[var(--color-danger-600)] leading-snug",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+          children
+        ]
+      }
+    );
+  }
+);
+FormError.displayName = "FormError";
+
+export {
+  FormError
+};

package/dist/chunk-OZPPL76D.js

@@ -0,0 +1,82 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Toolbar/Toolbar.tsx
+import * as React from "react";
+import * as RadixToolbar from "@radix-ui/react-toolbar";
+import { jsx } from "react/jsx-runtime";
+var Root2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixToolbar.Root,
+    {
+      ref,
+      className: cn(
+        "flex items-center gap-1 rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-default)] p-1",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Root2.displayName = "Toolbar.Root";
+var ToolbarButton = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixToolbar.Button,
+    {
+      ref,
+      className: cn(
+        "inline-flex h-8 items-center justify-center rounded-md px-3 text-sm font-medium transition-colors",
+        "hover:bg-[var(--color-bg-subtle)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)]",
+        "disabled:pointer-events-none disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  )
+);
+ToolbarButton.displayName = "Toolbar.Button";
+var Separator2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixToolbar.Separator,
+    {
+      ref,
+      className: cn("mx-1 w-px self-stretch bg-[var(--color-border-default)]", className),
+      ...props
+    }
+  )
+);
+Separator2.displayName = "Toolbar.Separator";
+var ToggleGroup2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixToolbar.ToggleGroup,
+    {
+      ref,
+      className: cn("flex items-center gap-0.5", className),
+      ...props
+    }
+  )
+);
+ToggleGroup2.displayName = "Toolbar.ToggleGroup";
+var ToggleItem2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixToolbar.ToggleItem,
+    {
+      ref,
+      className: cn(
+        "inline-flex h-8 w-8 items-center justify-center rounded-md text-sm transition-colors",
+        "hover:bg-[var(--color-bg-subtle)] data-[state=on]:bg-[var(--color-bg-subtle)]",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+ToggleItem2.displayName = "Toolbar.ToggleItem";
+var Toolbar = { Root: Root2, Button: ToolbarButton, Separator: Separator2, ToggleGroup: ToggleGroup2, ToggleItem: ToggleItem2 };
+
+export {
+  Toolbar
+};

package/dist/chunk-P6BZNFVU.js

@@ -0,0 +1,38 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Slider/Slider.tsx
+import * as React from "react";
+import * as RadixSlider from "@radix-ui/react-slider";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Slider = React.forwardRef(
+  ({ className, thumbLabels, "aria-label": ariaLabel, ...props }, ref) => {
+    const count = (props.value ?? props.defaultValue ?? [0]).length;
+    return /* @__PURE__ */ jsxs(
+      RadixSlider.Root,
+      {
+        ref,
+        className: cn("relative flex w-full touch-none select-none items-center", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(RadixSlider.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-[var(--color-bg-muted)]", children: /* @__PURE__ */ jsx(RadixSlider.Range, { className: "absolute h-full bg-[var(--color-fill-primary)]" }) }),
+          Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx(
+            RadixSlider.Thumb,
+            {
+              "aria-label": thumbLabels?.[i] ?? ariaLabel,
+              className: "block h-5 w-5 rounded-full border-2 border-[var(--color-fill-primary)] bg-[var(--color-bg-default)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)] focus-visible:ring-offset-2 ring-offset-[var(--color-ring-offset)] disabled:pointer-events-none disabled:opacity-50"
+            },
+            i
+          ))
+        ]
+      }
+    );
+  }
+);
+Slider.displayName = "Slider";
+
+export {
+  Slider
+};

package/dist/chunk-PANDAMD2.js

@@ -0,0 +1,54 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/CheckList/CheckList.tsx
+import * as React from "react";
+import { Check } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CheckList = React.forwardRef(
+  ({ className, items, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "ul",
+      {
+        ref,
+        className: cn("flex flex-col gap-2 list-none m-0 p-0", className),
+        ...props,
+        children: [
+          items?.map((item, index) => /* @__PURE__ */ jsx(CheckListItem, { children: item }, index)),
+          children
+        ]
+      }
+    );
+  }
+);
+CheckList.displayName = "CheckList";
+var CheckListItem = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        ref,
+        className: cn("flex items-start gap-2 text-[var(--color-text-primary)]", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 inline-flex items-center justify-center mt-0.5 h-4 w-4 rounded-full bg-[var(--color-semantic-success-default)]/10", children: /* @__PURE__ */ jsx(
+            Check,
+            {
+              className: "h-3 w-3 text-[var(--color-semantic-success-default)]",
+              "aria-hidden": "true"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm", children })
+        ]
+      }
+    );
+  }
+);
+CheckListItem.displayName = "CheckListItem";
+
+export {
+  CheckList,
+  CheckListItem
+};

package/dist/chunk-PBLEGOLM.js

@@ -0,0 +1,71 @@
+'use client';
+import {
+  glassSurfaceClass
+} from "./chunk-ROZVVWPV.js";
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Card/Card.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 cardVariants = cva(
+  "rounded-lg bg-[var(--color-bg-default)] border border-[var(--color-border-default)] text-[var(--color-text-primary)]",
+  {
+    variants: {
+      variant: {
+        flat: "",
+        surface: "shadow-[var(--shadow-card,0_1px_3px_0_rgb(0_0_0/0.1),0_1px_2px_-1px_rgb(0_0_0/0.1))]",
+        interactive: "cursor-pointer shadow-[var(--shadow-sm)] transition-all duration-200 hover:shadow-[var(--shadow-md)] hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)] focus-visible:ring-offset-2 ring-offset-[var(--color-ring-offset)]"
+      },
+      // Material. 'glass' needs data-material="glass" on the element (set in the
+      // component) for the --glass-* vars to resolve. Single box-shadow carries
+      // both the inset specular highlight and the drop shadow so neither clobbers
+      // the other. Listed after `variant` so tailwind-merge lets it win on bg/border.
+      surface: {
+        solid: "",
+        glass: glassSurfaceClass
+      }
+    },
+    defaultVariants: {
+      variant: "flat",
+      surface: "solid"
+    }
+  }
+);
+var toneBorderMap = {
+  neutral: "",
+  info: "border-l-4 border-l-[var(--color-semantic-info-default)]",
+  success: "border-l-4 border-l-[var(--color-semantic-success-default)]",
+  warning: "border-l-4 border-l-[var(--color-semantic-warning-default)]",
+  danger: "border-l-4 border-l-[var(--color-semantic-error-default)]",
+  leap: "border-l-4 border-l-[var(--color-leap-500)]",
+  bookub: "border-l-4 border-l-[var(--color-bookub-500)]",
+  payub: "border-l-4 border-l-[var(--color-payub-500)]",
+  founderub: "border-l-4 border-l-[var(--color-founderub-500)]"
+};
+var Card = React.forwardRef(
+  ({ className, variant = "flat", surface = "solid", tone, asChild = false, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    const toneStyle = tone ? toneBorderMap[tone] : "";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: cn(cardVariants({ variant, surface }), toneStyle, className),
+        "data-tone": tone,
+        "data-material": surface === "glass" ? "glass" : void 0,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+
+export {
+  cardVariants,
+  Card
+};

package/dist/chunk-PER3O4FD.js

@@ -0,0 +1,33 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Kbd/Kbd.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var Kbd = React.forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "kbd",
+      {
+        ref,
+        className: cn(
+          "inline-flex items-center justify-center font-mono text-xs",
+          "px-1.5 py-0.5 min-w-[1.5rem]",
+          "rounded border border-[var(--color-border-default)]",
+          "bg-[var(--color-bg-subtle)] text-[var(--color-text-secondary)]",
+          "shadow-[0_1px_0_var(--color-border-default)]",
+          className
+        ),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Kbd.displayName = "Kbd";
+
+export {
+  Kbd
+};

package/dist/chunk-PICMOOAZ.js

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

package/dist/chunk-POBSY7EZ.js

@@ -0,0 +1,155 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/FileUpload/FileUpload.tsx
+import * as React from "react";
+import { Upload, X } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FileUploadContext = React.createContext(null);
+function useFileUpload() {
+  const ctx = React.useContext(FileUploadContext);
+  if (!ctx) throw new Error("FileUpload parts must be used inside FileUpload.Root");
+  return ctx;
+}
+var Root = React.forwardRef(
+  ({ className, accept, maxFiles, onFilesChange, children, ...props }, ref) => {
+    const [files, setFiles] = React.useState([]);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const addFiles = React.useCallback(
+      (newFiles) => {
+        setFiles((prev) => {
+          const next = [...prev, ...newFiles].slice(0, maxFiles);
+          onFilesChange?.(next);
+          return next;
+        });
+      },
+      [maxFiles, onFilesChange]
+    );
+    const removeFile = React.useCallback(
+      (index) => {
+        setFiles((prev) => {
+          const next = prev.filter((_, i) => i !== index);
+          onFilesChange?.(next);
+          return next;
+        });
+      },
+      [onFilesChange]
+    );
+    const contextValue = React.useMemo(
+      () => ({ accept, maxFiles, onFilesChange, files, addFiles, removeFile, isDragging, setIsDragging }),
+      [accept, maxFiles, onFilesChange, files, addFiles, removeFile, isDragging, setIsDragging]
+    );
+    return /* @__PURE__ */ jsx(FileUploadContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-4", className), ...props, children }) });
+  }
+);
+Root.displayName = "FileUpload.Root";
+var Dropzone = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { accept, addFiles, isDragging, setIsDragging } = useFileUpload();
+    const inputRef = React.useRef(null);
+    function handleDrop(e) {
+      e.preventDefault();
+      setIsDragging(false);
+      const dropped = Array.from(e.dataTransfer.files);
+      addFiles(dropped);
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "button",
+        tabIndex: 0,
+        "aria-label": "Upload files",
+        onClick: () => inputRef.current?.click(),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") inputRef.current?.click();
+        },
+        onDragOver: (e) => {
+          e.preventDefault();
+          setIsDragging(true);
+        },
+        onDragLeave: () => setIsDragging(false),
+        onDrop: handleDrop,
+        className: cn(
+          "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed p-8 text-center transition-colors",
+          isDragging ? "border-[var(--color-brand-primary-500)] bg-[var(--color-brand-primary-500)]/5" : "border-[var(--color-border-input)] hover:border-[var(--color-brand-primary-500)] hover:bg-[var(--color-bg-subtle)]",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Upload, { size: "lg", className: "text-[var(--color-text-muted)]", "aria-hidden": "true" }),
+          children ?? /* @__PURE__ */ jsxs("p", { className: "text-sm text-[var(--color-text-muted)]", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-semibold text-[var(--color-brand-primary-500)]", children: "Click to upload" }),
+            " ",
+            "or drag and drop"
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "file",
+              className: "sr-only",
+              multiple: true,
+              accept: accept?.join(","),
+              onChange: (e) => {
+                if (e.target.files) addFiles(Array.from(e.target.files));
+                e.target.value = "";
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Dropzone.displayName = "FileUpload.Dropzone";
+var List = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { files } = useFileUpload();
+    if (files.length === 0) return null;
+    return /* @__PURE__ */ jsx("ul", { ref, className: cn("flex flex-col gap-2", className), ...props });
+  }
+);
+List.displayName = "FileUpload.List";
+var Item = React.forwardRef(({ className, index, ...props }, ref) => {
+  const { files, removeFile } = useFileUpload();
+  const file = files[index];
+  if (!file) return null;
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      ref,
+      className: cn(
+        "flex items-center justify-between gap-3 rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-default)] p-3",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-[var(--color-text-primary)]", children: file.name }),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-[var(--color-text-muted)]", children: [
+            (file.size / 1024).toFixed(1),
+            " KB"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => removeFile(index),
+            "aria-label": `Remove ${file.name}`,
+            className: "shrink-0 rounded p-1 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors",
+            children: /* @__PURE__ */ jsx(X, { size: "sm", "aria-hidden": "true" })
+          }
+        )
+      ]
+    }
+  );
+});
+Item.displayName = "FileUpload.Item";
+var FileUpload = { Root, Dropzone, List, Item };
+
+export {
+  FileUpload
+};

package/dist/chunk-POFKKYHY.js

@@ -0,0 +1,37 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Flag/Flag.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function countryCodeToEmoji(code) {
+  return code.toUpperCase().split("").map((c) => String.fromCodePoint(c.charCodeAt(0) - 65 + 127462)).join("");
+}
+var sizeClass = {
+  sm: "text-base",
+  md: "text-xl",
+  lg: "text-3xl"
+};
+var Flag = React.forwardRef(
+  ({ code, size = "md", className, ...rest }, ref) => {
+    const emoji = countryCodeToEmoji(code);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        role: "img",
+        "aria-label": code,
+        className: cn("inline-block leading-none", sizeClass[size], className),
+        ...rest,
+        children: emoji
+      }
+    );
+  }
+);
+Flag.displayName = "Flag";
+
+export {
+  Flag
+};