@hyphen/hyphen-components 4.0.1 → 4.1.1
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.
- package/dist/css/utilities.css +697 -45
- package/dist/css/variables.css +8 -2
- package/dist/hyphen-components.cjs.development.js +2 -1
- package/dist/hyphen-components.cjs.development.js.map +1 -1
- package/dist/hyphen-components.cjs.production.min.js +1 -1
- package/dist/hyphen-components.cjs.production.min.js.map +1 -1
- package/dist/hyphen-components.esm.js +2 -1
- package/dist/hyphen-components.esm.js.map +1 -1
- package/dist/lib/tokens.d.ts +3 -3
- package/package.json +21 -21
- package/src/components/Box/Box.stories.tsx +12 -0
- package/src/components/Modal/components/ModalHeader/ModalHeader.tsx +1 -0
package/dist/lib/tokens.d.ts
CHANGED
|
@@ -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: ("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" | "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" | "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
|
-
export declare const SPACING_OPTIONS: ("0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "2xs" | "4xl" | "5xl" | "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" | "70" | "75" | "80" | "90" | "100")[];
|
|
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")[];
|
|
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.
|
|
3
|
+
"version": "4.1.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "@hyphen"
|
|
@@ -60,6 +60,26 @@
|
|
|
60
60
|
"limit": "10 KB"
|
|
61
61
|
}
|
|
62
62
|
],
|
|
63
|
+
"dependencies": {
|
|
64
|
+
"@hyphen/hyphen-design-tokens": "^4.19.0",
|
|
65
|
+
"@popperjs/core": "^2.11.8",
|
|
66
|
+
"@radix-ui/react-collapsible": "^1.1.1",
|
|
67
|
+
"@radix-ui/react-dropdown-menu": "^2.1.2",
|
|
68
|
+
"@radix-ui/react-slot": "^1.1.0",
|
|
69
|
+
"@types/react-modal": "^3.16.3",
|
|
70
|
+
"classnames": "^2.5.1",
|
|
71
|
+
"date-fns": "^2.16.1",
|
|
72
|
+
"focus-trap-react": "^10.2.3",
|
|
73
|
+
"formik": "^2.4.6",
|
|
74
|
+
"react-datepicker": "^6.3.0",
|
|
75
|
+
"react-focus-lock": "^2.13.2",
|
|
76
|
+
"react-modal": "^3.16.1",
|
|
77
|
+
"react-popper": "^2.3.0",
|
|
78
|
+
"react-remove-scroll": "^2.5.10",
|
|
79
|
+
"react-router-dom": "^6.26.1",
|
|
80
|
+
"react-select": "^5.8.0",
|
|
81
|
+
"react-select-event": "^5.5.1"
|
|
82
|
+
},
|
|
63
83
|
"devDependencies": {
|
|
64
84
|
"@babel/core": "^7.23.7",
|
|
65
85
|
"@chromatic-com/storybook": "^1.8.0",
|
|
@@ -120,25 +140,5 @@
|
|
|
120
140
|
},
|
|
121
141
|
"optionalDependencies": {
|
|
122
142
|
"@rollup/rollup-linux-x64-gnu": "^4.21.2"
|
|
123
|
-
},
|
|
124
|
-
"dependencies": {
|
|
125
|
-
"@hyphen/hyphen-design-tokens": "^4.18.0",
|
|
126
|
-
"@popperjs/core": "^2.11.8",
|
|
127
|
-
"@radix-ui/react-collapsible": "^1.1.1",
|
|
128
|
-
"@radix-ui/react-dropdown-menu": "^2.1.2",
|
|
129
|
-
"@radix-ui/react-slot": "^1.1.0",
|
|
130
|
-
"@types/react-modal": "^3.16.3",
|
|
131
|
-
"classnames": "^2.5.1",
|
|
132
|
-
"date-fns": "^2.16.1",
|
|
133
|
-
"focus-trap-react": "^10.2.3",
|
|
134
|
-
"formik": "^2.4.6",
|
|
135
|
-
"react-datepicker": "^6.3.0",
|
|
136
|
-
"react-focus-lock": "^2.13.2",
|
|
137
|
-
"react-modal": "^3.16.1",
|
|
138
|
-
"react-popper": "^2.3.0",
|
|
139
|
-
"react-remove-scroll": "^2.5.10",
|
|
140
|
-
"react-router-dom": "^6.26.1",
|
|
141
|
-
"react-select": "^5.8.0",
|
|
142
|
-
"react-select-event": "^5.5.1"
|
|
143
143
|
}
|
|
144
144
|
}
|
|
@@ -1060,6 +1060,9 @@ export const WidthPercentages = () => (
|
|
|
1060
1060
|
<Box background="tertiary" width="60">
|
|
1061
1061
|
60%
|
|
1062
1062
|
</Box>
|
|
1063
|
+
<Box background="tertiary" width="66">
|
|
1064
|
+
66%
|
|
1065
|
+
</Box>
|
|
1063
1066
|
<Box background="tertiary" width="70">
|
|
1064
1067
|
70%
|
|
1065
1068
|
</Box>
|
|
@@ -1343,6 +1346,15 @@ export const HeightPercentages = () => (
|
|
|
1343
1346
|
>
|
|
1344
1347
|
60%
|
|
1345
1348
|
</Box>
|
|
1349
|
+
<Box
|
|
1350
|
+
flex="auto"
|
|
1351
|
+
justifyContent="center"
|
|
1352
|
+
alignItems="center"
|
|
1353
|
+
background="tertiary"
|
|
1354
|
+
height="66"
|
|
1355
|
+
>
|
|
1356
|
+
66%
|
|
1357
|
+
</Box>
|
|
1346
1358
|
<Box
|
|
1347
1359
|
flex="auto"
|
|
1348
1360
|
justifyContent="center"
|