@hyphen/hyphen-components 4.11.0 → 4.13.0

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 (8) hide show
  1. package/dist/components/Sidebar/Sidebar.d.ts +1 -1
  2. package/dist/css/utilities.css +193 -1
  3. package/dist/css/variables.css +6 -2
  4. package/dist/lib/tokens.d.ts +3 -3
  5. package/package.json +2 -2
  6. package/src/components/Box/Box.stories.tsx +49 -0
  7. package/src/docs/Brands.mdx +31 -1
  8. package/src/docs/DesignTokens.mdx +1 -1
package/dist/components/Sidebar/Sidebar.d.ts CHANGED
@@ -28,7 +28,7 @@ declare const SidebarMenuItem: React.ForwardRefExoticComponent<Omit<React.Detail
28
28
  declare const SidebarMenuButton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
29
29
  asChild?: boolean | undefined;
30
30
  isActive?: boolean | undefined;
31
- icon?: "code" | "link" | "menu" | "search" | "circle" | "filter" | "key" | "add" | "alarm-disable" | "alarm" | "analytics" | "app-window" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrows-maximize" | "at" | "ban" | "block" | "blocks" | "book-open" | "c-add" | "c-check" | "c-delete" | "c-in-progress" | "c-info" | "c-question" | "c-remove" | "c-warning" | "calendar-create" | "calendar" | "camera" | "caret-down" | "caret-left" | "caret-right" | "caret-sm-down" | "caret-sm-left" | "caret-sm-right" | "caret-sm-up" | "caret-up-down" | "caret-up" | "chart-bar" | "chart-line" | "chat" | "check" | "checkbox-btn-checked" | "checkbox-btn-indeterminate" | "checkbox-btn" | "circle-filled" | "clipboard" | "cloud" | "command-line" | "contact" | "copy-document" | "dashboard" | "database" | "dock-left" | "document" | "dots" | "download" | "electricity-bolt" | "exclamation-mark" | "eye-slash" | "eye" | "flag" | "folder" | "gear" | "grab" | "hash-mark" | "heart-o" | "heart" | "home" | "info" | "integrations" | "launch-app" | "lightbulb" | "list" | "lock" | "logo-env" | "logo-link" | "logo-netinfo" | "logo-toggle" | "logout" | "mail" | "minus" | "moon" | "paperclip" | "path-intersect" | "pause" | "pc" | "pencil" | "phone" | "photo" | "play" | "qr-code" | "radio-btn-checked" | "radio-btn-unchecked" | "refresh" | "remove" | "rewind" | "send" | "settings" | "skip" | "stack" | "star-o" | "star" | "stopwatch" | "subtract" | "sun" | "t-warning" | "tag" | "terminal" | "time-alarm" | "time-clock" | "trash" | "unlocked" | "upload" | "user-create" | "user" | "users" | "wifi-off" | "wifi" | "zoom-in" | "zoom-out" | undefined;
31
+ icon?: "code" | "link" | "menu" | "search" | "circle" | "filter" | "key" | "add" | "alarm-disable" | "alarm" | "analytics" | "app-window" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrows-maximize" | "at" | "ban" | "block" | "blocks" | "book-open" | "c-add" | "c-check" | "c-delete" | "c-in-progress" | "c-info" | "c-question" | "c-remove" | "c-warning" | "calendar-create" | "calendar" | "camera" | "caret-down" | "caret-left" | "caret-right" | "caret-sm-down" | "caret-sm-left" | "caret-sm-right" | "caret-sm-up" | "caret-up-down" | "caret-up" | "chart-bar" | "chart-line" | "chat" | "check" | "checkbox-btn-checked" | "checkbox-btn-indeterminate" | "checkbox-btn" | "circle-filled" | "clipboard" | "cloud" | "command-line" | "contact" | "copy-document" | "dashboard" | "database" | "dock-left" | "document" | "dots" | "download" | "electricity-bolt" | "exclamation-mark" | "eye-slash" | "eye" | "flag" | "folder" | "gear" | "grab" | "hash-mark" | "heart-o" | "heart" | "home" | "info" | "integrations" | "launch-app" | "lightbulb" | "list" | "lock" | "logo-deploy" | "logo-env" | "logo-link" | "logo-netinfo" | "logo-toggle" | "logout" | "mail" | "minus" | "moon" | "paperclip" | "path-intersect" | "pause" | "pc" | "pencil" | "phone" | "photo" | "play" | "qr-code" | "radio-btn-checked" | "radio-btn-unchecked" | "refresh" | "remove" | "rewind" | "send" | "settings" | "skip" | "stack" | "star-o" | "star" | "stopwatch" | "subtract" | "sun" | "t-warning" | "tag" | "terminal" | "time-alarm" | "time-clock" | "trash" | "unlocked" | "upload" | "user-create" | "user" | "users" | "wifi-off" | "wifi" | "zoom-in" | "zoom-out" | undefined;
32
32
  }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
33
33
  declare const SidebarGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
34
34
  declare const SidebarGroupLabel: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
package/dist/css/utilities.css CHANGED
@@ -3,7 +3,7 @@
3
3
  \***************************************************************************************************************************/
4
4
  /**
5
5
  * Do not edit directly
6
- * Generated on Thu, 13 Mar 2025 17:21:53 GMT
6
+ * Generated on Sat, 22 Mar 2025 17:35:23 GMT
7
7
  */
8
8
 
9
9
  .font-family-monospace { font-family: var(--assets-font-family-monospace); }
@@ -1304,6 +1304,54 @@
1304
1304
 
1305
1305
  .minh-10xl { min-height: var(--size-dimension-10xl); }
1306
1306
 
1307
+ .w-fit { width: var(--size-dimension-fit); }
1308
+
1309
+ .h-fit { height: var(--size-dimension-fit); }
1310
+
1311
+ .mw-fit { max-width: var(--size-dimension-fit); }
1312
+
1313
+ .mh-fit { max-height: var(--size-dimension-fit); }
1314
+
1315
+ .minw-fit { min-width: var(--size-dimension-fit); }
1316
+
1317
+ .minh-fit { min-height: var(--size-dimension-fit); }
1318
+
1319
+ .w-min { width: var(--size-dimension-min); }
1320
+
1321
+ .h-min { height: var(--size-dimension-min); }
1322
+
1323
+ .mw-min { max-width: var(--size-dimension-min); }
1324
+
1325
+ .mh-min { max-height: var(--size-dimension-min); }
1326
+
1327
+ .minw-min { min-width: var(--size-dimension-min); }
1328
+
1329
+ .minh-min { min-height: var(--size-dimension-min); }
1330
+
1331
+ .w-max { width: var(--size-dimension-max); }
1332
+
1333
+ .h-max { height: var(--size-dimension-max); }
1334
+
1335
+ .mw-max { max-width: var(--size-dimension-max); }
1336
+
1337
+ .mh-max { max-height: var(--size-dimension-max); }
1338
+
1339
+ .minw-max { min-width: var(--size-dimension-max); }
1340
+
1341
+ .minh-max { min-height: var(--size-dimension-max); }
1342
+
1343
+ .w-auto { width: var(--size-dimension-auto); }
1344
+
1345
+ .h-auto { height: var(--size-dimension-auto); }
1346
+
1347
+ .mw-auto { max-width: var(--size-dimension-auto); }
1348
+
1349
+ .mh-auto { max-height: var(--size-dimension-auto); }
1350
+
1351
+ .minw-auto { min-width: var(--size-dimension-auto); }
1352
+
1353
+ .minh-auto { min-height: var(--size-dimension-auto); }
1354
+
1307
1355
  .w-0 { width: var(--size-percentage-0); }
1308
1356
 
1309
1357
  .h-0 { height: var(--size-percentage-0); }
@@ -2419,6 +2467,54 @@
2419
2467
 
2420
2468
  .minh-10xl-tablet { min-height: var(--size-dimension-10xl); }
2421
2469
 
2470
+ .w-fit-tablet { width: var(--size-dimension-fit); }
2471
+
2472
+ .h-fit-tablet { height: var(--size-dimension-fit); }
2473
+
2474
+ .mw-fit-tablet { max-width: var(--size-dimension-fit); }
2475
+
2476
+ .mh-fit-tablet { max-height: var(--size-dimension-fit); }
2477
+
2478
+ .minw-fit-tablet { min-width: var(--size-dimension-fit); }
2479
+
2480
+ .minh-fit-tablet { min-height: var(--size-dimension-fit); }
2481
+
2482
+ .w-min-tablet { width: var(--size-dimension-min); }
2483
+
2484
+ .h-min-tablet { height: var(--size-dimension-min); }
2485
+
2486
+ .mw-min-tablet { max-width: var(--size-dimension-min); }
2487
+
2488
+ .mh-min-tablet { max-height: var(--size-dimension-min); }
2489
+
2490
+ .minw-min-tablet { min-width: var(--size-dimension-min); }
2491
+
2492
+ .minh-min-tablet { min-height: var(--size-dimension-min); }
2493
+
2494
+ .w-max-tablet { width: var(--size-dimension-max); }
2495
+
2496
+ .h-max-tablet { height: var(--size-dimension-max); }
2497
+
2498
+ .mw-max-tablet { max-width: var(--size-dimension-max); }
2499
+
2500
+ .mh-max-tablet { max-height: var(--size-dimension-max); }
2501
+
2502
+ .minw-max-tablet { min-width: var(--size-dimension-max); }
2503
+
2504
+ .minh-max-tablet { min-height: var(--size-dimension-max); }
2505
+
2506
+ .w-auto-tablet { width: var(--size-dimension-auto); }
2507
+
2508
+ .h-auto-tablet { height: var(--size-dimension-auto); }
2509
+
2510
+ .mw-auto-tablet { max-width: var(--size-dimension-auto); }
2511
+
2512
+ .mh-auto-tablet { max-height: var(--size-dimension-auto); }
2513
+
2514
+ .minw-auto-tablet { min-width: var(--size-dimension-auto); }
2515
+
2516
+ .minh-auto-tablet { min-height: var(--size-dimension-auto); }
2517
+
2422
2518
  .w-0-tablet { width: var(--size-percentage-0); }
2423
2519
 
2424
2520
  .h-0-tablet { height: var(--size-percentage-0); }
@@ -3658,6 +3754,54 @@
3658
3754
 
3659
3755
  .minh-10xl-desktop { min-height: var(--size-dimension-10xl); }
3660
3756
 
3757
+ .w-fit-desktop { width: var(--size-dimension-fit); }
3758
+
3759
+ .h-fit-desktop { height: var(--size-dimension-fit); }
3760
+
3761
+ .mw-fit-desktop { max-width: var(--size-dimension-fit); }
3762
+
3763
+ .mh-fit-desktop { max-height: var(--size-dimension-fit); }
3764
+
3765
+ .minw-fit-desktop { min-width: var(--size-dimension-fit); }
3766
+
3767
+ .minh-fit-desktop { min-height: var(--size-dimension-fit); }
3768
+
3769
+ .w-min-desktop { width: var(--size-dimension-min); }
3770
+
3771
+ .h-min-desktop { height: var(--size-dimension-min); }
3772
+
3773
+ .mw-min-desktop { max-width: var(--size-dimension-min); }
3774
+
3775
+ .mh-min-desktop { max-height: var(--size-dimension-min); }
3776
+
3777
+ .minw-min-desktop { min-width: var(--size-dimension-min); }
3778
+
3779
+ .minh-min-desktop { min-height: var(--size-dimension-min); }
3780
+
3781
+ .w-max-desktop { width: var(--size-dimension-max); }
3782
+
3783
+ .h-max-desktop { height: var(--size-dimension-max); }
3784
+
3785
+ .mw-max-desktop { max-width: var(--size-dimension-max); }
3786
+
3787
+ .mh-max-desktop { max-height: var(--size-dimension-max); }
3788
+
3789
+ .minw-max-desktop { min-width: var(--size-dimension-max); }
3790
+
3791
+ .minh-max-desktop { min-height: var(--size-dimension-max); }
3792
+
3793
+ .w-auto-desktop { width: var(--size-dimension-auto); }
3794
+
3795
+ .h-auto-desktop { height: var(--size-dimension-auto); }
3796
+
3797
+ .mw-auto-desktop { max-width: var(--size-dimension-auto); }
3798
+
3799
+ .mh-auto-desktop { max-height: var(--size-dimension-auto); }
3800
+
3801
+ .minw-auto-desktop { min-width: var(--size-dimension-auto); }
3802
+
3803
+ .minh-auto-desktop { min-height: var(--size-dimension-auto); }
3804
+
3661
3805
  .w-0-desktop { width: var(--size-percentage-0); }
3662
3806
 
3663
3807
  .h-0-desktop { height: var(--size-percentage-0); }
@@ -4897,6 +5041,54 @@
4897
5041
 
4898
5042
  .minh-10xl-hd { min-height: var(--size-dimension-10xl); }
4899
5043
 
5044
+ .w-fit-hd { width: var(--size-dimension-fit); }
5045
+
5046
+ .h-fit-hd { height: var(--size-dimension-fit); }
5047
+
5048
+ .mw-fit-hd { max-width: var(--size-dimension-fit); }
5049
+
5050
+ .mh-fit-hd { max-height: var(--size-dimension-fit); }
5051
+
5052
+ .minw-fit-hd { min-width: var(--size-dimension-fit); }
5053
+
5054
+ .minh-fit-hd { min-height: var(--size-dimension-fit); }
5055
+
5056
+ .w-min-hd { width: var(--size-dimension-min); }
5057
+
5058
+ .h-min-hd { height: var(--size-dimension-min); }
5059
+
5060
+ .mw-min-hd { max-width: var(--size-dimension-min); }
5061
+
5062
+ .mh-min-hd { max-height: var(--size-dimension-min); }
5063
+
5064
+ .minw-min-hd { min-width: var(--size-dimension-min); }
5065
+
5066
+ .minh-min-hd { min-height: var(--size-dimension-min); }
5067
+
5068
+ .w-max-hd { width: var(--size-dimension-max); }
5069
+
5070
+ .h-max-hd { height: var(--size-dimension-max); }
5071
+
5072
+ .mw-max-hd { max-width: var(--size-dimension-max); }
5073
+
5074
+ .mh-max-hd { max-height: var(--size-dimension-max); }
5075
+
5076
+ .minw-max-hd { min-width: var(--size-dimension-max); }
5077
+
5078
+ .minh-max-hd { min-height: var(--size-dimension-max); }
5079
+
5080
+ .w-auto-hd { width: var(--size-dimension-auto); }
5081
+
5082
+ .h-auto-hd { height: var(--size-dimension-auto); }
5083
+
5084
+ .mw-auto-hd { max-width: var(--size-dimension-auto); }
5085
+
5086
+ .mh-auto-hd { max-height: var(--size-dimension-auto); }
5087
+
5088
+ .minw-auto-hd { min-width: var(--size-dimension-auto); }
5089
+
5090
+ .minh-auto-hd { min-height: var(--size-dimension-auto); }
5091
+
4900
5092
  .w-0-hd { width: var(--size-percentage-0); }
4901
5093
 
4902
5094
  .h-0-hd { height: var(--size-percentage-0); }
package/dist/css/variables.css CHANGED
@@ -3,7 +3,7 @@
3
3
  \*********************************************************************************************************************/
4
4
  /**
5
5
  * Do not edit directly
6
- * Generated on Thu, 13 Mar 2025 17:21:53 GMT
6
+ * Generated on Sat, 22 Mar 2025 17:35:23 GMT
7
7
  */
8
8
 
9
9
  :root {
@@ -262,6 +262,10 @@
262
262
  --size-dimension-8xl: 16rem;
263
263
  --size-dimension-9xl: 32rem;
264
264
  --size-dimension-10xl: 64rem;
265
+ --size-dimension-fit: fit-content;
266
+ --size-dimension-min: min-content;
267
+ --size-dimension-max: max-content;
268
+ --size-dimension-auto: auto;
265
269
  --size-percentage-0: 0%;
266
270
  --size-percentage-10: 10%;
267
271
  --size-percentage-15: 15%;
@@ -345,7 +349,7 @@
345
349
  \*******************************************************************************************************************************/
346
350
  /**
347
351
  * Do not edit directly
348
- * Generated on Thu, 13 Mar 2025 17:21:53 GMT
352
+ * Generated on Sat, 22 Mar 2025 17:35:23 GMT
349
353
  */
350
354
 
351
355
  :root.dark {
package/dist/lib/tokens.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { BorderRadiusSize, Breakpoint, BreakpointSizeWithBase } from '../types';
2
- export declare const ICON_NAMES: ("add" | "alarm-disable" | "alarm" | "analytics" | "app-window" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrows-maximize" | "at" | "ban" | "block" | "blocks" | "book-open" | "c-add" | "c-check" | "c-delete" | "c-in-progress" | "c-info" | "c-question" | "c-remove" | "c-warning" | "calendar-create" | "calendar" | "camera" | "caret-down" | "caret-left" | "caret-right" | "caret-sm-down" | "caret-sm-left" | "caret-sm-right" | "caret-sm-up" | "caret-up-down" | "caret-up" | "chart-bar" | "chart-line" | "chat" | "check" | "checkbox-btn-checked" | "checkbox-btn-indeterminate" | "checkbox-btn" | "circle-filled" | "circle" | "clipboard" | "cloud" | "code" | "command-line" | "contact" | "copy-document" | "dashboard" | "database" | "dock-left" | "document" | "dots" | "download" | "electricity-bolt" | "exclamation-mark" | "eye-slash" | "eye" | "filter" | "flag" | "folder" | "gear" | "grab" | "hash-mark" | "heart-o" | "heart" | "home" | "info" | "integrations" | "key" | "launch-app" | "lightbulb" | "link" | "list" | "lock" | "logo-env" | "logo-link" | "logo-netinfo" | "logo-toggle" | "logout" | "mail" | "menu" | "minus" | "moon" | "paperclip" | "path-intersect" | "pause" | "pc" | "pencil" | "phone" | "photo" | "play" | "qr-code" | "radio-btn-checked" | "radio-btn-unchecked" | "refresh" | "remove" | "rewind" | "search" | "send" | "settings" | "skip" | "stack" | "star-o" | "star" | "stopwatch" | "subtract" | "sun" | "t-warning" | "tag" | "terminal" | "time-alarm" | "time-clock" | "trash" | "unlocked" | "upload" | "user-create" | "user" | "users" | "wifi-off" | "wifi" | "zoom-in" | "zoom-out")[];
2
+ export declare const ICON_NAMES: ("add" | "alarm-disable" | "alarm" | "analytics" | "app-window" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrows-maximize" | "at" | "ban" | "block" | "blocks" | "book-open" | "c-add" | "c-check" | "c-delete" | "c-in-progress" | "c-info" | "c-question" | "c-remove" | "c-warning" | "calendar-create" | "calendar" | "camera" | "caret-down" | "caret-left" | "caret-right" | "caret-sm-down" | "caret-sm-left" | "caret-sm-right" | "caret-sm-up" | "caret-up-down" | "caret-up" | "chart-bar" | "chart-line" | "chat" | "check" | "checkbox-btn-checked" | "checkbox-btn-indeterminate" | "checkbox-btn" | "circle-filled" | "circle" | "clipboard" | "cloud" | "code" | "command-line" | "contact" | "copy-document" | "dashboard" | "database" | "dock-left" | "document" | "dots" | "download" | "electricity-bolt" | "exclamation-mark" | "eye-slash" | "eye" | "filter" | "flag" | "folder" | "gear" | "grab" | "hash-mark" | "heart-o" | "heart" | "home" | "info" | "integrations" | "key" | "launch-app" | "lightbulb" | "link" | "list" | "lock" | "logo-deploy" | "logo-env" | "logo-link" | "logo-netinfo" | "logo-toggle" | "logout" | "mail" | "menu" | "minus" | "moon" | "paperclip" | "path-intersect" | "pause" | "pc" | "pencil" | "phone" | "photo" | "play" | "qr-code" | "radio-btn-checked" | "radio-btn-unchecked" | "refresh" | "remove" | "rewind" | "search" | "send" | "settings" | "skip" | "stack" | "star-o" | "star" | "stopwatch" | "subtract" | "sun" | "t-warning" | "tag" | "terminal" | "time-alarm" | "time-clock" | "trash" | "unlocked" | "upload" | "user-create" | "user" | "users" | "wifi-off" | "wifi" | "zoom-in" | "zoom-out")[];
3
3
  export declare const BORDER_RADIUS_OPTIONS: BorderRadiusSize[];
4
4
  export declare const BORDER_SIZE_OPTIONS: ("0" | "sm" | "md" | "lg")[];
5
5
  export declare const BREAKPOINT_OPTIONS: BreakpointSizeWithBase[];
@@ -13,10 +13,10 @@ export declare const FONT_SIZE_OPTIONS: ("xs" | "sm" | "md" | "lg" | "xl" | "2xl
13
13
  export declare const FONT_FAMILY_OPTIONS: ("monospace" | "body" | "brand")[];
14
14
  export declare const FONT_WEIGHT_OPTIONS: ("form-label" | "form-help-text" | "light" | "normal" | "medium" | "semibold" | "bold")[];
15
15
  export declare const HEADING_SIZE_OPTIONS: ("sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl")[];
16
- 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")[];
16
+ 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")[];
17
17
  export declare const LINE_HEIGHT_OPTIONS: ("base" | "none" | "input" | "heading" | "text")[];
18
18
  export declare const SPACING_OPTIONS: ("0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "2xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | "auto")[];
19
- 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")[];
19
+ 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")[];
20
20
  export declare const Z_INDEX_OPTIONS: ("0" | "modal" | "popover" | "overlay" | "drawer" | "sticky")[];
21
21
  export declare const Z_INDEX_VALUES: any;
22
22
  export declare const BOX_SHADOW_OPTIONS: ("0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "2xs")[];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hyphen/hyphen-components",
3
- "version": "4.11.0",
3
+ "version": "4.13.0",
4
4
  "license": "MIT",
5
5
  "author": {
6
6
  "name": "@hyphen"
@@ -62,7 +62,7 @@
62
62
  ],
63
63
  "dependencies": {
64
64
  "@emotion/react": "^11.14.0",
65
- "@hyphen/hyphen-design-tokens": "^4.30.0",
65
+ "@hyphen/hyphen-design-tokens": "^4.32.0",
66
66
  "@popperjs/core": "^2.11.8",
67
67
  "@radix-ui/react-collapsible": "^1.1.3",
68
68
  "@radix-ui/react-dropdown-menu": "^2.1.6",
package/src/components/Box/Box.stories.tsx CHANGED
@@ -1025,6 +1025,18 @@ export const WidthTokens = () => (
1025
1025
  <Box background="tertiary" width="10xl">
1026
1026
  10xl
1027
1027
  </Box>
1028
+ <Box background="tertiary" width="auto">
1029
+ auto
1030
+ </Box>
1031
+ <Box background="tertiary" width="min">
1032
+ min
1033
+ </Box>
1034
+ <Box background="tertiary" width="max">
1035
+ max
1036
+ </Box>
1037
+ <Box background="tertiary" width="fit">
1038
+ fit
1039
+ </Box>
1028
1040
  </Box>
1029
1041
  );
1030
1042
 
@@ -1251,6 +1263,43 @@ export const HeightTokens = () => (
1251
1263
  >
1252
1264
  10xl
1253
1265
  </Box>
1266
+
1267
+ <Box
1268
+ flex="auto"
1269
+ background="tertiary"
1270
+ justifyContent="center"
1271
+ alignItems="center"
1272
+ height="auto"
1273
+ >
1274
+ auto
1275
+ </Box>
1276
+ <Box
1277
+ flex="auto"
1278
+ background="tertiary"
1279
+ justifyContent="center"
1280
+ alignItems="center"
1281
+ height="fit"
1282
+ >
1283
+ fit
1284
+ </Box>
1285
+ <Box
1286
+ flex="auto"
1287
+ background="tertiary"
1288
+ justifyContent="center"
1289
+ alignItems="center"
1290
+ height="min"
1291
+ >
1292
+ min
1293
+ </Box>
1294
+ <Box
1295
+ flex="auto"
1296
+ background="tertiary"
1297
+ justifyContent="center"
1298
+ alignItems="center"
1299
+ height="max"
1300
+ >
1301
+ max
1302
+ </Box>
1254
1303
  </Box>
1255
1304
  );
1256
1305
 
package/src/docs/Brands.mdx CHANGED
@@ -10,6 +10,9 @@ import LinkLogoRgbPositive from '@hyphen/hyphen-design-tokens/build/assets/image
10
10
  import LinkLogoRgbNegative from '@hyphen/hyphen-design-tokens/build/assets/images/react/LinkLogoRgbNegative';
11
11
  import ToggleLogoHorizontalRgbPositive from '@hyphen/hyphen-design-tokens/build/assets/images/react/ToggleLogoHorizontalRgbPositive';
12
12
  import ToggleLogoHorizontalRgbNegative from '@hyphen/hyphen-design-tokens/build/assets/images/react/ToggleLogoHorizontalRgbNegative';
13
+ import DeployLogoHorizontalPositive from '@hyphen/hyphen-design-tokens/build/assets/images/react/DeployLogoHorizontalPositive';
14
+ import DeployLogoHorizontalNegative from '@hyphen/hyphen-design-tokens/build/assets/images/react/DeployLogoHorizontalNegative';
15
+
13
16
 
14
17
  import { Box } from '../components/Box/Box';
15
18
 
@@ -150,4 +153,31 @@ import { Box } from '../components/Box/Box';
150
153
  </Box>
151
154
  </Box>
152
155
 
153
- {/* <img src={ToggleLogo} /> */}
156
+
157
+
158
+ ## Deploy
159
+
160
+ <Box direction="row">
161
+ <Box
162
+ background="secondary"
163
+ padding="4xl"
164
+ width="50"
165
+ height="7xl"
166
+ alignItems="center"
167
+ justifyContent="center"
168
+ gap="xl"
169
+ >
170
+ <DeployLogoHorizontalPositive width="160px" />
171
+ </Box>
172
+ <Box
173
+ background="dark-purple"
174
+ padding="4xl"
175
+ width="50"
176
+ height="7xl"
177
+ alignItems="center"
178
+ justifyContent="center"
179
+ gap="xl"
180
+ >
181
+ <DeployLogoHorizontalNegative width="160px" />
182
+ </Box>
183
+ </Box>
package/src/docs/DesignTokens.mdx CHANGED
@@ -154,7 +154,7 @@ Dimension tokens are intended for use with `width` and `height` properties. They
154
154
  <td>
155
155
  {name === 'base'
156
156
  ? '16'
157
- : ['inherit', 'auto'].includes(name)
157
+ : ['inherit', 'auto', 'fit', 'min', 'max'].includes(name)
158
158
  ? ''
159
159
  : entry.original.value * 16}
160
160
  </td>