@hyphen/hyphen-components 7.0.0-beta.6 → 7.0.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 (17) hide show
  1. package/dist/components/Drawer/Drawer.d.ts +2 -2
  2. package/dist/components/DropdownMenu/DropdownMenu.d.ts +3 -3
  3. package/dist/components/Sidebar/Sidebar.d.ts +15 -13
  4. package/dist/components/Toggle/Toggle.d.ts +1 -1
  5. package/dist/components/ToggleGroup/ToggleGroup.d.ts +1 -1
  6. package/dist/css/utilities.css +7 -15
  7. package/dist/css/variables.css +6 -6
  8. package/dist/hooks/useTheme/useTheme.d.ts +1 -1
  9. package/dist/lib/isFunction.d.ts +2 -1
  10. package/dist/lib/reactRouterClickHandler.d.ts +1 -1
  11. package/dist/lib/resolveValue.d.ts +2 -1
  12. package/dist/lib/tokens.d.ts +18 -18
  13. package/package.json +11 -11
  14. package/src/components/Box/Box.stories.tsx +1 -1
  15. package/src/components/Heading/Heading.stories.tsx +2 -2
  16. package/src/components/Icon/Icon.stories.tsx +1 -1
  17. package/src/styles/utilities.scss +0 -8
package/dist/components/Drawer/Drawer.d.ts CHANGED
@@ -14,7 +14,7 @@ interface DrawerProviderProps extends React.ComponentProps<'div'> {
14
14
  }
15
15
  export declare const DrawerProvider: React.ForwardRefExoticComponent<Omit<DrawerProviderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
16
16
  declare const DrawerTrigger: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
17
- asChild?: boolean | undefined;
17
+ asChild?: boolean;
18
18
  }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
19
19
  export type DrawerPlacementType = 'left' | 'right' | 'top' | 'bottom';
20
20
  export interface DrawerProps {
@@ -99,7 +99,7 @@ declare const Drawer: React.FC<DrawerProps>;
99
99
  declare const DrawerHeader: React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
100
100
  declare const DrawerTitle: React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
101
101
  declare const DrawerCloseButton: React.ForwardRefExoticComponent<import("../Button/Button").BaseButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & {
102
- onClose?: (() => void) | undefined;
102
+ onClose?: () => void;
103
103
  } & React.RefAttributes<HTMLButtonElement>>;
104
104
  declare const DrawerContent: React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
105
105
  export { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger, DrawerCloseButton, };
package/dist/components/DropdownMenu/DropdownMenu.d.ts CHANGED
@@ -7,11 +7,11 @@ declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPor
7
7
  declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
8
8
  declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
9
9
  declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
10
- inset?: boolean | undefined;
10
+ inset?: boolean;
11
11
  } & React.RefAttributes<HTMLDivElement>>;
12
12
  declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
13
13
  declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
14
- inset?: boolean | undefined;
14
+ inset?: boolean;
15
15
  } & React.RefAttributes<HTMLDivElement>>;
16
16
  declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
17
17
  declare const DropdownMenuShortcut: {
@@ -19,7 +19,7 @@ declare const DropdownMenuShortcut: {
19
19
  displayName: string;
20
20
  };
21
21
  declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
22
- inset?: boolean | undefined;
22
+ inset?: boolean;
23
23
  } & React.RefAttributes<HTMLDivElement>>;
24
24
  declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
25
25
  export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuRadioGroup, };
package/dist/components/Sidebar/Sidebar.d.ts CHANGED
@@ -1,4 +1,6 @@
1
1
  import React from 'react';
2
+ import { IconName } from 'src/types';
3
+ import { TooltipContent } from '../Tooltip/Tooltip';
2
4
  interface SidebarContextProps {
3
5
  state: 'expanded' | 'collapsed';
4
6
  open: boolean;
@@ -10,14 +12,14 @@ interface SidebarContextProps {
10
12
  }
11
13
  declare function useSidebar(): SidebarContextProps;
12
14
  declare const SidebarProvider: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
13
- defaultOpen?: boolean | undefined;
14
- open?: boolean | undefined;
15
- storageKey?: string | undefined;
16
- onOpenChange?: ((open: boolean) => void) | undefined;
15
+ defaultOpen?: boolean;
16
+ open?: boolean;
17
+ storageKey?: string;
18
+ onOpenChange?: (open: boolean) => void;
17
19
  }, "ref"> & React.RefAttributes<HTMLDivElement>>;
18
20
  declare const Sidebar: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
19
- side?: "left" | undefined;
20
- collapsible?: "offcanvas" | "icon" | "none" | undefined;
21
+ side?: "left";
22
+ collapsible?: "offcanvas" | "icon" | "none";
21
23
  }, "ref"> & React.RefAttributes<HTMLDivElement>>;
22
24
  declare const SidebarTrigger: React.ForwardRefExoticComponent<Omit<import("../Button/Button").BaseButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
23
25
  declare const SidebarInset: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -27,21 +29,21 @@ declare const SidebarContent: React.ForwardRefExoticComponent<Omit<React.Detaile
27
29
  declare const SidebarMenu: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
28
30
  declare const SidebarMenuItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
29
31
  declare const SidebarMenuButton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
30
- asChild?: boolean | undefined;
31
- isActive?: boolean | undefined;
32
- icon?: "code" | "link" | "menu" | "search" | "circle" | "filter" | "key" | "add" | "alarm-disable" | "alarm" | "analytics" | "app-window" | "archive" | "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-user" | "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" | "computer" | "contact" | "copy-document" | "cpu" | "dashboard" | "database" | "dock-left" | "document" | "dots" | "download" | "electricity-bolt" | "exclamation-mark" | "eye-slash" | "eye" | "flag" | "folder" | "gear" | "git-branch" | "git-commit" | "git-merge" | "git-pull-request-closed" | "git-pull-request-create" | "git-pull-request-draft" | "git-pull-request" | "grab" | "hash-mark" | "heart-o" | "heart" | "home" | "inbox" | "infinity" | "info" | "integrations" | "launch-app" | "lightbulb" | "list" | "lock" | "logo-code" | "logo-deploy" | "logo-env" | "logo-github" | "logo-link" | "logo-netinfo" | "logo-toggle" | "logout" | "mail" | "memory" | "microphone" | "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" | "ssd" | "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;
33
- tooltip?: string | (Omit<import("@radix-ui/react-tooltip").TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>) | undefined;
32
+ asChild?: boolean;
33
+ isActive?: boolean;
34
+ icon?: IconName;
35
+ tooltip?: string | React.ComponentProps<typeof TooltipContent>;
34
36
  }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
35
37
  declare const SidebarGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
36
38
  declare const SidebarGroupLabel: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
37
39
  declare const SidebarMenuSub: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
38
40
  declare const SidebarMenuSubItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
39
41
  declare const SidebarMenuSubButton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
40
- asChild?: boolean | undefined;
41
- isActive?: boolean | undefined;
42
+ asChild?: boolean;
43
+ isActive?: boolean;
42
44
  }, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
43
45
  declare const SidebarMenuAction: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
44
- asChild?: boolean | undefined;
46
+ asChild?: boolean;
45
47
  }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
46
48
  declare const SidebarRail: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
47
49
  declare const SidebarMenuBadge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
package/dist/components/Toggle/Toggle.d.ts CHANGED
@@ -2,6 +2,6 @@ import React from 'react';
2
2
  import * as TogglePrimitive from '@radix-ui/react-toggle';
3
3
  type ToggleVariant = 'default' | 'outline';
4
4
  declare const Toggle: React.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
5
- variant?: ToggleVariant | undefined;
5
+ variant?: ToggleVariant;
6
6
  } & React.RefAttributes<HTMLButtonElement>>;
7
7
  export { Toggle };
package/dist/components/ToggleGroup/ToggleGroup.d.ts CHANGED
@@ -14,6 +14,6 @@ type ToggleGroupProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimiti
14
14
  };
15
15
  declare const ToggleGroup: React.ForwardRefExoticComponent<ToggleGroupProps & React.RefAttributes<HTMLDivElement>>;
16
16
  declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
17
- variant?: ToggleVariant | undefined;
17
+ variant?: ToggleVariant;
18
18
  } & React.RefAttributes<HTMLButtonElement>>;
19
19
  export { ToggleGroup, ToggleGroupItem };
package/dist/css/utilities.css CHANGED
@@ -3,7 +3,7 @@
3
3
  \***************************************************************************************************************************/
4
4
  /**
5
5
  * Do not edit directly
6
- * Generated on Mon, 01 Dec 2025 21:14:51 GMT
6
+ * Generated on Tue, 23 Dec 2025 18:50:27 GMT
7
7
  */
8
8
 
9
9
  .font-family-monospace { font-family: var(--assets-font-family-monospace); }
@@ -654,17 +654,17 @@
654
654
 
655
655
  .focus\:font-color-info:focus { color: var(--color-font-info); }
656
656
 
657
- .font-color-warn { color: var(--color-font-warn); }
657
+ .font-color-warning { color: var(--color-font-warning); }
658
658
 
659
- .hover\:font-color-warn:hover { color: var(--color-font-warn); }
659
+ .hover\:font-color-warning:hover { color: var(--color-font-warning); }
660
660
 
661
- .focus\:font-color-warn:focus { color: var(--color-font-warn); }
661
+ .focus\:font-color-warning:focus { color: var(--color-font-warning); }
662
662
 
663
- .font-color-warn-disabled { color: var(--color-font-warn-disabled); }
663
+ .font-color-warning-disabled { color: var(--color-font-warning-disabled); }
664
664
 
665
- .hover\:font-color-warn-disabled:hover { color: var(--color-font-warn-disabled); }
665
+ .hover\:font-color-warning-disabled:hover { color: var(--color-font-warning-disabled); }
666
666
 
667
- .focus\:font-color-warn-disabled:focus { color: var(--color-font-warn-disabled); }
667
+ .focus\:font-color-warning-disabled:focus { color: var(--color-font-warning-disabled); }
668
668
 
669
669
  .font-color-danger { color: var(--color-font-danger); }
670
670
 
@@ -7702,11 +7702,3 @@
7702
7702
  .hover-show-child:hover .hover-child {
7703
7703
  opacity: 1;
7704
7704
  }
7705
-
7706
- .top-0 {
7707
- top: 0;
7708
- }
7709
-
7710
- .inset-x-0 {
7711
- inset-inline: 0;
7712
- }
package/dist/css/variables.css CHANGED
@@ -3,7 +3,7 @@
3
3
  \*********************************************************************************************************************/
4
4
  /**
5
5
  * Do not edit directly
6
- * Generated on Mon, 01 Dec 2025 21:14:51 GMT
6
+ * Generated on Tue, 23 Dec 2025 18:50:27 GMT
7
7
  */
8
8
 
9
9
  :root {
@@ -190,8 +190,8 @@
190
190
  --color-font-success: #15803d;
191
191
  --color-font-success-disabled: #bbf7d0;
192
192
  --color-font-info: #2563eb;
193
- --color-font-warn: #ca8a04;
194
- --color-font-warn-disabled: #fef08a;
193
+ --color-font-warning: #ca8a04;
194
+ --color-font-warning-disabled: #fef08a;
195
195
  --color-font-danger: #dc2626;
196
196
  --color-font-danger-input: #404040;
197
197
  --color-font-danger-disabled: #fecaca;
@@ -376,7 +376,7 @@
376
376
  \*******************************************************************************************************************************/
377
377
  /**
378
378
  * Do not edit directly
379
- * Generated on Mon, 01 Dec 2025 21:14:51 GMT
379
+ * Generated on Tue, 23 Dec 2025 18:50:27 GMT
380
380
  */
381
381
 
382
382
  :root.dark {
@@ -440,8 +440,8 @@
440
440
  --color-font-success: #16a34a;
441
441
  --color-font-success-disabled: #16a34a;
442
442
  --color-font-info: #3b82f6;
443
- --color-font-warn: #eab308;
444
- --color-font-warn-disabled: #fef08a;
443
+ --color-font-warning: #eab308;
444
+ --color-font-warning-disabled: #fef08a;
445
445
  --color-font-danger: #ef4444;
446
446
  --color-font-danger-input: #404040;
447
447
  --color-font-danger-disabled: #fecaca;
package/dist/hooks/useTheme/useTheme.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export declare const useTheme: () => {
2
2
  theme: import("../../components/ThemeProvider/ThemeProvider").Theme;
3
3
  setTheme: (theme: import("../../components/ThemeProvider/ThemeProvider").Theme) => void;
4
- isDarkMode?: boolean | undefined;
4
+ isDarkMode?: boolean;
5
5
  };
package/dist/lib/isFunction.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  import { ValueOrFunction, ValueFunction } from '../types';
2
- export declare const isFunction: <TValue, TArg>(valOrFunction: ValueOrFunction<TValue, TArg>) => valOrFunction is ValueFunction<TValue, TArg>;
2
+ export declare const isFunction: <TValue, TArg>(// eslint-disable-line import/prefer-default-export
3
+ valOrFunction: ValueOrFunction<TValue, TArg>) => valOrFunction is ValueFunction<TValue, TArg>;
package/dist/lib/reactRouterClickHandler.d.ts CHANGED
@@ -9,4 +9,4 @@ export declare const isModifiedEvent: (e: MouseEvent<HTMLButtonElement | HTMLAnc
9
9
  * https://github.com/ReactTraining/react-router/issues/7727
10
10
  * https://github.com/ReactTraining/react-router/issues/7761
11
11
  * */
12
- export declare const handleReactRouterClick: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>, onClick: ((e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void) | undefined, target: AnchorHTMLAttributes<HTMLAnchorElement>['target'] | undefined, navigate: (() => void) | undefined) => void;
12
+ export declare const handleReactRouterClick: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>, onClick: ((e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void) | undefined, target: AnchorHTMLAttributes<HTMLAnchorElement>["target"] | undefined, navigate: (() => void) | undefined) => void;
package/dist/lib/resolveValue.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  import { ValueOrFunction } from '../types';
2
- export declare const resolveValue: <TValue, TArg>(valOrFunction: ValueOrFunction<TValue, TArg>, arg: TArg) => TValue;
2
+ export declare const resolveValue: <TValue, TArg>(// eslint-disable-line import/prefer-default-export
3
+ valOrFunction: ValueOrFunction<TValue, TArg>, arg: TArg) => TValue;
package/dist/lib/tokens.d.ts CHANGED
@@ -1,22 +1,22 @@
1
- import { BorderRadiusSize, Breakpoint, BreakpointSizeWithBase } from '../types';
2
- export declare const ICON_NAMES: ("add" | "alarm-disable" | "alarm" | "analytics" | "app-window" | "archive" | "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-user" | "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" | "computer" | "contact" | "copy-document" | "cpu" | "dashboard" | "database" | "dock-left" | "document" | "dots" | "download" | "electricity-bolt" | "exclamation-mark" | "eye-slash" | "eye" | "filter" | "flag" | "folder" | "gear" | "git-branch" | "git-commit" | "git-merge" | "git-pull-request-closed" | "git-pull-request-create" | "git-pull-request-draft" | "git-pull-request" | "grab" | "hash-mark" | "heart-o" | "heart" | "home" | "inbox" | "infinity" | "info" | "integrations" | "key" | "launch-app" | "lightbulb" | "link" | "list" | "lock" | "logo-code" | "logo-deploy" | "logo-env" | "logo-github" | "logo-link" | "logo-netinfo" | "logo-toggle" | "logout" | "mail" | "memory" | "menu" | "microphone" | "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" | "ssd" | "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")[];
1
+ import { BaseColor, BackgroundColor, BorderColor, BorderRadiusSize, BorderSize, Breakpoint, BreakpointSizeWithBase, BoxShadowSize, ColorName, FontColor, FontSize, FontFamily, FontWeight, HeadingSize, HeightSize, IconName, LineHeightSize, SpacingSize, WidthSize, ZIndexSize } from '../types';
2
+ export declare const ICON_NAMES: IconName[];
3
3
  export declare const BORDER_RADIUS_OPTIONS: BorderRadiusSize[];
4
- export declare const BORDER_SIZE_OPTIONS: ("0" | "sm" | "md" | "lg")[];
4
+ export declare const BORDER_SIZE_OPTIONS: BorderSize[];
5
5
  export declare const BREAKPOINT_OPTIONS: BreakpointSizeWithBase[];
6
6
  export declare const BREAKPOINTS: Breakpoint[];
7
- export declare const BASE_COLOR_OPTIONS: ("black" | "white" | "magenta" | "primary-50" | "primary-100" | "primary-200" | "primary-300" | "primary-400" | "primary-500" | "primary-600" | "primary-700" | "primary-800" | "primary-900" | "green-50" | "green-100" | "green-200" | "green-300" | "green-400" | "green-500" | "green-600" | "green-700" | "green-800" | "green-900" | "blue-50" | "blue-100" | "blue-200" | "blue-300" | "blue-400" | "blue-500" | "blue-600" | "blue-700" | "blue-800" | "blue-900" | "purple-50" | "purple-100" | "purple-200" | "purple-300" | "purple-400" | "purple-500" | "purple-600" | "purple-700" | "purple-800" | "purple-900" | "yellow-50" | "yellow-100" | "yellow-200" | "yellow-300" | "yellow-400" | "yellow-500" | "yellow-600" | "yellow-700" | "yellow-800" | "yellow-900" | "red-50" | "red-100" | "red-200" | "red-300" | "red-400" | "red-500" | "red-600" | "red-700" | "red-800" | "red-900" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-400" | "grey-500" | "grey-600" | "grey-700" | "grey-800" | "grey-900")[];
8
- export declare const BASE_COLOR_NAMES: ("black" | "white" | "magenta" | "primary" | "green" | "blue" | "purple" | "yellow" | "red" | "grey")[];
9
- export declare const FONT_COLOR_OPTIONS: ("info" | "base" | "black" | "white" | "grey" | "secondary" | "tertiary" | "inverse" | "disabled" | "success" | "success-disabled" | "warn" | "warn-disabled" | "danger" | "danger-input" | "danger-disabled" | "button-primary" | "button-primary-hover" | "button-primary-active" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "button-danger" | "button-danger-hover" | "button-danger-active" | "toast" | "toast-error" | "tooltip" | "popover" | "placeholder" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple")[];
10
- export declare const BACKGROUND_COLOR_OPTIONS: ("info" | "black" | "white" | "primary" | "secondary" | "tertiary" | "inverse" | "disabled" | "success" | "danger" | "button-primary" | "button-primary-hover" | "button-primary-active" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "button-danger" | "button-danger-hover" | "button-danger-active" | "toast" | "toast-error" | "tooltip" | "popover" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple" | "error" | "warning" | "transparent" | "toggle-group-item-hover" | "toggle-group-item-active" | "scrollbar-thumb" | "scrollbar-track" | "modal" | "slider" | "checkbox-checked" | "brand-gradient" | "brand-gradient-reverse" | "brand-gradient-purple" | "brand-gradient-purple-reverse" | "brand-gradient-cyan" | "brand-gradient-cyan-reverse" | "chart-1" | "chart-2" | "chart-3")[];
11
- export declare const BORDER_COLOR_OPTIONS: ("info" | "black" | "white" | "inverse" | "danger" | "button-primary" | "button-primary-hover" | "button-primary-active" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "toast" | "toast-error" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple" | "warning" | "transparent" | "default" | "subtle" | "hover" | "active" | "sidebar-rail-hover" | "checkbox")[];
12
- export declare const FONT_SIZE_OPTIONS: ("xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "base" | "2xs" | "4xl" | "5xl" | "6xl" | "7xl" | "form-label" | "form-help-text")[];
13
- export declare const FONT_FAMILY_OPTIONS: ("monospace" | "body" | "brand")[];
14
- export declare const FONT_WEIGHT_OPTIONS: ("form-label" | "form-help-text" | "light" | "normal" | "medium" | "semibold" | "bold")[];
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" | "fit" | "min" | "max" | "auto" | "10" | "15" | "20" | "25" | "30" | "33" | "34" | "40" | "50" | "60" | "66" | "70" | "75" | "80" | "90" | "100")[];
17
- export declare const LINE_HEIGHT_OPTIONS: ("base" | "none" | "input" | "heading" | "text")[];
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" | "fit" | "min" | "max" | "auto" | "10" | "15" | "20" | "25" | "30" | "33" | "34" | "40" | "50" | "60" | "66" | "70" | "75" | "80" | "90" | "100")[];
20
- export declare const Z_INDEX_OPTIONS: ("0" | "popover" | "modal" | "overlay" | "drawer" | "sticky")[];
7
+ export declare const BASE_COLOR_OPTIONS: BaseColor[];
8
+ export declare const BASE_COLOR_NAMES: ColorName[];
9
+ export declare const FONT_COLOR_OPTIONS: FontColor[];
10
+ export declare const BACKGROUND_COLOR_OPTIONS: BackgroundColor[];
11
+ export declare const BORDER_COLOR_OPTIONS: BorderColor[];
12
+ export declare const FONT_SIZE_OPTIONS: FontSize[];
13
+ export declare const FONT_FAMILY_OPTIONS: FontFamily[];
14
+ export declare const FONT_WEIGHT_OPTIONS: FontWeight[];
15
+ export declare const HEADING_SIZE_OPTIONS: HeadingSize[];
16
+ export declare const HEIGHT_OPTIONS: HeightSize[];
17
+ export declare const LINE_HEIGHT_OPTIONS: LineHeightSize[];
18
+ export declare const SPACING_OPTIONS: SpacingSize[];
19
+ export declare const WIDTH_OPTIONS: WidthSize[];
20
+ export declare const Z_INDEX_OPTIONS: ZIndexSize[];
21
21
  export declare const Z_INDEX_VALUES: any;
22
- export declare const BOX_SHADOW_OPTIONS: ("0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "2xs")[];
22
+ export declare const BOX_SHADOW_OPTIONS: BoxShadowSize[];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hyphen/hyphen-components",
3
- "version": "7.0.0-beta.6",
3
+ "version": "7.0.0",
4
4
  "license": "MIT",
5
5
  "author": {
6
6
  "name": "@hyphen"
@@ -19,8 +19,8 @@
19
19
  "build-storybook": "storybook build",
20
20
  "build-storybook-docs": "storybook build --docs",
21
21
  "storybook-docs": "storybook dev --docs",
22
- "lint": "dts lint",
23
- "lint-fix": "dts lint --fix",
22
+ "lint": "dts lint src",
23
+ "lint-fix": "dts lint src --fix",
24
24
  "size": "size-limit",
25
25
  "start": "dts watch",
26
26
  "storybook": "storybook dev -p 6006",
@@ -32,7 +32,7 @@
32
32
  },
33
33
  "husky": {
34
34
  "hooks": {
35
- "pre-commit": "dts lint"
35
+ "pre-commit": "dts lint src"
36
36
  }
37
37
  },
38
38
  "prettier": {
@@ -62,18 +62,18 @@
62
62
  ],
63
63
  "dependencies": {
64
64
  "@emotion/react": "^11.14.0",
65
- "@hyphen/hyphen-design-tokens": "^5.11.0",
66
- "@radix-ui/react-aspect-ratio": "^1.1.7",
65
+ "@hyphen/hyphen-design-tokens": "^6.0.0",
66
+ "@radix-ui/react-aspect-ratio": "^1.1.8",
67
67
  "@radix-ui/react-collapsible": "^1.1.12",
68
68
  "@radix-ui/react-dropdown-menu": "^2.1.16",
69
69
  "@radix-ui/react-popover": "^1.1.15",
70
- "@radix-ui/react-slot": "^1.2.3",
70
+ "@radix-ui/react-slot": "^1.2.4",
71
71
  "@radix-ui/react-toggle": "^1.1.10",
72
72
  "@radix-ui/react-toggle-group": "^1.1.11",
73
73
  "@radix-ui/react-tooltip": "^1.2.8",
74
74
  "@types/react-modal": "^3.16.3",
75
75
  "classnames": "^2.5.1",
76
- "date-fns": "^2.30.0",
76
+ "date-fns": "^4.1.0",
77
77
  "formik": "^2.4.6",
78
78
  "react-day-picker": "^9.11.3",
79
79
  "react-focus-lock": "^2.13.2",
@@ -127,9 +127,9 @@
127
127
  "semantic-release": "^23.1.1",
128
128
  "size-limit": "^11.2.0",
129
129
  "storybook": "^9.1.3",
130
- "ts-jest": "^29.1.3",
131
- "tslib": "^2.6.2",
132
- "typescript": "^5.4.5",
130
+ "ts-jest": "^29.4.6",
131
+ "tslib": "^2.8.1",
132
+ "typescript": "^5.9.3",
133
133
  "url-loader": "^4.1.1",
134
134
  "vite": "^5.4.19",
135
135
  "webpack": "^5.94.0",
package/src/components/Box/Box.stories.tsx CHANGED
@@ -709,7 +709,7 @@ export const FontColor = () => (
709
709
  <Box color="inverse">inverse</Box>
710
710
  <Box color="disabled">disabled</Box>
711
711
  <Box color="success">success</Box>
712
- <Box color="warn">warn</Box>
712
+ <Box color="warning">warn</Box>
713
713
  <Box color="danger">danger</Box>
714
714
  <Box color="brand-yellow">brand-yellow</Box>
715
715
  <Box color="brand-orange">brand-orange</Box>
package/src/components/Heading/Heading.stories.tsx CHANGED
@@ -80,8 +80,8 @@ export const Colors = () => (
80
80
  <Heading as="h3" color="success">
81
81
  success
82
82
  </Heading>
83
- <Heading as="h3" color="warn">
84
- warn
83
+ <Heading as="h3" color="warning">
84
+ warning
85
85
  </Heading>
86
86
  <Heading as="h3" color="danger">
87
87
  danger
package/src/components/Icon/Icon.stories.tsx CHANGED
@@ -21,7 +21,7 @@ export const Sizes = () => (
21
21
  <Box>Size is set by the Icon's parent</Box>
22
22
  </Box>
23
23
  <Box direction="row" fontSize="xl" childGap="sm">
24
- <Icon name="star" color="warn" />
24
+ <Icon name="star" color="warning" />
25
25
  <Box>Size is set by the Icon's parent</Box>
26
26
  </Box>
27
27
  </>
package/src/styles/utilities.scss CHANGED
@@ -39,11 +39,3 @@
39
39
  .hover-show-child:hover .hover-child {
40
40
  opacity: 1;
41
41
  }
42
-
43
- .top-0 {
44
- top: 0;
45
- }
46
-
47
- .inset-x-0 {
48
- inset-inline: 0;
49
- }