@raystack/apsara 0.48.5 → 0.49.1

package/dist/components/amount/amount.cjs

@@ -76,24 +76,46 @@ function isValidCurrency(currency) {
  * ```
  */
 const Amount = React.forwardRef(({ value = 0, currency = 'USD', locale = 'en-US', hideDecimals = false, currencyDisplay = 'symbol', minimumFractionDigits, maximumFractionDigits, groupDigits = true, valueInMinorUnits = true }, ref) => {
-    const validCurrency = isValidCurrency(currency) ? currency : 'USD';
-    if (validCurrency !== currency) {
-        console.warn(`Invalid currency code: ${currency}. Falling back to USD.`);
+    try {
+        if (typeof value === 'number' &&
+            Math.abs(value) > Number.MAX_SAFE_INTEGER) {
+            console.warn(`Warning: The number ${value} exceeds JavaScript's safe integer limit (${Number.MAX_SAFE_INTEGER}). ` +
+                'For large numbers, pass the value as a string to maintain precision.');
+        }
+        const validCurrency = isValidCurrency(currency) ? currency : 'USD';
+        if (validCurrency !== currency) {
+            console.warn(`Invalid currency code: ${currency}. Falling back to USD.`);
+        }
+        const decimals = getCurrencyDecimals(validCurrency);
+        // Handle minor units - use string manipulation for strings and Math.pow for numbers
+        const baseValue = valueInMinorUnits && decimals > 0
+            ? typeof value === 'string'
+                ? value.slice(0, -decimals) + '.' + value.slice(-decimals)
+                : value / Math.pow(10, decimals)
+            : value;
+        // Remove decimals if hideDecimals is true - handle string and number separately
+        // Note: Not all numbers passed is converted to string as methods like Math.trunc
+        // or toString cannot handle large numbers thus, we need to handle it separately (large numbers passed in value throws console warning).
+        const finalBaseValue = hideDecimals
+            ? typeof baseValue === 'string'
+                ? baseValue.split('.')[0]
+                : Math.trunc(baseValue)
+            : baseValue;
+        const formattedValue = new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency: validCurrency.toUpperCase(),
+            currencyDisplay,
+            minimumFractionDigits: hideDecimals ? 0 : minimumFractionDigits,
+            maximumFractionDigits: hideDecimals ? 0 : maximumFractionDigits,
+            useGrouping: groupDigits
+            // @ts-ignore - Handling large numbers as string or number, so we need to pass the value as string or number.
+        }).format(finalBaseValue);
+        return jsxRuntime.jsxRuntimeExports.jsx("span", { ref: ref, children: formattedValue });
+    }
+    catch (error) {
+        console.error('Error formatting amount:', error);
+        return jsxRuntime.jsxRuntimeExports.jsx("span", { ref: ref, children: value });
     }
-    const decimals = getCurrencyDecimals(validCurrency);
-    const baseValue = valueInMinorUnits
-        ? value / Math.pow(10, decimals)
-        : value;
-    const finalBaseValue = hideDecimals ? Math.trunc(baseValue) : baseValue;
-    const formattedValue = new Intl.NumberFormat(locale, {
-        style: 'currency',
-        currency: validCurrency.toUpperCase(),
-        currencyDisplay,
-        minimumFractionDigits: hideDecimals ? 0 : minimumFractionDigits,
-        maximumFractionDigits: hideDecimals ? 0 : maximumFractionDigits,
-        useGrouping: groupDigits
-    }).format(finalBaseValue);
-    return jsxRuntime.jsxRuntimeExports.jsx("span", { ref: ref, children: formattedValue });
 });
 Amount.displayName = 'Amount';
 

package/dist/components/amount/amount.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"amount.cjs","sources":["../../../components/amount/amount.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nexport interface AmountProps {\n  /**\n   * The monetary value to display\n   * @default 0\n   * @example\n   * valueInMinorUnits=true: 1299 => \"$12.99\"\n   * valueInMinorUnits=false: 12.99 => \"$12.99\"\n   */\n  value: number;\n\n  /**\n   * ISO 4217 currency code\n   * @default 'USD'\n   */\n  currency?: string;\n\n  /**\n   * Whether the value is in minor units (cents, paise, etc.)\n   * If true, the value will be converted based on the currency's decimal places\n   * If false, the value will be used as is\n   * @default true\n   * @example\n   * USD: 1299 => $12.99 (2 decimals)\n   * JPY: 1299 => ¥1,299 (0 decimals)\n   * BHD: 1299 => BHD 1.299 (3 decimals)\n   */\n  valueInMinorUnits?: boolean;\n\n  /**\n   * BCP 47 language tag\n   * @default 'en-US'\n   * @example 'en-US', 'de-DE', 'ja-JP'\n   */\n  locale?: string;\n\n  /**\n   * Truncates decimal places\n   * @default false\n   */\n  hideDecimals?: boolean;\n\n  /**\n   * Currency display format\n   * @default 'symbol'\n   * @example 'symbol' - $12.99, 'code' - USD 12.99, 'name' - 12.99 US Dollars\n   */\n  currencyDisplay?: 'symbol' | 'code' | 'name';\n\n  /**\n   * Number of minimum fraction digits\n   * @default undefined (uses currency's default)\n   */\n  minimumFractionDigits?: number;\n\n  /**\n   * Number of maximum fraction digits\n   * @default undefined (uses currency's default)\n   */\n  maximumFractionDigits?: number;\n\n  /**\n   * Group digits (e.g., thousand separators)\n   * @default true\n   */\n  groupDigits?: boolean;\n}\n\n/**\n * Get the number of decimal places for a currency\n */\nfunction getCurrencyDecimals(currency: string): number {\n  try {\n    const formatter = new Intl.NumberFormat('en', {\n      style: 'currency',\n      currency: currency.toUpperCase()\n    });\n\n    // Format a number and count the decimal places\n    const formatted = formatter.format(1); // Get string representation of 1 unit with currency symbol\n    const match = formatted.match(/\\.([\\d]+)/); // Extract the decimal part\n    return match ? match[1].length : 0;\n  } catch {\n    // Default to 2 decimal places\n    return 2;\n  }\n}\n\n/**\n * Check if a currency is valid\n */\nfunction isValidCurrency(currency: string): boolean {\n  try {\n    new Intl.NumberFormat('en', {\n      style: 'currency',\n      currency: currency.toUpperCase()\n    });\n    return true;\n  } catch {\n    return false;\n  }\n}\n\n/**\n * Amount component for displaying monetary values.\n * Automatically formats currencies using Intl.NumberFormat.\n * Inherits styling from parent Text component.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Text>\n *   Total: <Amount value={1299} />  // Shows as \"$12.99\"\n * </Text>\n *\n * // With different currency and locale\n * <Text>\n *   Prix: <Amount value={1299} currency=\"EUR\" locale=\"fr-FR\" />  // Shows as \"12,99 €\"\n * </Text>\n *\n * // Without decimals\n * <Text>\n *   Price: <Amount value={1299} hideDecimals />  // Shows as \"$12\"\n * </Text>\n *\n * // With currency code\n * <Text>\n *   Amount: <Amount value={1299} currencyDisplay=\"code\" />  // Shows as \"USD 12.99\"\n * </Text>\n *\n * // With value in major units\n * <Text>\n *   Amount: <Amount value={12.99} valueInMinorUnits={false} />  // Shows as \"$12.99\"\n * </Text>\n *\n * // With groupDigits (default is true)\n * <Text>\n *   Amount: <Amount value={129999999} groupDigits />  // Shows as \"$129,999,999.99\"\n * </Text>\n * ```\n */\nexport const Amount = forwardRef<HTMLSpanElement, AmountProps>(\n  (\n    {\n      value = 0,\n      currency = 'USD',\n      locale = 'en-US',\n      hideDecimals = false,\n      currencyDisplay = 'symbol',\n      minimumFractionDigits,\n      maximumFractionDigits,\n      groupDigits = true,\n      valueInMinorUnits = true\n    },\n    ref\n  ) => {\n    const validCurrency = isValidCurrency(currency) ? currency : 'USD';\n    if (validCurrency !== currency) {\n      console.warn(`Invalid currency code: ${currency}. Falling back to USD.`);\n    }\n\n    const decimals = getCurrencyDecimals(validCurrency);\n    const baseValue = valueInMinorUnits\n      ? value / Math.pow(10, decimals)\n      : value;\n    const finalBaseValue = hideDecimals ? Math.trunc(baseValue) : baseValue;\n\n    const formattedValue = new Intl.NumberFormat(locale, {\n      style: 'currency' as const,\n      currency: validCurrency.toUpperCase(),\n      currencyDisplay,\n      minimumFractionDigits: hideDecimals ? 0 : minimumFractionDigits,\n      maximumFractionDigits: hideDecimals ? 0 : maximumFractionDigits,\n      useGrouping: groupDigits\n    }).format(finalBaseValue);\n\n    return <span ref={ref}>{formattedValue}</span>;\n  }\n);\n\nAmount.displayName = 'Amount';\n"],"names":["forwardRef","_jsx"],"mappings":";;;;;AAqEA;;AAEG;AACH,SAAS,mBAAmB,CAAC,QAAgB,EAAA;AAC3C,IAAA,IAAI;QACF,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;AAC5C,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,QAAQ,EAAE,QAAQ,CAAC,WAAW,EAAE;AACjC,SAAA,CAAC,CAAC;;QAGH,MAAM,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACtC,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;AAC3C,QAAA,OAAO,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;KACpC;AAAC,IAAA,MAAM;;AAEN,QAAA,OAAO,CAAC,CAAC;KACV;AACH,CAAC;AAED;;AAEG;AACH,SAAS,eAAe,CAAC,QAAgB,EAAA;AACvC,IAAA,IAAI;AACF,QAAA,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;AAC1B,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,QAAQ,EAAE,QAAQ,CAAC,WAAW,EAAE;AACjC,SAAA,CAAC,CAAC;AACH,QAAA,OAAO,IAAI,CAAC;KACb;AAAC,IAAA,MAAM;AACN,QAAA,OAAO,KAAK,CAAC;KACd;AACH,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCG;AACU,MAAA,MAAM,GAAGA,gBAAU,CAC9B,CACE,EACE,KAAK,GAAG,CAAC,EACT,QAAQ,GAAG,KAAK,EAChB,MAAM,GAAG,OAAO,EAChB,YAAY,GAAG,KAAK,EACpB,eAAe,GAAG,QAAQ,EAC1B,qBAAqB,EACrB,qBAAqB,EACrB,WAAW,GAAG,IAAI,EAClB,iBAAiB,GAAG,IAAI,EACzB,EACD,GAAG,KACD;AACF,IAAA,MAAM,aAAa,GAAG,eAAe,CAAC,QAAQ,CAAC,GAAG,QAAQ,GAAG,KAAK,CAAC;AACnE,IAAA,IAAI,aAAa,KAAK,QAAQ,EAAE;AAC9B,QAAA,OAAO,CAAC,IAAI,CAAC,0BAA0B,QAAQ,CAAA,sBAAA,CAAwB,CAAC,CAAC;KAC1E;AAED,IAAA,MAAM,QAAQ,GAAG,mBAAmB,CAAC,aAAa,CAAC,CAAC;IACpD,MAAM,SAAS,GAAG,iBAAiB;UAC/B,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,QAAQ,CAAC;UAC9B,KAAK,CAAC;AACV,IAAA,MAAM,cAAc,GAAG,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;IAExE,MAAM,cAAc,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE;AACnD,QAAA,KAAK,EAAE,UAAmB;AAC1B,QAAA,QAAQ,EAAE,aAAa,CAAC,WAAW,EAAE;QACrC,eAAe;QACf,qBAAqB,EAAE,YAAY,GAAG,CAAC,GAAG,qBAAqB;QAC/D,qBAAqB,EAAE,YAAY,GAAG,CAAC,GAAG,qBAAqB;AAC/D,QAAA,WAAW,EAAE,WAAW;AACzB,KAAA,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;AAE1B,IAAA,OAAOC,2CAAM,GAAG,EAAE,GAAG,EAAG,QAAA,EAAA,cAAc,GAAQ,CAAC;AACjD,CAAC,EACD;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
+{"version":3,"file":"amount.cjs","sources":["../../../components/amount/amount.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nexport interface AmountProps {\n  /**\n   * The monetary value to display\n   * For large numbers (> 2^53), pass the value as string to maintain precision\n   * @default 0\n   * @example\n   * valueInMinorUnits=true: 1299 => \"$12.99\"\n   * valueInMinorUnits=false: 12.99 => \"$12.99\"\n   */\n  value: number | string;\n\n  /**\n   * ISO 4217 currency code\n   * @default 'USD'\n   */\n  currency?: string;\n\n  /**\n   * Whether the value is in minor units (cents, paise, etc.)\n   * If true, the value will be converted based on the currency's decimal places\n   * If false, the value will be used as is\n   * @default true\n   * @example\n   * USD: 1299 => $12.99 (2 decimals)\n   * JPY: 1299 => ¥1,299 (0 decimals)\n   * BHD: 1299 => BHD 1.299 (3 decimals)\n   */\n  valueInMinorUnits?: boolean;\n\n  /**\n   * BCP 47 language tag\n   * @default 'en-US'\n   * @example 'en-US', 'de-DE', 'ja-JP'\n   */\n  locale?: string;\n\n  /**\n   * Truncates decimal places\n   * @default false\n   */\n  hideDecimals?: boolean;\n\n  /**\n   * Currency display format\n   * @default 'symbol'\n   * @example 'symbol' - $12.99, 'code' - USD 12.99, 'name' - 12.99 US Dollars\n   */\n  currencyDisplay?: 'symbol' | 'code' | 'name';\n\n  /**\n   * Number of minimum fraction digits\n   * @default undefined (uses currency's default)\n   */\n  minimumFractionDigits?: number;\n\n  /**\n   * Number of maximum fraction digits\n   * @default undefined (uses currency's default)\n   */\n  maximumFractionDigits?: number;\n\n  /**\n   * Group digits (e.g., thousand separators)\n   * @default true\n   */\n  groupDigits?: boolean;\n}\n\n/**\n * Get the number of decimal places for a currency\n */\nfunction getCurrencyDecimals(currency: string): number {\n  try {\n    const formatter = new Intl.NumberFormat('en', {\n      style: 'currency',\n      currency: currency.toUpperCase()\n    });\n\n    // Format a number and count the decimal places\n    const formatted = formatter.format(1); // Get string representation of 1 unit with currency symbol\n    const match = formatted.match(/\\.([\\d]+)/); // Extract the decimal part\n    return match ? match[1].length : 0;\n  } catch {\n    // Default to 2 decimal places\n    return 2;\n  }\n}\n\n/**\n * Check if a currency is valid\n */\nfunction isValidCurrency(currency: string): boolean {\n  try {\n    new Intl.NumberFormat('en', {\n      style: 'currency',\n      currency: currency.toUpperCase()\n    });\n    return true;\n  } catch {\n    return false;\n  }\n}\n\n/**\n * Amount component for displaying monetary values.\n * Automatically formats currencies using Intl.NumberFormat.\n * Inherits styling from parent Text component.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Text>\n *   Total: <Amount value={1299} />  // Shows as \"$12.99\"\n * </Text>\n *\n * // With different currency and locale\n * <Text>\n *   Prix: <Amount value={1299} currency=\"EUR\" locale=\"fr-FR\" />  // Shows as \"12,99 €\"\n * </Text>\n *\n * // Without decimals\n * <Text>\n *   Price: <Amount value={1299} hideDecimals />  // Shows as \"$12\"\n * </Text>\n *\n * // With currency code\n * <Text>\n *   Amount: <Amount value={1299} currencyDisplay=\"code\" />  // Shows as \"USD 12.99\"\n * </Text>\n *\n * // With value in major units\n * <Text>\n *   Amount: <Amount value={12.99} valueInMinorUnits={false} />  // Shows as \"$12.99\"\n * </Text>\n *\n * // With groupDigits (default is true)\n * <Text>\n *   Amount: <Amount value={129999999} groupDigits />  // Shows as \"$129,999,999.99\"\n * </Text>\n * ```\n */\nexport const Amount = forwardRef<HTMLSpanElement, AmountProps>(\n  (\n    {\n      value = 0,\n      currency = 'USD',\n      locale = 'en-US',\n      hideDecimals = false,\n      currencyDisplay = 'symbol',\n      minimumFractionDigits,\n      maximumFractionDigits,\n      groupDigits = true,\n      valueInMinorUnits = true\n    },\n    ref\n  ) => {\n    try {\n      if (\n        typeof value === 'number' &&\n        Math.abs(value) > Number.MAX_SAFE_INTEGER\n      ) {\n        console.warn(\n          `Warning: The number ${value} exceeds JavaScript's safe integer limit (${Number.MAX_SAFE_INTEGER}). ` +\n            'For large numbers, pass the value as a string to maintain precision.'\n        );\n      }\n\n      const validCurrency = isValidCurrency(currency) ? currency : 'USD';\n      if (validCurrency !== currency) {\n        console.warn(\n          `Invalid currency code: ${currency}. Falling back to USD.`\n        );\n      }\n\n      const decimals = getCurrencyDecimals(validCurrency);\n\n      // Handle minor units - use string manipulation for strings and Math.pow for numbers\n      const baseValue =\n        valueInMinorUnits && decimals > 0\n          ? typeof value === 'string'\n            ? value.slice(0, -decimals) + '.' + value.slice(-decimals)\n            : value / Math.pow(10, decimals)\n          : value;\n\n      // Remove decimals if hideDecimals is true - handle string and number separately\n      // Note: Not all numbers passed is converted to string as methods like Math.trunc\n      // or toString cannot handle large numbers thus, we need to handle it separately (large numbers passed in value throws console warning).\n      const finalBaseValue = hideDecimals\n        ? typeof baseValue === 'string'\n          ? baseValue.split('.')[0]\n          : Math.trunc(baseValue)\n        : baseValue;\n\n      const formattedValue = new Intl.NumberFormat(locale, {\n        style: 'currency' as const,\n        currency: validCurrency.toUpperCase(),\n        currencyDisplay,\n        minimumFractionDigits: hideDecimals ? 0 : minimumFractionDigits,\n        maximumFractionDigits: hideDecimals ? 0 : maximumFractionDigits,\n        useGrouping: groupDigits\n        // @ts-ignore - Handling large numbers as string or number, so we need to pass the value as string or number.\n      }).format(finalBaseValue);\n\n      return <span ref={ref}>{formattedValue}</span>;\n    } catch (error) {\n      console.error('Error formatting amount:', error);\n      return <span ref={ref}>{value}</span>;\n    }\n  }\n);\n\nAmount.displayName = 'Amount';\n"],"names":["forwardRef","_jsx"],"mappings":"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"}

package/dist/components/amount/amount.d.ts

@@ -1,12 +1,13 @@
 export interface AmountProps {
     /**
      * The monetary value to display
+     * For large numbers (> 2^53), pass the value as string to maintain precision
      * @default 0
      * @example
      * valueInMinorUnits=true: 1299 => "$12.99"
      * valueInMinorUnits=false: 12.99 => "$12.99"
      */
-    value: number;
+    value: number | string;
     /**
      * ISO 4217 currency code
      * @default 'USD'

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

@@ -1 +1 @@
-{"version":3,"file":"amount.d.ts","sourceRoot":"","sources":["../../../components/amount/amount.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,WAAW;IAC1B;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;;;;OASG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAE7C;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAqCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,MAAM,yGAqClB,CAAC"}
+{"version":3,"file":"amount.d.ts","sourceRoot":"","sources":["../../../components/amount/amount.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,WAAW;IAC1B;;;;;;;OAOG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAEvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;;;;OASG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAE7C;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAqCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,MAAM,yGAoElB,CAAC"}

package/dist/components/amount/amount.js

@@ -74,24 +74,46 @@ function isValidCurrency(currency) {
  * ```
  */
 const Amount = forwardRef(({ value = 0, currency = 'USD', locale = 'en-US', hideDecimals = false, currencyDisplay = 'symbol', minimumFractionDigits, maximumFractionDigits, groupDigits = true, valueInMinorUnits = true }, ref) => {
-    const validCurrency = isValidCurrency(currency) ? currency : 'USD';
-    if (validCurrency !== currency) {
-        console.warn(`Invalid currency code: ${currency}. Falling back to USD.`);
+    try {
+        if (typeof value === 'number' &&
+            Math.abs(value) > Number.MAX_SAFE_INTEGER) {
+            console.warn(`Warning: The number ${value} exceeds JavaScript's safe integer limit (${Number.MAX_SAFE_INTEGER}). ` +
+                'For large numbers, pass the value as a string to maintain precision.');
+        }
+        const validCurrency = isValidCurrency(currency) ? currency : 'USD';
+        if (validCurrency !== currency) {
+            console.warn(`Invalid currency code: ${currency}. Falling back to USD.`);
+        }
+        const decimals = getCurrencyDecimals(validCurrency);
+        // Handle minor units - use string manipulation for strings and Math.pow for numbers
+        const baseValue = valueInMinorUnits && decimals > 0
+            ? typeof value === 'string'
+                ? value.slice(0, -decimals) + '.' + value.slice(-decimals)
+                : value / Math.pow(10, decimals)
+            : value;
+        // Remove decimals if hideDecimals is true - handle string and number separately
+        // Note: Not all numbers passed is converted to string as methods like Math.trunc
+        // or toString cannot handle large numbers thus, we need to handle it separately (large numbers passed in value throws console warning).
+        const finalBaseValue = hideDecimals
+            ? typeof baseValue === 'string'
+                ? baseValue.split('.')[0]
+                : Math.trunc(baseValue)
+            : baseValue;
+        const formattedValue = new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency: validCurrency.toUpperCase(),
+            currencyDisplay,
+            minimumFractionDigits: hideDecimals ? 0 : minimumFractionDigits,
+            maximumFractionDigits: hideDecimals ? 0 : maximumFractionDigits,
+            useGrouping: groupDigits
+            // @ts-ignore - Handling large numbers as string or number, so we need to pass the value as string or number.
+        }).format(finalBaseValue);
+        return jsxRuntimeExports.jsx("span", { ref: ref, children: formattedValue });
+    }
+    catch (error) {
+        console.error('Error formatting amount:', error);
+        return jsxRuntimeExports.jsx("span", { ref: ref, children: value });
     }
-    const decimals = getCurrencyDecimals(validCurrency);
-    const baseValue = valueInMinorUnits
-        ? value / Math.pow(10, decimals)
-        : value;
-    const finalBaseValue = hideDecimals ? Math.trunc(baseValue) : baseValue;
-    const formattedValue = new Intl.NumberFormat(locale, {
-        style: 'currency',
-        currency: validCurrency.toUpperCase(),
-        currencyDisplay,
-        minimumFractionDigits: hideDecimals ? 0 : minimumFractionDigits,
-        maximumFractionDigits: hideDecimals ? 0 : maximumFractionDigits,
-        useGrouping: groupDigits
-    }).format(finalBaseValue);
-    return jsxRuntimeExports.jsx("span", { ref: ref, children: formattedValue });
 });
 Amount.displayName = 'Amount';
 

package/dist/components/amount/amount.js.map

@@ -1 +1 @@
-{"version":3,"file":"amount.js","sources":["../../../components/amount/amount.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nexport interface AmountProps {\n  /**\n   * The monetary value to display\n   * @default 0\n   * @example\n   * valueInMinorUnits=true: 1299 => \"$12.99\"\n   * valueInMinorUnits=false: 12.99 => \"$12.99\"\n   */\n  value: number;\n\n  /**\n   * ISO 4217 currency code\n   * @default 'USD'\n   */\n  currency?: string;\n\n  /**\n   * Whether the value is in minor units (cents, paise, etc.)\n   * If true, the value will be converted based on the currency's decimal places\n   * If false, the value will be used as is\n   * @default true\n   * @example\n   * USD: 1299 => $12.99 (2 decimals)\n   * JPY: 1299 => ¥1,299 (0 decimals)\n   * BHD: 1299 => BHD 1.299 (3 decimals)\n   */\n  valueInMinorUnits?: boolean;\n\n  /**\n   * BCP 47 language tag\n   * @default 'en-US'\n   * @example 'en-US', 'de-DE', 'ja-JP'\n   */\n  locale?: string;\n\n  /**\n   * Truncates decimal places\n   * @default false\n   */\n  hideDecimals?: boolean;\n\n  /**\n   * Currency display format\n   * @default 'symbol'\n   * @example 'symbol' - $12.99, 'code' - USD 12.99, 'name' - 12.99 US Dollars\n   */\n  currencyDisplay?: 'symbol' | 'code' | 'name';\n\n  /**\n   * Number of minimum fraction digits\n   * @default undefined (uses currency's default)\n   */\n  minimumFractionDigits?: number;\n\n  /**\n   * Number of maximum fraction digits\n   * @default undefined (uses currency's default)\n   */\n  maximumFractionDigits?: number;\n\n  /**\n   * Group digits (e.g., thousand separators)\n   * @default true\n   */\n  groupDigits?: boolean;\n}\n\n/**\n * Get the number of decimal places for a currency\n */\nfunction getCurrencyDecimals(currency: string): number {\n  try {\n    const formatter = new Intl.NumberFormat('en', {\n      style: 'currency',\n      currency: currency.toUpperCase()\n    });\n\n    // Format a number and count the decimal places\n    const formatted = formatter.format(1); // Get string representation of 1 unit with currency symbol\n    const match = formatted.match(/\\.([\\d]+)/); // Extract the decimal part\n    return match ? match[1].length : 0;\n  } catch {\n    // Default to 2 decimal places\n    return 2;\n  }\n}\n\n/**\n * Check if a currency is valid\n */\nfunction isValidCurrency(currency: string): boolean {\n  try {\n    new Intl.NumberFormat('en', {\n      style: 'currency',\n      currency: currency.toUpperCase()\n    });\n    return true;\n  } catch {\n    return false;\n  }\n}\n\n/**\n * Amount component for displaying monetary values.\n * Automatically formats currencies using Intl.NumberFormat.\n * Inherits styling from parent Text component.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Text>\n *   Total: <Amount value={1299} />  // Shows as \"$12.99\"\n * </Text>\n *\n * // With different currency and locale\n * <Text>\n *   Prix: <Amount value={1299} currency=\"EUR\" locale=\"fr-FR\" />  // Shows as \"12,99 €\"\n * </Text>\n *\n * // Without decimals\n * <Text>\n *   Price: <Amount value={1299} hideDecimals />  // Shows as \"$12\"\n * </Text>\n *\n * // With currency code\n * <Text>\n *   Amount: <Amount value={1299} currencyDisplay=\"code\" />  // Shows as \"USD 12.99\"\n * </Text>\n *\n * // With value in major units\n * <Text>\n *   Amount: <Amount value={12.99} valueInMinorUnits={false} />  // Shows as \"$12.99\"\n * </Text>\n *\n * // With groupDigits (default is true)\n * <Text>\n *   Amount: <Amount value={129999999} groupDigits />  // Shows as \"$129,999,999.99\"\n * </Text>\n * ```\n */\nexport const Amount = forwardRef<HTMLSpanElement, AmountProps>(\n  (\n    {\n      value = 0,\n      currency = 'USD',\n      locale = 'en-US',\n      hideDecimals = false,\n      currencyDisplay = 'symbol',\n      minimumFractionDigits,\n      maximumFractionDigits,\n      groupDigits = true,\n      valueInMinorUnits = true\n    },\n    ref\n  ) => {\n    const validCurrency = isValidCurrency(currency) ? currency : 'USD';\n    if (validCurrency !== currency) {\n      console.warn(`Invalid currency code: ${currency}. Falling back to USD.`);\n    }\n\n    const decimals = getCurrencyDecimals(validCurrency);\n    const baseValue = valueInMinorUnits\n      ? value / Math.pow(10, decimals)\n      : value;\n    const finalBaseValue = hideDecimals ? Math.trunc(baseValue) : baseValue;\n\n    const formattedValue = new Intl.NumberFormat(locale, {\n      style: 'currency' as const,\n      currency: validCurrency.toUpperCase(),\n      currencyDisplay,\n      minimumFractionDigits: hideDecimals ? 0 : minimumFractionDigits,\n      maximumFractionDigits: hideDecimals ? 0 : maximumFractionDigits,\n      useGrouping: groupDigits\n    }).format(finalBaseValue);\n\n    return <span ref={ref}>{formattedValue}</span>;\n  }\n);\n\nAmount.displayName = 'Amount';\n"],"names":["_jsx"],"mappings":";;;AAqEA;;AAEG;AACH,SAAS,mBAAmB,CAAC,QAAgB,EAAA;AAC3C,IAAA,IAAI;QACF,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;AAC5C,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,QAAQ,EAAE,QAAQ,CAAC,WAAW,EAAE;AACjC,SAAA,CAAC,CAAC;;QAGH,MAAM,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACtC,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;AAC3C,QAAA,OAAO,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;KACpC;AAAC,IAAA,MAAM;;AAEN,QAAA,OAAO,CAAC,CAAC;KACV;AACH,CAAC;AAED;;AAEG;AACH,SAAS,eAAe,CAAC,QAAgB,EAAA;AACvC,IAAA,IAAI;AACF,QAAA,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;AAC1B,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,QAAQ,EAAE,QAAQ,CAAC,WAAW,EAAE;AACjC,SAAA,CAAC,CAAC;AACH,QAAA,OAAO,IAAI,CAAC;KACb;AAAC,IAAA,MAAM;AACN,QAAA,OAAO,KAAK,CAAC;KACd;AACH,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCG;AACU,MAAA,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,KAAK,GAAG,CAAC,EACT,QAAQ,GAAG,KAAK,EAChB,MAAM,GAAG,OAAO,EAChB,YAAY,GAAG,KAAK,EACpB,eAAe,GAAG,QAAQ,EAC1B,qBAAqB,EACrB,qBAAqB,EACrB,WAAW,GAAG,IAAI,EAClB,iBAAiB,GAAG,IAAI,EACzB,EACD,GAAG,KACD;AACF,IAAA,MAAM,aAAa,GAAG,eAAe,CAAC,QAAQ,CAAC,GAAG,QAAQ,GAAG,KAAK,CAAC;AACnE,IAAA,IAAI,aAAa,KAAK,QAAQ,EAAE;AAC9B,QAAA,OAAO,CAAC,IAAI,CAAC,0BAA0B,QAAQ,CAAA,sBAAA,CAAwB,CAAC,CAAC;KAC1E;AAED,IAAA,MAAM,QAAQ,GAAG,mBAAmB,CAAC,aAAa,CAAC,CAAC;IACpD,MAAM,SAAS,GAAG,iBAAiB;UAC/B,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,QAAQ,CAAC;UAC9B,KAAK,CAAC;AACV,IAAA,MAAM,cAAc,GAAG,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;IAExE,MAAM,cAAc,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE;AACnD,QAAA,KAAK,EAAE,UAAmB;AAC1B,QAAA,QAAQ,EAAE,aAAa,CAAC,WAAW,EAAE;QACrC,eAAe;QACf,qBAAqB,EAAE,YAAY,GAAG,CAAC,GAAG,qBAAqB;QAC/D,qBAAqB,EAAE,YAAY,GAAG,CAAC,GAAG,qBAAqB;AAC/D,QAAA,WAAW,EAAE,WAAW;AACzB,KAAA,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;AAE1B,IAAA,OAAOA,gCAAM,GAAG,EAAE,GAAG,EAAG,QAAA,EAAA,cAAc,GAAQ,CAAC;AACjD,CAAC,EACD;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
+{"version":3,"file":"amount.js","sources":["../../../components/amount/amount.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nexport interface AmountProps {\n  /**\n   * The monetary value to display\n   * For large numbers (> 2^53), pass the value as string to maintain precision\n   * @default 0\n   * @example\n   * valueInMinorUnits=true: 1299 => \"$12.99\"\n   * valueInMinorUnits=false: 12.99 => \"$12.99\"\n   */\n  value: number | string;\n\n  /**\n   * ISO 4217 currency code\n   * @default 'USD'\n   */\n  currency?: string;\n\n  /**\n   * Whether the value is in minor units (cents, paise, etc.)\n   * If true, the value will be converted based on the currency's decimal places\n   * If false, the value will be used as is\n   * @default true\n   * @example\n   * USD: 1299 => $12.99 (2 decimals)\n   * JPY: 1299 => ¥1,299 (0 decimals)\n   * BHD: 1299 => BHD 1.299 (3 decimals)\n   */\n  valueInMinorUnits?: boolean;\n\n  /**\n   * BCP 47 language tag\n   * @default 'en-US'\n   * @example 'en-US', 'de-DE', 'ja-JP'\n   */\n  locale?: string;\n\n  /**\n   * Truncates decimal places\n   * @default false\n   */\n  hideDecimals?: boolean;\n\n  /**\n   * Currency display format\n   * @default 'symbol'\n   * @example 'symbol' - $12.99, 'code' - USD 12.99, 'name' - 12.99 US Dollars\n   */\n  currencyDisplay?: 'symbol' | 'code' | 'name';\n\n  /**\n   * Number of minimum fraction digits\n   * @default undefined (uses currency's default)\n   */\n  minimumFractionDigits?: number;\n\n  /**\n   * Number of maximum fraction digits\n   * @default undefined (uses currency's default)\n   */\n  maximumFractionDigits?: number;\n\n  /**\n   * Group digits (e.g., thousand separators)\n   * @default true\n   */\n  groupDigits?: boolean;\n}\n\n/**\n * Get the number of decimal places for a currency\n */\nfunction getCurrencyDecimals(currency: string): number {\n  try {\n    const formatter = new Intl.NumberFormat('en', {\n      style: 'currency',\n      currency: currency.toUpperCase()\n    });\n\n    // Format a number and count the decimal places\n    const formatted = formatter.format(1); // Get string representation of 1 unit with currency symbol\n    const match = formatted.match(/\\.([\\d]+)/); // Extract the decimal part\n    return match ? match[1].length : 0;\n  } catch {\n    // Default to 2 decimal places\n    return 2;\n  }\n}\n\n/**\n * Check if a currency is valid\n */\nfunction isValidCurrency(currency: string): boolean {\n  try {\n    new Intl.NumberFormat('en', {\n      style: 'currency',\n      currency: currency.toUpperCase()\n    });\n    return true;\n  } catch {\n    return false;\n  }\n}\n\n/**\n * Amount component for displaying monetary values.\n * Automatically formats currencies using Intl.NumberFormat.\n * Inherits styling from parent Text component.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Text>\n *   Total: <Amount value={1299} />  // Shows as \"$12.99\"\n * </Text>\n *\n * // With different currency and locale\n * <Text>\n *   Prix: <Amount value={1299} currency=\"EUR\" locale=\"fr-FR\" />  // Shows as \"12,99 €\"\n * </Text>\n *\n * // Without decimals\n * <Text>\n *   Price: <Amount value={1299} hideDecimals />  // Shows as \"$12\"\n * </Text>\n *\n * // With currency code\n * <Text>\n *   Amount: <Amount value={1299} currencyDisplay=\"code\" />  // Shows as \"USD 12.99\"\n * </Text>\n *\n * // With value in major units\n * <Text>\n *   Amount: <Amount value={12.99} valueInMinorUnits={false} />  // Shows as \"$12.99\"\n * </Text>\n *\n * // With groupDigits (default is true)\n * <Text>\n *   Amount: <Amount value={129999999} groupDigits />  // Shows as \"$129,999,999.99\"\n * </Text>\n * ```\n */\nexport const Amount = forwardRef<HTMLSpanElement, AmountProps>(\n  (\n    {\n      value = 0,\n      currency = 'USD',\n      locale = 'en-US',\n      hideDecimals = false,\n      currencyDisplay = 'symbol',\n      minimumFractionDigits,\n      maximumFractionDigits,\n      groupDigits = true,\n      valueInMinorUnits = true\n    },\n    ref\n  ) => {\n    try {\n      if (\n        typeof value === 'number' &&\n        Math.abs(value) > Number.MAX_SAFE_INTEGER\n      ) {\n        console.warn(\n          `Warning: The number ${value} exceeds JavaScript's safe integer limit (${Number.MAX_SAFE_INTEGER}). ` +\n            'For large numbers, pass the value as a string to maintain precision.'\n        );\n      }\n\n      const validCurrency = isValidCurrency(currency) ? currency : 'USD';\n      if (validCurrency !== currency) {\n        console.warn(\n          `Invalid currency code: ${currency}. Falling back to USD.`\n        );\n      }\n\n      const decimals = getCurrencyDecimals(validCurrency);\n\n      // Handle minor units - use string manipulation for strings and Math.pow for numbers\n      const baseValue =\n        valueInMinorUnits && decimals > 0\n          ? typeof value === 'string'\n            ? value.slice(0, -decimals) + '.' + value.slice(-decimals)\n            : value / Math.pow(10, decimals)\n          : value;\n\n      // Remove decimals if hideDecimals is true - handle string and number separately\n      // Note: Not all numbers passed is converted to string as methods like Math.trunc\n      // or toString cannot handle large numbers thus, we need to handle it separately (large numbers passed in value throws console warning).\n      const finalBaseValue = hideDecimals\n        ? typeof baseValue === 'string'\n          ? baseValue.split('.')[0]\n          : Math.trunc(baseValue)\n        : baseValue;\n\n      const formattedValue = new Intl.NumberFormat(locale, {\n        style: 'currency' as const,\n        currency: validCurrency.toUpperCase(),\n        currencyDisplay,\n        minimumFractionDigits: hideDecimals ? 0 : minimumFractionDigits,\n        maximumFractionDigits: hideDecimals ? 0 : maximumFractionDigits,\n        useGrouping: groupDigits\n        // @ts-ignore - Handling large numbers as string or number, so we need to pass the value as string or number.\n      }).format(finalBaseValue);\n\n      return <span ref={ref}>{formattedValue}</span>;\n    } catch (error) {\n      console.error('Error formatting amount:', error);\n      return <span ref={ref}>{value}</span>;\n    }\n  }\n);\n\nAmount.displayName = 'Amount';\n"],"names":["_jsx"],"mappings":"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"}

package/dist/components/calendar/range-picker.cjs

@@ -5,26 +5,27 @@ var reactIcons_esm = require('../../node_modules/.pnpm/@radix-ui_react-icons@1.3
 var dayjs_min = require('../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/dayjs.min.cjs');
 var React = require('react');
 var flex = require('../flex/flex.cjs');
+var inputField = require('../input-field/input-field.cjs');
 var popover = require('../popover/popover.cjs');
 var calendar = require('./calendar.cjs');
 var calendar_module = require('./calendar.module.css.cjs');
-var inputField = require('../input-field/input-field.cjs');
 
-function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", inputFieldsProps = {}, calendarProps, onSelect = () => { }, value = {
+function RangePicker({ side = 'top', dateFormat = 'DD/MM/YYYY', inputFieldsProps = {}, calendarProps, onSelect = () => { }, value, defaultValue = {
     to: new Date(),
-    from: new Date(),
-}, pickerGroupClassName, children, showCalendarIcon = true, footer, timeZone, }) {
+    from: new Date()
+}, pickerGroupClassName, children, showCalendarIcon = true, footer, timeZone }) {
     const [showCalendar, setShowCalendar] = React.useState(false);
-    const [currentRangeField, setCurrentRangeField] = React.useState("from");
-    const [selectedRange, setSelectedRange] = React.useState(value);
-    const [currentMonth, setCurrentMonth] = React.useState(selectedRange?.from);
+    const [currentRangeField, setCurrentRangeField] = React.useState('from');
+    const [internalValue, setInternalValue] = React.useState(value ?? defaultValue);
+    const [currentMonth, setCurrentMonth] = React.useState(internalValue?.from);
+    const selectedRange = value ?? internalValue;
     const prevSelectedRangeRef = React.useRef(selectedRange);
     const startDate = selectedRange.from
         ? dayjs_min.default(selectedRange.from).format(dateFormat)
-        : "";
+        : '';
     const endDate = selectedRange.to
         ? dayjs_min.default(selectedRange.to).format(dateFormat)
-        : "";
+        : '';
     // Ensures two months are visible even when
     // current month is the last allowed month (endMonth).
     const computedDefaultMonth = React.useMemo(() => {
@@ -44,10 +45,10 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", inputFieldsProps
     const handleSelect = (range, selectedDay) => {
         // TODO: Remove custom logic and reuse the default logic from react-day-picker
         let newRange;
-        if (currentRangeField === "from") {
+        if (currentRangeField === 'from') {
             // First click - set from date and prepare for to date selection
             newRange = { from: selectedDay };
-            setCurrentRangeField("to");
+            setCurrentRangeField('to');
         }
         else {
             // Second click - setting to date
@@ -55,15 +56,15 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", inputFieldsProps
             if (dayjs_min.default(selectedDay).isBefore(dayjs_min.default(from))) {
                 // If selected date is before current from date, start new range
                 newRange = { from: selectedDay };
-                setCurrentRangeField("to");
+                setCurrentRangeField('to');
             }
             else {
                 // Set the to date
                 newRange = { from, to: selectedDay };
-                setCurrentRangeField("from");
+                setCurrentRangeField('from');
             }
         }
-        setSelectedRange(newRange);
+        setInternalValue(newRange);
         onSelect(newRange);
     };
     function onOpenChange(open) {
@@ -71,7 +72,7 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", inputFieldsProps
         setShowCalendar(currOpen);
         // Reset selected range if calendar is closed and start or end date is empty
         if (!currOpen && (!startDate.length || !endDate.length)) {
-            setSelectedRange(prevSelectedRangeRef.current);
+            setInternalValue(prevSelectedRangeRef.current);
             onSelect(prevSelectedRangeRef.current);
         }
         // Update previous selected range reference when both start and end dates are selected
@@ -79,11 +80,11 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", inputFieldsProps
             prevSelectedRangeRef.current = selectedRange;
         }
     }
-    const defaultTrigger = (jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { gap: "medium", className: pickerGroupClassName, children: [jsxRuntime.jsxRuntimeExports.jsx(inputField.InputField, { size: 'small', placeholder: "Select start date", trailingIcon: showCalendarIcon ? jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.CalendarIcon, {}) : undefined, className: calendar_module.default.datePickerInput, ...(inputFieldsProps.startDate ?? {}), value: startDate, readOnly: true }), jsxRuntime.jsxRuntimeExports.jsx(inputField.InputField, { size: 'small', placeholder: "Select end date", trailingIcon: showCalendarIcon ? jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.CalendarIcon, {}) : undefined, className: calendar_module.default.datePickerInput, ...(inputFieldsProps.endDate ?? {}), value: endDate, readOnly: true })] }));
-    const trigger = typeof children === "function"
+    const defaultTrigger = (jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { gap: 'medium', className: pickerGroupClassName, children: [jsxRuntime.jsxRuntimeExports.jsx(inputField.InputField, { size: 'small', placeholder: 'Select start date', trailingIcon: showCalendarIcon ? jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.CalendarIcon, {}) : undefined, className: calendar_module.default.datePickerInput, ...(inputFieldsProps.startDate ?? {}), value: startDate, readOnly: true }), jsxRuntime.jsxRuntimeExports.jsx(inputField.InputField, { size: 'small', placeholder: 'Select end date', trailingIcon: showCalendarIcon ? jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.CalendarIcon, {}) : undefined, className: calendar_module.default.datePickerInput, ...(inputFieldsProps.endDate ?? {}), value: endDate, readOnly: true })] }));
+    const trigger = typeof children === 'function'
         ? children({ startDate, endDate })
         : children || defaultTrigger;
-    return (jsxRuntime.jsxRuntimeExports.jsxs(popover.Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsxRuntime.jsxRuntimeExports.jsx(popover.Popover.Trigger, { asChild: true, children: trigger }), jsxRuntime.jsxRuntimeExports.jsxs(popover.Popover.Content, { side: side, className: calendar_module.default.calendarPopover, children: [jsxRuntime.jsxRuntimeExports.jsx(calendar.Calendar, { showOutsideDays: false, numberOfMonths: 2, defaultMonth: selectedRange.from, required: true, ...calendarProps, timeZone: timeZone, mode: "range", month: computedDefaultMonth, selected: selectedRange, onSelect: handleSelect, onMonthChange: setCurrentMonth }), footer && (jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { align: "center", justify: "center", className: calendar_module.default.calendarFooter, children: footer }))] })] }));
+    return (jsxRuntime.jsxRuntimeExports.jsxs(popover.Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsxRuntime.jsxRuntimeExports.jsx(popover.Popover.Trigger, { asChild: true, children: trigger }), jsxRuntime.jsxRuntimeExports.jsxs(popover.Popover.Content, { side: side, className: calendar_module.default.calendarPopover, children: [jsxRuntime.jsxRuntimeExports.jsx(calendar.Calendar, { showOutsideDays: false, numberOfMonths: 2, defaultMonth: selectedRange.from, required: true, ...calendarProps, timeZone: timeZone, mode: 'range', month: computedDefaultMonth, selected: selectedRange, onSelect: handleSelect, onMonthChange: setCurrentMonth }), footer && (jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { align: 'center', justify: 'center', className: calendar_module.default.calendarFooter, children: footer }))] })] }));
 }
 
 exports.RangePicker = RangePicker;

package/dist/components/calendar/range-picker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"range-picker.cjs","sources":["../../../components/calendar/range-picker.tsx"],"sourcesContent":["import { CalendarIcon } from \"@radix-ui/react-icons\";\nimport dayjs from \"dayjs\";\nimport { useRef, useState, useMemo } from \"react\";\nimport { DateRange, PropsBase, PropsRangeRequired } from \"react-day-picker\";\n\nimport { Flex } from \"../flex\";\nimport { Popover } from \"../popover\";\nimport { Calendar } from \"./calendar\";\nimport styles from \"./calendar.module.css\";\nimport { InputField } from \"../input-field\";\nimport { InputFieldProps } from \"../input-field/input-field\";\n\ninterface RangePickerProps {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  dateFormat?: string;\n  inputFieldsProps?: { startDate?: InputFieldProps; endDate?: InputFieldProps };\n  calendarProps?: PropsRangeRequired & PropsBase;\n  onSelect?: (date: DateRange) => void;\n  pickerGroupClassName?: string;\n  value?: DateRange;\n  children?:\n    | React.ReactNode\n    | ((props: { startDate: string; endDate: string }) => React.ReactNode);\n  showCalendarIcon?: boolean;\n  footer?: React.ReactNode;\n  timeZone?: string;\n}\n\ntype RangeFields = keyof DateRange;\n\nexport function RangePicker({\n  side = \"top\",\n  dateFormat = \"DD/MM/YYYY\",\n  inputFieldsProps = {},\n  calendarProps,\n  onSelect = () => {},\n  value = {\n    to: new Date(),\n    from: new Date(),\n  },\n  pickerGroupClassName,\n  children,\n  showCalendarIcon = true,\n  footer,\n  timeZone,\n}: RangePickerProps) {\n  const [showCalendar, setShowCalendar] = useState(false);\n  const [currentRangeField, setCurrentRangeField] =\n    useState<RangeFields>(\"from\");\n  const [selectedRange, setSelectedRange] = useState(value);\n  const [currentMonth, setCurrentMonth] = useState(selectedRange?.from);\n\n  const prevSelectedRangeRef = useRef(selectedRange);\n\n  const startDate = selectedRange.from\n    ? dayjs(selectedRange.from).format(dateFormat)\n    : \"\";\n  const endDate = selectedRange.to\n    ? dayjs(selectedRange.to).format(dateFormat)\n    : \"\";\n\n  // Ensures two months are visible even when\n  // current month is the last allowed month (endMonth).\n  const computedDefaultMonth = useMemo(() => {\n    let month = currentMonth;\n    if (calendarProps?.endMonth) {\n      const endMonth = dayjs(calendarProps.endMonth);\n      const fromMonth = dayjs(currentMonth);\n\n      if (fromMonth.isSame(endMonth, 'month')) {\n        month = endMonth.subtract(1, 'month').toDate();\n      }\n    }\n    return month;\n  }, [currentMonth, calendarProps?.endMonth]);\n\n  // 1st click will select the start date.\n  // 2nd click will select the end date.\n  // 3rd click will select the start date again.\n  const handleSelect = (range: DateRange, selectedDay: Date) => {\n    // TODO: Remove custom logic and reuse the default logic from react-day-picker\n    let newRange: DateRange;\n\n    if (currentRangeField === \"from\") {\n      // First click - set from date and prepare for to date selection\n      newRange = { from: selectedDay };\n      setCurrentRangeField(\"to\");\n    } else {\n      // Second click - setting to date\n      const from = selectedRange.from;\n\n      if (dayjs(selectedDay).isBefore(dayjs(from))) {\n        // If selected date is before current from date, start new range\n        newRange = { from: selectedDay };\n        setCurrentRangeField(\"to\");\n      } else {\n        // Set the to date\n        newRange = { from, to: selectedDay };\n        setCurrentRangeField(\"from\");\n      }\n    }\n\n    setSelectedRange(newRange);\n    onSelect(newRange);\n  };\n\n  function onOpenChange(open?: boolean) {\n    const currOpen = Boolean(open);\n\n    setShowCalendar(currOpen);\n\n    // Reset selected range if calendar is closed and start or end date is empty\n    if (!currOpen && (!startDate.length || !endDate.length)) {\n      setSelectedRange(prevSelectedRangeRef.current);\n      onSelect(prevSelectedRangeRef.current);\n    }\n\n    // Update previous selected range reference when both start and end dates are selected\n    if (!currOpen && startDate.length && endDate.length) {\n      prevSelectedRangeRef.current = selectedRange;\n    }\n  }\n\n  const defaultTrigger = (\n    <Flex gap=\"medium\" className={pickerGroupClassName}>\n      <InputField\n        size='small'\n        placeholder=\"Select start date\"\n        trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n        className={styles.datePickerInput}\n        {...(inputFieldsProps.startDate ?? {})}\n        value={startDate}\n        readOnly\n      />\n\n      <InputField\n        size='small'\n        placeholder=\"Select end date\"\n        trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n        className={styles.datePickerInput}\n        {...(inputFieldsProps.endDate ?? {})}\n        value={endDate}\n        readOnly\n      />\n    </Flex>\n  );\n\n  const trigger =\n    typeof children === \"function\"\n      ? children({ startDate, endDate })\n      : children || defaultTrigger;\n\n  return (\n    <Popover open={showCalendar} onOpenChange={onOpenChange}>\n      <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n      <Popover.Content side={side} className={styles.calendarPopover}>\n        <Calendar\n          showOutsideDays={false}\n          numberOfMonths={2}\n          defaultMonth={selectedRange.from}\n          required={true}\n          {...calendarProps}\n          timeZone={timeZone}\n          mode=\"range\"\n          month={computedDefaultMonth}\n          selected={selectedRange}\n          onSelect={handleSelect}\n          onMonthChange={setCurrentMonth}\n        />\n        {footer && (\n          <Flex\n            align=\"center\"\n            justify=\"center\"\n            className={styles.calendarFooter}\n          >\n            {footer}\n          </Flex>\n        )}\n      </Popover.Content>\n    </Popover>\n  );\n}\n"],"names":["useState","useRef","dayjs","useMemo","_jsxs","Flex","_jsx","InputField","CalendarIcon","styles","Popover","Calendar"],"mappings":"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"}
+{"version":3,"file":"range-picker.cjs","sources":["../../../components/calendar/range-picker.tsx"],"sourcesContent":["import { CalendarIcon } from '@radix-ui/react-icons';\nimport dayjs from 'dayjs';\nimport { useMemo, useRef, useState } from 'react';\nimport { DateRange, PropsBase, PropsRangeRequired } from 'react-day-picker';\n\nimport { Flex } from '../flex';\nimport { InputField } from '../input-field';\nimport { InputFieldProps } from '../input-field/input-field';\nimport { Popover } from '../popover';\nimport { Calendar } from './calendar';\nimport styles from './calendar.module.css';\n\ninterface RangePickerProps {\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  dateFormat?: string;\n  inputFieldsProps?: { startDate?: InputFieldProps; endDate?: InputFieldProps };\n  calendarProps?: PropsRangeRequired & PropsBase;\n  onSelect?: (date: DateRange) => void;\n  pickerGroupClassName?: string;\n  value?: DateRange;\n  defaultValue?: DateRange;\n  children?:\n    | React.ReactNode\n    | ((props: { startDate: string; endDate: string }) => React.ReactNode);\n  showCalendarIcon?: boolean;\n  footer?: React.ReactNode;\n  timeZone?: string;\n}\n\ntype RangeFields = keyof DateRange;\n\nexport function RangePicker({\n  side = 'top',\n  dateFormat = 'DD/MM/YYYY',\n  inputFieldsProps = {},\n  calendarProps,\n  onSelect = () => {},\n  value,\n  defaultValue = {\n    to: new Date(),\n    from: new Date()\n  },\n  pickerGroupClassName,\n  children,\n  showCalendarIcon = true,\n  footer,\n  timeZone\n}: RangePickerProps) {\n  const [showCalendar, setShowCalendar] = useState(false);\n  const [currentRangeField, setCurrentRangeField] =\n    useState<RangeFields>('from');\n  const [internalValue, setInternalValue] = useState(value ?? defaultValue);\n  const [currentMonth, setCurrentMonth] = useState(internalValue?.from);\n\n  const selectedRange = value ?? internalValue;\n\n  const prevSelectedRangeRef = useRef(selectedRange);\n\n  const startDate = selectedRange.from\n    ? dayjs(selectedRange.from).format(dateFormat)\n    : '';\n  const endDate = selectedRange.to\n    ? dayjs(selectedRange.to).format(dateFormat)\n    : '';\n\n  // Ensures two months are visible even when\n  // current month is the last allowed month (endMonth).\n  const computedDefaultMonth = useMemo(() => {\n    let month = currentMonth;\n    if (calendarProps?.endMonth) {\n      const endMonth = dayjs(calendarProps.endMonth);\n      const fromMonth = dayjs(currentMonth);\n\n      if (fromMonth.isSame(endMonth, 'month')) {\n        month = endMonth.subtract(1, 'month').toDate();\n      }\n    }\n    return month;\n  }, [currentMonth, calendarProps?.endMonth]);\n\n  // 1st click will select the start date.\n  // 2nd click will select the end date.\n  // 3rd click will select the start date again.\n  const handleSelect = (range: DateRange, selectedDay: Date) => {\n    // TODO: Remove custom logic and reuse the default logic from react-day-picker\n    let newRange: DateRange;\n\n    if (currentRangeField === 'from') {\n      // First click - set from date and prepare for to date selection\n      newRange = { from: selectedDay };\n      setCurrentRangeField('to');\n    } else {\n      // Second click - setting to date\n      const from = selectedRange.from;\n\n      if (dayjs(selectedDay).isBefore(dayjs(from))) {\n        // If selected date is before current from date, start new range\n        newRange = { from: selectedDay };\n        setCurrentRangeField('to');\n      } else {\n        // Set the to date\n        newRange = { from, to: selectedDay };\n        setCurrentRangeField('from');\n      }\n    }\n\n    setInternalValue(newRange);\n    onSelect(newRange);\n  };\n\n  function onOpenChange(open?: boolean) {\n    const currOpen = Boolean(open);\n\n    setShowCalendar(currOpen);\n\n    // Reset selected range if calendar is closed and start or end date is empty\n    if (!currOpen && (!startDate.length || !endDate.length)) {\n      setInternalValue(prevSelectedRangeRef.current);\n      onSelect(prevSelectedRangeRef.current);\n    }\n\n    // Update previous selected range reference when both start and end dates are selected\n    if (!currOpen && startDate.length && endDate.length) {\n      prevSelectedRangeRef.current = selectedRange;\n    }\n  }\n\n  const defaultTrigger = (\n    <Flex gap='medium' className={pickerGroupClassName}>\n      <InputField\n        size='small'\n        placeholder='Select start date'\n        trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n        className={styles.datePickerInput}\n        {...(inputFieldsProps.startDate ?? {})}\n        value={startDate}\n        readOnly\n      />\n\n      <InputField\n        size='small'\n        placeholder='Select end date'\n        trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n        className={styles.datePickerInput}\n        {...(inputFieldsProps.endDate ?? {})}\n        value={endDate}\n        readOnly\n      />\n    </Flex>\n  );\n\n  const trigger =\n    typeof children === 'function'\n      ? children({ startDate, endDate })\n      : children || defaultTrigger;\n\n  return (\n    <Popover open={showCalendar} onOpenChange={onOpenChange}>\n      <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n      <Popover.Content side={side} className={styles.calendarPopover}>\n        <Calendar\n          showOutsideDays={false}\n          numberOfMonths={2}\n          defaultMonth={selectedRange.from}\n          required={true}\n          {...calendarProps}\n          timeZone={timeZone}\n          mode='range'\n          month={computedDefaultMonth}\n          selected={selectedRange}\n          onSelect={handleSelect}\n          onMonthChange={setCurrentMonth}\n        />\n        {footer && (\n          <Flex\n            align='center'\n            justify='center'\n            className={styles.calendarFooter}\n          >\n            {footer}\n          </Flex>\n        )}\n      </Popover.Content>\n    </Popover>\n  );\n}\n"],"names":["useState","useRef","dayjs","useMemo","_jsxs","Flex","_jsx","InputField","CalendarIcon","styles","Popover","Calendar"],"mappings":"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"}

package/dist/components/calendar/range-picker.d.ts

@@ -1,7 +1,7 @@
-import { DateRange, PropsBase, PropsRangeRequired } from "react-day-picker";
-import { InputFieldProps } from "../input-field/input-field";
+import { DateRange, PropsBase, PropsRangeRequired } from 'react-day-picker';
+import { InputFieldProps } from '../input-field/input-field';
 interface RangePickerProps {
-    side?: "top" | "right" | "bottom" | "left";
+    side?: 'top' | 'right' | 'bottom' | 'left';
     dateFormat?: string;
     inputFieldsProps?: {
         startDate?: InputFieldProps;
@@ -11,6 +11,7 @@ interface RangePickerProps {
     onSelect?: (date: DateRange) => void;
     pickerGroupClassName?: string;
     value?: DateRange;
+    defaultValue?: DateRange;
     children?: React.ReactNode | ((props: {
         startDate: string;
         endDate: string;
@@ -19,6 +20,6 @@ interface RangePickerProps {
     footer?: React.ReactNode;
     timeZone?: string;
 }
-export declare function RangePicker({ side, dateFormat, inputFieldsProps, calendarProps, onSelect, value, pickerGroupClassName, children, showCalendarIcon, footer, timeZone, }: RangePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function RangePicker({ side, dateFormat, inputFieldsProps, calendarProps, onSelect, value, defaultValue, pickerGroupClassName, children, showCalendarIcon, footer, timeZone }: RangePickerProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=range-picker.d.ts.map

package/dist/components/calendar/range-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"range-picker.d.ts","sourceRoot":"","sources":["../../../components/calendar/range-picker.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAO5E,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,eAAe,CAAC;QAAC,OAAO,CAAC,EAAE,eAAe,CAAA;KAAE,CAAC;IAC9E,aAAa,CAAC,EAAE,kBAAkB,GAAG,SAAS,CAAC;IAC/C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EACL,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACzE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAID,wBAAgB,WAAW,CAAC,EAC1B,IAAY,EACZ,UAAyB,EACzB,gBAAqB,EACrB,aAAa,EACb,QAAmB,EACnB,KAGC,EACD,oBAAoB,EACpB,QAAQ,EACR,gBAAuB,EACvB,MAAM,EACN,QAAQ,GACT,EAAE,gBAAgB,2CAwIlB"}
+{"version":3,"file":"range-picker.d.ts","sourceRoot":"","sources":["../../../components/calendar/range-picker.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAI5E,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAK7D,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,eAAe,CAAC;QAAC,OAAO,CAAC,EAAE,eAAe,CAAA;KAAE,CAAC;IAC9E,aAAa,CAAC,EAAE,kBAAkB,GAAG,SAAS,CAAC;IAC/C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,EACL,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACzE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAID,wBAAgB,WAAW,CAAC,EAC1B,IAAY,EACZ,UAAyB,EACzB,gBAAqB,EACrB,aAAa,EACb,QAAmB,EACnB,KAAK,EACL,YAGC,EACD,oBAAoB,EACpB,QAAQ,EACR,gBAAuB,EACvB,MAAM,EACN,QAAQ,EACT,EAAE,gBAAgB,2CA0IlB"}

package/dist/components/calendar/range-picker.js

@@ -3,26 +3,27 @@ import { CalendarIcon } from '../../node_modules/.pnpm/@radix-ui_react-icons@1.3
 import dayjs from '../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/dayjs.min.js';
 import { useState, useRef, useMemo } from 'react';
 import { Flex } from '../flex/flex.js';
+import { InputField } from '../input-field/input-field.js';
 import { Popover } from '../popover/popover.js';
 import { Calendar } from './calendar.js';
 import styles from './calendar.module.css.js';
-import { InputField } from '../input-field/input-field.js';
 
-function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", inputFieldsProps = {}, calendarProps, onSelect = () => { }, value = {
+function RangePicker({ side = 'top', dateFormat = 'DD/MM/YYYY', inputFieldsProps = {}, calendarProps, onSelect = () => { }, value, defaultValue = {
     to: new Date(),
-    from: new Date(),
-}, pickerGroupClassName, children, showCalendarIcon = true, footer, timeZone, }) {
+    from: new Date()
+}, pickerGroupClassName, children, showCalendarIcon = true, footer, timeZone }) {
     const [showCalendar, setShowCalendar] = useState(false);
-    const [currentRangeField, setCurrentRangeField] = useState("from");
-    const [selectedRange, setSelectedRange] = useState(value);
-    const [currentMonth, setCurrentMonth] = useState(selectedRange?.from);
+    const [currentRangeField, setCurrentRangeField] = useState('from');
+    const [internalValue, setInternalValue] = useState(value ?? defaultValue);
+    const [currentMonth, setCurrentMonth] = useState(internalValue?.from);
+    const selectedRange = value ?? internalValue;
     const prevSelectedRangeRef = useRef(selectedRange);
     const startDate = selectedRange.from
         ? dayjs(selectedRange.from).format(dateFormat)
-        : "";
+        : '';
     const endDate = selectedRange.to
         ? dayjs(selectedRange.to).format(dateFormat)
-        : "";
+        : '';
     // Ensures two months are visible even when
     // current month is the last allowed month (endMonth).
     const computedDefaultMonth = useMemo(() => {
@@ -42,10 +43,10 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", inputFieldsProps
     const handleSelect = (range, selectedDay) => {
         // TODO: Remove custom logic and reuse the default logic from react-day-picker
         let newRange;
-        if (currentRangeField === "from") {
+        if (currentRangeField === 'from') {
             // First click - set from date and prepare for to date selection
             newRange = { from: selectedDay };
-            setCurrentRangeField("to");
+            setCurrentRangeField('to');
         }
         else {
             // Second click - setting to date
@@ -53,15 +54,15 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", inputFieldsProps
             if (dayjs(selectedDay).isBefore(dayjs(from))) {
                 // If selected date is before current from date, start new range
                 newRange = { from: selectedDay };
-                setCurrentRangeField("to");
+                setCurrentRangeField('to');
             }
             else {
                 // Set the to date
                 newRange = { from, to: selectedDay };
-                setCurrentRangeField("from");
+                setCurrentRangeField('from');
             }
         }
-        setSelectedRange(newRange);
+        setInternalValue(newRange);
         onSelect(newRange);
     };
     function onOpenChange(open) {
@@ -69,7 +70,7 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", inputFieldsProps
         setShowCalendar(currOpen);
         // Reset selected range if calendar is closed and start or end date is empty
         if (!currOpen && (!startDate.length || !endDate.length)) {
-            setSelectedRange(prevSelectedRangeRef.current);
+            setInternalValue(prevSelectedRangeRef.current);
             onSelect(prevSelectedRangeRef.current);
         }
         // Update previous selected range reference when both start and end dates are selected
@@ -77,11 +78,11 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", inputFieldsProps
             prevSelectedRangeRef.current = selectedRange;
         }
     }
-    const defaultTrigger = (jsxRuntimeExports.jsxs(Flex, { gap: "medium", className: pickerGroupClassName, children: [jsxRuntimeExports.jsx(InputField, { size: 'small', placeholder: "Select start date", trailingIcon: showCalendarIcon ? jsxRuntimeExports.jsx(CalendarIcon, {}) : undefined, className: styles.datePickerInput, ...(inputFieldsProps.startDate ?? {}), value: startDate, readOnly: true }), jsxRuntimeExports.jsx(InputField, { size: 'small', placeholder: "Select end date", trailingIcon: showCalendarIcon ? jsxRuntimeExports.jsx(CalendarIcon, {}) : undefined, className: styles.datePickerInput, ...(inputFieldsProps.endDate ?? {}), value: endDate, readOnly: true })] }));
-    const trigger = typeof children === "function"
+    const defaultTrigger = (jsxRuntimeExports.jsxs(Flex, { gap: 'medium', className: pickerGroupClassName, children: [jsxRuntimeExports.jsx(InputField, { size: 'small', placeholder: 'Select start date', trailingIcon: showCalendarIcon ? jsxRuntimeExports.jsx(CalendarIcon, {}) : undefined, className: styles.datePickerInput, ...(inputFieldsProps.startDate ?? {}), value: startDate, readOnly: true }), jsxRuntimeExports.jsx(InputField, { size: 'small', placeholder: 'Select end date', trailingIcon: showCalendarIcon ? jsxRuntimeExports.jsx(CalendarIcon, {}) : undefined, className: styles.datePickerInput, ...(inputFieldsProps.endDate ?? {}), value: endDate, readOnly: true })] }));
+    const trigger = typeof children === 'function'
         ? children({ startDate, endDate })
         : children || defaultTrigger;
-    return (jsxRuntimeExports.jsxs(Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsxRuntimeExports.jsx(Popover.Trigger, { asChild: true, children: trigger }), jsxRuntimeExports.jsxs(Popover.Content, { side: side, className: styles.calendarPopover, children: [jsxRuntimeExports.jsx(Calendar, { showOutsideDays: false, numberOfMonths: 2, defaultMonth: selectedRange.from, required: true, ...calendarProps, timeZone: timeZone, mode: "range", month: computedDefaultMonth, selected: selectedRange, onSelect: handleSelect, onMonthChange: setCurrentMonth }), footer && (jsxRuntimeExports.jsx(Flex, { align: "center", justify: "center", className: styles.calendarFooter, children: footer }))] })] }));
+    return (jsxRuntimeExports.jsxs(Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsxRuntimeExports.jsx(Popover.Trigger, { asChild: true, children: trigger }), jsxRuntimeExports.jsxs(Popover.Content, { side: side, className: styles.calendarPopover, children: [jsxRuntimeExports.jsx(Calendar, { showOutsideDays: false, numberOfMonths: 2, defaultMonth: selectedRange.from, required: true, ...calendarProps, timeZone: timeZone, mode: 'range', month: computedDefaultMonth, selected: selectedRange, onSelect: handleSelect, onMonthChange: setCurrentMonth }), footer && (jsxRuntimeExports.jsx(Flex, { align: 'center', justify: 'center', className: styles.calendarFooter, children: footer }))] })] }));
 }
 
 export { RangePicker };

package/dist/components/calendar/range-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"range-picker.js","sources":["../../../components/calendar/range-picker.tsx"],"sourcesContent":["import { CalendarIcon } from \"@radix-ui/react-icons\";\nimport dayjs from \"dayjs\";\nimport { useRef, useState, useMemo } from \"react\";\nimport { DateRange, PropsBase, PropsRangeRequired } from \"react-day-picker\";\n\nimport { Flex } from \"../flex\";\nimport { Popover } from \"../popover\";\nimport { Calendar } from \"./calendar\";\nimport styles from \"./calendar.module.css\";\nimport { InputField } from \"../input-field\";\nimport { InputFieldProps } from \"../input-field/input-field\";\n\ninterface RangePickerProps {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  dateFormat?: string;\n  inputFieldsProps?: { startDate?: InputFieldProps; endDate?: InputFieldProps };\n  calendarProps?: PropsRangeRequired & PropsBase;\n  onSelect?: (date: DateRange) => void;\n  pickerGroupClassName?: string;\n  value?: DateRange;\n  children?:\n    | React.ReactNode\n    | ((props: { startDate: string; endDate: string }) => React.ReactNode);\n  showCalendarIcon?: boolean;\n  footer?: React.ReactNode;\n  timeZone?: string;\n}\n\ntype RangeFields = keyof DateRange;\n\nexport function RangePicker({\n  side = \"top\",\n  dateFormat = \"DD/MM/YYYY\",\n  inputFieldsProps = {},\n  calendarProps,\n  onSelect = () => {},\n  value = {\n    to: new Date(),\n    from: new Date(),\n  },\n  pickerGroupClassName,\n  children,\n  showCalendarIcon = true,\n  footer,\n  timeZone,\n}: RangePickerProps) {\n  const [showCalendar, setShowCalendar] = useState(false);\n  const [currentRangeField, setCurrentRangeField] =\n    useState<RangeFields>(\"from\");\n  const [selectedRange, setSelectedRange] = useState(value);\n  const [currentMonth, setCurrentMonth] = useState(selectedRange?.from);\n\n  const prevSelectedRangeRef = useRef(selectedRange);\n\n  const startDate = selectedRange.from\n    ? dayjs(selectedRange.from).format(dateFormat)\n    : \"\";\n  const endDate = selectedRange.to\n    ? dayjs(selectedRange.to).format(dateFormat)\n    : \"\";\n\n  // Ensures two months are visible even when\n  // current month is the last allowed month (endMonth).\n  const computedDefaultMonth = useMemo(() => {\n    let month = currentMonth;\n    if (calendarProps?.endMonth) {\n      const endMonth = dayjs(calendarProps.endMonth);\n      const fromMonth = dayjs(currentMonth);\n\n      if (fromMonth.isSame(endMonth, 'month')) {\n        month = endMonth.subtract(1, 'month').toDate();\n      }\n    }\n    return month;\n  }, [currentMonth, calendarProps?.endMonth]);\n\n  // 1st click will select the start date.\n  // 2nd click will select the end date.\n  // 3rd click will select the start date again.\n  const handleSelect = (range: DateRange, selectedDay: Date) => {\n    // TODO: Remove custom logic and reuse the default logic from react-day-picker\n    let newRange: DateRange;\n\n    if (currentRangeField === \"from\") {\n      // First click - set from date and prepare for to date selection\n      newRange = { from: selectedDay };\n      setCurrentRangeField(\"to\");\n    } else {\n      // Second click - setting to date\n      const from = selectedRange.from;\n\n      if (dayjs(selectedDay).isBefore(dayjs(from))) {\n        // If selected date is before current from date, start new range\n        newRange = { from: selectedDay };\n        setCurrentRangeField(\"to\");\n      } else {\n        // Set the to date\n        newRange = { from, to: selectedDay };\n        setCurrentRangeField(\"from\");\n      }\n    }\n\n    setSelectedRange(newRange);\n    onSelect(newRange);\n  };\n\n  function onOpenChange(open?: boolean) {\n    const currOpen = Boolean(open);\n\n    setShowCalendar(currOpen);\n\n    // Reset selected range if calendar is closed and start or end date is empty\n    if (!currOpen && (!startDate.length || !endDate.length)) {\n      setSelectedRange(prevSelectedRangeRef.current);\n      onSelect(prevSelectedRangeRef.current);\n    }\n\n    // Update previous selected range reference when both start and end dates are selected\n    if (!currOpen && startDate.length && endDate.length) {\n      prevSelectedRangeRef.current = selectedRange;\n    }\n  }\n\n  const defaultTrigger = (\n    <Flex gap=\"medium\" className={pickerGroupClassName}>\n      <InputField\n        size='small'\n        placeholder=\"Select start date\"\n        trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n        className={styles.datePickerInput}\n        {...(inputFieldsProps.startDate ?? {})}\n        value={startDate}\n        readOnly\n      />\n\n      <InputField\n        size='small'\n        placeholder=\"Select end date\"\n        trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n        className={styles.datePickerInput}\n        {...(inputFieldsProps.endDate ?? {})}\n        value={endDate}\n        readOnly\n      />\n    </Flex>\n  );\n\n  const trigger =\n    typeof children === \"function\"\n      ? children({ startDate, endDate })\n      : children || defaultTrigger;\n\n  return (\n    <Popover open={showCalendar} onOpenChange={onOpenChange}>\n      <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n      <Popover.Content side={side} className={styles.calendarPopover}>\n        <Calendar\n          showOutsideDays={false}\n          numberOfMonths={2}\n          defaultMonth={selectedRange.from}\n          required={true}\n          {...calendarProps}\n          timeZone={timeZone}\n          mode=\"range\"\n          month={computedDefaultMonth}\n          selected={selectedRange}\n          onSelect={handleSelect}\n          onMonthChange={setCurrentMonth}\n        />\n        {footer && (\n          <Flex\n            align=\"center\"\n            justify=\"center\"\n            className={styles.calendarFooter}\n          >\n            {footer}\n          </Flex>\n        )}\n      </Popover.Content>\n    </Popover>\n  );\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"range-picker.js","sources":["../../../components/calendar/range-picker.tsx"],"sourcesContent":["import { CalendarIcon } from '@radix-ui/react-icons';\nimport dayjs from 'dayjs';\nimport { useMemo, useRef, useState } from 'react';\nimport { DateRange, PropsBase, PropsRangeRequired } from 'react-day-picker';\n\nimport { Flex } from '../flex';\nimport { InputField } from '../input-field';\nimport { InputFieldProps } from '../input-field/input-field';\nimport { Popover } from '../popover';\nimport { Calendar } from './calendar';\nimport styles from './calendar.module.css';\n\ninterface RangePickerProps {\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  dateFormat?: string;\n  inputFieldsProps?: { startDate?: InputFieldProps; endDate?: InputFieldProps };\n  calendarProps?: PropsRangeRequired & PropsBase;\n  onSelect?: (date: DateRange) => void;\n  pickerGroupClassName?: string;\n  value?: DateRange;\n  defaultValue?: DateRange;\n  children?:\n    | React.ReactNode\n    | ((props: { startDate: string; endDate: string }) => React.ReactNode);\n  showCalendarIcon?: boolean;\n  footer?: React.ReactNode;\n  timeZone?: string;\n}\n\ntype RangeFields = keyof DateRange;\n\nexport function RangePicker({\n  side = 'top',\n  dateFormat = 'DD/MM/YYYY',\n  inputFieldsProps = {},\n  calendarProps,\n  onSelect = () => {},\n  value,\n  defaultValue = {\n    to: new Date(),\n    from: new Date()\n  },\n  pickerGroupClassName,\n  children,\n  showCalendarIcon = true,\n  footer,\n  timeZone\n}: RangePickerProps) {\n  const [showCalendar, setShowCalendar] = useState(false);\n  const [currentRangeField, setCurrentRangeField] =\n    useState<RangeFields>('from');\n  const [internalValue, setInternalValue] = useState(value ?? defaultValue);\n  const [currentMonth, setCurrentMonth] = useState(internalValue?.from);\n\n  const selectedRange = value ?? internalValue;\n\n  const prevSelectedRangeRef = useRef(selectedRange);\n\n  const startDate = selectedRange.from\n    ? dayjs(selectedRange.from).format(dateFormat)\n    : '';\n  const endDate = selectedRange.to\n    ? dayjs(selectedRange.to).format(dateFormat)\n    : '';\n\n  // Ensures two months are visible even when\n  // current month is the last allowed month (endMonth).\n  const computedDefaultMonth = useMemo(() => {\n    let month = currentMonth;\n    if (calendarProps?.endMonth) {\n      const endMonth = dayjs(calendarProps.endMonth);\n      const fromMonth = dayjs(currentMonth);\n\n      if (fromMonth.isSame(endMonth, 'month')) {\n        month = endMonth.subtract(1, 'month').toDate();\n      }\n    }\n    return month;\n  }, [currentMonth, calendarProps?.endMonth]);\n\n  // 1st click will select the start date.\n  // 2nd click will select the end date.\n  // 3rd click will select the start date again.\n  const handleSelect = (range: DateRange, selectedDay: Date) => {\n    // TODO: Remove custom logic and reuse the default logic from react-day-picker\n    let newRange: DateRange;\n\n    if (currentRangeField === 'from') {\n      // First click - set from date and prepare for to date selection\n      newRange = { from: selectedDay };\n      setCurrentRangeField('to');\n    } else {\n      // Second click - setting to date\n      const from = selectedRange.from;\n\n      if (dayjs(selectedDay).isBefore(dayjs(from))) {\n        // If selected date is before current from date, start new range\n        newRange = { from: selectedDay };\n        setCurrentRangeField('to');\n      } else {\n        // Set the to date\n        newRange = { from, to: selectedDay };\n        setCurrentRangeField('from');\n      }\n    }\n\n    setInternalValue(newRange);\n    onSelect(newRange);\n  };\n\n  function onOpenChange(open?: boolean) {\n    const currOpen = Boolean(open);\n\n    setShowCalendar(currOpen);\n\n    // Reset selected range if calendar is closed and start or end date is empty\n    if (!currOpen && (!startDate.length || !endDate.length)) {\n      setInternalValue(prevSelectedRangeRef.current);\n      onSelect(prevSelectedRangeRef.current);\n    }\n\n    // Update previous selected range reference when both start and end dates are selected\n    if (!currOpen && startDate.length && endDate.length) {\n      prevSelectedRangeRef.current = selectedRange;\n    }\n  }\n\n  const defaultTrigger = (\n    <Flex gap='medium' className={pickerGroupClassName}>\n      <InputField\n        size='small'\n        placeholder='Select start date'\n        trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n        className={styles.datePickerInput}\n        {...(inputFieldsProps.startDate ?? {})}\n        value={startDate}\n        readOnly\n      />\n\n      <InputField\n        size='small'\n        placeholder='Select end date'\n        trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n        className={styles.datePickerInput}\n        {...(inputFieldsProps.endDate ?? {})}\n        value={endDate}\n        readOnly\n      />\n    </Flex>\n  );\n\n  const trigger =\n    typeof children === 'function'\n      ? children({ startDate, endDate })\n      : children || defaultTrigger;\n\n  return (\n    <Popover open={showCalendar} onOpenChange={onOpenChange}>\n      <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n      <Popover.Content side={side} className={styles.calendarPopover}>\n        <Calendar\n          showOutsideDays={false}\n          numberOfMonths={2}\n          defaultMonth={selectedRange.from}\n          required={true}\n          {...calendarProps}\n          timeZone={timeZone}\n          mode='range'\n          month={computedDefaultMonth}\n          selected={selectedRange}\n          onSelect={handleSelect}\n          onMonthChange={setCurrentMonth}\n        />\n        {footer && (\n          <Flex\n            align='center'\n            justify='center'\n            className={styles.calendarFooter}\n          >\n            {footer}\n          </Flex>\n        )}\n      </Popover.Content>\n    </Popover>\n  );\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/color-picker/color-picker-alpha.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
+var index$1 = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
+var colorPickerRoot = require('./color-picker-root.cjs');
+var colorPicker_module = require('./color-picker.module.css.cjs');
+var index = require('../../node_modules/.pnpm/@radix-ui_react-slider@1.3.5_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-slider/dist/index.cjs');
+
+const ColorPickerAlpha = ({ className, ...props }) => {
+    const { alpha = 1, setColor } = colorPickerRoot.useColorPicker();
+    return (jsxRuntime.jsxRuntimeExports.jsxs(index.Root, { className: index$1.cx(colorPicker_module.default.sliderRoot, className), max: 100, onValueChange: ([alpha]) => setColor({ alpha: alpha / 100 }), step: 1, value: [alpha * 100], ...props, children: [jsxRuntime.jsxRuntimeExports.jsxs(index.Track, { className: index$1.cx(colorPicker_module.default.sliderTrack, colorPicker_module.default.alphaTrack), children: [jsxRuntime.jsxRuntimeExports.jsx("div", { className: colorPicker_module.default.alphaTrackGradient }), jsxRuntime.jsxRuntimeExports.jsx(index.Range, { className: colorPicker_module.default.sliderRange })] }), jsxRuntime.jsxRuntimeExports.jsx(index.Thumb, { className: colorPicker_module.default.sliderThumb })] }));
+};
+
+exports.ColorPickerAlpha = ColorPickerAlpha;
+//# sourceMappingURL=color-picker-alpha.cjs.map

package/dist/components/color-picker/color-picker-alpha.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-alpha.cjs","sources":["../../../components/color-picker/color-picker-alpha.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { Slider } from 'radix-ui';\nimport { type ComponentProps } from 'react';\nimport { useColorPicker } from './color-picker-root';\nimport styles from './color-picker.module.css';\n\nexport type ColorPickerAlphaProps = ComponentProps<typeof Slider.Root>;\n\nexport const ColorPickerAlpha = ({\n  className,\n  ...props\n}: ColorPickerAlphaProps) => {\n  const { alpha = 1, setColor } = useColorPicker();\n  return (\n    <Slider.Root\n      className={cx(styles.sliderRoot, className)}\n      max={100}\n      onValueChange={([alpha]) => setColor({ alpha: alpha / 100 })}\n      step={1}\n      value={[alpha * 100]}\n      {...props}\n    >\n      <Slider.Track className={cx(styles.sliderTrack, styles.alphaTrack)}>\n        <div className={styles.alphaTrackGradient} />\n        <Slider.Range className={styles.sliderRange} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.sliderThumb} />\n    </Slider.Root>\n  );\n};\n"],"names":["useColorPicker","_jsxs","Slider.Root","cx","styles","Slider.Track","_jsx","Slider.Range","Slider.Thumb"],"mappings":";;;;;;;;AAQO,MAAM,gBAAgB,GAAG,CAAC,EAC/B,SAAS,EACT,GAAG,KAAK,EACc,KAAI;IAC1B,MAAM,EAAE,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAGA,8BAAc,EAAE,CAAC;IACjD,QACEC,kCAACC,UAAW,EACV,EAAA,SAAS,EAAEC,UAAE,CAACC,0BAAM,CAAC,UAAU,EAAE,SAAS,CAAC,EAC3C,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,GAAG,GAAG,EAAE,CAAC,EAC5D,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,CAAC,KAAK,GAAG,GAAG,CAAC,EAAA,GAChB,KAAK,EAET,QAAA,EAAA,CAAAH,iCAAA,CAACI,WAAY,EAAA,EAAC,SAAS,EAAEF,UAAE,CAACC,0BAAM,CAAC,WAAW,EAAEA,0BAAM,CAAC,UAAU,CAAC,EAChE,QAAA,EAAA,CAAAE,gCAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEF,0BAAM,CAAC,kBAAkB,EAAI,CAAA,EAC7CE,iCAACC,WAAY,EAAA,EAAC,SAAS,EAAEH,0BAAM,CAAC,WAAW,EAAI,CAAA,CAAA,EAAA,CAClC,EACfE,gCAAA,CAACE,WAAY,EAAC,EAAA,SAAS,EAAEJ,0BAAM,CAAC,WAAW,EAAA,CAAI,CACnC,EAAA,CAAA,EACd;AACJ;;;;"}