venice-ui 3.0.62 → 3.1.2

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 (10) hide show
  1. package/dist/cjs/config/config.js +36 -33
  2. package/dist/cjs/config/themes.js +60 -0
  3. package/dist/cjs/example/Colors.js +109 -13
  4. package/dist/esm/config/config.js +36 -33
  5. package/dist/esm/config/themes.js +60 -0
  6. package/dist/esm/example/Colors.js +76 -13
  7. package/dist/types/config/config.d.ts +747 -747
  8. package/dist/types/config/themes.d.ts +60 -0
  9. package/dist/types/hooks/useOutsideClick.d.ts +1 -1
  10. package/package.json +7 -7
package/dist/cjs/config/config.js CHANGED
@@ -4,47 +4,50 @@ exports.createConfig = exports.componentsConfig = exports.Theme = exports.create
4
4
  const themes_1 = require("./themes");
5
5
  const resolveTheme = (theme = 'default') => typeof theme === 'string' ? themes_1.themes[theme] : theme;
6
6
  const createTheme = (theme = 'default') => {
7
- const p = resolveTheme(theme).primitive;
7
+ const resolvedTheme = resolveTheme(theme);
8
+ const p = resolvedTheme.primitive;
9
+ const mode = resolvedTheme.mode ?? 'light';
10
+ const isDark = mode === 'dark';
8
11
  return {
9
12
  text: {
10
- primary: p.neutral[900],
11
- secondary: p.neutral[600],
12
- tertiary: p.neutral[500],
13
- placeholder: p.neutral[400],
14
- disabled: p.neutral[400],
15
- inverse: p.neutral[0],
16
- link: p.primary[600],
13
+ primary: isDark ? p.neutral[0] : p.neutral[900],
14
+ secondary: isDark ? p.neutral[100] : p.neutral[600],
15
+ tertiary: isDark ? p.neutral[300] : p.neutral[500],
16
+ placeholder: isDark ? p.neutral[400] : p.neutral[400],
17
+ disabled: isDark ? p.neutral[500] : p.neutral[400],
18
+ inverse: isDark ? p.neutral[900] : p.neutral[0],
19
+ link: isDark ? p.primary[300] : p.primary[600],
17
20
  error: p.error[600],
18
21
  success: p.success[600],
19
22
  },
20
23
  surface: {
21
- page: p.neutral[50],
22
- default: p.neutral[0],
23
- subtle: p.neutral[50],
24
- tertiary: p.neutral[100],
25
- selected: p.primary[50],
26
- disabled: p.neutral[100],
27
- danger: p.error[500],
28
- hover: p.primary[50],
24
+ page: isDark ? p.neutral[900] : p.neutral[50],
25
+ default: isDark ? p.neutral[800] : p.neutral[0],
26
+ subtle: isDark ? p.neutral[700] : p.neutral[50],
27
+ tertiary: isDark ? p.neutral[700] : p.neutral[100],
28
+ selected: isDark ? p.primary[900] : p.primary[50],
29
+ disabled: isDark ? p.neutral[800] : p.neutral[100],
30
+ danger: isDark ? 'rgba(239, 68, 68, 0.18)' : p.error[500],
31
+ hover: isDark ? 'rgba(124, 58, 237, 0.14)' : p.primary[50],
29
32
  },
30
33
  border: {
31
- default: p.neutral[200],
32
- strong: p.neutral[300],
33
- hover: p.neutral[300],
34
- focus: p.primary[500],
35
- disabled: p.neutral[200],
36
- error: p.error[300],
34
+ default: isDark ? p.neutral[700] : p.neutral[200],
35
+ strong: isDark ? p.neutral[600] : p.neutral[300],
36
+ hover: isDark ? p.neutral[500] : p.neutral[300],
37
+ focus: isDark ? p.primary[400] : p.primary[500],
38
+ disabled: isDark ? p.neutral[700] : p.neutral[200],
39
+ error: isDark ? p.error[200] : p.error[300],
37
40
  success: p.success[600],
38
41
  },
39
42
  action: {
40
43
  primary: {
41
- default: p.primary[500],
42
- hover: p.primary[600],
43
- active: p.primary[700],
44
- subtitle: p.primary[100],
45
- disabledText: p.primary[400],
46
- selected: p.primary[200],
47
- selectedHover: p.primary[300],
44
+ default: isDark ? p.primary[300] : p.primary[500],
45
+ hover: isDark ? p.primary[200] : p.primary[600],
46
+ active: isDark ? p.primary[100] : p.primary[700],
47
+ subtitle: isDark ? p.primary[900] : p.primary[100],
48
+ disabledText: isDark ? p.primary[500] : p.primary[400],
49
+ selected: isDark ? p.primary[800] : p.primary[200],
50
+ selectedHover: isDark ? p.primary[700] : p.primary[300],
48
51
  },
49
52
  danger: {
50
53
  default: p.error[500],
@@ -88,7 +91,7 @@ const createTheme = (theme = 'default') => {
88
91
  },
89
92
  },
90
93
  focus: {
91
- ringPrimary: 'rgba(59, 144, 203, 0.22)',
94
+ ringPrimary: isDark ? 'rgba(124, 58, 237, 0.32)' : 'rgba(59, 144, 203, 0.22)',
92
95
  },
93
96
  shadow: {
94
97
  toggleThumb: '0 1px 2px rgba(0,0,0,0.10),0 1px 3px rgba(0,0,0,0.06)',
@@ -98,14 +101,14 @@ const createTheme = (theme = 'default') => {
98
101
  tooltip: '0 4px 12px rgba(0,0,0,.15)',
99
102
  },
100
103
  divider: {
101
- default: 'rgba(17,24,39,0.06)',
104
+ default: isDark ? 'rgba(226,232,240,0.12)' : 'rgba(17,24,39,0.06)',
102
105
  },
103
106
  overlayer: {
104
- default: 'rgba(0,0,0,0.5)',
107
+ default: isDark ? 'rgba(2, 6, 23, 0.72)' : 'rgba(0,0,0,0.5)',
105
108
  },
106
109
  other: {
107
110
  transparent: 'transparent',
108
- almostBlack: p.neutral[800],
111
+ almostBlack: isDark ? p.neutral[0] : p.neutral[800],
109
112
  },
110
113
  };
111
114
  };
package/dist/cjs/config/themes.js CHANGED
@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.defaultTheme = exports.themes = void 0;
4
4
  exports.themes = {
5
5
  default: {
6
+ mode: 'light',
6
7
  primitive: {
7
8
  primary: {
8
9
  50: '#F2F8FD',
@@ -60,5 +61,64 @@ exports.themes = {
60
61
  },
61
62
  },
62
63
  },
64
+ midnightViolet: {
65
+ mode: 'dark',
66
+ primitive: {
67
+ primary: {
68
+ 50: '#F4F0FF',
69
+ 100: '#E9DDFF',
70
+ 200: '#D3BCFF',
71
+ 300: '#B794FF',
72
+ 400: '#9B6CFF',
73
+ 500: '#7C3AED',
74
+ 600: '#6D28D9',
75
+ 700: '#5B21B6',
76
+ 800: '#4C1D95',
77
+ 900: '#2E1065',
78
+ },
79
+ neutral: {
80
+ 0: '#FFFFFF',
81
+ 50: '#F8FAFC',
82
+ 100: '#E2E8F0',
83
+ 200: '#CBD5E1',
84
+ 300: '#94A3B8',
85
+ 400: '#64748B',
86
+ 500: '#475569',
87
+ 600: '#334155',
88
+ 700: '#1E293B',
89
+ 800: '#0F172A',
90
+ 900: '#020617',
91
+ },
92
+ error: {
93
+ 50: '#FEF2F2',
94
+ 100: '#FEE2E2',
95
+ 200: '#FECACA',
96
+ 300: '#FCA5A5',
97
+ 500: '#EF4444',
98
+ 600: '#DC2626',
99
+ },
100
+ info: {
101
+ 50: '#EFF6FF',
102
+ 100: '#DBEAFE',
103
+ 200: '#BFDBFE',
104
+ 500: '#3B82F6',
105
+ 600: '#2563EB',
106
+ },
107
+ warning: {
108
+ 50: '#FFFBEB',
109
+ 100: '#FEF3C7',
110
+ 200: '#FDE68A',
111
+ 500: '#F59E0B',
112
+ 600: '#D97706',
113
+ },
114
+ success: {
115
+ 50: '#ECFDF5',
116
+ 100: '#D1FAE5',
117
+ 200: '#A7F3D0',
118
+ 500: '#10B981',
119
+ 600: '#059669',
120
+ },
121
+ },
122
+ },
63
123
  };
64
124
  exports.defaultTheme = exports.themes.default;
package/dist/cjs/example/Colors.js CHANGED
@@ -1,24 +1,99 @@
1
1
  "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
2
35
  var __importDefault = (this && this.__importDefault) || function (mod) {
3
36
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
37
  };
5
38
  Object.defineProperty(exports, "__esModule", { value: true });
6
39
  exports.Colors = void 0;
7
- const react_1 = __importDefault(require("react"));
40
+ const react_1 = __importStar(require("react"));
8
41
  const styled_components_1 = __importDefault(require("styled-components"));
9
42
  const themes_1 = require("../config/themes");
10
- const palette = themes_1.themes.default.primitive;
43
+ const themeNames = Object.keys(themes_1.themes);
44
+ const allThemesValue = '__all__';
11
45
  const Wrapper = styled_components_1.default.div `
12
46
  display: flex;
13
47
  flex-direction: column;
14
- gap: 40px;
48
+ gap: 24px;
49
+ `;
50
+ const Controls = styled_components_1.default.div `
51
+ display: flex;
52
+ flex-wrap: wrap;
53
+ gap: 12px;
54
+ align-items: center;
55
+ `;
56
+ const Select = styled_components_1.default.select `
57
+ min-width: 240px;
58
+ height: 40px;
59
+ border-radius: 8px;
60
+ border: 1px solid #d1d5db;
61
+ padding: 0 12px;
62
+ background: #ffffff;
63
+ color: #111827;
64
+ `;
65
+ const ThemeCard = styled_components_1.default.section `
66
+ display: flex;
67
+ flex-direction: column;
68
+ gap: 16px;
69
+ padding: 20px;
70
+ border: 1px solid #e5e7eb;
71
+ border-radius: 12px;
72
+ background: #ffffff;
73
+ `;
74
+ const ThemeHeader = styled_components_1.default.div `
75
+ display: flex;
76
+ align-items: baseline;
77
+ justify-content: space-between;
78
+ gap: 12px;
79
+ `;
80
+ const ThemeTitle = styled_components_1.default.h3 `
81
+ margin: 0;
82
+ font-size: 18px;
83
+ font-weight: 700;
84
+ text-transform: capitalize;
85
+ color: #111827;
86
+ `;
87
+ const ThemeMeta = styled_components_1.default.div `
88
+ font-size: 13px;
89
+ color: #6b7280;
15
90
  `;
16
91
  const Section = styled_components_1.default.div `
17
92
  display: flex;
18
93
  flex-direction: column;
19
94
  gap: 12px;
20
95
  `;
21
- const SectionTitle = styled_components_1.default.h3 `
96
+ const SectionTitle = styled_components_1.default.h4 `
22
97
  margin: 0;
23
98
  font-size: 16px;
24
99
  font-weight: 600;
@@ -54,14 +129,35 @@ const SwatchHex = styled_components_1.default.div `
54
129
  font-family: monospace;
55
130
  `;
56
131
  const Colors = () => {
57
- return (react_1.default.createElement(Wrapper, null, Object.entries(palette).map(([groupName, shades]) => (react_1.default.createElement(Section, { key: groupName },
58
- react_1.default.createElement(SectionTitle, null, groupName),
59
- react_1.default.createElement(SwatchRow, null, Object.entries(shades).map(([shade, hex]) => (react_1.default.createElement(SwatchCard, { key: shade },
60
- react_1.default.createElement(SwatchBox, { color: hex }),
61
- react_1.default.createElement(SwatchLabel, null,
62
- groupName,
63
- ".",
64
- shade),
65
- react_1.default.createElement(SwatchHex, null, hex))))))))));
132
+ const [selectedTheme, setSelectedTheme] = (0, react_1.useState)(themeNames[0] ?? 'default');
133
+ const visibleThemes = (0, react_1.useMemo)(() => {
134
+ if (selectedTheme === allThemesValue) {
135
+ return themeNames;
136
+ }
137
+ return [selectedTheme];
138
+ }, [selectedTheme]);
139
+ return (react_1.default.createElement(Wrapper, null,
140
+ react_1.default.createElement(Controls, null,
141
+ react_1.default.createElement(Select, { value: selectedTheme, onChange: (event) => setSelectedTheme(event.target.value) },
142
+ themeNames.map((themeName) => (react_1.default.createElement("option", { key: themeName, value: themeName }, themeName))),
143
+ react_1.default.createElement("option", { value: allThemesValue }, "Wszystkie motywy"))),
144
+ visibleThemes.map((themeName) => {
145
+ const palette = themes_1.themes[themeName].primitive;
146
+ return (react_1.default.createElement(ThemeCard, { key: themeName },
147
+ react_1.default.createElement(ThemeHeader, null,
148
+ react_1.default.createElement(ThemeTitle, null, themeName),
149
+ react_1.default.createElement(ThemeMeta, null,
150
+ Object.keys(palette).length,
151
+ " grup kolor\u00F3w")),
152
+ Object.entries(palette).map(([groupName, shades]) => (react_1.default.createElement(Section, { key: groupName },
153
+ react_1.default.createElement(SectionTitle, null, groupName),
154
+ react_1.default.createElement(SwatchRow, null, Object.entries(shades).map(([shade, hex]) => (react_1.default.createElement(SwatchCard, { key: shade },
155
+ react_1.default.createElement(SwatchBox, { color: hex }),
156
+ react_1.default.createElement(SwatchLabel, null,
157
+ groupName,
158
+ ".",
159
+ shade),
160
+ react_1.default.createElement(SwatchHex, null, hex))))))))));
161
+ })));
66
162
  };
67
163
  exports.Colors = Colors;
package/dist/esm/config/config.js CHANGED
@@ -1,47 +1,50 @@
1
1
  import { themes } from './themes';
2
2
  const resolveTheme = (theme = 'default') => typeof theme === 'string' ? themes[theme] : theme;
3
3
  export const createTheme = (theme = 'default') => {
4
- const p = resolveTheme(theme).primitive;
4
+ const resolvedTheme = resolveTheme(theme);
5
+ const p = resolvedTheme.primitive;
6
+ const mode = resolvedTheme.mode ?? 'light';
7
+ const isDark = mode === 'dark';
5
8
  return {
6
9
  text: {
7
- primary: p.neutral[900],
8
- secondary: p.neutral[600],
9
- tertiary: p.neutral[500],
10
- placeholder: p.neutral[400],
11
- disabled: p.neutral[400],
12
- inverse: p.neutral[0],
13
- link: p.primary[600],
10
+ primary: isDark ? p.neutral[0] : p.neutral[900],
11
+ secondary: isDark ? p.neutral[100] : p.neutral[600],
12
+ tertiary: isDark ? p.neutral[300] : p.neutral[500],
13
+ placeholder: isDark ? p.neutral[400] : p.neutral[400],
14
+ disabled: isDark ? p.neutral[500] : p.neutral[400],
15
+ inverse: isDark ? p.neutral[900] : p.neutral[0],
16
+ link: isDark ? p.primary[300] : p.primary[600],
14
17
  error: p.error[600],
15
18
  success: p.success[600],
16
19
  },
17
20
  surface: {
18
- page: p.neutral[50],
19
- default: p.neutral[0],
20
- subtle: p.neutral[50],
21
- tertiary: p.neutral[100],
22
- selected: p.primary[50],
23
- disabled: p.neutral[100],
24
- danger: p.error[500],
25
- hover: p.primary[50],
21
+ page: isDark ? p.neutral[900] : p.neutral[50],
22
+ default: isDark ? p.neutral[800] : p.neutral[0],
23
+ subtle: isDark ? p.neutral[700] : p.neutral[50],
24
+ tertiary: isDark ? p.neutral[700] : p.neutral[100],
25
+ selected: isDark ? p.primary[900] : p.primary[50],
26
+ disabled: isDark ? p.neutral[800] : p.neutral[100],
27
+ danger: isDark ? 'rgba(239, 68, 68, 0.18)' : p.error[500],
28
+ hover: isDark ? 'rgba(124, 58, 237, 0.14)' : p.primary[50],
26
29
  },
27
30
  border: {
28
- default: p.neutral[200],
29
- strong: p.neutral[300],
30
- hover: p.neutral[300],
31
- focus: p.primary[500],
32
- disabled: p.neutral[200],
33
- error: p.error[300],
31
+ default: isDark ? p.neutral[700] : p.neutral[200],
32
+ strong: isDark ? p.neutral[600] : p.neutral[300],
33
+ hover: isDark ? p.neutral[500] : p.neutral[300],
34
+ focus: isDark ? p.primary[400] : p.primary[500],
35
+ disabled: isDark ? p.neutral[700] : p.neutral[200],
36
+ error: isDark ? p.error[200] : p.error[300],
34
37
  success: p.success[600],
35
38
  },
36
39
  action: {
37
40
  primary: {
38
- default: p.primary[500],
39
- hover: p.primary[600],
40
- active: p.primary[700],
41
- subtitle: p.primary[100],
42
- disabledText: p.primary[400],
43
- selected: p.primary[200],
44
- selectedHover: p.primary[300],
41
+ default: isDark ? p.primary[300] : p.primary[500],
42
+ hover: isDark ? p.primary[200] : p.primary[600],
43
+ active: isDark ? p.primary[100] : p.primary[700],
44
+ subtitle: isDark ? p.primary[900] : p.primary[100],
45
+ disabledText: isDark ? p.primary[500] : p.primary[400],
46
+ selected: isDark ? p.primary[800] : p.primary[200],
47
+ selectedHover: isDark ? p.primary[700] : p.primary[300],
45
48
  },
46
49
  danger: {
47
50
  default: p.error[500],
@@ -85,7 +88,7 @@ export const createTheme = (theme = 'default') => {
85
88
  },
86
89
  },
87
90
  focus: {
88
- ringPrimary: 'rgba(59, 144, 203, 0.22)',
91
+ ringPrimary: isDark ? 'rgba(124, 58, 237, 0.32)' : 'rgba(59, 144, 203, 0.22)',
89
92
  },
90
93
  shadow: {
91
94
  toggleThumb: '0 1px 2px rgba(0,0,0,0.10),0 1px 3px rgba(0,0,0,0.06)',
@@ -95,14 +98,14 @@ export const createTheme = (theme = 'default') => {
95
98
  tooltip: '0 4px 12px rgba(0,0,0,.15)',
96
99
  },
97
100
  divider: {
98
- default: 'rgba(17,24,39,0.06)',
101
+ default: isDark ? 'rgba(226,232,240,0.12)' : 'rgba(17,24,39,0.06)',
99
102
  },
100
103
  overlayer: {
101
- default: 'rgba(0,0,0,0.5)',
104
+ default: isDark ? 'rgba(2, 6, 23, 0.72)' : 'rgba(0,0,0,0.5)',
102
105
  },
103
106
  other: {
104
107
  transparent: 'transparent',
105
- almostBlack: p.neutral[800],
108
+ almostBlack: isDark ? p.neutral[0] : p.neutral[800],
106
109
  },
107
110
  };
108
111
  };
package/dist/esm/config/themes.js CHANGED
@@ -1,5 +1,6 @@
1
1
  export const themes = {
2
2
  default: {
3
+ mode: 'light',
3
4
  primitive: {
4
5
  primary: {
5
6
  50: '#F2F8FD',
@@ -57,5 +58,64 @@ export const themes = {
57
58
  },
58
59
  },
59
60
  },
61
+ midnightViolet: {
62
+ mode: 'dark',
63
+ primitive: {
64
+ primary: {
65
+ 50: '#F4F0FF',
66
+ 100: '#E9DDFF',
67
+ 200: '#D3BCFF',
68
+ 300: '#B794FF',
69
+ 400: '#9B6CFF',
70
+ 500: '#7C3AED',
71
+ 600: '#6D28D9',
72
+ 700: '#5B21B6',
73
+ 800: '#4C1D95',
74
+ 900: '#2E1065',
75
+ },
76
+ neutral: {
77
+ 0: '#FFFFFF',
78
+ 50: '#F8FAFC',
79
+ 100: '#E2E8F0',
80
+ 200: '#CBD5E1',
81
+ 300: '#94A3B8',
82
+ 400: '#64748B',
83
+ 500: '#475569',
84
+ 600: '#334155',
85
+ 700: '#1E293B',
86
+ 800: '#0F172A',
87
+ 900: '#020617',
88
+ },
89
+ error: {
90
+ 50: '#FEF2F2',
91
+ 100: '#FEE2E2',
92
+ 200: '#FECACA',
93
+ 300: '#FCA5A5',
94
+ 500: '#EF4444',
95
+ 600: '#DC2626',
96
+ },
97
+ info: {
98
+ 50: '#EFF6FF',
99
+ 100: '#DBEAFE',
100
+ 200: '#BFDBFE',
101
+ 500: '#3B82F6',
102
+ 600: '#2563EB',
103
+ },
104
+ warning: {
105
+ 50: '#FFFBEB',
106
+ 100: '#FEF3C7',
107
+ 200: '#FDE68A',
108
+ 500: '#F59E0B',
109
+ 600: '#D97706',
110
+ },
111
+ success: {
112
+ 50: '#ECFDF5',
113
+ 100: '#D1FAE5',
114
+ 200: '#A7F3D0',
115
+ 500: '#10B981',
116
+ 600: '#059669',
117
+ },
118
+ },
119
+ },
60
120
  };
61
121
  export const defaultTheme = themes.default;
package/dist/esm/example/Colors.js CHANGED
@@ -1,18 +1,60 @@
1
- import React from 'react';
1
+ import React, { useMemo, useState } from 'react';
2
2
  import styled from 'styled-components';
3
3
  import { themes } from '../config/themes';
4
- const palette = themes.default.primitive;
4
+ const themeNames = Object.keys(themes);
5
+ const allThemesValue = '__all__';
5
6
  const Wrapper = styled.div `
6
7
  display: flex;
7
8
  flex-direction: column;
8
- gap: 40px;
9
+ gap: 24px;
10
+ `;
11
+ const Controls = styled.div `
12
+ display: flex;
13
+ flex-wrap: wrap;
14
+ gap: 12px;
15
+ align-items: center;
16
+ `;
17
+ const Select = styled.select `
18
+ min-width: 240px;
19
+ height: 40px;
20
+ border-radius: 8px;
21
+ border: 1px solid #d1d5db;
22
+ padding: 0 12px;
23
+ background: #ffffff;
24
+ color: #111827;
25
+ `;
26
+ const ThemeCard = styled.section `
27
+ display: flex;
28
+ flex-direction: column;
29
+ gap: 16px;
30
+ padding: 20px;
31
+ border: 1px solid #e5e7eb;
32
+ border-radius: 12px;
33
+ background: #ffffff;
34
+ `;
35
+ const ThemeHeader = styled.div `
36
+ display: flex;
37
+ align-items: baseline;
38
+ justify-content: space-between;
39
+ gap: 12px;
40
+ `;
41
+ const ThemeTitle = styled.h3 `
42
+ margin: 0;
43
+ font-size: 18px;
44
+ font-weight: 700;
45
+ text-transform: capitalize;
46
+ color: #111827;
47
+ `;
48
+ const ThemeMeta = styled.div `
49
+ font-size: 13px;
50
+ color: #6b7280;
9
51
  `;
10
52
  const Section = styled.div `
11
53
  display: flex;
12
54
  flex-direction: column;
13
55
  gap: 12px;
14
56
  `;
15
- const SectionTitle = styled.h3 `
57
+ const SectionTitle = styled.h4 `
16
58
  margin: 0;
17
59
  font-size: 16px;
18
60
  font-weight: 600;
@@ -48,13 +90,34 @@ const SwatchHex = styled.div `
48
90
  font-family: monospace;
49
91
  `;
50
92
  export const Colors = () => {
51
- return (React.createElement(Wrapper, null, Object.entries(palette).map(([groupName, shades]) => (React.createElement(Section, { key: groupName },
52
- React.createElement(SectionTitle, null, groupName),
53
- React.createElement(SwatchRow, null, Object.entries(shades).map(([shade, hex]) => (React.createElement(SwatchCard, { key: shade },
54
- React.createElement(SwatchBox, { color: hex }),
55
- React.createElement(SwatchLabel, null,
56
- groupName,
57
- ".",
58
- shade),
59
- React.createElement(SwatchHex, null, hex))))))))));
93
+ const [selectedTheme, setSelectedTheme] = useState(themeNames[0] ?? 'default');
94
+ const visibleThemes = useMemo(() => {
95
+ if (selectedTheme === allThemesValue) {
96
+ return themeNames;
97
+ }
98
+ return [selectedTheme];
99
+ }, [selectedTheme]);
100
+ return (React.createElement(Wrapper, null,
101
+ React.createElement(Controls, null,
102
+ React.createElement(Select, { value: selectedTheme, onChange: (event) => setSelectedTheme(event.target.value) },
103
+ themeNames.map((themeName) => (React.createElement("option", { key: themeName, value: themeName }, themeName))),
104
+ React.createElement("option", { value: allThemesValue }, "Wszystkie motywy"))),
105
+ visibleThemes.map((themeName) => {
106
+ const palette = themes[themeName].primitive;
107
+ return (React.createElement(ThemeCard, { key: themeName },
108
+ React.createElement(ThemeHeader, null,
109
+ React.createElement(ThemeTitle, null, themeName),
110
+ React.createElement(ThemeMeta, null,
111
+ Object.keys(palette).length,
112
+ " grup kolor\u00F3w")),
113
+ Object.entries(palette).map(([groupName, shades]) => (React.createElement(Section, { key: groupName },
114
+ React.createElement(SectionTitle, null, groupName),
115
+ React.createElement(SwatchRow, null, Object.entries(shades).map(([shade, hex]) => (React.createElement(SwatchCard, { key: shade },
116
+ React.createElement(SwatchBox, { color: hex }),
117
+ React.createElement(SwatchLabel, null,
118
+ groupName,
119
+ ".",
120
+ shade),
121
+ React.createElement(SwatchHex, null, hex))))))))));
122
+ })));
60
123
  };