@fragment-build/ui 3.0.4 → 3.0.11

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 (49) hide show
  1. package/.storybook/style.css +3 -0
  2. package/README.md +6 -7
  3. package/components/grid/Grid.js +1 -0
  4. package/components/grid/Grid.js.map +1 -1
  5. package/components/grid/grid.css +17 -0
  6. package/components/multi-switch/MultiSwitch.js +1 -0
  7. package/components/multi-switch/MultiSwitch.js.map +1 -1
  8. package/components/multi-switch/multi-switch.css +24 -0
  9. package/components/theme-switch/ThemeSwitch.js +1 -0
  10. package/components/theme-switch/ThemeSwitch.js.map +1 -1
  11. package/fragments/form/Form.js +1 -0
  12. package/fragments/form/Form.js.map +1 -1
  13. package/fragments/form/FormSection.js +1 -0
  14. package/fragments/form/FormSection.js.map +1 -1
  15. package/fragments/form/form-section.css +41 -0
  16. package/fragments/form/form.css +5 -0
  17. package/fragments/navbar/Navbar.js +1 -0
  18. package/fragments/navbar/Navbar.js.map +1 -1
  19. package/fragments/navbar/navbar.css +25 -0
  20. package/fragments/page/PageHeader.js +1 -0
  21. package/fragments/page/PageHeader.js.map +1 -1
  22. package/fragments/page/page-header.css +13 -0
  23. package/fragments/shell/Shell.js +1 -0
  24. package/fragments/shell/Shell.js.map +1 -1
  25. package/fragments/shell/shell.css +22 -0
  26. package/fragments/sidebar/Sidebar.js +1 -0
  27. package/fragments/sidebar/Sidebar.js.map +1 -1
  28. package/fragments/sidebar/SidebarNavigation.js +1 -0
  29. package/fragments/sidebar/SidebarNavigation.js.map +1 -1
  30. package/fragments/sidebar/sidebar.css +205 -0
  31. package/fragments/widget/Widget.js +1 -0
  32. package/fragments/widget/Widget.js.map +1 -1
  33. package/fragments/widget/widget.css +29 -0
  34. package/index.css +113 -0
  35. package/package.json +11 -8
  36. package/provider.js +1 -0
  37. package/provider.js.map +1 -1
  38. package/src/components/grid/grid.css +17 -0
  39. package/src/components/multi-switch/multi-switch.css +24 -0
  40. package/src/fragments/form/form-section.css +41 -0
  41. package/src/fragments/form/form.css +5 -0
  42. package/src/fragments/navbar/navbar.css +25 -0
  43. package/src/fragments/page/page-header.css +13 -0
  44. package/src/fragments/shell/shell.css +22 -0
  45. package/src/fragments/sidebar/sidebar.css +205 -0
  46. package/src/fragments/widget/widget.css +29 -0
  47. package/src/index.css +113 -0
  48. package/src/theme.example.css +96 -0
  49. package/theme.example.css +96 -0
package/src/theme.example.css ADDED
@@ -0,0 +1,96 @@
1
+ /*
2
+ * HeroUI Theme Customization
3
+ * Add this to your global.css after importing @heroui/styles
4
+ * Only includes base variables from variables.css
5
+ * @see https://v3.heroui.com/docs/react/getting-started/theming
6
+ */
7
+
8
+ :root,
9
+ .light,
10
+ .default,
11
+ [data-theme="light"],
12
+ [data-theme="default"] {
13
+ /* Theme Colors (Light Mode) */
14
+ --accent: #F56460;
15
+ --accent-foreground: #FCFAF6;
16
+ --background: #FCFAF6;
17
+ --border: #E8E8E8;
18
+
19
+ --scrollbar: #FCFAF6;
20
+ --separator: #E8E8E8;
21
+
22
+ --default: rgba(0, 0, 0, 0.02);
23
+ --default-foreground: rgba(0, 0, 0, 0.9);
24
+
25
+ --field-background: #fff;
26
+ --field-foreground: rgba(0, 0, 0, 0.9);
27
+ --field-placeholder: rgba(0, 0, 0, 0.5);
28
+
29
+ --focus: oklch(90.00% 0.0084 24.57);
30
+ --foreground: rgba(0, 0, 0, 0.9);
31
+ --muted: oklch(55.17% 0.0168 24.57);
32
+
33
+ --overlay: oklch(100.00% 0.0025 24.57);
34
+ --overlay-foreground: oklch(21.03% 0.0084 24.57);
35
+
36
+ --segment: rgba(0, 0, 0, 0.9);
37
+ --segment-foreground: #FCFAF6;
38
+
39
+ --surface: #fff;
40
+ --surface-foreground: rgba(0, 0, 0, 0.9);
41
+ --surface-secondary: rgba(0, 0, 0, 0.02);
42
+ --surface-secondary-foreground: rgba(0, 0, 0, 0.9);
43
+ --surface-tertiary: rgba(0, 0, 0, 0.9);
44
+ --surface-tertiary-foreground: #FCFAF6;
45
+
46
+ --success: oklch(73.29% 0.1968 123.30);
47
+ --success-foreground: rgba(0, 0, 0, 0.9);
48
+ --warning: oklch(78.19% 0.1612 44.82);
49
+ --warning-foreground: rgba(0, 0, 0, 0.9);
50
+ --danger: #cf383f;
51
+ --danger-foreground: #FCFAF6;
52
+
53
+ /* Border Radius */
54
+ --radius: 0.5rem;
55
+ --field-radius: 1rem;
56
+
57
+ /* Font Family */
58
+ /* Make sure to load Inter font in your app */
59
+ --font-sans: var(--font-inter);
60
+ }
61
+
62
+ .dark,
63
+ [data-theme="dark"] {
64
+ color-scheme: dark;
65
+ /* Theme Colors (Dark Mode) */
66
+ --accent: oklch(68.60% 0.1794 24.57);
67
+ --accent-foreground: oklch(15% 0.0300 24.57);
68
+ --background: oklch(12.00% 0.0000 24.57);
69
+ --border: oklch(28.00% 0.0000 24.57);
70
+ --danger: oklch(59.40% 0.1967 357.12);
71
+ --danger-foreground: oklch(99.11% 0 0);
72
+ --default: oklch(27.40% 0.0000 24.57);
73
+ --default-foreground: oklch(99.11% 0 0);
74
+ --field-background: oklch(21.03% 0.0000 24.57);
75
+ --field-foreground: oklch(99.11% 0.0000 24.57);
76
+ --field-placeholder: oklch(70.50% 0.0000 24.57);
77
+ --focus: oklch(68.60% 0.1794 24.57);
78
+ --foreground: oklch(99.11% 0.0000 24.57);
79
+ --muted: oklch(70.50% 0.0000 24.57);
80
+ --overlay: oklch(21.03% 0.0000 24.57);
81
+ --overlay-foreground: oklch(99.11% 0.0000 24.57);
82
+ --scrollbar: oklch(70.50% 0.0000 24.57);
83
+ --segment: oklch(39.64% 0.0000 24.57);
84
+ --segment-foreground: oklch(99.11% 0.0000 24.57);
85
+ --separator: oklch(25.00% 0.0000 24.57);
86
+ --success: oklch(73.29% 0.1935 123.30);
87
+ --success-foreground: oklch(21.03% 0.0059 123.30);
88
+ --surface: oklch(21.03% 0.0000 24.57);
89
+ --surface-foreground: oklch(99.11% 0.0000 24.57);
90
+ --surface-secondary: oklch(25.70% 0.0000 24.57);
91
+ --surface-secondary-foreground: oklch(99.11% 0.0000 24.57);
92
+ --surface-tertiary: oklch(27.21% 0.0000 24.57);
93
+ --surface-tertiary-foreground: oklch(99.11% 0.0000 24.57);
94
+ --warning: oklch(82.03% 0.1388 48.83);
95
+ --warning-foreground: oklch(21.03% 0.0059 48.83);
96
+ }
package/theme.example.css ADDED
@@ -0,0 +1,96 @@
1
+ /*
2
+ * HeroUI Theme Customization
3
+ * Add this to your global.css after importing @heroui/styles
4
+ * Only includes base variables from variables.css
5
+ * @see https://v3.heroui.com/docs/react/getting-started/theming
6
+ */
7
+
8
+ :root,
9
+ .light,
10
+ .default,
11
+ [data-theme="light"],
12
+ [data-theme="default"] {
13
+ /* Theme Colors (Light Mode) */
14
+ --accent: #F56460;
15
+ --accent-foreground: #FCFAF6;
16
+ --background: #FCFAF6;
17
+ --border: #E8E8E8;
18
+
19
+ --scrollbar: #FCFAF6;
20
+ --separator: #E8E8E8;
21
+
22
+ --default: rgba(0, 0, 0, 0.02);
23
+ --default-foreground: rgba(0, 0, 0, 0.9);
24
+
25
+ --field-background: #fff;
26
+ --field-foreground: rgba(0, 0, 0, 0.9);
27
+ --field-placeholder: rgba(0, 0, 0, 0.5);
28
+
29
+ --focus: oklch(90.00% 0.0084 24.57);
30
+ --foreground: rgba(0, 0, 0, 0.9);
31
+ --muted: oklch(55.17% 0.0168 24.57);
32
+
33
+ --overlay: oklch(100.00% 0.0025 24.57);
34
+ --overlay-foreground: oklch(21.03% 0.0084 24.57);
35
+
36
+ --segment: rgba(0, 0, 0, 0.9);
37
+ --segment-foreground: #FCFAF6;
38
+
39
+ --surface: #fff;
40
+ --surface-foreground: rgba(0, 0, 0, 0.9);
41
+ --surface-secondary: rgba(0, 0, 0, 0.02);
42
+ --surface-secondary-foreground: rgba(0, 0, 0, 0.9);
43
+ --surface-tertiary: rgba(0, 0, 0, 0.9);
44
+ --surface-tertiary-foreground: #FCFAF6;
45
+
46
+ --success: oklch(73.29% 0.1968 123.30);
47
+ --success-foreground: rgba(0, 0, 0, 0.9);
48
+ --warning: oklch(78.19% 0.1612 44.82);
49
+ --warning-foreground: rgba(0, 0, 0, 0.9);
50
+ --danger: #cf383f;
51
+ --danger-foreground: #FCFAF6;
52
+
53
+ /* Border Radius */
54
+ --radius: 0.5rem;
55
+ --field-radius: 1rem;
56
+
57
+ /* Font Family */
58
+ /* Make sure to load Inter font in your app */
59
+ --font-sans: var(--font-inter);
60
+ }
61
+
62
+ .dark,
63
+ [data-theme="dark"] {
64
+ color-scheme: dark;
65
+ /* Theme Colors (Dark Mode) */
66
+ --accent: oklch(68.60% 0.1794 24.57);
67
+ --accent-foreground: oklch(15% 0.0300 24.57);
68
+ --background: oklch(12.00% 0.0000 24.57);
69
+ --border: oklch(28.00% 0.0000 24.57);
70
+ --danger: oklch(59.40% 0.1967 357.12);
71
+ --danger-foreground: oklch(99.11% 0 0);
72
+ --default: oklch(27.40% 0.0000 24.57);
73
+ --default-foreground: oklch(99.11% 0 0);
74
+ --field-background: oklch(21.03% 0.0000 24.57);
75
+ --field-foreground: oklch(99.11% 0.0000 24.57);
76
+ --field-placeholder: oklch(70.50% 0.0000 24.57);
77
+ --focus: oklch(68.60% 0.1794 24.57);
78
+ --foreground: oklch(99.11% 0.0000 24.57);
79
+ --muted: oklch(70.50% 0.0000 24.57);
80
+ --overlay: oklch(21.03% 0.0000 24.57);
81
+ --overlay-foreground: oklch(99.11% 0.0000 24.57);
82
+ --scrollbar: oklch(70.50% 0.0000 24.57);
83
+ --segment: oklch(39.64% 0.0000 24.57);
84
+ --segment-foreground: oklch(99.11% 0.0000 24.57);
85
+ --separator: oklch(25.00% 0.0000 24.57);
86
+ --success: oklch(73.29% 0.1935 123.30);
87
+ --success-foreground: oklch(21.03% 0.0059 123.30);
88
+ --surface: oklch(21.03% 0.0000 24.57);
89
+ --surface-foreground: oklch(99.11% 0.0000 24.57);
90
+ --surface-secondary: oklch(25.70% 0.0000 24.57);
91
+ --surface-secondary-foreground: oklch(99.11% 0.0000 24.57);
92
+ --surface-tertiary: oklch(27.21% 0.0000 24.57);
93
+ --surface-tertiary-foreground: oklch(99.11% 0.0000 24.57);
94
+ --warning: oklch(82.03% 0.1388 48.83);
95
+ --warning-foreground: oklch(21.03% 0.0059 48.83);
96
+ }