@fanvue/ui 1.17.3 → 1.18.1

package/dist/cjs/components/Pagination/Pagination.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.cjs","sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { ChevronLeftIcon } from \"../Icons/ChevronLeftIcon\";\nimport { ChevronRightIcon } from \"../Icons/ChevronRightIcon\";\n\n/** Pagination display style — numbered buttons or minimal dots. */\nexport type PaginationVariant = \"default\" | \"dots\";\n\nexport interface PaginationProps extends Omit<React.HTMLAttributes<HTMLElement>, \"onChange\"> {\n  /** Display style — numbered page buttons or minimal dots. @default \"default\" */\n  variant?: PaginationVariant;\n  /** Total number of pages. */\n  totalPages: number;\n  /** Current active page (1-indexed). */\n  currentPage: number;\n  /** Callback fired when the active page changes. Receives the new 1-indexed page number. */\n  onPageChange?: (page: number) => void;\n  /** Accessible label for the `<nav>` landmark. @default \"Pagination\" */\n  ariaLabel?: string;\n  /** Accessible label for the previous-page button. @default \"Previous page\" */\n  previousLabel?: string;\n  /** Accessible label for the next-page button. @default \"Next page\" */\n  nextLabel?: string;\n  /** Function that returns an accessible label for each page button. @default (page) => \\`Page ${page}\\` */\n  getPageLabel?: (page: number) => string;\n}\n\ntype PageItem = number | \"ellipsis-start\" | \"ellipsis-end\";\n\nfunction getVisiblePages(currentPage: number, totalPages: number): PageItem[] {\n  if (totalPages <= 7) {\n    return Array.from({ length: totalPages }, (_, i) => i + 1);\n  }\n\n  const pages: PageItem[] = [1];\n\n  if (currentPage <= 4) {\n    pages.push(2, 3, 4, 5, \"ellipsis-end\");\n  } else if (currentPage >= totalPages - 3) {\n    pages.push(\"ellipsis-start\", totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1);\n  } else {\n    pages.push(\"ellipsis-start\", currentPage - 1, currentPage, currentPage + 1, \"ellipsis-end\");\n  }\n\n  pages.push(totalPages);\n  return pages;\n}\n\n/**\n * Page navigation control with previous/next buttons and numbered page\n * indicators. Supports a numbered-buttons layout (`\"default\"`) and a compact\n * dots layout (`\"dots\"`).\n *\n * @example\n * ```tsx\n * <Pagination totalPages={10} currentPage={page} onPageChange={setPage} />\n * ```\n */\nexport const Pagination = React.forwardRef<HTMLElement, PaginationProps>(\n  (\n    {\n      variant = \"default\",\n      totalPages,\n      currentPage,\n      onPageChange,\n      ariaLabel = \"Pagination\",\n      previousLabel = \"Previous page\",\n      nextLabel = \"Next page\",\n      getPageLabel = (page: number) => `Page ${page}`,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const isFirstPage = currentPage <= 1;\n    const isLastPage = currentPage >= totalPages;\n\n    const handlePrevious = () => {\n      if (!isFirstPage) onPageChange?.(currentPage - 1);\n    };\n\n    const handleNext = () => {\n      if (!isLastPage) onPageChange?.(currentPage + 1);\n    };\n\n    return (\n      <nav\n        ref={ref}\n        aria-label={ariaLabel}\n        className={cn(\n          \"inline-flex items-center\",\n          variant === \"default\" && \"gap-3\",\n          variant === \"dots\" && \"gap-4\",\n          className,\n        )}\n        {...props}\n      >\n        <IconButton\n          variant=\"tertiary\"\n          size=\"32\"\n          icon={<ChevronLeftIcon />}\n          aria-label={previousLabel}\n          disabled={isFirstPage}\n          onClick={handlePrevious}\n        />\n\n        {variant === \"default\" && (\n          <div className=\"flex items-center gap-3\">\n            {getVisiblePages(currentPage, totalPages).map((page) =>\n              typeof page === \"string\" ? (\n                <span\n                  key={page}\n                  className=\"flex size-4 items-center justify-center text-foreground-secondary text-xs\"\n                  aria-hidden=\"true\"\n                >\n                  &hellip;\n                </span>\n              ) : (\n                <button\n                  key={page}\n                  type=\"button\"\n                  aria-label={getPageLabel(page)}\n                  aria-current={page === currentPage ? \"page\" : undefined}\n                  onClick={() => onPageChange?.(page)}\n                  className={cn(\n                    \"flex size-4 cursor-pointer items-center justify-center rounded-full text-xs focus-visible:shadow-focus-ring focus-visible:outline-none motion-safe:transition-colors motion-safe:duration-150\",\n                    page === currentPage\n                      ? \"bg-neutral-400 text-foreground-inverse\"\n                      : \"bg-neutral-100 text-foreground-default hover:bg-neutral-200 active:bg-neutral-200\",\n                  )}\n                >\n                  {page}\n                </button>\n              ),\n            )}\n          </div>\n        )}\n\n        {variant === \"dots\" && (\n          <div className=\"flex items-center\">\n            {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (\n              <button\n                key={page}\n                type=\"button\"\n                aria-label={getPageLabel(page)}\n                aria-current={page === currentPage ? \"page\" : undefined}\n                onClick={() => onPageChange?.(page)}\n                className=\"flex size-6 cursor-pointer items-center justify-center rounded-full focus-visible:shadow-focus-ring focus-visible:outline-none\"\n              >\n                <span\n                  className={cn(\n                    \"block rounded-full motion-safe:transition-all motion-safe:duration-150\",\n                    page === currentPage\n                      ? \"size-2 bg-neutral-400\"\n                      : \"size-1.5 bg-neutral-200 hover:bg-neutral-250 active:bg-neutral-250\",\n                  )}\n                />\n              </button>\n            ))}\n          </div>\n        )}\n\n        <IconButton\n          variant=\"tertiary\"\n          size=\"32\"\n          icon={<ChevronRightIcon />}\n          aria-label={nextLabel}\n          disabled={isLastPage}\n          onClick={handleNext}\n        />\n      </nav>\n    );\n  },\n);\n\nPagination.displayName = \"Pagination\";\n"],"names":["React","jsxs","cn","jsx","IconButton","ChevronLeftIcon","ChevronRightIcon"],"mappings":"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"}
+{"version":3,"file":"Pagination.cjs","sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { ChevronLeftIcon } from \"../Icons/ChevronLeftIcon\";\nimport { ChevronRightIcon } from \"../Icons/ChevronRightIcon\";\n\n/** Pagination display style — numbered buttons or minimal dots. */\nexport type PaginationVariant = \"default\" | \"dots\";\n\nexport interface PaginationProps extends Omit<React.HTMLAttributes<HTMLElement>, \"onChange\"> {\n  /** Display style — numbered page buttons or minimal dots. @default \"default\" */\n  variant?: PaginationVariant;\n  /** Total number of pages. */\n  totalPages: number;\n  /** Current active page (1-indexed). */\n  currentPage: number;\n  /** Callback fired when the active page changes. Receives the new 1-indexed page number. */\n  onPageChange?: (page: number) => void;\n  /** Accessible label for the `<nav>` landmark. @default \"Pagination\" */\n  ariaLabel?: string;\n  /** Accessible label for the previous-page button. @default \"Previous page\" */\n  previousLabel?: string;\n  /** Accessible label for the next-page button. @default \"Next page\" */\n  nextLabel?: string;\n  /** Function that returns an accessible label for each page button. @default (page) => \\`Page ${page}\\` */\n  getPageLabel?: (page: number) => string;\n}\n\ntype PageItem = number | \"ellipsis-start\" | \"ellipsis-end\";\n\nfunction getVisiblePages(currentPage: number, totalPages: number): PageItem[] {\n  if (totalPages <= 7) {\n    return Array.from({ length: totalPages }, (_, i) => i + 1);\n  }\n\n  const pages: PageItem[] = [1];\n\n  if (currentPage <= 4) {\n    pages.push(2, 3, 4, 5, \"ellipsis-end\");\n  } else if (currentPage >= totalPages - 3) {\n    pages.push(\"ellipsis-start\", totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1);\n  } else {\n    pages.push(\"ellipsis-start\", currentPage - 1, currentPage, currentPage + 1, \"ellipsis-end\");\n  }\n\n  pages.push(totalPages);\n  return pages;\n}\n\n/**\n * Page navigation control with previous/next buttons and numbered page\n * indicators. Supports a numbered-buttons layout (`\"default\"`) and a compact\n * dots layout (`\"dots\"`).\n *\n * @example\n * ```tsx\n * <Pagination totalPages={10} currentPage={page} onPageChange={setPage} />\n * ```\n */\nexport const Pagination = React.forwardRef<HTMLElement, PaginationProps>(\n  (\n    {\n      variant = \"default\",\n      totalPages,\n      currentPage,\n      onPageChange,\n      ariaLabel = \"Pagination\",\n      previousLabel = \"Previous page\",\n      nextLabel = \"Next page\",\n      getPageLabel = (page: number) => `Page ${page}`,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const isFirstPage = currentPage <= 1;\n    const isLastPage = currentPage >= totalPages;\n\n    const handlePrevious = () => {\n      if (!isFirstPage) onPageChange?.(currentPage - 1);\n    };\n\n    const handleNext = () => {\n      if (!isLastPage) onPageChange?.(currentPage + 1);\n    };\n\n    return (\n      <nav\n        ref={ref}\n        aria-label={ariaLabel}\n        className={cn(\n          \"inline-flex items-center pb-4\",\n          variant === \"default\" && \"gap-3\",\n          variant === \"dots\" && \"gap-4\",\n          className,\n        )}\n        {...props}\n      >\n        <IconButton\n          variant=\"tertiary\"\n          size=\"32\"\n          icon={<ChevronLeftIcon />}\n          aria-label={previousLabel}\n          disabled={isFirstPage}\n          onClick={handlePrevious}\n        />\n\n        {variant === \"default\" && (\n          <div className=\"flex items-center gap-3\">\n            {getVisiblePages(currentPage, totalPages).map((page) =>\n              typeof page === \"string\" ? (\n                <span\n                  key={page}\n                  className=\"flex size-4 items-center justify-center text-foreground-secondary text-xs\"\n                  aria-hidden=\"true\"\n                >\n                  &hellip;\n                </span>\n              ) : (\n                <button\n                  key={page}\n                  type=\"button\"\n                  aria-label={getPageLabel(page)}\n                  aria-current={page === currentPage ? \"page\" : undefined}\n                  onClick={() => onPageChange?.(page)}\n                  className={cn(\n                    \"flex size-4 cursor-pointer items-center justify-center rounded-full text-xs focus-visible:shadow-focus-ring focus-visible:outline-none motion-safe:transition-colors motion-safe:duration-150\",\n                    page === currentPage\n                      ? \"bg-neutral-400 text-foreground-inverse\"\n                      : \"bg-neutral-100 text-foreground-default hover:bg-neutral-200 active:bg-neutral-200\",\n                  )}\n                >\n                  {page}\n                </button>\n              ),\n            )}\n          </div>\n        )}\n\n        {variant === \"dots\" && (\n          <div className=\"flex items-center\">\n            {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (\n              <button\n                key={page}\n                type=\"button\"\n                aria-label={getPageLabel(page)}\n                aria-current={page === currentPage ? \"page\" : undefined}\n                onClick={() => onPageChange?.(page)}\n                className=\"flex size-6 cursor-pointer items-center justify-center rounded-full focus-visible:shadow-focus-ring focus-visible:outline-none\"\n              >\n                <span\n                  className={cn(\n                    \"block rounded-full motion-safe:transition-all motion-safe:duration-150\",\n                    page === currentPage\n                      ? \"size-2 bg-neutral-400\"\n                      : \"size-1.5 bg-neutral-200 hover:bg-neutral-250 active:bg-neutral-250\",\n                  )}\n                />\n              </button>\n            ))}\n          </div>\n        )}\n\n        <IconButton\n          variant=\"tertiary\"\n          size=\"32\"\n          icon={<ChevronRightIcon />}\n          aria-label={nextLabel}\n          disabled={isLastPage}\n          onClick={handleNext}\n        />\n      </nav>\n    );\n  },\n);\n\nPagination.displayName = \"Pagination\";\n"],"names":["React","jsxs","cn","jsx","IconButton","ChevronLeftIcon","ChevronRightIcon"],"mappings":"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"}

package/dist/cjs/components/PasswordField/PasswordField.cjs

@@ -37,7 +37,7 @@ const PasswordField = React__namespace.forwardRef(
         disabled,
         "aria-label": showPassword ? "Hide password" : "Show password",
         tabIndex: -1,
-        className: "flex size-5 shrink-0 items-center justify-center text-foreground-secondary transition-colors hover:text-foreground-default focus:outline-none disabled:cursor-not-allowed",
+        className: "flex size-5 shrink-0 cursor-default items-center justify-center text-foreground-secondary transition-colors hover:text-foreground-default focus:outline-none disabled:cursor-not-allowed",
         children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(EyeSlashIcon.EyeSlashIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(EyeIcon.EyeIcon, {})
       }
     );

package/dist/cjs/components/PasswordField/PasswordField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.cjs","sources":["../../../../src/components/PasswordField/PasswordField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { EyeIcon } from \"../Icons/EyeIcon\";\nimport { EyeSlashIcon } from \"../Icons/EyeSlashIcon\";\nimport { TextField, type TextFieldProps } from \"../TextField/TextField\";\n\nexport type PasswordFieldSize = \"48\" | \"40\" | \"32\";\n\nexport interface PasswordFieldProps extends Omit<TextFieldProps, \"type\" | \"rightIcon\"> {\n  /** Size variant of the password field */\n  size?: PasswordFieldSize;\n}\n\nexport const PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(\n  ({ disabled, ...props }, ref) => {\n    const [showPassword, setShowPassword] = React.useState(false);\n\n    const togglePasswordVisibility = () => {\n      setShowPassword((prev) => !prev);\n    };\n\n    const rightIcon = (\n      <button\n        type=\"button\"\n        onClick={togglePasswordVisibility}\n        disabled={disabled}\n        aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n        tabIndex={-1}\n        className=\"flex size-5 shrink-0 items-center justify-center text-foreground-secondary transition-colors hover:text-foreground-default focus:outline-none disabled:cursor-not-allowed\"\n      >\n        {showPassword ? <EyeSlashIcon /> : <EyeIcon />}\n      </button>\n    );\n\n    return (\n      <TextField\n        ref={ref}\n        type={showPassword ? \"text\" : \"password\"}\n        disabled={disabled}\n        rightIcon={rightIcon}\n        aria-label={!props.label ? \"Password field\" : undefined}\n        {...props}\n      />\n    );\n  },\n);\n\nPasswordField.displayName = \"PasswordField\";\n"],"names":["React","jsx","EyeSlashIcon","EyeIcon","TextField"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAM,gBAAgBA,iBAAM;AAAA,EACjC,CAAC,EAAE,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC/B,UAAM,CAAC,cAAc,eAAe,IAAIA,iBAAM,SAAS,KAAK;AAE5D,UAAM,2BAA2B,MAAM;AACrC,sBAAgB,CAAC,SAAS,CAAC,IAAI;AAAA,IACjC;AAEA,UAAM,YACJC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT;AAAA,QACA,cAAY,eAAe,kBAAkB;AAAA,QAC7C,UAAU;AAAA,QACV,WAAU;AAAA,QAET,UAAA,eAAeA,+BAACC,aAAAA,cAAA,CAAA,CAAa,mCAAMC,QAAAA,SAAA,CAAA,CAAQ;AAAA,MAAA;AAAA,IAAA;AAIhD,WACEF,2BAAAA;AAAAA,MAACG,UAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAM,eAAe,SAAS;AAAA,QAC9B;AAAA,QACA;AAAA,QACA,cAAY,CAAC,MAAM,QAAQ,mBAAmB;AAAA,QAC7C,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,cAAc,cAAc;;"}
+{"version":3,"file":"PasswordField.cjs","sources":["../../../../src/components/PasswordField/PasswordField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { EyeIcon } from \"../Icons/EyeIcon\";\nimport { EyeSlashIcon } from \"../Icons/EyeSlashIcon\";\nimport { TextField, type TextFieldProps } from \"../TextField/TextField\";\n\nexport type PasswordFieldSize = \"48\" | \"40\" | \"32\";\n\nexport interface PasswordFieldProps extends Omit<TextFieldProps, \"type\" | \"rightIcon\"> {\n  /** Size variant of the password field */\n  size?: PasswordFieldSize;\n}\n\nexport const PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(\n  ({ disabled, ...props }, ref) => {\n    const [showPassword, setShowPassword] = React.useState(false);\n\n    const togglePasswordVisibility = () => {\n      setShowPassword((prev) => !prev);\n    };\n\n    const rightIcon = (\n      <button\n        type=\"button\"\n        onClick={togglePasswordVisibility}\n        disabled={disabled}\n        aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n        tabIndex={-1}\n        className=\"flex size-5 shrink-0 cursor-default items-center justify-center text-foreground-secondary transition-colors hover:text-foreground-default focus:outline-none disabled:cursor-not-allowed\"\n      >\n        {showPassword ? <EyeSlashIcon /> : <EyeIcon />}\n      </button>\n    );\n\n    return (\n      <TextField\n        ref={ref}\n        type={showPassword ? \"text\" : \"password\"}\n        disabled={disabled}\n        rightIcon={rightIcon}\n        aria-label={!props.label ? \"Password field\" : undefined}\n        {...props}\n      />\n    );\n  },\n);\n\nPasswordField.displayName = \"PasswordField\";\n"],"names":["React","jsx","EyeSlashIcon","EyeIcon","TextField"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAM,gBAAgBA,iBAAM;AAAA,EACjC,CAAC,EAAE,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC/B,UAAM,CAAC,cAAc,eAAe,IAAIA,iBAAM,SAAS,KAAK;AAE5D,UAAM,2BAA2B,MAAM;AACrC,sBAAgB,CAAC,SAAS,CAAC,IAAI;AAAA,IACjC;AAEA,UAAM,YACJC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT;AAAA,QACA,cAAY,eAAe,kBAAkB;AAAA,QAC7C,UAAU;AAAA,QACV,WAAU;AAAA,QAET,UAAA,eAAeA,+BAACC,aAAAA,cAAA,CAAA,CAAa,mCAAMC,QAAAA,SAAA,CAAA,CAAQ;AAAA,MAAA;AAAA,IAAA;AAIhD,WACEF,2BAAAA;AAAAA,MAACG,UAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAM,eAAe,SAAS;AAAA,QAC9B;AAAA,QACA;AAAA,QACA,cAAY,CAAC,MAAM,QAAQ,mBAAmB;AAAA,QAC7C,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,cAAc,cAAc;;"}

package/dist/cjs/components/ProgressBar/ProgressBar.cjs

@@ -58,6 +58,7 @@ const ProgressBar = React__namespace.forwardRef(
     helperRight,
     leftIcon,
     ariaLabel,
+    ariaValueText,
     className,
     ...props
   }, ref) => {
@@ -92,6 +93,7 @@ const ProgressBar = React__namespace.forwardRef(
           "aria-valuenow": clampedValue,
           "aria-valuemin": 0,
           "aria-valuemax": 100,
+          "aria-valuetext": ariaValueText,
           className: cn.cn("relative w-full rounded-full bg-neutral-100", TRACK_HEIGHT[size]),
           children: /* @__PURE__ */ jsxRuntime.jsx(
             "div",

package/dist/cjs/components/ProgressBar/ProgressBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.cjs","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\n\n/** Track height — `\"default\"` (12px) or `\"small\"` (6px). */\nexport type ProgressBarSize = \"default\" | \"small\";\n/** Colour mode — `\"default\"` uses red/yellow/green by value, `\"generic\"` always uses brand green, `\"neutral\"` uses a theme-aware inverse colour. */\nexport type ProgressBarVariant = \"default\" | \"generic\" | \"neutral\";\n\nexport interface ProgressBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Current progress value, clamped to 0–100. */\n  value: number;\n  /** Track height — `\"default\"` (12px) or `\"small\"` (6px). @default \"default\" */\n  size?: ProgressBarSize;\n  /** Colour mode — `\"default\"` is colour-coded by value, `\"generic\"` always uses brand green, `\"neutral\"` uses a theme-aware inverse colour. @default \"default\" */\n  variant?: ProgressBarVariant;\n  /** Title content shown at the top-left of the bar. */\n  title?: React.ReactNode;\n  /** Whether to display the completion percentage above the track. @default false */\n  showCompletion?: boolean;\n  /** Steps label shown at the top-right (e.g. `\"2/8 steps\"`). */\n  stepsLabel?: React.ReactNode;\n  /** Helper content at the bottom-left of the bar. */\n  helperLeft?: React.ReactNode;\n  /** Helper content at the bottom-right of the bar. */\n  helperRight?: React.ReactNode;\n  /** Icon shown at the bottom-left before the helper text. */\n  leftIcon?: React.ReactNode;\n  /** Accessible label for the `progressbar` role. @default \"Progress\" */\n  ariaLabel?: string;\n}\n\nconst TRACK_HEIGHT: Record<ProgressBarSize, string> = {\n  default: \"h-3\",\n  small: \"h-1.5\",\n};\n\nconst GAP: Record<ProgressBarSize, string> = {\n  default: \"gap-3\",\n  small: \"gap-1\",\n};\n\nfunction getDefaultBarColor(value: number): string {\n  if (value >= 100) return \"bg-success-default\";\n  if (value >= 40) return \"bg-warning-default\";\n  return \"bg-error-default\";\n}\n\nfunction getDefaultTextColor(value: number): string {\n  if (value >= 100) return \"text-success-default\";\n  if (value >= 40) return \"text-warning-default\";\n  return \"text-error-default\";\n}\n\nfunction resolveColors(\n  variant: ProgressBarVariant,\n  value: number,\n): { barColor: string; textColor: string } {\n  if (variant === \"neutral\")\n    return { barColor: \"bg-foreground-tertiary\", textColor: \"text-foreground-tertiary\" };\n  if (variant === \"generic\")\n    return { barColor: \"bg-brand-accent-default\", textColor: \"text-brand-accent-default\" };\n  return { barColor: getDefaultBarColor(value), textColor: getDefaultTextColor(value) };\n}\n\n/**\n * A horizontal progress indicator with optional title, completion percentage,\n * step count, and helper text. The bar colour reflects progress when using the\n * `\"default\"` variant.\n *\n * @example\n * ```tsx\n * <ProgressBar value={65} title=\"Upload\" showCompletion />\n * ```\n */\nexport const ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(\n  (\n    {\n      value,\n      size = \"default\",\n      variant = \"default\",\n      title,\n      showCompletion = false,\n      stepsLabel,\n      helperLeft,\n      helperRight,\n      leftIcon,\n      ariaLabel,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const clampedValue = Math.min(100, Math.max(0, value));\n    const isSmall = size === \"small\";\n    const { barColor, textColor } = resolveColors(variant, clampedValue);\n\n    const showHeader = title != null || showCompletion || stepsLabel != null;\n    const showFooter = leftIcon != null || helperLeft != null || helperRight != null;\n\n    return (\n      <div ref={ref} className={cn(\"flex w-full flex-col\", GAP[size], className)} {...props}>\n        {showHeader && (\n          <div className=\"flex w-full items-end justify-between\">\n            {title != null && (\n              <p className=\"typography-semibold-body-sm text-foreground-default\">{title}</p>\n            )}\n            {showCompletion && (\n              <span\n                className={cn(\n                  textColor,\n                  isSmall ? \"typography-bold-heading-sm\" : \"typography-bold-heading-xl\",\n                )}\n              >\n                {Math.round(clampedValue)}%\n              </span>\n            )}\n            {stepsLabel != null && (\n              <span className=\"typography-regular-body-sm text-foreground-default\">\n                {stepsLabel}\n              </span>\n            )}\n          </div>\n        )}\n\n        <div\n          role=\"progressbar\"\n          aria-label={ariaLabel ?? \"Progress\"}\n          aria-valuenow={clampedValue}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          className={cn(\"relative w-full rounded-full bg-neutral-100\", TRACK_HEIGHT[size])}\n        >\n          <div\n            className={cn(\n              \"absolute inset-y-0 left-0 rounded-full transition-[width] duration-300 ease-in-out\",\n              barColor,\n            )}\n            style={{ width: `${clampedValue}%` }}\n          />\n        </div>\n\n        {showFooter && (\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"flex items-center gap-1\">\n              {leftIcon != null && (\n                <span className=\"flex size-5 items-center justify-center\" aria-hidden=\"true\">\n                  {leftIcon}\n                </span>\n              )}\n              {helperLeft != null && (\n                <span className=\"typography-regular-body-sm text-foreground-default\">\n                  {helperLeft}\n                </span>\n              )}\n            </div>\n            {helperRight != null && (\n              <span className=\"typography-regular-body-sm text-foreground-default\">\n                {helperRight}\n              </span>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nProgressBar.displayName = \"ProgressBar\";\n"],"names":["React","jsxs","cn","jsx"],"mappings":"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"}
+{"version":3,"file":"ProgressBar.cjs","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\n\n/** Track height — `\"default\"` (12px) or `\"small\"` (6px). */\nexport type ProgressBarSize = \"default\" | \"small\";\n/** Colour mode — `\"default\"` uses red/yellow/green by value, `\"generic\"` always uses brand green, `\"neutral\"` uses a theme-aware inverse colour. */\nexport type ProgressBarVariant = \"default\" | \"generic\" | \"neutral\";\n\nexport interface ProgressBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Current progress value, clamped to 0–100. */\n  value: number;\n  /** Track height — `\"default\"` (12px) or `\"small\"` (6px). @default \"default\" */\n  size?: ProgressBarSize;\n  /** Colour mode — `\"default\"` is colour-coded by value, `\"generic\"` always uses brand green, `\"neutral\"` uses a theme-aware inverse colour. @default \"default\" */\n  variant?: ProgressBarVariant;\n  /** Title content shown at the top-left of the bar. */\n  title?: React.ReactNode;\n  /** Whether to display the completion percentage above the track. @default false */\n  showCompletion?: boolean;\n  /** Steps label shown at the top-right (e.g. `\"2/8 steps\"`). */\n  stepsLabel?: React.ReactNode;\n  /** Helper content at the bottom-left of the bar. */\n  helperLeft?: React.ReactNode;\n  /** Helper content at the bottom-right of the bar. */\n  helperRight?: React.ReactNode;\n  /** Icon shown at the bottom-left before the helper text. */\n  leftIcon?: React.ReactNode;\n  /** Accessible label for the `progressbar` role. @default \"Progress\" */\n  ariaLabel?: string;\n  /** Human-readable text alternative for the current value (e.g. \"Step 3 of 5\"). */\n  ariaValueText?: string;\n}\n\nconst TRACK_HEIGHT: Record<ProgressBarSize, string> = {\n  default: \"h-3\",\n  small: \"h-1.5\",\n};\n\nconst GAP: Record<ProgressBarSize, string> = {\n  default: \"gap-3\",\n  small: \"gap-1\",\n};\n\nfunction getDefaultBarColor(value: number): string {\n  if (value >= 100) return \"bg-success-default\";\n  if (value >= 40) return \"bg-warning-default\";\n  return \"bg-error-default\";\n}\n\nfunction getDefaultTextColor(value: number): string {\n  if (value >= 100) return \"text-success-default\";\n  if (value >= 40) return \"text-warning-default\";\n  return \"text-error-default\";\n}\n\nfunction resolveColors(\n  variant: ProgressBarVariant,\n  value: number,\n): { barColor: string; textColor: string } {\n  if (variant === \"neutral\")\n    return { barColor: \"bg-foreground-tertiary\", textColor: \"text-foreground-tertiary\" };\n  if (variant === \"generic\")\n    return { barColor: \"bg-brand-accent-default\", textColor: \"text-brand-accent-default\" };\n  return { barColor: getDefaultBarColor(value), textColor: getDefaultTextColor(value) };\n}\n\n/**\n * A horizontal progress indicator with optional title, completion percentage,\n * step count, and helper text. The bar colour reflects progress when using the\n * `\"default\"` variant.\n *\n * @example\n * ```tsx\n * <ProgressBar value={65} title=\"Upload\" showCompletion />\n * ```\n */\nexport const ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(\n  (\n    {\n      value,\n      size = \"default\",\n      variant = \"default\",\n      title,\n      showCompletion = false,\n      stepsLabel,\n      helperLeft,\n      helperRight,\n      leftIcon,\n      ariaLabel,\n      ariaValueText,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const clampedValue = Math.min(100, Math.max(0, value));\n    const isSmall = size === \"small\";\n    const { barColor, textColor } = resolveColors(variant, clampedValue);\n\n    const showHeader = title != null || showCompletion || stepsLabel != null;\n    const showFooter = leftIcon != null || helperLeft != null || helperRight != null;\n\n    return (\n      <div ref={ref} className={cn(\"flex w-full flex-col\", GAP[size], className)} {...props}>\n        {showHeader && (\n          <div className=\"flex w-full items-end justify-between\">\n            {title != null && (\n              <p className=\"typography-semibold-body-sm text-foreground-default\">{title}</p>\n            )}\n            {showCompletion && (\n              <span\n                className={cn(\n                  textColor,\n                  isSmall ? \"typography-bold-heading-sm\" : \"typography-bold-heading-xl\",\n                )}\n              >\n                {Math.round(clampedValue)}%\n              </span>\n            )}\n            {stepsLabel != null && (\n              <span className=\"typography-regular-body-sm text-foreground-default\">\n                {stepsLabel}\n              </span>\n            )}\n          </div>\n        )}\n\n        <div\n          role=\"progressbar\"\n          aria-label={ariaLabel ?? \"Progress\"}\n          aria-valuenow={clampedValue}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          aria-valuetext={ariaValueText}\n          className={cn(\"relative w-full rounded-full bg-neutral-100\", TRACK_HEIGHT[size])}\n        >\n          <div\n            className={cn(\n              \"absolute inset-y-0 left-0 rounded-full transition-[width] duration-300 ease-in-out\",\n              barColor,\n            )}\n            style={{ width: `${clampedValue}%` }}\n          />\n        </div>\n\n        {showFooter && (\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"flex items-center gap-1\">\n              {leftIcon != null && (\n                <span className=\"flex size-5 items-center justify-center\" aria-hidden=\"true\">\n                  {leftIcon}\n                </span>\n              )}\n              {helperLeft != null && (\n                <span className=\"typography-regular-body-sm text-foreground-default\">\n                  {helperLeft}\n                </span>\n              )}\n            </div>\n            {helperRight != null && (\n              <span className=\"typography-regular-body-sm text-foreground-default\">\n                {helperRight}\n              </span>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nProgressBar.displayName = \"ProgressBar\";\n"],"names":["React","jsxs","cn","jsx"],"mappings":"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"}

package/dist/cjs/components/Tabs/TabsTrigger.cjs

@@ -23,10 +23,19 @@ function _interopNamespaceDefault(e) {
 }
 const TabsPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(TabsPrimitive);
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-const TabsTrigger = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+const TabsTrigger = React__namespace.forwardRef(({ className, children, onMouseDown, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TabsPrimitive__namespace.Trigger,
   {
     ref,
+    onMouseDown: (e) => {
+      if (e.button !== 0) {
+        onMouseDown?.(e);
+        return;
+      }
+      e.preventDefault();
+      if (!props.disabled) e.currentTarget.focus();
+      onMouseDown?.(e);
+    },
     className: cn.cn(
       "inline-flex min-w-0 items-center justify-center",
       "rounded-xs",

package/dist/cjs/components/Tabs/TabsTrigger.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabsTrigger.cjs","sources":["../../../../src/components/Tabs/TabsTrigger.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsTrigger} button component. */\nexport type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;\n\n/** An interactive tab button that activates its associated {@link TabsContent} panel when clicked. */\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, children, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"inline-flex min-w-0 items-center justify-center\",\n      \"rounded-xs\",\n      \"typography-semibold-body-lg cursor-pointer text-foreground-default\",\n      \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n      \"data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3\",\n      \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3\",\n      \"data-[state=active]:hover:text-neutral-350\",\n      \"data-[state=inactive]:hover:text-neutral-300\",\n      \"data-[state=active]:active:text-neutral-350\",\n      \"data-[state=inactive]:active:text-neutral-300\",\n      \"data-disabled:pointer-events-none\",\n      \"data-disabled:data-[state=active]:text-neutral-250\",\n      \"data-disabled:data-[state=inactive]:text-neutral-300\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-page\",\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"min-w-0 truncate\">{children}</span>\n  </TabsPrimitive.Trigger>\n));\n\nTabsTrigger.displayName = \"TabsTrigger\";\n"],"names":["React","jsx","TabsPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,cAAcA,iBAAM,WAG/B,CAAC,EAAE,WAAW,UAAU,GAAG,SAAS,QACpCC,2BAAAA;AAAAA,EAACC,yBAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAWC,GAAAA;AAAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,UAAAF,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,EAAA;AAC/C,CACD;AAED,YAAY,cAAc;;"}
+{"version":3,"file":"TabsTrigger.cjs","sources":["../../../../src/components/Tabs/TabsTrigger.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsTrigger} button component. */\nexport type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;\n\n/** An interactive tab button that activates its associated {@link TabsContent} panel when clicked. */\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, children, onMouseDown, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    onMouseDown={(e) => {\n      // Only intercept primary (left) button clicks. Right-click and other\n      // buttons should fall through untouched so context menus are unaffected.\n      if (e.button !== 0) {\n        onMouseDown?.(e);\n        return;\n      }\n      // Prevent :focus-visible from appearing on mouse clicks. Native focus is\n      // suppressed via preventDefault; we re-apply focus programmatically so\n      // the element remains focusable for keyboard users, but the browser won't\n      // mark the focus origin as \"pointer\", so Escape won't trigger the ring.\n      e.preventDefault();\n      if (!props.disabled) e.currentTarget.focus();\n      onMouseDown?.(e);\n    }}\n    className={cn(\n      \"inline-flex min-w-0 items-center justify-center\",\n      \"rounded-xs\",\n      \"typography-semibold-body-lg cursor-pointer text-foreground-default\",\n      \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n      \"data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3\",\n      \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3\",\n      \"data-[state=active]:hover:text-neutral-350\",\n      \"data-[state=inactive]:hover:text-neutral-300\",\n      \"data-[state=active]:active:text-neutral-350\",\n      \"data-[state=inactive]:active:text-neutral-300\",\n      \"data-disabled:pointer-events-none\",\n      \"data-disabled:data-[state=active]:text-neutral-250\",\n      \"data-disabled:data-[state=inactive]:text-neutral-300\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-page\",\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"min-w-0 truncate\">{children}</span>\n  </TabsPrimitive.Trigger>\n));\n\nTabsTrigger.displayName = \"TabsTrigger\";\n"],"names":["React","jsx","TabsPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,cAAcA,iBAAM,WAG/B,CAAC,EAAE,WAAW,UAAU,aAAa,GAAG,SAAS,QACjDC,2BAAAA;AAAAA,EAACC,yBAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,aAAa,CAAC,MAAM;AAGlB,UAAI,EAAE,WAAW,GAAG;AAClB,sBAAc,CAAC;AACf;AAAA,MACF;AAKA,QAAE,eAAA;AACF,UAAI,CAAC,MAAM,SAAU,GAAE,cAAc,MAAA;AACrC,oBAAc,CAAC;AAAA,IACjB;AAAA,IACA,WAAWC,GAAAA;AAAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,UAAAF,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,EAAA;AAC/C,CACD;AAED,YAAY,cAAc;;"}

package/dist/cjs/components/TextArea/TextArea.cjs

@@ -51,7 +51,7 @@ const CLEAR_BUTTON_RIGHT = {
 };
 function getContainerClassName(size, error, disabled) {
   return cn.cn(
-    "relative overflow-hidden rounded-xl border bg-neutral-100 has-focus-visible:outline-none motion-safe:transition-colors",
+    "relative rounded-xl border bg-neutral-100 has-focus-visible:outline-none motion-safe:transition-colors",
     error ? "border-error-default" : "border-transparent",
     !disabled && !error && "hover:border-neutral-400",
     CONTAINER_MIN_HEIGHT[size],

package/dist/cjs/components/TextArea/TextArea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.cjs","sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CheckOutlineIcon } from \"../Icons/CheckOutlineIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\n\n/** Text area height in pixels. */\nexport type TextAreaSize = \"48\" | \"40\" | \"32\";\n\nexport interface TextAreaProps\n  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"size\"> {\n  /** Label text displayed above the textarea. Also used as the accessible name. */\n  label?: string;\n  /** Helper text displayed below the textarea. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Minimum height of the text area in pixels. @default \"48\" */\n  size?: TextAreaSize;\n  /** Whether the text area is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the textarea. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Whether the text area is validated. @default false */\n  validated?: boolean;\n  /** Whether the text area stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n  /** Whether to show a clear button when text is present. @default false */\n  showClearButton?: boolean;\n  /** Callback fired when the clear button is clicked. Note: `onChange` is also called with an empty value when clearing. */\n  onClear?: () => void;\n  /** Minimum number of rows (lines) for the textarea. */\n  minRows?: number;\n  /** Maximum number of rows (lines) for the textarea. */\n  maxRows?: number;\n  /** Whether the textarea can be resized by the user. @default true */\n  resizable?: boolean;\n}\n\nconst CONTAINER_MIN_HEIGHT: Record<TextAreaSize, string> = {\n  \"48\": \"min-h-12\",\n  \"40\": \"min-h-10\",\n  \"32\": \"min-h-8\",\n};\n\nconst TEXTAREA_SIZE_CLASSES: Record<TextAreaSize, string> = {\n  \"48\": \"py-3 typography-regular-body-lg\",\n  \"40\": \"py-2 typography-regular-body-lg\",\n  \"32\": \"py-2 typography-regular-body-md\",\n};\n\nconst PADDING_HORIZONTAL: Record<TextAreaSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nconst PADDING_RIGHT_WITH_CLEAR: Record<TextAreaSize, string> = {\n  \"48\": \"pr-11\",\n  \"40\": \"pr-11\",\n  \"32\": \"pr-10\",\n};\n\nconst CLEAR_BUTTON_RIGHT: Record<TextAreaSize, string> = {\n  \"48\": \"right-4 top-3\",\n  \"40\": \"right-4 top-2\",\n  \"32\": \"right-3 top-2\",\n};\n\nfunction getContainerClassName(size: TextAreaSize, error: boolean, disabled?: boolean) {\n  return cn(\n    \"relative overflow-hidden rounded-xl border bg-neutral-100 has-focus-visible:outline-none motion-safe:transition-colors\",\n    error ? \"border-error-default\" : \"border-transparent\",\n    !disabled && !error && \"hover:border-neutral-400\",\n    CONTAINER_MIN_HEIGHT[size],\n    disabled && \"opacity-50\",\n  );\n}\n\nfunction getTextareaClassName(\n  size: TextAreaSize,\n  hasClearButton: boolean,\n  hasMinRows: boolean,\n  resizable: boolean,\n) {\n  return cn(\n    \"w-full rounded-xl bg-transparent text-foreground-default no-underline placeholder:text-foreground-secondary placeholder:opacity-40 focus:outline-none disabled:cursor-not-allowed\",\n    resizable ? \"resize-y\" : \"resize-none\",\n    !hasMinRows && \"min-h-[80px]\",\n    TEXTAREA_SIZE_CLASSES[size],\n    PADDING_HORIZONTAL[size],\n    hasClearButton ? PADDING_RIGHT_WITH_CLEAR[size] : \"\",\n  );\n}\n\nfunction TextAreaHelperText({\n  id,\n  error,\n  children,\n}: {\n  id: string;\n  error: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <p\n      id={id}\n      className={cn(\n        \"typography-regular-body-sm px-2 pt-1 pb-0.5\",\n        error ? \"text-error-default\" : \"text-foreground-secondary\",\n      )}\n    >\n      {children}\n    </p>\n  );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"TextArea: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\nfunction calculateMaxHeight(size: TextAreaSize, maxRows?: number): string | undefined {\n  if (!maxRows) return undefined;\n\n  // Line height is 24px for body-1 (sizes 48 and 40) and 20px for body-2 (size 32)\n  const lineHeight = size === \"32\" ? 20 : 24;\n  // py-2 = 8px, py-3 = 12px\n  const verticalPadding = size === \"32\" ? 8 : size === \"40\" ? 8 : 12;\n\n  return `${lineHeight * maxRows + verticalPadding * 2}px`;\n}\n\nfunction useTextAreaValue(\n  value: React.TextareaHTMLAttributes<HTMLTextAreaElement>[\"value\"],\n  defaultValue: React.TextareaHTMLAttributes<HTMLTextAreaElement>[\"defaultValue\"],\n  showClearButton: boolean,\n  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>,\n  onClear?: () => void,\n  textareaRef?: React.RefObject<HTMLTextAreaElement | null>,\n) {\n  const [internalValue, setInternalValue] = React.useState(defaultValue ?? \"\");\n  const resolvedValue = value !== undefined ? value : internalValue;\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setInternalValue(e.target.value);\n    onChange?.(e);\n  };\n\n  const handleClear = () => {\n    setInternalValue(\"\");\n\n    if (onChange && textareaRef?.current) {\n      const syntheticEvent = {\n        target: { ...textareaRef.current, value: \"\" },\n        currentTarget: { ...textareaRef.current, value: \"\" },\n      } as React.ChangeEvent<HTMLTextAreaElement>;\n      onChange(syntheticEvent);\n    }\n\n    onClear?.();\n  };\n\n  return {\n    resolvedValue,\n    displayValue: showClearButton ? resolvedValue : value,\n    resolvedDefaultValue: showClearButton ? undefined : defaultValue,\n    handleChange,\n    handleClear,\n  };\n}\n\n/**\n * A multi-line text input with optional label, helper/error text, and clear button.\n *\n * Provide at least one of `label`, `aria-label`, or `aria-labelledby` for\n * accessibility — a console warning is emitted in development if none are set.\n *\n * @example\n * ```tsx\n * <TextArea\n *   label=\"Description\"\n *   placeholder=\"Enter your description...\"\n *   showClearButton\n *   error={!!descError}\n *   errorMessage={descError}\n * />\n * ```\n */\nexport const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      validated = false,\n      className,\n      id,\n      disabled,\n      fullWidth = false,\n      showClearButton = false,\n      onClear,\n      value,\n      defaultValue,\n      onChange,\n      minRows,\n      maxRows,\n      resizable = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\n    const helperTextId = `${inputId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n    const maxHeight = calculateMaxHeight(size, maxRows);\n\n    const internalRef = React.useRef<HTMLTextAreaElement>(null);\n\n    const { resolvedValue, displayValue, resolvedDefaultValue, handleChange, handleClear } =\n      useTextAreaValue(value, defaultValue, showClearButton, onChange, onClear, internalRef);\n\n    const mergedRef = (node: HTMLTextAreaElement | null) => {\n      internalRef.current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n      }\n    };\n\n    const showClear = showClearButton && resolvedValue !== \"\" && !disabled;\n    const showValidated = validated && !showClear;\n    const ariaDescribedBy = bottomText ? helperTextId : undefined;\n    const textareaStyle = maxHeight ? { maxHeight } : undefined;\n\n    warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    return (\n      <div\n        className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n        data-disabled={disabled ? \"\" : undefined}\n        data-error={error ? \"\" : undefined}\n      >\n        {label && (\n          <label\n            htmlFor={inputId}\n            className=\"typography-semibold-body-sm px-1 pt-1 pb-2 text-foreground-default\"\n          >\n            {label}\n          </label>\n        )}\n\n        <div className={getContainerClassName(size, error, disabled)}>\n          <textarea\n            ref={mergedRef}\n            id={inputId}\n            disabled={disabled}\n            aria-describedby={ariaDescribedBy}\n            aria-invalid={error || undefined}\n            className={getTextareaClassName(size, showClear, !!minRows, resizable)}\n            value={displayValue}\n            defaultValue={resolvedDefaultValue}\n            onChange={handleChange}\n            rows={minRows}\n            style={textareaStyle}\n            {...props}\n          />\n\n          {showClear && (\n            <IconButton\n              variant=\"tertiary\"\n              size=\"24\"\n              icon={<CloseIcon />}\n              aria-label=\"Clear text\"\n              onClick={handleClear}\n              className={cn(\n                \"absolute flex size-5 items-center justify-center self-end\",\n                CLEAR_BUTTON_RIGHT[size],\n              )}\n            />\n          )}\n          {showValidated && (\n            <div\n              className={cn(\n                \"pointer-events-none absolute flex size-5 items-center justify-center\",\n                CLEAR_BUTTON_RIGHT[size],\n              )}\n            >\n              <CheckOutlineIcon className=\"text-success-default\" />\n            </div>\n          )}\n        </div>\n\n        {bottomText && (\n          <TextAreaHelperText id={helperTextId} error={error}>\n            {bottomText}\n          </TextAreaHelperText>\n        )}\n      </div>\n    );\n  },\n);\n\nTextArea.displayName = \"TextArea\";\n"],"names":["cn","jsx","React","jsxs","IconButton","CloseIcon","CheckOutlineIcon"],"mappings":"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"}
+{"version":3,"file":"TextArea.cjs","sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CheckOutlineIcon } from \"../Icons/CheckOutlineIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\n\n/** Text area height in pixels. */\nexport type TextAreaSize = \"48\" | \"40\" | \"32\";\n\nexport interface TextAreaProps\n  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"size\"> {\n  /** Label text displayed above the textarea. Also used as the accessible name. */\n  label?: string;\n  /** Helper text displayed below the textarea. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Minimum height of the text area in pixels. @default \"48\" */\n  size?: TextAreaSize;\n  /** Whether the text area is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the textarea. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Whether the text area is validated. @default false */\n  validated?: boolean;\n  /** Whether the text area stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n  /** Whether to show a clear button when text is present. @default false */\n  showClearButton?: boolean;\n  /** Callback fired when the clear button is clicked. Note: `onChange` is also called with an empty value when clearing. */\n  onClear?: () => void;\n  /** Minimum number of rows (lines) for the textarea. */\n  minRows?: number;\n  /** Maximum number of rows (lines) for the textarea. */\n  maxRows?: number;\n  /** Whether the textarea can be resized by the user. @default true */\n  resizable?: boolean;\n}\n\nconst CONTAINER_MIN_HEIGHT: Record<TextAreaSize, string> = {\n  \"48\": \"min-h-12\",\n  \"40\": \"min-h-10\",\n  \"32\": \"min-h-8\",\n};\n\nconst TEXTAREA_SIZE_CLASSES: Record<TextAreaSize, string> = {\n  \"48\": \"py-3 typography-regular-body-lg\",\n  \"40\": \"py-2 typography-regular-body-lg\",\n  \"32\": \"py-2 typography-regular-body-md\",\n};\n\nconst PADDING_HORIZONTAL: Record<TextAreaSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nconst PADDING_RIGHT_WITH_CLEAR: Record<TextAreaSize, string> = {\n  \"48\": \"pr-11\",\n  \"40\": \"pr-11\",\n  \"32\": \"pr-10\",\n};\n\nconst CLEAR_BUTTON_RIGHT: Record<TextAreaSize, string> = {\n  \"48\": \"right-4 top-3\",\n  \"40\": \"right-4 top-2\",\n  \"32\": \"right-3 top-2\",\n};\n\nfunction getContainerClassName(size: TextAreaSize, error: boolean, disabled?: boolean) {\n  return cn(\n    \"relative rounded-xl border bg-neutral-100 has-focus-visible:outline-none motion-safe:transition-colors\",\n    error ? \"border-error-default\" : \"border-transparent\",\n    !disabled && !error && \"hover:border-neutral-400\",\n    CONTAINER_MIN_HEIGHT[size],\n    disabled && \"opacity-50\",\n  );\n}\n\nfunction getTextareaClassName(\n  size: TextAreaSize,\n  hasClearButton: boolean,\n  hasMinRows: boolean,\n  resizable: boolean,\n) {\n  return cn(\n    \"w-full rounded-xl bg-transparent text-foreground-default no-underline placeholder:text-foreground-secondary placeholder:opacity-40 focus:outline-none disabled:cursor-not-allowed\",\n    resizable ? \"resize-y\" : \"resize-none\",\n    !hasMinRows && \"min-h-[80px]\",\n    TEXTAREA_SIZE_CLASSES[size],\n    PADDING_HORIZONTAL[size],\n    hasClearButton ? PADDING_RIGHT_WITH_CLEAR[size] : \"\",\n  );\n}\n\nfunction TextAreaHelperText({\n  id,\n  error,\n  children,\n}: {\n  id: string;\n  error: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <p\n      id={id}\n      className={cn(\n        \"typography-regular-body-sm px-2 pt-1 pb-0.5\",\n        error ? \"text-error-default\" : \"text-foreground-secondary\",\n      )}\n    >\n      {children}\n    </p>\n  );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"TextArea: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\nfunction calculateMaxHeight(size: TextAreaSize, maxRows?: number): string | undefined {\n  if (!maxRows) return undefined;\n\n  // Line height is 24px for body-1 (sizes 48 and 40) and 20px for body-2 (size 32)\n  const lineHeight = size === \"32\" ? 20 : 24;\n  // py-2 = 8px, py-3 = 12px\n  const verticalPadding = size === \"32\" ? 8 : size === \"40\" ? 8 : 12;\n\n  return `${lineHeight * maxRows + verticalPadding * 2}px`;\n}\n\nfunction useTextAreaValue(\n  value: React.TextareaHTMLAttributes<HTMLTextAreaElement>[\"value\"],\n  defaultValue: React.TextareaHTMLAttributes<HTMLTextAreaElement>[\"defaultValue\"],\n  showClearButton: boolean,\n  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>,\n  onClear?: () => void,\n  textareaRef?: React.RefObject<HTMLTextAreaElement | null>,\n) {\n  const [internalValue, setInternalValue] = React.useState(defaultValue ?? \"\");\n  const resolvedValue = value !== undefined ? value : internalValue;\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setInternalValue(e.target.value);\n    onChange?.(e);\n  };\n\n  const handleClear = () => {\n    setInternalValue(\"\");\n\n    if (onChange && textareaRef?.current) {\n      const syntheticEvent = {\n        target: { ...textareaRef.current, value: \"\" },\n        currentTarget: { ...textareaRef.current, value: \"\" },\n      } as React.ChangeEvent<HTMLTextAreaElement>;\n      onChange(syntheticEvent);\n    }\n\n    onClear?.();\n  };\n\n  return {\n    resolvedValue,\n    displayValue: showClearButton ? resolvedValue : value,\n    resolvedDefaultValue: showClearButton ? undefined : defaultValue,\n    handleChange,\n    handleClear,\n  };\n}\n\n/**\n * A multi-line text input with optional label, helper/error text, and clear button.\n *\n * Provide at least one of `label`, `aria-label`, or `aria-labelledby` for\n * accessibility — a console warning is emitted in development if none are set.\n *\n * @example\n * ```tsx\n * <TextArea\n *   label=\"Description\"\n *   placeholder=\"Enter your description...\"\n *   showClearButton\n *   error={!!descError}\n *   errorMessage={descError}\n * />\n * ```\n */\nexport const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      validated = false,\n      className,\n      id,\n      disabled,\n      fullWidth = false,\n      showClearButton = false,\n      onClear,\n      value,\n      defaultValue,\n      onChange,\n      minRows,\n      maxRows,\n      resizable = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\n    const helperTextId = `${inputId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n    const maxHeight = calculateMaxHeight(size, maxRows);\n\n    const internalRef = React.useRef<HTMLTextAreaElement>(null);\n\n    const { resolvedValue, displayValue, resolvedDefaultValue, handleChange, handleClear } =\n      useTextAreaValue(value, defaultValue, showClearButton, onChange, onClear, internalRef);\n\n    const mergedRef = (node: HTMLTextAreaElement | null) => {\n      internalRef.current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n      }\n    };\n\n    const showClear = showClearButton && resolvedValue !== \"\" && !disabled;\n    const showValidated = validated && !showClear;\n    const ariaDescribedBy = bottomText ? helperTextId : undefined;\n    const textareaStyle = maxHeight ? { maxHeight } : undefined;\n\n    warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    return (\n      <div\n        className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n        data-disabled={disabled ? \"\" : undefined}\n        data-error={error ? \"\" : undefined}\n      >\n        {label && (\n          <label\n            htmlFor={inputId}\n            className=\"typography-semibold-body-sm px-1 pt-1 pb-2 text-foreground-default\"\n          >\n            {label}\n          </label>\n        )}\n\n        <div className={getContainerClassName(size, error, disabled)}>\n          <textarea\n            ref={mergedRef}\n            id={inputId}\n            disabled={disabled}\n            aria-describedby={ariaDescribedBy}\n            aria-invalid={error || undefined}\n            className={getTextareaClassName(size, showClear, !!minRows, resizable)}\n            value={displayValue}\n            defaultValue={resolvedDefaultValue}\n            onChange={handleChange}\n            rows={minRows}\n            style={textareaStyle}\n            {...props}\n          />\n\n          {showClear && (\n            <IconButton\n              variant=\"tertiary\"\n              size=\"24\"\n              icon={<CloseIcon />}\n              aria-label=\"Clear text\"\n              onClick={handleClear}\n              className={cn(\n                \"absolute flex size-5 items-center justify-center self-end\",\n                CLEAR_BUTTON_RIGHT[size],\n              )}\n            />\n          )}\n          {showValidated && (\n            <div\n              className={cn(\n                \"pointer-events-none absolute flex size-5 items-center justify-center\",\n                CLEAR_BUTTON_RIGHT[size],\n              )}\n            >\n              <CheckOutlineIcon className=\"text-success-default\" />\n            </div>\n          )}\n        </div>\n\n        {bottomText && (\n          <TextAreaHelperText id={helperTextId} error={error}>\n            {bottomText}\n          </TextAreaHelperText>\n        )}\n      </div>\n    );\n  },\n);\n\nTextArea.displayName = \"TextArea\";\n"],"names":["cn","jsx","React","jsxs","IconButton","CloseIcon","CheckOutlineIcon"],"mappings":"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"}

package/dist/cjs/components/TextField/TextField.cjs

@@ -44,7 +44,7 @@ const ICON_SPACING = {
 };
 function getContainerClassName(size, error, disabled) {
   return cn.cn(
-    "flex items-center overflow-hidden rounded-xl border bg-neutral-100 has-focus-visible:outline-none motion-safe:transition-colors",
+    "flex items-center rounded-xl border bg-neutral-100 has-focus-visible:outline-none motion-safe:transition-colors",
     error ? "border-error-default" : "border-transparent",
     !disabled && !error && "hover:border-neutral-400",
     CONTAINER_HEIGHT[size],

package/dist/cjs/components/TextField/TextField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.cjs","sources":["../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { CheckOutlineIcon } from \"@/index\";\nimport { cn } from \"../../utils/cn\";\n\n/** Text field height in pixels. */\nexport type TextFieldSize = \"48\" | \"40\" | \"32\";\n\nexport interface TextFieldProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"prefix\"> {\n  /** Label text displayed above the input. Also used as the accessible name. */\n  label?: string;\n  /** Helper text displayed below the input. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Height of the text field in pixels. @default \"48\" */\n  size?: TextFieldSize;\n  /** Whether the text field is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the input. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Whether the text field is validated. @default false */\n  validated?: boolean;\n  /** Icon element displayed at the left side of the input. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed at the right side of the input. */\n  rightIcon?: React.ReactNode;\n  /** Whether the text field stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n}\n\nconst CONTAINER_HEIGHT: Record<TextFieldSize, string> = {\n  \"48\": \"h-12\",\n  \"40\": \"h-10\",\n  \"32\": \"h-8\",\n};\n\nconst INPUT_SIZE_CLASSES: Record<TextFieldSize, string> = {\n  \"48\": \"py-3 typography-regular-body-lg\",\n  \"40\": \"py-2 typography-regular-body-lg\",\n  \"32\": \"py-2 typography-regular-body-md\",\n};\n\nconst PADDING_HORIZONTAL: Record<TextFieldSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nconst ICON_SPACING: Record<TextFieldSize, string> = {\n  \"48\": \"gap-3\",\n  \"40\": \"gap-3\",\n  \"32\": \"gap-2\",\n};\n\nfunction getContainerClassName(size: TextFieldSize, error: boolean, disabled?: boolean) {\n  return cn(\n    \"flex items-center overflow-hidden rounded-xl border bg-neutral-100 has-focus-visible:outline-none motion-safe:transition-colors\",\n    error ? \"border-error-default\" : \"border-transparent\",\n    !disabled && !error && \"hover:border-neutral-400\",\n    CONTAINER_HEIGHT[size],\n    PADDING_HORIZONTAL[size],\n    ICON_SPACING[size],\n    disabled && \"opacity-50\",\n  );\n}\n\nfunction getInputClassName(size: TextFieldSize) {\n  return cn(\n    \"h-full min-w-0 flex-1 rounded-xl bg-transparent text-foreground-default no-underline placeholder:text-foreground-secondary placeholder:opacity-40 focus:outline-none disabled:cursor-not-allowed\",\n    INPUT_SIZE_CLASSES[size],\n  );\n}\n\nfunction TextFieldIcon({ children }: { children: React.ReactNode }) {\n  return (\n    <div className=\"flex size-5 shrink-0 items-center justify-center text-foreground-secondary\">\n      {children}\n    </div>\n  );\n}\n\nfunction TextFieldHelperText({\n  id,\n  error,\n  children,\n}: {\n  id: string;\n  error: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <p\n      id={id}\n      className={cn(\n        \"typography-regular-body-sm px-2 pt-1 pb-0.5\",\n        error ? \"text-error-default\" : \"text-foreground-secondary\",\n      )}\n    >\n      {children}\n    </p>\n  );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"TextField: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\n/**\n * A text input field with optional label, helper/error text, and icon slots.\n *\n * Provide at least one of `label`, `aria-label`, or `aria-labelledby` for\n * accessibility — a console warning is emitted in development if none are set.\n *\n * @example\n * ```tsx\n * <TextField\n *   label=\"Email\"\n *   placeholder=\"you@example.com\"\n *   error={!!emailError}\n *   errorMessage={emailError}\n * />\n * ```\n */\nexport const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      validated = false,\n      leftIcon,\n      rightIcon,\n      className,\n      id,\n      disabled,\n      fullWidth = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\n    const helperTextId = `${inputId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n\n    warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    return (\n      <div\n        className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n        data-disabled={disabled ? \"\" : undefined}\n        data-error={error ? \"\" : undefined}\n      >\n        {label && (\n          <label\n            htmlFor={inputId}\n            className=\"typography-semibold-body-sm px-1 pt-1 pb-2 text-foreground-default\"\n          >\n            {label}\n          </label>\n        )}\n\n        <div className={getContainerClassName(size, error, disabled)}>\n          {leftIcon && <TextFieldIcon>{leftIcon}</TextFieldIcon>}\n\n          <input\n            ref={ref}\n            id={inputId}\n            disabled={disabled}\n            aria-describedby={bottomText ? helperTextId : undefined}\n            aria-invalid={error || undefined}\n            className={cn(\n              getInputClassName(size),\n              // Hide native clear button for input[type=\"search\"] in WebKit browsers (Safari/Chrome)\n              \"[&[type='search']::-webkit-search-cancel-button]:hidden [&[type='search']::-webkit-search-cancel-button]:appearance-none\",\n            )}\n            {...props}\n          />\n\n          {rightIcon && <TextFieldIcon>{rightIcon}</TextFieldIcon>}\n          {validated && (\n            <TextFieldIcon>\n              <CheckOutlineIcon className=\"text-success-default\" />\n            </TextFieldIcon>\n          )}\n        </div>\n\n        {bottomText && (\n          <TextFieldHelperText id={helperTextId} error={error}>\n            {bottomText}\n          </TextFieldHelperText>\n        )}\n      </div>\n    );\n  },\n);\n\nTextField.displayName = \"TextField\";\n"],"names":["cn","jsx","React","jsxs","CheckOutlineIcon"],"mappings":"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"}
+{"version":3,"file":"TextField.cjs","sources":["../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { CheckOutlineIcon } from \"@/index\";\nimport { cn } from \"../../utils/cn\";\n\n/** Text field height in pixels. */\nexport type TextFieldSize = \"48\" | \"40\" | \"32\";\n\nexport interface TextFieldProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"prefix\"> {\n  /** Label text displayed above the input. Also used as the accessible name. */\n  label?: string;\n  /** Helper text displayed below the input. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Height of the text field in pixels. @default \"48\" */\n  size?: TextFieldSize;\n  /** Whether the text field is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the input. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Whether the text field is validated. @default false */\n  validated?: boolean;\n  /** Icon element displayed at the left side of the input. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed at the right side of the input. */\n  rightIcon?: React.ReactNode;\n  /** Whether the text field stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n}\n\nconst CONTAINER_HEIGHT: Record<TextFieldSize, string> = {\n  \"48\": \"h-12\",\n  \"40\": \"h-10\",\n  \"32\": \"h-8\",\n};\n\nconst INPUT_SIZE_CLASSES: Record<TextFieldSize, string> = {\n  \"48\": \"py-3 typography-regular-body-lg\",\n  \"40\": \"py-2 typography-regular-body-lg\",\n  \"32\": \"py-2 typography-regular-body-md\",\n};\n\nconst PADDING_HORIZONTAL: Record<TextFieldSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nconst ICON_SPACING: Record<TextFieldSize, string> = {\n  \"48\": \"gap-3\",\n  \"40\": \"gap-3\",\n  \"32\": \"gap-2\",\n};\n\nfunction getContainerClassName(size: TextFieldSize, error: boolean, disabled?: boolean) {\n  return cn(\n    \"flex items-center rounded-xl border bg-neutral-100 has-focus-visible:outline-none motion-safe:transition-colors\",\n    error ? \"border-error-default\" : \"border-transparent\",\n    !disabled && !error && \"hover:border-neutral-400\",\n    CONTAINER_HEIGHT[size],\n    PADDING_HORIZONTAL[size],\n    ICON_SPACING[size],\n    disabled && \"opacity-50\",\n  );\n}\n\nfunction getInputClassName(size: TextFieldSize) {\n  return cn(\n    \"h-full min-w-0 flex-1 rounded-xl bg-transparent text-foreground-default no-underline placeholder:text-foreground-secondary placeholder:opacity-40 focus:outline-none disabled:cursor-not-allowed\",\n    INPUT_SIZE_CLASSES[size],\n  );\n}\n\nfunction TextFieldIcon({ children }: { children: React.ReactNode }) {\n  return (\n    <div className=\"flex size-5 shrink-0 items-center justify-center text-foreground-secondary\">\n      {children}\n    </div>\n  );\n}\n\nfunction TextFieldHelperText({\n  id,\n  error,\n  children,\n}: {\n  id: string;\n  error: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <p\n      id={id}\n      className={cn(\n        \"typography-regular-body-sm px-2 pt-1 pb-0.5\",\n        error ? \"text-error-default\" : \"text-foreground-secondary\",\n      )}\n    >\n      {children}\n    </p>\n  );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"TextField: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\n/**\n * A text input field with optional label, helper/error text, and icon slots.\n *\n * Provide at least one of `label`, `aria-label`, or `aria-labelledby` for\n * accessibility — a console warning is emitted in development if none are set.\n *\n * @example\n * ```tsx\n * <TextField\n *   label=\"Email\"\n *   placeholder=\"you@example.com\"\n *   error={!!emailError}\n *   errorMessage={emailError}\n * />\n * ```\n */\nexport const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      validated = false,\n      leftIcon,\n      rightIcon,\n      className,\n      id,\n      disabled,\n      fullWidth = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\n    const helperTextId = `${inputId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n\n    warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    return (\n      <div\n        className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n        data-disabled={disabled ? \"\" : undefined}\n        data-error={error ? \"\" : undefined}\n      >\n        {label && (\n          <label\n            htmlFor={inputId}\n            className=\"typography-semibold-body-sm px-1 pt-1 pb-2 text-foreground-default\"\n          >\n            {label}\n          </label>\n        )}\n\n        <div className={getContainerClassName(size, error, disabled)}>\n          {leftIcon && <TextFieldIcon>{leftIcon}</TextFieldIcon>}\n\n          <input\n            ref={ref}\n            id={inputId}\n            disabled={disabled}\n            aria-describedby={bottomText ? helperTextId : undefined}\n            aria-invalid={error || undefined}\n            className={cn(\n              getInputClassName(size),\n              // Hide native clear button for input[type=\"search\"] in WebKit browsers (Safari/Chrome)\n              \"[&[type='search']::-webkit-search-cancel-button]:hidden [&[type='search']::-webkit-search-cancel-button]:appearance-none\",\n            )}\n            {...props}\n          />\n\n          {rightIcon && <TextFieldIcon>{rightIcon}</TextFieldIcon>}\n          {validated && (\n            <TextFieldIcon>\n              <CheckOutlineIcon className=\"text-success-default\" />\n            </TextFieldIcon>\n          )}\n        </div>\n\n        {bottomText && (\n          <TextFieldHelperText id={helperTextId} error={error}>\n            {bottomText}\n          </TextFieldHelperText>\n        )}\n      </div>\n    );\n  },\n);\n\nTextField.displayName = \"TextField\";\n"],"names":["cn","jsx","React","jsxs","CheckOutlineIcon"],"mappings":"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"}

package/dist/cjs/index.cjs

@@ -1,18 +1,27 @@
 "use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Accordion = require("./components/Accordion/Accordion.cjs");
+const AccordionContent = require("./components/Accordion/AccordionContent.cjs");
+const AccordionItem = require("./components/Accordion/AccordionItem.cjs");
+const AccordionTrigger = require("./components/Accordion/AccordionTrigger.cjs");
 const Alert = require("./components/Alert/Alert.cjs");
 const AudioUpload = require("./components/AudioUpload/AudioUpload.cjs");
 const useAudioRecorder = require("./components/AudioUpload/useAudioRecorder.cjs");
+const Autocomplete = require("./components/Autocomplete/Autocomplete.cjs");
 const Avatar = require("./components/Avatar/Avatar.cjs");
 const Badge = require("./components/Badge/Badge.cjs");
+const BottomNavigation = require("./components/BottomNavigation/BottomNavigation.cjs");
+const BottomNavigationAction = require("./components/BottomNavigation/BottomNavigationAction.cjs");
 const Breadcrumb = require("./components/Breadcrumb/Breadcrumb.cjs");
 const Button = require("./components/Button/Button.cjs");
 const Card = require("./components/Card/Card.cjs");
 const Checkbox = require("./components/Checkbox/Checkbox.cjs");
 const Chip = require("./components/Chip/Chip.cjs");
 const Count = require("./components/Count/Count.cjs");
+const Dialog = require("./components/Dialog/Dialog.cjs");
 const Divider = require("./components/Divider/Divider.cjs");
+const Drawer = require("./components/Drawer/Drawer.cjs");
 const IconButton = require("./components/IconButton/IconButton.cjs");
 const AddIcon = require("./components/Icons/AddIcon.cjs");
 const AIIcon = require("./components/Icons/AIIcon.cjs");
@@ -134,6 +143,7 @@ const WifiOnIcon = require("./components/Icons/WifiOnIcon.cjs");
 const WrenchIcon = require("./components/Icons/WrenchIcon.cjs");
 const Loader = require("./components/Loader/Loader.cjs");
 const Logo = require("./components/Logo/Logo.cjs");
+const MobileStepper = require("./components/MobileStepper/MobileStepper.cjs");
 const Pagination = require("./components/Pagination/Pagination.cjs");
 const PasswordField = require("./components/PasswordField/PasswordField.cjs");
 const Pill = require("./components/Pill/Pill.cjs");
@@ -157,14 +167,21 @@ const TextField = require("./components/TextField/TextField.cjs");
 const Toast = require("./components/Toast/Toast.cjs");
 const Tooltip = require("./components/Tooltip/Tooltip.cjs");
 const cn = require("./utils/cn.cjs");
+exports.Accordion = Accordion.Accordion;
+exports.AccordionContent = AccordionContent.AccordionContent;
+exports.AccordionItem = AccordionItem.AccordionItem;
+exports.AccordionTrigger = AccordionTrigger.AccordionTrigger;
 exports.Alert = Alert.Alert;
 exports.AudioUpload = AudioUpload.AudioUpload;
 exports.useAudioRecorder = useAudioRecorder.useAudioRecorder;
+exports.Autocomplete = Autocomplete.Autocomplete;
 exports.Avatar = Avatar.Avatar;
 exports.AvatarFallback = Avatar.AvatarFallback;
 exports.AvatarImage = Avatar.AvatarImage;
 exports.AvatarRoot = Avatar.AvatarRoot;
 exports.Badge = Badge.Badge;
+exports.BottomNavigation = BottomNavigation.BottomNavigation;
+exports.BottomNavigationAction = BottomNavigationAction.BottomNavigationAction;
 exports.Breadcrumb = Breadcrumb.Breadcrumb;
 exports.BreadcrumbItem = Breadcrumb.BreadcrumbItem;
 exports.BreadcrumbLink = Breadcrumb.BreadcrumbLink;
@@ -181,7 +198,26 @@ exports.CardTitle = Card.CardTitle;
 exports.Checkbox = Checkbox.Checkbox;
 exports.Chip = Chip.Chip;
 exports.Count = Count.Count;
+exports.Dialog = Dialog.Dialog;
+exports.DialogBody = Dialog.DialogBody;
+exports.DialogClose = Dialog.DialogClose;
+exports.DialogContent = Dialog.DialogContent;
+exports.DialogDescription = Dialog.DialogDescription;
+exports.DialogFooter = Dialog.DialogFooter;
+exports.DialogHeader = Dialog.DialogHeader;
+exports.DialogOverlay = Dialog.DialogOverlay;
+exports.DialogTitle = Dialog.DialogTitle;
+exports.DialogTrigger = Dialog.DialogTrigger;
 exports.Divider = Divider.Divider;
+exports.Drawer = Drawer.Drawer;
+exports.DrawerClose = Drawer.DrawerClose;
+exports.DrawerContent = Drawer.DrawerContent;
+exports.DrawerDescription = Drawer.DrawerDescription;
+exports.DrawerFooter = Drawer.DrawerFooter;
+exports.DrawerHeader = Drawer.DrawerHeader;
+exports.DrawerOverlay = Drawer.DrawerOverlay;
+exports.DrawerTitle = Drawer.DrawerTitle;
+exports.DrawerTrigger = Drawer.DrawerTrigger;
 exports.IconButton = IconButton.IconButton;
 exports.AddIcon = AddIcon.AddIcon;
 exports.AIIcon = AIIcon.AIIcon;
@@ -303,6 +339,7 @@ exports.WifiOnIcon = WifiOnIcon.WifiOnIcon;
 exports.WrenchIcon = WrenchIcon.WrenchIcon;
 exports.Loader = Loader.Loader;
 exports.Logo = Logo.Logo;
+exports.MobileStepper = MobileStepper.MobileStepper;
 exports.Pagination = Pagination.Pagination;
 exports.PasswordField = PasswordField.PasswordField;
 exports.Pill = Pill.Pill;

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Accordion/Accordion.mjs

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const Accordion = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Root, { ref, className: cn("space-y-2", className), ...props }));
+Accordion.displayName = "Accordion";
+export {
+  Accordion
+};
+//# sourceMappingURL=Accordion.mjs.map

package/dist/components/Accordion/Accordion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.mjs","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link Accordion} root component. Extends Radix `Accordion.Root` props. */\nexport type AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>;\n\n/**\n * Root container for an accordion interface. Manages the expand/collapse state\n * and coordinates {@link AccordionItem}, {@link AccordionTrigger}, and {@link AccordionContent}.\n *\n * Built on Radix UI `Accordion`.\n *\n * @example\n * ```tsx\n * <Accordion type=\"single\" collapsible>\n *   <AccordionItem value=\"item-1\">\n *     <AccordionTrigger>Section 1</AccordionTrigger>\n *     <AccordionContent>Content 1</AccordionContent>\n *   </AccordionItem>\n *   <AccordionItem value=\"item-2\">\n *     <AccordionTrigger>Section 2</AccordionTrigger>\n *     <AccordionContent>Content 2</AccordionContent>\n *   </AccordionItem>\n * </Accordion>\n * ```\n */\nexport const Accordion = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Root>,\n  AccordionProps\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Root ref={ref} className={cn(\"space-y-2\", className)} {...props} />\n));\n\nAccordion.displayName = \"Accordion\";\n"],"names":[],"mappings":";;;;;AA2BO,MAAM,YAAY,MAAM,WAG7B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B,oBAAC,mBAAmB,MAAnB,EAAwB,KAAU,WAAW,GAAG,aAAa,SAAS,GAAI,GAAG,OAAO,CACtF;AAED,UAAU,cAAc;"}

package/dist/components/Accordion/AccordionContent.mjs

@@ -0,0 +1,26 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const AccordionContent = React.forwardRef(({ className, children, noPadding, ...props }, ref) => /* @__PURE__ */ jsx(
+  AccordionPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "overflow-hidden",
+      "typography-regular-body-md text-foreground-secondary",
+      "motion-safe:data-[state=closed]:animate-accordion-collapse",
+      "motion-safe:data-[state=open]:animate-accordion-expand",
+      !noPadding && "px-3 pb-3",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx("div", { className: "min-w-0 overflow-wrap-anywhere", children })
+  }
+));
+AccordionContent.displayName = "AccordionContent";
+export {
+  AccordionContent
+};
+//# sourceMappingURL=AccordionContent.mjs.map

package/dist/components/Accordion/AccordionContent.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionContent.mjs","sources":["../../../src/components/Accordion/AccordionContent.tsx"],"sourcesContent":["import * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link AccordionContent} panel component. */\nexport type AccordionContentProps = React.ComponentPropsWithoutRef<\n  typeof AccordionPrimitive.Content\n> & {\n  /** Remove the default inner padding (`px-3 pb-3`). Useful when you need custom content layout. */\n  noPadding?: boolean;\n};\n\n/** Renders the collapsible content panel for an {@link AccordionItem}. Animates open and closed. */\nexport const AccordionContent = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Content>,\n  AccordionContentProps\n>(({ className, children, noPadding, ...props }, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"overflow-hidden\",\n      \"typography-regular-body-md text-foreground-secondary\",\n      \"motion-safe:data-[state=closed]:animate-accordion-collapse\",\n      \"motion-safe:data-[state=open]:animate-accordion-expand\",\n      !noPadding && \"px-3 pb-3\",\n      className,\n    )}\n    {...props}\n  >\n    <div className=\"min-w-0 overflow-wrap-anywhere\">{children}</div>\n  </AccordionPrimitive.Content>\n));\n\nAccordionContent.displayName = \"AccordionContent\";\n"],"names":[],"mappings":";;;;;AAaO,MAAM,mBAAmB,MAAM,WAGpC,CAAC,EAAE,WAAW,UAAU,WAAW,GAAG,SAAS,QAC/C;AAAA,EAAC,mBAAmB;AAAA,EAAnB;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,CAAC,aAAa;AAAA,MACd;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,UAAA,oBAAC,OAAA,EAAI,WAAU,kCAAkC,SAAA,CAAS;AAAA,EAAA;AAC5D,CACD;AAED,iBAAiB,cAAc;"}

package/dist/components/Accordion/AccordionItem.mjs

@@ -0,0 +1,22 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const AccordionItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AccordionPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "overflow-hidden rounded-xl bg-surface-container",
+      "border border-neutral-200",
+      className
+    ),
+    ...props
+  }
+));
+AccordionItem.displayName = "AccordionItem";
+export {
+  AccordionItem
+};
+//# sourceMappingURL=AccordionItem.mjs.map

package/dist/components/Accordion/AccordionItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.mjs","sources":["../../../src/components/Accordion/AccordionItem.tsx"],"sourcesContent":["import * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link AccordionItem} component. */\nexport type AccordionItemProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>;\n\n/** A single collapsible section within an {@link Accordion}. Contains an {@link AccordionTrigger} and {@link AccordionContent}. */\nexport const AccordionItem = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Item>,\n  AccordionItemProps\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"overflow-hidden rounded-xl bg-surface-container\",\n      \"border border-neutral-200\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nAccordionItem.displayName = \"AccordionItem\";\n"],"names":[],"mappings":";;;;;AAQO,MAAM,gBAAgB,MAAM,WAGjC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,mBAAmB;AAAA,EAAnB;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AAED,cAAc,cAAc;"}

package/dist/components/Accordion/AccordionTrigger.mjs

@@ -0,0 +1,37 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+import { ChevronDownIcon } from "../Icons/ChevronDownIcon.mjs";
+const AccordionTrigger = React.forwardRef(({ className, children, icon, ...props }, ref) => {
+  const showIcon = icon !== null;
+  const iconElement = icon === void 0 ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 shrink-0 text-foreground-secondary" }) : icon;
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+    AccordionPrimitive.Trigger,
+    {
+      ref,
+      className: cn(
+        "flex flex-1 items-center justify-between gap-3",
+        "rounded-xl px-3 py-3",
+        "typography-semibold-body-md text-foreground-default",
+        "cursor-pointer",
+        "motion-safe:transition-colors motion-safe:duration-200 motion-safe:ease-in-out",
+        "hover:bg-neutral-100",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-page",
+        "data-disabled:pointer-events-none data-disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left", children }),
+        showIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 motion-safe:transition-transform motion-safe:duration-200 [[data-state=open]>&]:rotate-180", children: iconElement })
+      ]
+    }
+  ) });
+});
+AccordionTrigger.displayName = "AccordionTrigger";
+export {
+  AccordionTrigger
+};
+//# sourceMappingURL=AccordionTrigger.mjs.map

package/dist/components/Accordion/AccordionTrigger.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionTrigger.mjs","sources":["../../../src/components/Accordion/AccordionTrigger.tsx"],"sourcesContent":["import * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\n\n/** Props for the {@link AccordionTrigger} button component. */\nexport type AccordionTriggerProps = React.ComponentPropsWithoutRef<\n  typeof AccordionPrimitive.Trigger\n> & {\n  /** Custom icon element. Defaults to `ChevronDownIcon`. Pass `null` to suppress the icon entirely. */\n  icon?: React.ReactNode | null;\n};\n\n/** An interactive button that toggles the visibility of its associated {@link AccordionContent} panel. */\nexport const AccordionTrigger = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Trigger>,\n  AccordionTriggerProps\n>(({ className, children, icon, ...props }, ref) => {\n  const showIcon = icon !== null;\n  const iconElement =\n    icon === undefined ? (\n      <ChevronDownIcon className=\"size-4 shrink-0 text-foreground-secondary\" />\n    ) : (\n      icon\n    );\n\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        ref={ref}\n        className={cn(\n          \"flex flex-1 items-center justify-between gap-3\",\n          \"rounded-xl px-3 py-3\",\n          \"typography-semibold-body-md text-foreground-default\",\n          \"cursor-pointer\",\n          \"motion-safe:transition-colors motion-safe:duration-200 motion-safe:ease-in-out\",\n          \"hover:bg-neutral-100\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-page\",\n          \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        <span className=\"min-w-0 flex-1 truncate text-left\">{children}</span>\n        {showIcon && (\n          <span className=\"shrink-0 motion-safe:transition-transform motion-safe:duration-200 [[data-state=open]>&]:rotate-180\">\n            {iconElement}\n          </span>\n        )}\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n});\n\nAccordionTrigger.displayName = \"AccordionTrigger\";\n"],"names":[],"mappings":";;;;;;AAcO,MAAM,mBAAmB,MAAM,WAGpC,CAAC,EAAE,WAAW,UAAU,MAAM,GAAG,MAAA,GAAS,QAAQ;AAClD,QAAM,WAAW,SAAS;AAC1B,QAAM,cACJ,SAAS,6BACN,iBAAA,EAAgB,WAAU,6CAA4C,IAEvE;AAGJ,SACE,oBAAC,mBAAmB,QAAnB,EAA0B,WAAU,QACnC,UAAA;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,qCAAqC,SAAA,CAAS;AAAA,QAC7D,YACC,oBAAC,QAAA,EAAK,WAAU,uGACb,UAAA,YAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ,CAAC;AAED,iBAAiB,cAAc;"}