@nexub/react 1.0.0 → 1.1.0

package/dist/chunk-L6GBZ2HB.js

@@ -0,0 +1,145 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/AlertDialog/AlertDialog.tsx
+import * as React from "react";
+import * as RadixAlertDialog from "@radix-ui/react-alert-dialog";
+import { jsx } from "react/jsx-runtime";
+var Root2 = RadixAlertDialog.Root;
+var Trigger2 = RadixAlertDialog.Trigger;
+var Portal2 = RadixAlertDialog.Portal;
+var Overlay2 = React.forwardRef(
+  function AlertDialogOverlay({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixAlertDialog.Overlay,
+      {
+        ref,
+        className: cn(
+          "fixed inset-0 z-[var(--z-modal)] bg-black/50 backdrop-blur-sm",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Overlay2.displayName = "AlertDialog.Overlay";
+var Content2 = React.forwardRef(
+  function AlertDialogContent({ className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixAlertDialog.Content,
+      {
+        ref,
+        className: cn(
+          "fixed left-1/2 top-1/2 z-[var(--z-modal)] w-full max-w-lg -translate-x-1/2 -translate-y-1/2",
+          "rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-default)] shadow-xl",
+          "p-6 focus:outline-none",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+          "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Content2.displayName = "AlertDialog.Content";
+var Title2 = React.forwardRef(
+  function AlertDialogTitle({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixAlertDialog.Title,
+      {
+        ref,
+        className: cn("text-lg font-semibold text-[var(--color-text-primary)]", className),
+        ...props
+      }
+    );
+  }
+);
+Title2.displayName = "AlertDialog.Title";
+var Description2 = React.forwardRef(function AlertDialogDescription({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    RadixAlertDialog.Description,
+    {
+      ref,
+      className: cn("mt-1 text-sm text-[var(--color-text-muted)]", className),
+      ...props
+    }
+  );
+});
+Description2.displayName = "AlertDialog.Description";
+var Header = React.forwardRef(
+  function AlertDialogHeader({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4 flex flex-col gap-1", className), ...props });
+  }
+);
+Header.displayName = "AlertDialog.Header";
+var Footer = React.forwardRef(
+  function AlertDialogFooter({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("mt-6 flex justify-end gap-2", className), ...props });
+  }
+);
+Footer.displayName = "AlertDialog.Footer";
+var Action2 = React.forwardRef(
+  function AlertDialogAction({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixAlertDialog.Action,
+      {
+        ref,
+        className: cn(
+          "inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium",
+          "bg-[var(--color-fill-danger)] text-white hover:bg-[var(--color-fill-danger-hover)] focus:outline-none",
+          "focus-visible:ring-2 focus-visible:ring-red-600 focus-visible:ring-offset-2 ring-offset-[var(--color-ring-offset)]",
+          "disabled:pointer-events-none disabled:opacity-50",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Action2.displayName = "AlertDialog.Action";
+var Cancel2 = React.forwardRef(
+  function AlertDialogCancel({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixAlertDialog.Cancel,
+      {
+        ref,
+        className: cn(
+          "inline-flex items-center justify-center rounded-md border border-[var(--color-border-default)] px-4 py-2 text-sm font-medium",
+          "bg-[var(--color-bg-default)] text-[var(--color-text-primary)] hover:bg-[var(--color-bg-subtle)]",
+          "focus: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",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Cancel2.displayName = "AlertDialog.Cancel";
+var AlertDialog = {
+  Root: Root2,
+  Trigger: Trigger2,
+  Portal: Portal2,
+  Overlay: Overlay2,
+  Content: Content2,
+  Title: Title2,
+  Description: Description2,
+  Header,
+  Footer,
+  Action: Action2,
+  Cancel: Cancel2
+};
+
+export {
+  AlertDialog
+};

package/dist/chunk-LAWZQ6R6.js

@@ -0,0 +1,76 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Heading/Heading.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 headingVariants = cva("", {
+  variants: {
+    size: {
+      display: "text-6xl font-extrabold tracking-tight leading-none",
+      h1: "text-5xl font-bold tracking-tight leading-tight",
+      h2: "text-4xl font-bold tracking-tight leading-tight",
+      h3: "text-3xl font-semibold leading-snug",
+      h4: "text-2xl font-semibold leading-snug",
+      h5: "text-xl font-semibold leading-snug",
+      h6: "text-base font-semibold leading-normal"
+    },
+    weight: {
+      regular: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold",
+      extrabold: "font-extrabold"
+    }
+  }
+});
+var levelSizeMap = {
+  1: "h1",
+  2: "h2",
+  3: "h3",
+  4: "h4",
+  5: "h5",
+  6: "h6"
+};
+var Heading = React.forwardRef(
+  ({
+    level = 2,
+    size,
+    tone,
+    weight,
+    asChild = false,
+    className,
+    style,
+    children,
+    ...rest
+  }, ref) => {
+    const resolvedSize = size ?? levelSizeMap[level];
+    const Tag = `h${level}`;
+    const Comp = asChild ? Slot : Tag;
+    const toneStyle = tone && tone !== "default" ? { color: `var(--color-text-${tone})` } : {};
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: cn(
+          headingVariants({ size: resolvedSize, weight }),
+          className
+        ),
+        style: { ...toneStyle, ...style },
+        "data-tone": tone,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Heading.displayName = "Heading";
+
+export {
+  headingVariants,
+  Heading
+};

package/dist/chunk-LOP63AVE.js

@@ -0,0 +1,49 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Section/Section.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 sectionVariants = cva("w-full", {
+  variants: {
+    paddingY: {
+      sm: "py-12",
+      md: "py-20",
+      lg: "py-32"
+    },
+    tone: {
+      default: "bg-[var(--color-bg-default)]",
+      subtle: "bg-[var(--color-bg-subtle)]",
+      muted: "bg-[var(--color-bg-muted)]",
+      inverse: "bg-[var(--color-bg-inverse)] text-[var(--color-text-inverse)]"
+    }
+  },
+  defaultVariants: {
+    paddingY: "md",
+    tone: "default"
+  }
+});
+var Section = React.forwardRef(
+  ({ paddingY, tone, asChild = false, className, children, ...rest }, ref) => {
+    const Comp = asChild ? Slot : "section";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: cn(sectionVariants({ paddingY, tone }), className),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Section.displayName = "Section";
+
+export {
+  sectionVariants,
+  Section
+};

package/dist/chunk-MY6XUJ5P.js

@@ -0,0 +1,216 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Menubar/Menubar.tsx
+import * as React from "react";
+import * as RadixMenubar from "@radix-ui/react-menubar";
+import { Check, ChevronRight } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Menu2 = RadixMenubar.Menu;
+var Portal2 = RadixMenubar.Portal;
+var Group2 = RadixMenubar.Group;
+var RadioGroup2 = RadixMenubar.RadioGroup;
+var Sub2 = RadixMenubar.Sub;
+var Root2 = React.forwardRef(
+  function MenubarRoot({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixMenubar.Root,
+      {
+        ref,
+        className: cn(
+          "flex h-9 items-center gap-1 rounded-md border border-[var(--color-border-default)]",
+          "bg-[var(--color-bg-default)] px-3",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Root2.displayName = "Menubar.Root";
+var Trigger2 = React.forwardRef(
+  function MenubarTrigger({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixMenubar.Trigger,
+      {
+        ref,
+        className: cn(
+          "relative flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium",
+          "outline-none focus:bg-[var(--color-bg-subtle)]",
+          "data-[state=open]:bg-[var(--color-bg-subtle)]",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Trigger2.displayName = "Menubar.Trigger";
+var contentBaseClasses = cn(
+  "z-[var(--z-popover)] min-w-48 rounded-lg border border-[var(--color-border-default)]",
+  "bg-[var(--color-bg-default)] p-1 shadow-md outline-none",
+  "data-[state=open]:animate-in data-[state=closed]:animate-out",
+  "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
+  "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",
+  "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+  "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2"
+);
+var Content2 = React.forwardRef(
+  function MenubarContent({ className, sideOffset = 8, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixMenubar.Content,
+      {
+        ref,
+        sideOffset,
+        className: cn(contentBaseClasses, className),
+        ...props
+      }
+    );
+  }
+);
+Content2.displayName = "Menubar.Content";
+var itemBaseClasses = cn(
+  "relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none",
+  "transition-colors hover:bg-[var(--color-bg-subtle)] focus:bg-[var(--color-bg-subtle)]",
+  "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+);
+var Item2 = React.forwardRef(
+  function MenubarItem({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixMenubar.Item,
+      {
+        ref,
+        className: cn(itemBaseClasses, className),
+        ...props
+      }
+    );
+  }
+);
+Item2.displayName = "Menubar.Item";
+var Label2 = React.forwardRef(
+  function MenubarLabel({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixMenubar.Label,
+      {
+        ref,
+        className: cn(
+          "px-2 py-1 text-xs font-semibold text-[var(--color-text-muted)]",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Label2.displayName = "Menubar.Label";
+var Separator2 = React.forwardRef(
+  function MenubarSeparator({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixMenubar.Separator,
+      {
+        ref,
+        className: cn("-mx-1 my-1 h-px bg-[var(--color-border-default)]", className),
+        ...props
+      }
+    );
+  }
+);
+Separator2.displayName = "Menubar.Separator";
+var CheckboxItem2 = React.forwardRef(function MenubarCheckboxItem({ className, children, checked, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    RadixMenubar.CheckboxItem,
+    {
+      ref,
+      className: cn(itemBaseClasses, "pl-8", className),
+      checked,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsx(RadixMenubar.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+        children
+      ]
+    }
+  );
+});
+CheckboxItem2.displayName = "Menubar.CheckboxItem";
+var RadioItem2 = React.forwardRef(function MenubarRadioItem({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    RadixMenubar.RadioItem,
+    {
+      ref,
+      className: cn(itemBaseClasses, "pl-8", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsx(RadixMenubar.ItemIndicator, { children: /* @__PURE__ */ jsx("svg", { className: "h-2 w-2 fill-current", viewBox: "0 0 8 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx("circle", { cx: "4", cy: "4", r: "4" }) }) }) }),
+        children
+      ]
+    }
+  );
+});
+RadioItem2.displayName = "Menubar.RadioItem";
+var SubTrigger2 = React.forwardRef(function MenubarSubTrigger({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    RadixMenubar.SubTrigger,
+    {
+      ref,
+      className: cn(
+        itemBaseClasses,
+        "data-[state=open]:bg-[var(--color-bg-subtle)]",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4" })
+      ]
+    }
+  );
+});
+SubTrigger2.displayName = "Menubar.SubTrigger";
+var SubContent2 = React.forwardRef(function MenubarSubContent({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    RadixMenubar.SubContent,
+    {
+      ref,
+      className: cn(contentBaseClasses, className),
+      ...props
+    }
+  );
+});
+SubContent2.displayName = "Menubar.SubContent";
+var Arrow2 = React.forwardRef(
+  function MenubarArrow({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixMenubar.Arrow,
+      {
+        ref,
+        className: cn("fill-[var(--color-border-default)]", className),
+        ...props
+      }
+    );
+  }
+);
+Arrow2.displayName = "Menubar.Arrow";
+var Menubar = {
+  Root: Root2,
+  Menu: Menu2,
+  Trigger: Trigger2,
+  Portal: Portal2,
+  Content: Content2,
+  Item: Item2,
+  Group: Group2,
+  Label: Label2,
+  Separator: Separator2,
+  CheckboxItem: CheckboxItem2,
+  RadioGroup: RadioGroup2,
+  RadioItem: RadioItem2,
+  Sub: Sub2,
+  SubTrigger: SubTrigger2,
+  SubContent: SubContent2,
+  Arrow: Arrow2
+};
+
+export {
+  Menubar
+};

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
+};