@hyphen/hyphen-components 7.0.0 → 7.2.0

package/dist/components/SelectInputNative/SelectInputNative.d.ts

@@ -3,14 +3,16 @@ import { ResponsiveProp } from '../../types';
 import { BoxProps } from '../Box/Box';
 import { FormControlProps } from '../FormControl/FormControl';
 export type SelectInputNativeSize = 'sm' | 'md' | 'lg';
+export interface SelectInputNativeOption {
+    value: string | number;
+    label: string | number;
+    disabled?: boolean;
+}
 export interface SelectInputNativeProps extends BoxProps, FormControlProps {
     /**
      * List of options for the select input.
      */
-    options: {
-        value: string | number;
-        label: string | number;
-    }[];
+    options: SelectInputNativeOption[];
     /**
      * onChange callback from select element.
      */

package/dist/css/utilities.css

@@ -3,7 +3,7 @@
   \***************************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Tue, 23 Dec 2025 18:50:27 GMT
+ * Generated on Fri, 09 Jan 2026 18:46:14 GMT
  */
 
 .font-family-monospace { font-family: var(--assets-font-family-monospace); }
@@ -390,6 +390,12 @@
 
 .focus\:border-color-info:focus { border-color: var(--color-border-info); }
 
+.border-color-success { border-color: var(--color-border-success); }
+
+.hover\:border-color-success:hover { border-color: var(--color-border-success); }
+
+.focus\:border-color-success:focus { border-color: var(--color-border-success); }
+
 .border-color-button-primary { border-color: var(--color-border-button-primary); }
 
 .hover\:border-color-button-primary:hover { border-color: var(--color-border-button-primary); }
@@ -534,6 +540,24 @@
 
 .focus\:border-color-white:focus { border-color: var(--color-border-white); }
 
+.border-color-green { border-color: var(--color-border-green); }
+
+.hover\:border-color-green:hover { border-color: var(--color-border-green); }
+
+.focus\:border-color-green:focus { border-color: var(--color-border-green); }
+
+.border-color-red { border-color: var(--color-border-red); }
+
+.hover\:border-color-red:hover { border-color: var(--color-border-red); }
+
+.focus\:border-color-red:focus { border-color: var(--color-border-red); }
+
+.border-color-purple { border-color: var(--color-border-purple); }
+
+.hover\:border-color-purple:hover { border-color: var(--color-border-purple); }
+
+.focus\:border-color-purple:focus { border-color: var(--color-border-purple); }
+
 .background-color-yellow { background-color: var(--color-brand-yellow); }
 
 .hover\:background-color-yellow:hover { background-color: var(--color-brand-yellow); }

package/dist/css/variables.css

@@ -3,7 +3,7 @@
   \*********************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Tue, 23 Dec 2025 18:50:27 GMT
+ * Generated on Fri, 09 Jan 2026 18:46:14 GMT
  */
 
 :root {
@@ -146,6 +146,7 @@
   --color-border-warning: #fde047;
   --color-border-inverse: #262626;
   --color-border-info: #bfdbfe;
+  --color-border-success: #bbf7d0;
   --color-border-button-primary: #171717;
   --color-border-button-primary-hover: #262626;
   --color-border-button-primary-active: #171717;
@@ -170,6 +171,9 @@
   --color-border-brand-dark-purple: #1e1e5a;
   --color-border-black: #000000;
   --color-border-white: #ffffff;
+  --color-border-green: #16a34a;
+  --color-border-red: #ef4444;
+  --color-border-purple: #a855f7;
   --color-brand-yellow: #ffd200;
   --color-brand-orange: #ff911e;
   --color-brand-magenta: #ff3278;
@@ -376,7 +380,7 @@
   \*******************************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Tue, 23 Dec 2025 18:50:27 GMT
+ * Generated on Fri, 09 Jan 2026 18:46:14 GMT
  */
 
 :root.dark {
@@ -421,6 +425,7 @@
   --color-border-warning: #fef08a;
   --color-border-inverse: #d4d4d4;
   --color-border-info: #bfdbfe;
+  --color-border-success: #bbf7d0;
   --color-border-button-primary: #ffffff;
   --color-border-button-primary-hover: #e5e5e5;
   --color-border-button-primary-active: #e5e5e5;

package/dist/hyphen-components.cjs.development.js

@@ -285,6 +285,7 @@ Component, props, getDefault) {
 var styles$z = {"box-transition":"Box-module_box-transition__eQx8C"};
 
 var _excluded$R = ["as", "alignItems", "alignContent", "alignSelf", "background", "borderColor", "borderWidth", "children", "childGap", "className", "color", "columnGap", "cursor", "display", "direction", "flex", "fontFamily", "fontSize", "focus", "fontWeight", "gap", "height", "hover", "justifyContent", "margin", "maxHeight", "minHeight", "maxWidth", "minWidth", "overflow", "padding", "position", "radius", "rowGap", "shadow", "style", "textAlign", "textTransform", "textWrap", "wrap", "whiteSpace", "width", "wordBreak", "zIndex"];
+var AUTO_FONT_COLOR_BACKGROUNDS = ['success', 'warning', 'danger', 'info'];
 /**
  * A `<Box>` is a layout component to build UIs with consistent padding and spacing between
  * elements.
@@ -386,6 +387,10 @@ var Box = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var maxWidthCss = getDimensionCss('mw', maxWidth);
   var minHeightCss = getDimensionCss('minh', minHeight);
   var minWidthCss = getDimensionCss('minw', minWidth);
+  // `inverse` background uses a matching `inverse` font color instead of the
+  // generic auto-mapped colors in AUTO_FONT_COLOR_BACKGROUNDS, so it is
+  // intentionally handled separately here.
+  var finalColor = color != null ? color : background === 'inverse' ? 'inverse' : AUTO_FONT_COLOR_BACKGROUNDS.includes(background) ? 'grey' : undefined;
   var isFlexBox = typeof display === 'string' && display.includes('flex');
   var flexDirectionClasses = isFlexBox ? generateResponsiveClasses('flex-direction', direction) : null;
   var cssPropertyMap = {
@@ -428,7 +433,7 @@ var Box = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var boxClasses = classNames.apply(void 0, [className, cssShorthandToClasses('m', margin), cssShorthandToClasses('p', padding), cssShorthandToClasses('br', radius), cssShorthandToClasses('g', gap), cssShorthandToClasses('cg', columnGap), cssShorthandToClasses('rg', rowGap), heightCss.classes, maxHeightCss.classes, minHeightCss.classes, maxWidthCss.classes, minWidthCss.classes, widthCss.classes, flexDirectionClasses, generateResponsiveClasses('display', display), generateResponsiveClasses('justify-content', justifyContent), generateResponsiveClasses('align-items', alignItems), generateResponsiveClasses('align-content', alignContent), generateResponsiveClasses('align-self', alignSelf), generateResponsiveClasses('font-family', fontFamily), generateResponsiveClasses('font-size', fontSize), generateResponsiveClasses('overflow', overflow), generateResponsiveClasses('shadow', shadow), generateResponsiveClasses('flex', flex), cssShorthandToClasses('bw', borderWidth), generateResponsiveClasses('font-weight', fontWeight), generateResponsiveClasses('text-align', textAlign), generateResponsiveClasses('transform', textTransform), generateResponsiveClasses('text-wrap', textWrap), generateResponsiveClasses('position', position), generateResponsiveClasses('z-index', zIndex), generateResponsiveClasses('whitespace', whiteSpace), generateResponsiveClasses('break', wordBreak)].concat(hoverClasses != null ? hoverClasses : [], focusClasses != null ? focusClasses : [], [(_ref3 = {
     'flex-wrap': isFlexBox && wrap,
     'flex-nowrap': isFlexBox && wrap === false
-  }, _ref3["background-color-" + background] = background, _ref3["font-color-" + color] = color, _ref3["border-color-" + borderColor] = borderColor, _ref3["cursor-" + cursor] = cursor, _ref3[styles$z['box-transition']] = hover || focus, _ref3)]));
+  }, _ref3["background-color-" + background] = background, _ref3["font-color-" + finalColor] = finalColor, _ref3["border-color-" + borderColor] = borderColor, _ref3["cursor-" + cursor] = cursor, _ref3[styles$z['box-transition']] = hover || focus, _ref3)]));
   var boxStyles = _extends({}, style, heightCss.styles, maxHeightCss.styles, maxWidthCss.styles, widthCss.styles, minHeightCss.styles, minWidthCss.styles);
   /**
    * Creates an object that maps the flex direction to either `right` or `bottom`
@@ -2672,9 +2677,10 @@ var SelectInputNative = function SelectInputNative(_ref) {
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded$o);
   var placeholderOption = {
     value: '',
-    label: placeholder
+    label: placeholder,
+    disabled: true
   };
-  var optionsWithPlaceholder = [_extends({}, placeholderOption)].concat(options);
+  var optionsWithPlaceholder = [placeholderOption].concat(options);
   var responsiveClasses = generateResponsiveClasses('size', size);
   var selectWrapperClasses = classNames.apply(void 0, ['hyphen-components__variables__form-control', styles$g['select-input-native-wrapper']].concat(responsiveClasses.map(function (className) {
     return styles$g[className];
@@ -2704,11 +2710,12 @@ var SelectInputNative = function SelectInputNative(_ref) {
     id: id,
     required: isRequired
   }, optionsWithPlaceholder.map(function (option) {
+    var _option$disabled;
     return React.createElement(Box, {
       as: "option",
       key: option.value,
       value: option.value,
-      disabled: option.value === '',
+      disabled: (_option$disabled = option.disabled) != null ? _option$disabled : false,
       hidden: option.value === '',
       color: option.value === '' ? 'disabled' : 'base'
     }, option.label);