acai-ui-library 0.1.11

package/dist/components/app-header.cjs

@@ -0,0 +1,137 @@
+"use strict";
+"use client";
+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/app-header.tsx
+var app_header_exports = {};
+__export(app_header_exports, {
+  AppHeader: () => AppHeader
+});
+module.exports = __toCommonJS(app_header_exports);
+var React = __toESM(require("react"), 1);
+var import_lucide_react = require("lucide-react");
+
+// 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/app-header.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var AppHeader = React.forwardRef(
+  ({
+    onSearch,
+    searchPlaceholder = "Search cases, employees...",
+    showThemeToggle = true,
+    onThemeToggle,
+    hasNotifications = false,
+    onNotificationClick,
+    user,
+    className,
+    ...props
+  }, ref) => {
+    const [searchQuery, setSearchQuery] = React.useState("");
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "header",
+      {
+        ref,
+        className: cn(
+          "flex h-16 w-full items-center justify-between gap-4 border-b border-[var(--hc-color-border-subtle)] bg-background px-6",
+          className
+        ),
+        ...props,
+        children: [
+          onSearch && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex h-9 w-[300px] items-center gap-2 rounded-md border border-input bg-background px-3 transition-[border-color,box-shadow] duration-150 focus-within:border-[var(--hc-primary-500)] focus-within:ring-[3px] focus-within:ring-[color-mix(in_srgb,var(--hc-primary-500)_22%,transparent)]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Search, { className: "size-4 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "input",
+              {
+                type: "text",
+                placeholder: searchPlaceholder,
+                value: searchQuery,
+                onChange: (e) => {
+                  setSearchQuery(e.target.value);
+                  onSearch(e.target.value);
+                },
+                className: "w-full bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none",
+                "aria-label": searchPlaceholder
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+            showThemeToggle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: onThemeToggle,
+                "aria-label": "Toggle theme",
+                className: "inline-flex size-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Moon, { className: "size-[18px]" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "button",
+              {
+                type: "button",
+                onClick: onNotificationClick,
+                "aria-label": hasNotifications ? "Notifications (unread)" : "Notifications",
+                className: "relative inline-flex size-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Bell, { className: "size-[18px]" }),
+                  hasNotifications && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: "absolute top-[8px] end-[8px] size-2 rounded-full bg-[var(--hc-color-destructive)] ring-2 ring-background"
+                    }
+                  )
+                ]
+              }
+            ),
+            user && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ms-1 flex items-center gap-3 ps-3 border-s border-[var(--hc-color-border-subtle)]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-end leading-tight", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-semibold text-foreground", children: user.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-muted-foreground truncate max-w-[160px]", children: user.email })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex size-9 shrink-0 items-center justify-center rounded-full bg-[var(--hc-primary-600)] text-sm font-semibold text-white", children: user.initials || user.name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) })
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+AppHeader.displayName = "AppHeader";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AppHeader
+});
+//# sourceMappingURL=app-header.cjs.map

package/dist/components/app-header.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/app-header.tsx","../../src/lib/utils.ts"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Search, Bell, Moon } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\n\nexport interface AppHeaderProps extends React.HTMLAttributes<HTMLElement> {\n  onSearch?: (query: string) => void\n  searchPlaceholder?: string\n  showThemeToggle?: boolean\n  onThemeToggle?: () => void\n  hasNotifications?: boolean\n  onNotificationClick?: () => void\n  user?: {\n    name: string\n    email: string\n    avatar?: string\n    initials?: string\n  }\n}\n\nconst AppHeader = React.forwardRef<HTMLElement, AppHeaderProps>(\n  (\n    {\n      onSearch,\n      searchPlaceholder = \"Search cases, employees...\",\n      showThemeToggle = true,\n      onThemeToggle,\n      hasNotifications = false,\n      onNotificationClick,\n      user,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const [searchQuery, setSearchQuery] = React.useState(\"\")\n\n    return (\n      <header\n        ref={ref}\n        className={cn(\n          \"flex h-16 w-full items-center justify-between gap-4 border-b border-[var(--hc-color-border-subtle)] bg-background px-6\",\n          className\n        )}\n        {...props}\n      >\n        {/* Left: Search */}\n        {onSearch && (\n          <div className=\"flex h-9 w-[300px] items-center gap-2 rounded-md border border-input bg-background px-3 transition-[border-color,box-shadow] duration-150 focus-within:border-[var(--hc-primary-500)] focus-within:ring-[3px] focus-within:ring-[color-mix(in_srgb,var(--hc-primary-500)_22%,transparent)]\">\n            <Search className=\"size-4 shrink-0 text-muted-foreground\" />\n            <input\n              type=\"text\"\n              placeholder={searchPlaceholder}\n              value={searchQuery}\n              onChange={(e) => {\n                setSearchQuery(e.target.value)\n                onSearch(e.target.value)\n              }}\n              className=\"w-full bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none\"\n              aria-label={searchPlaceholder}\n            />\n          </div>\n        )}\n\n        {/* Right side */}\n        <div className=\"flex items-center gap-2\">\n          {/* Theme toggle */}\n          {showThemeToggle && (\n            <button\n              type=\"button\"\n              onClick={onThemeToggle}\n              aria-label=\"Toggle theme\"\n              className=\"inline-flex size-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n            >\n              <Moon className=\"size-[18px]\" />\n            </button>\n          )}\n\n          {/* Notification bell */}\n          <button\n            type=\"button\"\n            onClick={onNotificationClick}\n            aria-label={hasNotifications ? \"Notifications (unread)\" : \"Notifications\"}\n            className=\"relative inline-flex size-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n          >\n            <Bell className=\"size-[18px]\" />\n            {hasNotifications && (\n              <span\n                aria-hidden=\"true\"\n                className=\"absolute top-[8px] end-[8px] size-2 rounded-full bg-[var(--hc-color-destructive)] ring-2 ring-background\"\n              />\n            )}\n          </button>\n\n          {/* User profile */}\n          {user && (\n            <div className=\"ms-1 flex items-center gap-3 ps-3 border-s border-[var(--hc-color-border-subtle)]\">\n              <div className=\"text-end leading-tight\">\n                <p className=\"text-sm font-semibold text-foreground\">\n                  {user.name}\n                </p>\n                <p className=\"text-xs text-muted-foreground truncate max-w-[160px]\">\n                  {user.email}\n                </p>\n              </div>\n              <div className=\"flex size-9 shrink-0 items-center justify-center rounded-full bg-[var(--hc-primary-600)] text-sm font-semibold text-white\">\n                {user.initials ||\n                  user.name\n                    .split(\" \")\n                    .map((n) => n[0])\n                    .join(\"\")\n                    .toUpperCase()\n                    .slice(0, 2)}\n              </div>\n            </div>\n          )}\n        </div>\n      </header>\n    )\n  }\n)\nAppHeader.displayName = \"AppHeader\"\n\nexport { AppHeader }\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;AAEA,YAAuB;AACvB,0BAAmC;;;ACHnC,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;AD4CU;AA5BV,IAAM,YAAkB;AAAA,EACtB,CACE;AAAA,IACE;AAAA,IACA,oBAAoB;AAAA,IACpB,kBAAkB;AAAA,IAClB;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,CAAC,aAAa,cAAc,IAAU,eAAS,EAAE;AAEvD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAGH;AAAA,sBACC,6CAAC,SAAI,WAAU,8RACb;AAAA,wDAAC,8BAAO,WAAU,yCAAwC;AAAA,YAC1D;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,aAAa;AAAA,gBACb,OAAO;AAAA,gBACP,UAAU,CAAC,MAAM;AACf,iCAAe,EAAE,OAAO,KAAK;AAC7B,2BAAS,EAAE,OAAO,KAAK;AAAA,gBACzB;AAAA,gBACA,WAAU;AAAA,gBACV,cAAY;AAAA;AAAA,YACd;AAAA,aACF;AAAA,UAIF,6CAAC,SAAI,WAAU,2BAEZ;AAAA,+BACC;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT,cAAW;AAAA,gBACX,WAAU;AAAA,gBAEV,sDAAC,4BAAK,WAAU,eAAc;AAAA;AAAA,YAChC;AAAA,YAIF;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT,cAAY,mBAAmB,2BAA2B;AAAA,gBAC1D,WAAU;AAAA,gBAEV;AAAA,8DAAC,4BAAK,WAAU,eAAc;AAAA,kBAC7B,oBACC;AAAA,oBAAC;AAAA;AAAA,sBACC,eAAY;AAAA,sBACZ,WAAU;AAAA;AAAA,kBACZ;AAAA;AAAA;AAAA,YAEJ;AAAA,YAGC,QACC,6CAAC,SAAI,WAAU,qFACb;AAAA,2DAAC,SAAI,WAAU,0BACb;AAAA,4DAAC,OAAE,WAAU,yCACV,eAAK,MACR;AAAA,gBACA,4CAAC,OAAE,WAAU,wDACV,eAAK,OACR;AAAA,iBACF;AAAA,cACA,4CAAC,SAAI,WAAU,6HACZ,eAAK,YACJ,KAAK,KACF,MAAM,GAAG,EACT,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,EACf,KAAK,EAAE,EACP,YAAY,EACZ,MAAM,GAAG,CAAC,GACjB;AAAA,eACF;AAAA,aAEJ;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AACA,UAAU,cAAc;","names":[]}

package/dist/components/app-header.d.cts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+interface AppHeaderProps extends React.HTMLAttributes<HTMLElement> {
+    onSearch?: (query: string) => void;
+    searchPlaceholder?: string;
+    showThemeToggle?: boolean;
+    onThemeToggle?: () => void;
+    hasNotifications?: boolean;
+    onNotificationClick?: () => void;
+    user?: {
+        name: string;
+        email: string;
+        avatar?: string;
+        initials?: string;
+    };
+}
+declare const AppHeader: React.ForwardRefExoticComponent<AppHeaderProps & React.RefAttributes<HTMLElement>>;
+
+export { AppHeader, type AppHeaderProps };

package/dist/components/app-header.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+interface AppHeaderProps extends React.HTMLAttributes<HTMLElement> {
+    onSearch?: (query: string) => void;
+    searchPlaceholder?: string;
+    showThemeToggle?: boolean;
+    onThemeToggle?: () => void;
+    hasNotifications?: boolean;
+    onNotificationClick?: () => void;
+    user?: {
+        name: string;
+        email: string;
+        avatar?: string;
+        initials?: string;
+    };
+}
+declare const AppHeader: React.ForwardRefExoticComponent<AppHeaderProps & React.RefAttributes<HTMLElement>>;
+
+export { AppHeader, type AppHeaderProps };

package/dist/components/app-header.js

@@ -0,0 +1,103 @@
+"use client";
+
+// src/components/app-header.tsx
+import * as React from "react";
+import { Search, Bell, Moon } from "lucide-react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/app-header.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var AppHeader = React.forwardRef(
+  ({
+    onSearch,
+    searchPlaceholder = "Search cases, employees...",
+    showThemeToggle = true,
+    onThemeToggle,
+    hasNotifications = false,
+    onNotificationClick,
+    user,
+    className,
+    ...props
+  }, ref) => {
+    const [searchQuery, setSearchQuery] = React.useState("");
+    return /* @__PURE__ */ jsxs(
+      "header",
+      {
+        ref,
+        className: cn(
+          "flex h-16 w-full items-center justify-between gap-4 border-b border-[var(--hc-color-border-subtle)] bg-background px-6",
+          className
+        ),
+        ...props,
+        children: [
+          onSearch && /* @__PURE__ */ jsxs("div", { className: "flex h-9 w-[300px] items-center gap-2 rounded-md border border-input bg-background px-3 transition-[border-color,box-shadow] duration-150 focus-within:border-[var(--hc-primary-500)] focus-within:ring-[3px] focus-within:ring-[color-mix(in_srgb,var(--hc-primary-500)_22%,transparent)]", children: [
+            /* @__PURE__ */ jsx(Search, { className: "size-4 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                placeholder: searchPlaceholder,
+                value: searchQuery,
+                onChange: (e) => {
+                  setSearchQuery(e.target.value);
+                  onSearch(e.target.value);
+                },
+                className: "w-full bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none",
+                "aria-label": searchPlaceholder
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            showThemeToggle && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onThemeToggle,
+                "aria-label": "Toggle theme",
+                className: "inline-flex size-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+                children: /* @__PURE__ */ jsx(Moon, { className: "size-[18px]" })
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: onNotificationClick,
+                "aria-label": hasNotifications ? "Notifications (unread)" : "Notifications",
+                className: "relative inline-flex size-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+                children: [
+                  /* @__PURE__ */ jsx(Bell, { className: "size-[18px]" }),
+                  hasNotifications && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: "absolute top-[8px] end-[8px] size-2 rounded-full bg-[var(--hc-color-destructive)] ring-2 ring-background"
+                    }
+                  )
+                ]
+              }
+            ),
+            user && /* @__PURE__ */ jsxs("div", { className: "ms-1 flex items-center gap-3 ps-3 border-s border-[var(--hc-color-border-subtle)]", children: [
+              /* @__PURE__ */ jsxs("div", { className: "text-end leading-tight", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: user.name }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate max-w-[160px]", children: user.email })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex size-9 shrink-0 items-center justify-center rounded-full bg-[var(--hc-primary-600)] text-sm font-semibold text-white", children: user.initials || user.name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) })
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+AppHeader.displayName = "AppHeader";
+export {
+  AppHeader
+};
+//# sourceMappingURL=app-header.js.map

package/dist/components/app-header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/app-header.tsx","../../src/lib/utils.ts"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Search, Bell, Moon } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\n\nexport interface AppHeaderProps extends React.HTMLAttributes<HTMLElement> {\n  onSearch?: (query: string) => void\n  searchPlaceholder?: string\n  showThemeToggle?: boolean\n  onThemeToggle?: () => void\n  hasNotifications?: boolean\n  onNotificationClick?: () => void\n  user?: {\n    name: string\n    email: string\n    avatar?: string\n    initials?: string\n  }\n}\n\nconst AppHeader = React.forwardRef<HTMLElement, AppHeaderProps>(\n  (\n    {\n      onSearch,\n      searchPlaceholder = \"Search cases, employees...\",\n      showThemeToggle = true,\n      onThemeToggle,\n      hasNotifications = false,\n      onNotificationClick,\n      user,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const [searchQuery, setSearchQuery] = React.useState(\"\")\n\n    return (\n      <header\n        ref={ref}\n        className={cn(\n          \"flex h-16 w-full items-center justify-between gap-4 border-b border-[var(--hc-color-border-subtle)] bg-background px-6\",\n          className\n        )}\n        {...props}\n      >\n        {/* Left: Search */}\n        {onSearch && (\n          <div className=\"flex h-9 w-[300px] items-center gap-2 rounded-md border border-input bg-background px-3 transition-[border-color,box-shadow] duration-150 focus-within:border-[var(--hc-primary-500)] focus-within:ring-[3px] focus-within:ring-[color-mix(in_srgb,var(--hc-primary-500)_22%,transparent)]\">\n            <Search className=\"size-4 shrink-0 text-muted-foreground\" />\n            <input\n              type=\"text\"\n              placeholder={searchPlaceholder}\n              value={searchQuery}\n              onChange={(e) => {\n                setSearchQuery(e.target.value)\n                onSearch(e.target.value)\n              }}\n              className=\"w-full bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none\"\n              aria-label={searchPlaceholder}\n            />\n          </div>\n        )}\n\n        {/* Right side */}\n        <div className=\"flex items-center gap-2\">\n          {/* Theme toggle */}\n          {showThemeToggle && (\n            <button\n              type=\"button\"\n              onClick={onThemeToggle}\n              aria-label=\"Toggle theme\"\n              className=\"inline-flex size-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n            >\n              <Moon className=\"size-[18px]\" />\n            </button>\n          )}\n\n          {/* Notification bell */}\n          <button\n            type=\"button\"\n            onClick={onNotificationClick}\n            aria-label={hasNotifications ? \"Notifications (unread)\" : \"Notifications\"}\n            className=\"relative inline-flex size-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n          >\n            <Bell className=\"size-[18px]\" />\n            {hasNotifications && (\n              <span\n                aria-hidden=\"true\"\n                className=\"absolute top-[8px] end-[8px] size-2 rounded-full bg-[var(--hc-color-destructive)] ring-2 ring-background\"\n              />\n            )}\n          </button>\n\n          {/* User profile */}\n          {user && (\n            <div className=\"ms-1 flex items-center gap-3 ps-3 border-s border-[var(--hc-color-border-subtle)]\">\n              <div className=\"text-end leading-tight\">\n                <p className=\"text-sm font-semibold text-foreground\">\n                  {user.name}\n                </p>\n                <p className=\"text-xs text-muted-foreground truncate max-w-[160px]\">\n                  {user.email}\n                </p>\n              </div>\n              <div className=\"flex size-9 shrink-0 items-center justify-center rounded-full bg-[var(--hc-primary-600)] text-sm font-semibold text-white\">\n                {user.initials ||\n                  user.name\n                    .split(\" \")\n                    .map((n) => n[0])\n                    .join(\"\")\n                    .toUpperCase()\n                    .slice(0, 2)}\n              </div>\n            </div>\n          )}\n        </div>\n      </header>\n    )\n  }\n)\nAppHeader.displayName = \"AppHeader\"\n\nexport { AppHeader }\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":";;;AAEA,YAAY,WAAW;AACvB,SAAS,QAAQ,MAAM,YAAY;;;ACHnC,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;AD4CU,SACE,KADF;AA5BV,IAAM,YAAkB;AAAA,EACtB,CACE;AAAA,IACE;AAAA,IACA,oBAAoB;AAAA,IACpB,kBAAkB;AAAA,IAClB;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,CAAC,aAAa,cAAc,IAAU,eAAS,EAAE;AAEvD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAGH;AAAA,sBACC,qBAAC,SAAI,WAAU,8RACb;AAAA,gCAAC,UAAO,WAAU,yCAAwC;AAAA,YAC1D;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,aAAa;AAAA,gBACb,OAAO;AAAA,gBACP,UAAU,CAAC,MAAM;AACf,iCAAe,EAAE,OAAO,KAAK;AAC7B,2BAAS,EAAE,OAAO,KAAK;AAAA,gBACzB;AAAA,gBACA,WAAU;AAAA,gBACV,cAAY;AAAA;AAAA,YACd;AAAA,aACF;AAAA,UAIF,qBAAC,SAAI,WAAU,2BAEZ;AAAA,+BACC;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT,cAAW;AAAA,gBACX,WAAU;AAAA,gBAEV,8BAAC,QAAK,WAAU,eAAc;AAAA;AAAA,YAChC;AAAA,YAIF;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT,cAAY,mBAAmB,2BAA2B;AAAA,gBAC1D,WAAU;AAAA,gBAEV;AAAA,sCAAC,QAAK,WAAU,eAAc;AAAA,kBAC7B,oBACC;AAAA,oBAAC;AAAA;AAAA,sBACC,eAAY;AAAA,sBACZ,WAAU;AAAA;AAAA,kBACZ;AAAA;AAAA;AAAA,YAEJ;AAAA,YAGC,QACC,qBAAC,SAAI,WAAU,qFACb;AAAA,mCAAC,SAAI,WAAU,0BACb;AAAA,oCAAC,OAAE,WAAU,yCACV,eAAK,MACR;AAAA,gBACA,oBAAC,OAAE,WAAU,wDACV,eAAK,OACR;AAAA,iBACF;AAAA,cACA,oBAAC,SAAI,WAAU,6HACZ,eAAK,YACJ,KAAK,KACF,MAAM,GAAG,EACT,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,EACf,KAAK,EAAE,EACP,YAAY,EACZ,MAAM,GAAG,CAAC,GACjB;AAAA,eACF;AAAA,aAEJ;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AACA,UAAU,cAAc;","names":[]}

package/dist/components/avatar.cjs

@@ -0,0 +1,176 @@
+"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/avatar.tsx
+var avatar_exports = {};
+__export(avatar_exports, {
+  Avatar: () => Avatar,
+  AvatarFallback: () => AvatarFallback,
+  AvatarGroup: () => AvatarGroup,
+  AvatarImage: () => AvatarImage
+});
+module.exports = __toCommonJS(avatar_exports);
+var React = __toESM(require("react"), 1);
+var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"), 1);
+var import_class_variance_authority = require("class-variance-authority");
+
+// 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/avatar.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var avatarVariants = (0, import_class_variance_authority.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__ */ (0, import_jsx_runtime.jsxs)("span", { className: "relative inline-flex", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { ref, className: cn("flex items-center", className), ...props, children: [
+      visibleChildren.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("relative", overlapClass[size]), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Avatar, { size, bordered: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AvatarFallback, { children: [
+        "+",
+        overflowCount
+      ] }) }) })
+    ] });
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Avatar,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarImage
+});
+//# sourceMappingURL=avatar.cjs.map

package/dist/components/avatar.cjs.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/avatar.d.cts

@@ -0,0 +1,23 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { VariantProps } from 'class-variance-authority';
+
+type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+declare const avatarVariants: (props?: ({
+    size?: "sm" | "xs" | "lg" | "md" | "xl" | null | undefined;
+    bordered?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {
+    status?: "online" | "offline" | "away" | "busy";
+}
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    max?: number;
+    size?: AvatarSize;
+}
+declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Avatar, AvatarFallback, AvatarGroup, AvatarImage, type AvatarProps };

package/dist/components/avatar.d.ts

@@ -0,0 +1,23 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { VariantProps } from 'class-variance-authority';
+
+type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+declare const avatarVariants: (props?: ({
+    size?: "sm" | "xs" | "lg" | "md" | "xl" | null | undefined;
+    bordered?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {
+    status?: "online" | "offline" | "away" | "busy";
+}
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    max?: number;
+    size?: AvatarSize;
+}
+declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Avatar, AvatarFallback, AvatarGroup, AvatarImage, type AvatarProps };