@hyphen/hyphen-components 5.2.1 → 5.3.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 (16) hide show
  1. package/dist/components/Sidebar/Sidebar.d.ts +1 -0
  2. package/dist/components/Sidebar/Sidebar.stories.d.ts +1 -0
  3. package/dist/css/index.css +3 -3
  4. package/dist/css/utilities.css +7 -1
  5. package/dist/css/variables.css +4 -2
  6. package/dist/hyphen-components.cjs.development.js +143 -115
  7. package/dist/hyphen-components.cjs.development.js.map +1 -1
  8. package/dist/hyphen-components.cjs.production.min.js +1 -1
  9. package/dist/hyphen-components.cjs.production.min.js.map +1 -1
  10. package/dist/hyphen-components.esm.js +142 -114
  11. package/dist/hyphen-components.esm.js.map +1 -1
  12. package/dist/lib/tokens.d.ts +1 -1
  13. package/package.json +9 -9
  14. package/src/components/Sidebar/Sidebar.module.scss +15 -0
  15. package/src/components/Sidebar/Sidebar.stories.tsx +347 -227
  16. package/src/components/Sidebar/Sidebar.tsx +102 -53
package/dist/lib/tokens.d.ts CHANGED
@@ -7,7 +7,7 @@ export declare const BREAKPOINTS: Breakpoint[];
7
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
8
  export declare const BASE_COLOR_NAMES: ("black" | "white" | "magenta" | "primary" | "green" | "blue" | "purple" | "yellow" | "red" | "grey")[];
9
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" | "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" | "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" | "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")[];
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" | "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" | "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
11
  export declare const BORDER_COLOR_OPTIONS: ("info" | "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" | "default" | "subtle" | "hover" | "active" | "sidebar-rail-hover")[];
12
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
13
  export declare const FONT_FAMILY_OPTIONS: ("monospace" | "body" | "brand")[];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hyphen/hyphen-components",
3
- "version": "5.2.1",
3
+ "version": "5.3.0",
4
4
  "license": "MIT",
5
5
  "author": {
6
6
  "name": "@hyphen"
@@ -62,14 +62,14 @@
62
62
  ],
63
63
  "dependencies": {
64
64
  "@emotion/react": "^11.14.0",
65
- "@hyphen/hyphen-design-tokens": "^4.33.0",
65
+ "@hyphen/hyphen-design-tokens": "^4.34.0",
66
66
  "@popperjs/core": "^2.11.8",
67
- "@radix-ui/react-collapsible": "^1.1.3",
68
- "@radix-ui/react-dropdown-menu": "^2.1.6",
69
- "@radix-ui/react-slot": "^1.1.2",
70
- "@radix-ui/react-toggle": "^1.1.2",
71
- "@radix-ui/react-toggle-group": "^1.1.2",
72
- "@radix-ui/react-tooltip": "^1.1.8",
67
+ "@radix-ui/react-collapsible": "^1.1.11",
68
+ "@radix-ui/react-dropdown-menu": "^2.1.15",
69
+ "@radix-ui/react-slot": "^1.2.3",
70
+ "@radix-ui/react-toggle": "^1.1.9",
71
+ "@radix-ui/react-toggle-group": "^1.1.10",
72
+ "@radix-ui/react-tooltip": "^1.2.7",
73
73
  "@types/react-modal": "^3.16.3",
74
74
  "classnames": "^2.5.1",
75
75
  "date-fns": "^2.16.1",
@@ -85,7 +85,7 @@
85
85
  "react-select-event": "^5.5.1"
86
86
  },
87
87
  "devDependencies": {
88
- "@babel/core": "^7.23.7",
88
+ "@babel/core": "^7.27.4",
89
89
  "@chromatic-com/storybook": "^3.2.6",
90
90
  "@semantic-release/commit-analyzer": "^11.1.0",
91
91
  "@size-limit/preset-small-lib": "^11.1.4",
package/src/components/Sidebar/Sidebar.module.scss CHANGED
@@ -7,3 +7,18 @@
7
7
  .rail:hover {
8
8
  border-right: 2px solid var(--color-border-sidebar-rail-hover);
9
9
  }
10
+
11
+ [data-sidebar='sidebar'] svg {
12
+ flex-shrink: 0;
13
+ }
14
+
15
+ .group-data-[collapsible='icon']:hidden {
16
+ display: none;
17
+ }
18
+
19
+ :global(
20
+ .group[data-collapsible='icon'][data-state='collapsed']
21
+ .group-data-collapsible-icon-hidden
22
+ ) {
23
+ display: none;
24
+ }