webcake-ui-kit 1.0.0 → 1.0.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.
Files changed (66) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +358 -8
  3. package/package.json +68 -5
  4. package/src/components/accordion/Accordion.vue +70 -0
  5. package/src/components/accordion/accordion.css +5 -0
  6. package/src/components/accordion-item/AccordionItem.vue +98 -0
  7. package/src/components/accordion-item/accordion-item.css +143 -0
  8. package/src/components/alert-dialog/AlertDialog.vue +82 -0
  9. package/src/components/alert-dialog/alert-dialog.css +33 -0
  10. package/src/components/badge/Badge.vue +2 -2
  11. package/src/components/badge/badge.css +1 -4
  12. package/src/components/breadcrumb/Breadcrumb.vue +85 -0
  13. package/src/components/breadcrumb/breadcrumb.css +90 -0
  14. package/src/components/button/Button.vue +77 -10
  15. package/src/components/button/button.css +258 -24
  16. package/src/components/button-group/ButtonGroup.vue +25 -0
  17. package/src/components/button-group/button-group.css +30 -0
  18. package/src/components/checkbox/Checkbox.vue +55 -0
  19. package/src/components/checkbox/checkbox.css +86 -0
  20. package/src/components/checkbox-group/CheckboxGroup.vue +50 -0
  21. package/src/components/checkbox-group/checkbox-group.css +35 -0
  22. package/src/components/dialog/Dialog.vue +355 -0
  23. package/src/components/dialog/dialog.css +255 -0
  24. package/src/components/divider/Divider.vue +35 -0
  25. package/src/components/divider/divider.css +38 -0
  26. package/src/components/input/Input.vue +99 -0
  27. package/src/components/input/input.css +123 -0
  28. package/src/components/pagination/Pagination.vue +211 -0
  29. package/src/components/pagination/pagination.css +13 -0
  30. package/src/components/radio/Radio.vue +74 -0
  31. package/src/components/radio/radio.css +89 -0
  32. package/src/components/radio-group/RadioGroup.vue +70 -0
  33. package/src/components/radio-group/radio_group.css +11 -0
  34. package/src/components/rich-checkbox-group/RichCheckboxGroup.vue +59 -0
  35. package/src/components/rich-checkbox-group/rich-checkbox-group.css +54 -0
  36. package/src/components/rich-switch-group/RichSwitchGroup.vue +49 -0
  37. package/src/components/rich-switch-group/rich_switch_group.css +45 -0
  38. package/src/components/select/Select.vue +262 -0
  39. package/src/components/select/select.css +207 -0
  40. package/src/components/select-option/SelectOption.vue +82 -0
  41. package/src/components/select-option/select_option.css +60 -0
  42. package/src/components/sidebar-group-label/SidebarGroupLabel.vue +68 -0
  43. package/src/components/sidebar-group-label/sidebar_group_label.css +61 -0
  44. package/src/components/sidebar-item/SidebarItem.vue +110 -0
  45. package/src/components/sidebar-item/sidebar_item.css +142 -0
  46. package/src/components/slider/Slider.vue +255 -0
  47. package/src/components/slider/slider.css +89 -0
  48. package/src/components/spinner/Spinner.vue +47 -0
  49. package/src/components/spinner/spinner.css +48 -0
  50. package/src/components/switch/Switch.vue +32 -0
  51. package/src/components/switch/switch.css +46 -0
  52. package/src/components/switch-group/SwitchGroup.vue +32 -0
  53. package/src/components/switch-group/switch_group.css +28 -0
  54. package/src/components/tabs/Tabs.vue +57 -0
  55. package/src/components/tabs/tabs.css +118 -0
  56. package/src/components/tag/Tag.vue +47 -0
  57. package/src/components/tag/tag.css +115 -0
  58. package/src/components/toggle/Toggle.vue +112 -0
  59. package/src/components/toggle/toggle.css +174 -0
  60. package/src/components/toggle-group/ToggleGroup.vue +57 -0
  61. package/src/components/toggle-group/toggle-group.css +68 -0
  62. package/src/icons/LoaderIcon.vue +22 -0
  63. package/src/index.js +29 -2
  64. package/src/styles/border_radius.css +3 -3
  65. package/src/styles/color_general.css +21 -14
  66. package/src/styles/shadow.css +2 -2
package/src/index.js CHANGED
@@ -1,2 +1,29 @@
1
- export { default as Badge } from './components/badge/Badge.vue'
2
- export { default as Button } from './components/button/Button.vue'
1
+ export { default as WkAccordion } from './components/accordion/Accordion.vue'
2
+ export { default as WkAccordionItem } from './components/accordion-item/AccordionItem.vue'
3
+ export { default as WkAlertDialog } from './components/alert-dialog/AlertDialog.vue'
4
+ export { default as WkBadge } from './components/badge/Badge.vue'
5
+ export { default as WkBreadcrumb } from './components/breadcrumb/Breadcrumb.vue'
6
+ export { default as WkButton } from './components/button/Button.vue'
7
+ export { default as WkButtonGroup } from './components/button-group/ButtonGroup.vue'
8
+ export { default as WkCheckbox } from './components/checkbox/Checkbox.vue'
9
+ export { default as WkCheckboxGroup } from './components/checkbox-group/CheckboxGroup.vue'
10
+ export { default as WkDialog } from './components/dialog/Dialog.vue'
11
+ export { default as WkInput } from './components/input/Input.vue'
12
+ export { default as WkPagination } from './components/pagination/Pagination.vue'
13
+ export { default as WkRichCheckboxGroup } from './components/rich-checkbox-group/RichCheckboxGroup.vue'
14
+ export { default as WkToggle } from './components/toggle/Toggle.vue'
15
+ export { default as WkToggleGroup } from './components/toggle-group/ToggleGroup.vue'
16
+ export { default as WkSelect } from './components/select/Select.vue'
17
+ export { default as WkSelectOption } from './components/select-option/SelectOption.vue'
18
+ export { default as WkDivider } from './components/divider/Divider.vue'
19
+ export { default as WkRadio } from './components/radio/Radio.vue'
20
+ export { default as WkRadioGroup } from './components/radio-group/RadioGroup.vue'
21
+ export { default as WkRichSwitchGroup } from './components/rich-switch-group/RichSwitchGroup.vue'
22
+ export { default as WkSidebarItem } from './components/sidebar-item/SidebarItem.vue'
23
+ export { default as WkSlider } from './components/slider/Slider.vue'
24
+ export { default as WkSpinner } from './components/spinner/Spinner.vue'
25
+ export { default as WkSwitch } from './components/switch/Switch.vue'
26
+ export { default as WkSidebarGroupLabel } from './components/sidebar-group-label/SidebarGroupLabel.vue'
27
+ export { default as WkSwitchGroup } from './components/switch-group/SwitchGroup.vue'
28
+ export { default as WkTabs } from './components/tabs/Tabs.vue'
29
+ export { default as WkTag } from './components/tag/Tag.vue'
package/src/styles/border_radius.css CHANGED
@@ -17,9 +17,9 @@
17
17
  --rounded-md: var(--radius-4);
18
18
  --rounded-lg: var(--radius-6);
19
19
  --radius: var(--radius-8);
20
- --rounded-xl: var(--radius-12);
21
- --rounded-2xl: var(--radius-16);
22
- --rounded-3xl: var(--radius-24);
20
+ --rounded-xl: var(--radius-10);
21
+ --rounded-2xl: var(--radius-12);
22
+ --rounded-3xl: var(--radius-16);
23
23
  --rounded-full: var(--radius-infinite);
24
24
  }
25
25
  }
package/src/styles/color_general.css CHANGED
@@ -28,8 +28,9 @@
28
28
  /* Start: Unofficial */
29
29
  --primary-hover: var(--color-neutral-50);
30
30
  --secondary-hover: var(--color-neutral-50);
31
- --primary-brand-hover: var(--color-brand-shades-800);
32
- --negative-subtle: var(--color-red-50);
31
+ --primary-brand-hover: var(--color-brand-shades-500);
32
+ --destructive-hover: var(--color-red-500);
33
+ --destructive-subtle: var(--color-red-50);
33
34
  --destructive-border: var(--color-red-500);
34
35
  --destructive-text: var(--color-red-600);
35
36
  --ghost: var(--color-white-alpha-001);
@@ -37,8 +38,8 @@
37
38
  --ghost-hover: var(--color-black-alpha-5);
38
39
  --outline: var(--color-white-alpha-10);
39
40
  --outline-hover: var(--color-black-alpha-333);
40
- --outline-active: var(--color-white-alpha-5);
41
- --accent-0: var(--color-neutral-50);
41
+ --outline-active: var(--color-black-alpha-5);
42
+ --accent-0: rgba(245, 245, 245, 0.5);
42
43
  --accent-1: var(--color-neutral-100);
43
44
  --accent-2: var(--color-neutral-200);
44
45
  --border-0: var(--color-neutral-50);
@@ -76,6 +77,9 @@
76
77
  /* End: Unofficial */
77
78
 
78
79
  /* Components */
80
+ --button-black: var(--color-neutral-950);
81
+ --button-black-fg: var(--color-white-alpha-95);
82
+ --button-black-hover: var(--color-neutral-700);
79
83
  --card: var(--color-white-alpha-100);
80
84
  --card-foreground: var(--color-neutral-950);
81
85
 
@@ -84,7 +88,7 @@
84
88
 
85
89
  --sidebar: var(--color-neutral-50);
86
90
  --sidebar-muted: var(--color-neutral-500);
87
- --sidebar-acccent: var(--color-neutral-200);
91
+ --sidebar-accent: var(--color-neutral-200);
88
92
  --sidebar-foreground: var(--color-neutral-700);
89
93
  --sidebar-accent-foreground: var(--color-neutral-900);
90
94
  --sidebar-primary: var(--color-neutral-900);
@@ -95,8 +99,8 @@
95
99
  --input: var(--color-white-alpha-100);
96
100
 
97
101
  /* Effect */
98
- --ring: var(--color-neutral-200);
99
- --ring-error: var(--color-red-300);
102
+ --focus-ring: var(--color-neutral-200);
103
+ --focus-ring-error: var(--color-red-300);
100
104
  }
101
105
 
102
106
  .dark {
@@ -123,8 +127,9 @@
123
127
  /* Start: Unofficial */
124
128
  --primary-hover: var(--color-neutral-950);
125
129
  --secondary-hover: var(--color-neutral-900);
126
- --primary-brand-hover: var(--color-brand-shades-300);
127
- --negative-subtle: var(--color-red-950);
130
+ --primary-brand-hover: var(--color-brand-shades-500);
131
+ --destructive-hover: var(--color-red-500);
132
+ --destructive-subtle: var(--color-red-950);
128
133
  --destructive-border: var(--color-red-500);
129
134
  --destructive-text: var(--color-red-400);
130
135
  --ghost: var(--color-white-alpha-001);
@@ -133,7 +138,7 @@
133
138
  --outline: var(--color-white-alpha-5);
134
139
  --outline-hover: var(--color-black-alpha-10);
135
140
  --outline-active: var(--color-white-alpha-15);
136
- --accent-0: var(--color-neutral-950);
141
+ --accent-0: rgba(38, 38, 38, 0.5);
137
142
  --accent-1: var(--color-neutral-800);
138
143
  --accent-2: var(--color-neutral-800);
139
144
  --border-0: var(--color-neutral-950);
@@ -177,7 +182,9 @@
177
182
  /* End: Unofficial */
178
183
 
179
184
  /* Components */
180
- /* card */
185
+ --button-black: var(--color-neutral-50);
186
+ --button-black-fg: var(--color-black-alpha-95);
187
+ --button-black-hover: var(--color-neutral-200);
181
188
  --card: var(--color-neutral-900);
182
189
  --card-foreground: var(--color-white-alpha-100);
183
190
 
@@ -186,7 +193,7 @@
186
193
 
187
194
  --sidebar: var(--color-neutral-950);
188
195
  --sidebar-muted: var(--color-neutral-500);
189
- --sidebar-acccent: var(--color-neutral-800);
196
+ --sidebar-accent: var(--color-neutral-800);
190
197
  --sidebar-foreground: var(--color-neutral-300);
191
198
  --sidebar-accent-foreground: var(--color-neutral-100);
192
199
  --sidebar-primary: var(--color-neutral-50);
@@ -196,7 +203,7 @@
196
203
  --input: var(--color-white-alpha-5);
197
204
 
198
205
  /* Effect */
199
- --ring: var(--color-neutral-700);
200
- --ring-error: #6d2e2f;
206
+ --focus-ring: var(--color-neutral-700);
207
+ --focus-ring-error: #6d2e2f;
201
208
  }
202
209
  }
package/src/styles/shadow.css CHANGED
@@ -10,7 +10,7 @@
10
10
  --shadow-xl: 0px 20px 25px -5px var(--color-black-alpha-10), 0px 8px 10px -6px var(--color-black-alpha-10);
11
11
  --shadow-2xl: 0px 25px 50px -12px var(--color-black-alpha-10);
12
12
 
13
- --shadow-focus-ring: 0 0 0 3px var(--ring);
14
- --shadow-focus-ring-error: 0 0 0 3px var(--ring-error);
13
+ --shadow-focus-ring: 0 0 0 3px var(--focus-ring);
14
+ --shadow-focus-ring-error: 0 0 0 3px var(--focus-ring-error);
15
15
  }
16
16
  }