@timmbr/ui 1.0.0-beta

package/README.md

@@ -0,0 +1,151 @@
+# @timmbr/ui
+
+High-performance, Next.js App Router-compatible UI component library for the Timmbr Design System. Built with **Radix UI**, **Tailwind CSS v4**, **Class Variance Authority (CVA)**, and **Vite (Library Mode)**.
+
+## Key Architectural Principles
+
+1. **Next.js App Router & RSC Compatible**:
+   - Preserves `'use client'` directives via `rollup-plugin-preserve-directives`.
+   - Uses `preserveModules: true` so bundlers can tree-shake unused components without bundling unnecessary client boundaries.
+2. **Dual-Layer Animation Architecture**:
+   - Global toggle support via `TimmbrConfigProvider` or `AnimationProvider`.
+   - Component-level override support via the `motion` prop on animated components.
+3. **Hierarchical Global & Local Configuration**:
+   - Global defaults can be set via `TimmbrConfigProvider` (optional; zero config needed out of the box).
+   - Any component prop locally overrides global defaults.
+
+## Installation
+
+Within the monorepo:
+
+```bash
+pnpm add @timmbr/ui --filter your-app
+```
+
+## Setup in Consuming Next.js App
+
+### 1. Configure CSS (Tailwind v4)
+
+In `app/globals.css`:
+
+```css
+@import "tailwindcss";
+@import "@timmbr/theme/theme.css";
+
+@source "../node_modules/@timmbr/ui/dist";
+@source "../node_modules/@timmbr/icons/dist";
+```
+
+### 2. Optional: Wrap with `TimmbrConfigProvider`
+
+In `app/layout.tsx`:
+
+```tsx
+import { TimmbrConfigProvider } from '@timmbr/ui';
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <TimmbrConfigProvider
+          config={{
+            animations: { enabled: true },
+            components: {
+              button: { defaultVariant: 'default', defaultSize: 'default' },
+            },
+          }}
+        >
+          {children}
+        </TimmbrConfigProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+## Available Components
+
+| Category | Components | Description |
+| :--- | :--- | :--- |
+| **Actions** | `Button` | Accessible button with adornment icons, loading spinner, CVA variants, and `asChild` composition. |
+| **Typography** | `Text`, `Heading` | Typography primitives restricted to semantic elements (`<p>`, `<span>`, `<h1>`–`<h6>`) with design token scaling. |
+| **Surfaces** | `Card`, `Avatar`, `Badge`, `Chip`, `Divider` | Display primitives including user avatars, status pills, elevated cards, interactive chips, and separators. |
+| **Layout** | `Container`, `Stack`, `Inline`, `Grid`, `Center` | Responsive breakpoint containers, flex distribution, responsive CSS grid, and centered wrappers. |
+| **Form Controls** | `Input`, `Textarea`, `Select`, `Checkbox`, `Radio`, `Switch`, `RangeSlider`, `FormField`, `Label` | Comprehensive form primitives with labels, helper text, validation error states, and dual-thumb sliders. |
+| **Navigation** | `Tabs`, `Pagination` | Radix-driven accessible tabs with spring-physics glider indicator and multi-page pagination. |
+| **Feedback** | `Alert`, `Progress`, `Skeleton`, `Spinner`, `Toast` | Status banners, determinate/indeterminate progress, shimmer loaders, and card-deck multi-toasts with hover-spread. |
+| **Overlays** | `Dialog`, `Drawer`, `Dropdown`, `Popover`, `Tooltip` | Centered dialogs, off-canvas sliding drawers, contextual dropdowns, interactive popovers, and accessible tooltips. |
+| **Data Display** | `Table`, `DataList`, `Stat`, `EmptyState` | Structured data tables with pagination, key-value data lists, KPI metrics, and empty state placeholders. |
+| **Visual Media** | `Icon` | Unified icon wrapper supporting Lucide icons, external image URLs, raw SVGs, and clickable modes. |
+
+
+## Component Usage
+
+
+### Button
+
+```tsx
+import { Button } from '@timmbr/ui';
+import Link from 'next/link';
+
+export function Example() {
+  return (
+    <div className="flex gap-4">
+      {/* Standard variants */}
+      <Button variant="default">Primary</Button>
+      <Button variant="outline">Outline</Button>
+      <Button variant="ghost">Ghost</Button>
+
+      {/* Composition with Next.js Link via asChild */}
+      <Button asChild>
+        <Link href="/dashboard">Go to Dashboard</Link>
+      </Button>
+    </div>
+  );
+}
+```
+
+### Accordion
+
+```tsx
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from '@timmbr/ui';
+
+export function AccordionDemo() {
+  return (
+    <Accordion type="single" collapsible>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>What is Timmbr?</AccordionTrigger>
+        <AccordionContent>
+          An enterprise-grade UI design system.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Locally disabled animation?</AccordionTrigger>
+        {/* Local override disables motion strictly on this panel */}
+        <AccordionContent motion={false}>
+          This panel opens instantaneously without animations.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}
+```
+
+## Component Folder Layout Standards
+
+Every component in `@timmbr/ui` adheres to this flat, predictable layout:
+
+```text
+packages/ui/src/components/ComponentName/
+├── ComponentName.tsx           # Component implementation & Radix slot integration
+├── ComponentName.styles.ts     # CVA definitions for Tailwind variants
+├── ComponentName.types.ts      # TypeScript interfaces
+├── ComponentName.stories.tsx   # Storybook stories & playground
+├── ComponentName.test.tsx      # Vitest / React Testing Library specs
+└── index.ts                    # Barrel export
+```

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import type { AccordionContentProps } from './Accordion.types';
+export declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
+export declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const AccordionContent: React.ForwardRefExoticComponent<AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Accordion.d.ts.map

package/dist/components/Accordion/Accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAShE,OAAO,KAAK,EAIV,qBAAqB,EACtB,MAAM,mBAAmB,CAAC;AAE3B,eAAO,MAAM,SAAS,8JAA0B,CAAC;AAEjD,eAAO,MAAM,aAAa,iKASxB,CAAC;AAGH,eAAO,MAAM,gBAAgB,0KAc3B,CAAC;AAGH,eAAO,MAAM,gBAAgB,8FAoB3B,CAAC"}

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from '@timmbr/icons';
+import { cn } from '@timmbr/utils';
+import { accordionContentVariants, accordionItemVariants, accordionTriggerVariants } from './Accordion.styles.js';
+import { useGlobalAnimation } from '../../providers/AnimationProvider.js';
+
+const Accordion = AccordionPrimitive.Root;
+const AccordionItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AccordionPrimitive.Item,
+  {
+    ref,
+    className: cn(accordionItemVariants(), className),
+    ...props
+  }
+));
+AccordionItem.displayName = "AccordionItem";
+const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+  AccordionPrimitive.Trigger,
+  {
+    ref,
+    className: cn(accordionTriggerVariants(), className),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 text-slate-500 transition-transform duration-200" })
+    ]
+  }
+) }));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+const AccordionContent = React.forwardRef(({ className, children, motion = true, ...props }, ref) => {
+  const globalMotion = useGlobalAnimation();
+  const shouldAnimate = globalMotion && motion;
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        accordionContentVariants(),
+        !shouldAnimate && "transition-none duration-0 data-[state=closed]:animate-none data-[state=open]:animate-none",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: "pb-4 pt-0", children })
+    }
+  );
+});
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/components/Accordion/Accordion.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const accordionItemVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const accordionTriggerVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const accordionContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//# sourceMappingURL=Accordion.styles.d.ts.map

package/dist/components/Accordion/Accordion.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,oFAAyD,CAAC;AAE5F,eAAO,MAAM,wBAAwB,oFAEpC,CAAC;AAEF,eAAO,MAAM,wBAAwB,oFAEpC,CAAC"}

package/dist/components/Accordion/Accordion.styles.js

@@ -0,0 +1,11 @@
+import { cva } from 'class-variance-authority';
+
+const accordionItemVariants = cva("border-b border-slate-200 dark:border-slate-800");
+const accordionTriggerVariants = cva(
+  "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180 cursor-pointer"
+);
+const accordionContentVariants = cva(
+  "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+);
+
+export { accordionContentVariants, accordionItemVariants, accordionTriggerVariants };

package/dist/components/Accordion/Accordion.types.d.ts

@@ -0,0 +1,12 @@
+import type * as React from 'react';
+import type * as AccordionPrimitive from '@radix-ui/react-accordion';
+export type AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>;
+export type AccordionItemProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>;
+export type AccordionTriggerProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>;
+export interface AccordionContentProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> {
+    /**
+     * Local toggle to override animation behavior for this accordion panel.
+     */
+    motion?: boolean;
+}
+//# sourceMappingURL=Accordion.types.d.ts.map

package/dist/components/Accordion/Accordion.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.types.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAErE,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,wBAAwB,CACzD,OAAO,kBAAkB,CAAC,IAAI,CAC/B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAC7D,OAAO,kBAAkB,CAAC,IAAI,CAC/B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,wBAAwB,CAChE,OAAO,kBAAkB,CAAC,OAAO,CAClC,CAAC;AAEF,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC;IACzE;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB"}

package/dist/components/Accordion/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Accordion';
+export * from './Accordion.styles';
+export * from './Accordion.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Accordion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC"}

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { AlertProps, AlertTitleProps, AlertDescriptionProps } from './Alert.types';
+export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+export declare const AlertTitle: React.ForwardRefExoticComponent<AlertTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export declare const AlertDescription: React.ForwardRefExoticComponent<AlertDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+//# sourceMappingURL=Alert.d.ts.map

package/dist/components/Alert/Alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAUxF,eAAO,MAAM,KAAK,mFAkEjB,CAAC;AAGF,eAAO,MAAM,UAAU,4FAStB,CAAC;AAGF,eAAO,MAAM,gBAAgB,oGAS5B,CAAC"}

package/dist/components/Alert/Alert.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '@timmbr/utils';
+import { AlertCircle, AlertTriangle, CheckCircle, Info, X } from '@timmbr/icons';
+import { resolveMotion } from '../../types/motion.js';
+import { alertIconVariants, alertVariants } from './Alert.styles.js';
+import { useGlobalAnimation } from '../../providers/AnimationProvider.js';
+
+const DEFAULT_ICONS = {
+  default: Info,
+  info: Info,
+  success: CheckCircle,
+  warning: AlertTriangle,
+  destructive: AlertCircle
+};
+const Alert = React.forwardRef(
+  ({
+    className,
+    variant = "default",
+    size = "default",
+    title,
+    icon,
+    dismissible = false,
+    onClose,
+    motion,
+    children,
+    ...props
+  }, ref) => {
+    const [closed, setClosed] = React.useState(false);
+    const globalMotion = useGlobalAnimation();
+    const { shouldAnimate, motionClass } = resolveMotion(motion, globalMotion);
+    if (closed) return null;
+    const IconComponent = DEFAULT_ICONS[variant ?? "default"] || Info;
+    const handleDismiss = () => {
+      setClosed(true);
+      onClose?.();
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "alert",
+        "data-slot": "alert",
+        className: cn(
+          alertVariants({ variant, size }),
+          !shouldAnimate && "transition-none animate-none",
+          motionClass,
+          className
+        ),
+        ...props,
+        children: [
+          icon !== null && /* @__PURE__ */ jsx("div", { className: alertIconVariants({ variant, size }), "data-slot": "alert-icon", children: icon ?? /* @__PURE__ */ jsx(IconComponent, { className: "size-full", "aria-hidden": "true" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 space-y-1", children: [
+            title && /* @__PURE__ */ jsx(AlertTitle, { children: title }),
+            children && /* @__PURE__ */ jsx(AlertDescription, { children })
+          ] }),
+          dismissible && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleDismiss,
+              "aria-label": "Dismiss alert",
+              className: "shrink-0 p-1 -mr-1 -mt-1 text-muted-foreground hover:text-foreground rounded-sm transition-colors hover:bg-black/5 dark:hover:bg-white/5 cursor-pointer active:scale-95",
+              children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Alert.displayName = "Alert";
+const AlertTitle = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "h5",
+    {
+      ref,
+      "data-slot": "alert-title",
+      className: cn("font-semibold leading-tight tracking-tight text-foreground", className),
+      ...props
+    }
+  )
+);
+AlertTitle.displayName = "AlertTitle";
+const AlertDescription = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "alert-description",
+      className: cn("text-xs text-muted-foreground leading-relaxed", className),
+      ...props
+    }
+  )
+);
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertDescription, AlertTitle };

package/dist/components/Alert/Alert.styles.d.ts

@@ -0,0 +1,11 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const alertVariants: (props?: ({
+    variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const alertIconVariants: (props?: ({
+    variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type AlertVariants = VariantProps<typeof alertVariants>;
+//# sourceMappingURL=Alert.styles.d.ts.map

package/dist/components/Alert/Alert.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,aAAa;;;8EA2BzB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;8EAmB5B,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}

package/dist/components/Alert/Alert.styles.js

@@ -0,0 +1,47 @@
+import { cva } from 'class-variance-authority';
+
+const alertVariants = cva(
+  "relative flex w-full gap-3 p-4 rounded-lg border text-sm font-sans transition-all duration-200",
+  {
+    variants: {
+      variant: {
+        default: "border-grey-200 dark:border-grey-800 bg-grey-50 dark:bg-grey-900/50 text-foreground",
+        info: "border-info/30 bg-info/10 text-foreground dark:border-info/40 dark:bg-info/15",
+        success: "border-success/30 bg-success/10 text-foreground dark:border-success/40 dark:bg-success/15",
+        warning: "border-warning/30 bg-warning/10 text-foreground dark:border-warning/40 dark:bg-warning/15",
+        destructive: "border-destructive/30 bg-destructive/10 text-foreground dark:border-destructive/40 dark:bg-destructive/15"
+      },
+      size: {
+        sm: "p-3 text-xs gap-2.5",
+        default: "p-4 text-sm gap-3",
+        lg: "p-5 text-base gap-3.5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+const alertIconVariants = cva("shrink-0 transition-colors", {
+  variants: {
+    variant: {
+      default: "text-grey-700 dark:text-grey-300",
+      info: "text-info",
+      success: "text-success",
+      warning: "text-warning",
+      destructive: "text-destructive"
+    },
+    size: {
+      sm: "size-4 mt-0.5",
+      default: "size-5 mt-0.5",
+      lg: "size-6 mt-0.5"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+
+export { alertIconVariants, alertVariants };

package/dist/components/Alert/Alert.types.d.ts

@@ -0,0 +1,30 @@
+import type * as React from 'react';
+import type { AlertVariants } from './Alert.styles';
+import type { MotionProp } from '../../types/motion';
+export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>, AlertVariants {
+    /**
+     * Title text or heading node.
+     */
+    title?: React.ReactNode;
+    /**
+     * Custom leading icon. If omitted, an appropriate icon is rendered based on variant.
+     */
+    icon?: React.ReactNode;
+    /**
+     * If true, renders an accessible dismiss button.
+     */
+    dismissible?: boolean;
+    /**
+     * Callback fired when the dismiss button is clicked.
+     */
+    onClose?: () => void;
+    /**
+     * Motion transition control.
+     */
+    motion?: MotionProp;
+}
+export interface AlertTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+}
+export interface AlertDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+}
+//# sourceMappingURL=Alert.types.d.ts.map

package/dist/components/Alert/Alert.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.types.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,aAAa;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC;CAAG;AAEpF,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;CAAG"}

package/dist/components/Alert/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Alert';
+export * from './Alert.types';
+export * from './Alert.styles';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Alert/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC"}

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { AvatarProps } from './Avatar.types';
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/components/Avatar/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,MAAM,oFAiElB,CAAC"}

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { cn } from '@timmbr/utils';
+import { avatarRootVariants, avatarStatusVariants } from './Avatar.styles.js';
+
+const Avatar = React.forwardRef(
+  ({
+    className,
+    style,
+    src,
+    alt = "Avatar",
+    initials,
+    size = "md",
+    variant = "primary",
+    status,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { className: "relative inline-block shrink-0", style, children: [
+      /* @__PURE__ */ jsxs(
+        AvatarPrimitive.Root,
+        {
+          ref,
+          "data-slot": "avatar",
+          "data-testid": "timmbr-avatar",
+          className: cn(avatarRootVariants({ size, variant, className })),
+          ...props,
+          children: [
+            src && /* @__PURE__ */ jsx(
+              AvatarPrimitive.Image,
+              {
+                src,
+                alt,
+                className: "aspect-square size-full object-cover",
+                "data-slot": "avatar-image"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              AvatarPrimitive.Fallback,
+              {
+                delayMs: src ? 300 : void 0,
+                className: "flex size-full items-center justify-center font-bold uppercase select-none",
+                "data-slot": "avatar-fallback",
+                children: initials ? /* @__PURE__ */ jsx("span", { children: initials }) : children ? children : /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: "size-1/2 text-current opacity-70",
+                    fill: "currentColor",
+                    viewBox: "0 0 24 24",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ 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" })
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      status && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(avatarStatusVariants({ status, size })),
+          "data-slot": "avatar-status",
+          "aria-label": `Status: ${status}`
+        }
+      )
+    ] });
+  }
+);
+Avatar.displayName = "Avatar";
+
+export { Avatar };

package/dist/components/Avatar/Avatar.styles.d.ts

@@ -0,0 +1,11 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const avatarRootVariants: (props?: ({
+    size?: "sm" | "lg" | "md" | "xl" | "2xl" | "xs" | null | undefined;
+    variant?: "outline" | "grey" | "subtle" | "primary" | "secondary" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const avatarStatusVariants: (props?: ({
+    status?: "online" | "offline" | "busy" | "away" | null | undefined;
+    size?: "sm" | "lg" | "md" | "xl" | "2xl" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type AvatarVariants = VariantProps<typeof avatarRootVariants>;
+//# sourceMappingURL=Avatar.styles.d.ts.map

package/dist/components/Avatar/Avatar.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,kBAAkB;;;8EAyB9B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;8EAwBhC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}

package/dist/components/Avatar/Avatar.styles.js

@@ -0,0 +1,55 @@
+import { cva } from 'class-variance-authority';
+
+const avatarRootVariants = cva(
+  "relative inline-flex shrink-0 select-none overflow-hidden rounded-full items-center justify-center font-sans font-bold",
+  {
+    variants: {
+      size: {
+        xs: "size-6 text-[10px]",
+        sm: "size-8 text-xs",
+        md: "size-10 text-[15px]",
+        lg: "size-12 text-base",
+        xl: "size-16 text-xl",
+        "2xl": "size-20 text-2xl"
+      },
+      variant: {
+        primary: "bg-primary text-white",
+        secondary: "bg-secondary text-secondary-foreground",
+        subtle: "bg-bg-subtle text-foreground",
+        grey: "bg-grey-700 text-white",
+        outline: "bg-background border border-grey-300 dark:border-grey-700 text-foreground"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "primary"
+    }
+  }
+);
+const avatarStatusVariants = cva(
+  "absolute bottom-0 right-0 rounded-full ring-2 ring-background",
+  {
+    variants: {
+      status: {
+        online: "bg-emerald-500",
+        offline: "bg-grey-400",
+        busy: "bg-rose-500",
+        away: "bg-amber-500"
+      },
+      size: {
+        xs: "size-1.5",
+        sm: "size-2",
+        md: "size-2.5",
+        lg: "size-3",
+        xl: "size-4",
+        "2xl": "size-5"
+      }
+    },
+    defaultVariants: {
+      status: "online",
+      size: "md"
+    }
+  }
+);
+
+export { avatarRootVariants, avatarStatusVariants };