@yahoo/uds 3.172.1 → 3.173.1-beta.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 (35) hide show
  1. package/dist/automated-config/dist/utils/getConfigVariantProperties.d.cts +2 -2
  2. package/dist/automated-config/dist/utils/getConfigVariantProperties.d.ts +2 -2
  3. package/dist/components/client/BottomSheet/useBottomSheetStore.cjs +1 -1
  4. package/dist/components/client/BottomSheet/useBottomSheetStore.js +1 -1
  5. package/dist/components/client/Input/Input.cjs +4 -2
  6. package/dist/components/client/Input/Input.js +4 -2
  7. package/dist/components/client/Menu/Menu.ItemCheckbox.cjs +7 -6
  8. package/dist/components/client/Menu/Menu.ItemCheckbox.js +7 -6
  9. package/dist/components/client/Popover/UDSPopoverConfigProvider.d.cts +1 -1
  10. package/dist/components/client/Popover/UDSPopoverConfigProvider.d.ts +1 -1
  11. package/dist/components/client/Select/Select.cjs +6 -2
  12. package/dist/components/client/Select/Select.d.cts +1 -1
  13. package/dist/components/client/Select/Select.d.ts +1 -1
  14. package/dist/components/client/Select/Select.js +6 -2
  15. package/dist/components/client/Select/SelectItem.cjs +4 -4
  16. package/dist/components/client/Select/SelectItem.js +5 -5
  17. package/dist/components/client/Select/SelectTrigger.cjs +2 -1
  18. package/dist/components/client/Select/SelectTrigger.js +2 -1
  19. package/dist/components/client/Select/selectContext.d.cts +1 -0
  20. package/dist/components/client/Select/selectContext.d.ts +1 -0
  21. package/dist/components/client/Select/selectFieldStyles.cjs +1 -1
  22. package/dist/components/client/Select/selectFieldStyles.js +1 -1
  23. package/dist/tailwind-internal/dist/utils/getShadowStyles.d.cts +2 -2
  24. package/dist/tailwind-internal/dist/utils/getShadowStyles.d.ts +2 -2
  25. package/dist/types/dist/index.d.cts +4 -0
  26. package/dist/types/dist/index.d.ts +4 -0
  27. package/dist/uds/generated/componentData.cjs +177 -180
  28. package/dist/uds/generated/componentData.js +177 -180
  29. package/dist/uds/generated/tailwindPurge.cjs +6 -6
  30. package/dist/uds/generated/tailwindPurge.js +6 -6
  31. package/dist/uds/package.cjs +1 -1
  32. package/dist/uds/package.js +1 -1
  33. package/generated/componentData.json +244 -247
  34. package/generated/tailwindPurge.ts +1 -1
  35. package/package.json +2 -2
package/dist/automated-config/dist/utils/getConfigVariantProperties.d.cts CHANGED
@@ -11,8 +11,8 @@ import { VariantConfig } from "../types/ComponentConfig.cjs";
11
11
  * @returns A Record of layer names to their properties, or null if no properties are found
12
12
  */
13
13
  declare function getConfigVariantProperties(variant?: VariantConfig): {
14
- [x: string]: Readonly<Record<string, SelectedConfigurableProperty<"color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "opacity" | "fillOpacity" | "fontWeight" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
15
- root: Readonly<Record<string, SelectedConfigurableProperty<"color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "opacity" | "fillOpacity" | "fontWeight" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
14
+ [x: string]: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "opacity" | "fillOpacity" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
15
+ root: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "opacity" | "fillOpacity" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
16
16
  } | null; //#endregion
17
17
  //#endregion
18
18
  export { getConfigVariantProperties };
package/dist/automated-config/dist/utils/getConfigVariantProperties.d.ts CHANGED
@@ -11,8 +11,8 @@ import { VariantConfig } from "../types/ComponentConfig.js";
11
11
  * @returns A Record of layer names to their properties, or null if no properties are found
12
12
  */
13
13
  declare function getConfigVariantProperties(variant?: VariantConfig): {
14
- [x: string]: Readonly<Record<string, SelectedConfigurableProperty<"color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "opacity" | "fillOpacity" | "fontWeight" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
15
- root: Readonly<Record<string, SelectedConfigurableProperty<"color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "opacity" | "fillOpacity" | "fontWeight" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
14
+ [x: string]: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "opacity" | "fillOpacity" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
15
+ root: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "opacity" | "fillOpacity" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
16
16
  } | null; //#endregion
17
17
  //#endregion
18
18
  export { getConfigVariantProperties };
package/dist/components/client/BottomSheet/useBottomSheetStore.cjs CHANGED
@@ -19,7 +19,7 @@ const useBottomSheetStore = ({ animated = true, defaultOpen = false, open: openP
19
19
  open: openProp,
20
20
  defaultOpen
21
21
  });
22
- const isOpen = (0, _ariakit_react.useStoreState)(bottomSheetInternal, (state) => state.open);
22
+ const isOpen = (0, _ariakit_react.useStoreState)(bottomSheetInternal, "open");
23
23
  return {
24
24
  open: bottomSheetInternal.show,
25
25
  close: bottomSheetInternal.hide,
package/dist/components/client/BottomSheet/useBottomSheetStore.js CHANGED
@@ -17,7 +17,7 @@ const useBottomSheetStore = ({ animated = true, defaultOpen = false, open: openP
17
17
  open: openProp,
18
18
  defaultOpen
19
19
  });
20
- const isOpen = useStoreState(bottomSheetInternal, (state) => state.open);
20
+ const isOpen = useStoreState(bottomSheetInternal, "open");
21
21
  return {
22
22
  open: bottomSheetInternal.show,
23
23
  close: bottomSheetInternal.hide,
package/dist/components/client/Input/Input.cjs CHANGED
@@ -20,6 +20,7 @@ function setNativeInputValue(input, next) {
20
20
  (Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set)?.call(input, next);
21
21
  input.dispatchEvent(new Event("input", { bubbles: true }));
22
22
  }
23
+ const MIN_WIDTH_DEFAULT = 200;
23
24
  const HelpTextContent = (0, react.memo)(function HelpTextContentOriginal({ helpText, helperTextIcon, spacingStart, spacingTop, size, isFilled, helperTextSlotProps, ...rest }) {
24
25
  if (!helpText) return null;
25
26
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
@@ -87,7 +88,7 @@ const EndIcon = (0, react.memo)(function EndIcon({ icon, className, iconProps })
87
88
  *
88
89
  * @related [Checkbox](https://uds.build/docs/components/checkbox), [Radio](https://uds.build/docs/components/radio).
89
90
  **/
90
- const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, width: containerWidth = "full", defaultValue, value: valueProp, required, readOnly, disabled, reduceMotion: forceReduceMotion, onChange, onBlur, onFocus, formatOnBlur, parseOnFocus, slotProps, style, className, ...otherProps }, forwardedRef) {
91
+ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, width: containerWidth = "full", minWidth = MIN_WIDTH_DEFAULT, defaultValue, value: valueProp, required, readOnly, disabled, reduceMotion: forceReduceMotion, onChange, onBlur, onFocus, formatOnBlur, parseOnFocus, slotProps, style, className, ...otherProps }, forwardedRef) {
91
92
  const generatedId = (0, react.useId)();
92
93
  const uid = id ?? `uds-input-${generatedId}`;
93
94
  const helpTextId = `uds-input-${uid}-help-text`;
@@ -147,7 +148,7 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
147
148
  inputSizeInputWrapperDynamic: size,
148
149
  inputVariantInputWrapper: "default",
149
150
  inputVariantValueInputWrapper: !value ? "empty" : "filled"
150
- }), "min-w-[200px]", "uds-ring-shadow", "uds-ring-within", inputWrapperClassName),
151
+ }), "uds-ring-shadow", "uds-ring-within", inputWrapperClassName),
151
152
  input: require_styles_styler.getStyles({
152
153
  inputSizeInput: size,
153
154
  inputVariantInput: "default",
@@ -198,6 +199,7 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
198
199
  /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
199
200
  position: "relative",
200
201
  alignItems: "center",
202
+ style: { minWidth: `${minWidth}px` },
201
203
  ...inputWrapperProps,
202
204
  className: classNames.inputWrapper,
203
205
  children: [
package/dist/components/client/Input/Input.js CHANGED
@@ -17,6 +17,7 @@ function setNativeInputValue(input, next) {
17
17
  (Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set)?.call(input, next);
18
18
  input.dispatchEvent(new Event("input", { bubbles: true }));
19
19
  }
20
+ const MIN_WIDTH_DEFAULT = 200;
20
21
  const HelpTextContent = memo(function HelpTextContentOriginal({ helpText, helperTextIcon, spacingStart, spacingTop, size, isFilled, helperTextSlotProps, ...rest }) {
21
22
  if (!helpText) return null;
22
23
  return /* @__PURE__ */ jsx(Box, {
@@ -84,7 +85,7 @@ const EndIcon = memo(function EndIcon({ icon, className, iconProps }) {
84
85
  *
85
86
  * @related [Checkbox](https://uds.build/docs/components/checkbox), [Radio](https://uds.build/docs/components/radio).
86
87
  **/
87
- const Input = forwardRef(function Input({ id, label, type = "text", size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, width: containerWidth = "full", defaultValue, value: valueProp, required, readOnly, disabled, reduceMotion: forceReduceMotion, onChange, onBlur, onFocus, formatOnBlur, parseOnFocus, slotProps, style, className, ...otherProps }, forwardedRef) {
88
+ const Input = forwardRef(function Input({ id, label, type = "text", size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, width: containerWidth = "full", minWidth = MIN_WIDTH_DEFAULT, defaultValue, value: valueProp, required, readOnly, disabled, reduceMotion: forceReduceMotion, onChange, onBlur, onFocus, formatOnBlur, parseOnFocus, slotProps, style, className, ...otherProps }, forwardedRef) {
88
89
  const generatedId = useId();
89
90
  const uid = id ?? `uds-input-${generatedId}`;
90
91
  const helpTextId = `uds-input-${uid}-help-text`;
@@ -144,7 +145,7 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
144
145
  inputSizeInputWrapperDynamic: size,
145
146
  inputVariantInputWrapper: "default",
146
147
  inputVariantValueInputWrapper: !value ? "empty" : "filled"
147
- }), "min-w-[200px]", "uds-ring-shadow", "uds-ring-within", inputWrapperClassName),
148
+ }), "uds-ring-shadow", "uds-ring-within", inputWrapperClassName),
148
149
  input: getStyles({
149
150
  inputSizeInput: size,
150
151
  inputVariantInput: "default",
@@ -195,6 +196,7 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
195
196
  /* @__PURE__ */ jsxs(Box, {
196
197
  position: "relative",
197
198
  alignItems: "center",
199
+ style: { minWidth: `${minWidth}px` },
198
200
  ...inputWrapperProps,
199
201
  className: classNames.inputWrapper,
200
202
  children: [
package/dist/components/client/Menu/Menu.ItemCheckbox.cjs CHANGED
@@ -57,7 +57,8 @@ const MenuItemCheckbox = (0, react.forwardRef)(function MenuItemCheckbox({ name,
57
57
  const itemName = name;
58
58
  const hasInitialized = (0, react.useRef)(false);
59
59
  const context = (0, _ariakit_react_menu.useMenuContext)();
60
- const allState = (0, _ariakit_react.useStoreState)(context);
60
+ const items = (0, _ariakit_react.useStoreState)(context, "items");
61
+ const values = (0, _ariakit_react.useStoreState)(context, "values");
61
62
  (0, react.useEffect)(() => {
62
63
  if (!hasInitialized.current && defaultChecked !== void 0 && context) {
63
64
  context.setValues((prev) => ({
@@ -73,15 +74,15 @@ const MenuItemCheckbox = (0, react.forwardRef)(function MenuItemCheckbox({ name,
73
74
  ]);
74
75
  const isChecked = (0, react.useMemo)(() => {
75
76
  if (checked !== void 0) return checked;
76
- if (allState?.items?.length) {
77
- const item = allState?.items.find((item) => item.element?.name === itemName);
77
+ if (items?.length) {
78
+ const item = items.find((item) => item.element?.name === itemName);
78
79
  if (item?.element) return item.element.checked;
79
80
  }
80
- const storeValue = allState?.values[itemName];
81
+ const storeValue = values?.[itemName];
81
82
  return typeof storeValue === "boolean" ? storeValue : defaultChecked ?? false;
82
83
  }, [
83
- allState?.items,
84
- allState?.values,
84
+ items,
85
+ values,
85
86
  itemName,
86
87
  checked,
87
88
  defaultChecked
package/dist/components/client/Menu/Menu.ItemCheckbox.js CHANGED
@@ -55,7 +55,8 @@ const MenuItemCheckbox = forwardRef(function MenuItemCheckbox({ name, endIcon =
55
55
  const itemName = name;
56
56
  const hasInitialized = useRef(false);
57
57
  const context = useMenuContext();
58
- const allState = useStoreState(context);
58
+ const items = useStoreState(context, "items");
59
+ const values = useStoreState(context, "values");
59
60
  useEffect(() => {
60
61
  if (!hasInitialized.current && defaultChecked !== void 0 && context) {
61
62
  context.setValues((prev) => ({
@@ -71,15 +72,15 @@ const MenuItemCheckbox = forwardRef(function MenuItemCheckbox({ name, endIcon =
71
72
  ]);
72
73
  const isChecked = useMemo(() => {
73
74
  if (checked !== void 0) return checked;
74
- if (allState?.items?.length) {
75
- const item = allState?.items.find((item) => item.element?.name === itemName);
75
+ if (items?.length) {
76
+ const item = items.find((item) => item.element?.name === itemName);
76
77
  if (item?.element) return item.element.checked;
77
78
  }
78
- const storeValue = allState?.values[itemName];
79
+ const storeValue = values?.[itemName];
79
80
  return typeof storeValue === "boolean" ? storeValue : defaultChecked ?? false;
80
81
  }, [
81
- allState?.items,
82
- allState?.values,
82
+ items,
83
+ values,
83
84
  itemName,
84
85
  checked,
85
86
  defaultChecked
package/dist/components/client/Popover/UDSPopoverConfigProvider.d.cts CHANGED
@@ -29,7 +29,7 @@ declare function usePopoverConfig(sizeProp?: PopoverSize | undefined, variantPro
29
29
  gap: SpacingAlias;
30
30
  dismissButtonSpacing: SpacingAlias;
31
31
  dismissIconSize: number;
32
- ariaKitPlacement: ("top-start" | "top-end" | "bottom-start" | "bottom-end" | ("bottom" | "left" | "right" | "top") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
32
+ ariaKitPlacement: ("top-start" | "top-end" | "bottom-start" | "bottom-end" | ("top" | "bottom" | "left" | "right") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
33
33
  animationDuration: number;
34
34
  };
35
35
  //#endregion
package/dist/components/client/Popover/UDSPopoverConfigProvider.d.ts CHANGED
@@ -30,7 +30,7 @@ declare function usePopoverConfig(sizeProp?: PopoverSize | undefined, variantPro
30
30
  gap: SpacingAlias;
31
31
  dismissButtonSpacing: SpacingAlias;
32
32
  dismissIconSize: number;
33
- ariaKitPlacement: ("top-start" | "top-end" | "bottom-start" | "bottom-end" | ("bottom" | "left" | "right" | "top") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
33
+ ariaKitPlacement: ("top-start" | "top-end" | "bottom-start" | "bottom-end" | ("top" | "bottom" | "left" | "right") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
34
34
  animationDuration: number;
35
35
  };
36
36
  //#endregion
package/dist/components/client/Select/Select.cjs CHANGED
@@ -17,7 +17,8 @@ let lodash_isFunction_js = require("lodash/isFunction.js");
17
17
  lodash_isFunction_js = require_runtime.__toESM(lodash_isFunction_js);
18
18
  let _ariakit_react = require("@ariakit/react");
19
19
  //#region src/components/client/Select/Select.tsx
20
- const SelectRoot = (0, react.forwardRef)(function SelectRoot({ children, label, helpText, helperTextIcon, placeholder, name, size = "md", disabled, required, hasError, readOnly, width = "full", reduceMotion: forceReduceMotion, startIcon, endIcon, className, style, slotProps }, ref) {
20
+ const MIN_WIDTH_DEFAULT = 200;
21
+ const SelectRoot = (0, react.forwardRef)(function SelectRoot({ children, label, helpText, helperTextIcon, placeholder, name, size = "md", disabled, required, hasError, readOnly, width = "full", minWidth = MIN_WIDTH_DEFAULT, reduceMotion: forceReduceMotion, startIcon, endIcon, className, style, slotProps }, ref) {
21
22
  const value = (0, _ariakit_react.useStoreState)((0, _ariakit_react.useSelectContext)(), "value");
22
23
  const hasValue = value != null && value !== "";
23
24
  const hasHelpText = Boolean(helpText || helperTextIcon);
@@ -31,6 +32,7 @@ const SelectRoot = (0, react.forwardRef)(function SelectRoot({ children, label,
31
32
  required,
32
33
  hasError,
33
34
  width,
35
+ minWidth,
34
36
  reduceMotion: forceReduceMotion,
35
37
  uid,
36
38
  helpTextId,
@@ -42,6 +44,7 @@ const SelectRoot = (0, react.forwardRef)(function SelectRoot({ children, label,
42
44
  required,
43
45
  hasError,
44
46
  width,
47
+ minWidth,
45
48
  forceReduceMotion,
46
49
  uid,
47
50
  helpTextId
@@ -119,7 +122,7 @@ SelectRoot.displayName = "SelectRoot";
119
122
  * </Select>
120
123
  * ```
121
124
  */
122
- const Select = (0, react.forwardRef)(function Select({ children, label, helpText, helperTextIcon, placeholder, name, size, disabled, required, hasError, readOnly, width, reduceMotion, startIcon, endIcon, className, style, slotProps, defaultValue = "", value, setValue: setValueProp, onChange, open: openProp, defaultOpen, setOpen: setOpenProp, ...providerProps }, ref) {
125
+ const Select = (0, react.forwardRef)(function Select({ children, label, helpText, helperTextIcon, placeholder, name, size, disabled, required, hasError, readOnly, width, minWidth, reduceMotion, startIcon, endIcon, className, style, slotProps, defaultValue = "", value, setValue: setValueProp, onChange, open: openProp, defaultOpen, setOpen: setOpenProp, ...providerProps }, ref) {
123
126
  const setValue = setValueProp ?? onChange;
124
127
  const isOpenControlled = openProp !== void 0;
125
128
  const [uncontrolledOpen, setUncontrolledOpen] = (0, react.useState)(defaultOpen ?? false);
@@ -163,6 +166,7 @@ const Select = (0, react.forwardRef)(function Select({ children, label, helpText
163
166
  hasError,
164
167
  readOnly,
165
168
  width,
169
+ minWidth,
166
170
  reduceMotion,
167
171
  startIcon,
168
172
  endIcon,
package/dist/components/client/Select/Select.d.cts CHANGED
@@ -9,7 +9,7 @@ import { SelectProviderProps } from "@ariakit/react";
9
9
  type DataAttributes = {
10
10
  [name: `data-${string}`]: string;
11
11
  };
12
- interface SelectProps extends Pick<UniversalSelectProps, 'label' | 'disabled' | 'required' | 'helpText' | 'helperTextIcon' | 'hasError' | 'size' | 'startIcon' | 'endIcon' | 'reduceMotion' | 'readOnly' | 'width'>, Omit<SelectProviderProps, 'children' | 'setValue'> {
12
+ interface SelectProps extends Pick<UniversalSelectProps, 'label' | 'disabled' | 'required' | 'helpText' | 'helperTextIcon' | 'hasError' | 'size' | 'startIcon' | 'endIcon' | 'reduceMotion' | 'readOnly' | 'width' | 'minWidth'>, Omit<SelectProviderProps, 'children' | 'setValue'> {
13
13
  children?: React.ReactNode;
14
14
  /** Placeholder text shown when no value is selected. */
15
15
  placeholder?: string;
package/dist/components/client/Select/Select.d.ts CHANGED
@@ -10,7 +10,7 @@ import { SelectProviderProps } from "@ariakit/react";
10
10
  type DataAttributes = {
11
11
  [name: `data-${string}`]: string;
12
12
  };
13
- interface SelectProps extends Pick<UniversalSelectProps, 'label' | 'disabled' | 'required' | 'helpText' | 'helperTextIcon' | 'hasError' | 'size' | 'startIcon' | 'endIcon' | 'reduceMotion' | 'readOnly' | 'width'>, Omit<SelectProviderProps, 'children' | 'setValue'> {
13
+ interface SelectProps extends Pick<UniversalSelectProps, 'label' | 'disabled' | 'required' | 'helpText' | 'helperTextIcon' | 'hasError' | 'size' | 'startIcon' | 'endIcon' | 'reduceMotion' | 'readOnly' | 'width' | 'minWidth'>, Omit<SelectProviderProps, 'children' | 'setValue'> {
14
14
  children?: React.ReactNode;
15
15
  /** Placeholder text shown when no value is selected. */
16
16
  placeholder?: string;
package/dist/components/client/Select/Select.js CHANGED
@@ -14,7 +14,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
14
14
  import { isFunction } from "lodash-es";
15
15
  import { SelectProvider, useSelectContext, useStoreState } from "@ariakit/react";
16
16
  //#region src/components/client/Select/Select.tsx
17
- const SelectRoot = forwardRef(function SelectRoot({ children, label, helpText, helperTextIcon, placeholder, name, size = "md", disabled, required, hasError, readOnly, width = "full", reduceMotion: forceReduceMotion, startIcon, endIcon, className, style, slotProps }, ref) {
17
+ const MIN_WIDTH_DEFAULT = 200;
18
+ const SelectRoot = forwardRef(function SelectRoot({ children, label, helpText, helperTextIcon, placeholder, name, size = "md", disabled, required, hasError, readOnly, width = "full", minWidth = MIN_WIDTH_DEFAULT, reduceMotion: forceReduceMotion, startIcon, endIcon, className, style, slotProps }, ref) {
18
19
  const value = useStoreState(useSelectContext(), "value");
19
20
  const hasValue = value != null && value !== "";
20
21
  const hasHelpText = Boolean(helpText || helperTextIcon);
@@ -28,6 +29,7 @@ const SelectRoot = forwardRef(function SelectRoot({ children, label, helpText, h
28
29
  required,
29
30
  hasError,
30
31
  width,
32
+ minWidth,
31
33
  reduceMotion: forceReduceMotion,
32
34
  uid,
33
35
  helpTextId,
@@ -39,6 +41,7 @@ const SelectRoot = forwardRef(function SelectRoot({ children, label, helpText, h
39
41
  required,
40
42
  hasError,
41
43
  width,
44
+ minWidth,
42
45
  forceReduceMotion,
43
46
  uid,
44
47
  helpTextId
@@ -116,7 +119,7 @@ SelectRoot.displayName = "SelectRoot";
116
119
  * </Select>
117
120
  * ```
118
121
  */
119
- const Select = forwardRef(function Select({ children, label, helpText, helperTextIcon, placeholder, name, size, disabled, required, hasError, readOnly, width, reduceMotion, startIcon, endIcon, className, style, slotProps, defaultValue = "", value, setValue: setValueProp, onChange, open: openProp, defaultOpen, setOpen: setOpenProp, ...providerProps }, ref) {
122
+ const Select = forwardRef(function Select({ children, label, helpText, helperTextIcon, placeholder, name, size, disabled, required, hasError, readOnly, width, minWidth, reduceMotion, startIcon, endIcon, className, style, slotProps, defaultValue = "", value, setValue: setValueProp, onChange, open: openProp, defaultOpen, setOpen: setOpenProp, ...providerProps }, ref) {
120
123
  const setValue = setValueProp ?? onChange;
121
124
  const isOpenControlled = openProp !== void 0;
122
125
  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? false);
@@ -160,6 +163,7 @@ const Select = forwardRef(function Select({ children, label, helpText, helperTex
160
163
  hasError,
161
164
  readOnly,
162
165
  width,
166
+ minWidth,
163
167
  reduceMotion,
164
168
  startIcon,
165
169
  endIcon,
package/dist/components/client/Select/SelectItem.cjs CHANGED
@@ -34,7 +34,7 @@ const buildSelectItemClasses = ({ disabled, className }) => {
34
34
  * @componentType Client component
35
35
  */
36
36
  const SelectItem = (0, react.forwardRef)(function SelectItem({ children, className, slotProps, disabled, value, startIcon, ...props }, ref) {
37
- const isSelected = (0, _ariakit_react.useStoreState)((0, _ariakit_react.useSelectContext)(), "value") === value;
37
+ const isSelected = (0, _ariakit_react.useStoreState)((0, _ariakit_react.useSelectContext)(), ["value"], (state) => state?.value === value);
38
38
  const { startIconSize, endIconSize } = require_components_client_Select_UDSSelectItemConfigProvider.useSelectItemConfig();
39
39
  const { className: rootClassName, ...rootSlotProps } = slotProps?.root ?? {};
40
40
  const { className: textClassName, ...textSlotProps } = slotProps?.text ?? {};
@@ -146,10 +146,10 @@ const SelectItem = (0, react.forwardRef)(function SelectItem({ children, classNa
146
146
  ...textSlotProps,
147
147
  children
148
148
  })]
149
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, {
149
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.SelectItemSelected, { children: (selected) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, {
150
150
  initial: false,
151
151
  mode: "popLayout",
152
- children: isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
152
+ children: selected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
153
153
  variants: iconAnimationVariants,
154
154
  initial: "hidden",
155
155
  animate: "visible",
@@ -166,7 +166,7 @@ const SelectItem = (0, react.forwardRef)(function SelectItem({ children, classNa
166
166
  }
167
167
  })
168
168
  })
169
- })]
169
+ }) })]
170
170
  });
171
171
  });
172
172
  SelectItem.displayName = "SelectItem";
package/dist/components/client/Select/SelectItem.js CHANGED
@@ -8,7 +8,7 @@ import { useSelectItemConfig } from "./UDSSelectItemConfigProvider.js";
8
8
  import { Check } from "@yahoo/uds-icons";
9
9
  import { forwardRef, useMemo } from "react";
10
10
  import { jsx, jsxs } from "react/jsx-runtime";
11
- import { SelectItem as SelectItem$1, useSelectContext, useStoreState } from "@ariakit/react";
11
+ import { SelectItem as SelectItem$1, SelectItemSelected, useSelectContext, useStoreState } from "@ariakit/react";
12
12
  import { AnimatePresence, m } from "motion/react";
13
13
  //#region src/components/client/Select/SelectItem.tsx
14
14
  const ITEM_CLASS_NAME = "uds-select-item";
@@ -32,7 +32,7 @@ const buildSelectItemClasses = ({ disabled, className }) => {
32
32
  * @componentType Client component
33
33
  */
34
34
  const SelectItem = forwardRef(function SelectItem({ children, className, slotProps, disabled, value, startIcon, ...props }, ref) {
35
- const isSelected = useStoreState(useSelectContext(), "value") === value;
35
+ const isSelected = useStoreState(useSelectContext(), ["value"], (state) => state?.value === value);
36
36
  const { startIconSize, endIconSize } = useSelectItemConfig();
37
37
  const { className: rootClassName, ...rootSlotProps } = slotProps?.root ?? {};
38
38
  const { className: textClassName, ...textSlotProps } = slotProps?.text ?? {};
@@ -144,10 +144,10 @@ const SelectItem = forwardRef(function SelectItem({ children, className, slotPro
144
144
  ...textSlotProps,
145
145
  children
146
146
  })]
147
- }), /* @__PURE__ */ jsx(AnimatePresence, {
147
+ }), /* @__PURE__ */ jsx(SelectItemSelected, { children: (selected) => /* @__PURE__ */ jsx(AnimatePresence, {
148
148
  initial: false,
149
149
  mode: "popLayout",
150
- children: isSelected && /* @__PURE__ */ jsx(m.span, {
150
+ children: selected && /* @__PURE__ */ jsx(m.span, {
151
151
  variants: iconAnimationVariants,
152
152
  initial: "hidden",
153
153
  animate: "visible",
@@ -164,7 +164,7 @@ const SelectItem = forwardRef(function SelectItem({ children, className, slotPro
164
164
  }
165
165
  })
166
166
  })
167
- })]
167
+ }) })]
168
168
  });
169
169
  });
170
170
  SelectItem.displayName = "SelectItem";
package/dist/components/client/Select/SelectTrigger.cjs CHANGED
@@ -41,7 +41,7 @@ const EndIcon = (0, react.memo)(function EndIcon({ icon, className, iconProps })
41
41
  });
42
42
  EndIcon.displayName = "EndIcon";
43
43
  const SelectTrigger = (0, react.forwardRef)(function SelectTrigger({ placeholder, startIcon, endIcon, slotProps, className, disabled: disabledProp, name, onClick: triggerPassthroughOnClick, onPointerDown: triggerPassthroughOnPointerDown, ...triggerPassthroughProps }, ref) {
44
- const { size, disabled, readOnly, required, hasError, uid, helpTextId, reduceMotion, triggerWrapperRef } = require_components_client_Select_selectContext.useSelectFieldContext();
44
+ const { size, disabled, readOnly, required, hasError, uid, helpTextId, reduceMotion, minWidth, triggerWrapperRef } = require_components_client_Select_selectContext.useSelectFieldContext();
45
45
  const select = (0, _ariakit_react.useSelectContext)();
46
46
  const value = (0, _ariakit_react.useStoreState)(select, "value");
47
47
  const open = (0, _ariakit_react.useStoreState)(select, "open");
@@ -73,6 +73,7 @@ const SelectTrigger = (0, react.forwardRef)(function SelectTrigger({ placeholder
73
73
  display: "flex",
74
74
  alignItems: "center",
75
75
  width: "full",
76
+ style: { minWidth: `${minWidth}px` },
76
77
  ...triggerWrapperProps,
77
78
  className: require_components_client_Select_selectFieldStyles.getSelectTriggerWrapperClassName(size, hasValue, triggerWrapperClassName),
78
79
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ariakit_react.Select, {
package/dist/components/client/Select/SelectTrigger.js CHANGED
@@ -39,7 +39,7 @@ const EndIcon = memo(function EndIcon({ icon, className, iconProps }) {
39
39
  });
40
40
  EndIcon.displayName = "EndIcon";
41
41
  const SelectTrigger = forwardRef(function SelectTrigger({ placeholder, startIcon, endIcon, slotProps, className, disabled: disabledProp, name, onClick: triggerPassthroughOnClick, onPointerDown: triggerPassthroughOnPointerDown, ...triggerPassthroughProps }, ref) {
42
- const { size, disabled, readOnly, required, hasError, uid, helpTextId, reduceMotion, triggerWrapperRef } = useSelectFieldContext();
42
+ const { size, disabled, readOnly, required, hasError, uid, helpTextId, reduceMotion, minWidth, triggerWrapperRef } = useSelectFieldContext();
43
43
  const select = useSelectContext();
44
44
  const value = useStoreState(select, "value");
45
45
  const open = useStoreState(select, "open");
@@ -71,6 +71,7 @@ const SelectTrigger = forwardRef(function SelectTrigger({ placeholder, startIcon
71
71
  display: "flex",
72
72
  alignItems: "center",
73
73
  width: "full",
74
+ style: { minWidth: `${minWidth}px` },
74
75
  ...triggerWrapperProps,
75
76
  className: getSelectTriggerWrapperClassName(size, hasValue, triggerWrapperClassName),
76
77
  children: /* @__PURE__ */ jsxs(Select, {
package/dist/components/client/Select/selectContext.d.cts CHANGED
@@ -11,6 +11,7 @@ type SelectFieldContextValue = {
11
11
  required?: boolean;
12
12
  hasError?: boolean;
13
13
  width?: UniversalBoxProps['width'];
14
+ minWidth: number;
14
15
  reduceMotion?: boolean;
15
16
  uid: string;
16
17
  helpTextId?: string; /** Outer field wrapper; used to anchor SelectContent width and gutter. */
package/dist/components/client/Select/selectContext.d.ts CHANGED
@@ -12,6 +12,7 @@ type SelectFieldContextValue = {
12
12
  required?: boolean;
13
13
  hasError?: boolean;
14
14
  width?: UniversalBoxProps['width'];
15
+ minWidth: number;
15
16
  reduceMotion?: boolean;
16
17
  uid: string;
17
18
  helpTextId?: string; /** Outer field wrapper; used to anchor SelectContent width and gutter. */
package/dist/components/client/Select/selectFieldStyles.cjs CHANGED
@@ -32,7 +32,7 @@ function getSelectTriggerWrapperClassName(size, hasValue, className) {
32
32
  inputSizeInputWrapperDynamic: size,
33
33
  inputVariantInputWrapper: "default",
34
34
  inputVariantValueInputWrapper: !hasValue ? "empty" : "filled"
35
- }), "flex", "w-full", "items-center", "min-w-[200px]", "uds-ring-shadow", "uds-ring-within", SELECT_FIELD_TRIGGER_CLASS, className);
35
+ }), "flex", "w-full", "items-center", "uds-ring-shadow", "uds-ring-within", SELECT_FIELD_TRIGGER_CLASS, className);
36
36
  }
37
37
  function getSelectTriggerClassName({ size, hasValue, disabled, className }) {
38
38
  return require_styles_styler.getStyles({
package/dist/components/client/Select/selectFieldStyles.js CHANGED
@@ -31,7 +31,7 @@ function getSelectTriggerWrapperClassName(size, hasValue, className) {
31
31
  inputSizeInputWrapperDynamic: size,
32
32
  inputVariantInputWrapper: "default",
33
33
  inputVariantValueInputWrapper: !hasValue ? "empty" : "filled"
34
- }), "flex", "w-full", "items-center", "min-w-[200px]", "uds-ring-shadow", "uds-ring-within", SELECT_FIELD_TRIGGER_CLASS, className);
34
+ }), "flex", "w-full", "items-center", "uds-ring-shadow", "uds-ring-within", SELECT_FIELD_TRIGGER_CLASS, className);
35
35
  }
36
36
  function getSelectTriggerClassName({ size, hasValue, disabled, className }) {
37
37
  return getStyles({
package/dist/tailwind-internal/dist/utils/getShadowStyles.d.cts CHANGED
@@ -10,8 +10,8 @@ declare function getShadowStyles({
10
10
  }: {
11
11
  config: UniversalTokensConfig;
12
12
  shadowType: ShadowType;
13
- }): Record<".uds-inset-shadow-none" | ".uds-inset-shadow-xs" | ".uds-inset-shadow-sm" | ".uds-inset-shadow-md" | ".uds-inset-shadow-lg" | ".uds-inset-shadow-xl" | ".uds-inset-shadow-2xl" | ".uds-inset-shadow-elevation-0" | ".uds-inset-shadow-elevation-1" | ".uds-inset-shadow-elevation-2" | ".uds-inset-shadow-elevation-3" | ".uds-inset-shadow-elevation-4" | ".uds-inset-shadow-elevation-5" | ".uds-drop-shadow-none" | ".uds-drop-shadow-xs" | ".uds-drop-shadow-sm" | ".uds-drop-shadow-md" | ".uds-drop-shadow-lg" | ".uds-drop-shadow-xl" | ".uds-drop-shadow-2xl" | ".uds-drop-shadow-elevation-0" | ".uds-drop-shadow-elevation-1" | ".uds-drop-shadow-elevation-2" | ".uds-drop-shadow-elevation-3" | ".uds-drop-shadow-elevation-4" | ".uds-drop-shadow-elevation-5", {
14
- readonly [x: string]: "var(--uds-inset-shadow-none)" | "var(--uds-inset-shadow-xs)" | "var(--uds-inset-shadow-sm)" | "var(--uds-inset-shadow-md)" | "var(--uds-inset-shadow-lg)" | "var(--uds-inset-shadow-xl)" | "var(--uds-inset-shadow-2xl)" | "var(--uds-inset-shadow-elevation-0)" | "var(--uds-inset-shadow-elevation-1)" | "var(--uds-inset-shadow-elevation-2)" | "var(--uds-inset-shadow-elevation-3)" | "var(--uds-inset-shadow-elevation-4)" | "var(--uds-inset-shadow-elevation-5)" | "var(--uds-drop-shadow-none)" | "var(--uds-drop-shadow-xs)" | "var(--uds-drop-shadow-sm)" | "var(--uds-drop-shadow-md)" | "var(--uds-drop-shadow-lg)" | "var(--uds-drop-shadow-xl)" | "var(--uds-drop-shadow-2xl)" | "var(--uds-drop-shadow-elevation-0)" | "var(--uds-drop-shadow-elevation-1)" | "var(--uds-drop-shadow-elevation-2)" | "var(--uds-drop-shadow-elevation-3)" | "var(--uds-drop-shadow-elevation-4)" | "var(--uds-drop-shadow-elevation-5)" | "var(--uds-drop-shadow, 0 0 transparent), var(--uds-inset-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent)";
13
+ }): Record<".uds-inset-shadow-sm" | ".uds-inset-shadow-md" | ".uds-inset-shadow-lg" | ".uds-inset-shadow-xl" | ".uds-inset-shadow-2xl" | ".uds-inset-shadow-none" | ".uds-inset-shadow-xs" | ".uds-inset-shadow-elevation-0" | ".uds-inset-shadow-elevation-1" | ".uds-inset-shadow-elevation-2" | ".uds-inset-shadow-elevation-3" | ".uds-inset-shadow-elevation-4" | ".uds-inset-shadow-elevation-5" | ".uds-drop-shadow-sm" | ".uds-drop-shadow-md" | ".uds-drop-shadow-lg" | ".uds-drop-shadow-xl" | ".uds-drop-shadow-2xl" | ".uds-drop-shadow-none" | ".uds-drop-shadow-xs" | ".uds-drop-shadow-elevation-0" | ".uds-drop-shadow-elevation-1" | ".uds-drop-shadow-elevation-2" | ".uds-drop-shadow-elevation-3" | ".uds-drop-shadow-elevation-4" | ".uds-drop-shadow-elevation-5", {
14
+ readonly [x: string]: "var(--uds-inset-shadow-sm)" | "var(--uds-inset-shadow-md)" | "var(--uds-inset-shadow-lg)" | "var(--uds-inset-shadow-xl)" | "var(--uds-inset-shadow-2xl)" | "var(--uds-inset-shadow-none)" | "var(--uds-inset-shadow-xs)" | "var(--uds-inset-shadow-elevation-0)" | "var(--uds-inset-shadow-elevation-1)" | "var(--uds-inset-shadow-elevation-2)" | "var(--uds-inset-shadow-elevation-3)" | "var(--uds-inset-shadow-elevation-4)" | "var(--uds-inset-shadow-elevation-5)" | "var(--uds-drop-shadow-sm)" | "var(--uds-drop-shadow-md)" | "var(--uds-drop-shadow-lg)" | "var(--uds-drop-shadow-xl)" | "var(--uds-drop-shadow-2xl)" | "var(--uds-drop-shadow-none)" | "var(--uds-drop-shadow-xs)" | "var(--uds-drop-shadow-elevation-0)" | "var(--uds-drop-shadow-elevation-1)" | "var(--uds-drop-shadow-elevation-2)" | "var(--uds-drop-shadow-elevation-3)" | "var(--uds-drop-shadow-elevation-4)" | "var(--uds-drop-shadow-elevation-5)" | "var(--uds-drop-shadow, 0 0 transparent), var(--uds-inset-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent)";
15
15
  readonly boxShadow: "var(--uds-drop-shadow, 0 0 transparent), var(--uds-inset-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent)";
16
16
  }>; //#endregion
17
17
  //#endregion
package/dist/tailwind-internal/dist/utils/getShadowStyles.d.ts CHANGED
@@ -10,8 +10,8 @@ declare function getShadowStyles({
10
10
  }: {
11
11
  config: UniversalTokensConfig;
12
12
  shadowType: ShadowType;
13
- }): Record<".uds-inset-shadow-none" | ".uds-inset-shadow-xs" | ".uds-inset-shadow-sm" | ".uds-inset-shadow-md" | ".uds-inset-shadow-lg" | ".uds-inset-shadow-xl" | ".uds-inset-shadow-2xl" | ".uds-inset-shadow-elevation-0" | ".uds-inset-shadow-elevation-1" | ".uds-inset-shadow-elevation-2" | ".uds-inset-shadow-elevation-3" | ".uds-inset-shadow-elevation-4" | ".uds-inset-shadow-elevation-5" | ".uds-drop-shadow-none" | ".uds-drop-shadow-xs" | ".uds-drop-shadow-sm" | ".uds-drop-shadow-md" | ".uds-drop-shadow-lg" | ".uds-drop-shadow-xl" | ".uds-drop-shadow-2xl" | ".uds-drop-shadow-elevation-0" | ".uds-drop-shadow-elevation-1" | ".uds-drop-shadow-elevation-2" | ".uds-drop-shadow-elevation-3" | ".uds-drop-shadow-elevation-4" | ".uds-drop-shadow-elevation-5", {
14
- readonly [x: string]: "var(--uds-inset-shadow-none)" | "var(--uds-inset-shadow-xs)" | "var(--uds-inset-shadow-sm)" | "var(--uds-inset-shadow-md)" | "var(--uds-inset-shadow-lg)" | "var(--uds-inset-shadow-xl)" | "var(--uds-inset-shadow-2xl)" | "var(--uds-inset-shadow-elevation-0)" | "var(--uds-inset-shadow-elevation-1)" | "var(--uds-inset-shadow-elevation-2)" | "var(--uds-inset-shadow-elevation-3)" | "var(--uds-inset-shadow-elevation-4)" | "var(--uds-inset-shadow-elevation-5)" | "var(--uds-drop-shadow-none)" | "var(--uds-drop-shadow-xs)" | "var(--uds-drop-shadow-sm)" | "var(--uds-drop-shadow-md)" | "var(--uds-drop-shadow-lg)" | "var(--uds-drop-shadow-xl)" | "var(--uds-drop-shadow-2xl)" | "var(--uds-drop-shadow-elevation-0)" | "var(--uds-drop-shadow-elevation-1)" | "var(--uds-drop-shadow-elevation-2)" | "var(--uds-drop-shadow-elevation-3)" | "var(--uds-drop-shadow-elevation-4)" | "var(--uds-drop-shadow-elevation-5)" | "var(--uds-drop-shadow, 0 0 transparent), var(--uds-inset-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent)";
13
+ }): Record<".uds-inset-shadow-sm" | ".uds-inset-shadow-md" | ".uds-inset-shadow-lg" | ".uds-inset-shadow-xl" | ".uds-inset-shadow-2xl" | ".uds-inset-shadow-none" | ".uds-inset-shadow-xs" | ".uds-inset-shadow-elevation-0" | ".uds-inset-shadow-elevation-1" | ".uds-inset-shadow-elevation-2" | ".uds-inset-shadow-elevation-3" | ".uds-inset-shadow-elevation-4" | ".uds-inset-shadow-elevation-5" | ".uds-drop-shadow-sm" | ".uds-drop-shadow-md" | ".uds-drop-shadow-lg" | ".uds-drop-shadow-xl" | ".uds-drop-shadow-2xl" | ".uds-drop-shadow-none" | ".uds-drop-shadow-xs" | ".uds-drop-shadow-elevation-0" | ".uds-drop-shadow-elevation-1" | ".uds-drop-shadow-elevation-2" | ".uds-drop-shadow-elevation-3" | ".uds-drop-shadow-elevation-4" | ".uds-drop-shadow-elevation-5", {
14
+ readonly [x: string]: "var(--uds-inset-shadow-sm)" | "var(--uds-inset-shadow-md)" | "var(--uds-inset-shadow-lg)" | "var(--uds-inset-shadow-xl)" | "var(--uds-inset-shadow-2xl)" | "var(--uds-inset-shadow-none)" | "var(--uds-inset-shadow-xs)" | "var(--uds-inset-shadow-elevation-0)" | "var(--uds-inset-shadow-elevation-1)" | "var(--uds-inset-shadow-elevation-2)" | "var(--uds-inset-shadow-elevation-3)" | "var(--uds-inset-shadow-elevation-4)" | "var(--uds-inset-shadow-elevation-5)" | "var(--uds-drop-shadow-sm)" | "var(--uds-drop-shadow-md)" | "var(--uds-drop-shadow-lg)" | "var(--uds-drop-shadow-xl)" | "var(--uds-drop-shadow-2xl)" | "var(--uds-drop-shadow-none)" | "var(--uds-drop-shadow-xs)" | "var(--uds-drop-shadow-elevation-0)" | "var(--uds-drop-shadow-elevation-1)" | "var(--uds-drop-shadow-elevation-2)" | "var(--uds-drop-shadow-elevation-3)" | "var(--uds-drop-shadow-elevation-4)" | "var(--uds-drop-shadow-elevation-5)" | "var(--uds-drop-shadow, 0 0 transparent), var(--uds-inset-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent)";
15
15
  readonly boxShadow: "var(--uds-drop-shadow, 0 0 transparent), var(--uds-inset-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent)";
16
16
  }>; //#endregion
17
17
  //#endregion
package/dist/types/dist/index.d.cts CHANGED
@@ -589,6 +589,8 @@ interface UniversalInputProps<IconSlotType = UniversalIconSlot> {
589
589
  readOnly?: boolean;
590
590
  /** The width of the input container. @default 'full' */
591
591
  width?: UniversalBoxProps['width'];
592
+ /** Minimum width of the input in pixels. @default 200 */
593
+ minWidth?: number;
592
594
  }
593
595
  type SelectSize = InputSize;
594
596
  interface UniversalSelectProps<IconSlotType = UniversalIconSlot> {
@@ -616,6 +618,8 @@ interface UniversalSelectProps<IconSlotType = UniversalIconSlot> {
616
618
  readOnly?: boolean;
617
619
  /** The width of the select container. @default 'full' */
618
620
  width?: UniversalBoxProps['width'];
621
+ /** Minimum width of the select in pixels. @default 200 */
622
+ minWidth?: number;
619
623
  }
620
624
  interface SelectOption {
621
625
  /** The value submitted in forms and returned by onChange. */
package/dist/types/dist/index.d.ts CHANGED
@@ -589,6 +589,8 @@ interface UniversalInputProps<IconSlotType = UniversalIconSlot> {
589
589
  readOnly?: boolean;
590
590
  /** The width of the input container. @default 'full' */
591
591
  width?: UniversalBoxProps['width'];
592
+ /** Minimum width of the input in pixels. @default 200 */
593
+ minWidth?: number;
592
594
  }
593
595
  type SelectSize = InputSize;
594
596
  interface UniversalSelectProps<IconSlotType = UniversalIconSlot> {
@@ -616,6 +618,8 @@ interface UniversalSelectProps<IconSlotType = UniversalIconSlot> {
616
618
  readOnly?: boolean;
617
619
  /** The width of the select container. @default 'full' */
618
620
  width?: UniversalBoxProps['width'];
621
+ /** Minimum width of the select in pixels. @default 200 */
622
+ minWidth?: number;
619
623
  }
620
624
  interface SelectOption {
621
625
  /** The value submitted in forms and returned by onChange. */