@hyphen/hyphen-components 4.12.0 → 4.13.0

package/dist/css/utilities.css

@@ -3,7 +3,7 @@
   \***************************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Thu, 20 Mar 2025 15:33:59 GMT
+ * Generated on Sat, 22 Mar 2025 17:35:23 GMT
  */
 
 .font-family-monospace { font-family: var(--assets-font-family-monospace); }
@@ -1304,6 +1304,54 @@
 
 .minh-10xl { min-height: var(--size-dimension-10xl); }
 
+.w-fit { width: var(--size-dimension-fit); }
+
+.h-fit { height: var(--size-dimension-fit); }
+
+.mw-fit { max-width: var(--size-dimension-fit); }
+
+.mh-fit { max-height: var(--size-dimension-fit); }
+
+.minw-fit { min-width: var(--size-dimension-fit); }
+
+.minh-fit { min-height: var(--size-dimension-fit); }
+
+.w-min { width: var(--size-dimension-min); }
+
+.h-min { height: var(--size-dimension-min); }
+
+.mw-min { max-width: var(--size-dimension-min); }
+
+.mh-min { max-height: var(--size-dimension-min); }
+
+.minw-min { min-width: var(--size-dimension-min); }
+
+.minh-min { min-height: var(--size-dimension-min); }
+
+.w-max { width: var(--size-dimension-max); }
+
+.h-max { height: var(--size-dimension-max); }
+
+.mw-max { max-width: var(--size-dimension-max); }
+
+.mh-max { max-height: var(--size-dimension-max); }
+
+.minw-max { min-width: var(--size-dimension-max); }
+
+.minh-max { min-height: var(--size-dimension-max); }
+
+.w-auto { width: var(--size-dimension-auto); }
+
+.h-auto { height: var(--size-dimension-auto); }
+
+.mw-auto { max-width: var(--size-dimension-auto); }
+
+.mh-auto { max-height: var(--size-dimension-auto); }
+
+.minw-auto { min-width: var(--size-dimension-auto); }
+
+.minh-auto { min-height: var(--size-dimension-auto); }
+
 .w-0 { width: var(--size-percentage-0); }
 
 .h-0 { height: var(--size-percentage-0); }
@@ -2419,6 +2467,54 @@
 
   .minh-10xl-tablet { min-height: var(--size-dimension-10xl); }
 
+  .w-fit-tablet { width: var(--size-dimension-fit); }
+
+  .h-fit-tablet { height: var(--size-dimension-fit); }
+
+  .mw-fit-tablet { max-width: var(--size-dimension-fit); }
+
+  .mh-fit-tablet { max-height: var(--size-dimension-fit); }
+
+  .minw-fit-tablet { min-width: var(--size-dimension-fit); }
+
+  .minh-fit-tablet { min-height: var(--size-dimension-fit); }
+
+  .w-min-tablet { width: var(--size-dimension-min); }
+
+  .h-min-tablet { height: var(--size-dimension-min); }
+
+  .mw-min-tablet { max-width: var(--size-dimension-min); }
+
+  .mh-min-tablet { max-height: var(--size-dimension-min); }
+
+  .minw-min-tablet { min-width: var(--size-dimension-min); }
+
+  .minh-min-tablet { min-height: var(--size-dimension-min); }
+
+  .w-max-tablet { width: var(--size-dimension-max); }
+
+  .h-max-tablet { height: var(--size-dimension-max); }
+
+  .mw-max-tablet { max-width: var(--size-dimension-max); }
+
+  .mh-max-tablet { max-height: var(--size-dimension-max); }
+
+  .minw-max-tablet { min-width: var(--size-dimension-max); }
+
+  .minh-max-tablet { min-height: var(--size-dimension-max); }
+
+  .w-auto-tablet { width: var(--size-dimension-auto); }
+
+  .h-auto-tablet { height: var(--size-dimension-auto); }
+
+  .mw-auto-tablet { max-width: var(--size-dimension-auto); }
+
+  .mh-auto-tablet { max-height: var(--size-dimension-auto); }
+
+  .minw-auto-tablet { min-width: var(--size-dimension-auto); }
+
+  .minh-auto-tablet { min-height: var(--size-dimension-auto); }
+
   .w-0-tablet { width: var(--size-percentage-0); }
 
   .h-0-tablet { height: var(--size-percentage-0); }
@@ -3658,6 +3754,54 @@
 
   .minh-10xl-desktop { min-height: var(--size-dimension-10xl); }
 
+  .w-fit-desktop { width: var(--size-dimension-fit); }
+
+  .h-fit-desktop { height: var(--size-dimension-fit); }
+
+  .mw-fit-desktop { max-width: var(--size-dimension-fit); }
+
+  .mh-fit-desktop { max-height: var(--size-dimension-fit); }
+
+  .minw-fit-desktop { min-width: var(--size-dimension-fit); }
+
+  .minh-fit-desktop { min-height: var(--size-dimension-fit); }
+
+  .w-min-desktop { width: var(--size-dimension-min); }
+
+  .h-min-desktop { height: var(--size-dimension-min); }
+
+  .mw-min-desktop { max-width: var(--size-dimension-min); }
+
+  .mh-min-desktop { max-height: var(--size-dimension-min); }
+
+  .minw-min-desktop { min-width: var(--size-dimension-min); }
+
+  .minh-min-desktop { min-height: var(--size-dimension-min); }
+
+  .w-max-desktop { width: var(--size-dimension-max); }
+
+  .h-max-desktop { height: var(--size-dimension-max); }
+
+  .mw-max-desktop { max-width: var(--size-dimension-max); }
+
+  .mh-max-desktop { max-height: var(--size-dimension-max); }
+
+  .minw-max-desktop { min-width: var(--size-dimension-max); }
+
+  .minh-max-desktop { min-height: var(--size-dimension-max); }
+
+  .w-auto-desktop { width: var(--size-dimension-auto); }
+
+  .h-auto-desktop { height: var(--size-dimension-auto); }
+
+  .mw-auto-desktop { max-width: var(--size-dimension-auto); }
+
+  .mh-auto-desktop { max-height: var(--size-dimension-auto); }
+
+  .minw-auto-desktop { min-width: var(--size-dimension-auto); }
+
+  .minh-auto-desktop { min-height: var(--size-dimension-auto); }
+
   .w-0-desktop { width: var(--size-percentage-0); }
 
   .h-0-desktop { height: var(--size-percentage-0); }
@@ -4897,6 +5041,54 @@
 
   .minh-10xl-hd { min-height: var(--size-dimension-10xl); }
 
+  .w-fit-hd { width: var(--size-dimension-fit); }
+
+  .h-fit-hd { height: var(--size-dimension-fit); }
+
+  .mw-fit-hd { max-width: var(--size-dimension-fit); }
+
+  .mh-fit-hd { max-height: var(--size-dimension-fit); }
+
+  .minw-fit-hd { min-width: var(--size-dimension-fit); }
+
+  .minh-fit-hd { min-height: var(--size-dimension-fit); }
+
+  .w-min-hd { width: var(--size-dimension-min); }
+
+  .h-min-hd { height: var(--size-dimension-min); }
+
+  .mw-min-hd { max-width: var(--size-dimension-min); }
+
+  .mh-min-hd { max-height: var(--size-dimension-min); }
+
+  .minw-min-hd { min-width: var(--size-dimension-min); }
+
+  .minh-min-hd { min-height: var(--size-dimension-min); }
+
+  .w-max-hd { width: var(--size-dimension-max); }
+
+  .h-max-hd { height: var(--size-dimension-max); }
+
+  .mw-max-hd { max-width: var(--size-dimension-max); }
+
+  .mh-max-hd { max-height: var(--size-dimension-max); }
+
+  .minw-max-hd { min-width: var(--size-dimension-max); }
+
+  .minh-max-hd { min-height: var(--size-dimension-max); }
+
+  .w-auto-hd { width: var(--size-dimension-auto); }
+
+  .h-auto-hd { height: var(--size-dimension-auto); }
+
+  .mw-auto-hd { max-width: var(--size-dimension-auto); }
+
+  .mh-auto-hd { max-height: var(--size-dimension-auto); }
+
+  .minw-auto-hd { min-width: var(--size-dimension-auto); }
+
+  .minh-auto-hd { min-height: var(--size-dimension-auto); }
+
   .w-0-hd { width: var(--size-percentage-0); }
 
   .h-0-hd { height: var(--size-percentage-0); }

package/dist/css/variables.css

@@ -3,7 +3,7 @@
   \*********************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Thu, 20 Mar 2025 15:33:59 GMT
+ * Generated on Sat, 22 Mar 2025 17:35:23 GMT
  */
 
 :root {
@@ -262,6 +262,10 @@
   --size-dimension-8xl: 16rem;
   --size-dimension-9xl: 32rem;
   --size-dimension-10xl: 64rem;
+  --size-dimension-fit: fit-content;
+  --size-dimension-min: min-content;
+  --size-dimension-max: max-content;
+  --size-dimension-auto: auto;
   --size-percentage-0: 0%;
   --size-percentage-10: 10%;
   --size-percentage-15: 15%;
@@ -345,7 +349,7 @@
   \*******************************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Thu, 20 Mar 2025 15:33:59 GMT
+ * Generated on Sat, 22 Mar 2025 17:35:23 GMT
  */
 
 :root.dark {

package/dist/lib/tokens.d.ts

@@ -13,10 +13,10 @@ export declare const FONT_SIZE_OPTIONS: ("xs" | "sm" | "md" | "lg" | "xl" | "2xl
 export declare const FONT_FAMILY_OPTIONS: ("monospace" | "body" | "brand")[];
 export declare const FONT_WEIGHT_OPTIONS: ("form-label" | "form-help-text" | "light" | "normal" | "medium" | "semibold" | "bold")[];
 export declare const HEADING_SIZE_OPTIONS: ("sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl")[];
-export declare const HEIGHT_OPTIONS: ("0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "2xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | "10" | "15" | "20" | "25" | "30" | "33" | "34" | "40" | "50" | "60" | "66" | "70" | "75" | "80" | "90" | "100")[];
+export declare const HEIGHT_OPTIONS: ("0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "2xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | "fit" | "min" | "max" | "auto" | "10" | "15" | "20" | "25" | "30" | "33" | "34" | "40" | "50" | "60" | "66" | "70" | "75" | "80" | "90" | "100")[];
 export declare const LINE_HEIGHT_OPTIONS: ("base" | "none" | "input" | "heading" | "text")[];
 export declare const SPACING_OPTIONS: ("0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "2xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | "auto")[];
-export declare const WIDTH_OPTIONS: ("0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "2xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | "10" | "15" | "20" | "25" | "30" | "33" | "34" | "40" | "50" | "60" | "66" | "70" | "75" | "80" | "90" | "100")[];
+export declare const WIDTH_OPTIONS: ("0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "2xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | "fit" | "min" | "max" | "auto" | "10" | "15" | "20" | "25" | "30" | "33" | "34" | "40" | "50" | "60" | "66" | "70" | "75" | "80" | "90" | "100")[];
 export declare const Z_INDEX_OPTIONS: ("0" | "modal" | "popover" | "overlay" | "drawer" | "sticky")[];
 export declare const Z_INDEX_VALUES: any;
 export declare const BOX_SHADOW_OPTIONS: ("0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "2xs")[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "4.12.0",
+  "version": "4.13.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -62,7 +62,7 @@
   ],
   "dependencies": {
     "@emotion/react": "^11.14.0",
-    "@hyphen/hyphen-design-tokens": "^4.31.0",
+    "@hyphen/hyphen-design-tokens": "^4.32.0",
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-collapsible": "^1.1.3",
     "@radix-ui/react-dropdown-menu": "^2.1.6",

package/src/components/Box/Box.stories.tsx

@@ -1025,6 +1025,18 @@ export const WidthTokens = () => (
     <Box background="tertiary" width="10xl">
       10xl
     </Box>
+    <Box background="tertiary" width="auto">
+      auto
+    </Box>
+    <Box background="tertiary" width="min">
+      min
+    </Box>
+    <Box background="tertiary" width="max">
+      max
+    </Box>
+    <Box background="tertiary" width="fit">
+      fit
+    </Box>
   </Box>
 );
 
@@ -1251,6 +1263,43 @@ export const HeightTokens = () => (
     >
       10xl
     </Box>
+
+    <Box
+      flex="auto"
+      background="tertiary"
+      justifyContent="center"
+      alignItems="center"
+      height="auto"
+    >
+      auto
+    </Box>
+    <Box
+      flex="auto"
+      background="tertiary"
+      justifyContent="center"
+      alignItems="center"
+      height="fit"
+    >
+      fit
+    </Box>
+    <Box
+      flex="auto"
+      background="tertiary"
+      justifyContent="center"
+      alignItems="center"
+      height="min"
+    >
+      min
+    </Box>
+    <Box
+      flex="auto"
+      background="tertiary"
+      justifyContent="center"
+      alignItems="center"
+      height="max"
+    >
+      max
+    </Box>
   </Box>
 );
 

package/src/docs/Brands.mdx

@@ -10,6 +10,9 @@ import LinkLogoRgbPositive from '@hyphen/hyphen-design-tokens/build/assets/image
 import LinkLogoRgbNegative from '@hyphen/hyphen-design-tokens/build/assets/images/react/LinkLogoRgbNegative';
 import ToggleLogoHorizontalRgbPositive from '@hyphen/hyphen-design-tokens/build/assets/images/react/ToggleLogoHorizontalRgbPositive';
 import ToggleLogoHorizontalRgbNegative from '@hyphen/hyphen-design-tokens/build/assets/images/react/ToggleLogoHorizontalRgbNegative';
+import DeployLogoHorizontalPositive from '@hyphen/hyphen-design-tokens/build/assets/images/react/DeployLogoHorizontalPositive';
+import DeployLogoHorizontalNegative from '@hyphen/hyphen-design-tokens/build/assets/images/react/DeployLogoHorizontalNegative';
+
 
 import { Box } from '../components/Box/Box';
 
@@ -150,4 +153,31 @@ import { Box } from '../components/Box/Box';
   </Box>
 </Box>
 
-{/* <img src={ToggleLogo} /> */}
+
+
+## Deploy
+
+<Box direction="row">
+  <Box
+    background="secondary"
+    padding="4xl"
+    width="50"
+    height="7xl"
+    alignItems="center"
+    justifyContent="center"
+    gap="xl"
+  >
+    <DeployLogoHorizontalPositive width="160px" />
+  </Box>
+  <Box
+    background="dark-purple"
+    padding="4xl"
+    width="50"
+    height="7xl"
+    alignItems="center"
+    justifyContent="center"
+    gap="xl"
+  >
+    <DeployLogoHorizontalNegative width="160px" />
+  </Box>
+</Box>

package/src/docs/DesignTokens.mdx

@@ -154,7 +154,7 @@ Dimension tokens are intended for use with `width` and `height` properties. They
           <td>
             {name === 'base'
               ? '16'
-              : ['inherit', 'auto'].includes(name)
+              : ['inherit', 'auto', 'fit', 'min', 'max'].includes(name)
               ? ''
               : entry.original.value * 16}
           </td>