dash-ui-kit 1.0.94 → 2.1.0-dev

package/dist/react/components/badge/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+type BadgeColor = 'blue' | 'white' | 'gray' | 'light-gray' | 'turquoise' | 'red' | 'orange';
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     /**
      * Content of the badge
@@ -11,7 +12,15 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     /**
      * Color theme
      */
-    color?: 'blue' | 'white' | 'gray' | 'light-gray' | 'turquoise' | 'red' | 'orange';
+    color?: BadgeColor;
+    /**
+     * Color override for light theme
+     */
+    colorLight?: BadgeColor;
+    /**
+     * Color override for dark theme
+     */
+    colorDark?: BadgeColor;
     /**
      * Size of the badge
      */

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

@@ -0,0 +1,92 @@
+"use client";
+
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { useColorScheme } from '../../hooks/useColorScheme.esm.js';
+
+const Badge = _a => {
+  var _b;
+  var {
+      children,
+      variant = 'default',
+      color,
+      colorLight,
+      colorDark,
+      size = 'sm',
+      borderRadius,
+      className = '',
+      onClick
+    } = _a,
+    props = __rest(_a, ["children", "variant", "color", "colorLight", "colorDark", "size", "borderRadius", "className", "onClick"]);
+  const effectiveColor = (_b = 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 jsx("span", Object.assign({
+    className: classes,
+    onClick: onClick
+  }, props, {
+    children: children
+  }));
+};
+
+export { Badge, Badge as default };
+//# sourceMappingURL=index.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.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":";;;;;;AAoDaA,MAAAA,KAAK,GAA0BC,EAW3C,IAAI;;EAXuC,IAAA;MAC1CC,QAAQ;AACRC,MAAAA,OAAO,GAAG,SAAS;MACnBC,KAAK;MACLC,UAAU;MACVC,SAAS;AACTC,MAAAA,IAAI,GAAG,IAAI;MACXC,YAAY;AACZC,MAAAA,SAAS,GAAG,EAAE;AACdC,MAAAA;AAAO,KAAA,GAAAT,EAER;IADIU,KAAK,GAVkCC,MAAA,CAAAX,EAAA,EAAA,CAAA,UAAA,EAAA,SAAA,EAAA,OAAA,EAAA,YAAA,EAAA,WAAA,EAAA,MAAA,EAAA,cAAA,EAAA,WAAA,EAAA,SAAA,CAW3C,CADS;EAER,MAAMY,cAAc,GAAG,CAAAC,EAAA,GAAAC,cAAc,CAACX,KAAK,EAAEC,UAAU,EAAEC,SAAS,CAAC,MAAA,IAAA,IAAAQ,EAAA,KAAA,MAAA,GAAAA,EAAA,GAAI,MAAM;EAC7E,MAAME,WAAW,GAAG,uEAAuE;AAE3F;AACA,EAAA,MAAMC,WAAW,GAAG;AAClBC,IAAAA,GAAG,EAAE,sCAAsC;AAC3CC,IAAAA,EAAE,EAAE,+CAA+C;AACnDC,IAAAA,EAAE,EAAE,kDAAkD;AACtDC,IAAAA,EAAE,EAAE;GACL;AAED;AACA,EAAA,MAAMC,mBAAmB,GAAG;AAC1BH,IAAAA,EAAE,EAAE;GACL;AAED;EACA,MAAMI,iBAAiB,GAAGA,MAAK;AAC7B,IAAA,MAAMC,QAAQ,GAAG;AACfC,MAAAA,IAAI,EAAE;AACJC,QAAAA,OAAO,EAAE,gBAAgB;AACzBC,QAAAA,IAAI,EAAE,2CAA2C;AACjDC,QAAAA,KAAK,EAAE,yBAAyB;AAChCC,QAAAA,QAAQ,EAAE;OACX;AACDC,MAAAA,KAAK,EAAE;AACLJ,QAAAA,OAAO,EAAE,YAAY;AACrBC,QAAAA,IAAI,EAAE,wCAAwC;AAC9CC,QAAAA,KAAK,EAAE,yBAAyB;AAChCC,QAAAA,QAAQ,EAAE;OACX;AACDE,MAAAA,IAAI,EAAE;AACJL,QAAAA,OAAO,EAAE,gBAAgB;AACzBC,QAAAA,IAAI,EAAE,yCAAyC;AAC/CC,QAAAA,KAAK,EAAE,yBAAyB;AAChCC,QAAAA,QAAQ,EAAE;OACX;AACD,MAAA,YAAY,EAAE;AACZH,QAAAA,OAAO,EAAE,gBAAgB;AACzBC,QAAAA,IAAI,EAAE,+BAA+B;AACrCC,QAAAA,KAAK,EAAE,gCAAgC;AACvCC,QAAAA,QAAQ,EAAE;OACX;AACDG,MAAAA,SAAS,EAAE;AACTN,QAAAA,OAAO,EAAE,gBAAgB;AACzBC,QAAAA,IAAI,EAAE,2CAA2C;AACjDC,QAAAA,KAAK,EAAE,6BAA6B;AACpCC,QAAAA,QAAQ,EAAE;OACX;AACDI,MAAAA,GAAG,EAAE;AACHP,QAAAA,OAAO,EAAE,gBAAgB;AACzBC,QAAAA,IAAI,EAAE,yCAAyC;AAC/CC,QAAAA,KAAK,EAAE,yBAAyB;AAChCC,QAAAA,QAAQ,EAAE;OACX;AACDK,MAAAA,MAAM,EAAE;AACNR,QAAAA,OAAO,EAAE,gBAAgB;AACzBC,QAAAA,IAAI,EAAE,2CAA2C;AACjDC,QAAAA,KAAK,EAAE,yBAAyB;AAChCC,QAAAA,QAAQ,EAAE;AACX;KACF;AAED,IAAA,OAAOL,QAAQ,CAACX,cAAc,CAAC,CAACV,OAAO,CAAC;GACzC;AAED,EAAA,MAAMgC,OAAO,GAAG,CACdnB,WAAW,EACXC,WAAW,CAACV,IAAI,CAAC,EACjBgB,iBAAiB,EAAE,EACnBf,YAAY,IAAIc,mBAAmB,CAACd,YAAY,CAAC,EACjDC,SAAS,CACV,CAAC2B,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;AAE3B,EAAA,OACEC,GAAA,CAAA,MAAA,EAAAC,MAAA,CAAAC,MAAA,CAAA;AAAMhC,IAAAA,SAAS,EAAE0B,OAAO;AAAEzB,IAAAA,OAAO,EAAEA;KAAaC,KAAK,EAAA;AAAAT,IAAAA,QAAA,EAClDA;AAAQ,GAAA,CAAA,CACJ;AAEX;;;;"}

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

@@ -0,0 +1,100 @@
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var classVarianceAuthority = require('class-variance-authority');
+var ThemeContext = require('../../contexts/ThemeContext.cjs.js');
+
+const bigNumberStyles = classVarianceAuthority.cva('inline-flex whitespace-nowrap gap-1', {
+  variants: {
+    theme: {
+      light: 'text-gray-900',
+      dark: 'text-gray-100'
+    }
+  },
+  defaultVariants: {
+    theme: 'light'
+  }
+});
+/**
+ * Splits a numeric string into groups of three characters for display.
+ * Supports two variants:
+ * - `space`: groups separated by gap
+ * - `comma`: groups separated by commas, with decimal part after `.`
+ * Supports light/dark theme.
+ */
+const BigNumber = ({
+  children,
+  variant = 'space',
+  className = '',
+  decimalPointSpacing = -2
+}) => {
+  const {
+    theme
+  } = ThemeContext.useTheme();
+  const decimalPointStyle = {
+    marginLeft: `${decimalPointSpacing}px`,
+    marginRight: `${decimalPointSpacing}px`
+  };
+  if (children === undefined || children === null) return null;
+  const str = children.toString();
+  if (variant === 'space') {
+    // Split into integer and decimal parts
+    const [intPart, fracPart] = str.split('.');
+    // group digits every 3, right to left (only for integer part)
+    const groups = intPart.split('').reverse().reduce((acc, char, idx) => {
+      if (idx % 3 === 0) acc.unshift('');
+      acc[0] = char + acc[0];
+      return acc;
+    }, []);
+    return jsxRuntime.jsxs("span", {
+      className: `${bigNumberStyles({
+        theme
+      })} ${className}`,
+      children: [groups.map((grp, i) => jsxRuntime.jsx("span", {
+        children: grp
+      }, i)), fracPart != null && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx("span", {
+          style: decimalPointStyle,
+          children: "."
+        }), jsxRuntime.jsx("span", {
+          children: fracPart
+        })]
+      })]
+    });
+  } else {
+    // comma variant
+    const [intPart, fracPart] = str.split('.');
+    const groups = intPart.split('').reverse().reduce((acc, char, idx) => {
+      if (idx % 3 === 0) acc.unshift('');
+      acc[0] = char + acc[0];
+      return acc;
+    }, []);
+    return jsxRuntime.jsxs("span", {
+      className: `${bigNumberStyles({
+        theme
+      })} ${className}`,
+      children: [groups.map((grp, i) => jsxRuntime.jsxs("span", {
+        children: [jsxRuntime.jsx("span", {
+          children: grp
+        }), i < groups.length - 1 && jsxRuntime.jsx("span", {
+          children: ","
+        })]
+      }, i)), fracPart != null && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx("span", {
+          style: decimalPointStyle,
+          children: "."
+        }), jsxRuntime.jsx("span", {
+          children: fracPart
+        })]
+      })]
+    });
+  }
+};
+
+exports.BigNumber = BigNumber;
+exports.default = BigNumber;
+//# sourceMappingURL=index.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/bigNumber/index.tsx"],"sourcesContent":["import React from 'react'\nimport { cva } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\n\nexport type BigNumberVariant = 'space' | 'comma'\n\nexport interface BigNumberProps {\n  /** The numeric value (or string) to format. */\n  children?: number | string | null\n  /** Use non-breaking space groups or comma groups. */\n  variant?: BigNumberVariant\n  /** Extra class names to apply to the wrapper. Use gap-* classes for spacing between groups. */\n  className?: string\n  /** Horizontal spacing (in pixels) around the decimal point. Negative values reduce spacing. @default -2 */\n  decimalPointSpacing?: number\n}\n\nconst bigNumberStyles = cva(\n  'inline-flex whitespace-nowrap gap-1',\n  {\n    variants: {\n      theme: {\n        light: 'text-gray-900',\n        dark: 'text-gray-100'\n      }\n    },\n    defaultVariants: {\n      theme: 'light'\n    }\n  }\n)\n\n/**\n * Splits a numeric string into groups of three characters for display.\n * Supports two variants:\n * - `space`: groups separated by gap\n * - `comma`: groups separated by commas, with decimal part after `.`\n * Supports light/dark theme.\n */\nexport const BigNumber: React.FC<BigNumberProps> = ({ children, variant = 'space', className = '', decimalPointSpacing = -2 }) => {\n  const { theme } = useTheme()\n\n  const decimalPointStyle: React.CSSProperties = {\n    marginLeft: `${decimalPointSpacing}px`,\n    marginRight: `${decimalPointSpacing}px`\n  }\n\n  if (children === undefined || children === null) return null\n  const str = children.toString()\n\n  if (variant === 'space') {\n    // Split into integer and decimal parts\n    const [intPart, fracPart] = str.split('.')\n\n    // group digits every 3, right to left (only for integer part)\n    const groups = intPart\n      .split('')\n      .reverse()\n      .reduce<string[]>((acc, char, idx) => {\n        if (idx % 3 === 0) acc.unshift('')\n        acc[0] = char + acc[0]\n        return acc\n      }, [])\n\n    return (\n      <span className={`${bigNumberStyles({ theme })} ${className}`}>\n        {groups.map((grp, i) => (\n          <span key={i}>{grp}</span>\n        ))}\n        {fracPart != null && (\n          <>\n            <span style={decimalPointStyle}>.</span>\n            <span>{fracPart}</span>\n          </>\n        )}\n      </span>\n    )\n  } else {\n    // comma variant\n    const [intPart, fracPart] = str.split('.')\n    const groups = intPart\n      .split('')\n      .reverse()\n      .reduce<string[]>((acc, char, idx) => {\n        if (idx % 3 === 0) acc.unshift('')\n        acc[0] = char + acc[0]\n        return acc\n      }, [])\n\n    return (\n      <span className={`${bigNumberStyles({ theme })} ${className}`}>\n        {groups.map((grp, i) => (\n          <span key={i}>\n            <span>{grp}</span>\n            {i < groups.length - 1 && <span>,</span>}\n          </span>\n        ))}\n        {fracPart != null && (\n          <>\n            <span style={decimalPointStyle}>.</span>\n            <span>{fracPart}</span>\n          </>\n        )}\n      </span>\n    )\n  }\n}\n\nexport default BigNumber "],"names":["bigNumberStyles","cva","variants","theme","light","dark","defaultVariants","BigNumber","children","variant","className","decimalPointSpacing","useTheme","decimalPointStyle","marginLeft","marginRight","undefined","str","toString","intPart","fracPart","split","groups","reverse","reduce","acc","char","idx","unshift","_jsxs","map","grp","i","_jsx","_Fragment","style","length"],"mappings":"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"}

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

@@ -0,0 +1,95 @@
+"use client";
+
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import { useTheme } from '../../contexts/ThemeContext.esm.js';
+
+const bigNumberStyles = cva('inline-flex whitespace-nowrap gap-1', {
+  variants: {
+    theme: {
+      light: 'text-gray-900',
+      dark: 'text-gray-100'
+    }
+  },
+  defaultVariants: {
+    theme: 'light'
+  }
+});
+/**
+ * Splits a numeric string into groups of three characters for display.
+ * Supports two variants:
+ * - `space`: groups separated by gap
+ * - `comma`: groups separated by commas, with decimal part after `.`
+ * Supports light/dark theme.
+ */
+const BigNumber = ({
+  children,
+  variant = 'space',
+  className = '',
+  decimalPointSpacing = -2
+}) => {
+  const {
+    theme
+  } = useTheme();
+  const decimalPointStyle = {
+    marginLeft: `${decimalPointSpacing}px`,
+    marginRight: `${decimalPointSpacing}px`
+  };
+  if (children === undefined || children === null) return null;
+  const str = children.toString();
+  if (variant === 'space') {
+    // Split into integer and decimal parts
+    const [intPart, fracPart] = str.split('.');
+    // group digits every 3, right to left (only for integer part)
+    const groups = intPart.split('').reverse().reduce((acc, char, idx) => {
+      if (idx % 3 === 0) acc.unshift('');
+      acc[0] = char + acc[0];
+      return acc;
+    }, []);
+    return jsxs("span", {
+      className: `${bigNumberStyles({
+        theme
+      })} ${className}`,
+      children: [groups.map((grp, i) => jsx("span", {
+        children: grp
+      }, i)), fracPart != null && jsxs(Fragment, {
+        children: [jsx("span", {
+          style: decimalPointStyle,
+          children: "."
+        }), jsx("span", {
+          children: fracPart
+        })]
+      })]
+    });
+  } else {
+    // comma variant
+    const [intPart, fracPart] = str.split('.');
+    const groups = intPart.split('').reverse().reduce((acc, char, idx) => {
+      if (idx % 3 === 0) acc.unshift('');
+      acc[0] = char + acc[0];
+      return acc;
+    }, []);
+    return jsxs("span", {
+      className: `${bigNumberStyles({
+        theme
+      })} ${className}`,
+      children: [groups.map((grp, i) => jsxs("span", {
+        children: [jsx("span", {
+          children: grp
+        }), i < groups.length - 1 && jsx("span", {
+          children: ","
+        })]
+      }, i)), fracPart != null && jsxs(Fragment, {
+        children: [jsx("span", {
+          style: decimalPointStyle,
+          children: "."
+        }), jsx("span", {
+          children: fracPart
+        })]
+      })]
+    });
+  }
+};
+
+export { BigNumber, BigNumber as default };
+//# sourceMappingURL=index.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/bigNumber/index.tsx"],"sourcesContent":["import React from 'react'\nimport { cva } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\n\nexport type BigNumberVariant = 'space' | 'comma'\n\nexport interface BigNumberProps {\n  /** The numeric value (or string) to format. */\n  children?: number | string | null\n  /** Use non-breaking space groups or comma groups. */\n  variant?: BigNumberVariant\n  /** Extra class names to apply to the wrapper. Use gap-* classes for spacing between groups. */\n  className?: string\n  /** Horizontal spacing (in pixels) around the decimal point. Negative values reduce spacing. @default -2 */\n  decimalPointSpacing?: number\n}\n\nconst bigNumberStyles = cva(\n  'inline-flex whitespace-nowrap gap-1',\n  {\n    variants: {\n      theme: {\n        light: 'text-gray-900',\n        dark: 'text-gray-100'\n      }\n    },\n    defaultVariants: {\n      theme: 'light'\n    }\n  }\n)\n\n/**\n * Splits a numeric string into groups of three characters for display.\n * Supports two variants:\n * - `space`: groups separated by gap\n * - `comma`: groups separated by commas, with decimal part after `.`\n * Supports light/dark theme.\n */\nexport const BigNumber: React.FC<BigNumberProps> = ({ children, variant = 'space', className = '', decimalPointSpacing = -2 }) => {\n  const { theme } = useTheme()\n\n  const decimalPointStyle: React.CSSProperties = {\n    marginLeft: `${decimalPointSpacing}px`,\n    marginRight: `${decimalPointSpacing}px`\n  }\n\n  if (children === undefined || children === null) return null\n  const str = children.toString()\n\n  if (variant === 'space') {\n    // Split into integer and decimal parts\n    const [intPart, fracPart] = str.split('.')\n\n    // group digits every 3, right to left (only for integer part)\n    const groups = intPart\n      .split('')\n      .reverse()\n      .reduce<string[]>((acc, char, idx) => {\n        if (idx % 3 === 0) acc.unshift('')\n        acc[0] = char + acc[0]\n        return acc\n      }, [])\n\n    return (\n      <span className={`${bigNumberStyles({ theme })} ${className}`}>\n        {groups.map((grp, i) => (\n          <span key={i}>{grp}</span>\n        ))}\n        {fracPart != null && (\n          <>\n            <span style={decimalPointStyle}>.</span>\n            <span>{fracPart}</span>\n          </>\n        )}\n      </span>\n    )\n  } else {\n    // comma variant\n    const [intPart, fracPart] = str.split('.')\n    const groups = intPart\n      .split('')\n      .reverse()\n      .reduce<string[]>((acc, char, idx) => {\n        if (idx % 3 === 0) acc.unshift('')\n        acc[0] = char + acc[0]\n        return acc\n      }, [])\n\n    return (\n      <span className={`${bigNumberStyles({ theme })} ${className}`}>\n        {groups.map((grp, i) => (\n          <span key={i}>\n            <span>{grp}</span>\n            {i < groups.length - 1 && <span>,</span>}\n          </span>\n        ))}\n        {fracPart != null && (\n          <>\n            <span style={decimalPointStyle}>.</span>\n            <span>{fracPart}</span>\n          </>\n        )}\n      </span>\n    )\n  }\n}\n\nexport default BigNumber "],"names":["bigNumberStyles","cva","variants","theme","light","dark","defaultVariants","BigNumber","children","variant","className","decimalPointSpacing","useTheme","decimalPointStyle","marginLeft","marginRight","undefined","str","toString","intPart","fracPart","split","groups","reverse","reduce","acc","char","idx","unshift","_jsxs","map","grp","i","_jsx","_Fragment","style","length"],"mappings":";;;;;;AAiBA,MAAMA,eAAe,GAAGC,GAAG,CACzB,qCAAqC,EACrC;AACEC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,eAAe;AACtBC,MAAAA,IAAI,EAAE;AACP;GACF;AACDC,EAAAA,eAAe,EAAE;AACfH,IAAAA,KAAK,EAAE;AACR;AACF,CAAA,CACF;AAED;;;;;;AAMG;AACI,MAAMI,SAAS,GAA6BA,CAAC;EAAEC,QAAQ;AAAEC,EAAAA,OAAO,GAAG,OAAO;AAAEC,EAAAA,SAAS,GAAG,EAAE;AAAEC,EAAAA,mBAAmB,GAAG;AAAI,CAAA,KAAI;EAC/H,MAAM;AAAER,IAAAA;GAAO,GAAGS,QAAQ,EAAE;AAE5B,EAAA,MAAMC,iBAAiB,GAAwB;IAC7CC,UAAU,EAAE,CAAGH,EAAAA,mBAAmB,CAAI,EAAA,CAAA;IACtCI,WAAW,EAAE,GAAGJ,mBAAmB,CAAA,EAAA;GACpC;EAED,IAAIH,QAAQ,KAAKQ,SAAS,IAAIR,QAAQ,KAAK,IAAI,EAAE,OAAO,IAAI;AAC5D,EAAA,MAAMS,GAAG,GAAGT,QAAQ,CAACU,QAAQ,EAAE;EAE/B,IAAIT,OAAO,KAAK,OAAO,EAAE;AACvB;IACA,MAAM,CAACU,OAAO,EAAEC,QAAQ,CAAC,GAAGH,GAAG,CAACI,KAAK,CAAC,GAAG,CAAC;AAE1C;IACA,MAAMC,MAAM,GAAGH,OAAO,CACnBE,KAAK,CAAC,EAAE,CAAC,CACTE,OAAO,EAAE,CACTC,MAAM,CAAW,CAACC,GAAG,EAAEC,IAAI,EAAEC,GAAG,KAAI;MACnC,IAAIA,GAAG,GAAG,CAAC,KAAK,CAAC,EAAEF,GAAG,CAACG,OAAO,CAAC,EAAE,CAAC;MAClCH,GAAG,CAAC,CAAC,CAAC,GAAGC,IAAI,GAAGD,GAAG,CAAC,CAAC,CAAC;AACtB,MAAA,OAAOA,GAAG;KACX,EAAE,EAAE,CAAC;IAER,OACEI,IAAM,CAAA,MAAA,EAAA;MAAAnB,SAAS,EAAE,CAAGV,EAAAA,eAAe,CAAC;AAAEG,QAAAA;OAAO,CAAC,CAAIO,CAAAA,EAAAA,SAAS,CAAE,CAAA;AAAAF,MAAAA,QAAA,EAAA,CAC1Dc,MAAM,CAACQ,GAAG,CAAC,CAACC,GAAG,EAAEC,CAAC,KACjBC;kBAAeF;AAAG,OAAA,EAAPC,CAAC,CACb,CAAC,EACDZ,QAAQ,IAAI,IAAI,IACfS,IAAA,CAAAK,QAAA,EAAA;AAAA1B,QAAAA,QAAA,EAAA,CACEyB;AAAME,UAAAA,KAAK,EAAEtB,iBAAiB;AAAAL,UAAAA,QAAA,EAAA;AAAA,SAAA,CAAU,EACxCyB,GAAA,CAAA,MAAA,EAAA;AAAAzB,UAAAA,QAAA,EAAOY;AAAQ,SAAA,CAAQ;AACtB,OAAA,CACJ;AACI,KAAA,CAAA;AAEX,GAAC,MAAM;AACL;IACA,MAAM,CAACD,OAAO,EAAEC,QAAQ,CAAC,GAAGH,GAAG,CAACI,KAAK,CAAC,GAAG,CAAC;IAC1C,MAAMC,MAAM,GAAGH,OAAO,CACnBE,KAAK,CAAC,EAAE,CAAC,CACTE,OAAO,EAAE,CACTC,MAAM,CAAW,CAACC,GAAG,EAAEC,IAAI,EAAEC,GAAG,KAAI;MACnC,IAAIA,GAAG,GAAG,CAAC,KAAK,CAAC,EAAEF,GAAG,CAACG,OAAO,CAAC,EAAE,CAAC;MAClCH,GAAG,CAAC,CAAC,CAAC,GAAGC,IAAI,GAAGD,GAAG,CAAC,CAAC,CAAC;AACtB,MAAA,OAAOA,GAAG;KACX,EAAE,EAAE,CAAC;IAER,OACEI,IAAA,CAAA,MAAA,EAAA;MAAMnB,SAAS,EAAE,CAAGV,EAAAA,eAAe,CAAC;AAAEG,QAAAA;OAAO,CAAC,CAAIO,CAAAA,EAAAA,SAAS,CAAE,CAAA;AAAAF,MAAAA,QAAA,EAAA,CAC1Dc,MAAM,CAACQ,GAAG,CAAC,CAACC,GAAG,EAAEC,CAAC,KACjBH,IAAA,CAAA,MAAA,EAAA;AAAArB,QAAAA,QAAA,EAAA,CACEyB,GAAO,CAAA,MAAA,EAAA;AAAAzB,UAAAA,QAAA,EAAAuB;UAAW,EACjBC,CAAC,GAAGV,MAAM,CAACc,MAAM,GAAG,CAAC,IAAIH,GAAA,CAAA,MAAA,EAAA;AAAAzB,UAAAA,QAAA,EAAA;AAAA,SAAA,CAAc;AAF/B,OAAA,EAAAwB,CAAC,CAIb,CAAC,EACDZ,QAAQ,IAAI,IAAI,IACfS,IACE,CAAAK,QAAA,EAAA;AAAA1B,QAAAA,QAAA,EAAA,CAAAyB,GAAA,CAAA,MAAA,EAAA;AAAME,UAAAA,KAAK,EAAEtB,iBAAiB;AAAUL,UAAAA,QAAA,EAAA;AAAA,SAAA,CAAA,EACxCyB,GAAO,CAAA,MAAA,EAAA;AAAAzB,UAAAA,QAAA,EAAAY;AAAgB,SAAA,CAAA;AAAA,OAAA,CAE1B;AAAA,KAAA,CACI;AAEX;AACF;;;;"}