@wow-two-beta/ui 0.0.6 → 0.0.8

package/dist/chunk-7SGLT2LM.js

@@ -0,0 +1,774 @@
+import { Portal, AnchoredPositioner } from './chunk-SL5YJADS.js';
+import { useClipboard } from './chunk-4P2TFUVW.js';
+import { tv } from './chunk-BMBIZLO4.js';
+import { Icon } from './chunk-TDX22OWF.js';
+import { composeRefs } from './chunk-DN7WBRIV.js';
+import { cn } from './chunk-KZ4VFY2T.js';
+import { forwardRef, useState, Children, isValidElement, Fragment as Fragment$1, useRef, cloneElement } from 'react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { X, TrendingUp, TrendingDown, Check, Copy } from 'lucide-react';
+
+// src/display/heading/Heading.variants.ts
+var headingVariants = tv({
+  base: "font-semibold tracking-tight text-foreground",
+  variants: {
+    size: {
+      xs: "text-sm",
+      sm: "text-base",
+      md: "text-lg",
+      lg: "text-xl",
+      xl: "text-2xl",
+      "2xl": "text-3xl",
+      "3xl": "text-4xl",
+      "4xl": "text-5xl"
+    },
+    weight: {
+      normal: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold"
+    },
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right"
+    }
+  },
+  defaultVariants: {
+    size: "lg",
+    weight: "semibold"
+  }
+});
+var Heading = forwardRef(
+  ({ level = 2, className, size, weight, align, ...props }, ref) => {
+    const Tag2 = `h${level}`;
+    return /* @__PURE__ */ jsx(
+      Tag2,
+      {
+        ref,
+        className: cn(headingVariants({ size, weight, align }), className),
+        ...props
+      }
+    );
+  }
+);
+Heading.displayName = "Heading";
+
+// src/display/text/Text.variants.ts
+var textVariants = tv({
+  base: "",
+  variants: {
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-lg",
+      xl: "text-xl"
+    },
+    weight: {
+      normal: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold"
+    },
+    color: {
+      default: "text-foreground",
+      muted: "text-muted-foreground",
+      subtle: "text-subtle-foreground",
+      brand: "text-primary",
+      success: "text-success",
+      warning: "text-warning",
+      danger: "text-destructive"
+    },
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right",
+      justify: "text-justify"
+    },
+    truncate: {
+      true: "truncate"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    weight: "normal",
+    color: "default"
+  }
+});
+var Text = forwardRef(
+  ({ as: Component = "p", className, size, weight, color, align, truncate, ...props }, ref) => /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: cn(textVariants({ size, weight, color, align, truncate }), className),
+      ...props
+    }
+  )
+);
+Text.displayName = "Text";
+
+// src/display/code/Code.variants.ts
+var codeVariants = tv({
+  base: "font-mono text-sm",
+  variants: {
+    variant: {
+      inline: "rounded-sm bg-muted px-1 py-0.5 text-foreground",
+      block: "block w-full overflow-x-auto rounded-md bg-muted p-4 text-foreground"
+    }
+  },
+  defaultVariants: {
+    variant: "inline"
+  }
+});
+var Code = forwardRef(
+  ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx("code", { ref, className: cn(codeVariants({ variant }), className), ...props })
+);
+Code.displayName = "Code";
+var Kbd = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "kbd",
+  {
+    ref,
+    className: cn(
+      "inline-flex h-5 min-w-5 items-center justify-center rounded-sm border border-border",
+      "bg-muted px-1.5 font-mono text-xs text-muted-foreground shadow-[inset_0_-1px_0_0_rgb(0_0_0/0.05)]",
+      className
+    ),
+    ...props
+  }
+));
+Kbd.displayName = "Kbd";
+var Image = forwardRef(
+  ({ fallback, onError, alt = "", className, ...props }, ref) => {
+    const [errored, setErrored] = useState(false);
+    if (errored && fallback !== void 0) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        ref,
+        alt,
+        className: cn("block max-w-full", className),
+        onError: (e) => {
+          setErrored(true);
+          onError?.(e);
+        },
+        ...props
+      }
+    );
+  }
+);
+Image.displayName = "Image";
+
+// src/display/avatar/Avatar.variants.ts
+var avatarVariants = tv({
+  base: "inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-muted text-muted-foreground font-medium",
+  variants: {
+    size: {
+      xs: "h-6 w-6 text-xs",
+      sm: "h-8 w-8 text-sm",
+      md: "h-10 w-10 text-base",
+      lg: "h-12 w-12 text-lg",
+      xl: "h-16 w-16 text-xl",
+      "2xl": "h-20 w-20 text-2xl"
+    },
+    shape: {
+      circle: "rounded-full",
+      square: "rounded-md"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    shape: "circle"
+  }
+});
+function getInitials(name) {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 0) return "";
+  const first = parts[0]?.[0] ?? "";
+  const last = parts.length > 1 ? parts[parts.length - 1]?.[0] ?? "" : "";
+  return (first + last).toUpperCase();
+}
+var Avatar = forwardRef(
+  ({ src, name = "", fallback, alt, className, size, shape, ...props }, ref) => {
+    const [errored, setErrored] = useState(false);
+    const showImage = src && !errored;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn(avatarVariants({ size, shape }), className),
+        ...props,
+        children: showImage ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt: alt ?? name,
+            className: "h-full w-full object-cover",
+            onError: () => setErrored(true)
+          }
+        ) : fallback ?? getInitials(name)
+      }
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+
+// src/display/badge/Badge.variants.ts
+var badgeVariants = tv({
+  base: "inline-flex items-center rounded-full font-medium",
+  variants: {
+    variant: {
+      neutral: "bg-muted text-foreground",
+      brand: "bg-primary-soft text-primary-soft-foreground",
+      success: "bg-success-soft text-success-soft-foreground",
+      warning: "bg-warning-soft text-warning-soft-foreground",
+      danger: "bg-destructive-soft text-destructive-soft-foreground",
+      info: "bg-info-soft text-info-soft-foreground",
+      outline: "border border-border text-foreground"
+    },
+    size: {
+      sm: "h-5 px-2 text-xs",
+      md: "h-6 px-2.5 text-xs",
+      lg: "h-7 px-3 text-sm"
+    }
+  },
+  defaultVariants: {
+    variant: "neutral",
+    size: "md"
+  }
+});
+var Badge = forwardRef(
+  ({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx("span", { ref, className: cn(badgeVariants({ variant, size }), className), ...props })
+);
+Badge.displayName = "Badge";
+
+// src/display/tag/Tag.variants.ts
+var tagVariants = tv({
+  base: "inline-flex items-center gap-1 rounded-md border border-border bg-card px-2 py-0.5 text-xs font-medium text-card-foreground",
+  variants: {
+    variant: {
+      neutral: "",
+      brand: "border-transparent bg-primary-soft text-primary-soft-foreground",
+      success: "border-transparent bg-success-soft text-success-soft-foreground",
+      warning: "border-transparent bg-warning-soft text-warning-soft-foreground",
+      danger: "border-transparent bg-destructive-soft text-destructive-soft-foreground",
+      info: "border-transparent bg-info-soft text-info-soft-foreground"
+    }
+  },
+  defaultVariants: {
+    variant: "neutral"
+  }
+});
+var Tag = forwardRef(
+  ({ children, onClose, closeLabel = "Remove", variant, className, ...props }, ref) => /* @__PURE__ */ jsxs("span", { ref, className: cn(tagVariants({ variant }), className), ...props, children: [
+    children,
+    onClose && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": closeLabel,
+        onClick: onClose,
+        className: "-mr-1 inline-flex h-4 w-4 items-center justify-center rounded-sm text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        children: /* @__PURE__ */ jsx(Icon, { icon: X, size: 12 })
+      }
+    )
+  ] })
+);
+Tag.displayName = "Tag";
+var Separator = forwardRef(
+  ({ orientation = "horizontal", decorative = true, className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: decorative ? "none" : "separator",
+      "aria-orientation": decorative ? void 0 : orientation,
+      className: cn(
+        "bg-border",
+        orientation === "horizontal" ? "h-px w-full" : "w-px self-stretch",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Separator.displayName = "Separator";
+var Mark = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "mark",
+  {
+    ref,
+    className: cn("rounded-sm bg-warning-soft px-0.5 text-warning-soft-foreground", className),
+    ...props
+  }
+));
+Mark.displayName = "Mark";
+var Quote = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "blockquote",
+    {
+      ref,
+      className: cn(
+        "border-l-4 border-border pl-4 italic text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Quote.displayName = "Quote";
+var PADDING = {
+  none: "",
+  sm: "p-3",
+  md: "p-4",
+  lg: "p-6"
+};
+var CardRoot = forwardRef(
+  ({ className, padding = "none", ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "rounded-lg border border-border bg-card text-card-foreground shadow-xs",
+        PADDING[padding],
+        className
+      ),
+      ...props
+    }
+  )
+);
+CardRoot.displayName = "Card";
+var CardHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-1 p-4 pb-2", className), ...props }));
+CardHeader.displayName = "Card.Header";
+var CardTitle = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("h3", { ref, className: cn("text-lg font-semibold tracking-tight", className), ...props })
+);
+CardTitle.displayName = "Card.Title";
+var CardDescription = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props })
+);
+CardDescription.displayName = "Card.Description";
+var CardBody = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-4 pt-2", className), ...props }));
+CardBody.displayName = "Card.Body";
+var CardFooter = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center gap-2 border-t border-border p-4", className), ...props }));
+CardFooter.displayName = "Card.Footer";
+var Card = Object.assign(CardRoot, {
+  Header: CardHeader,
+  Title: CardTitle,
+  Description: CardDescription,
+  Body: CardBody,
+  Footer: CardFooter
+});
+var AvatarGroup = forwardRef(
+  ({ max, size = "md", overlap = "-ml-2", className, children, ...props }, ref) => {
+    const all = Children.toArray(children).filter(isValidElement);
+    const visible = max ? all.slice(0, max) : all;
+    const overflow = max ? Math.max(0, all.length - max) : 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("inline-flex items-center", className),
+        ...props,
+        children: [
+          visible.map((child, i) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("ring-2 ring-background rounded-full", i > 0 && overlap),
+              children: /* @__PURE__ */ jsx(Avatar, { ...child.props, size })
+            },
+            i
+          )),
+          overflow > 0 && /* @__PURE__ */ jsx(
+            Avatar,
+            {
+              size,
+              name: `+${overflow}`,
+              className: cn(overlap, "ring-2 ring-background")
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
+function Tooltip({
+  content,
+  children,
+  placement = "top",
+  openDelay = 700,
+  closeDelay = 0,
+  open: controlledOpen,
+  disabled
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const [anchor, setAnchor] = useState(null);
+  const openTimer = useRef(null);
+  const closeTimer = useRef(null);
+  const clear = () => {
+    if (openTimer.current) clearTimeout(openTimer.current);
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    openTimer.current = null;
+    closeTimer.current = null;
+  };
+  const show = () => {
+    clear();
+    openTimer.current = setTimeout(() => setUncontrolledOpen(true), openDelay);
+  };
+  const hide = () => {
+    clear();
+    closeTimer.current = setTimeout(() => setUncontrolledOpen(false), closeDelay);
+  };
+  if (!isValidElement(children)) return children;
+  const trigger = children;
+  const cloned = cloneElement(trigger, {
+    ref: composeRefs(setAnchor, trigger.ref),
+    onPointerEnter: (e) => {
+      trigger.props.onPointerEnter?.(e);
+      show();
+    },
+    onPointerLeave: (e) => {
+      trigger.props.onPointerLeave?.(e);
+      hide();
+    },
+    onFocus: (e) => {
+      trigger.props.onFocus?.(e);
+      show();
+    },
+    onBlur: (e) => {
+      trigger.props.onBlur?.(e);
+      hide();
+    }
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    cloned,
+    !disabled && open && content && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(AnchoredPositioner, { anchor, placement, offset: 6, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "tooltip",
+        className: cn(
+          "z-tooltip rounded-md bg-inverse px-2.5 py-1.5 text-xs text-inverse-foreground shadow-md",
+          "animate-in fade-in-0 zoom-in-95"
+        ),
+        children: content
+      }
+    ) }) })
+  ] });
+}
+var SIZE = {
+  sm: { wrap: "gap-2 py-6", iconBox: "h-10 w-10" },
+  md: { wrap: "gap-3 py-10", iconBox: "h-14 w-14" },
+  lg: { wrap: "gap-4 py-16", iconBox: "h-20 w-20" }
+};
+var EmptyState = forwardRef(
+  ({ icon, title, description, actions, size = "md", className, ...props }, ref) => {
+    const sz = SIZE[size];
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-col items-center text-center", sz.wrap, className),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex items-center justify-center rounded-full bg-muted text-muted-foreground",
+                sz.iconBox
+              ),
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ jsx(Heading, { level: 3, size: size === "sm" ? "md" : size === "lg" ? "xl" : "lg", children: title }),
+          description && /* @__PURE__ */ jsx(Text, { color: "muted", size: size === "lg" ? "md" : "sm", children: description }),
+          actions && /* @__PURE__ */ jsx("div", { className: "mt-2 flex items-center gap-2", children: actions })
+        ]
+      }
+    );
+  }
+);
+EmptyState.displayName = "EmptyState";
+var VALUE_SIZE = {
+  sm: "2xl",
+  md: "3xl",
+  lg: "4xl"
+};
+var Stat = forwardRef(
+  ({ label, value, trend, helper, size = "md", className, ...props }, ref) => {
+    const trendUp = trend ? trend.value >= 0 : false;
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-1", className), ...props, children: [
+      /* @__PURE__ */ jsx(Text, { size: "sm", color: "muted", children: label }),
+      /* @__PURE__ */ jsx(Heading, { level: 3, size: VALUE_SIZE[size], weight: "bold", children: value }),
+      (trend || helper) && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-2", children: [
+        trend && /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn(
+              "inline-flex items-center gap-0.5 text-xs font-medium",
+              trendUp ? "text-success" : "text-destructive"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(Icon, { icon: trendUp ? TrendingUp : TrendingDown, size: 12 }),
+              trend.value > 0 ? "+" : "",
+              trend.value,
+              "%",
+              trend.label && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                " ",
+                trend.label
+              ] })
+            ]
+          }
+        ),
+        helper && !trend && /* @__PURE__ */ jsx(Text, { size: "xs", color: "muted", children: helper })
+      ] })
+    ] });
+  }
+);
+Stat.displayName = "Stat";
+var Snippet = forwardRef(
+  ({ text, variant = "inline", className, ...props }, ref) => {
+    const { copied, copy } = useClipboard();
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "group relative inline-flex w-full items-start",
+          variant === "inline" ? "gap-2" : "flex-col gap-0",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Code, { variant, className: "flex-1 pr-10", children: text }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": copied ? "Copied" : "Copy",
+              onClick: () => void copy(text),
+              className: cn(
+                "absolute right-2 grid h-7 w-7 place-items-center rounded text-muted-foreground transition-colors hover:bg-background hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                variant === "inline" ? "top-1/2 -translate-y-1/2" : "top-2"
+              ),
+              children: /* @__PURE__ */ jsx(Icon, { icon: copied ? Check : Copy, size: 14 })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Snippet.displayName = "Snippet";
+var TONE = {
+  destructive: "bg-destructive",
+  success: "bg-success",
+  warning: "bg-warning",
+  info: "bg-info",
+  primary: "bg-primary",
+  neutral: "bg-muted-foreground"
+};
+var SIZE2 = {
+  xs: "h-1.5 w-1.5",
+  sm: "h-2 w-2",
+  md: "h-2.5 w-2.5"
+};
+var POS = {
+  "top-right": "absolute -top-0.5 -right-0.5",
+  "top-left": "absolute -top-0.5 -left-0.5",
+  "bottom-right": "absolute -bottom-0.5 -right-0.5",
+  "bottom-left": "absolute -bottom-0.5 -left-0.5"
+};
+var NotificationDot = forwardRef(
+  ({ tone = "destructive", size = "sm", pulse, position, className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      "aria-hidden": "true",
+      className: cn(
+        "inline-flex rounded-full ring-2 ring-background",
+        TONE[tone],
+        SIZE2[size],
+        position && POS[position],
+        pulse && 'after:absolute after:inset-0 after:animate-ping after:rounded-full after:opacity-75 after:content-[""] ' + TONE[tone],
+        className
+      ),
+      ...props
+    }
+  )
+);
+NotificationDot.displayName = "NotificationDot";
+var CountBadge = forwardRef(
+  ({ value, max = 99, hideZero = true, variant = "danger", className, ...props }, ref) => {
+    if (value === 0 && hideZero) return null;
+    const display = value > max ? `${max}+` : `${value}`;
+    return /* @__PURE__ */ jsx(
+      Badge,
+      {
+        ref,
+        variant,
+        size: "sm",
+        className: cn("min-w-5 justify-center px-1.5", className),
+        ...props,
+        children: display
+      }
+    );
+  }
+);
+CountBadge.displayName = "CountBadge";
+var TONE2 = {
+  success: "bg-success",
+  warning: "bg-warning",
+  destructive: "bg-destructive",
+  info: "bg-info",
+  neutral: "bg-muted-foreground"
+};
+var Status = forwardRef(
+  ({ tone = "success", pulse, className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      className: cn("inline-flex items-center gap-2 text-sm text-foreground", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "relative inline-flex", children: [
+          /* @__PURE__ */ jsx("span", { className: cn("inline-block h-2 w-2 rounded-full", TONE2[tone]) }),
+          pulse && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "absolute inset-0 inline-block rounded-full opacity-75 animate-ping",
+                TONE2[tone]
+              )
+            }
+          )
+        ] }),
+        children
+      ]
+    }
+  )
+);
+Status.displayName = "Status";
+var KeyboardShortcut = forwardRef(
+  ({ keys, separator = "+", className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: cn("inline-flex items-center gap-1 text-muted-foreground", className),
+      ...props,
+      children: keys.map((key, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        i > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: separator }),
+        /* @__PURE__ */ jsx(Kbd, { children: key })
+      ] }, i))
+    }
+  )
+);
+KeyboardShortcut.displayName = "KeyboardShortcut";
+var ROW_GAP = {
+  sm: "gap-y-1",
+  md: "gap-y-2",
+  lg: "gap-y-3"
+};
+var DescriptionList = forwardRef(
+  ({ items, layout = "inline", density = "md", className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "dl",
+    {
+      ref,
+      className: cn(
+        "text-sm",
+        layout === "inline" ? "grid grid-cols-[max-content_1fr] gap-x-4" : "flex flex-col gap-1",
+        ROW_GAP[density],
+        className
+      ),
+      ...props,
+      children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { className: cn("contents", layout === "stacked" && "flex flex-col gap-0.5"), children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: item.label }),
+        /* @__PURE__ */ jsx("dd", { className: "text-foreground", children: item.value })
+      ] }, i))
+    }
+  )
+);
+DescriptionList.displayName = "DescriptionList";
+var InfoRow = forwardRef(
+  ({ label, value, icon, layout = "inline", className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex text-sm",
+        layout === "inline" ? "items-center justify-between gap-3" : "flex-col gap-0.5",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 text-muted-foreground", children: [
+          icon,
+          label
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "text-foreground", children: value })
+      ]
+    }
+  )
+);
+InfoRow.displayName = "InfoRow";
+var POS2 = {
+  "top-right": "top-0 right-0 -translate-y-1/2 translate-x-1/2",
+  "top-left": "top-0 left-0 -translate-y-1/2 -translate-x-1/2",
+  "bottom-right": "bottom-0 right-0 translate-y-1/2 translate-x-1/2",
+  "bottom-left": "bottom-0 left-0 translate-y-1/2 -translate-x-1/2"
+};
+var BadgeOverlay = forwardRef(
+  ({ children, badge, position = "top-right", hidden, className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn("relative inline-flex", className), ...props, children: [
+    children,
+    !hidden && /* @__PURE__ */ jsx("span", { className: cn("absolute z-10", POS2[position]), children: badge })
+  ] })
+);
+BadgeOverlay.displayName = "BadgeOverlay";
+var SectionHeader = forwardRef(
+  ({ title, description, actions, level = 2, size = "lg", bordered = true, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "header",
+    {
+      ref,
+      className: cn(
+        "flex items-start justify-between gap-4 pb-3",
+        bordered && "border-b border-border",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+          /* @__PURE__ */ jsx(Heading, { level, size, children: title }),
+          description && /* @__PURE__ */ jsx(Text, { size: "sm", color: "muted", children: description })
+        ] }),
+        actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+      ]
+    }
+  )
+);
+SectionHeader.displayName = "SectionHeader";
+function escape(re) {
+  return re.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+var Highlight = forwardRef(
+  ({ children, query, wholeWord, className, ...props }, ref) => {
+    const queries = (Array.isArray(query) ? query : [query]).filter(Boolean);
+    if (queries.length === 0) return /* @__PURE__ */ jsx("span", { ref, className: cn(className), ...props, children });
+    const pattern = queries.map(escape).join("|");
+    const regex = new RegExp(wholeWord ? `\\b(${pattern})\\b` : `(${pattern})`, "gi");
+    const parts = children.split(regex);
+    const nodes = [];
+    parts.forEach((part, i) => {
+      if (queries.some((q) => part.toLowerCase() === q.toLowerCase())) {
+        nodes.push(/* @__PURE__ */ jsx(Mark, { children: part }, i));
+      } else if (part) {
+        nodes.push(/* @__PURE__ */ jsx(Fragment$1, { children: part }, i));
+      }
+    });
+    return /* @__PURE__ */ jsx("span", { ref, className: cn(className), ...props, children: nodes });
+  }
+);
+Highlight.displayName = "Highlight";
+
+export { Avatar, AvatarGroup, Badge, BadgeOverlay, Card, Code, CountBadge, DescriptionList, EmptyState, Heading, Highlight, Image, InfoRow, Kbd, KeyboardShortcut, Mark, NotificationDot, Quote, SectionHeader, Separator, Snippet, Stat, Status, Tag, Text, Tooltip, avatarVariants, badgeVariants, codeVariants, headingVariants, tagVariants, textVariants };
+//# sourceMappingURL=chunk-7SGLT2LM.js.map
+//# sourceMappingURL=chunk-7SGLT2LM.js.map