@hyphen/hyphen-components 5.7.3 → 5.8.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 } 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 } from '../../types';
 import { CSSProperties, FC, ReactNode } from 'react';
 import { KnownKeys } from '../../types/lib.types';
 export type HoverableBoxProperties = 'color' | 'borderColor' | 'shadow' | 'background';
@@ -200,6 +200,10 @@ export interface BoxProps {
      * the alignment of the text
      */
     textAlign?: CssTextAlignValue | ResponsiveProp<CssTextAlignValue>;
+    /**
+     * Control the whitespace behavior of the Box
+     */
+    whiteSpace?: CssWhiteSpaceValue | ResponsiveProp<CssWhiteSpaceValue>;
     /**
      * 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
@@ -210,6 +214,10 @@ export interface BoxProps {
      * or a [width token](/?path=/docs/foundation-design-tokens--docs#width)
      */
     width?: DimensionSize | ResponsiveProp<DimensionSize> | string;
+    /**
+     * 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

@@ -23,11 +23,13 @@ export declare const Margin: () => React.JSX.Element;
 export declare const Padding: () => React.JSX.Element;
 export declare const Radius: () => React.JSX.Element;
 export declare const Shadow: () => React.JSX.Element;
+export declare const WhiteSpace: () => React.JSX.Element;
 export declare const Width: () => React.JSX.Element;
 export declare const WidthTokens: () => React.JSX.Element;
 export declare const WidthPercentages: () => React.JSX.Element;
 export declare const WidthMax: () => React.JSX.Element;
 export declare const WidthMin: () => React.JSX.Element;
+export declare const WordBreak: () => React.JSX.Element;
 export declare const Height: () => React.JSX.Element;
 export declare const HeightTokens: () => React.JSX.Element;
 export declare const HeightPercentages: () => React.JSX.Element;

package/dist/css/utilities.css

@@ -3,7 +3,7 @@
   \***************************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Wed, 23 Jul 2025 23:15:03 GMT
+ * Generated on Fri, 15 Aug 2025 16:51:26 GMT
  */
 
 .font-family-monospace { font-family: var(--assets-font-family-monospace); }
@@ -864,6 +864,24 @@
 
 .transform-normal-case { text-transform: var(--font-text-transform-normal-case); }
 
+.whitespace-normal { white-space: var(--font-white-space-normal); }
+
+.whitespace-nowrap { white-space: var(--font-white-space-nowrap); }
+
+.whitespace-pre { white-space: var(--font-white-space-pre); }
+
+.whitespace-pre-line { white-space: var(--font-white-space-pre-line); }
+
+.whitespace-pre-wrap { white-space: var(--font-white-space-pre-wrap); }
+
+.whitespace-break-spaces { white-space: var(--font-white-space-break-spaces); }
+
+.break-normal { word-break: var(--font-word-break-normal); }
+
+.break-break-all { word-break: var(--font-word-break-break-all); }
+
+.break-keep-all { word-break: var(--font-word-break-keep-all); }
+
 .bw-0 { border-width: var(--size-border-width-0); border-style: solid; }
 
 .bw-top-0 { border-top-width: var(--size-border-width-0); border-top-style: solid; }
@@ -2171,6 +2189,24 @@
 .z-sticky { z-index: var(--size-z-index-sticky); }
 
 @media (min-width: 680px) {
+  .whitespace-normal-tablet { white-space: var(--font-white-space-normal); }
+
+  .whitespace-nowrap-tablet { white-space: var(--font-white-space-nowrap); }
+
+  .whitespace-pre-tablet { white-space: var(--font-white-space-pre); }
+
+  .whitespace-pre-line-tablet { white-space: var(--font-white-space-pre-line); }
+
+  .whitespace-pre-wrap-tablet { white-space: var(--font-white-space-pre-wrap); }
+
+  .whitespace-break-spaces-tablet { white-space: var(--font-white-space-break-spaces); }
+
+  .break-normal-tablet { word-break: var(--font-word-break-normal); }
+
+  .break-break-all-tablet { word-break: var(--font-word-break-break-all); }
+
+  .break-keep-all-tablet { word-break: var(--font-word-break-keep-all); }
+
   .bw-0-tablet { border-width: var(--size-border-width-0); border-style: solid; }
 
   .bw-top-0-tablet { border-top-width: var(--size-border-width-0); border-top-style: solid; }
@@ -3458,6 +3494,24 @@
 }
 
 @media (min-width: 992px) {
+  .whitespace-normal-desktop { white-space: var(--font-white-space-normal); }
+
+  .whitespace-nowrap-desktop { white-space: var(--font-white-space-nowrap); }
+
+  .whitespace-pre-desktop { white-space: var(--font-white-space-pre); }
+
+  .whitespace-pre-line-desktop { white-space: var(--font-white-space-pre-line); }
+
+  .whitespace-pre-wrap-desktop { white-space: var(--font-white-space-pre-wrap); }
+
+  .whitespace-break-spaces-desktop { white-space: var(--font-white-space-break-spaces); }
+
+  .break-normal-desktop { word-break: var(--font-word-break-normal); }
+
+  .break-break-all-desktop { word-break: var(--font-word-break-break-all); }
+
+  .break-keep-all-desktop { word-break: var(--font-word-break-keep-all); }
+
   .bw-0-desktop { border-width: var(--size-border-width-0); border-style: solid; }
 
   .bw-top-0-desktop { border-top-width: var(--size-border-width-0); border-top-style: solid; }
@@ -4745,6 +4799,24 @@
 }
 
 @media (min-width: 1280px) {
+  .whitespace-normal-hd { white-space: var(--font-white-space-normal); }
+
+  .whitespace-nowrap-hd { white-space: var(--font-white-space-nowrap); }
+
+  .whitespace-pre-hd { white-space: var(--font-white-space-pre); }
+
+  .whitespace-pre-line-hd { white-space: var(--font-white-space-pre-line); }
+
+  .whitespace-pre-wrap-hd { white-space: var(--font-white-space-pre-wrap); }
+
+  .whitespace-break-spaces-hd { white-space: var(--font-white-space-break-spaces); }
+
+  .break-normal-hd { word-break: var(--font-word-break-normal); }
+
+  .break-break-all-hd { word-break: var(--font-word-break-break-all); }
+
+  .break-keep-all-hd { word-break: var(--font-word-break-keep-all); }
+
   .bw-0-hd { border-width: var(--size-border-width-0); border-style: solid; }
 
   .bw-top-0-hd { border-top-width: var(--size-border-width-0); border-top-style: solid; }

package/dist/css/variables.css

@@ -3,7 +3,7 @@
   \*********************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Wed, 23 Jul 2025 23:15:03 GMT
+ * Generated on Fri, 15 Aug 2025 16:51:26 GMT
  */
 
 :root {
@@ -231,6 +231,15 @@
   --font-text-transform-lowercase: lowercase;
   --font-text-transform-capitalize: capitalize;
   --font-text-transform-normal-case: normal-case;
+  --font-white-space-normal: normal;
+  --font-white-space-nowrap: nowrap;
+  --font-white-space-pre: pre;
+  --font-white-space-pre-line: pre-line;
+  --font-white-space-pre-wrap: pre-wrap;
+  --font-white-space-break-spaces: break-spaces;
+  --font-word-break-normal: normal;
+  --font-word-break-break-all: break-all;
+  --font-word-break-keep-all: keep-all;
   --size-border-width-0: 0rem;
   --size-border-width-sm: 0.0625rem;
   --size-border-width-md: 0.125rem;
@@ -357,7 +366,7 @@
   \*******************************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Wed, 23 Jul 2025 23:15:03 GMT
+ * Generated on Fri, 15 Aug 2025 16:51:26 GMT
  */
 
 :root.dark {

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

@@ -281,7 +281,7 @@ Component, props, getDefault) {
 
 var styles$A = {"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", "wrap", "width", "zIndex"];
+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", "wrap", "whiteSpace", "width", "wordBreak", "zIndex"];
 /**
  * A `<Box>` is a layout component to build UIs with consistent padding and spacing between
  * elements.
@@ -364,8 +364,12 @@ var Box = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     textAlign = _ref$textAlign === void 0 ? undefined : _ref$textAlign,
     _ref$wrap = _ref.wrap,
     wrap = _ref$wrap === void 0 ? undefined : _ref$wrap,
+    _ref$whiteSpace = _ref.whiteSpace,
+    whiteSpace = _ref$whiteSpace === void 0 ? undefined : _ref$whiteSpace,
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? undefined : _ref$width,
+    _ref$wordBreak = _ref.wordBreak,
+    wordBreak = _ref$wordBreak === void 0 ? undefined : _ref$wordBreak,
     _ref$zIndex = _ref.zIndex,
     zIndex = _ref$zIndex === void 0 ? undefined : _ref$zIndex,
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded$R);
@@ -414,7 +418,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)].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('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)]));
@@ -4257,10 +4261,15 @@ SidebarInset.displayName = 'SidebarInset';
 var SidebarHeader = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
   var className = _ref5.className,
     props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
+  var _useSidebar3 = useSidebar(),
+    state = _useSidebar3.state;
+  var isCollapsed = state === 'collapsed';
   return React.createElement("div", _extends({
     ref: ref,
     "data-sidebar": "header",
-    className: classNames('display-flex g-sm p-v-md p-h-md p-right-0-desktop', className)
+    className: classNames('display-flex g-sm p-v-md p-h-md p-right-0-desktop', {
+      'overflow-hidden': isCollapsed
+    }, className)
   }, props));
 });
 SidebarHeader.displayName = 'SidebarHeader';
@@ -4323,9 +4332,9 @@ var SidebarMenuButton = /*#__PURE__*/React.forwardRef(function (_ref0, ref) {
     className = _ref0.className,
     props = _objectWithoutPropertiesLoose(_ref0, _excluded0);
   var Comp = asChild ? reactSlot.Slot : 'button';
-  var _useSidebar3 = useSidebar(),
-    isMobile = _useSidebar3.isMobile,
-    state = _useSidebar3.state;
+  var _useSidebar4 = useSidebar(),
+    isMobile = _useSidebar4.isMobile,
+    state = _useSidebar4.state;
   var button = React.createElement(Comp, _extends({
     ref: ref,
     "data-sidebar": "menu-button",
@@ -4430,9 +4439,9 @@ SidebarMenuAction.displayName = 'SidebarMenuAction';
 var SidebarRail = /*#__PURE__*/React.forwardRef(function (_ref15, ref) {
   var className = _ref15.className,
     props = _objectWithoutPropertiesLoose(_ref15, _excluded14);
-  var _useSidebar4 = useSidebar(),
-    open = _useSidebar4.open,
-    toggleSidebar = _useSidebar4.toggleSidebar;
+  var _useSidebar5 = useSidebar(),
+    open = _useSidebar5.open,
+    toggleSidebar = _useSidebar5.toggleSidebar;
   var caretIcon = open ? 'caret-sm-left' : 'caret-sm-right';
   return React.createElement("button", _extends({
     ref: ref,