@hyphen/hyphen-components 6.6.0 → 6.7.0

package/dist/components/Box/Box.d.ts

@@ -1,5 +1,5 @@
 import * as CSS from 'csstype';
-import { BaseSpacing, BorderRadiusSize, BorderSize, BoxShadowSize, CssAlignContentValue, CssAlignItemsValue, CssDisplayValue, CssFlexDirectionValue, CssFlexValue, CssJustifyContentValue, CssOverflowValue, CssTextAlignValue, DimensionSize, FontColor, FontFamily, FontSize, FontWeight, ResponsiveProp, SpacingSize, ZIndexSize, BackgroundColor, BorderColor, CssWhiteSpaceValue, CssWordBreakValue } from '../../types';
+import { BaseSpacing, BorderRadiusSize, BorderSize, BoxShadowSize, CssAlignContentValue, CssAlignItemsValue, CssDisplayValue, CssFlexDirectionValue, CssFlexValue, CssJustifyContentValue, CssOverflowValue, CssTextAlignValue, DimensionSize, FontColor, FontFamily, FontSize, FontWeight, ResponsiveProp, SpacingSize, ZIndexSize, BackgroundColor, BorderColor, CssWhiteSpaceValue, CssWordBreakValue, TextWrap, TextTransform } from '../../types';
 import { CSSProperties, FC, ReactNode } from 'react';
 import { KnownKeys } from '../../types/lib.types';
 export type HoverableBoxProperties = 'color' | 'borderColor' | 'shadow' | 'background';
@@ -200,10 +200,22 @@ export interface BoxProps {
      * the alignment of the text
      */
     textAlign?: CssTextAlignValue | ResponsiveProp<CssTextAlignValue>;
+    /**
+     * Control the text transformation of the Box
+     */
+    textTransform?: TextTransform | ResponsiveProp<TextTransform>;
+    /**
+     * Control the text wrapping behavior of the Box
+     */
+    textWrap?: TextWrap | ResponsiveProp<TextWrap>;
     /**
      * Control the whitespace behavior of the Box
      */
     whiteSpace?: CssWhiteSpaceValue | ResponsiveProp<CssWhiteSpaceValue>;
+    /**
+     * Control the word break behavior of the Box
+     */
+    wordBreak?: CssWordBreakValue | ResponsiveProp<CssWordBreakValue>;
     /**
      * By default, a Box's items will all try to fit onto one line.
      * Change that and allow the items to wrap as needed wrap
@@ -217,7 +229,6 @@ export interface BoxProps {
     /**
      * Control the word break behavior of the Box
      */
-    wordBreak?: CssWordBreakValue | ResponsiveProp<CssWordBreakValue>;
     /**
      * ZIndex value for the element. Can be one of the predetermined token values.
      * Can be responsive.

package/dist/components/Box/Box.stories.d.ts

@@ -42,3 +42,5 @@ export declare const Hover: () => React.JSX.Element;
 export declare const Focus: () => React.JSX.Element;
 export declare const Responsive: () => React.JSX.Element;
 export declare const Omit: () => React.JSX.Element;
+export declare const TextWrap: () => React.JSX.Element;
+export declare const TextTransform: () => React.JSX.Element;

package/dist/css/utilities.css

@@ -3,7 +3,7 @@
   \***************************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Fri, 21 Nov 2025 19:15:02 GMT
+ * Generated on Wed, 26 Nov 2025 19:31:43 GMT
  */
 
 .font-family-monospace { font-family: var(--assets-font-family-monospace); }
@@ -876,6 +876,22 @@
 
 .transform-normal-case { text-transform: var(--font-text-transform-normal-case); }
 
+.text-wrap-wrap { text-wrap: var(--font-text-wrap-wrap); }
+
+.text-wrap-nowrap { text-wrap: var(--font-text-wrap-nowrap); }
+
+.text-wrap-balance { text-wrap: var(--font-text-wrap-balance); }
+
+.text-wrap-pretty { text-wrap: var(--font-text-wrap-pretty); }
+
+.text-wrap-stable { text-wrap: var(--font-text-wrap-stable); }
+
+.text-wrap-inherit { text-wrap: var(--font-text-wrap-inherit); }
+
+.text-wrap-initial { text-wrap: var(--font-text-wrap-initial); }
+
+.text-wrap-unset { text-wrap: var(--font-text-wrap-unset); }
+
 .whitespace-normal { white-space: var(--font-white-space-normal); }
 
 .whitespace-nowrap { white-space: var(--font-white-space-nowrap); }
@@ -2201,6 +2217,22 @@
 .z-sticky { z-index: var(--size-z-index-sticky); }
 
 @media (min-width: 680px) {
+  .text-wrap-wrap-tablet { text-wrap: var(--font-text-wrap-wrap); }
+
+  .text-wrap-nowrap-tablet { text-wrap: var(--font-text-wrap-nowrap); }
+
+  .text-wrap-balance-tablet { text-wrap: var(--font-text-wrap-balance); }
+
+  .text-wrap-pretty-tablet { text-wrap: var(--font-text-wrap-pretty); }
+
+  .text-wrap-stable-tablet { text-wrap: var(--font-text-wrap-stable); }
+
+  .text-wrap-inherit-tablet { text-wrap: var(--font-text-wrap-inherit); }
+
+  .text-wrap-initial-tablet { text-wrap: var(--font-text-wrap-initial); }
+
+  .text-wrap-unset-tablet { text-wrap: var(--font-text-wrap-unset); }
+
   .whitespace-normal-tablet { white-space: var(--font-white-space-normal); }
 
   .whitespace-nowrap-tablet { white-space: var(--font-white-space-nowrap); }
@@ -3506,6 +3538,22 @@
 }
 
 @media (min-width: 992px) {
+  .text-wrap-wrap-desktop { text-wrap: var(--font-text-wrap-wrap); }
+
+  .text-wrap-nowrap-desktop { text-wrap: var(--font-text-wrap-nowrap); }
+
+  .text-wrap-balance-desktop { text-wrap: var(--font-text-wrap-balance); }
+
+  .text-wrap-pretty-desktop { text-wrap: var(--font-text-wrap-pretty); }
+
+  .text-wrap-stable-desktop { text-wrap: var(--font-text-wrap-stable); }
+
+  .text-wrap-inherit-desktop { text-wrap: var(--font-text-wrap-inherit); }
+
+  .text-wrap-initial-desktop { text-wrap: var(--font-text-wrap-initial); }
+
+  .text-wrap-unset-desktop { text-wrap: var(--font-text-wrap-unset); }
+
   .whitespace-normal-desktop { white-space: var(--font-white-space-normal); }
 
   .whitespace-nowrap-desktop { white-space: var(--font-white-space-nowrap); }
@@ -4811,6 +4859,22 @@
 }
 
 @media (min-width: 1280px) {
+  .text-wrap-wrap-hd { text-wrap: var(--font-text-wrap-wrap); }
+
+  .text-wrap-nowrap-hd { text-wrap: var(--font-text-wrap-nowrap); }
+
+  .text-wrap-balance-hd { text-wrap: var(--font-text-wrap-balance); }
+
+  .text-wrap-pretty-hd { text-wrap: var(--font-text-wrap-pretty); }
+
+  .text-wrap-stable-hd { text-wrap: var(--font-text-wrap-stable); }
+
+  .text-wrap-inherit-hd { text-wrap: var(--font-text-wrap-inherit); }
+
+  .text-wrap-initial-hd { text-wrap: var(--font-text-wrap-initial); }
+
+  .text-wrap-unset-hd { text-wrap: var(--font-text-wrap-unset); }
+
   .whitespace-normal-hd { white-space: var(--font-white-space-normal); }
 
   .whitespace-nowrap-hd { white-space: var(--font-white-space-nowrap); }

package/dist/css/variables.css

@@ -3,7 +3,7 @@
   \*********************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Fri, 21 Nov 2025 19:15:02 GMT
+ * Generated on Wed, 26 Nov 2025 19:31:43 GMT
  */
 
 :root {
@@ -233,6 +233,14 @@
   --font-text-transform-lowercase: lowercase;
   --font-text-transform-capitalize: capitalize;
   --font-text-transform-normal-case: normal-case;
+  --font-text-wrap-wrap: wrap;
+  --font-text-wrap-nowrap: nowrap;
+  --font-text-wrap-balance: balance;
+  --font-text-wrap-pretty: pretty;
+  --font-text-wrap-stable: stable;
+  --font-text-wrap-inherit: inherit;
+  --font-text-wrap-initial: initial;
+  --font-text-wrap-unset: unset;
   --font-white-space-normal: normal;
   --font-white-space-nowrap: nowrap;
   --font-white-space-pre: pre;
@@ -368,7 +376,7 @@
   \*******************************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Fri, 21 Nov 2025 19:15:02 GMT
+ * Generated on Wed, 26 Nov 2025 19:31:43 GMT
  */
 
 :root.dark {

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

@@ -284,7 +284,7 @@ Component, props, getDefault) {
 
 var styles$A = {"box-transition":"Box-module_box-transition__eQx8C"};
 
-var _excluded$Q = ["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", "wrap", "whiteSpace", "width", "wordBreak", "zIndex"];
+var _excluded$Q = ["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"];
 /**
  * A `<Box>` is a layout component to build UIs with consistent padding and spacing between
  * elements.
@@ -365,6 +365,10 @@ var Box = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     style = _ref$style === void 0 ? {} : _ref$style,
     _ref$textAlign = _ref.textAlign,
     textAlign = _ref$textAlign === void 0 ? undefined : _ref$textAlign,
+    _ref$textTransform = _ref.textTransform,
+    textTransform = _ref$textTransform === void 0 ? undefined : _ref$textTransform,
+    _ref$textWrap = _ref.textWrap,
+    textWrap = _ref$textWrap === void 0 ? undefined : _ref$textWrap,
     _ref$wrap = _ref.wrap,
     wrap = _ref$wrap === void 0 ? undefined : _ref$wrap,
     _ref$whiteSpace = _ref.whiteSpace,
@@ -421,7 +425,7 @@ var Box = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   var hoverClasses = getStatefulClasses('hover', hover);
   var focusClasses = getStatefulClasses('focus', focus);
-  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('position', position), generateResponsiveClasses('z-index', zIndex), generateResponsiveClasses('whitespace', whiteSpace), generateResponsiveClasses('break', wordBreak)].concat(hoverClasses != null ? hoverClasses : [], focusClasses != null ? focusClasses : [], [(_ref3 = {
+  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$A['box-transition']] = hover || focus, _ref3)]));
@@ -524,7 +528,7 @@ var Box = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: ref
   }, restProps), children !== null && children !== undefined ? decoratedChildren : null);
 });
-var boxPropsKeys = ['as', 'alignItems', 'alignContent', 'alignSelf', 'background', 'borderColor', 'borderWidth', 'className', 'childGap', 'children', 'color', 'columnGap', 'cursor', 'direction', 'display', 'flex', 'focus', 'fontFamily', 'fontSize', 'fontWeight', 'gap', 'height', 'hover', 'justifyContent', 'margin', 'maxHeight', 'minHeight', 'maxWidth', 'minWidth', 'overflow', 'padding', 'position', 'radius', 'rowGap', 'shadow', 'style', 'textAlign', 'wrap', 'width', 'zIndex'];
+var boxPropsKeys = ['as', 'alignItems', 'alignContent', 'alignSelf', 'background', 'borderColor', 'borderWidth', 'className', 'childGap', 'children', 'color', 'columnGap', 'cursor', 'direction', 'display', 'flex', 'focus', 'fontFamily', 'fontSize', 'fontWeight', 'gap', 'height', 'hover', 'justifyContent', 'margin', 'maxHeight', 'minHeight', 'maxWidth', 'minWidth', 'overflow', 'padding', 'position', 'radius', 'rowGap', 'shadow', 'style', 'textAlign', 'textTransform', 'textWrap', 'wrap', 'width', 'zIndex'];
 
 var _excluded$P = ["className", "name", "color", "size"];
 var Icon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {