@hyddenlabs/hydn-ui 0.3.0-alpha.99 → 0.3.1

package/README.md

@@ -1,6 +1,6 @@
 # HYDN UI
 
-A modern React component library built with TypeScript, Tailwind CSS, and optimized with tsup.
+A modern React component library built with TypeScript, Tailwind CSS, and optimized with Vite.
 
 ## Overview
 
@@ -9,7 +9,7 @@ HYDN UI is a comprehensive design system and component library that provides a c
 ## Features
 
 - 🎨 **Modern Design System** - Clean, consistent, and professional UI components
-- ⚡ **Built with tsup** - Fast builds and optimal bundle size
+- ⚡ **Built with Vite** - Fast builds and optimal bundle size
 - 🎯 **TypeScript** - Full type safety and excellent developer experience
 - 🎨 **Tailwind CSS** - Utility-first CSS framework for rapid styling
 - ♿ **Accessible** - Components built with accessibility in mind
@@ -26,6 +26,7 @@ HYDN UI is a comprehensive design system and component library that provides a c
 - [Tree-Shaking](#tree-shaking)
 - [Development](#development)
 - [Publishing](#publishing)
+- [CSS Class Validation](#css-class-validation)
 - [Tech Stack](#tech-stack)
 - [Contributing](#contributing)
 
@@ -186,7 +187,6 @@ const customButton: ButtonProps = {
 - Avatar, Badge, Chip
 - Table, Data Table, List
 - Timeline, Code Block
-- Price Display, Pricing
 - Empty State
 
 ### Layout
@@ -307,11 +307,25 @@ npm run lint
 npm run format
 ```
 
+### Scripts
+
+| Command | Purpose |
+| --- | --- |
+| `npm run dev` | Start the showcase SPA (development server) |
+| `npm run build` | Build the library (ESM), CSS, and types |
+| `npm test` | Run the test suite (Vitest) |
+| `npm run lint` | Lint source and tests (ESLint) |
+| `npm run lint:fix` | Lint with auto-fix |
+| `npm run format` | Format code with Prettier |
+| `npm run format:check` | Check formatting (used in CI) |
+
+See `package.json` for the full list of scripts.
+
 ### Project Structure
 
 ```
 src/
-├── components/          # Reusable UI components
+├── components/          # Reusable UI components (library)
 │   ├── data-display/   # Data visualization components
 │   ├── feedback/       # User feedback components
 │   ├── forms/          # Form-related components
@@ -319,9 +333,11 @@ src/
 │   ├── navigation/     # Navigation components
 │   ├── system/         # System-level components
 │   └── typography/     # Text and typography components
-├── pages/              # Demo and application pages
-├── theme/              # Theme configuration and tokens
-└── index.ts            # Main library export
+├── showcase/            # Showcase/documentation SPA (not published)
+│   ├── pages/          # Demo and application pages
+│   └── ...
+├── theme/               # Theme configuration and tokens
+└── index.ts             # Main library entry (consumers import from here)
 ```
 
 ## Publishing
@@ -332,12 +348,10 @@ src/
 npm run build
 ```
 
-This generates:
+The library is **ESM-only**. The build generates:
 
-- `dist/index.js` - ESM bundle (tree-shakeable)
-- `dist/index.cjs` - CommonJS bundle
-- `dist/index.d.ts` - TypeScript declarations (ESM)
-- `dist/index.d.cts` - TypeScript declarations (CJS)
+- `dist/index.js` - ESM entry (tree-shakeable; additional modules under `dist/` for tree-shaking)
+- `dist/index.d.ts` - TypeScript declarations
 - `dist/style.css` - Compiled Tailwind CSS styles
 - Source maps for debugging
 
@@ -393,15 +407,13 @@ npm publish --tag beta --access public
 
 ### Automated Publishing (CI/CD)
 
-The repository has a GitHub Actions workflow (`.github/workflows/publish.yml`) that handles:
+The repository uses GitHub Actions (`.github/workflows/publish.yml`):
 
-1. Running tests
-2. Building the library
-3. Versioning with GitVersion
-4. Publishing to npm
-5. Tagging releases
+1. Set the version manually in `package.json`
+2. Commit and push your changes
+3. Run **Actions → Publish Package → Run workflow**
 
-To trigger automated publishing, use the GitHub UI: **Actions → Publish → Run workflow**
+The workflow runs CI checks, reads the version from `package.json`, tags the commit, and publishes to npm.
 
 ### Troubleshooting
 
@@ -435,6 +447,7 @@ HYDN UI includes comprehensive CSS validation tools to ensure all Tailwind class
 ### Why This Matters
 
 When building a component library with Tailwind CSS, it's critical to ensure that:
+
 - All classes used in components are actually generated in the final CSS
 - No classes are accidentally misspelled or reference non-existent theme tokens
 - The generated CSS file contains everything consumers need
@@ -450,6 +463,7 @@ npm run audit:css
 ```
 
 This script:
+
 - ✅ Extracts all className usages from your components
 - ✅ Validates them against the generated `dist/style.css`
 - ✅ Reports missing classes with file locations
@@ -457,6 +471,7 @@ This script:
 - ✅ Filters out template literals and conditional logic
 
 **Example Output:**
+
 ```
 🔍 Auditing CSS classes...
 
@@ -475,13 +490,14 @@ This script:
 
 #### 2. CSS Validation Tests
 
-Run the test suite that validates critical classes:
+Run only the CSS validation tests:
 
 ```bash
 npm run test:css
 ```
 
 This runs `tests/css-validation.test.ts` which:
+
 - ✅ Checks for critical component classes
 - ✅ Validates theme tokens (CSS custom properties)
 - ✅ Ensures CSS file is not empty
@@ -510,7 +526,7 @@ npm run audit:css && npm run build && npm test
 ```tsx
 // ❌ Bad - class might not be generated
 const sizeClass = `w-${size}`;
-<div className={sizeClass} />
+<div className={sizeClass} />;
 
 // ✅ Good - explicit mapping
 const sizeClasses = {
@@ -518,25 +534,24 @@ const sizeClasses = {
   md: 'w-6',
   lg: 'w-8'
 };
-<div className={sizeClasses[size]} />
+<div className={sizeClasses[size]} />;
 ```
 
 **CI/CD integration** - The GitHub Actions workflows automatically run CSS validation on every push and before publishing.
 
 ### Validation Commands Summary
 
-| Command | Purpose |
-|---------|---------|
-| `npm run audit:css` | Comprehensive class validation |
-| `npm run test:css` | Quick CSS validation tests |
-| `npm test` | Full test suite (includes CSS checks) |
+| Command             | Purpose                               |
+| ------------------- | ------------------------------------- |
+| `npm run audit:css` | Comprehensive class validation        |
+| `npm run test:css`  | Quick CSS validation tests            |
+| `npm test`          | Full test suite (includes CSS checks) |
 
 ## Tech Stack
 
 - **React 19** - UI library
 - **TypeScript** - Type safety
-- **tsup** - Library bundler
-- **Vite** - Development server
+- **Vite** - Library build and development server
 - **Tailwind CSS** - Styling
 - **React Router** - Client-side routing (showcase only)
 - **Vitest** - Testing framework
@@ -545,6 +560,8 @@ const sizeClasses = {
 
 ## Contributing
 
+See [CONTRIBUTING.md](CONTRIBUTING.md) for how to run the repo, run tests, and submit changes. In short:
+
 1. Fork the repository
 2. Create a feature branch (`git checkout -b feature/amazing-feature`)
 3. Commit your changes (`git commit -m 'Add some amazing feature'`)

package/dist/components/branding/google-logo.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Google logo SVG component.
+ *
+ * Renders the official Google "G" logo with correct brand colors.
+ *
+ * @returns The Google logo SVG element
+ *
+ * @example
+ * ```tsx
+ * <GoogleLogo />
+ * ```
+ */
+export declare function GoogleLogo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=google-logo.d.ts.map

package/dist/components/branding/google-logo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"google-logo.d.ts","sourceRoot":"","sources":["../../../src/components/branding/google-logo.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,4CA6BzB"}

package/dist/components/branding/google-logo.js

@@ -0,0 +1,49 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+function GoogleLogo() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-label": "Google logo",
+      role: "img",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z",
+            fill: "#4285F4"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z",
+            fill: "#34A853"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z",
+            fill: "#FBBC05"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z",
+            fill: "#EA4335"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  GoogleLogo
+};
+//# sourceMappingURL=google-logo.js.map

package/dist/components/branding/google-logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"google-logo.js","sources":["../../../src/components/branding/google-logo.tsx"],"sourcesContent":["/**\n * Google logo SVG component.\n *\n * Renders the official Google \"G\" logo with correct brand colors.\n *\n * @returns The Google logo SVG element\n *\n * @example\n * ```tsx\n * <GoogleLogo />\n * ```\n */\nexport function GoogleLogo() {\n  return (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-label=\"Google logo\"\n      role=\"img\"\n    >\n      <path\n        d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"\n        fill=\"#4285F4\"\n      />\n      <path\n        d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\n        fill=\"#34A853\"\n      />\n      <path\n        d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\"\n        fill=\"#FBBC05\"\n      />\n      <path\n        d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"\n        fill=\"#EA4335\"\n      />\n    </svg>\n  );\n}\n"],"names":[],"mappings":";AAYO,SAAS,aAAa;AAC3B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAM;AAAA,MACN,cAAW;AAAA,MACX,MAAK;AAAA,MAEL,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAK;AAAA,UAAA;AAAA,QAAA;AAAA,QAEP;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAK;AAAA,UAAA;AAAA,QAAA;AAAA,QAEP;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAK;AAAA,UAAA;AAAA,QAAA;AAAA,QAEP;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/branding/hydden-logo.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Hydden logo component.
+ *
+ * Renders the Hydden brand logo image.
+ *
+ * @returns The Hydden logo image element
+ *
+ * @example
+ * ```tsx
+ * <HyddenLogo />
+ * ```
+ */
+export declare function HyddenLogo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=hydden-logo.d.ts.map

package/dist/components/branding/hydden-logo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hydden-logo.d.ts","sourceRoot":"","sources":["../../../src/components/branding/hydden-logo.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,4CAEzB"}

package/dist/components/branding/hydden-logo.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+function HyddenLogo() {
+  return /* @__PURE__ */ jsx("img", { src: "/logo.png", alt: "Hydden", className: "h-10 w-auto", loading: "lazy" });
+}
+export {
+  HyddenLogo
+};
+//# sourceMappingURL=hydden-logo.js.map

package/dist/components/branding/hydden-logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hydden-logo.js","sources":["../../../src/components/branding/hydden-logo.tsx"],"sourcesContent":["/**\n * Hydden logo component.\n *\n * Renders the Hydden brand logo image.\n *\n * @returns The Hydden logo image element\n *\n * @example\n * ```tsx\n * <HyddenLogo />\n * ```\n */\nexport function HyddenLogo() {\n  return <img src=\"/logo.png\" alt=\"Hydden\" className=\"h-10 w-auto\" loading=\"lazy\" />;\n}\n"],"names":[],"mappings":";AAYO,SAAS,aAAa;AAC3B,SAAO,oBAAC,SAAI,KAAI,aAAY,KAAI,UAAS,WAAU,eAAc,SAAQ,OAAA,CAAO;AAClF;"}

package/dist/components/branding/microsoft-logo.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Microsoft logo SVG component.
+ *
+ * Renders the official Microsoft four-square logo with correct brand colors.
+ *
+ * @returns The Microsoft logo SVG element
+ *
+ * @example
+ * ```tsx
+ * <MicrosoftLogo />
+ * ```
+ */
+export declare function MicrosoftLogo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=microsoft-logo.d.ts.map

package/dist/components/branding/microsoft-logo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"microsoft-logo.d.ts","sourceRoot":"","sources":["../../../src/components/branding/microsoft-logo.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,4CAiB5B"}

package/dist/components/branding/microsoft-logo.js

@@ -0,0 +1,25 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+function MicrosoftLogo() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "21",
+      height: "21",
+      viewBox: "0 0 21 21",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-label": "Microsoft logo",
+      role: "img",
+      children: [
+        /* @__PURE__ */ jsx("rect", { width: "10", height: "10", fill: "#F25022" }),
+        /* @__PURE__ */ jsx("rect", { x: "11", width: "10", height: "10", fill: "#7FBA00" }),
+        /* @__PURE__ */ jsx("rect", { y: "11", width: "10", height: "10", fill: "#00A4EF" }),
+        /* @__PURE__ */ jsx("rect", { x: "11", y: "11", width: "10", height: "10", fill: "#FFB900" })
+      ]
+    }
+  );
+}
+export {
+  MicrosoftLogo
+};
+//# sourceMappingURL=microsoft-logo.js.map

package/dist/components/branding/microsoft-logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"microsoft-logo.js","sources":["../../../src/components/branding/microsoft-logo.tsx"],"sourcesContent":["/**\n * Microsoft logo SVG component.\n *\n * Renders the official Microsoft four-square logo with correct brand colors.\n *\n * @returns The Microsoft logo SVG element\n *\n * @example\n * ```tsx\n * <MicrosoftLogo />\n * ```\n */\nexport function MicrosoftLogo() {\n  return (\n    <svg\n      width=\"21\"\n      height=\"21\"\n      viewBox=\"0 0 21 21\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-label=\"Microsoft logo\"\n      role=\"img\"\n    >\n      <rect width=\"10\" height=\"10\" fill=\"#F25022\" />\n      <rect x=\"11\" width=\"10\" height=\"10\" fill=\"#7FBA00\" />\n      <rect y=\"11\" width=\"10\" height=\"10\" fill=\"#00A4EF\" />\n      <rect x=\"11\" y=\"11\" width=\"10\" height=\"10\" fill=\"#FFB900\" />\n    </svg>\n  );\n}\n"],"names":[],"mappings":";AAYO,SAAS,gBAAgB;AAC9B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAM;AAAA,MACN,cAAW;AAAA,MACX,MAAK;AAAA,MAEL,UAAA;AAAA,QAAA,oBAAC,UAAK,OAAM,MAAK,QAAO,MAAK,MAAK,WAAU;AAAA,QAC5C,oBAAC,UAAK,GAAE,MAAK,OAAM,MAAK,QAAO,MAAK,MAAK,UAAA,CAAU;AAAA,QACnD,oBAAC,UAAK,GAAE,MAAK,OAAM,MAAK,QAAO,MAAK,MAAK,UAAA,CAAU;AAAA,QACnD,oBAAC,QAAA,EAAK,GAAE,MAAK,GAAE,MAAK,OAAM,MAAK,QAAO,MAAK,MAAK,UAAA,CAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhE;"}

package/dist/components/data-display/avatar/avatar.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { Size } from '../../../theme/size-tokens';
+export type AvatarProps = {
+    /** URL of the image to display */
+    src?: string;
+    /** Alternative text for the image (also used for single-character fallback) */
+    alt?: string;
+    /** Custom fallback content when image is not available */
+    fallback?: ReactNode;
+    /** Size variant - uses unified size system */
+    size?: Size;
+    /** Additional CSS classes to apply */
+    className?: string;
+};
+/**
+ * Avatar - User or profile image display
+ * Uses unified size system from theme/size-tokens
+ */
+declare function Avatar({ src, alt, fallback, size, className }: Readonly<AvatarProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Avatar {
+    var displayName: string;
+}
+export default Avatar;
+//# sourceMappingURL=avatar.d.ts.map

package/dist/components/data-display/avatar/avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/avatar/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,IAAI,EAAe,MAAM,4BAA4B,CAAC;AAE/D,MAAM,MAAM,WAAW,GAAG;IACxB,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+EAA+E;IAC/E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;GAGG;AACH,iBAAS,MAAM,CAAC,EAAE,GAAG,EAAE,GAAQ,EAAE,QAAQ,EAAE,IAAW,EAAE,SAAc,EAAE,EAAE,QAAQ,CAAC,WAAW,CAAC,2CAmB9F;kBAnBQ,MAAM;;;AAuBf,eAAe,MAAM,CAAC"}

package/dist/components/data-display/avatar/avatar.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { avatarSizes } from "../../../theme/size-tokens.js";
+function Avatar({ src, alt = "", fallback, size = "md", className = "" }) {
+  const sizeConfig = avatarSizes[size];
+  let content;
+  if (src) {
+    content = /* @__PURE__ */ jsx("img", { src, alt, className: "w-full h-full object-cover" });
+  } else if (fallback) {
+    content = fallback;
+  } else {
+    content = /* @__PURE__ */ jsx("span", { children: alt.charAt(0).toUpperCase() });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `inline-flex items-center justify-center rounded-full bg-muted text-muted-foreground font-medium overflow-hidden ${sizeConfig.classes} ${sizeConfig.text} ${className}`,
+      children: content
+    }
+  );
+}
+Avatar.displayName = "Avatar";
+export {
+  Avatar as default
+};
+//# sourceMappingURL=avatar.js.map

package/dist/components/data-display/avatar/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sources":["../../../../src/components/data-display/avatar/avatar.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport { Size, avatarSizes } from '../../../theme/size-tokens';\n\nexport type AvatarProps = {\n  /** URL of the image to display */\n  src?: string;\n  /** Alternative text for the image (also used for single-character fallback) */\n  alt?: string;\n  /** Custom fallback content when image is not available */\n  fallback?: ReactNode;\n  /** Size variant - uses unified size system */\n  size?: Size;\n  /** Additional CSS classes to apply */\n  className?: string;\n};\n\n/**\n * Avatar - User or profile image display\n * Uses unified size system from theme/size-tokens\n */\nfunction Avatar({ src, alt = '', fallback, size = 'md', className = '' }: Readonly<AvatarProps>) {\n  const sizeConfig = avatarSizes[size];\n\n  let content;\n  if (src) {\n    content = <img src={src} alt={alt} className=\"w-full h-full object-cover\" />;\n  } else if (fallback) {\n    content = fallback;\n  } else {\n    content = <span>{alt.charAt(0).toUpperCase()}</span>;\n  }\n\n  return (\n    <div\n      className={`inline-flex items-center justify-center rounded-full bg-muted text-muted-foreground font-medium overflow-hidden ${sizeConfig.classes} ${sizeConfig.text} ${className}`}\n    >\n      {content}\n    </div>\n  );\n}\n\nAvatar.displayName = 'Avatar';\n\nexport default Avatar;\n"],"names":[],"mappings":";;AAqBA,SAAS,OAAO,EAAE,KAAK,MAAM,IAAI,UAAU,OAAO,MAAM,YAAY,MAA6B;AAC/F,QAAM,aAAa,YAAY,IAAI;AAEnC,MAAI;AACJ,MAAI,KAAK;AACP,cAAU,oBAAC,OAAA,EAAI,KAAU,KAAU,WAAU,8BAA6B;AAAA,EAC5E,WAAW,UAAU;AACnB,cAAU;AAAA,EACZ,OAAO;AACL,kCAAW,QAAA,EAAM,UAAA,IAAI,OAAO,CAAC,EAAE,eAAc;AAAA,EAC/C;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,mHAAmH,WAAW,OAAO,IAAI,WAAW,IAAI,IAAI,SAAS;AAAA,MAE/K,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,OAAO,cAAc;"}

package/dist/components/data-display/avatar/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './avatar';
+export type { AvatarProps } from './avatar';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/data-display/avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/data-display/badge/badge.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { ColorVariant } from '../../../theme/tokens';
+export type BadgeProps = {
+    /** Content to display inside the badge */
+    children: ReactNode;
+    /** Color variant for the badge (neutral, primary, success, warning, error) */
+    variant?: ColorVariant;
+    /** Size - uses unified size system */
+    size?: 'sm' | 'md' | 'lg';
+    /** Use inverted colors for better contrast on colored backgrounds */
+    inverted?: boolean;
+    /** Additional CSS classes to apply */
+    className?: string;
+} & React.HTMLAttributes<HTMLSpanElement>;
+/**
+ * Badge - Small color label for status or categorization
+ * Uses unified size system from theme/size-tokens
+ */
+declare function Badge({ children, variant, size, inverted, className, ...props }: Readonly<BadgeProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Badge {
+    var displayName: string;
+}
+export default Badge;
+//# sourceMappingURL=badge.d.ts.map

package/dist/components/data-display/badge/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,OAAO,EAAE,YAAY,EAAiB,MAAM,uBAAuB,CAAC;AAEpE,MAAM,MAAM,UAAU,GAAG;IACvB,0CAA0C;IAC1C,QAAQ,EAAE,SAAS,CAAC;IACpB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,sCAAsC;IACtC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;AAE1C;;;GAGG;AACH,iBAAS,KAAK,CAAC,EACb,QAAQ,EACR,OAAmB,EACnB,IAAW,EACX,QAAgB,EAChB,SAAc,EACd,GAAG,KAAK,EACT,EAAE,QAAQ,CAAC,UAAU,CAAC,2CAatB;kBApBQ,KAAK;;;AAwBd,eAAe,KAAK,CAAC"}

package/dist/components/data-display/badge/badge.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { badgeSizes } from "../../../theme/size-tokens.js";
+import { colorVariants } from "../../../theme/tokens.js";
+function Badge({
+  children,
+  variant = "neutral",
+  size = "md",
+  inverted = false,
+  className = "",
+  ...props
+}) {
+  const sizeClasses = badgeSizes[size].classes;
+  const colorClasses = inverted ? colorVariants.badge.inverted[variant] : colorVariants.badge[variant];
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: `inline-flex items-center font-medium rounded-full transition-colors ${colorClasses} ${sizeClasses} ${className}`,
+      ...props,
+      children
+    }
+  );
+}
+Badge.displayName = "Badge";
+export {
+  Badge as default
+};
+//# sourceMappingURL=badge.js.map

package/dist/components/data-display/badge/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sources":["../../../../src/components/data-display/badge/badge.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport { badgeSizes } from '../../../theme/size-tokens';\nimport { ColorVariant, colorVariants } from '../../../theme/tokens';\n\nexport type BadgeProps = {\n  /** Content to display inside the badge */\n  children: ReactNode;\n  /** Color variant for the badge (neutral, primary, success, warning, error) */\n  variant?: ColorVariant;\n  /** Size - uses unified size system */\n  size?: 'sm' | 'md' | 'lg';\n  /** Use inverted colors for better contrast on colored backgrounds */\n  inverted?: boolean;\n  /** Additional CSS classes to apply */\n  className?: string;\n} & React.HTMLAttributes<HTMLSpanElement>;\n\n/**\n * Badge - Small color label for status or categorization\n * Uses unified size system from theme/size-tokens\n */\nfunction Badge({\n  children,\n  variant = 'neutral',\n  size = 'md',\n  inverted = false,\n  className = '',\n  ...props\n}: Readonly<BadgeProps>) {\n  const sizeClasses = badgeSizes[size].classes;\n\n  const colorClasses = inverted ? colorVariants.badge.inverted[variant] : colorVariants.badge[variant];\n\n  return (\n    <span\n      className={`inline-flex items-center font-medium rounded-full transition-colors ${colorClasses} ${sizeClasses} ${className}`}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n}\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"names":[],"mappings":";;;AAsBA,SAAS,MAAM;AAAA,EACb;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,GAAG;AACL,GAAyB;AACvB,QAAM,cAAc,WAAW,IAAI,EAAE;AAErC,QAAM,eAAe,WAAW,cAAc,MAAM,SAAS,OAAO,IAAI,cAAc,MAAM,OAAO;AAEnG,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,uEAAuE,YAAY,IAAI,WAAW,IAAI,SAAS;AAAA,MACzH,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,MAAM,cAAc;"}

package/dist/components/data-display/badge/index.d.ts

@@ -0,0 +1,5 @@
+export { default } from './badge';
+export type { BadgeProps } from './badge';
+export { default as StatusLabel } from './status-label';
+export type { StatusLabelProps } from './status-label';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/data-display/badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/data-display/badge/status-label.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { StatusLabelSize } from '../../../theme/size-tokens';
+export type StatusLabelProps = {
+    children: ReactNode;
+    status?: 'active' | 'inactive' | 'pending' | 'success' | 'error' | 'warning' | 'info';
+    size?: StatusLabelSize;
+    variant?: 'filled' | 'outlined';
+    className?: string;
+};
+/**
+ * StatusLabel - Badge with a status indicator dot
+ *
+ * @example
+ * ```tsx
+ * <StatusLabel status="active">Active</StatusLabel>
+ * <StatusLabel status="pending" size="sm">Pending</StatusLabel>
+ * <StatusLabel status="error" variant="outlined">Error</StatusLabel>
+ * ```
+ */
+declare function StatusLabel({ children, status, size, variant, className }: Readonly<StatusLabelProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace StatusLabel {
+    var displayName: string;
+}
+export default StatusLabel;
+//# sourceMappingURL=status-label.d.ts.map

package/dist/components/data-display/badge/status-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-label.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/badge/status-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAEpF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IACtF,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;GASG;AACH,iBAAS,WAAW,CAAC,EACnB,QAAQ,EACR,MAAe,EACf,IAAW,EACX,OAAkB,EAClB,SAAc,EACf,EAAE,QAAQ,CAAC,gBAAgB,CAAC,2CAiD5B;kBAvDQ,WAAW;;;AA2DpB,eAAe,WAAW,CAAC"}

package/dist/components/data-display/badge/status-label.js

@@ -0,0 +1,63 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { statusLabelSizes } from "../../../theme/size-tokens.js";
+function StatusLabel({
+  children,
+  status = "info",
+  size = "md",
+  variant = "filled",
+  className = ""
+}) {
+  const statusConfig = {
+    active: {
+      filled: "bg-success/10 text-success border-success/20",
+      outlined: "bg-transparent text-success border-success",
+      dot: "bg-success"
+    },
+    inactive: {
+      filled: "bg-muted text-muted-foreground border-border",
+      outlined: "bg-transparent text-muted-foreground border-muted-foreground",
+      dot: "bg-muted-foreground"
+    },
+    pending: {
+      filled: "bg-warning/10 text-warning border-warning/20",
+      outlined: "bg-transparent text-warning border-warning",
+      dot: "bg-warning"
+    },
+    success: {
+      filled: "bg-success/10 text-success border-success/20",
+      outlined: "bg-transparent text-success border-success",
+      dot: "bg-success"
+    },
+    error: {
+      filled: "bg-error/10 text-error border-error/20",
+      outlined: "bg-transparent text-error border-error",
+      dot: "bg-error"
+    },
+    warning: {
+      filled: "bg-warning/10 text-warning border-warning/20",
+      outlined: "bg-transparent text-warning border-warning",
+      dot: "bg-warning"
+    },
+    info: {
+      filled: "bg-primary/10 text-primary border-primary/20",
+      outlined: "bg-transparent text-primary border-primary",
+      dot: "bg-primary"
+    }
+  };
+  const sizeClasses = statusLabelSizes[size];
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: `inline-flex items-center font-medium rounded-full border ${statusConfig[status][variant]} ${sizeClasses.container} ${className}`,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: `rounded-full ${statusConfig[status].dot} ${sizeClasses.dot}` }),
+        children
+      ]
+    }
+  );
+}
+StatusLabel.displayName = "StatusLabel";
+export {
+  StatusLabel as default
+};
+//# sourceMappingURL=status-label.js.map

package/dist/components/data-display/badge/status-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-label.js","sources":["../../../../src/components/data-display/badge/status-label.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { statusLabelSizes, type StatusLabelSize } from '../../../theme/size-tokens';\n\nexport type StatusLabelProps = {\n  children: ReactNode;\n  status?: 'active' | 'inactive' | 'pending' | 'success' | 'error' | 'warning' | 'info';\n  size?: StatusLabelSize;\n  variant?: 'filled' | 'outlined';\n  className?: string;\n};\n\n/**\n * StatusLabel - Badge with a status indicator dot\n *\n * @example\n * ```tsx\n * <StatusLabel status=\"active\">Active</StatusLabel>\n * <StatusLabel status=\"pending\" size=\"sm\">Pending</StatusLabel>\n * <StatusLabel status=\"error\" variant=\"outlined\">Error</StatusLabel>\n * ```\n */\nfunction StatusLabel({\n  children,\n  status = 'info',\n  size = 'md',\n  variant = 'filled',\n  className = ''\n}: Readonly<StatusLabelProps>) {\n  const statusConfig = {\n    active: {\n      filled: 'bg-success/10 text-success border-success/20',\n      outlined: 'bg-transparent text-success border-success',\n      dot: 'bg-success'\n    },\n    inactive: {\n      filled: 'bg-muted text-muted-foreground border-border',\n      outlined: 'bg-transparent text-muted-foreground border-muted-foreground',\n      dot: 'bg-muted-foreground'\n    },\n    pending: {\n      filled: 'bg-warning/10 text-warning border-warning/20',\n      outlined: 'bg-transparent text-warning border-warning',\n      dot: 'bg-warning'\n    },\n    success: {\n      filled: 'bg-success/10 text-success border-success/20',\n      outlined: 'bg-transparent text-success border-success',\n      dot: 'bg-success'\n    },\n    error: {\n      filled: 'bg-error/10 text-error border-error/20',\n      outlined: 'bg-transparent text-error border-error',\n      dot: 'bg-error'\n    },\n    warning: {\n      filled: 'bg-warning/10 text-warning border-warning/20',\n      outlined: 'bg-transparent text-warning border-warning',\n      dot: 'bg-warning'\n    },\n    info: {\n      filled: 'bg-primary/10 text-primary border-primary/20',\n      outlined: 'bg-transparent text-primary border-primary',\n      dot: 'bg-primary'\n    }\n  };\n\n  const sizeClasses = statusLabelSizes[size];\n\n  return (\n    <span\n      className={`inline-flex items-center font-medium rounded-full border ${statusConfig[status][variant]} ${sizeClasses.container} ${className}`}\n    >\n      <span className={`rounded-full ${statusConfig[status].dot} ${sizeClasses.dot}`} />\n      {children}\n    </span>\n  );\n}\n\nStatusLabel.displayName = 'StatusLabel';\n\nexport default StatusLabel;\n"],"names":[],"mappings":";;AAqBA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,EACT,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAY;AACd,GAA+B;AAC7B,QAAM,eAAe;AAAA,IACnB,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,KAAK;AAAA,IAAA;AAAA,IAEP,UAAU;AAAA,MACR,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,KAAK;AAAA,IAAA;AAAA,IAEP,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,KAAK;AAAA,IAAA;AAAA,IAEP,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,KAAK;AAAA,IAAA;AAAA,IAEP,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,KAAK;AAAA,IAAA;AAAA,IAEP,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,KAAK;AAAA,IAAA;AAAA,IAEP,MAAM;AAAA,MACJ,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,KAAK;AAAA,IAAA;AAAA,EACP;AAGF,QAAM,cAAc,iBAAiB,IAAI;AAEzC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,4DAA4D,aAAa,MAAM,EAAE,OAAO,CAAC,IAAI,YAAY,SAAS,IAAI,SAAS;AAAA,MAE1I,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAW,gBAAgB,aAAa,MAAM,EAAE,GAAG,IAAI,YAAY,GAAG,GAAA,CAAI;AAAA,QAC/E;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,YAAY,cAAc;"}