@lateralus-ai/shipping-ui 2.0.0-dev.20 → 2.0.0-dev.22
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/domain/Filters/FilterDropdown.d.ts +93 -0
- package/dist/domain/Filters/FilterPill.d.ts +12 -5
- package/dist/domain/Filters/FilterPills.d.ts +18 -0
- package/dist/domain/Filters/FilteredPill.d.ts +15 -5
- package/dist/domain/Filters/formatActiveFilterChipLabel.d.ts +11 -0
- package/dist/domain/Filters/index.d.ts +8 -3
- package/dist/index.cjs +33 -33
- package/dist/index.esm.js +7300 -5990
- package/package.json +2 -1
- package/src/components/EmptyState.tsx +44 -44
- package/src/components/Modal.tsx +141 -141
- package/src/components/PageHeader.tsx +132 -132
- package/src/components/ScrollableList.tsx +61 -61
- package/src/components/Tabs.tsx +146 -146
- package/src/components/index.ts +56 -56
- package/src/domain/Filters/FilterDropdown.tsx +438 -0
- package/src/domain/Filters/FilterPill.tsx +54 -18
- package/src/domain/Filters/FilterPills.tsx +34 -0
- package/src/domain/Filters/FilteredPill.tsx +48 -28
- package/src/domain/Filters/FiltersBar.tsx +15 -19
- package/src/domain/Filters/formatActiveFilterChipLabel.ts +23 -0
- package/src/domain/Filters/index.ts +35 -3
- package/src/icons/arrow-paths.ts +8 -8
- package/src/icons/chevron-paths.ts +17 -17
- package/src/icons/icons-data.ts +656 -656
- package/src/index.ts +85 -85
- package/src/patterns/Search/ResultRow.tsx +44 -44
- package/src/patterns/Search/SearchModal.tsx +310 -310
- package/src/patterns/Search/index.ts +31 -31
- package/src/patterns/Sidebar/assets/logo-compliance-mark.png +5 -5
- package/src/patterns/Sidebar/assets/logo-compliance-mask.png +13 -13
- package/src/patterns/Sidebar/assets/logo-compliance.svg +17 -17
- package/src/patterns/Sidebar/assets/logo-technical-avatar.svg +17 -17
- package/src/patterns/Sidebar/assets/logo-technical-mark.png +5 -5
- package/src/patterns/Sidebar/assets/logo-technical.svg +16 -16
- package/src/patterns/Skeleton/Skeleton.tsx +56 -56
- package/src/primitives/button-styles.ts +92 -92
- package/src/stories/canvases/ButtonsCanvas.tsx +107 -107
- package/src/stories/canvases/ButtonsMatrixCanvas.tsx +65 -65
- package/src/stories/canvases/ContentCanvas.tsx +353 -353
- package/src/stories/canvases/FiltersCanvas.tsx +156 -30
- package/src/stories/canvases/SearchCanvas.tsx +150 -150
- package/src/stories/canvases/figma-buttons-layout.ts +83 -83
- package/src/stories/canvases/figma-widths.ts +28 -28
- package/src/stories/canvases/helpers.tsx +146 -146
- package/src/stories/components/Buttons.stories.tsx +11 -11
- package/src/stories/components/Chat.stories.tsx +11 -11
- package/src/stories/components/Content.stories.tsx +11 -11
- package/src/stories/components/Core.stories.tsx +11 -11
- package/src/stories/components/DomainForms.stories.tsx +11 -11
- package/src/stories/components/Filters.stories.tsx +11 -11
- package/src/stories/components/Forms.stories.tsx +11 -11
- package/src/stories/components/Icons.stories.tsx +11 -11
- package/src/stories/components/Illustrations.stories.tsx +11 -11
- package/src/stories/components/Library.stories.tsx +11 -11
- package/src/stories/components/Modals.stories.tsx +11 -11
- package/src/stories/components/Report.stories.tsx +11 -11
- package/src/stories/components/ReportLayout.stories.tsx +11 -11
- package/src/stories/components/Search.stories.tsx +11 -11
- package/src/stories/components/Settings.stories.tsx +11 -11
- package/src/stories/components/Ships.stories.tsx +11 -11
- package/src/stories/components/SidebarLayouts.stories.tsx +11 -11
- package/src/stories/components/Skeletons.stories.tsx +11 -11
- package/src/stories/components/Workflows.stories.tsx +11 -11
- package/src/stories/style-guide/Buttons.stories.tsx +11 -11
- package/src/stories/style-guide/ColorTokens.stories.tsx +11 -11
- package/src/stories/style-guide/Colors.stories.tsx +11 -11
- package/src/stories/style-guide/RaiseLevels.stories.tsx +11 -11
- package/src/stories/style-guide/Typography.stories.tsx +11 -11
- package/src/tailwind-theme.ts +186 -186
- package/src/theme-entry.ts +2 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<g id="Logo">
|
|
3
|
-
<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="var(--fill-0, #262420)"/>
|
|
4
|
-
</g>
|
|
5
|
-
</svg>
|
|
1
|
+
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g id="Logo">
|
|
3
|
+
<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="var(--fill-0, #262420)"/>
|
|
4
|
+
</g>
|
|
5
|
+
</svg>
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<g id="Mask" clip-path="url(#clip0_0_4)">
|
|
3
|
-
<g id="icon-compliance.svg">
|
|
4
|
-
<path id="Vector" d="M8.30333 5.84667L5.18333 14.2917H6.33833V14.2883C6.34 14.2883 6.34167 14.29 6.34167 14.29L8.90667 11.7267H9.06667L11.6283 14.2917H12.8233L9.71667 5.84667H8.305H8.30333ZM9.215 10.4433H8.75667L7.15167 12.0483L8.89 7.25167H9.10167L10.825 12.055L9.21667 10.4433H9.215Z" fill="var(--fill-0, #232323)"/>
|
|
5
|
-
<path id="Vector_2" d="M8.98833 4.85833C9.87167 4.85833 10.6817 5.23 11.3117 5.84667H12.7967C11.925 4.54667 10.5433 3.70667 8.98833 3.70667C7.43333 3.70667 6.05167 4.54667 5.18 5.84667H6.665C7.29333 5.23 8.105 4.85833 8.98833 4.85833Z" fill="var(--fill-0, #232323)"/>
|
|
6
|
-
</g>
|
|
7
|
-
</g>
|
|
8
|
-
<defs>
|
|
9
|
-
<clipPath id="clip0_0_4">
|
|
10
|
-
<rect width="18" height="18" fill="white"/>
|
|
11
|
-
</clipPath>
|
|
12
|
-
</defs>
|
|
13
|
-
</svg>
|
|
1
|
+
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g id="Mask" clip-path="url(#clip0_0_4)">
|
|
3
|
+
<g id="icon-compliance.svg">
|
|
4
|
+
<path id="Vector" d="M8.30333 5.84667L5.18333 14.2917H6.33833V14.2883C6.34 14.2883 6.34167 14.29 6.34167 14.29L8.90667 11.7267H9.06667L11.6283 14.2917H12.8233L9.71667 5.84667H8.305H8.30333ZM9.215 10.4433H8.75667L7.15167 12.0483L8.89 7.25167H9.10167L10.825 12.055L9.21667 10.4433H9.215Z" fill="var(--fill-0, #232323)"/>
|
|
5
|
+
<path id="Vector_2" d="M8.98833 4.85833C9.87167 4.85833 10.6817 5.23 11.3117 5.84667H12.7967C11.925 4.54667 10.5433 3.70667 8.98833 3.70667C7.43333 3.70667 6.05167 4.54667 5.18 5.84667H6.665C7.29333 5.23 8.105 4.85833 8.98833 4.85833Z" fill="var(--fill-0, #232323)"/>
|
|
6
|
+
</g>
|
|
7
|
+
</g>
|
|
8
|
+
<defs>
|
|
9
|
+
<clipPath id="clip0_0_4">
|
|
10
|
+
<rect width="18" height="18" fill="white"/>
|
|
11
|
+
</clipPath>
|
|
12
|
+
</defs>
|
|
13
|
+
</svg>
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<rect width="18" height="18" fill="#F5F5F5"/>
|
|
3
|
-
<g id="Core">
|
|
4
|
-
<path d="M-330 -683C-330 -694.046 -321.046 -703 -310 -703H382C393.046 -703 402 -694.046 402 -683V927C402 938.046 393.046 947 382 947H-310C-321.046 947 -330 938.046 -330 927V-683Z" fill="#FDFDFC"/>
|
|
5
|
-
<g id="Content">
|
|
6
|
-
<g id="Avatar">
|
|
7
|
-
<rect x="-273.5" y="-30.5" width="619" height="79" rx="4.5" stroke="#9747FF" stroke-dasharray="10 5"/>
|
|
8
|
-
<g id="Chief=Technical, Size=18">
|
|
9
|
-
<path d="M0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9Z" fill="#FDFDFC"/>
|
|
10
|
-
<g id="Logo">
|
|
11
|
-
<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="#262420"/>
|
|
12
|
-
</g>
|
|
13
|
-
</g>
|
|
14
|
-
</g>
|
|
15
|
-
</g>
|
|
16
|
-
</g>
|
|
17
|
-
</svg>
|
|
1
|
+
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<rect width="18" height="18" fill="#F5F5F5"/>
|
|
3
|
+
<g id="Core">
|
|
4
|
+
<path d="M-330 -683C-330 -694.046 -321.046 -703 -310 -703H382C393.046 -703 402 -694.046 402 -683V927C402 938.046 393.046 947 382 947H-310C-321.046 947 -330 938.046 -330 927V-683Z" fill="#FDFDFC"/>
|
|
5
|
+
<g id="Content">
|
|
6
|
+
<g id="Avatar">
|
|
7
|
+
<rect x="-273.5" y="-30.5" width="619" height="79" rx="4.5" stroke="#9747FF" stroke-dasharray="10 5"/>
|
|
8
|
+
<g id="Chief=Technical, Size=18">
|
|
9
|
+
<path d="M0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9Z" fill="#FDFDFC"/>
|
|
10
|
+
<g id="Logo">
|
|
11
|
+
<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="#262420"/>
|
|
12
|
+
</g>
|
|
13
|
+
</g>
|
|
14
|
+
</g>
|
|
15
|
+
</g>
|
|
16
|
+
</g>
|
|
17
|
+
</svg>
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<rect width="18" height="18" fill="#F5F5F5"/>
|
|
3
|
-
<g id="Core">
|
|
4
|
-
<path d="M-330 -683C-330 -694.046 -321.046 -703 -310 -703H382C393.046 -703 402 -694.046 402 -683V927C402 938.046 393.046 947 382 947H-310C-321.046 947 -330 938.046 -330 927V-683Z" fill="#FDFDFC"/>
|
|
5
|
-
<g id="Content">
|
|
6
|
-
<g id="Avatar">
|
|
7
|
-
<rect x="-273.5" y="-30.5" width="619" height="79" rx="4.5" stroke="#9747FF" stroke-dasharray="10 5"/>
|
|
8
|
-
<g id="Chief=Technical, Size=18">
|
|
9
|
-
<path d="M0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9Z" fill="#FDFDFC"/>
|
|
10
|
-
<g id="Logo">
|
|
11
|
-
<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="#262420"/>
|
|
12
|
-
</g>
|
|
13
|
-
</g>
|
|
14
|
-
</g>
|
|
15
|
-
</g>
|
|
16
|
-
</g>
|
|
17
|
-
</svg>
|
|
1
|
+
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<rect width="18" height="18" fill="#F5F5F5"/>
|
|
3
|
+
<g id="Core">
|
|
4
|
+
<path d="M-330 -683C-330 -694.046 -321.046 -703 -310 -703H382C393.046 -703 402 -694.046 402 -683V927C402 938.046 393.046 947 382 947H-310C-321.046 947 -330 938.046 -330 927V-683Z" fill="#FDFDFC"/>
|
|
5
|
+
<g id="Content">
|
|
6
|
+
<g id="Avatar">
|
|
7
|
+
<rect x="-273.5" y="-30.5" width="619" height="79" rx="4.5" stroke="#9747FF" stroke-dasharray="10 5"/>
|
|
8
|
+
<g id="Chief=Technical, Size=18">
|
|
9
|
+
<path d="M0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9Z" fill="#FDFDFC"/>
|
|
10
|
+
<g id="Logo">
|
|
11
|
+
<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="#262420"/>
|
|
12
|
+
</g>
|
|
13
|
+
</g>
|
|
14
|
+
</g>
|
|
15
|
+
</g>
|
|
16
|
+
</g>
|
|
17
|
+
</svg>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<g id="Logo">
|
|
3
|
-
<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="var(--fill-0, #262420)"/>
|
|
4
|
-
</g>
|
|
5
|
-
</svg>
|
|
1
|
+
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g id="Logo">
|
|
3
|
+
<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="var(--fill-0, #262420)"/>
|
|
4
|
+
</g>
|
|
5
|
+
</svg>
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<rect width="18" height="18" fill="#F5F5F5"/>
|
|
3
|
-
<g id="Core">
|
|
4
|
-
<path d="M-330 -683C-330 -694.046 -321.046 -703 -310 -703H382C393.046 -703 402 -694.046 402 -683V927C402 938.046 393.046 947 382 947H-310C-321.046 947 -330 938.046 -330 927V-683Z" fill="white"/>
|
|
5
|
-
<g id="Content">
|
|
6
|
-
<g id="Avatar">
|
|
7
|
-
<rect x="-273.5" y="-30.5" width="619" height="79" rx="4.5" stroke="#9747FF" stroke-dasharray="10 5"/>
|
|
8
|
-
<g id="Chief=Technical, Size=18">
|
|
9
|
-
<g id="Logo">
|
|
10
|
-
<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="#262420"/>
|
|
11
|
-
</g>
|
|
12
|
-
</g>
|
|
13
|
-
</g>
|
|
14
|
-
</g>
|
|
15
|
-
</g>
|
|
16
|
-
</svg>
|
|
1
|
+
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<rect width="18" height="18" fill="#F5F5F5"/>
|
|
3
|
+
<g id="Core">
|
|
4
|
+
<path d="M-330 -683C-330 -694.046 -321.046 -703 -310 -703H382C393.046 -703 402 -694.046 402 -683V927C402 938.046 393.046 947 382 947H-310C-321.046 947 -330 938.046 -330 927V-683Z" fill="white"/>
|
|
5
|
+
<g id="Content">
|
|
6
|
+
<g id="Avatar">
|
|
7
|
+
<rect x="-273.5" y="-30.5" width="619" height="79" rx="4.5" stroke="#9747FF" stroke-dasharray="10 5"/>
|
|
8
|
+
<g id="Chief=Technical, Size=18">
|
|
9
|
+
<g id="Logo">
|
|
10
|
+
<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="#262420"/>
|
|
11
|
+
</g>
|
|
12
|
+
</g>
|
|
13
|
+
</g>
|
|
14
|
+
</g>
|
|
15
|
+
</g>
|
|
16
|
+
</svg>
|
|
@@ -1,56 +1,56 @@
|
|
|
1
|
-
import { cn } from "../../utils/cn";
|
|
2
|
-
|
|
3
|
-
export type SkeletonVariant = "content" | "search";
|
|
4
|
-
|
|
5
|
-
export type SkeletonProps = {
|
|
6
|
-
variant?: SkeletonVariant;
|
|
7
|
-
className?: string;
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
const ContentSkeleton = () => (
|
|
11
|
-
<div className="flex flex-col gap-4 p-4" aria-hidden>
|
|
12
|
-
<div className="flex items-center gap-3">
|
|
13
|
-
<div className="size-8 animate-pulse rounded-full bg-grey-200" />
|
|
14
|
-
<div className="flex flex-1 flex-col gap-2">
|
|
15
|
-
<div className="h-4 w-1/3 animate-pulse rounded bg-grey-200" />
|
|
16
|
-
<div className="h-3 w-1/4 animate-pulse rounded bg-grey-100" />
|
|
17
|
-
</div>
|
|
18
|
-
</div>
|
|
19
|
-
<div className="flex flex-col gap-2">
|
|
20
|
-
<div className="h-4 w-full animate-pulse rounded bg-grey-200" />
|
|
21
|
-
<div className="h-4 w-5/6 animate-pulse rounded bg-grey-200" />
|
|
22
|
-
<div className="h-4 w-2/3 animate-pulse rounded bg-grey-100" />
|
|
23
|
-
</div>
|
|
24
|
-
<div className="h-24 animate-pulse rounded-control bg-grey-100" />
|
|
25
|
-
</div>
|
|
26
|
-
);
|
|
27
|
-
|
|
28
|
-
/** Figma Search loading — 8 rows of icon + bar (no input/pills). */
|
|
29
|
-
const SearchSkeleton = () => {
|
|
30
|
-
const widths = [250, 300, 220, 255, 250, 300, 220, 255];
|
|
31
|
-
|
|
32
|
-
return (
|
|
33
|
-
<div className="flex flex-col gap-1.5 p-4" aria-hidden>
|
|
34
|
-
{widths.map((width, index) => (
|
|
35
|
-
<div key={index} className="flex items-start gap-2 py-2">
|
|
36
|
-
<div className="size-3 shrink-0 animate-pulse rounded-md bg-grey-200" />
|
|
37
|
-
<div
|
|
38
|
-
className="h-3 animate-pulse rounded-md bg-grey-200"
|
|
39
|
-
style={{ width }}
|
|
40
|
-
/>
|
|
41
|
-
</div>
|
|
42
|
-
))}
|
|
43
|
-
</div>
|
|
44
|
-
);
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
export const Skeleton = ({ variant = "content", className }: SkeletonProps) => (
|
|
48
|
-
<div
|
|
49
|
-
className={cn("rounded-control bg-background-primary", className)}
|
|
50
|
-
role="status"
|
|
51
|
-
aria-label="Loading"
|
|
52
|
-
data-variant={variant}
|
|
53
|
-
>
|
|
54
|
-
{variant === "content" ? <ContentSkeleton /> : <SearchSkeleton />}
|
|
55
|
-
</div>
|
|
56
|
-
);
|
|
1
|
+
import { cn } from "../../utils/cn";
|
|
2
|
+
|
|
3
|
+
export type SkeletonVariant = "content" | "search";
|
|
4
|
+
|
|
5
|
+
export type SkeletonProps = {
|
|
6
|
+
variant?: SkeletonVariant;
|
|
7
|
+
className?: string;
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
const ContentSkeleton = () => (
|
|
11
|
+
<div className="flex flex-col gap-4 p-4" aria-hidden>
|
|
12
|
+
<div className="flex items-center gap-3">
|
|
13
|
+
<div className="size-8 animate-pulse rounded-full bg-grey-200" />
|
|
14
|
+
<div className="flex flex-1 flex-col gap-2">
|
|
15
|
+
<div className="h-4 w-1/3 animate-pulse rounded bg-grey-200" />
|
|
16
|
+
<div className="h-3 w-1/4 animate-pulse rounded bg-grey-100" />
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
<div className="flex flex-col gap-2">
|
|
20
|
+
<div className="h-4 w-full animate-pulse rounded bg-grey-200" />
|
|
21
|
+
<div className="h-4 w-5/6 animate-pulse rounded bg-grey-200" />
|
|
22
|
+
<div className="h-4 w-2/3 animate-pulse rounded bg-grey-100" />
|
|
23
|
+
</div>
|
|
24
|
+
<div className="h-24 animate-pulse rounded-control bg-grey-100" />
|
|
25
|
+
</div>
|
|
26
|
+
);
|
|
27
|
+
|
|
28
|
+
/** Figma Search loading — 8 rows of icon + bar (no input/pills). */
|
|
29
|
+
const SearchSkeleton = () => {
|
|
30
|
+
const widths = [250, 300, 220, 255, 250, 300, 220, 255];
|
|
31
|
+
|
|
32
|
+
return (
|
|
33
|
+
<div className="flex flex-col gap-1.5 p-4" aria-hidden>
|
|
34
|
+
{widths.map((width, index) => (
|
|
35
|
+
<div key={index} className="flex items-start gap-2 py-2">
|
|
36
|
+
<div className="size-3 shrink-0 animate-pulse rounded-md bg-grey-200" />
|
|
37
|
+
<div
|
|
38
|
+
className="h-3 animate-pulse rounded-md bg-grey-200"
|
|
39
|
+
style={{ width }}
|
|
40
|
+
/>
|
|
41
|
+
</div>
|
|
42
|
+
))}
|
|
43
|
+
</div>
|
|
44
|
+
);
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
export const Skeleton = ({ variant = "content", className }: SkeletonProps) => (
|
|
48
|
+
<div
|
|
49
|
+
className={cn("rounded-control bg-background-primary", className)}
|
|
50
|
+
role="status"
|
|
51
|
+
aria-label="Loading"
|
|
52
|
+
data-variant={variant}
|
|
53
|
+
>
|
|
54
|
+
{variant === "content" ? <ContentSkeleton /> : <SearchSkeleton />}
|
|
55
|
+
</div>
|
|
56
|
+
);
|
|
@@ -1,92 +1,92 @@
|
|
|
1
|
-
export type ButtonHierarchy =
|
|
2
|
-
| "primary"
|
|
3
|
-
| "secondary"
|
|
4
|
-
| "tertiary"
|
|
5
|
-
| "quaternary"
|
|
6
|
-
| "destructive";
|
|
7
|
-
|
|
8
|
-
export type ButtonAppearance = "idle" | "hover" | "disabled";
|
|
9
|
-
|
|
10
|
-
type HierarchyStyleMap = Record<ButtonAppearance, string>;
|
|
11
|
-
|
|
12
|
-
const primaryStyles: HierarchyStyleMap = {
|
|
13
|
-
idle: "bg-action-primary-idle text-action-primary-on-idle",
|
|
14
|
-
hover: "bg-action-primary-hover text-action-primary-on-hover",
|
|
15
|
-
disabled: "bg-action-primary-disabled text-action-primary-on-disabled",
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
const secondaryStyles: HierarchyStyleMap = {
|
|
19
|
-
idle:
|
|
20
|
-
"border border-divider-primary bg-action-secondary-idle text-action-secondary-on-idle",
|
|
21
|
-
hover:
|
|
22
|
-
"border border-divider-secondary bg-action-secondary-hover text-action-secondary-on-hover",
|
|
23
|
-
disabled:
|
|
24
|
-
"border border-divider-primary bg-action-secondary-disabled text-action-secondary-on-disabled",
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
const tertiaryStyles: HierarchyStyleMap = {
|
|
28
|
-
idle: "bg-action-tertiary-idle text-action-tertiary-on-idle",
|
|
29
|
-
hover: "bg-action-tertiary-hover text-action-tertiary-on-hover",
|
|
30
|
-
disabled: "bg-action-tertiary-disabled text-action-tertiary-on-disabled",
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
const quaternaryStyles: HierarchyStyleMap = {
|
|
34
|
-
idle: "bg-action-quaternary-idle text-action-quaternary-on-idle",
|
|
35
|
-
hover: "bg-action-quaternary-hover text-action-quaternary-on-hover",
|
|
36
|
-
disabled: "bg-action-quaternary-disabled text-action-quaternary-on-disabled",
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
const destructiveStyles: HierarchyStyleMap = {
|
|
40
|
-
idle: "bg-action-destructive-idle text-action-destructive-on-idle",
|
|
41
|
-
hover: "bg-action-destructive-hover text-action-destructive-on-hover",
|
|
42
|
-
disabled:
|
|
43
|
-
"bg-action-destructive-disabled text-action-destructive-on-disabled",
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
const hierarchyStyles: Record<ButtonHierarchy, HierarchyStyleMap> = {
|
|
47
|
-
primary: primaryStyles,
|
|
48
|
-
secondary: secondaryStyles,
|
|
49
|
-
tertiary: tertiaryStyles,
|
|
50
|
-
quaternary: quaternaryStyles,
|
|
51
|
-
destructive: destructiveStyles,
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
const interactiveHierarchyStyles: Record<ButtonHierarchy, string> = {
|
|
55
|
-
primary:
|
|
56
|
-
"bg-action-primary-idle text-action-primary-on-idle hover:bg-action-primary-hover hover:text-action-primary-on-hover",
|
|
57
|
-
secondary:
|
|
58
|
-
"border border-divider-primary bg-action-secondary-idle text-action-secondary-on-idle hover:border-divider-secondary hover:bg-action-secondary-hover hover:text-action-secondary-on-hover",
|
|
59
|
-
tertiary:
|
|
60
|
-
"bg-action-tertiary-idle text-action-tertiary-on-idle hover:bg-action-tertiary-hover hover:text-action-tertiary-on-hover",
|
|
61
|
-
quaternary:
|
|
62
|
-
"bg-action-quaternary-idle text-action-quaternary-on-idle hover:bg-action-quaternary-hover hover:text-action-quaternary-on-hover",
|
|
63
|
-
destructive:
|
|
64
|
-
"bg-action-destructive-idle text-action-destructive-on-idle hover:bg-action-destructive-hover hover:text-action-destructive-on-hover",
|
|
65
|
-
};
|
|
66
|
-
|
|
67
|
-
const disabledHierarchyStyles: Record<ButtonHierarchy, string> = {
|
|
68
|
-
primary: "bg-action-primary-disabled text-action-primary-on-disabled",
|
|
69
|
-
secondary:
|
|
70
|
-
"border border-divider-primary bg-action-secondary-disabled text-action-secondary-on-disabled",
|
|
71
|
-
tertiary: "bg-action-tertiary-disabled text-action-tertiary-on-disabled",
|
|
72
|
-
quaternary:
|
|
73
|
-
"bg-action-quaternary-disabled text-action-quaternary-on-disabled",
|
|
74
|
-
destructive:
|
|
75
|
-
"bg-action-destructive-disabled text-action-destructive-on-disabled",
|
|
76
|
-
};
|
|
77
|
-
|
|
78
|
-
export const getButtonAppearanceClasses = (
|
|
79
|
-
hierarchy: ButtonHierarchy,
|
|
80
|
-
appearance: ButtonAppearance,
|
|
81
|
-
) => hierarchyStyles[hierarchy][appearance];
|
|
82
|
-
|
|
83
|
-
export const getButtonInteractiveClasses = (
|
|
84
|
-
hierarchy: ButtonHierarchy,
|
|
85
|
-
disabled: boolean,
|
|
86
|
-
) => {
|
|
87
|
-
if (disabled) {
|
|
88
|
-
return disabledHierarchyStyles[hierarchy];
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
return interactiveHierarchyStyles[hierarchy];
|
|
92
|
-
};
|
|
1
|
+
export type ButtonHierarchy =
|
|
2
|
+
| "primary"
|
|
3
|
+
| "secondary"
|
|
4
|
+
| "tertiary"
|
|
5
|
+
| "quaternary"
|
|
6
|
+
| "destructive";
|
|
7
|
+
|
|
8
|
+
export type ButtonAppearance = "idle" | "hover" | "disabled";
|
|
9
|
+
|
|
10
|
+
type HierarchyStyleMap = Record<ButtonAppearance, string>;
|
|
11
|
+
|
|
12
|
+
const primaryStyles: HierarchyStyleMap = {
|
|
13
|
+
idle: "bg-action-primary-idle text-action-primary-on-idle",
|
|
14
|
+
hover: "bg-action-primary-hover text-action-primary-on-hover",
|
|
15
|
+
disabled: "bg-action-primary-disabled text-action-primary-on-disabled",
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
const secondaryStyles: HierarchyStyleMap = {
|
|
19
|
+
idle:
|
|
20
|
+
"border border-divider-primary bg-action-secondary-idle text-action-secondary-on-idle",
|
|
21
|
+
hover:
|
|
22
|
+
"border border-divider-secondary bg-action-secondary-hover text-action-secondary-on-hover",
|
|
23
|
+
disabled:
|
|
24
|
+
"border border-divider-primary bg-action-secondary-disabled text-action-secondary-on-disabled",
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
const tertiaryStyles: HierarchyStyleMap = {
|
|
28
|
+
idle: "bg-action-tertiary-idle text-action-tertiary-on-idle",
|
|
29
|
+
hover: "bg-action-tertiary-hover text-action-tertiary-on-hover",
|
|
30
|
+
disabled: "bg-action-tertiary-disabled text-action-tertiary-on-disabled",
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
const quaternaryStyles: HierarchyStyleMap = {
|
|
34
|
+
idle: "bg-action-quaternary-idle text-action-quaternary-on-idle",
|
|
35
|
+
hover: "bg-action-quaternary-hover text-action-quaternary-on-hover",
|
|
36
|
+
disabled: "bg-action-quaternary-disabled text-action-quaternary-on-disabled",
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
const destructiveStyles: HierarchyStyleMap = {
|
|
40
|
+
idle: "bg-action-destructive-idle text-action-destructive-on-idle",
|
|
41
|
+
hover: "bg-action-destructive-hover text-action-destructive-on-hover",
|
|
42
|
+
disabled:
|
|
43
|
+
"bg-action-destructive-disabled text-action-destructive-on-disabled",
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
const hierarchyStyles: Record<ButtonHierarchy, HierarchyStyleMap> = {
|
|
47
|
+
primary: primaryStyles,
|
|
48
|
+
secondary: secondaryStyles,
|
|
49
|
+
tertiary: tertiaryStyles,
|
|
50
|
+
quaternary: quaternaryStyles,
|
|
51
|
+
destructive: destructiveStyles,
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
const interactiveHierarchyStyles: Record<ButtonHierarchy, string> = {
|
|
55
|
+
primary:
|
|
56
|
+
"bg-action-primary-idle text-action-primary-on-idle hover:bg-action-primary-hover hover:text-action-primary-on-hover",
|
|
57
|
+
secondary:
|
|
58
|
+
"border border-divider-primary bg-action-secondary-idle text-action-secondary-on-idle hover:border-divider-secondary hover:bg-action-secondary-hover hover:text-action-secondary-on-hover",
|
|
59
|
+
tertiary:
|
|
60
|
+
"bg-action-tertiary-idle text-action-tertiary-on-idle hover:bg-action-tertiary-hover hover:text-action-tertiary-on-hover",
|
|
61
|
+
quaternary:
|
|
62
|
+
"bg-action-quaternary-idle text-action-quaternary-on-idle hover:bg-action-quaternary-hover hover:text-action-quaternary-on-hover",
|
|
63
|
+
destructive:
|
|
64
|
+
"bg-action-destructive-idle text-action-destructive-on-idle hover:bg-action-destructive-hover hover:text-action-destructive-on-hover",
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
const disabledHierarchyStyles: Record<ButtonHierarchy, string> = {
|
|
68
|
+
primary: "bg-action-primary-disabled text-action-primary-on-disabled",
|
|
69
|
+
secondary:
|
|
70
|
+
"border border-divider-primary bg-action-secondary-disabled text-action-secondary-on-disabled",
|
|
71
|
+
tertiary: "bg-action-tertiary-disabled text-action-tertiary-on-disabled",
|
|
72
|
+
quaternary:
|
|
73
|
+
"bg-action-quaternary-disabled text-action-quaternary-on-disabled",
|
|
74
|
+
destructive:
|
|
75
|
+
"bg-action-destructive-disabled text-action-destructive-on-disabled",
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
export const getButtonAppearanceClasses = (
|
|
79
|
+
hierarchy: ButtonHierarchy,
|
|
80
|
+
appearance: ButtonAppearance,
|
|
81
|
+
) => hierarchyStyles[hierarchy][appearance];
|
|
82
|
+
|
|
83
|
+
export const getButtonInteractiveClasses = (
|
|
84
|
+
hierarchy: ButtonHierarchy,
|
|
85
|
+
disabled: boolean,
|
|
86
|
+
) => {
|
|
87
|
+
if (disabled) {
|
|
88
|
+
return disabledHierarchyStyles[hierarchy];
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
return interactiveHierarchyStyles[hierarchy];
|
|
92
|
+
};
|