acai-ui-library 0.1.11

package/dist/components/avatar.js

@@ -0,0 +1,138 @@
+// src/components/avatar.tsx
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cva } from "class-variance-authority";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/avatar.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var avatarVariants = cva(
+  "relative flex shrink-0 overflow-hidden rounded-full bg-[var(--hc-primary-600)] text-white",
+  {
+    variants: {
+      size: {
+        xs: "size-6 text-[10px] leading-[14px]",
+        sm: "size-8 text-sm leading-5",
+        md: "size-10 text-base leading-6",
+        lg: "size-[52px] text-xl leading-7",
+        xl: "size-16 text-2xl leading-8"
+      },
+      bordered: {
+        true: "ring-2 ring-background",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      bordered: false
+    }
+  }
+);
+var statusToneClass = {
+  online: "bg-[var(--hc-color-success)]",
+  offline: "bg-[var(--hc-grey-400)]",
+  away: "bg-[var(--hc-badge-severity-medium,#F59E0B)]",
+  busy: "bg-[var(--hc-color-destructive)]"
+};
+var statusSizeClass = {
+  xs: "size-2",
+  sm: "size-2.5",
+  md: "size-3",
+  lg: "size-3.5",
+  xl: "size-4"
+};
+var Avatar = React.forwardRef(({ className, size = "md", bordered, status, children, onClick, ...props }, ref) => {
+  const isInteractive = typeof onClick === "function";
+  return /* @__PURE__ */ jsxs("span", { className: "relative inline-flex", children: [
+    /* @__PURE__ */ jsx(
+      AvatarPrimitive.Root,
+      {
+        ref,
+        onClick,
+        className: cn(
+          avatarVariants({ size, bordered }),
+          isInteractive && "cursor-pointer outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] focus-visible:ring-offset-2 focus-visible:ring-offset-background hover:opacity-90",
+          className
+        ),
+        ...props,
+        children
+      }
+    ),
+    status && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: cn(
+          "absolute bottom-0 end-0 block rounded-full ring-2 ring-background",
+          statusSizeClass[size ?? "md"],
+          statusToneClass[status]
+        )
+      }
+    )
+  ] });
+});
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+var AvatarImage = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Image,
+  {
+    ref,
+    className: cn("aspect-square h-full w-full object-cover", className),
+    ...props
+  }
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+var AvatarFallback = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Fallback,
+  {
+    ref,
+    className: cn("flex h-full w-full items-center justify-center font-semibold", className),
+    ...props
+  }
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+var overlapClass = {
+  xs: "-ms-1.5",
+  sm: "-ms-2",
+  md: "-ms-2.5",
+  lg: "-ms-3",
+  xl: "-ms-3.5"
+};
+var AvatarGroup = React.forwardRef(
+  ({ children, max, size = "md", className, ...props }, ref) => {
+    const childArray = React.Children.toArray(children).filter(React.isValidElement);
+    const visibleChildren = max ? childArray.slice(0, max) : childArray;
+    const overflowCount = max ? childArray.length - max : 0;
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex items-center", className), ...props, children: [
+      visibleChildren.map((child, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn("relative", index > 0 && overlapClass[size]),
+          style: { zIndex: visibleChildren.length - index },
+          children: React.isValidElement(child) ? React.cloneElement(child, {
+            size: child.props.size ?? size,
+            bordered: true
+          }) : child
+        },
+        index
+      )),
+      overflowCount > 0 && /* @__PURE__ */ jsx("div", { className: cn("relative", overlapClass[size]), children: /* @__PURE__ */ jsx(Avatar, { size, bordered: true, children: /* @__PURE__ */ jsxs(AvatarFallback, { children: [
+        "+",
+        overflowCount
+      ] }) }) })
+    ] });
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
+export {
+  Avatar,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarImage
+};
+//# sourceMappingURL=avatar.js.map

package/dist/components/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/avatar.tsx","../../src/lib/utils.ts"],"sourcesContent":["import * as React from \"react\"\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"../lib/utils\"\n\ntype AvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst avatarVariants = cva(\n  \"relative flex shrink-0 overflow-hidden rounded-full bg-[var(--hc-primary-600)] text-white\",\n  {\n    variants: {\n      size: {\n        xs: \"size-6 text-[10px] leading-[14px]\",\n        sm: \"size-8 text-sm leading-5\",\n        md: \"size-10 text-base leading-6\",\n        lg: \"size-[52px] text-xl leading-7\",\n        xl: \"size-16 text-2xl leading-8\",\n      },\n      bordered: {\n        true: \"ring-2 ring-background\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      bordered: false,\n    },\n  }\n)\n\nconst statusToneClass: Record<string, string> = {\n  online: \"bg-[var(--hc-color-success)]\",\n  offline: \"bg-[var(--hc-grey-400)]\",\n  away: \"bg-[var(--hc-badge-severity-medium,#F59E0B)]\",\n  busy: \"bg-[var(--hc-color-destructive)]\",\n}\n\nconst statusSizeClass: Record<AvatarSize, string> = {\n  xs: \"size-2\",\n  sm: \"size-2.5\",\n  md: \"size-3\",\n  lg: \"size-3.5\",\n  xl: \"size-4\",\n}\n\nexport interface AvatarProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    VariantProps<typeof avatarVariants> {\n  status?: \"online\" | \"offline\" | \"away\" | \"busy\"\n}\n\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(({ className, size = \"md\", bordered, status, children, onClick, ...props }, ref) => {\n  const isInteractive = typeof onClick === \"function\"\n  return (\n    <span className=\"relative inline-flex\">\n      <AvatarPrimitive.Root\n        ref={ref}\n        onClick={onClick}\n        className={cn(\n          avatarVariants({ size, bordered }),\n          isInteractive &&\n            \"cursor-pointer outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] focus-visible:ring-offset-2 focus-visible:ring-offset-background hover:opacity-90\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </AvatarPrimitive.Root>\n      {status && (\n        <span\n          aria-hidden\n          className={cn(\n            \"absolute bottom-0 end-0 block rounded-full ring-2 ring-background\",\n            statusSizeClass[(size ?? \"md\") as AvatarSize],\n            statusToneClass[status]\n          )}\n        />\n      )}\n    </span>\n  )\n})\nAvatar.displayName = AvatarPrimitive.Root.displayName\n\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Image\n    ref={ref}\n    className={cn(\"aspect-square h-full w-full object-cover\", className)}\n    {...props}\n  />\n))\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn(\"flex h-full w-full items-center justify-center font-semibold\", className)}\n    {...props}\n  />\n))\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\ninterface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  max?: number\n  size?: AvatarSize\n}\n\nconst overlapClass: Record<AvatarSize, string> = {\n  xs: \"-ms-1.5\",\n  sm: \"-ms-2\",\n  md: \"-ms-2.5\",\n  lg: \"-ms-3\",\n  xl: \"-ms-3.5\",\n}\n\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  ({ children, max, size = \"md\", className, ...props }, ref) => {\n    const childArray = React.Children.toArray(children).filter(React.isValidElement)\n    const visibleChildren = max ? childArray.slice(0, max) : childArray\n    const overflowCount = max ? childArray.length - max : 0\n\n    return (\n      <div ref={ref} className={cn(\"flex items-center\", className)} {...props}>\n        {visibleChildren.map((child, index) => (\n          <div\n            key={index}\n            className={cn(\"relative\", index > 0 && overlapClass[size])}\n            style={{ zIndex: visibleChildren.length - index }}\n          >\n            {React.isValidElement(child)\n              ? React.cloneElement(child as React.ReactElement<AvatarProps>, {\n                  size: ((child as React.ReactElement<AvatarProps>).props.size ?? size),\n                  bordered: true,\n                })\n              : child}\n          </div>\n        ))}\n        {overflowCount > 0 && (\n          <div className={cn(\"relative\", overlapClass[size])}>\n            <Avatar size={size} bordered>\n              <AvatarFallback>+{overflowCount}</AvatarFallback>\n            </Avatar>\n          </div>\n        )}\n      </div>\n    )\n  }\n)\nAvatarGroup.displayName = \"AvatarGroup\"\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarGroup }\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":"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","names":[]}

package/dist/components/badge.cjs

@@ -0,0 +1,121 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/badge.tsx
+var badge_exports = {};
+__export(badge_exports, {
+  Badge: () => Badge
+});
+module.exports = __toCommonJS(badge_exports);
+var import_lucide_react = require("lucide-react");
+
+// src/components/icon/success-icon.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function SuccessIcon({ size = 16, width, height, fill, title, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 16 16", width: width ?? size, height: height ?? size, fill: fill ?? "none", "aria-hidden": title ? void 0 : true, role: title ? "img" : "presentation", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M11.4 6.85C11.4911 6.7557 11.5415 6.6294 11.5403 6.4983C11.5392 6.3672 11.4866 6.2418 11.3939 6.14909C11.3012 6.05639 11.1758 6.00381 11.0447 6.00267C10.9136 6.00153 10.7873 6.05192 10.693 6.143L7.04301 9.793L5.39301 8.143C5.29871 8.05192 5.17241 8.00153 5.04131 8.00267C4.91021 8.0038 4.7848 8.05639 4.6921 8.14909C4.5994 8.2418 4.54681 8.3672 4.54567 8.4983C4.54453 8.6294 4.59493 8.7557 4.68601 8.85L6.68601 10.85C6.77977 10.9437 6.90693 10.9964 7.03951 10.9964C7.17209 10.9964 7.29925 10.9437 7.39301 10.85L11.393 6.85H11.4Z", fill: "black" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 0C3.58 0 0 3.58 0 8C0 12.42 3.58 16 8 16C12.42 16 16 12.42 16 8C16 3.58 12.42 0 8 0ZM1 8C1 4.13 4.13 1 8 1C11.87 1 15 4.13 15 8C15 11.87 11.87 15 8 15C4.13 15 1 11.87 1 8Z", fill: "black" }),
+    title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("title", { children: title }) : null
+  ] });
+}
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/badge.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var severityStyles = {
+  critical: "bg-[var(--hc-color-destructive)] text-white border-t border-t-black/20",
+  high: "bg-[var(--hc-badge-severity-high)] text-white border-t border-t-black/20",
+  medium: "bg-[var(--hc-badge-severity-medium)] text-white border-t border-t-black/20",
+  low: "bg-[var(--hc-badge-severity-low)] text-white border-t border-t-black/20"
+};
+var statusStyles = {
+  pending: "bg-[var(--hc-badge-pending-bg)] border border-[var(--hc-badge-pending-border)] text-[var(--hc-badge-pending-text)]",
+  "in-progress": "bg-[var(--hc-badge-in-progress-bg)] border border-[var(--hc-badge-in-progress-border)] text-[var(--hc-badge-in-progress-text)]",
+  "under-review": "bg-[var(--hc-badge-under-review-bg)] border border-[var(--hc-badge-under-review-border)] text-[var(--hc-badge-under-review-text)]",
+  resolved: "bg-[var(--hc-badge-resolved-bg)] border border-[var(--hc-badge-resolved-border)] text-[var(--hc-badge-resolved-text)]"
+};
+var pillStyles = {
+  error: "bg-[var(--hc-color-destructive)] text-white border-t border-t-black/20",
+  warning: "bg-[var(--hc-badge-severity-high)] text-white border-t border-t-black/20",
+  success: "bg-[var(--hc-badge-pill-success)] text-white border-t border-t-black/20",
+  primary: "bg-[var(--hc-primary-600)] text-white border-t border-t-black/20"
+};
+var iconStyles = {
+  warning: "bg-[var(--hc-badge-severity-high)] text-white border-t border-t-black/20 gap-[6px]",
+  complete: "bg-[var(--hc-badge-pill-success)] text-white border-t border-t-black/20 gap-[6px]",
+  "ai-generated": "bg-[var(--hc-primary-600)] text-white border-t border-t-black/20 gap-[6px]"
+};
+var designationStyles = "bg-[var(--hc-badge-designation-bg)] text-[var(--hc-badge-designation-text)] font-normal";
+var spinnerStyles = {
+  primary: "bg-[var(--hc-primary-100)] text-[var(--hc-primary-700)] border border-[var(--hc-primary-200)] gap-1.5",
+  neutral: "bg-muted text-muted-foreground border border-[var(--hc-color-border-subtle)] gap-1.5",
+  success: "bg-[var(--hc-banner-success-bg)] text-[var(--hc-color-success)] border border-[var(--hc-banner-success-border)] gap-1.5",
+  warning: "bg-[var(--hc-banner-warning-bg)] text-[var(--hc-badge-severity-high)] border border-[var(--hc-banner-warning-border)] gap-1.5"
+};
+var iconMap = {
+  warning: import_lucide_react.AlertTriangle,
+  complete: SuccessIcon,
+  "ai-generated": import_lucide_react.Sparkles
+};
+function Badge({
+  className,
+  variant,
+  severity,
+  status,
+  pill,
+  iconType,
+  spinnerTone = "primary",
+  dot,
+  children,
+  ...props
+}) {
+  const base = "inline-flex items-center h-[22px] rounded-[6px] px-2 py-0.5 text-xs font-medium gap-1";
+  let variantClasses = "";
+  if (variant === "severity" && severity) {
+    variantClasses = severityStyles[severity] ?? "";
+  } else if (variant === "status" && status) {
+    variantClasses = statusStyles[status] ?? "";
+  } else if (variant === "pill" && pill) {
+    variantClasses = pillStyles[pill] ?? "";
+  } else if (variant === "icon" && iconType) {
+    variantClasses = iconStyles[iconType] ?? "";
+  } else if (variant === "designation") {
+    variantClasses = designationStyles;
+  } else if (variant === "spinner") {
+    variantClasses = spinnerStyles[spinnerTone] ?? spinnerStyles.primary;
+  }
+  const IconComponent = variant === "icon" && iconType ? iconMap[iconType] : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: cn(base, variantClasses, className), ...props, children: [
+    variant === "spinner" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Loader2, { "aria-hidden": true, className: "size-3 shrink-0 animate-spin" }),
+    IconComponent && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconComponent, { className: "size-3 shrink-0" }),
+    dot && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "size-1.5 shrink-0 rounded-full bg-current" }),
+    children
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Badge
+});
+//# sourceMappingURL=badge.cjs.map

package/dist/components/badge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/badge.tsx","../../src/components/icon/success-icon.tsx","../../src/lib/utils.ts"],"sourcesContent":["import * as React from \"react\"\nimport { AlertTriangle, Loader2, Sparkles } from \"lucide-react\"\nimport { SuccessIcon } from \"./icon/success-icon\"\nimport { cn } from \"../lib/utils\"\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant: \"severity\" | \"status\" | \"pill\" | \"icon\" | \"designation\" | \"spinner\"\n  severity?: \"critical\" | \"high\" | \"medium\" | \"low\"\n  status?: \"pending\" | \"in-progress\" | \"under-review\" | \"resolved\"\n  pill?: \"error\" | \"warning\" | \"success\" | \"primary\"\n  iconType?: \"warning\" | \"complete\" | \"ai-generated\"\n  spinnerTone?: \"primary\" | \"neutral\" | \"success\" | \"warning\"\n  dot?: boolean\n}\n\nconst severityStyles: Record<string, string> = {\n  critical: \"bg-[var(--hc-color-destructive)] text-white border-t border-t-black/20\",\n  high: \"bg-[var(--hc-badge-severity-high)] text-white border-t border-t-black/20\",\n  medium: \"bg-[var(--hc-badge-severity-medium)] text-white border-t border-t-black/20\",\n  low: \"bg-[var(--hc-badge-severity-low)] text-white border-t border-t-black/20\",\n}\n\nconst statusStyles: Record<string, string> = {\n  pending: \"bg-[var(--hc-badge-pending-bg)] border border-[var(--hc-badge-pending-border)] text-[var(--hc-badge-pending-text)]\",\n  \"in-progress\": \"bg-[var(--hc-badge-in-progress-bg)] border border-[var(--hc-badge-in-progress-border)] text-[var(--hc-badge-in-progress-text)]\",\n  \"under-review\": \"bg-[var(--hc-badge-under-review-bg)] border border-[var(--hc-badge-under-review-border)] text-[var(--hc-badge-under-review-text)]\",\n  resolved: \"bg-[var(--hc-badge-resolved-bg)] border border-[var(--hc-badge-resolved-border)] text-[var(--hc-badge-resolved-text)]\",\n}\n\nconst pillStyles: Record<string, string> = {\n  error: \"bg-[var(--hc-color-destructive)] text-white border-t border-t-black/20\",\n  warning: \"bg-[var(--hc-badge-severity-high)] text-white border-t border-t-black/20\",\n  success: \"bg-[var(--hc-badge-pill-success)] text-white border-t border-t-black/20\",\n  primary: \"bg-[var(--hc-primary-600)] text-white border-t border-t-black/20\",\n}\n\nconst iconStyles: Record<string, string> = {\n  warning: \"bg-[var(--hc-badge-severity-high)] text-white border-t border-t-black/20 gap-[6px]\",\n  complete: \"bg-[var(--hc-badge-pill-success)] text-white border-t border-t-black/20 gap-[6px]\",\n  \"ai-generated\": \"bg-[var(--hc-primary-600)] text-white border-t border-t-black/20 gap-[6px]\",\n}\n\nconst designationStyles = \"bg-[var(--hc-badge-designation-bg)] text-[var(--hc-badge-designation-text)] font-normal\"\n\nconst spinnerStyles: Record<string, string> = {\n  primary: \"bg-[var(--hc-primary-100)] text-[var(--hc-primary-700)] border border-[var(--hc-primary-200)] gap-1.5\",\n  neutral: \"bg-muted text-muted-foreground border border-[var(--hc-color-border-subtle)] gap-1.5\",\n  success: \"bg-[var(--hc-banner-success-bg)] text-[var(--hc-color-success)] border border-[var(--hc-banner-success-border)] gap-1.5\",\n  warning: \"bg-[var(--hc-banner-warning-bg)] text-[var(--hc-badge-severity-high)] border border-[var(--hc-banner-warning-border)] gap-1.5\",\n}\n\nconst iconMap: Record<string, React.ElementType> = {\n  warning: AlertTriangle,\n  complete: SuccessIcon,\n  \"ai-generated\": Sparkles,\n}\n\nfunction Badge({\n  className,\n  variant,\n  severity,\n  status,\n  pill,\n  iconType,\n  spinnerTone = \"primary\",\n  dot,\n  children,\n  ...props\n}: BadgeProps) {\n  const base =\n    \"inline-flex items-center h-[22px] rounded-[6px] px-2 py-0.5 text-xs font-medium gap-1\"\n\n  let variantClasses = \"\"\n\n  if (variant === \"severity\" && severity) {\n    variantClasses = severityStyles[severity] ?? \"\"\n  } else if (variant === \"status\" && status) {\n    variantClasses = statusStyles[status] ?? \"\"\n  } else if (variant === \"pill\" && pill) {\n    variantClasses = pillStyles[pill] ?? \"\"\n  } else if (variant === \"icon\" && iconType) {\n    variantClasses = iconStyles[iconType] ?? \"\"\n  } else if (variant === \"designation\") {\n    variantClasses = designationStyles\n  } else if (variant === \"spinner\") {\n    variantClasses = spinnerStyles[spinnerTone] ?? spinnerStyles.primary\n  }\n\n  const IconComponent =\n    variant === \"icon\" && iconType ? iconMap[iconType] : null\n\n  return (\n    <div className={cn(base, variantClasses, className)} {...props}>\n      {variant === \"spinner\" && (\n        <Loader2 aria-hidden className=\"size-3 shrink-0 animate-spin\" />\n      )}\n      {IconComponent && <IconComponent className=\"size-3 shrink-0\" />}\n      {dot && (\n        <span className=\"size-1.5 shrink-0 rounded-full bg-current\" />\n      )}\n      {children}\n    </div>\n  )\n}\n\nexport { Badge }\n","import { LibraryIconProps } from \"./library-icon-props\";\n\nfunction SuccessIcon({ size = 16, width, height, fill, title, ...props }: LibraryIconProps) {\n  return (\n    <svg viewBox=\"0 0 16 16\" width={width ?? size} height={height ?? size} fill={fill ?? \"none\"} aria-hidden={title ? undefined : true} role={title ? \"img\" : \"presentation\"} {...props}>\n    <path d=\"M11.4 6.85C11.4911 6.7557 11.5415 6.6294 11.5403 6.4983C11.5392 6.3672 11.4866 6.2418 11.3939 6.14909C11.3012 6.05639 11.1758 6.00381 11.0447 6.00267C10.9136 6.00153 10.7873 6.05192 10.693 6.143L7.04301 9.793L5.39301 8.143C5.29871 8.05192 5.17241 8.00153 5.04131 8.00267C4.91021 8.0038 4.7848 8.05639 4.6921 8.14909C4.5994 8.2418 4.54681 8.3672 4.54567 8.4983C4.54453 8.6294 4.59493 8.7557 4.68601 8.85L6.68601 10.85C6.77977 10.9437 6.90693 10.9964 7.03951 10.9964C7.17209 10.9964 7.29925 10.9437 7.39301 10.85L11.393 6.85H11.4Z\" fill=\"black\"/>\n    <path fillRule=\"evenodd\" clipRule=\"evenodd\" d=\"M8 0C3.58 0 0 3.58 0 8C0 12.42 3.58 16 8 16C12.42 16 16 12.42 16 8C16 3.58 12.42 0 8 0ZM1 8C1 4.13 4.13 1 8 1C11.87 1 15 4.13 15 8C15 11.87 11.87 15 8 15C4.13 15 1 11.87 1 8Z\" fill=\"black\"/>\n      {title ? <title>{title}</title> : null}\n    </svg>\n  );\n}\n\nexport { SuccessIcon };\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,0BAAiD;;;ACG7C;AAFJ,SAAS,YAAY,EAAE,OAAO,IAAI,OAAO,QAAQ,MAAM,OAAO,GAAG,MAAM,GAAqB;AAC1F,SACE,6CAAC,SAAI,SAAQ,aAAY,OAAO,SAAS,MAAM,QAAQ,UAAU,MAAM,MAAM,QAAQ,QAAQ,eAAa,QAAQ,SAAY,MAAM,MAAM,QAAQ,QAAQ,gBAAiB,GAAG,OAC9K;AAAA,gDAAC,UAAK,GAAE,ohBAAmhB,MAAK,SAAO;AAAA,IACviB,4CAAC,UAAK,UAAS,WAAU,UAAS,WAAU,GAAE,kLAAiL,MAAK,SAAO;AAAA,IACxO,QAAQ,4CAAC,WAAO,iBAAM,IAAW;AAAA,KACpC;AAEJ;;;ACVA,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;AFuFI,IAAAA,sBAAA;AA7EJ,IAAM,iBAAyC;AAAA,EAC7C,UAAU;AAAA,EACV,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,KAAK;AACP;AAEA,IAAM,eAAuC;AAAA,EAC3C,SAAS;AAAA,EACT,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,UAAU;AACZ;AAEA,IAAM,aAAqC;AAAA,EACzC,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX;AAEA,IAAM,aAAqC;AAAA,EACzC,SAAS;AAAA,EACT,UAAU;AAAA,EACV,gBAAgB;AAClB;AAEA,IAAM,oBAAoB;AAE1B,IAAM,gBAAwC;AAAA,EAC5C,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX;AAEA,IAAM,UAA6C;AAAA,EACjD,SAAS;AAAA,EACT,UAAU;AAAA,EACV,gBAAgB;AAClB;AAEA,SAAS,MAAM;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAe;AACb,QAAM,OACJ;AAEF,MAAI,iBAAiB;AAErB,MAAI,YAAY,cAAc,UAAU;AACtC,qBAAiB,eAAe,QAAQ,KAAK;AAAA,EAC/C,WAAW,YAAY,YAAY,QAAQ;AACzC,qBAAiB,aAAa,MAAM,KAAK;AAAA,EAC3C,WAAW,YAAY,UAAU,MAAM;AACrC,qBAAiB,WAAW,IAAI,KAAK;AAAA,EACvC,WAAW,YAAY,UAAU,UAAU;AACzC,qBAAiB,WAAW,QAAQ,KAAK;AAAA,EAC3C,WAAW,YAAY,eAAe;AACpC,qBAAiB;AAAA,EACnB,WAAW,YAAY,WAAW;AAChC,qBAAiB,cAAc,WAAW,KAAK,cAAc;AAAA,EAC/D;AAEA,QAAM,gBACJ,YAAY,UAAU,WAAW,QAAQ,QAAQ,IAAI;AAEvD,SACE,8CAAC,SAAI,WAAW,GAAG,MAAM,gBAAgB,SAAS,GAAI,GAAG,OACtD;AAAA,gBAAY,aACX,6CAAC,+BAAQ,eAAW,MAAC,WAAU,gCAA+B;AAAA,IAE/D,iBAAiB,6CAAC,iBAAc,WAAU,mBAAkB;AAAA,IAC5D,OACC,6CAAC,UAAK,WAAU,6CAA4C;AAAA,IAE7D;AAAA,KACH;AAEJ;","names":["import_jsx_runtime"]}

package/dist/components/badge.d.cts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant: "severity" | "status" | "pill" | "icon" | "designation" | "spinner";
+    severity?: "critical" | "high" | "medium" | "low";
+    status?: "pending" | "in-progress" | "under-review" | "resolved";
+    pill?: "error" | "warning" | "success" | "primary";
+    iconType?: "warning" | "complete" | "ai-generated";
+    spinnerTone?: "primary" | "neutral" | "success" | "warning";
+    dot?: boolean;
+}
+declare function Badge({ className, variant, severity, status, pill, iconType, spinnerTone, dot, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+export { Badge, type BadgeProps };

package/dist/components/badge.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant: "severity" | "status" | "pill" | "icon" | "designation" | "spinner";
+    severity?: "critical" | "high" | "medium" | "low";
+    status?: "pending" | "in-progress" | "under-review" | "resolved";
+    pill?: "error" | "warning" | "success" | "primary";
+    iconType?: "warning" | "complete" | "ai-generated";
+    spinnerTone?: "primary" | "neutral" | "success" | "warning";
+    dot?: boolean;
+}
+declare function Badge({ className, variant, severity, status, pill, iconType, spinnerTone, dot, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+export { Badge, type BadgeProps };

package/dist/components/badge.js

@@ -0,0 +1,96 @@
+// src/components/badge.tsx
+import { AlertTriangle, Loader2, Sparkles } from "lucide-react";
+
+// src/components/icon/success-icon.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SuccessIcon({ size = 16, width, height, fill, title, ...props }) {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: width ?? size, height: height ?? size, fill: fill ?? "none", "aria-hidden": title ? void 0 : true, role: title ? "img" : "presentation", ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "M11.4 6.85C11.4911 6.7557 11.5415 6.6294 11.5403 6.4983C11.5392 6.3672 11.4866 6.2418 11.3939 6.14909C11.3012 6.05639 11.1758 6.00381 11.0447 6.00267C10.9136 6.00153 10.7873 6.05192 10.693 6.143L7.04301 9.793L5.39301 8.143C5.29871 8.05192 5.17241 8.00153 5.04131 8.00267C4.91021 8.0038 4.7848 8.05639 4.6921 8.14909C4.5994 8.2418 4.54681 8.3672 4.54567 8.4983C4.54453 8.6294 4.59493 8.7557 4.68601 8.85L6.68601 10.85C6.77977 10.9437 6.90693 10.9964 7.03951 10.9964C7.17209 10.9964 7.29925 10.9437 7.39301 10.85L11.393 6.85H11.4Z", fill: "black" }),
+    /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 0C3.58 0 0 3.58 0 8C0 12.42 3.58 16 8 16C12.42 16 16 12.42 16 8C16 3.58 12.42 0 8 0ZM1 8C1 4.13 4.13 1 8 1C11.87 1 15 4.13 15 8C15 11.87 11.87 15 8 15C4.13 15 1 11.87 1 8Z", fill: "black" }),
+    title ? /* @__PURE__ */ jsx("title", { children: title }) : null
+  ] });
+}
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/badge.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var severityStyles = {
+  critical: "bg-[var(--hc-color-destructive)] text-white border-t border-t-black/20",
+  high: "bg-[var(--hc-badge-severity-high)] text-white border-t border-t-black/20",
+  medium: "bg-[var(--hc-badge-severity-medium)] text-white border-t border-t-black/20",
+  low: "bg-[var(--hc-badge-severity-low)] text-white border-t border-t-black/20"
+};
+var statusStyles = {
+  pending: "bg-[var(--hc-badge-pending-bg)] border border-[var(--hc-badge-pending-border)] text-[var(--hc-badge-pending-text)]",
+  "in-progress": "bg-[var(--hc-badge-in-progress-bg)] border border-[var(--hc-badge-in-progress-border)] text-[var(--hc-badge-in-progress-text)]",
+  "under-review": "bg-[var(--hc-badge-under-review-bg)] border border-[var(--hc-badge-under-review-border)] text-[var(--hc-badge-under-review-text)]",
+  resolved: "bg-[var(--hc-badge-resolved-bg)] border border-[var(--hc-badge-resolved-border)] text-[var(--hc-badge-resolved-text)]"
+};
+var pillStyles = {
+  error: "bg-[var(--hc-color-destructive)] text-white border-t border-t-black/20",
+  warning: "bg-[var(--hc-badge-severity-high)] text-white border-t border-t-black/20",
+  success: "bg-[var(--hc-badge-pill-success)] text-white border-t border-t-black/20",
+  primary: "bg-[var(--hc-primary-600)] text-white border-t border-t-black/20"
+};
+var iconStyles = {
+  warning: "bg-[var(--hc-badge-severity-high)] text-white border-t border-t-black/20 gap-[6px]",
+  complete: "bg-[var(--hc-badge-pill-success)] text-white border-t border-t-black/20 gap-[6px]",
+  "ai-generated": "bg-[var(--hc-primary-600)] text-white border-t border-t-black/20 gap-[6px]"
+};
+var designationStyles = "bg-[var(--hc-badge-designation-bg)] text-[var(--hc-badge-designation-text)] font-normal";
+var spinnerStyles = {
+  primary: "bg-[var(--hc-primary-100)] text-[var(--hc-primary-700)] border border-[var(--hc-primary-200)] gap-1.5",
+  neutral: "bg-muted text-muted-foreground border border-[var(--hc-color-border-subtle)] gap-1.5",
+  success: "bg-[var(--hc-banner-success-bg)] text-[var(--hc-color-success)] border border-[var(--hc-banner-success-border)] gap-1.5",
+  warning: "bg-[var(--hc-banner-warning-bg)] text-[var(--hc-badge-severity-high)] border border-[var(--hc-banner-warning-border)] gap-1.5"
+};
+var iconMap = {
+  warning: AlertTriangle,
+  complete: SuccessIcon,
+  "ai-generated": Sparkles
+};
+function Badge({
+  className,
+  variant,
+  severity,
+  status,
+  pill,
+  iconType,
+  spinnerTone = "primary",
+  dot,
+  children,
+  ...props
+}) {
+  const base = "inline-flex items-center h-[22px] rounded-[6px] px-2 py-0.5 text-xs font-medium gap-1";
+  let variantClasses = "";
+  if (variant === "severity" && severity) {
+    variantClasses = severityStyles[severity] ?? "";
+  } else if (variant === "status" && status) {
+    variantClasses = statusStyles[status] ?? "";
+  } else if (variant === "pill" && pill) {
+    variantClasses = pillStyles[pill] ?? "";
+  } else if (variant === "icon" && iconType) {
+    variantClasses = iconStyles[iconType] ?? "";
+  } else if (variant === "designation") {
+    variantClasses = designationStyles;
+  } else if (variant === "spinner") {
+    variantClasses = spinnerStyles[spinnerTone] ?? spinnerStyles.primary;
+  }
+  const IconComponent = variant === "icon" && iconType ? iconMap[iconType] : null;
+  return /* @__PURE__ */ jsxs2("div", { className: cn(base, variantClasses, className), ...props, children: [
+    variant === "spinner" && /* @__PURE__ */ jsx2(Loader2, { "aria-hidden": true, className: "size-3 shrink-0 animate-spin" }),
+    IconComponent && /* @__PURE__ */ jsx2(IconComponent, { className: "size-3 shrink-0" }),
+    dot && /* @__PURE__ */ jsx2("span", { className: "size-1.5 shrink-0 rounded-full bg-current" }),
+    children
+  ] });
+}
+export {
+  Badge
+};
+//# sourceMappingURL=badge.js.map

package/dist/components/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/badge.tsx","../../src/components/icon/success-icon.tsx","../../src/lib/utils.ts"],"sourcesContent":["import * as React from \"react\"\nimport { AlertTriangle, Loader2, Sparkles } from \"lucide-react\"\nimport { SuccessIcon } from \"./icon/success-icon\"\nimport { cn } from \"../lib/utils\"\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant: \"severity\" | \"status\" | \"pill\" | \"icon\" | \"designation\" | \"spinner\"\n  severity?: \"critical\" | \"high\" | \"medium\" | \"low\"\n  status?: \"pending\" | \"in-progress\" | \"under-review\" | \"resolved\"\n  pill?: \"error\" | \"warning\" | \"success\" | \"primary\"\n  iconType?: \"warning\" | \"complete\" | \"ai-generated\"\n  spinnerTone?: \"primary\" | \"neutral\" | \"success\" | \"warning\"\n  dot?: boolean\n}\n\nconst severityStyles: Record<string, string> = {\n  critical: \"bg-[var(--hc-color-destructive)] text-white border-t border-t-black/20\",\n  high: \"bg-[var(--hc-badge-severity-high)] text-white border-t border-t-black/20\",\n  medium: \"bg-[var(--hc-badge-severity-medium)] text-white border-t border-t-black/20\",\n  low: \"bg-[var(--hc-badge-severity-low)] text-white border-t border-t-black/20\",\n}\n\nconst statusStyles: Record<string, string> = {\n  pending: \"bg-[var(--hc-badge-pending-bg)] border border-[var(--hc-badge-pending-border)] text-[var(--hc-badge-pending-text)]\",\n  \"in-progress\": \"bg-[var(--hc-badge-in-progress-bg)] border border-[var(--hc-badge-in-progress-border)] text-[var(--hc-badge-in-progress-text)]\",\n  \"under-review\": \"bg-[var(--hc-badge-under-review-bg)] border border-[var(--hc-badge-under-review-border)] text-[var(--hc-badge-under-review-text)]\",\n  resolved: \"bg-[var(--hc-badge-resolved-bg)] border border-[var(--hc-badge-resolved-border)] text-[var(--hc-badge-resolved-text)]\",\n}\n\nconst pillStyles: Record<string, string> = {\n  error: \"bg-[var(--hc-color-destructive)] text-white border-t border-t-black/20\",\n  warning: \"bg-[var(--hc-badge-severity-high)] text-white border-t border-t-black/20\",\n  success: \"bg-[var(--hc-badge-pill-success)] text-white border-t border-t-black/20\",\n  primary: \"bg-[var(--hc-primary-600)] text-white border-t border-t-black/20\",\n}\n\nconst iconStyles: Record<string, string> = {\n  warning: \"bg-[var(--hc-badge-severity-high)] text-white border-t border-t-black/20 gap-[6px]\",\n  complete: \"bg-[var(--hc-badge-pill-success)] text-white border-t border-t-black/20 gap-[6px]\",\n  \"ai-generated\": \"bg-[var(--hc-primary-600)] text-white border-t border-t-black/20 gap-[6px]\",\n}\n\nconst designationStyles = \"bg-[var(--hc-badge-designation-bg)] text-[var(--hc-badge-designation-text)] font-normal\"\n\nconst spinnerStyles: Record<string, string> = {\n  primary: \"bg-[var(--hc-primary-100)] text-[var(--hc-primary-700)] border border-[var(--hc-primary-200)] gap-1.5\",\n  neutral: \"bg-muted text-muted-foreground border border-[var(--hc-color-border-subtle)] gap-1.5\",\n  success: \"bg-[var(--hc-banner-success-bg)] text-[var(--hc-color-success)] border border-[var(--hc-banner-success-border)] gap-1.5\",\n  warning: \"bg-[var(--hc-banner-warning-bg)] text-[var(--hc-badge-severity-high)] border border-[var(--hc-banner-warning-border)] gap-1.5\",\n}\n\nconst iconMap: Record<string, React.ElementType> = {\n  warning: AlertTriangle,\n  complete: SuccessIcon,\n  \"ai-generated\": Sparkles,\n}\n\nfunction Badge({\n  className,\n  variant,\n  severity,\n  status,\n  pill,\n  iconType,\n  spinnerTone = \"primary\",\n  dot,\n  children,\n  ...props\n}: BadgeProps) {\n  const base =\n    \"inline-flex items-center h-[22px] rounded-[6px] px-2 py-0.5 text-xs font-medium gap-1\"\n\n  let variantClasses = \"\"\n\n  if (variant === \"severity\" && severity) {\n    variantClasses = severityStyles[severity] ?? \"\"\n  } else if (variant === \"status\" && status) {\n    variantClasses = statusStyles[status] ?? \"\"\n  } else if (variant === \"pill\" && pill) {\n    variantClasses = pillStyles[pill] ?? \"\"\n  } else if (variant === \"icon\" && iconType) {\n    variantClasses = iconStyles[iconType] ?? \"\"\n  } else if (variant === \"designation\") {\n    variantClasses = designationStyles\n  } else if (variant === \"spinner\") {\n    variantClasses = spinnerStyles[spinnerTone] ?? spinnerStyles.primary\n  }\n\n  const IconComponent =\n    variant === \"icon\" && iconType ? iconMap[iconType] : null\n\n  return (\n    <div className={cn(base, variantClasses, className)} {...props}>\n      {variant === \"spinner\" && (\n        <Loader2 aria-hidden className=\"size-3 shrink-0 animate-spin\" />\n      )}\n      {IconComponent && <IconComponent className=\"size-3 shrink-0\" />}\n      {dot && (\n        <span className=\"size-1.5 shrink-0 rounded-full bg-current\" />\n      )}\n      {children}\n    </div>\n  )\n}\n\nexport { Badge }\n","import { LibraryIconProps } from \"./library-icon-props\";\n\nfunction SuccessIcon({ size = 16, width, height, fill, title, ...props }: LibraryIconProps) {\n  return (\n    <svg viewBox=\"0 0 16 16\" width={width ?? size} height={height ?? size} fill={fill ?? \"none\"} aria-hidden={title ? undefined : true} role={title ? \"img\" : \"presentation\"} {...props}>\n    <path d=\"M11.4 6.85C11.4911 6.7557 11.5415 6.6294 11.5403 6.4983C11.5392 6.3672 11.4866 6.2418 11.3939 6.14909C11.3012 6.05639 11.1758 6.00381 11.0447 6.00267C10.9136 6.00153 10.7873 6.05192 10.693 6.143L7.04301 9.793L5.39301 8.143C5.29871 8.05192 5.17241 8.00153 5.04131 8.00267C4.91021 8.0038 4.7848 8.05639 4.6921 8.14909C4.5994 8.2418 4.54681 8.3672 4.54567 8.4983C4.54453 8.6294 4.59493 8.7557 4.68601 8.85L6.68601 10.85C6.77977 10.9437 6.90693 10.9964 7.03951 10.9964C7.17209 10.9964 7.29925 10.9437 7.39301 10.85L11.393 6.85H11.4Z\" fill=\"black\"/>\n    <path fillRule=\"evenodd\" clipRule=\"evenodd\" d=\"M8 0C3.58 0 0 3.58 0 8C0 12.42 3.58 16 8 16C12.42 16 16 12.42 16 8C16 3.58 12.42 0 8 0ZM1 8C1 4.13 4.13 1 8 1C11.87 1 15 4.13 15 8C15 11.87 11.87 15 8 15C4.13 15 1 11.87 1 8Z\" fill=\"black\"/>\n      {title ? <title>{title}</title> : null}\n    </svg>\n  );\n}\n\nexport { SuccessIcon };\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":";AACA,SAAS,eAAe,SAAS,gBAAgB;;;ACG7C,SACA,KADA;AAFJ,SAAS,YAAY,EAAE,OAAO,IAAI,OAAO,QAAQ,MAAM,OAAO,GAAG,MAAM,GAAqB;AAC1F,SACE,qBAAC,SAAI,SAAQ,aAAY,OAAO,SAAS,MAAM,QAAQ,UAAU,MAAM,MAAM,QAAQ,QAAQ,eAAa,QAAQ,SAAY,MAAM,MAAM,QAAQ,QAAQ,gBAAiB,GAAG,OAC9K;AAAA,wBAAC,UAAK,GAAE,ohBAAmhB,MAAK,SAAO;AAAA,IACviB,oBAAC,UAAK,UAAS,WAAU,UAAS,WAAU,GAAE,kLAAiL,MAAK,SAAO;AAAA,IACxO,QAAQ,oBAAC,WAAO,iBAAM,IAAW;AAAA,KACpC;AAEJ;;;ACVA,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;AFuFI,SAEI,OAAAA,MAFJ,QAAAC,aAAA;AA7EJ,IAAM,iBAAyC;AAAA,EAC7C,UAAU;AAAA,EACV,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,KAAK;AACP;AAEA,IAAM,eAAuC;AAAA,EAC3C,SAAS;AAAA,EACT,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,UAAU;AACZ;AAEA,IAAM,aAAqC;AAAA,EACzC,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX;AAEA,IAAM,aAAqC;AAAA,EACzC,SAAS;AAAA,EACT,UAAU;AAAA,EACV,gBAAgB;AAClB;AAEA,IAAM,oBAAoB;AAE1B,IAAM,gBAAwC;AAAA,EAC5C,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX;AAEA,IAAM,UAA6C;AAAA,EACjD,SAAS;AAAA,EACT,UAAU;AAAA,EACV,gBAAgB;AAClB;AAEA,SAAS,MAAM;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAe;AACb,QAAM,OACJ;AAEF,MAAI,iBAAiB;AAErB,MAAI,YAAY,cAAc,UAAU;AACtC,qBAAiB,eAAe,QAAQ,KAAK;AAAA,EAC/C,WAAW,YAAY,YAAY,QAAQ;AACzC,qBAAiB,aAAa,MAAM,KAAK;AAAA,EAC3C,WAAW,YAAY,UAAU,MAAM;AACrC,qBAAiB,WAAW,IAAI,KAAK;AAAA,EACvC,WAAW,YAAY,UAAU,UAAU;AACzC,qBAAiB,WAAW,QAAQ,KAAK;AAAA,EAC3C,WAAW,YAAY,eAAe;AACpC,qBAAiB;AAAA,EACnB,WAAW,YAAY,WAAW;AAChC,qBAAiB,cAAc,WAAW,KAAK,cAAc;AAAA,EAC/D;AAEA,QAAM,gBACJ,YAAY,UAAU,WAAW,QAAQ,QAAQ,IAAI;AAEvD,SACE,gBAAAA,MAAC,SAAI,WAAW,GAAG,MAAM,gBAAgB,SAAS,GAAI,GAAG,OACtD;AAAA,gBAAY,aACX,gBAAAD,KAAC,WAAQ,eAAW,MAAC,WAAU,gCAA+B;AAAA,IAE/D,iBAAiB,gBAAAA,KAAC,iBAAc,WAAU,mBAAkB;AAAA,IAC5D,OACC,gBAAAA,KAAC,UAAK,WAAU,6CAA4C;AAAA,IAE7D;AAAA,KACH;AAEJ;","names":["jsx","jsxs"]}

package/dist/components/banner.cjs

@@ -0,0 +1,87 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/banner.tsx
+var banner_exports = {};
+__export(banner_exports, {
+  Banner: () => Banner
+});
+module.exports = __toCommonJS(banner_exports);
+var React = __toESM(require("react"), 1);
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/banner.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var variantStyles = {
+  primary: "bg-[var(--hc-banner-primary-bg)] border border-[var(--hc-primary-200)]",
+  muted: "bg-[var(--hc-color-muted)] border border-[var(--hc-color-border)]",
+  success: "bg-[var(--hc-banner-success-bg)] border border-[var(--hc-banner-success-border)]",
+  warning: "bg-[var(--hc-banner-warning-bg)] border border-[var(--hc-banner-warning-border)]",
+  destructive: "bg-[var(--hc-banner-destructive-bg)] border border-[var(--hc-banner-destructive-border)]"
+};
+var iconBgStyles = {
+  primary: "bg-[var(--hc-primary-500)]",
+  muted: "bg-[var(--hc-color-border)]",
+  success: "bg-[var(--hc-color-success)]",
+  warning: "bg-[var(--hc-color-warning)]",
+  destructive: "bg-[var(--hc-color-destructive)]"
+};
+var Banner = React.forwardRef(
+  ({ variant = "primary", icon, title, description, action, className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref,
+      className: cn("rounded-lg px-6 py-5", variantStyles[variant], className),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-3", children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("h-10 w-10 rounded-full flex items-center justify-center shrink-0 text-white", iconBgStyles[variant]), children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-bold text-foreground", children: title }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs mt-0.5 text-muted-foreground", children: description }),
+            children
+          ] })
+        ] }),
+        action && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "shrink-0", children: action })
+      ] })
+    }
+  )
+);
+Banner.displayName = "Banner";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Banner
+});
+//# sourceMappingURL=banner.cjs.map

package/dist/components/banner.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/banner.tsx","../../src/lib/utils.ts"],"sourcesContent":["import * as React from \"react\"\nimport { cn } from \"../lib/utils\"\n\nexport interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: \"primary\" | \"muted\" | \"success\" | \"warning\" | \"destructive\"\n  icon?: React.ReactNode\n  title?: string\n  description?: string\n  action?: React.ReactNode\n}\n\nconst variantStyles: Record<NonNullable<BannerProps[\"variant\"]>, string> = {\n  primary: \"bg-[var(--hc-banner-primary-bg)] border border-[var(--hc-primary-200)]\",\n  muted: \"bg-[var(--hc-color-muted)] border border-[var(--hc-color-border)]\",\n  success: \"bg-[var(--hc-banner-success-bg)] border border-[var(--hc-banner-success-border)]\",\n  warning: \"bg-[var(--hc-banner-warning-bg)] border border-[var(--hc-banner-warning-border)]\",\n  destructive: \"bg-[var(--hc-banner-destructive-bg)] border border-[var(--hc-banner-destructive-border)]\",\n}\n\nconst iconBgStyles: Record<NonNullable<BannerProps[\"variant\"]>, string> = {\n  primary: \"bg-[var(--hc-primary-500)]\",\n  muted: \"bg-[var(--hc-color-border)]\",\n  success: \"bg-[var(--hc-color-success)]\",\n  warning: \"bg-[var(--hc-color-warning)]\",\n  destructive: \"bg-[var(--hc-color-destructive)]\",\n}\n\nconst Banner = React.forwardRef<HTMLDivElement, BannerProps>(\n  ({ variant = \"primary\", icon, title, description, action, className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\"rounded-lg px-6 py-5\", variantStyles[variant], className)}\n      {...props}\n    >\n      <div className=\"flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4\">\n        <div className=\"flex items-center gap-3\">\n          {icon && (\n            <div className={cn(\"h-10 w-10 rounded-full flex items-center justify-center shrink-0 text-white\", iconBgStyles[variant])}>\n              {icon}\n            </div>\n          )}\n          <div>\n            {title && (\n              <p className=\"text-sm font-bold text-foreground\">\n                {title}\n              </p>\n            )}\n            {description && (\n              <p className=\"text-xs mt-0.5 text-muted-foreground\">\n                {description}\n              </p>\n            )}\n            {children}\n          </div>\n        </div>\n        {action && <div className=\"shrink-0\">{action}</div>}\n      </div>\n    </div>\n  )\n)\nBanner.displayName = \"Banner\"\n\nexport { Banner }\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;;;ACAvB,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADgCY;AA1BZ,IAAM,gBAAqE;AAAA,EACzE,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,aAAa;AACf;AAEA,IAAM,eAAoE;AAAA,EACxE,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,aAAa;AACf;AAEA,IAAM,SAAe;AAAA,EACnB,CAAC,EAAE,UAAU,WAAW,MAAM,OAAO,aAAa,QAAQ,WAAW,UAAU,GAAG,MAAM,GAAG,QACzF;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,wBAAwB,cAAc,OAAO,GAAG,SAAS;AAAA,MACtE,GAAG;AAAA,MAEJ,uDAAC,SAAI,WAAU,+EACb;AAAA,qDAAC,SAAI,WAAU,2BACZ;AAAA,kBACC,4CAAC,SAAI,WAAW,GAAG,+EAA+E,aAAa,OAAO,CAAC,GACpH,gBACH;AAAA,UAEF,6CAAC,SACE;AAAA,qBACC,4CAAC,OAAE,WAAU,qCACV,iBACH;AAAA,YAED,eACC,4CAAC,OAAE,WAAU,wCACV,uBACH;AAAA,YAED;AAAA,aACH;AAAA,WACF;AAAA,QACC,UAAU,4CAAC,SAAI,WAAU,YAAY,kBAAO;AAAA,SAC/C;AAAA;AAAA,EACF;AAEJ;AACA,OAAO,cAAc;","names":[]}

package/dist/components/banner.d.cts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: "primary" | "muted" | "success" | "warning" | "destructive";
+    icon?: React.ReactNode;
+    title?: string;
+    description?: string;
+    action?: React.ReactNode;
+}
+declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Banner, type BannerProps };

package/dist/components/banner.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: "primary" | "muted" | "success" | "warning" | "destructive";
+    icon?: React.ReactNode;
+    title?: string;
+    description?: string;
+    action?: React.ReactNode;
+}
+declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Banner, type BannerProps };

package/dist/components/banner.js

@@ -0,0 +1,52 @@
+// src/components/banner.tsx
+import * as React from "react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/banner.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var variantStyles = {
+  primary: "bg-[var(--hc-banner-primary-bg)] border border-[var(--hc-primary-200)]",
+  muted: "bg-[var(--hc-color-muted)] border border-[var(--hc-color-border)]",
+  success: "bg-[var(--hc-banner-success-bg)] border border-[var(--hc-banner-success-border)]",
+  warning: "bg-[var(--hc-banner-warning-bg)] border border-[var(--hc-banner-warning-border)]",
+  destructive: "bg-[var(--hc-banner-destructive-bg)] border border-[var(--hc-banner-destructive-border)]"
+};
+var iconBgStyles = {
+  primary: "bg-[var(--hc-primary-500)]",
+  muted: "bg-[var(--hc-color-border)]",
+  success: "bg-[var(--hc-color-success)]",
+  warning: "bg-[var(--hc-color-warning)]",
+  destructive: "bg-[var(--hc-color-destructive)]"
+};
+var Banner = React.forwardRef(
+  ({ variant = "primary", icon, title, description, action, className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("rounded-lg px-6 py-5", variantStyles[variant], className),
+      ...props,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          icon && /* @__PURE__ */ jsx("div", { className: cn("h-10 w-10 rounded-full flex items-center justify-center shrink-0 text-white", iconBgStyles[variant]), children: icon }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            title && /* @__PURE__ */ jsx("p", { className: "text-sm font-bold text-foreground", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "text-xs mt-0.5 text-muted-foreground", children: description }),
+            children
+          ] })
+        ] }),
+        action && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action })
+      ] })
+    }
+  )
+);
+Banner.displayName = "Banner";
+export {
+  Banner
+};
+//# sourceMappingURL=banner.js.map