@mieweb/ui 0.1.0

package/dist/brands/waggleline.css

@@ -0,0 +1,164 @@
+/**
+ * Waggleline Brand Theme
+ * Generated by @mieweb/ui
+ * Experience visualization and orchestration platform for customer journeys
+ *
+ * Usage (standalone CSS):
+ *   @import '@mieweb/ui/brands/waggleline.css';
+ *
+ * Usage (Tailwind CSS 4):
+ *   @import '@mieweb/ui/brands/waggleline.css' layer(theme);
+ *
+ * Brand colors:
+ * - Blue (#17AEED): Primary actions, momentum
+ * - Green (#009C4E): Success, completions
+ * - Orange (#E04501): Workflow, urgency
+ * - Yellow (#FFD200): Readiness, highlights
+ * - Purple (#8B5CF6): AI, intelligence
+ */
+
+/* ============================================
+   Waggleline Design Tokens
+   ============================================ */
+
+:root {
+  /* Primary Color Scale - Waggleline Blue */
+  --mieweb-primary-50: #e6f7ff;
+  --mieweb-primary-100: #bae7ff;
+  --mieweb-primary-200: #91d5ff;
+  --mieweb-primary-300: #69c0ff;
+  --mieweb-primary-400: #40a9ff;
+  --mieweb-primary-500: #17aeed;
+  --mieweb-primary-600: #00a4eb;
+  --mieweb-primary-700: #0084c8;
+  --mieweb-primary-800: #006aa5;
+  --mieweb-primary-900: #004d7a;
+  --mieweb-primary-950: #003355;
+
+  /* Light Mode Semantic Colors */
+  --mieweb-background: #fafafa;
+  --mieweb-foreground: #1a1a1a;
+  --mieweb-card: #ffffff;
+  --mieweb-card-foreground: #1a1a1a;
+  --mieweb-muted: #f5f5f5;
+  --mieweb-muted-foreground: #6b7280;
+  --mieweb-border: #e5e7eb;
+  --mieweb-input: #e5e7eb;
+  --mieweb-ring: #17aeed;
+  --mieweb-destructive: #ef4444;
+  --mieweb-destructive-foreground: #ffffff;
+  --mieweb-success: #009c4e;
+  --mieweb-success-foreground: #ffffff;
+  --mieweb-warning: #ffd200;
+  --mieweb-warning-foreground: #1a1a1a;
+
+  /* Typography */
+  --mieweb-font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --mieweb-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+
+  /* Border Radius */
+  --mieweb-radius-none: 0;
+  --mieweb-radius-sm: 0.25rem;
+  --mieweb-radius-md: 0.5rem;
+  --mieweb-radius-lg: 0.75rem;
+  --mieweb-radius-xl: 1rem;
+  --mieweb-radius-2xl: 1.5rem;
+  --mieweb-radius-full: 9999px;
+
+  /* Shadows (Waggleline uses soft shadows) */
+  --mieweb-shadow-card:
+    0 2px 8px -2px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
+  --mieweb-shadow-dropdown:
+    0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --mieweb-shadow-modal:
+    0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
+
+  /* Waggleline Brand Colors (for reference) */
+  --waggleline-blue: #17aeed;
+  --waggleline-green: #009c4e;
+  --waggleline-orange: #e04501;
+  --waggleline-yellow: #ffd200;
+  --waggleline-purple: #8b5cf6;
+}
+
+/* Dark Mode - Charcoal based (not pure black) */
+[data-theme='dark'],
+.dark {
+  --mieweb-background: #1f2937;
+  --mieweb-foreground: #f9fafb;
+  --mieweb-card: #2d3748;
+  --mieweb-card-foreground: #f9fafb;
+  --mieweb-muted: #374151;
+  --mieweb-muted-foreground: #9ca3af;
+  --mieweb-border: #374151;
+  --mieweb-input: #374151;
+  --mieweb-ring: #17aeed;
+  --mieweb-destructive: #dc2626;
+  --mieweb-destructive-foreground: #f9fafb;
+  --mieweb-success: #009c4e;
+  --mieweb-success-foreground: #f9fafb;
+  --mieweb-warning: #ffd200;
+  --mieweb-warning-foreground: #1a1a1a;
+}
+
+/* ============================================
+   Typography Base
+   ============================================ */
+
+body {
+  font-family: var(--mieweb-font-sans);
+  background-color: var(--mieweb-background);
+  color: var(--mieweb-foreground);
+}
+
+code,
+pre,
+kbd {
+  font-family: var(--mieweb-font-mono);
+}
+
+/* ============================================
+   Smooth Theme Transitions
+   ============================================ */
+
+*,
+*::before,
+*::after {
+  transition:
+    background-color 0.3s ease,
+    border-color 0.3s ease,
+    color 0.3s ease;
+}
+
+/* Disable transitions on page load */
+.no-transitions *,
+.no-transitions *::before,
+.no-transitions *::after {
+  transition: none !important;
+}
+
+/* ============================================
+   Focus Ring Utilities
+   ============================================ */
+
+.focus-ring {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus-ring:focus-visible {
+  outline: 2px solid var(--mieweb-ring);
+}
+
+/* ============================================
+   Waggleline Specific Utilities
+   ============================================ */
+
+/* Card hover effect */
+.card-hover {
+  transition: all 0.2s ease-out;
+}
+
+.card-hover:hover {
+  box-shadow: var(--mieweb-shadow-modal);
+}

package/dist/brands/webchart.css

@@ -0,0 +1,138 @@
+/**
+ * WebChart Brand Theme
+ * Generated by @mieweb/ui
+ * Future-ready electronic health record system
+ *
+ * Usage (standalone CSS):
+ *   @import '@mieweb/ui/brands/webchart.css';
+ *
+ * Usage (Tailwind CSS 4):
+ *   @import '@mieweb/ui/brands/webchart.css' layer(theme);
+ */
+
+/* ============================================
+   WebChart Design Tokens
+   ============================================ */
+
+:root {
+  /* Primary Color Scale - WebChart Orange */
+  --mieweb-primary-50: #fff7ed;
+  --mieweb-primary-100: #ffedd5;
+  --mieweb-primary-200: #fed7aa;
+  --mieweb-primary-300: #fdba74;
+  --mieweb-primary-400: #fb923c;
+  --mieweb-primary-500: #f5841f;
+  --mieweb-primary-600: #ea580c;
+  --mieweb-primary-700: #c2410c;
+  --mieweb-primary-800: #9a3412;
+  --mieweb-primary-900: #7c2d12;
+  --mieweb-primary-950: #431407;
+
+  /* Light Mode Semantic Colors */
+  --mieweb-background: #ffffff;
+  --mieweb-foreground: #171717;
+  --mieweb-card: #ffffff;
+  --mieweb-card-foreground: #171717;
+  --mieweb-muted: #f5f5f5;
+  --mieweb-muted-foreground: #737373;
+  --mieweb-border: #e5e7eb;
+  --mieweb-input: #e5e7eb;
+  --mieweb-ring: #f5841f;
+  --mieweb-destructive: #ef4444;
+  --mieweb-destructive-foreground: #ffffff;
+  --mieweb-success: #22c55e;
+  --mieweb-success-foreground: #ffffff;
+  --mieweb-warning: #f59e0b;
+  --mieweb-warning-foreground: #ffffff;
+
+  /* Typography */
+  --mieweb-font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --mieweb-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+
+  /* Border Radius */
+  --mieweb-radius-none: 0;
+  --mieweb-radius-sm: 0.25rem;
+  --mieweb-radius-md: 0.5rem;
+  --mieweb-radius-lg: 0.75rem;
+  --mieweb-radius-xl: 1rem;
+  --mieweb-radius-2xl: 1.5rem;
+  --mieweb-radius-full: 9999px;
+
+  /* Shadows */
+  --mieweb-shadow-card:
+    0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --mieweb-shadow-dropdown:
+    0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --mieweb-shadow-modal:
+    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+/* Dark Mode */
+[data-theme='dark'],
+.dark {
+  --mieweb-background: #171717;
+  --mieweb-foreground: #fafafa;
+  --mieweb-card: #262626;
+  --mieweb-card-foreground: #fafafa;
+  --mieweb-muted: #404040;
+  --mieweb-muted-foreground: #a1a1aa;
+  --mieweb-border: #404040;
+  --mieweb-input: #404040;
+  --mieweb-ring: #f5841f;
+  --mieweb-destructive: #dc2626;
+  --mieweb-destructive-foreground: #fafafa;
+  --mieweb-success: #16a34a;
+  --mieweb-success-foreground: #fafafa;
+  --mieweb-warning: #d97706;
+  --mieweb-warning-foreground: #fafafa;
+}
+
+/* ============================================
+   Typography Base
+   ============================================ */
+
+body {
+  font-family: var(--mieweb-font-sans);
+  background-color: var(--mieweb-background);
+  color: var(--mieweb-foreground);
+}
+
+code,
+pre,
+kbd,
+samp {
+  font-family: var(--mieweb-font-mono);
+}
+
+/* ============================================
+   Utility Classes
+   ============================================ */
+
+.mieweb-card {
+  background-color: var(--mieweb-card);
+  color: var(--mieweb-card-foreground);
+  border-radius: var(--mieweb-radius-lg);
+  box-shadow: var(--mieweb-shadow-card);
+}
+
+.mieweb-button-primary {
+  background-color: var(--mieweb-primary-500);
+  color: white;
+  border-radius: var(--mieweb-radius-md);
+}
+
+.mieweb-button-primary:hover {
+  background-color: var(--mieweb-primary-600);
+}
+
+.mieweb-input {
+  border: 1px solid var(--mieweb-input);
+  border-radius: var(--mieweb-radius-md);
+  background-color: var(--mieweb-background);
+  color: var(--mieweb-foreground);
+}
+
+.mieweb-input:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--mieweb-ring);
+}

package/dist/chunk-265CFCCX.js

@@ -0,0 +1,173 @@
+import { useClickOutside } from './chunk-OT36EMM5.js';
+import { useEscapeKey } from './chunk-T4ME7QCT.js';
+import { cn } from './chunk-F3SOEIN2.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var placementStyles = {
+  "bottom-start": "top-full left-0 mt-2",
+  "bottom-end": "top-full right-0 mt-2",
+  bottom: "top-full left-1/2 -translate-x-1/2 mt-2"
+};
+function Dropdown({
+  trigger,
+  children,
+  open: controlledOpen,
+  onOpenChange,
+  placement = "bottom-start",
+  className,
+  width = "auto",
+  disabled = false
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+  const containerRef = React.useRef(null);
+  const menuId = React.useId();
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
+  const setOpen = React.useCallback(
+    (value) => {
+      if (!isControlled) {
+        setUncontrolledOpen(value);
+      }
+      onOpenChange?.(value);
+    },
+    [isControlled, onOpenChange]
+  );
+  const handleToggle = React.useCallback(() => {
+    if (!disabled) {
+      setOpen(!isOpen);
+    }
+  }, [disabled, isOpen, setOpen]);
+  const handleClose = React.useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+  useClickOutside(containerRef, handleClose);
+  useEscapeKey(handleClose, isOpen);
+  const triggerElement = React.cloneElement(trigger, {
+    onClick: handleToggle,
+    "aria-haspopup": "menu",
+    "aria-expanded": isOpen,
+    "aria-controls": isOpen ? menuId : void 0,
+    disabled: disabled || trigger.props.disabled
+  });
+  const widthStyle = typeof width === "number" ? { width: `${width}px` } : width === "trigger" ? { minWidth: "100%" } : {};
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative inline-flex", children: [
+    triggerElement,
+    isOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: menuId,
+        role: "menu",
+        style: widthStyle,
+        className: cn(
+          "absolute z-50 min-w-[12rem]",
+          "rounded-xl border border-neutral-200 bg-white shadow-lg",
+          "dark:border-neutral-700 dark:bg-neutral-800",
+          "animate-in fade-in zoom-in-95 duration-100",
+          placementStyles[placement],
+          className
+        ),
+        children
+      }
+    )
+  ] });
+}
+Dropdown.displayName = "Dropdown";
+var DropdownHeader = React.forwardRef(
+  ({ className, avatar, title, subtitle, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "border-b border-neutral-200 p-4 dark:border-neutral-700",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            avatar,
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-semibold text-neutral-900 dark:text-white", children: title }),
+              subtitle && /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-neutral-500 dark:text-neutral-400", children: subtitle })
+            ] })
+          ] }),
+          children
+        ]
+      }
+    );
+  }
+);
+DropdownHeader.displayName = "DropdownHeader";
+var DropdownContent = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("p-2", className), ...props });
+  }
+);
+DropdownContent.displayName = "DropdownContent";
+var DropdownItem = React.forwardRef(
+  ({ className, icon, variant = "default", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        role: "menuitem",
+        className: cn(
+          "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm",
+          "transition-colors duration-150",
+          "focus:outline-none",
+          variant === "default" && [
+            "text-neutral-700 dark:text-neutral-300",
+            "hover:bg-neutral-100 dark:hover:bg-neutral-700",
+            "focus:bg-neutral-100 dark:focus:bg-neutral-700"
+          ],
+          variant === "danger" && [
+            "text-red-600 dark:text-red-400",
+            "hover:bg-red-50 dark:hover:bg-red-900/20",
+            "focus:bg-red-50 dark:focus:bg-red-900/20"
+          ],
+          className
+        ),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "h-4 w-4 shrink-0", children: icon }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children })
+        ]
+      }
+    );
+  }
+);
+DropdownItem.displayName = "DropdownItem";
+function DropdownSeparator({ className }) {
+  return /* @__PURE__ */ jsx(
+    "hr",
+    {
+      className: cn(
+        "border-t border-neutral-200 dark:border-neutral-700",
+        className
+      )
+    }
+  );
+}
+DropdownSeparator.displayName = "DropdownSeparator";
+function DropdownLabel({
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "px-3 py-1.5 text-xs font-semibold tracking-wider uppercase",
+        "text-neutral-500 dark:text-neutral-400",
+        className
+      ),
+      children
+    }
+  );
+}
+DropdownLabel.displayName = "DropdownLabel";
+
+export { Dropdown, DropdownContent, DropdownHeader, DropdownItem, DropdownLabel, DropdownSeparator };
+//# sourceMappingURL=chunk-265CFCCX.js.map
+//# sourceMappingURL=chunk-265CFCCX.js.map

package/dist/chunk-265CFCCX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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","file":"chunk-265CFCCX.js","sourcesContent":["import * as React from 'react';\nimport { cn } from '../../utils/cn';\nimport { useClickOutside } from '../../hooks/useClickOutside';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\n\nexport type DropdownPlacement = 'bottom-start' | 'bottom-end' | 'bottom';\n\nexport interface DropdownProps {\n  /** The trigger element (usually a button) */\n  trigger: React.ReactElement<{\n    onClick?: () => void;\n    disabled?: boolean;\n    'aria-haspopup'?: string;\n    'aria-expanded'?: boolean;\n    'aria-controls'?: string;\n  }>;\n  /** Dropdown content */\n  children: React.ReactNode;\n  /** Controlled open state */\n  open?: boolean;\n  /** Callback when open state changes */\n  onOpenChange?: (open: boolean) => void;\n  /** Placement of the dropdown */\n  placement?: DropdownPlacement;\n  /** Additional class name for the dropdown menu */\n  className?: string;\n  /** Width of the dropdown menu */\n  width?: 'auto' | 'trigger' | number;\n  /** Whether the dropdown is disabled */\n  disabled?: boolean;\n}\n\nconst placementStyles: Record<DropdownPlacement, string> = {\n  'bottom-start': 'top-full left-0 mt-2',\n  'bottom-end': 'top-full right-0 mt-2',\n  bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',\n};\n\n/**\n * An accessible dropdown menu component.\n *\n * @example\n * ```tsx\n * <Dropdown\n *   trigger={<Button>Options</Button>}\n * >\n *   <DropdownItem onClick={() => console.log('Edit')}>Edit</DropdownItem>\n *   <DropdownItem onClick={() => console.log('Delete')} variant=\"danger\">Delete</DropdownItem>\n * </Dropdown>\n * ```\n */\nfunction Dropdown({\n  trigger,\n  children,\n  open: controlledOpen,\n  onOpenChange,\n  placement = 'bottom-start',\n  className,\n  width = 'auto',\n  disabled = false,\n}: DropdownProps) {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const menuId = React.useId();\n\n  const isControlled = controlledOpen !== undefined;\n  const isOpen = isControlled ? controlledOpen : uncontrolledOpen;\n\n  const setOpen = React.useCallback(\n    (value: boolean) => {\n      if (!isControlled) {\n        setUncontrolledOpen(value);\n      }\n      onOpenChange?.(value);\n    },\n    [isControlled, onOpenChange]\n  );\n\n  const handleToggle = React.useCallback(() => {\n    if (!disabled) {\n      setOpen(!isOpen);\n    }\n  }, [disabled, isOpen, setOpen]);\n\n  const handleClose = React.useCallback(() => {\n    setOpen(false);\n  }, [setOpen]);\n\n  useClickOutside(containerRef, handleClose);\n  useEscapeKey(handleClose, isOpen);\n\n  // Clone trigger to add event handlers\n  const triggerElement = React.cloneElement(trigger, {\n    onClick: handleToggle,\n    'aria-haspopup': 'menu',\n    'aria-expanded': isOpen,\n    'aria-controls': isOpen ? menuId : undefined,\n    disabled: disabled || trigger.props.disabled,\n  });\n\n  const widthStyle =\n    typeof width === 'number'\n      ? { width: `${width}px` }\n      : width === 'trigger'\n        ? { minWidth: '100%' }\n        : {};\n\n  return (\n    <div ref={containerRef} className=\"relative inline-flex\">\n      {triggerElement}\n      {isOpen && (\n        <div\n          id={menuId}\n          role=\"menu\"\n          style={widthStyle}\n          className={cn(\n            'absolute z-50 min-w-[12rem]',\n            'rounded-xl border border-neutral-200 bg-white shadow-lg',\n            'dark:border-neutral-700 dark:bg-neutral-800',\n            'animate-in fade-in zoom-in-95 duration-100',\n            placementStyles[placement],\n            className\n          )}\n        >\n          {children}\n        </div>\n      )}\n    </div>\n  );\n}\n\nDropdown.displayName = 'Dropdown';\n\n// ============================================================================\n// Dropdown Header Component\n// ============================================================================\n\nexport interface DropdownHeaderProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'title'\n> {\n  /** Avatar element or image */\n  avatar?: React.ReactNode;\n  /** Primary text (e.g., user name) */\n  title: React.ReactNode;\n  /** Secondary text (e.g., email) */\n  subtitle?: React.ReactNode;\n}\n\n/**\n * A header section for dropdown menus, typically used for user info.\n *\n * @example\n * ```tsx\n * <DropdownHeader\n *   avatar={<Avatar name=\"John Doe\" />}\n *   title=\"John Doe\"\n *   subtitle=\"john@example.com\"\n * />\n * ```\n */\nconst DropdownHeader = React.forwardRef<HTMLDivElement, DropdownHeaderProps>(\n  ({ className, avatar, title, subtitle, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'border-b border-neutral-200 p-4 dark:border-neutral-700',\n          className\n        )}\n        {...props}\n      >\n        <div className=\"flex items-center gap-3\">\n          {avatar}\n          <div className=\"min-w-0 flex-1\">\n            <p className=\"truncate text-sm font-semibold text-neutral-900 dark:text-white\">\n              {title}\n            </p>\n            {subtitle && (\n              <p className=\"truncate text-xs text-neutral-500 dark:text-neutral-400\">\n                {subtitle}\n              </p>\n            )}\n          </div>\n        </div>\n        {children}\n      </div>\n    );\n  }\n);\n\nDropdownHeader.displayName = 'DropdownHeader';\n\n// ============================================================================\n// Dropdown Content Component\n// ============================================================================\n\nexport type DropdownContentProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * A container for dropdown menu items with proper padding.\n */\nconst DropdownContent = React.forwardRef<HTMLDivElement, DropdownContentProps>(\n  ({ className, ...props }, ref) => {\n    return <div ref={ref} className={cn('p-2', className)} {...props} />;\n  }\n);\n\nDropdownContent.displayName = 'DropdownContent';\n\n// ============================================================================\n// Dropdown Item Component\n// ============================================================================\n\nexport interface DropdownItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Icon to display before the label */\n  icon?: React.ReactNode;\n  /** Danger variant for destructive actions */\n  variant?: 'default' | 'danger';\n}\n\n/**\n * An item within a Dropdown menu.\n */\nconst DropdownItem = React.forwardRef<HTMLButtonElement, DropdownItemProps>(\n  ({ className, icon, variant = 'default', children, ...props }, ref) => {\n    return (\n      <button\n        ref={ref}\n        role=\"menuitem\"\n        className={cn(\n          'flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm',\n          'transition-colors duration-150',\n          'focus:outline-none',\n          variant === 'default' && [\n            'text-neutral-700 dark:text-neutral-300',\n            'hover:bg-neutral-100 dark:hover:bg-neutral-700',\n            'focus:bg-neutral-100 dark:focus:bg-neutral-700',\n          ],\n          variant === 'danger' && [\n            'text-red-600 dark:text-red-400',\n            'hover:bg-red-50 dark:hover:bg-red-900/20',\n            'focus:bg-red-50 dark:focus:bg-red-900/20',\n          ],\n          className\n        )}\n        {...props}\n      >\n        {icon && <span className=\"h-4 w-4 shrink-0\">{icon}</span>}\n        <span className=\"font-medium\">{children}</span>\n      </button>\n    );\n  }\n);\n\nDropdownItem.displayName = 'DropdownItem';\n\n// ============================================================================\n// Dropdown Separator Component\n// ============================================================================\n\n/**\n * A separator between dropdown items.\n */\nfunction DropdownSeparator({ className }: { className?: string }) {\n  return (\n    <hr\n      className={cn(\n        'border-t border-neutral-200 dark:border-neutral-700',\n        className\n      )}\n    />\n  );\n}\n\nDropdownSeparator.displayName = 'DropdownSeparator';\n\n// ============================================================================\n// Dropdown Label Component\n// ============================================================================\n\n/**\n * A label/header for a group of dropdown items.\n */\nfunction DropdownLabel({\n  className,\n  children,\n}: {\n  className?: string;\n  children: React.ReactNode;\n}) {\n  return (\n    <div\n      className={cn(\n        'px-3 py-1.5 text-xs font-semibold tracking-wider uppercase',\n        'text-neutral-500 dark:text-neutral-400',\n        className\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\nDropdownLabel.displayName = 'DropdownLabel';\n\nexport {\n  Dropdown,\n  DropdownHeader,\n  DropdownContent,\n  DropdownItem,\n  DropdownSeparator,\n  DropdownLabel,\n};\n"]}

package/dist/chunk-2J2V4TMJ.cjs

@@ -0,0 +1,139 @@
+'use strict';
+
+var chunkOR5DRJCW_cjs = require('./chunk-OR5DRJCW.cjs');
+var React = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var avatarVariants = classVarianceAuthority.cva(
+  [
+    "relative inline-flex items-center justify-center",
+    "rounded-full overflow-hidden",
+    "bg-primary-800 text-white font-semibold"
+  ],
+  {
+    variants: {
+      size: {
+        xs: "h-6 w-6 text-xs",
+        sm: "h-8 w-8 text-sm",
+        md: "h-10 w-10 text-sm",
+        lg: "h-12 w-12 text-base",
+        xl: "h-16 w-16 text-lg"
+      },
+      ring: {
+        true: "ring-2 ring-primary-400/30",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      ring: false
+    }
+  }
+);
+function getInitials(name) {
+  return name.split(" ").map((part) => part[0]).join("").toUpperCase().slice(0, 2);
+}
+var Avatar = React__namespace.forwardRef(
+  ({ className, src, alt, name, fallback, size, ring, ...props }, ref) => {
+    const [imageError, setImageError] = React__namespace.useState(false);
+    React__namespace.useEffect(() => {
+      setImageError(false);
+    }, [src]);
+    const showImage = src && !imageError;
+    const initials = name ? getInitials(name) : null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: chunkOR5DRJCW_cjs.cn(avatarVariants({ size, ring }), className),
+        ...props,
+        children: showImage ? /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src,
+            alt: alt || name || "Avatar",
+            className: "h-full w-full object-cover",
+            onError: () => setImageError(true)
+          }
+        ) : React__namespace.isValidElement(fallback) ? fallback : initials ? initials : /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            className: "h-[60%] w-[60%] text-white/80",
+            fill: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })
+          }
+        )
+      }
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+var AvatarGroup = React__namespace.forwardRef(
+  ({ className, max, size = "md", children, ...props }, ref) => {
+    const childrenArray = React__namespace.Children.toArray(children);
+    const visibleChildren = max ? childrenArray.slice(0, max) : childrenArray;
+    const remainingCount = max ? Math.max(0, childrenArray.length - max) : 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: chunkOR5DRJCW_cjs.cn("flex -space-x-2", className), ...props, children: [
+      visibleChildren.map((child, index) => {
+        if (React__namespace.isValidElement(child)) {
+          return React__namespace.cloneElement(
+            child,
+            {
+              key: index,
+              size,
+              className: chunkOR5DRJCW_cjs.cn(
+                "ring-2 ring-white dark:ring-neutral-900",
+                child.props.className
+              )
+            }
+          );
+        }
+        return child;
+      }),
+      remainingCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: chunkOR5DRJCW_cjs.cn(
+            avatarVariants({ size }),
+            "bg-neutral-200 text-neutral-600 dark:bg-neutral-700 dark:text-neutral-300",
+            "ring-2 ring-white dark:ring-neutral-900"
+          ),
+          children: [
+            "+",
+            remainingCount
+          ]
+        }
+      )
+    ] });
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
+
+exports.Avatar = Avatar;
+exports.AvatarGroup = AvatarGroup;
+exports.avatarVariants = avatarVariants;
+exports.getInitials = getInitials;
+//# sourceMappingURL=chunk-2J2V4TMJ.cjs.map
+//# sourceMappingURL=chunk-2J2V4TMJ.cjs.map

package/dist/chunk-2J2V4TMJ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Avatar/Avatar.tsx"],"names":["cva","React","jsx","cn","jsxs"],"mappings":"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","file":"chunk-2J2V4TMJ.cjs","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n// ============================================================================\n// Avatar Component\n// ============================================================================\n\nconst avatarVariants = cva(\n  [\n    'relative inline-flex items-center justify-center',\n    'rounded-full overflow-hidden',\n    'bg-primary-800 text-white font-semibold',\n  ],\n  {\n    variants: {\n      size: {\n        xs: 'h-6 w-6 text-xs',\n        sm: 'h-8 w-8 text-sm',\n        md: 'h-10 w-10 text-sm',\n        lg: 'h-12 w-12 text-base',\n        xl: 'h-16 w-16 text-lg',\n      },\n      ring: {\n        true: 'ring-2 ring-primary-400/30',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      ring: false,\n    },\n  }\n);\n\nexport interface AvatarProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof avatarVariants> {\n  /** Image URL for the avatar */\n  src?: string | null;\n  /** Alt text for the avatar image */\n  alt?: string;\n  /** Name to generate initials from (used as fallback when no src) */\n  name?: string;\n  /** Custom fallback content (overrides name initials) */\n  fallback?: React.ReactElement | null;\n}\n\n/**\n * Get initials from a name string.\n */\nfunction getInitials(name: string): string {\n  return name\n    .split(' ')\n    .map((part) => part[0])\n    .join('')\n    .toUpperCase()\n    .slice(0, 2);\n}\n\n/**\n * An avatar component for displaying user profile images with fallback to initials.\n *\n * @example\n * ```tsx\n * // With image\n * <Avatar src=\"/user.jpg\" alt=\"John Doe\" />\n *\n * // With initials fallback\n * <Avatar name=\"John Doe\" />\n *\n * // With custom fallback\n * <Avatar fallback={<UserIcon />} />\n * ```\n */\nconst Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(\n  ({ className, src, alt, name, fallback, size, ring, ...props }, ref) => {\n    const [imageError, setImageError] = React.useState(false);\n\n    // Reset error state when src changes\n    React.useEffect(() => {\n      setImageError(false);\n    }, [src]);\n\n    const showImage = src && !imageError;\n    const initials = name ? getInitials(name) : null;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(avatarVariants({ size, ring }), className)}\n        {...props}\n      >\n        {showImage ? (\n          <img\n            src={src}\n            alt={alt || name || 'Avatar'}\n            className=\"h-full w-full object-cover\"\n            onError={() => setImageError(true)}\n          />\n        ) : React.isValidElement(fallback) ? (\n          fallback\n        ) : initials ? (\n          initials\n        ) : (\n          <svg\n            className=\"h-[60%] w-[60%] text-white/80\"\n            fill=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\" />\n          </svg>\n        )}\n      </div>\n    );\n  }\n);\n\nAvatar.displayName = 'Avatar';\n\n// ============================================================================\n// Avatar Group Component\n// ============================================================================\n\nexport interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Maximum number of avatars to show before +N indicator */\n  max?: number;\n  /** Size of avatars in the group */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Children should be Avatar components */\n  children: React.ReactNode;\n}\n\n/**\n * A component for displaying a group of overlapping avatars.\n *\n * @example\n * ```tsx\n * <AvatarGroup max={3}>\n *   <Avatar name=\"John Doe\" />\n *   <Avatar name=\"Jane Smith\" />\n *   <Avatar name=\"Bob Wilson\" />\n *   <Avatar name=\"Alice Brown\" />\n * </AvatarGroup>\n * ```\n */\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  ({ className, max, size = 'md', children, ...props }, ref) => {\n    const childrenArray = React.Children.toArray(children);\n    const visibleChildren = max ? childrenArray.slice(0, max) : childrenArray;\n    const remainingCount = max ? Math.max(0, childrenArray.length - max) : 0;\n\n    return (\n      <div ref={ref} className={cn('flex -space-x-2', className)} {...props}>\n        {visibleChildren.map((child, index) => {\n          if (React.isValidElement(child)) {\n            return React.cloneElement(\n              child as React.ReactElement<AvatarProps>,\n              {\n                key: index,\n                size,\n                className: cn(\n                  'ring-2 ring-white dark:ring-neutral-900',\n                  (child as React.ReactElement<AvatarProps>).props.className\n                ),\n              }\n            );\n          }\n          return child;\n        })}\n        {remainingCount > 0 && (\n          <div\n            className={cn(\n              avatarVariants({ size }),\n              'bg-neutral-200 text-neutral-600 dark:bg-neutral-700 dark:text-neutral-300',\n              'ring-2 ring-white dark:ring-neutral-900'\n            )}\n          >\n            +{remainingCount}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nAvatarGroup.displayName = 'AvatarGroup';\n\nexport { Avatar, AvatarGroup, avatarVariants, getInitials };\n"]}