npm - @pk-design/react-tailwind - Versions diffs - 1.11.0 → 1.11.1 - Mend

@pk-design/react-tailwind 1.11.0 → 1.11.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/cjs/components/SegmentedControl/SegmentedControl.js CHANGED Viewed

@@ -53,9 +53,13 @@ const SegmentedControl = React.forwardRef((props, ref) => {
                     if (!isOptionDisabled) {
                         onChange(option.value);
                     }
-                }, onKeyDown: (e) => handleKeyDown(e, index), className: buildClassname.buildClassName('inline-flex items-center justify-center gap-1.5 transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)]', SIZE_OPTION_CLASS[size], fullWidth ? 'flex-1' : '', isOptionDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer', isSelected
+                }, onKeyDown: (e) => handleKeyDown(e, index), className: buildClassname.buildClassName('inline-flex items-center justify-center gap-1.5 transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)]', SIZE_OPTION_CLASS[size],
+                // Full width splits the row equally, so the width comes from the
+                // row, not padding; tight side padding keeps labels on one line
+                // on narrow screens.
+                fullWidth ? 'min-w-0 flex-1 px-1.5' : '', isOptionDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer', isSelected
                     ? 'bg-white text-[var(--ui-primary)] dark:bg-gray-700 dark:text-blue-400 shadow-xs font-semibold'
-                    : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100'), "data-testid": `segmented-option-${option.value}`, children: [option.icon && (jsxRuntime.jsx("span", { className: buildClassname.buildClassName('shrink-0 inline-flex items-center justify-center', SIZE_ICON_CLASS[size]), children: option.icon })), jsxRuntime.jsx("span", { children: option.label })] }, option.value));
+                    : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100'), "data-testid": `segmented-option-${option.value}`, children: [option.icon && (jsxRuntime.jsx("span", { className: buildClassname.buildClassName('shrink-0 inline-flex items-center justify-center', SIZE_ICON_CLASS[size]), children: option.icon })), jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: option.label })] }, option.value));
         }) }));
 });
 SegmentedControl.displayName = 'SegmentedControl';

package/dist/cjs/components/SegmentedControl/SegmentedControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SegmentedControl.js","sources":["../../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport type { SegmentedControlProps } from './SegmentedControl.types'\n\nconst SIZE_CONTAINER_CLASS = {\n sm: 'p-0.5 gap-0.5 rounded-lg text-xs',\n md: 'p-1 gap-1 rounded-xl text-sm',\n lg: 'p-1.5 gap-1.5 rounded-xl text-base',\n}\n\nconst SIZE_OPTION_CLASS = {\n sm: 'px-2 py-1 text-xs font-medium rounded-md',\n md: 'px-3 py-1.5 text-sm font-semibold rounded-lg',\n lg: 'px-4 py-2 text-base font-semibold rounded-lg',\n}\n\nconst SIZE_ICON_CLASS = {\n sm: 'size-3.5',\n md: 'size-4',\n lg: 'size-5',\n}\n\nexport const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>((props, ref) => {\n const {\n options,\n value,\n onChange,\n disabled = false,\n size = 'md',\n fullWidth = false,\n className,\n ...restProps\n } = props\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>, currentIndex: number) => {\n const enabledOptions = options.filter((opt) => !opt.disabled && !disabled)\n if (enabledOptions.length === 0) return\n\n if (e.key === 'ArrowRight' \|\| e.key === 'ArrowDown') {\n e.preventDefault()\n const currentPos = enabledOptions.findIndex(\n (opt) => opt.value === options[currentIndex].value,\n )\n const nextPos = (currentPos + 1) % enabledOptions.length\n onChange(enabledOptions[nextPos].value)\n } else if (e.key === 'ArrowLeft' \|\| e.key === 'ArrowUp') {\n e.preventDefault()\n const currentPos = enabledOptions.findIndex(\n (opt) => opt.value === options[currentIndex].value,\n )\n const prevPos = (currentPos - 1 + enabledOptions.length) % enabledOptions.length\n onChange(enabledOptions[prevPos].value)\n } else if (e.key === 'Home') {\n e.preventDefault()\n onChange(enabledOptions[0].value)\n } else if (e.key === 'End') {\n e.preventDefault()\n onChange(enabledOptions[enabledOptions.length - 1].value)\n }\n }\n\n return (\n <div\n ref={ref}\n role=\"tablist\"\n aria-orientation=\"horizontal\"\n className={buildClassName(\n 'inline-flex items-center border border-[var(--ui-border)] bg-gray-100/80 dark:bg-gray-800/80',\n SIZE_CONTAINER_CLASS[size],\n fullWidth ? 'w-full flex' : '',\n disabled ? 'opacity-60 cursor-not-allowed' : '',\n className,\n )}\n data-testid=\"segmented-control\"\n {...restProps}\n >\n {options.map((option, index) => {\n const isSelected = value === option.value\n const isOptionDisabled = disabled \|\| option.disabled\n\n return (\n <button\n key={option.value}\n type=\"button\"\n role=\"tab\"\n aria-selected={isSelected}\n aria-disabled={isOptionDisabled}\n tabIndex={isSelected && !isOptionDisabled ? 0 : -1}\n disabled={isOptionDisabled}\n title={option.title}\n onClick={() => {\n if (!isOptionDisabled) {\n onChange(option.value)\n }\n }}\n onKeyDown={(e) => handleKeyDown(e, index)}\n className={buildClassName(\n 'inline-flex items-center justify-center gap-1.5 transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)]',\n SIZE_OPTION_CLASS[size],\n fullWidth ? 'flex-1' : '',\n isOptionDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',\n isSelected\n ? 'bg-white text-[var(--ui-primary)] dark:bg-gray-700 dark:text-blue-400 shadow-xs font-semibold'\n : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100',\n )}\n data-testid={`segmented-option-${option.value}`}\n >\n {option.icon && (\n <span\n className={buildClassName(\n 'shrink-0 inline-flex items-center justify-center',\n SIZE_ICON_CLASS[size],\n )}\n >\n {option.icon}\n </span>\n )}\n <span>{option.label}</span>\n </button>\n )\n })}\n </div>\n )\n})\n\nSegmentedControl.displayName = 'SegmentedControl'\n"],"names":["forwardRef","_jsx","buildClassName","_jsxs"],"mappings":"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~~EACvB~~,SAAS,GAAG,~~QAAQ~~,GAAG,EAAE,~~EACzB~~,gBAAgB,GAAG,+BAA+B,GAAG,gBAAgB,EACrE;AACE,sBAAE;sBACA,+EAA+E,CACpF,EAAA,aAAA,EACY,oBAAoB,MAAM,CAAC,KAAK,CAAA,CAAE,EAAA,QAAA,EAAA,CAE9C,MAAM,CAAC,IAAI,KACVD,cAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAEC,6BAAc,CACvB,kDAAkD,EAClD,eAAe,CAAC,IAAI,CAAC,CACtB,~~EAAA~~,~~QAAA,EAEA,~~MAAM,CAAC,IAAI,~~GACP~~,CACR,~~EACDD~~,~~mCAAO~~,MAAM,CAAC,KAAK,EAAA,CAAQ,CAAA,EAAA,~~EAnCtB~~,MAAM,CAAC,KAAK,~~CAoCV~~;QAEb,CAAC,CAAC,EAAA,CACE;AAEV,CAAC;AAED,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;;;;"}
1	+ {"version":3,"file":"SegmentedControl.js","sources":["../../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport type { SegmentedControlProps } from './SegmentedControl.types'\n\nconst SIZE_CONTAINER_CLASS = {\n sm: 'p-0.5 gap-0.5 rounded-lg text-xs',\n md: 'p-1 gap-1 rounded-xl text-sm',\n lg: 'p-1.5 gap-1.5 rounded-xl text-base',\n}\n\nconst SIZE_OPTION_CLASS = {\n sm: 'px-2 py-1 text-xs font-medium rounded-md',\n md: 'px-3 py-1.5 text-sm font-semibold rounded-lg',\n lg: 'px-4 py-2 text-base font-semibold rounded-lg',\n}\n\nconst SIZE_ICON_CLASS = {\n sm: 'size-3.5',\n md: 'size-4',\n lg: 'size-5',\n}\n\nexport const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>((props, ref) => {\n const {\n options,\n value,\n onChange,\n disabled = false,\n size = 'md',\n fullWidth = false,\n className,\n ...restProps\n } = props\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>, currentIndex: number) => {\n const enabledOptions = options.filter((opt) => !opt.disabled && !disabled)\n if (enabledOptions.length === 0) return\n\n if (e.key === 'ArrowRight' \|\| e.key === 'ArrowDown') {\n e.preventDefault()\n const currentPos = enabledOptions.findIndex(\n (opt) => opt.value === options[currentIndex].value,\n )\n const nextPos = (currentPos + 1) % enabledOptions.length\n onChange(enabledOptions[nextPos].value)\n } else if (e.key === 'ArrowLeft' \|\| e.key === 'ArrowUp') {\n e.preventDefault()\n const currentPos = enabledOptions.findIndex(\n (opt) => opt.value === options[currentIndex].value,\n )\n const prevPos = (currentPos - 1 + enabledOptions.length) % enabledOptions.length\n onChange(enabledOptions[prevPos].value)\n } else if (e.key === 'Home') {\n e.preventDefault()\n onChange(enabledOptions[0].value)\n } else if (e.key === 'End') {\n e.preventDefault()\n onChange(enabledOptions[enabledOptions.length - 1].value)\n }\n }\n\n return (\n <div\n ref={ref}\n role=\"tablist\"\n aria-orientation=\"horizontal\"\n className={buildClassName(\n 'inline-flex items-center border border-[var(--ui-border)] bg-gray-100/80 dark:bg-gray-800/80',\n SIZE_CONTAINER_CLASS[size],\n fullWidth ? 'w-full flex' : '',\n disabled ? 'opacity-60 cursor-not-allowed' : '',\n className,\n )}\n data-testid=\"segmented-control\"\n {...restProps}\n >\n {options.map((option, index) => {\n const isSelected = value === option.value\n const isOptionDisabled = disabled \|\| option.disabled\n\n return (\n <button\n key={option.value}\n type=\"button\"\n role=\"tab\"\n aria-selected={isSelected}\n aria-disabled={isOptionDisabled}\n tabIndex={isSelected && !isOptionDisabled ? 0 : -1}\n disabled={isOptionDisabled}\n title={option.title}\n onClick={() => {\n if (!isOptionDisabled) {\n onChange(option.value)\n }\n }}\n onKeyDown={(e) => handleKeyDown(e, index)}\n className={buildClassName(\n 'inline-flex items-center justify-center gap-1.5 transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)]',\n SIZE_OPTION_CLASS[size],\n // Full width splits the row equally, so the width comes from the\n // row, not padding; tight side padding keeps labels on one line\n // on narrow screens.\n fullWidth ? 'min-w-0 flex-1 px-1.5' : '',\n isOptionDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',\n isSelected\n ? 'bg-white text-[var(--ui-primary)] dark:bg-gray-700 dark:text-blue-400 shadow-xs font-semibold'\n : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100',\n )}\n data-testid={`segmented-option-${option.value}`}\n >\n {option.icon && (\n <span\n className={buildClassName(\n 'shrink-0 inline-flex items-center justify-center',\n SIZE_ICON_CLASS[size],\n )}\n >\n {option.icon}\n </span>\n )}\n {/* A label never wraps; if there's truly no room it's cut off. */}\n <span className=\"min-w-0 truncate\">{option.label}</span>\n </button>\n )\n })}\n </div>\n )\n})\n\nSegmentedControl.displayName = 'SegmentedControl'\n"],"names":["forwardRef","_jsx","buildClassName","_jsxs"],"mappings":"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"}

package/dist/es/components/SegmentedControl/SegmentedControl.js CHANGED Viewed

@@ -51,9 +51,13 @@ const SegmentedControl = forwardRef((props, ref) => {
                     if (!isOptionDisabled) {
                         onChange(option.value);
                     }
-                }, onKeyDown: (e) => handleKeyDown(e, index), className: buildClassName('inline-flex items-center justify-center gap-1.5 transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)]', SIZE_OPTION_CLASS[size], fullWidth ? 'flex-1' : '', isOptionDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer', isSelected
+                }, onKeyDown: (e) => handleKeyDown(e, index), className: buildClassName('inline-flex items-center justify-center gap-1.5 transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)]', SIZE_OPTION_CLASS[size],
+                // Full width splits the row equally, so the width comes from the
+                // row, not padding; tight side padding keeps labels on one line
+                // on narrow screens.
+                fullWidth ? 'min-w-0 flex-1 px-1.5' : '', isOptionDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer', isSelected
                     ? 'bg-white text-[var(--ui-primary)] dark:bg-gray-700 dark:text-blue-400 shadow-xs font-semibold'
-                    : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100'), "data-testid": `segmented-option-${option.value}`, children: [option.icon && (jsx("span", { className: buildClassName('shrink-0 inline-flex items-center justify-center', SIZE_ICON_CLASS[size]), children: option.icon })), jsx("span", { children: option.label })] }, option.value));
+                    : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100'), "data-testid": `segmented-option-${option.value}`, children: [option.icon && (jsx("span", { className: buildClassName('shrink-0 inline-flex items-center justify-center', SIZE_ICON_CLASS[size]), children: option.icon })), jsx("span", { className: "min-w-0 truncate", children: option.label })] }, option.value));
         }) }));
 });
 SegmentedControl.displayName = 'SegmentedControl';

package/dist/es/components/SegmentedControl/SegmentedControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SegmentedControl.js","sources":["../../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport type { SegmentedControlProps } from './SegmentedControl.types'\n\nconst SIZE_CONTAINER_CLASS = {\n sm: 'p-0.5 gap-0.5 rounded-lg text-xs',\n md: 'p-1 gap-1 rounded-xl text-sm',\n lg: 'p-1.5 gap-1.5 rounded-xl text-base',\n}\n\nconst SIZE_OPTION_CLASS = {\n sm: 'px-2 py-1 text-xs font-medium rounded-md',\n md: 'px-3 py-1.5 text-sm font-semibold rounded-lg',\n lg: 'px-4 py-2 text-base font-semibold rounded-lg',\n}\n\nconst SIZE_ICON_CLASS = {\n sm: 'size-3.5',\n md: 'size-4',\n lg: 'size-5',\n}\n\nexport const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>((props, ref) => {\n const {\n options,\n value,\n onChange,\n disabled = false,\n size = 'md',\n fullWidth = false,\n className,\n ...restProps\n } = props\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>, currentIndex: number) => {\n const enabledOptions = options.filter((opt) => !opt.disabled && !disabled)\n if (enabledOptions.length === 0) return\n\n if (e.key === 'ArrowRight' \|\| e.key === 'ArrowDown') {\n e.preventDefault()\n const currentPos = enabledOptions.findIndex(\n (opt) => opt.value === options[currentIndex].value,\n )\n const nextPos = (currentPos + 1) % enabledOptions.length\n onChange(enabledOptions[nextPos].value)\n } else if (e.key === 'ArrowLeft' \|\| e.key === 'ArrowUp') {\n e.preventDefault()\n const currentPos = enabledOptions.findIndex(\n (opt) => opt.value === options[currentIndex].value,\n )\n const prevPos = (currentPos - 1 + enabledOptions.length) % enabledOptions.length\n onChange(enabledOptions[prevPos].value)\n } else if (e.key === 'Home') {\n e.preventDefault()\n onChange(enabledOptions[0].value)\n } else if (e.key === 'End') {\n e.preventDefault()\n onChange(enabledOptions[enabledOptions.length - 1].value)\n }\n }\n\n return (\n <div\n ref={ref}\n role=\"tablist\"\n aria-orientation=\"horizontal\"\n className={buildClassName(\n 'inline-flex items-center border border-[var(--ui-border)] bg-gray-100/80 dark:bg-gray-800/80',\n SIZE_CONTAINER_CLASS[size],\n fullWidth ? 'w-full flex' : '',\n disabled ? 'opacity-60 cursor-not-allowed' : '',\n className,\n )}\n data-testid=\"segmented-control\"\n {...restProps}\n >\n {options.map((option, index) => {\n const isSelected = value === option.value\n const isOptionDisabled = disabled \|\| option.disabled\n\n return (\n <button\n key={option.value}\n type=\"button\"\n role=\"tab\"\n aria-selected={isSelected}\n aria-disabled={isOptionDisabled}\n tabIndex={isSelected && !isOptionDisabled ? 0 : -1}\n disabled={isOptionDisabled}\n title={option.title}\n onClick={() => {\n if (!isOptionDisabled) {\n onChange(option.value)\n }\n }}\n onKeyDown={(e) => handleKeyDown(e, index)}\n className={buildClassName(\n 'inline-flex items-center justify-center gap-1.5 transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)]',\n SIZE_OPTION_CLASS[size],\n fullWidth ? 'flex-1' : '',\n isOptionDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',\n isSelected\n ? 'bg-white text-[var(--ui-primary)] dark:bg-gray-700 dark:text-blue-400 shadow-xs font-semibold'\n : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100',\n )}\n data-testid={`segmented-option-${option.value}`}\n >\n {option.icon && (\n <span\n className={buildClassName(\n 'shrink-0 inline-flex items-center justify-center',\n SIZE_ICON_CLASS[size],\n )}\n >\n {option.icon}\n </span>\n )}\n <span>{option.label}</span>\n </button>\n )\n })}\n </div>\n )\n})\n\nSegmentedControl.displayName = 'SegmentedControl'\n"],"names":["_jsx","_jsxs"],"mappings":"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~~EACvB~~,SAAS,GAAG,~~QAAQ~~,GAAG,EAAE,~~EACzB~~,gBAAgB,GAAG,+BAA+B,GAAG,gBAAgB,EACrE;AACE,sBAAE;sBACA,+EAA+E,CACpF,EAAA,aAAA,EACY,oBAAoB,MAAM,CAAC,KAAK,CAAA,CAAE,EAAA,QAAA,EAAA,CAE9C,MAAM,CAAC,IAAI,KACVD,GAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,cAAc,CACvB,kDAAkD,EAClD,eAAe,CAAC,IAAI,CAAC,CACtB,~~EAAA~~,~~QAAA,EAEA,~~MAAM,CAAC,IAAI,~~GACP~~,CACR,~~EACDA~~,~~wBAAO~~,MAAM,CAAC,KAAK,EAAA,CAAQ,CAAA,EAAA,~~EAnCtB~~,MAAM,CAAC,KAAK,~~CAoCV~~;QAEb,CAAC,CAAC,EAAA,CACE;AAEV,CAAC;AAED,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;;;;"}
1	+ {"version":3,"file":"SegmentedControl.js","sources":["../../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport type { SegmentedControlProps } from './SegmentedControl.types'\n\nconst SIZE_CONTAINER_CLASS = {\n sm: 'p-0.5 gap-0.5 rounded-lg text-xs',\n md: 'p-1 gap-1 rounded-xl text-sm',\n lg: 'p-1.5 gap-1.5 rounded-xl text-base',\n}\n\nconst SIZE_OPTION_CLASS = {\n sm: 'px-2 py-1 text-xs font-medium rounded-md',\n md: 'px-3 py-1.5 text-sm font-semibold rounded-lg',\n lg: 'px-4 py-2 text-base font-semibold rounded-lg',\n}\n\nconst SIZE_ICON_CLASS = {\n sm: 'size-3.5',\n md: 'size-4',\n lg: 'size-5',\n}\n\nexport const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>((props, ref) => {\n const {\n options,\n value,\n onChange,\n disabled = false,\n size = 'md',\n fullWidth = false,\n className,\n ...restProps\n } = props\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>, currentIndex: number) => {\n const enabledOptions = options.filter((opt) => !opt.disabled && !disabled)\n if (enabledOptions.length === 0) return\n\n if (e.key === 'ArrowRight' \|\| e.key === 'ArrowDown') {\n e.preventDefault()\n const currentPos = enabledOptions.findIndex(\n (opt) => opt.value === options[currentIndex].value,\n )\n const nextPos = (currentPos + 1) % enabledOptions.length\n onChange(enabledOptions[nextPos].value)\n } else if (e.key === 'ArrowLeft' \|\| e.key === 'ArrowUp') {\n e.preventDefault()\n const currentPos = enabledOptions.findIndex(\n (opt) => opt.value === options[currentIndex].value,\n )\n const prevPos = (currentPos - 1 + enabledOptions.length) % enabledOptions.length\n onChange(enabledOptions[prevPos].value)\n } else if (e.key === 'Home') {\n e.preventDefault()\n onChange(enabledOptions[0].value)\n } else if (e.key === 'End') {\n e.preventDefault()\n onChange(enabledOptions[enabledOptions.length - 1].value)\n }\n }\n\n return (\n <div\n ref={ref}\n role=\"tablist\"\n aria-orientation=\"horizontal\"\n className={buildClassName(\n 'inline-flex items-center border border-[var(--ui-border)] bg-gray-100/80 dark:bg-gray-800/80',\n SIZE_CONTAINER_CLASS[size],\n fullWidth ? 'w-full flex' : '',\n disabled ? 'opacity-60 cursor-not-allowed' : '',\n className,\n )}\n data-testid=\"segmented-control\"\n {...restProps}\n >\n {options.map((option, index) => {\n const isSelected = value === option.value\n const isOptionDisabled = disabled \|\| option.disabled\n\n return (\n <button\n key={option.value}\n type=\"button\"\n role=\"tab\"\n aria-selected={isSelected}\n aria-disabled={isOptionDisabled}\n tabIndex={isSelected && !isOptionDisabled ? 0 : -1}\n disabled={isOptionDisabled}\n title={option.title}\n onClick={() => {\n if (!isOptionDisabled) {\n onChange(option.value)\n }\n }}\n onKeyDown={(e) => handleKeyDown(e, index)}\n className={buildClassName(\n 'inline-flex items-center justify-center gap-1.5 transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)]',\n SIZE_OPTION_CLASS[size],\n // Full width splits the row equally, so the width comes from the\n // row, not padding; tight side padding keeps labels on one line\n // on narrow screens.\n fullWidth ? 'min-w-0 flex-1 px-1.5' : '',\n isOptionDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',\n isSelected\n ? 'bg-white text-[var(--ui-primary)] dark:bg-gray-700 dark:text-blue-400 shadow-xs font-semibold'\n : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100',\n )}\n data-testid={`segmented-option-${option.value}`}\n >\n {option.icon && (\n <span\n className={buildClassName(\n 'shrink-0 inline-flex items-center justify-center',\n SIZE_ICON_CLASS[size],\n )}\n >\n {option.icon}\n </span>\n )}\n {/* A label never wraps; if there's truly no room it's cut off. */}\n <span className=\"min-w-0 truncate\">{option.label}</span>\n </button>\n )\n })}\n </div>\n )\n})\n\nSegmentedControl.displayName = 'SegmentedControl'\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/react-tailwind.cjs.js CHANGED Viewed

@@ -4468,9 +4468,13 @@ const SegmentedControl = React.forwardRef((props, ref) => {
                     if (!isOptionDisabled) {
                         onChange(option.value);
                     }
-                }, onKeyDown: (e) => handleKeyDown(e, index), className: buildClassName('inline-flex items-center justify-center gap-1.5 transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)]', SIZE_OPTION_CLASS[size], fullWidth ? 'flex-1' : '', isOptionDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer', isSelected
+                }, onKeyDown: (e) => handleKeyDown(e, index), className: buildClassName('inline-flex items-center justify-center gap-1.5 transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)]', SIZE_OPTION_CLASS[size],
+                // Full width splits the row equally, so the width comes from the
+                // row, not padding; tight side padding keeps labels on one line
+                // on narrow screens.
+                fullWidth ? 'min-w-0 flex-1 px-1.5' : '', isOptionDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer', isSelected
                     ? 'bg-white text-[var(--ui-primary)] dark:bg-gray-700 dark:text-blue-400 shadow-xs font-semibold'
-                    : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100'), "data-testid": `segmented-option-${option.value}`, children: [option.icon && (jsxRuntime.jsx("span", { className: buildClassName('shrink-0 inline-flex items-center justify-center', SIZE_ICON_CLASS[size]), children: option.icon })), jsxRuntime.jsx("span", { children: option.label })] }, option.value));
+                    : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100'), "data-testid": `segmented-option-${option.value}`, children: [option.icon && (jsxRuntime.jsx("span", { className: buildClassName('shrink-0 inline-flex items-center justify-center', SIZE_ICON_CLASS[size]), children: option.icon })), jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: option.label })] }, option.value));
         }) }));
 });
 SegmentedControl.displayName = 'SegmentedControl';