dash-ui-kit 1.0.94 → 2.1.0-dev

package/README.md

@@ -32,6 +32,58 @@ import { Button } from 'dash-ui-kit/react';
 <Button colorScheme="brand">Button</Button>
 ```
 
+## 📱 React Native Support
+
+Dash UI Kit now includes **7 ported components** for React Native with full NativeWind support.
+
+### Installation
+
+```bash
+npm i dash-ui-kit
+npm i nativewind twrnc
+npm i react-native-svg
+```
+
+### Usage
+
+```tsx
+import { Avatar, Badge, BigNumber, ValueCard } from 'dash-ui-kit/react-native';
+
+// Avatar with identicon
+<Avatar identifier="user123" size="md" />
+
+// Badge with status
+<Badge colorScheme="success">Active</Badge>
+
+// BigNumber with formatting
+<BigNumber variant="space">1234567.89</BigNumber>
+
+// ValueCard container
+<ValueCard label="Balance" value="$1,234.56" size="sm" />
+```
+
+### Available React Native Components
+
+- **Avatar** - Unique identicons from usernames/IDs with full customization
+- **Badge** - Status indicators with color schemes and sizes
+- **BigNumber** - Large number formatting with space/comma variants
+- **ValueCard** - Flexible labeled value containers
+- **Identifier** - Transaction/document ID display with copy functionality
+- **CopyButton** - Copy-to-clipboard with visual feedback
+- **NotActive** - Inactive state indicator component
+- **useDebounce** - Custom hook for debouncing values
+
+### Peer Dependencies
+
+React Native setup requires:
+- `react-native` >= 0.70
+- `nativewind` for styling (using twrnc)
+- `react-native-svg` for SVG rendering
+
+### Documentation
+
+For detailed porting guide and technical details, see [REACT_NATIVE_PORT_GUIDE.md](./REACT_NATIVE_PORT_GUIDE.md)
+
 ## 📦 Components
 
 - **ThemeProvider** - Theme context for dark/light mode

package/dist/react/components/accordion/index.cjs.js

@@ -0,0 +1,193 @@
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var RadixAccordion = require('@radix-ui/react-accordion');
+var classVarianceAuthority = require('class-variance-authority');
+var ThemeContext = require('../../contexts/ThemeContext.cjs.js');
+var index = require('../icons/index.cjs.js');
+
+function _interopNamespaceDefault(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 RadixAccordion__namespace = /*#__PURE__*/_interopNamespaceDefault(RadixAccordion);
+
+const accordionRootStyles = classVarianceAuthority.cva(`
+    w-full
+    rounded-[1rem]
+    overflow-hidden
+  `, {
+  variants: {
+    theme: {
+      light: 'bg-dash-primary-dark-blue/[0.05]',
+      dark: 'bg-gray-800/20'
+    },
+    border: {
+      true: 'ring-1 ring-dash-primary-dark-blue/10',
+      false: ''
+    }
+  },
+  defaultVariants: {
+    theme: 'light',
+    border: false
+  }
+});
+const accordionItemStyles = classVarianceAuthority.cva(`
+    border-none
+    outline-none
+  `);
+const accordionTriggerStyles = classVarianceAuthority.cva(`
+    w-full
+    p-[0.875rem]
+    flex
+    items-center
+    justify-between
+    font-dash-main
+    font-medium
+    text-[0.875rem]
+    leading-[1.366]
+    text-dash-primary-dark-blue
+    bg-transparent
+    border-none
+    outline-none
+    cursor-pointer
+    transition-all
+    duration-300
+    ease-in-out
+    hover:bg-dash-primary-dark-blue/[0.01]
+  `, {
+  variants: {
+    theme: {
+      light: 'text-dash-primary-dark-blue hover:bg-dash-primary-dark-blue/[0.05]',
+      dark: 'text-white hover:bg-white/5'
+    }
+  },
+  defaultVariants: {
+    theme: 'light'
+  }
+});
+const accordionContentStyles = classVarianceAuthority.cva(`
+  overflow-hidden
+  will-change-[height]
+  data-[state=open]:h-[var(--radix-accordion-content-height)]
+  data-[state=closed]:h-0
+`);
+const accordionContentInnerStyles = classVarianceAuthority.cva(`
+  p-[0.875rem]
+  space-y-[0.625rem]
+`);
+const separatorStyles = classVarianceAuthority.cva(`
+  mx-[0.875rem]
+  h-px
+  bg-dash-primary-dark-blue/10
+  transition-opacity
+  duration-300
+  ease-in-out
+`, {
+  variants: {
+    theme: {
+      light: 'bg-dash-primary-dark-blue/10',
+      dark: 'bg-white/10'
+    }
+  },
+  defaultVariants: {
+    theme: 'light'
+  }
+});
+const chevronStyles = classVarianceAuthority.cva(`
+  w-4
+  h-4
+  transition-transform
+  duration-300
+  ease-in-out
+  transform
+  group-data-[state=open]:rotate-180
+`);
+/**
+ * Accordion component based on Radix UI with smooth animations.
+ * Displays custom content in an expandable format.
+ */
+const Accordion = ({
+  title,
+  children,
+  defaultOpen = false,
+  open,
+  onOpenChange,
+  className = '',
+  rightElement,
+  showSeparator = false,
+  border = false
+}) => {
+  const {
+    theme
+  } = ThemeContext.useTheme();
+  const isControlled = open !== undefined;
+  const rootClasses = accordionRootStyles({
+    theme,
+    border
+  }) + (className ? ` ${className}` : '');
+  return jsxRuntime.jsx(RadixAccordion__namespace.Root, {
+    type: 'single',
+    collapsible: true,
+    className: rootClasses,
+    value: isControlled ? open ? 'item-1' : undefined : undefined,
+    defaultValue: defaultOpen ? 'item-1' : undefined,
+    onValueChange: value => {
+      if (onOpenChange) {
+        onOpenChange(value === 'item-1');
+      }
+    },
+    children: jsxRuntime.jsxs(RadixAccordion__namespace.Item, {
+      value: 'item-1',
+      className: `AccordionItem ${accordionItemStyles()} group`,
+      children: [jsxRuntime.jsxs(RadixAccordion__namespace.Trigger, {
+        className: `${accordionTriggerStyles({
+          theme
+        })}`,
+        children: [jsxRuntime.jsx("div", {
+          className: 'w-full text-left',
+          children: title
+        }), jsxRuntime.jsxs("div", {
+          className: 'flex items-center gap-3',
+          children: [rightElement && jsxRuntime.jsx("div", {
+            children: rightElement
+          }), jsxRuntime.jsx(index.ChevronIcon, {
+            className: chevronStyles()
+          })]
+        })]
+      }), showSeparator && jsxRuntime.jsx("div", {
+        className: `${separatorStyles({
+          theme
+        })} group-data-[state=closed]:opacity-0 group-data-[state=open]:opacity-100`
+      }), jsxRuntime.jsx(RadixAccordion__namespace.Content, {
+        forceMount: true,
+        className: accordionContentStyles(),
+        children: jsxRuntime.jsx("div", {
+          className: accordionContentInnerStyles(),
+          children: children
+        })
+      })]
+    })
+  });
+};
+
+exports.Accordion = Accordion;
+exports.default = Accordion;
+//# sourceMappingURL=index.cjs.js.map

package/dist/react/components/accordion/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/accordion/index.tsx"],"sourcesContent":["import React from 'react'\nimport * as RadixAccordion from '@radix-ui/react-accordion'\nimport { cva } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport { ChevronIcon } from '../icons'\n\nconst accordionRootStyles = cva(\n  `\n    w-full\n    rounded-[1rem]\n    overflow-hidden\n  `,\n  {\n    variants: {\n      theme: {\n        light: 'bg-dash-primary-dark-blue/[0.05]',\n        dark: 'bg-gray-800/20'\n      },\n      border: {\n        true: 'ring-1 ring-dash-primary-dark-blue/10',\n        false: ''\n      }\n    },\n    defaultVariants: {\n      theme: 'light',\n      border: false\n    }\n  }\n)\n\nconst accordionItemStyles = cva(\n  `\n    border-none\n    outline-none\n  `\n)\n\nconst accordionTriggerStyles = cva(\n  `\n    w-full\n    p-[0.875rem]\n    flex\n    items-center\n    justify-between\n    font-dash-main\n    font-medium\n    text-[0.875rem]\n    leading-[1.366]\n    text-dash-primary-dark-blue\n    bg-transparent\n    border-none\n    outline-none\n    cursor-pointer\n    transition-all\n    duration-300\n    ease-in-out\n    hover:bg-dash-primary-dark-blue/[0.01]\n  `,\n  {\n    variants: {\n      theme: {\n        light: 'text-dash-primary-dark-blue hover:bg-dash-primary-dark-blue/[0.05]',\n        dark: 'text-white hover:bg-white/5'\n      }\n    },\n    defaultVariants: {\n      theme: 'light'\n    }\n  }\n)\n\nconst accordionContentStyles = cva(`\n  overflow-hidden\n  will-change-[height]\n  data-[state=open]:h-[var(--radix-accordion-content-height)]\n  data-[state=closed]:h-0\n`)\n\nconst accordionContentInnerStyles = cva(`\n  p-[0.875rem]\n  space-y-[0.625rem]\n`)\n\nconst separatorStyles = cva(`\n  mx-[0.875rem]\n  h-px\n  bg-dash-primary-dark-blue/10\n  transition-opacity\n  duration-300\n  ease-in-out\n`, {\n  variants: {\n    theme: {\n      light: 'bg-dash-primary-dark-blue/10',\n      dark: 'bg-white/10'\n    }\n  },\n  defaultVariants: {\n    theme: 'light'\n  }\n})\n\nconst chevronStyles = cva(`\n  w-4\n  h-4\n  transition-transform\n  duration-300\n  ease-in-out\n  transform\n  group-data-[state=open]:rotate-180\n`)\n\nexport interface AccordionProps {\n  /** The title displayed in the accordion trigger */\n  title: string\n  /** Content to display in the accordion */\n  children?: React.ReactNode\n  /** Whether the accordion is open by default */\n  defaultOpen?: boolean\n  /** Controlled open state */\n  open?: boolean\n  /** Callback when the open state changes */\n  onOpenChange?: (open: boolean) => void\n  /** Additional CSS classes */\n  className?: string\n  /** Optional element to display on the right side of the trigger */\n  rightElement?: React.ReactNode\n  /** Whether to show separator between title and content when open */\n  showSeparator?: boolean\n  /** Whether to show border around the accordion */\n  border?: boolean\n}\n\n/**\n * Accordion component based on Radix UI with smooth animations.\n * Displays custom content in an expandable format.\n */\nexport const Accordion: React.FC<AccordionProps> = ({\n  title,\n  children,\n  defaultOpen = false,\n  open,\n  onOpenChange,\n  className = '',\n  rightElement,\n  showSeparator = false,\n  border = false\n}) => {\n  const { theme } = useTheme()\n  const isControlled = open !== undefined\n\n  const rootClasses = accordionRootStyles({ theme, border }) + (className ? ` ${className}` : '')\n\n  return (\n    <RadixAccordion.Root\n      type='single'\n      collapsible\n      className={rootClasses}\n      value={isControlled ? (open ? 'item-1' : undefined) : undefined}\n      defaultValue={defaultOpen ? 'item-1' : undefined}\n      onValueChange={(value) => {\n        if (onOpenChange) {\n          onOpenChange(value === 'item-1')\n        }\n      }}\n    >\n      <RadixAccordion.Item\n        value='item-1'\n        className={`AccordionItem ${accordionItemStyles()} group`}\n      >\n        <RadixAccordion.Trigger \n          className={`${accordionTriggerStyles({ theme })}`}\n        >\n          <div className='w-full text-left'>{title}</div>\n          <div className='flex items-center gap-3'>\n            {rightElement && <div>{rightElement}</div>}\n            <ChevronIcon className={chevronStyles()} />\n          </div>\n        </RadixAccordion.Trigger>\n\n        {showSeparator && (\n          <div className={`${separatorStyles({ theme })} group-data-[state=closed]:opacity-0 group-data-[state=open]:opacity-100`} />\n        )}\n\n        <RadixAccordion.Content forceMount className={accordionContentStyles()}>\n          <div className={accordionContentInnerStyles()}>\n            {children}\n          </div>\n        </RadixAccordion.Content>\n      </RadixAccordion.Item>\n    </RadixAccordion.Root>\n  )\n}\n\nexport default Accordion\n"],"names":["accordionRootStyles","cva","variants","theme","light","dark","border","true","false","defaultVariants","accordionItemStyles","accordionTriggerStyles","accordionContentStyles","accordionContentInnerStyles","separatorStyles","chevronStyles","Accordion","title","children","defaultOpen","open","onOpenChange","className","rightElement","showSeparator","useTheme","isControlled","undefined","rootClasses","_jsx","RadixAccordion","Root","type","collapsible","value","defaultValue","onValueChange","_jsxs","Item","Trigger","ChevronIcon","Content","forceMount"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAMA,mBAAmB,GAAGC,0BAAG,CAC7B;;;;GAIC,EACD;AACEC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,kCAAkC;AACzCC,MAAAA,IAAI,EAAE;KACP;AACDC,IAAAA,MAAM,EAAE;AACNC,MAAAA,IAAI,EAAE,uCAAuC;AAC7CC,MAAAA,KAAK,EAAE;AACR;GACF;AACDC,EAAAA,eAAe,EAAE;AACfN,IAAAA,KAAK,EAAE,OAAO;AACdG,IAAAA,MAAM,EAAE;AACT;AACF,CAAA,CACF;AAED,MAAMI,mBAAmB,GAAGT,0BAAG,CAC7B;;;AAGC,EAAA,CAAA,CACF;AAED,MAAMU,sBAAsB,GAAGV,0BAAG,CAChC;;;;;;;;;;;;;;;;;;;GAmBC,EACD;AACEC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,oEAAoE;AAC3EC,MAAAA,IAAI,EAAE;AACP;GACF;AACDI,EAAAA,eAAe,EAAE;AACfN,IAAAA,KAAK,EAAE;AACR;AACF,CAAA,CACF;AAED,MAAMS,sBAAsB,GAAGX,0BAAG,CAAC;;;;;AAKlC,CAAA,CAAC;AAEF,MAAMY,2BAA2B,GAAGZ,0BAAG,CAAC;;;AAGvC,CAAA,CAAC;AAEF,MAAMa,eAAe,GAAGb,0BAAG,CAAC;;;;;;;CAO3B,EAAE;AACDC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,8BAA8B;AACrCC,MAAAA,IAAI,EAAE;AACP;GACF;AACDI,EAAAA,eAAe,EAAE;AACfN,IAAAA,KAAK,EAAE;AACR;AACF,CAAA,CAAC;AAEF,MAAMY,aAAa,GAAGd,0BAAG,CAAC;;;;;;;;AAQzB,CAAA,CAAC;AAuBF;;;AAGG;AACI,MAAMe,SAAS,GAA6BA,CAAC;EAClDC,KAAK;EACLC,QAAQ;AACRC,EAAAA,WAAW,GAAG,KAAK;EACnBC,IAAI;EACJC,YAAY;AACZC,EAAAA,SAAS,GAAG,EAAE;EACdC,YAAY;AACZC,EAAAA,aAAa,GAAG,KAAK;AACrBlB,EAAAA,MAAM,GAAG;AAAK,CACf,KAAI;EACH,MAAM;AAAEH,IAAAA;GAAO,GAAGsB,qBAAQ,EAAE;AAC5B,EAAA,MAAMC,YAAY,GAAGN,IAAI,KAAKO,SAAS;EAEvC,MAAMC,WAAW,GAAG5B,mBAAmB,CAAC;IAAEG,KAAK;AAAEG,IAAAA;GAAQ,CAAC,IAAIgB,SAAS,GAAG,IAAIA,SAAS,CAAA,CAAE,GAAG,EAAE,CAAC;AAE/F,EAAA,OACEO,cAAC,CAAAC,yBAAc,CAACC,IAAI;AAClBC,IAAAA,IAAI,EAAC,QAAQ;AACbC,IAAAA,WAAW,EAAA,IAAA;AACXX,IAAAA,SAAS,EAAEM,WAAW;IACtBM,KAAK,EAAER,YAAY,GAAIN,IAAI,GAAG,QAAQ,GAAGO,SAAS,GAAIA,SAAS;AAC/DQ,IAAAA,YAAY,EAAEhB,WAAW,GAAG,QAAQ,GAAGQ,SAAS;IAChDS,aAAa,EAAGF,KAAK,IAAI;AACvB,MAAA,IAAIb,YAAY,EAAE;AAChBA,QAAAA,YAAY,CAACa,KAAK,KAAK,QAAQ,CAAC;AAClC;KACD;AAAAhB,IAAAA,QAAA,EAEDmB,gBAACP,yBAAc,CAACQ,IAAI,EAClB;AAAAJ,MAAAA,KAAK,EAAC,QAAQ;AACdZ,MAAAA,SAAS,EAAE,CAAA,cAAA,EAAiBZ,mBAAmB,EAAE,CAAQ,MAAA,CAAA;AAEzDQ,MAAAA,QAAA,EAAA,CAAAmB,eAAA,CAACP,yBAAc,CAACS,OAAO,EACrB;QAAAjB,SAAS,EAAE,CAAGX,EAAAA,sBAAsB,CAAC;AAAER,UAAAA;AAAO,SAAA,CAAC,CAAE,CAAA;AAEjDe,QAAAA,QAAA,EAAA,CAAAW,cAAA,CAAA,KAAA,EAAA;AAAKP,UAAAA,SAAS,EAAC,kBAAkB;AAAAJ,UAAAA,QAAA,EAAED;AAAY,SAAA,CAAA,EAC/CoB,eAAK,CAAA,KAAA,EAAA;AAAAf,UAAAA,SAAS,EAAC,yBAAyB;qBACrCC,YAAY,IAAIM,cAAM,CAAA,KAAA,EAAA;AAAAX,YAAAA,QAAA,EAAAK;AAAmB,WAAA,CAAA,EAC1CM,eAACW,iBAAW,EAAA;YAAClB,SAAS,EAAEP,aAAa;AAAM,WAAA,CAAA;AAAA,SAAA,CACvC;AACiB,OAAA,CAAA,EAExBS,aAAa,IACZK,cAAK,CAAA,KAAA,EAAA;QAAAP,SAAS,EAAE,CAAGR,EAAAA,eAAe,CAAC;AAAEX,UAAAA;AAAK,SAAE,CAAC,CAAA,wEAAA;AAA8E,OAAA,CAC5H,EAED0B,cAAC,CAAAC,yBAAc,CAACW,OAAO,EAAA;AAACC,QAAAA,UAAU,EAAC,IAAA;QAAApB,SAAS,EAAEV,sBAAsB,EAAE;AAAAM,QAAAA,QAAA,EACpEW;UAAKP,SAAS,EAAET,2BAA2B,EAAE;AAC1CK,UAAAA,QAAA,EAAAA;;AAEoB,OAAA,CAAA;KAAA;AAEP,GAAA,CAAA;AAE1B;;;;;"}

package/dist/react/components/accordion/index.esm.js

@@ -0,0 +1,169 @@
+"use client";
+
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as RadixAccordion from '@radix-ui/react-accordion';
+import { cva } from 'class-variance-authority';
+import { useTheme } from '../../contexts/ThemeContext.esm.js';
+import { ChevronIcon } from '../icons/index.esm.js';
+
+const accordionRootStyles = cva(`
+    w-full
+    rounded-[1rem]
+    overflow-hidden
+  `, {
+  variants: {
+    theme: {
+      light: 'bg-dash-primary-dark-blue/[0.05]',
+      dark: 'bg-gray-800/20'
+    },
+    border: {
+      true: 'ring-1 ring-dash-primary-dark-blue/10',
+      false: ''
+    }
+  },
+  defaultVariants: {
+    theme: 'light',
+    border: false
+  }
+});
+const accordionItemStyles = cva(`
+    border-none
+    outline-none
+  `);
+const accordionTriggerStyles = cva(`
+    w-full
+    p-[0.875rem]
+    flex
+    items-center
+    justify-between
+    font-dash-main
+    font-medium
+    text-[0.875rem]
+    leading-[1.366]
+    text-dash-primary-dark-blue
+    bg-transparent
+    border-none
+    outline-none
+    cursor-pointer
+    transition-all
+    duration-300
+    ease-in-out
+    hover:bg-dash-primary-dark-blue/[0.01]
+  `, {
+  variants: {
+    theme: {
+      light: 'text-dash-primary-dark-blue hover:bg-dash-primary-dark-blue/[0.05]',
+      dark: 'text-white hover:bg-white/5'
+    }
+  },
+  defaultVariants: {
+    theme: 'light'
+  }
+});
+const accordionContentStyles = cva(`
+  overflow-hidden
+  will-change-[height]
+  data-[state=open]:h-[var(--radix-accordion-content-height)]
+  data-[state=closed]:h-0
+`);
+const accordionContentInnerStyles = cva(`
+  p-[0.875rem]
+  space-y-[0.625rem]
+`);
+const separatorStyles = cva(`
+  mx-[0.875rem]
+  h-px
+  bg-dash-primary-dark-blue/10
+  transition-opacity
+  duration-300
+  ease-in-out
+`, {
+  variants: {
+    theme: {
+      light: 'bg-dash-primary-dark-blue/10',
+      dark: 'bg-white/10'
+    }
+  },
+  defaultVariants: {
+    theme: 'light'
+  }
+});
+const chevronStyles = cva(`
+  w-4
+  h-4
+  transition-transform
+  duration-300
+  ease-in-out
+  transform
+  group-data-[state=open]:rotate-180
+`);
+/**
+ * Accordion component based on Radix UI with smooth animations.
+ * Displays custom content in an expandable format.
+ */
+const Accordion = ({
+  title,
+  children,
+  defaultOpen = false,
+  open,
+  onOpenChange,
+  className = '',
+  rightElement,
+  showSeparator = false,
+  border = false
+}) => {
+  const {
+    theme
+  } = useTheme();
+  const isControlled = open !== undefined;
+  const rootClasses = accordionRootStyles({
+    theme,
+    border
+  }) + (className ? ` ${className}` : '');
+  return jsx(RadixAccordion.Root, {
+    type: 'single',
+    collapsible: true,
+    className: rootClasses,
+    value: isControlled ? open ? 'item-1' : undefined : undefined,
+    defaultValue: defaultOpen ? 'item-1' : undefined,
+    onValueChange: value => {
+      if (onOpenChange) {
+        onOpenChange(value === 'item-1');
+      }
+    },
+    children: jsxs(RadixAccordion.Item, {
+      value: 'item-1',
+      className: `AccordionItem ${accordionItemStyles()} group`,
+      children: [jsxs(RadixAccordion.Trigger, {
+        className: `${accordionTriggerStyles({
+          theme
+        })}`,
+        children: [jsx("div", {
+          className: 'w-full text-left',
+          children: title
+        }), jsxs("div", {
+          className: 'flex items-center gap-3',
+          children: [rightElement && jsx("div", {
+            children: rightElement
+          }), jsx(ChevronIcon, {
+            className: chevronStyles()
+          })]
+        })]
+      }), showSeparator && jsx("div", {
+        className: `${separatorStyles({
+          theme
+        })} group-data-[state=closed]:opacity-0 group-data-[state=open]:opacity-100`
+      }), jsx(RadixAccordion.Content, {
+        forceMount: true,
+        className: accordionContentStyles(),
+        children: jsx("div", {
+          className: accordionContentInnerStyles(),
+          children: children
+        })
+      })]
+    })
+  });
+};
+
+export { Accordion, Accordion as default };
+//# sourceMappingURL=index.esm.js.map

package/dist/react/components/accordion/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/accordion/index.tsx"],"sourcesContent":["import React from 'react'\nimport * as RadixAccordion from '@radix-ui/react-accordion'\nimport { cva } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport { ChevronIcon } from '../icons'\n\nconst accordionRootStyles = cva(\n  `\n    w-full\n    rounded-[1rem]\n    overflow-hidden\n  `,\n  {\n    variants: {\n      theme: {\n        light: 'bg-dash-primary-dark-blue/[0.05]',\n        dark: 'bg-gray-800/20'\n      },\n      border: {\n        true: 'ring-1 ring-dash-primary-dark-blue/10',\n        false: ''\n      }\n    },\n    defaultVariants: {\n      theme: 'light',\n      border: false\n    }\n  }\n)\n\nconst accordionItemStyles = cva(\n  `\n    border-none\n    outline-none\n  `\n)\n\nconst accordionTriggerStyles = cva(\n  `\n    w-full\n    p-[0.875rem]\n    flex\n    items-center\n    justify-between\n    font-dash-main\n    font-medium\n    text-[0.875rem]\n    leading-[1.366]\n    text-dash-primary-dark-blue\n    bg-transparent\n    border-none\n    outline-none\n    cursor-pointer\n    transition-all\n    duration-300\n    ease-in-out\n    hover:bg-dash-primary-dark-blue/[0.01]\n  `,\n  {\n    variants: {\n      theme: {\n        light: 'text-dash-primary-dark-blue hover:bg-dash-primary-dark-blue/[0.05]',\n        dark: 'text-white hover:bg-white/5'\n      }\n    },\n    defaultVariants: {\n      theme: 'light'\n    }\n  }\n)\n\nconst accordionContentStyles = cva(`\n  overflow-hidden\n  will-change-[height]\n  data-[state=open]:h-[var(--radix-accordion-content-height)]\n  data-[state=closed]:h-0\n`)\n\nconst accordionContentInnerStyles = cva(`\n  p-[0.875rem]\n  space-y-[0.625rem]\n`)\n\nconst separatorStyles = cva(`\n  mx-[0.875rem]\n  h-px\n  bg-dash-primary-dark-blue/10\n  transition-opacity\n  duration-300\n  ease-in-out\n`, {\n  variants: {\n    theme: {\n      light: 'bg-dash-primary-dark-blue/10',\n      dark: 'bg-white/10'\n    }\n  },\n  defaultVariants: {\n    theme: 'light'\n  }\n})\n\nconst chevronStyles = cva(`\n  w-4\n  h-4\n  transition-transform\n  duration-300\n  ease-in-out\n  transform\n  group-data-[state=open]:rotate-180\n`)\n\nexport interface AccordionProps {\n  /** The title displayed in the accordion trigger */\n  title: string\n  /** Content to display in the accordion */\n  children?: React.ReactNode\n  /** Whether the accordion is open by default */\n  defaultOpen?: boolean\n  /** Controlled open state */\n  open?: boolean\n  /** Callback when the open state changes */\n  onOpenChange?: (open: boolean) => void\n  /** Additional CSS classes */\n  className?: string\n  /** Optional element to display on the right side of the trigger */\n  rightElement?: React.ReactNode\n  /** Whether to show separator between title and content when open */\n  showSeparator?: boolean\n  /** Whether to show border around the accordion */\n  border?: boolean\n}\n\n/**\n * Accordion component based on Radix UI with smooth animations.\n * Displays custom content in an expandable format.\n */\nexport const Accordion: React.FC<AccordionProps> = ({\n  title,\n  children,\n  defaultOpen = false,\n  open,\n  onOpenChange,\n  className = '',\n  rightElement,\n  showSeparator = false,\n  border = false\n}) => {\n  const { theme } = useTheme()\n  const isControlled = open !== undefined\n\n  const rootClasses = accordionRootStyles({ theme, border }) + (className ? ` ${className}` : '')\n\n  return (\n    <RadixAccordion.Root\n      type='single'\n      collapsible\n      className={rootClasses}\n      value={isControlled ? (open ? 'item-1' : undefined) : undefined}\n      defaultValue={defaultOpen ? 'item-1' : undefined}\n      onValueChange={(value) => {\n        if (onOpenChange) {\n          onOpenChange(value === 'item-1')\n        }\n      }}\n    >\n      <RadixAccordion.Item\n        value='item-1'\n        className={`AccordionItem ${accordionItemStyles()} group`}\n      >\n        <RadixAccordion.Trigger \n          className={`${accordionTriggerStyles({ theme })}`}\n        >\n          <div className='w-full text-left'>{title}</div>\n          <div className='flex items-center gap-3'>\n            {rightElement && <div>{rightElement}</div>}\n            <ChevronIcon className={chevronStyles()} />\n          </div>\n        </RadixAccordion.Trigger>\n\n        {showSeparator && (\n          <div className={`${separatorStyles({ theme })} group-data-[state=closed]:opacity-0 group-data-[state=open]:opacity-100`} />\n        )}\n\n        <RadixAccordion.Content forceMount className={accordionContentStyles()}>\n          <div className={accordionContentInnerStyles()}>\n            {children}\n          </div>\n        </RadixAccordion.Content>\n      </RadixAccordion.Item>\n    </RadixAccordion.Root>\n  )\n}\n\nexport default Accordion\n"],"names":["accordionRootStyles","cva","variants","theme","light","dark","border","true","false","defaultVariants","accordionItemStyles","accordionTriggerStyles","accordionContentStyles","accordionContentInnerStyles","separatorStyles","chevronStyles","Accordion","title","children","defaultOpen","open","onOpenChange","className","rightElement","showSeparator","useTheme","isControlled","undefined","rootClasses","_jsx","RadixAccordion","Root","type","collapsible","value","defaultValue","onValueChange","_jsxs","Item","Trigger","ChevronIcon","Content","forceMount"],"mappings":";;;;;;;;AAMA,MAAMA,mBAAmB,GAAGC,GAAG,CAC7B;;;;GAIC,EACD;AACEC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,kCAAkC;AACzCC,MAAAA,IAAI,EAAE;KACP;AACDC,IAAAA,MAAM,EAAE;AACNC,MAAAA,IAAI,EAAE,uCAAuC;AAC7CC,MAAAA,KAAK,EAAE;AACR;GACF;AACDC,EAAAA,eAAe,EAAE;AACfN,IAAAA,KAAK,EAAE,OAAO;AACdG,IAAAA,MAAM,EAAE;AACT;AACF,CAAA,CACF;AAED,MAAMI,mBAAmB,GAAGT,GAAG,CAC7B;;;AAGC,EAAA,CAAA,CACF;AAED,MAAMU,sBAAsB,GAAGV,GAAG,CAChC;;;;;;;;;;;;;;;;;;;GAmBC,EACD;AACEC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,oEAAoE;AAC3EC,MAAAA,IAAI,EAAE;AACP;GACF;AACDI,EAAAA,eAAe,EAAE;AACfN,IAAAA,KAAK,EAAE;AACR;AACF,CAAA,CACF;AAED,MAAMS,sBAAsB,GAAGX,GAAG,CAAC;;;;;AAKlC,CAAA,CAAC;AAEF,MAAMY,2BAA2B,GAAGZ,GAAG,CAAC;;;AAGvC,CAAA,CAAC;AAEF,MAAMa,eAAe,GAAGb,GAAG,CAAC;;;;;;;CAO3B,EAAE;AACDC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,8BAA8B;AACrCC,MAAAA,IAAI,EAAE;AACP;GACF;AACDI,EAAAA,eAAe,EAAE;AACfN,IAAAA,KAAK,EAAE;AACR;AACF,CAAA,CAAC;AAEF,MAAMY,aAAa,GAAGd,GAAG,CAAC;;;;;;;;AAQzB,CAAA,CAAC;AAuBF;;;AAGG;AACI,MAAMe,SAAS,GAA6BA,CAAC;EAClDC,KAAK;EACLC,QAAQ;AACRC,EAAAA,WAAW,GAAG,KAAK;EACnBC,IAAI;EACJC,YAAY;AACZC,EAAAA,SAAS,GAAG,EAAE;EACdC,YAAY;AACZC,EAAAA,aAAa,GAAG,KAAK;AACrBlB,EAAAA,MAAM,GAAG;AAAK,CACf,KAAI;EACH,MAAM;AAAEH,IAAAA;GAAO,GAAGsB,QAAQ,EAAE;AAC5B,EAAA,MAAMC,YAAY,GAAGN,IAAI,KAAKO,SAAS;EAEvC,MAAMC,WAAW,GAAG5B,mBAAmB,CAAC;IAAEG,KAAK;AAAEG,IAAAA;GAAQ,CAAC,IAAIgB,SAAS,GAAG,IAAIA,SAAS,CAAA,CAAE,GAAG,EAAE,CAAC;AAE/F,EAAA,OACEO,GAAC,CAAAC,cAAc,CAACC,IAAI;AAClBC,IAAAA,IAAI,EAAC,QAAQ;AACbC,IAAAA,WAAW,EAAA,IAAA;AACXX,IAAAA,SAAS,EAAEM,WAAW;IACtBM,KAAK,EAAER,YAAY,GAAIN,IAAI,GAAG,QAAQ,GAAGO,SAAS,GAAIA,SAAS;AAC/DQ,IAAAA,YAAY,EAAEhB,WAAW,GAAG,QAAQ,GAAGQ,SAAS;IAChDS,aAAa,EAAGF,KAAK,IAAI;AACvB,MAAA,IAAIb,YAAY,EAAE;AAChBA,QAAAA,YAAY,CAACa,KAAK,KAAK,QAAQ,CAAC;AAClC;KACD;AAAAhB,IAAAA,QAAA,EAEDmB,KAACP,cAAc,CAACQ,IAAI,EAClB;AAAAJ,MAAAA,KAAK,EAAC,QAAQ;AACdZ,MAAAA,SAAS,EAAE,CAAA,cAAA,EAAiBZ,mBAAmB,EAAE,CAAQ,MAAA,CAAA;AAEzDQ,MAAAA,QAAA,EAAA,CAAAmB,IAAA,CAACP,cAAc,CAACS,OAAO,EACrB;QAAAjB,SAAS,EAAE,CAAGX,EAAAA,sBAAsB,CAAC;AAAER,UAAAA;AAAO,SAAA,CAAC,CAAE,CAAA;AAEjDe,QAAAA,QAAA,EAAA,CAAAW,GAAA,CAAA,KAAA,EAAA;AAAKP,UAAAA,SAAS,EAAC,kBAAkB;AAAAJ,UAAAA,QAAA,EAAED;AAAY,SAAA,CAAA,EAC/CoB,IAAK,CAAA,KAAA,EAAA;AAAAf,UAAAA,SAAS,EAAC,yBAAyB;qBACrCC,YAAY,IAAIM,GAAM,CAAA,KAAA,EAAA;AAAAX,YAAAA,QAAA,EAAAK;AAAmB,WAAA,CAAA,EAC1CM,IAACW,WAAW,EAAA;YAAClB,SAAS,EAAEP,aAAa;AAAM,WAAA,CAAA;AAAA,SAAA,CACvC;AACiB,OAAA,CAAA,EAExBS,aAAa,IACZK,GAAK,CAAA,KAAA,EAAA;QAAAP,SAAS,EAAE,CAAGR,EAAAA,eAAe,CAAC;AAAEX,UAAAA;AAAK,SAAE,CAAC,CAAA,wEAAA;AAA8E,OAAA,CAC5H,EAED0B,GAAC,CAAAC,cAAc,CAACW,OAAO,EAAA;AAACC,QAAAA,UAAU,EAAC,IAAA;QAAApB,SAAS,EAAEV,sBAAsB,EAAE;AAAAM,QAAAA,QAAA,EACpEW;UAAKP,SAAS,EAAET,2BAA2B,EAAE;AAC1CK,UAAAA,QAAA,EAAAA;;AAEoB,OAAA,CAAA;KAAA;AAEP,GAAA,CAAA;AAE1B;;;;"}

package/dist/react/components/avatar/index.cjs.js

@@ -0,0 +1,39 @@
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var minidenticons = require('minidenticons');
+
+/**
+ * Avatar component that creates unique identicons from usernames
+ * with customizable appearance.
+ */
+const Avatar = _a => {
+  var {
+      username,
+      className = '',
+      saturation = 50,
+      lightness = 50
+    } = _a,
+    props = tslib.__rest(_a, ["username", "className", "saturation", "lightness"]);
+  const svgURI = React.useMemo(() => 'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticons.minidenticon(username, saturation, lightness)), [username, saturation, lightness]);
+  const containerClasses = `relative inline-block ${className}`.trim();
+  const imageClasses = 'w-full h-full';
+  return jsxRuntime.jsx("div", {
+    className: containerClasses,
+    children: jsxRuntime.jsx("img", Object.assign({
+      src: svgURI,
+      alt: username || '',
+      className: imageClasses
+    }, props))
+  });
+};
+
+exports.Avatar = Avatar;
+exports.default = Avatar;
+//# sourceMappingURL=index.cjs.js.map

package/dist/react/components/avatar/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/avatar/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { minidenticon } from 'minidenticons'\n\nexport interface AvatarProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt'> {\n  /** Username to generate identicon for */\n  username: string\n  /** Additional CSS class name */\n  className?: string\n  /** Saturation level for the identicon (0-100) */\n  saturation?: number\n  /** Lightness level for the identicon (0-100) */\n  lightness?: number\n}\n\n/**\n * Avatar component that creates unique identicons from usernames\n * with customizable appearance.\n */\nexport const Avatar: React.FC<AvatarProps> = ({\n  username,\n  className = '',\n  saturation = 50,\n  lightness = 50,\n  ...props\n}) => {\n  const svgURI = useMemo(\n    () => 'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(username, saturation, lightness)),\n    [username, saturation, lightness]\n  )\n\n  const containerClasses = `relative inline-block ${className}`.trim()\n  const imageClasses = 'w-full h-full'\n\n  return (\n    <div className={containerClasses}>\n      <img\n        src={svgURI}\n        alt={username || ''}\n        className={imageClasses}\n        {...props}\n      />\n    </div>\n  )\n}\n\nexport default Avatar\n"],"names":["Avatar","_a","username","className","saturation","lightness","props","__rest","svgURI","useMemo","encodeURIComponent","minidenticon","containerClasses","trim","imageClasses","_jsx","Object","assign","src","alt"],"mappings":";;;;;;;;;;;AAcA;;;AAGG;AACUA,MAAAA,MAAM,GAA2BC,EAM7C,IAAI;EANyC,IAAA;MAC5CC,QAAQ;AACRC,MAAAA,SAAS,GAAG,EAAE;AACdC,MAAAA,UAAU,GAAG,EAAE;AACfC,MAAAA,SAAS,GAAG;AAAE,KAAA,GAAAJ,EAEf;AADIK,IAAAA,KAAK,GAAAC,YAAA,CAAAN,EAAA,EALoC,oDAM7C,CADS;EAER,MAAMO,MAAM,GAAGC,aAAO,CACpB,MAAM,0BAA0B,GAAGC,kBAAkB,CAACC,0BAAY,CAACT,QAAQ,EAAEE,UAAU,EAAEC,SAAS,CAAC,CAAC,EACpG,CAACH,QAAQ,EAAEE,UAAU,EAAEC,SAAS,CAAC,CAClC;EAED,MAAMO,gBAAgB,GAAG,CAAyBT,sBAAAA,EAAAA,SAAS,EAAE,CAACU,IAAI,EAAE;EACpE,MAAMC,YAAY,GAAG,eAAe;EAEpC,OACEC,cAAK,CAAA,KAAA,EAAA;AAAAZ,IAAAA,SAAS,EAAES,gBAAgB;cAC9BG,cACE,CAAA,KAAA,EAAAC,MAAA,CAAAC,MAAA,CAAA;AAAAC,MAAAA,GAAG,EAAEV,MAAM;MACXW,GAAG,EAAEjB,QAAQ,IAAI,EAAE;AACnBC,MAAAA,SAAS,EAAEW;KAAY,EACnBR,KAAK,CAAA;AAEP,GAAA,CAAA;AAEV;;;;;"}

package/dist/react/components/avatar/index.esm.js

@@ -0,0 +1,34 @@
+"use client";
+
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { minidenticon } from 'minidenticons';
+
+/**
+ * Avatar component that creates unique identicons from usernames
+ * with customizable appearance.
+ */
+const Avatar = _a => {
+  var {
+      username,
+      className = '',
+      saturation = 50,
+      lightness = 50
+    } = _a,
+    props = __rest(_a, ["username", "className", "saturation", "lightness"]);
+  const svgURI = useMemo(() => 'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(username, saturation, lightness)), [username, saturation, lightness]);
+  const containerClasses = `relative inline-block ${className}`.trim();
+  const imageClasses = 'w-full h-full';
+  return jsx("div", {
+    className: containerClasses,
+    children: jsx("img", Object.assign({
+      src: svgURI,
+      alt: username || '',
+      className: imageClasses
+    }, props))
+  });
+};
+
+export { Avatar, Avatar as default };
+//# sourceMappingURL=index.esm.js.map

package/dist/react/components/avatar/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/avatar/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { minidenticon } from 'minidenticons'\n\nexport interface AvatarProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt'> {\n  /** Username to generate identicon for */\n  username: string\n  /** Additional CSS class name */\n  className?: string\n  /** Saturation level for the identicon (0-100) */\n  saturation?: number\n  /** Lightness level for the identicon (0-100) */\n  lightness?: number\n}\n\n/**\n * Avatar component that creates unique identicons from usernames\n * with customizable appearance.\n */\nexport const Avatar: React.FC<AvatarProps> = ({\n  username,\n  className = '',\n  saturation = 50,\n  lightness = 50,\n  ...props\n}) => {\n  const svgURI = useMemo(\n    () => 'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(username, saturation, lightness)),\n    [username, saturation, lightness]\n  )\n\n  const containerClasses = `relative inline-block ${className}`.trim()\n  const imageClasses = 'w-full h-full'\n\n  return (\n    <div className={containerClasses}>\n      <img\n        src={svgURI}\n        alt={username || ''}\n        className={imageClasses}\n        {...props}\n      />\n    </div>\n  )\n}\n\nexport default Avatar\n"],"names":["Avatar","_a","username","className","saturation","lightness","props","__rest","svgURI","useMemo","encodeURIComponent","minidenticon","containerClasses","trim","imageClasses","_jsx","Object","assign","src","alt"],"mappings":";;;;;;;AAcA;;;AAGG;AACUA,MAAAA,MAAM,GAA2BC,EAM7C,IAAI;EANyC,IAAA;MAC5CC,QAAQ;AACRC,MAAAA,SAAS,GAAG,EAAE;AACdC,MAAAA,UAAU,GAAG,EAAE;AACfC,MAAAA,SAAS,GAAG;AAAE,KAAA,GAAAJ,EAEf;AADIK,IAAAA,KAAK,GAAAC,MAAA,CAAAN,EAAA,EALoC,oDAM7C,CADS;EAER,MAAMO,MAAM,GAAGC,OAAO,CACpB,MAAM,0BAA0B,GAAGC,kBAAkB,CAACC,YAAY,CAACT,QAAQ,EAAEE,UAAU,EAAEC,SAAS,CAAC,CAAC,EACpG,CAACH,QAAQ,EAAEE,UAAU,EAAEC,SAAS,CAAC,CAClC;EAED,MAAMO,gBAAgB,GAAG,CAAyBT,sBAAAA,EAAAA,SAAS,EAAE,CAACU,IAAI,EAAE;EACpE,MAAMC,YAAY,GAAG,eAAe;EAEpC,OACEC,GAAK,CAAA,KAAA,EAAA;AAAAZ,IAAAA,SAAS,EAAES,gBAAgB;cAC9BG,GACE,CAAA,KAAA,EAAAC,MAAA,CAAAC,MAAA,CAAA;AAAAC,MAAAA,GAAG,EAAEV,MAAM;MACXW,GAAG,EAAEjB,QAAQ,IAAI,EAAE;AACnBC,MAAAA,SAAS,EAAEW;KAAY,EACnBR,KAAK,CAAA;AAEP,GAAA,CAAA;AAEV;;;;"}

package/dist/react/components/badge/index.cjs.js

@@ -0,0 +1,97 @@
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var useColorScheme = require('../../hooks/useColorScheme.cjs.js');
+
+const Badge = _a => {
+  var _b;
+  var {
+      children,
+      variant = 'default',
+      color,
+      colorLight,
+      colorDark,
+      size = 'sm',
+      borderRadius,
+      className = '',
+      onClick
+    } = _a,
+    props = tslib.__rest(_a, ["children", "variant", "color", "colorLight", "colorDark", "size", "borderRadius", "className", "onClick"]);
+  const effectiveColor = (_b = useColorScheme.useColorScheme(color, colorLight, colorDark)) !== null && _b !== void 0 ? _b : 'blue';
+  const baseClasses = 'inline-flex items-center justify-center font-medium transition-colors';
+  // Size classes with default border radius
+  const sizeClasses = {
+    xxs: 'px-1 py-1 text-xs gap-2 rounded-full',
+    xs: 'px-[0.5rem] py-[0.25rem] text-xs rounded-full',
+    sm: 'px-[2.125rem] py-[0.625rem] text-xs rounded-full',
+    xl: 'px-[2.25rem] py-4 text-lg rounded-full'
+  };
+  // Border radius classes (overrides size border radius)
+  const borderRadiusClasses = {
+    xs: 'rounded-[0.25rem]'
+  };
+  // Color and variant combination classes
+  const getVariantClasses = () => {
+    const colorMap = {
+      blue: {
+        default: 'text-[#4C7EFF]',
+        flat: 'bg-[rgba(76,126,255,0.15)] text-[#4C7EFF]',
+        solid: 'bg-[#4C7EFF] text-white',
+        bordered: 'outline outline-1 outline-[#4C7EFF] text-[#4C7EFF]'
+      },
+      white: {
+        default: 'text-white',
+        flat: 'bg-[rgba(255,255,255,0.15)] text-white',
+        solid: 'bg-white text-[#0C1C33]',
+        bordered: 'outline outline-1 outline-white text-white'
+      },
+      gray: {
+        default: 'text-[#0C1C33]',
+        flat: 'bg-[rgba(12,28,51,0.15)] text-[#0C1C33]',
+        solid: 'bg-[#0C1C33] text-white',
+        bordered: 'outline outline-1 outline-[#0C1C33] text-[#0C1C33]'
+      },
+      'light-gray': {
+        default: 'text-[#6B7280]',
+        flat: 'bg-[#0C1C33]/5 text-[#0C1C33]',
+        solid: 'bg-[#0C1C33]/15 text-[#0C1C33]',
+        bordered: 'outline outline-1 outline-[#6B7280] text-[#6B7280]'
+      },
+      turquoise: {
+        default: 'text-[#60F6D2]',
+        flat: 'bg-[rgba(96,246,210,0.15)] text-[#60F6D2]',
+        solid: 'bg-[#60F6D2] text-[#0C1C33]',
+        bordered: 'outline outline-1 outline-[#60F6D2] text-[#60F6D2]'
+      },
+      red: {
+        default: 'text-[#CD2E00]',
+        flat: 'bg-[rgba(205,46,0,0.15)] text-[#CD2E00]',
+        solid: 'bg-[#CD2E00] text-white',
+        bordered: 'outline outline-1 outline-[#CD2E00] text-[#CD2E00]'
+      },
+      orange: {
+        default: 'text-[#F98F12]',
+        flat: 'bg-[rgba(249,143,18,0.15)] text-[#F98F12]',
+        solid: 'bg-[#F98F12] text-white',
+        bordered: 'outline outline-1 outline-[#F98F12] text-[#F98F12]'
+      }
+    };
+    return colorMap[effectiveColor][variant];
+  };
+  const classes = [baseClasses, sizeClasses[size], getVariantClasses(), borderRadius && borderRadiusClasses[borderRadius], className].filter(Boolean).join(' ');
+  return jsxRuntime.jsx("span", Object.assign({
+    className: classes,
+    onClick: onClick
+  }, props, {
+    children: children
+  }));
+};
+
+exports.Badge = Badge;
+exports.default = Badge;
+//# sourceMappingURL=index.cjs.js.map

package/dist/react/components/badge/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/badge/index.tsx"],"sourcesContent":["import React from 'react';\nimport { useColorScheme } from '../../hooks/useColorScheme'\n\ntype BadgeColor = 'blue' | 'white' | 'gray' | 'light-gray' | 'turquoise' | 'red' | 'orange'\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Content of the badge\n   */\n  children: React.ReactNode;\n\n  /**\n   * Visual style variant\n   */\n  variant?: 'default' | 'flat' | 'solid' | 'bordered';\n\n  /**\n   * Color theme\n   */\n  color?: BadgeColor;\n\n  /**\n   * Color override for light theme\n   */\n  colorLight?: BadgeColor;\n\n  /**\n   * Color override for dark theme\n   */\n  colorDark?: BadgeColor;\n\n  /**\n   * Size of the badge\n   */\n  size?: 'xxs' | 'xs' | 'sm' | 'xl';\n\n  /**\n   * Border radius variant\n   */\n  borderRadius?: 'xs';\n\n  /**\n   * Additional CSS class name\n   */\n  className?: string;\n\n  /**\n   * Click handler\n   */\n  onClick?: React.MouseEventHandler<HTMLSpanElement>;\n}\n\nexport const Badge: React.FC<BadgeProps> = ({\n  children,\n  variant = 'default',\n  color,\n  colorLight,\n  colorDark,\n  size = 'sm',\n  borderRadius,\n  className = '',\n  onClick,\n  ...props\n}) => {\n  const effectiveColor = useColorScheme(color, colorLight, colorDark) ?? 'blue'\n  const baseClasses = 'inline-flex items-center justify-center font-medium transition-colors';\n  \n  // Size classes with default border radius\n  const sizeClasses = {\n    xxs: 'px-1 py-1 text-xs gap-2 rounded-full',\n    xs: 'px-[0.5rem] py-[0.25rem] text-xs rounded-full',\n    sm: 'px-[2.125rem] py-[0.625rem] text-xs rounded-full',\n    xl: 'px-[2.25rem] py-4 text-lg rounded-full',\n  }\n\n  // Border radius classes (overrides size border radius)\n  const borderRadiusClasses = {\n    xs: 'rounded-[0.25rem]',\n  }\n  \n  // Color and variant combination classes\n  const getVariantClasses = () => {\n    const colorMap = {\n      blue: {\n        default: 'text-[#4C7EFF]',\n        flat: 'bg-[rgba(76,126,255,0.15)] text-[#4C7EFF]',\n        solid: 'bg-[#4C7EFF] text-white',\n        bordered: 'outline outline-1 outline-[#4C7EFF] text-[#4C7EFF]',\n      },\n      white: {\n        default: 'text-white',\n        flat: 'bg-[rgba(255,255,255,0.15)] text-white',\n        solid: 'bg-white text-[#0C1C33]',\n        bordered: 'outline outline-1 outline-white text-white',\n      },\n      gray: {\n        default: 'text-[#0C1C33]',\n        flat: 'bg-[rgba(12,28,51,0.15)] text-[#0C1C33]',\n        solid: 'bg-[#0C1C33] text-white',\n        bordered: 'outline outline-1 outline-[#0C1C33] text-[#0C1C33]',\n      },\n      'light-gray': {\n        default: 'text-[#6B7280]',\n        flat: 'bg-[#0C1C33]/5 text-[#0C1C33]',\n        solid: 'bg-[#0C1C33]/15 text-[#0C1C33]',\n        bordered: 'outline outline-1 outline-[#6B7280] text-[#6B7280]',\n      },\n      turquoise: {\n        default: 'text-[#60F6D2]',\n        flat: 'bg-[rgba(96,246,210,0.15)] text-[#60F6D2]',\n        solid: 'bg-[#60F6D2] text-[#0C1C33]',\n        bordered: 'outline outline-1 outline-[#60F6D2] text-[#60F6D2]',\n      },\n      red: {\n        default: 'text-[#CD2E00]',\n        flat: 'bg-[rgba(205,46,0,0.15)] text-[#CD2E00]',\n        solid: 'bg-[#CD2E00] text-white',\n        bordered: 'outline outline-1 outline-[#CD2E00] text-[#CD2E00]',\n      },\n      orange: {\n        default: 'text-[#F98F12]',\n        flat: 'bg-[rgba(249,143,18,0.15)] text-[#F98F12]',\n        solid: 'bg-[#F98F12] text-white',\n        bordered: 'outline outline-1 outline-[#F98F12] text-[#F98F12]',\n      },\n    }\n    \n    return colorMap[effectiveColor][variant];\n  }\n  \n  const classes = [\n    baseClasses,\n    sizeClasses[size],\n    getVariantClasses(),\n    borderRadius && borderRadiusClasses[borderRadius],\n    className,\n  ].filter(Boolean).join(' ')\n  \n  return (\n    <span className={classes} onClick={onClick} {...props}>\n      {children}\n    </span>\n  )\n}\n\nexport default Badge\n"],"names":["Badge","_a","children","variant","color","colorLight","colorDark","size","borderRadius","className","onClick","props","__rest","effectiveColor","_b","useColorScheme","baseClasses","sizeClasses","xxs","xs","sm","xl","borderRadiusClasses","getVariantClasses","colorMap","blue","default","flat","solid","bordered","white","gray","turquoise","red","orange","classes","filter","Boolean","join","_jsx","Object","assign"],"mappings":"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"}