@studiocms/ui 0.3.2 → 0.4.0

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 (156) hide show
  1. package/dist/components/Accordion/Accordion.astro +23 -0
  2. package/dist/components/Accordion/Item.astro +21 -0
  3. package/dist/components/Accordion/accordion.css +64 -0
  4. package/dist/components/Accordion/accordion.d.ts +1 -0
  5. package/dist/components/Accordion/accordion.js +70 -0
  6. package/dist/components/Badge/Badge.astro +49 -0
  7. package/dist/components/Badge/badge.css +111 -0
  8. package/dist/components/Breadcrumbs/Breadcrumbs.astro +31 -0
  9. package/dist/components/Breadcrumbs/breadcrumbs.css +15 -0
  10. package/dist/components/Button/Button.astro +75 -0
  11. package/dist/components/Button/button.css +292 -0
  12. package/{src/components → dist/components/Card}/Card.astro +1 -48
  13. package/dist/components/Card/card.css +38 -0
  14. package/dist/components/Center/Center.astro +7 -0
  15. package/dist/components/Center/center.css +8 -0
  16. package/dist/components/Checkbox/Checkbox.astro +95 -0
  17. package/dist/components/Checkbox/checkbox.css +119 -0
  18. package/dist/components/Checkbox/checkbox.d.ts +2 -0
  19. package/dist/components/Checkbox/checkbox.js +20 -0
  20. package/{src/components → dist/components/Divider}/Divider.astro +2 -25
  21. package/dist/components/Divider/divider.css +21 -0
  22. package/dist/components/Dropdown/Dropdown.astro +116 -0
  23. package/dist/components/Dropdown/dropdown.css +180 -0
  24. package/dist/components/Dropdown/dropdown.d.ts +48 -0
  25. package/dist/components/Dropdown/dropdown.js +201 -0
  26. package/dist/components/Footer/Footer.astro +58 -0
  27. package/dist/components/Footer/footer.css +68 -0
  28. package/dist/components/Group/Group.astro +7 -0
  29. package/dist/components/Group/group.css +19 -0
  30. package/{src/utils → dist/components/Icon}/Icon.astro +1 -1
  31. package/{src/utils/iconType.ts → dist/components/Icon/iconType.d.ts} +0 -1
  32. package/dist/components/Icon/iconType.js +0 -0
  33. package/{src/components → dist/components/Input}/Input.astro +2 -48
  34. package/dist/components/Input/input.css +38 -0
  35. package/{src → dist}/components/Modal/Modal.astro +4 -122
  36. package/dist/components/Modal/modal.css +100 -0
  37. package/dist/components/Modal/modal.d.ts +48 -0
  38. package/dist/components/Modal/modal.js +129 -0
  39. package/dist/components/Progress/Progress.astro +21 -0
  40. package/dist/components/Progress/helper.d.ts +13 -0
  41. package/dist/components/Progress/helper.js +32 -0
  42. package/dist/components/Progress/progress.css +29 -0
  43. package/dist/components/Progress/progress.d.ts +1 -0
  44. package/dist/components/Progress/progress.js +10 -0
  45. package/dist/components/RadioGroup/RadioGroup.astro +124 -0
  46. package/dist/components/RadioGroup/radiogroup.css +96 -0
  47. package/dist/components/RadioGroup/radiogroup.d.ts +1 -0
  48. package/dist/components/RadioGroup/radiogroup.js +48 -0
  49. package/{src/components → dist/components/Row}/Row.astro +1 -24
  50. package/dist/components/Row/row.css +18 -0
  51. package/dist/components/SearchSelect/SearchSelect.astro +135 -0
  52. package/dist/components/SearchSelect/searchselect.css +95 -0
  53. package/dist/components/SearchSelect/searchselect.d.ts +6 -0
  54. package/dist/components/SearchSelect/searchselect.js +166 -0
  55. package/dist/components/Select/Select.astro +147 -0
  56. package/dist/components/Select/select.css +110 -0
  57. package/dist/components/Select/select.d.ts +1 -0
  58. package/dist/components/Select/select.js +143 -0
  59. package/dist/components/Sidebar/helpers.d.ts +76 -0
  60. package/dist/components/Sidebar/helpers.js +160 -0
  61. package/{src → dist}/components/Tabs/TabItem.astro +3 -3
  62. package/dist/components/Tabs/Tabs.astro +150 -0
  63. package/dist/components/Tabs/tabs.css +121 -0
  64. package/dist/components/Tabs/tabs.d.ts +1 -0
  65. package/dist/components/Tabs/tabs.js +82 -0
  66. package/{src/components → dist/components/Textarea}/Textarea.astro +2 -61
  67. package/dist/components/Textarea/textarea.css +49 -0
  68. package/dist/components/ThemeToggle/ThemeToggle.astro +21 -0
  69. package/dist/components/ThemeToggle/themetoggle.css +17 -0
  70. package/dist/components/ThemeToggle/themetoggle.d.ts +1 -0
  71. package/dist/components/ThemeToggle/themetoggle.js +4 -0
  72. package/dist/components/Toast/Toaster.astro +69 -0
  73. package/dist/components/Toast/toast.d.ts +8 -0
  74. package/dist/components/Toast/toast.js +9 -0
  75. package/dist/components/Toast/toaster.css +168 -0
  76. package/dist/components/Toast/toaster.d.ts +1 -0
  77. package/dist/components/Toast/toaster.js +160 -0
  78. package/dist/components/Toggle/Toggle.astro +84 -0
  79. package/dist/components/Toggle/toggle.css +93 -0
  80. package/dist/components/Toggle/toggle.d.ts +2 -0
  81. package/dist/components/Toggle/toggle.js +20 -0
  82. package/{src/components → dist/components/User}/User.astro +3 -43
  83. package/dist/components/User/user.css +35 -0
  84. package/dist/css/colors.css +95 -0
  85. package/dist/css/global.css +3 -0
  86. package/dist/css/radii.css +6 -0
  87. package/dist/css/resets.css +46 -0
  88. package/dist/index.d.ts +12 -0
  89. package/dist/index.js +379 -0
  90. package/dist/toolbar/ColorPicker.d.ts +7 -0
  91. package/dist/toolbar/ColorPicker.js +85 -0
  92. package/dist/toolbar/icon.d.ts +1 -0
  93. package/dist/toolbar/icon.js +4 -0
  94. package/dist/toolbar/index.d.ts +2 -0
  95. package/dist/toolbar/index.js +292 -0
  96. package/dist/types/index.d.ts +11 -0
  97. package/dist/types/index.js +0 -0
  98. package/dist/utils/ThemeHelper.d.ts +49 -0
  99. package/dist/utils/ThemeHelper.js +113 -0
  100. package/{src/utils/colors.ts → dist/utils/colors.d.ts} +1 -1
  101. package/dist/utils/colors.js +0 -0
  102. package/dist/utils/generateID.d.ts +2 -0
  103. package/dist/utils/generateID.js +6 -0
  104. package/dist/utils/headers.d.ts +43 -0
  105. package/dist/utils/headers.js +129 -0
  106. package/dist/utils/iconStrings.d.ts +4 -0
  107. package/dist/utils/iconStrings.js +13 -0
  108. package/dist/utils/integration-utils.d.ts +130 -0
  109. package/dist/utils/integration-utils.js +161 -0
  110. package/package.json +25 -9
  111. package/src/components/BaseHead.astro +0 -22
  112. package/src/components/Button.astro +0 -372
  113. package/src/components/Center.astro +0 -16
  114. package/src/components/Checkbox.astro +0 -250
  115. package/src/components/Dropdown/Dropdown.astro +0 -314
  116. package/src/components/Dropdown/dropdown.ts +0 -258
  117. package/src/components/Dropdown/index.ts +0 -2
  118. package/src/components/Footer.astro +0 -137
  119. package/src/components/Modal/index.ts +0 -2
  120. package/src/components/Modal/modal.ts +0 -163
  121. package/src/components/RadioGroup.astro +0 -299
  122. package/src/components/SearchSelect.astro +0 -486
  123. package/src/components/Select.astro +0 -467
  124. package/src/components/Sidebar/helpers.ts +0 -179
  125. package/src/components/Sidebar/index.ts +0 -3
  126. package/src/components/Tabs/Tabs.astro +0 -393
  127. package/src/components/Tabs/index.ts +0 -2
  128. package/src/components/ThemeToggle.astro +0 -46
  129. package/src/components/Toast/Toaster.astro +0 -470
  130. package/src/components/Toast/index.ts +0 -2
  131. package/src/components/Toast/toast.ts +0 -16
  132. package/src/components/Toggle.astro +0 -214
  133. package/src/components/index.ts +0 -27
  134. package/src/components.ts +0 -26
  135. package/src/css/colors.css +0 -106
  136. package/src/css/global.css +0 -2
  137. package/src/css/resets.css +0 -54
  138. package/src/env.d.ts +0 -15
  139. package/src/integration.ts +0 -31
  140. package/src/layouts/RootLayout.astro +0 -33
  141. package/src/layouts/index.ts +0 -2
  142. package/src/layouts.ts +0 -1
  143. package/src/types/index.ts +0 -11
  144. package/src/utils/ThemeHelper.ts +0 -145
  145. package/src/utils/create-resolver.ts +0 -30
  146. package/src/utils/generateID.ts +0 -5
  147. package/src/utils/headers.ts +0 -190
  148. package/src/utils/iconStrings.ts +0 -29
  149. package/src/utils/index.ts +0 -1
  150. package/src/utils/virtual-module-plugin-builder.ts +0 -37
  151. /package/{src → dist}/components/Sidebar/Double.astro +0 -0
  152. /package/{src → dist}/components/Sidebar/Single.astro +0 -0
  153. /package/{src → dist}/icons/Checkmark.astro +0 -0
  154. /package/{src → dist}/icons/ChevronUpDown.astro +0 -0
  155. /package/{src → dist}/icons/User.astro +0 -0
  156. /package/{src → dist}/icons/X-Mark.astro +0 -0
package/src/utils/headers.ts DELETED
@@ -1,190 +0,0 @@
1
- import type { AstroGlobalPartial } from 'astro';
2
- import { z } from 'astro/zod';
3
-
4
- export const HeadConfigSchema = () =>
5
- z
6
- .array(
7
- z.object({
8
- /** Name of the HTML tag to add to `<head>`, e.g. `'meta'`, `'link'`, or `'script'`. */
9
- tag: z.enum(['title', 'base', 'link', 'style', 'meta', 'script', 'noscript', 'template']),
10
- /** Attributes to set on the tag, e.g. `{ rel: 'stylesheet', href: '/custom.css' }`. */
11
- attrs: z.record(z.union([z.string(), z.boolean(), z.undefined()])).default({}),
12
- /** Content to place inside the tag (optional). */
13
- content: z.string().default(''),
14
- })
15
- )
16
- .default([]);
17
-
18
- /**
19
- * Default Head Tags for use with createHead() helper
20
- *
21
- * @param title
22
- * @param description
23
- * @param lang
24
- * @param Astro
25
- * @param favicon
26
- * @param ogImage
27
- * @param canonical
28
- * @returns
29
- */
30
- export const headDefaults = (
31
- title: string,
32
- description: string,
33
- Astro: AstroGlobalPartial,
34
- ogImage: string | undefined,
35
- canonical: URL | undefined
36
- ) => {
37
- const headDefaults: z.input<ReturnType<typeof HeadConfigSchema>> = [
38
- { tag: 'meta', attrs: { charset: 'utf-8' } },
39
- {
40
- tag: 'meta',
41
- attrs: { name: 'viewport', content: 'width=device-width, initial-scale=1' },
42
- },
43
- { tag: 'title', content: `${title}` },
44
- { tag: 'meta', attrs: { name: 'title', content: title } },
45
- { tag: 'meta', attrs: { name: 'description', content: description } },
46
- { tag: 'link', attrs: { rel: 'canonical', href: canonical?.href } },
47
- { tag: 'meta', attrs: { name: 'generator', content: Astro.generator } },
48
- // Favicon
49
- {
50
- tag: 'link',
51
- attrs: { rel: 'apple-touch-icon', href: '/apple-touch-icon.png', sizes: '180x180' },
52
- },
53
- {
54
- tag: 'link',
55
- attrs: { rel: 'icon', href: '/favicon-32x32.png', type: 'image/png', sizes: '32x32' },
56
- },
57
- {
58
- tag: 'link',
59
- attrs: { rel: 'icon', href: '/favicon-16x16.png', type: 'image/png', sizes: '16x16' },
60
- },
61
- { tag: 'link', attrs: { rel: 'icon', href: '/favicon.png', type: 'image/png' } },
62
- { tag: 'link', attrs: { rel: 'manifest', href: '/site.webmanifest' } },
63
- { tag: 'link', attrs: { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#5bbad5' } },
64
- { tag: 'link', attrs: { rel: 'shortcut icon', href: '/favicon.ico' } },
65
- { tag: 'meta', attrs: { name: 'msapplication-TileColor', content: '#da532c' } },
66
- { tag: 'meta', attrs: { name: 'msapplication-config', content: '/browserconfig.xml' } },
67
- { tag: 'meta', attrs: { name: 'theme-color', content: '#aa87f4' } },
68
- // OpenGraph Tags
69
- { tag: 'meta', attrs: { property: 'og:title', content: title } },
70
- { tag: 'meta', attrs: { property: 'og:type', content: 'website' } },
71
- { tag: 'meta', attrs: { property: 'og:url', content: canonical?.href } },
72
- { tag: 'meta', attrs: { property: 'og:description', content: description } },
73
- { tag: 'meta', attrs: { property: 'og:site_name', content: title } },
74
- // Twitter Tags
75
- {
76
- tag: 'meta',
77
- attrs: { name: 'twitter:card', content: 'summary_large_image' },
78
- },
79
- { tag: 'meta', attrs: { name: 'twitter:url', content: canonical?.href } },
80
- { tag: 'meta', attrs: { name: 'twitter:title', content: title } },
81
- { tag: 'meta', attrs: { name: 'twitter:description', content: description } },
82
- ];
83
-
84
- if (ogImage) {
85
- headDefaults.push(
86
- { tag: 'meta', attrs: { property: 'og:image', content: ogImage } },
87
- { tag: 'meta', attrs: { name: 'twitter:image', content: ogImage } }
88
- );
89
- }
90
-
91
- return headDefaults;
92
- };
93
-
94
- const HeadSchema = HeadConfigSchema();
95
-
96
- export type HeadUserConfig = z.input<ReturnType<typeof HeadConfigSchema>>;
97
- export type HeadConfig = z.output<ReturnType<typeof HeadConfigSchema>>;
98
-
99
- /**
100
- * Test if a head config object contains a matching `<title>` or `<meta>` tag.
101
- *
102
- * For example, will return true if `head` already contains
103
- * `<meta name="description" content="A">` and the passed `tag`
104
- * is `<meta name="description" content="B">`. Tests against `name`,
105
- * `property`, and `http-equiv` attributes for `<meta>` tags.
106
- */
107
- function hasTag(head: HeadConfig, entry: HeadConfig[number]): boolean {
108
- switch (entry.tag) {
109
- case 'title':
110
- return head.some(({ tag }) => tag === 'title');
111
- case 'meta':
112
- return hasOneOf(head, entry, ['name', 'property', 'http-equiv']);
113
- default:
114
- return false;
115
- }
116
- }
117
-
118
- /**
119
- * Test if a head config object contains a tag of the same type
120
- * as `entry` and a matching attribute for one of the passed `keys`.
121
- */
122
- function hasOneOf(head: HeadConfig, entry: HeadConfig[number], keys: string[]): boolean {
123
- const attr = getAttr(keys, entry);
124
- if (!attr) return false;
125
- const [key, val] = attr;
126
- return head.some(({ tag, attrs }) => tag === entry.tag && attrs[key] === val);
127
- }
128
-
129
- /** Find the first matching key–value pair in a head entry’s attributes. */
130
- function getAttr(
131
- keys: string[],
132
- entry: HeadConfig[number]
133
- ): [key: string, value: string | boolean] | undefined {
134
- let attr: [string, string | boolean] | undefined;
135
- for (const key of keys) {
136
- const val = entry.attrs[key];
137
- if (val) {
138
- attr = [key, val];
139
- break;
140
- }
141
- }
142
- return attr;
143
- }
144
-
145
- /** Merge two heads, overwriting entries in the first head that exist in the second. */
146
- function mergeHead(oldHead: HeadConfig, newHead: HeadConfig) {
147
- return [...oldHead.filter((tag) => !hasTag(newHead, tag)), ...newHead];
148
- }
149
-
150
- /** Sort head tags to place important tags first and relegate “SEO” meta tags. */
151
- function sortHead(head: HeadConfig) {
152
- return head.sort((a, b) => {
153
- const aImportance = getImportance(a);
154
- const bImportance = getImportance(b);
155
- return aImportance > bImportance ? -1 : bImportance > aImportance ? 1 : 0;
156
- });
157
- }
158
-
159
- /** Get the relative importance of a specific head tag. */
160
- function getImportance(entry: HeadConfig[number]) {
161
- // 1. Important meta tags.
162
- if (
163
- entry.tag === 'meta' &&
164
- ('charset' in entry.attrs || 'http-equiv' in entry.attrs || entry.attrs.name === 'viewport')
165
- ) {
166
- return 100;
167
- }
168
- // 2. Page title
169
- if (entry.tag === 'title') return 90;
170
- // 3. Anything that isn’t an SEO meta tag.
171
- if (entry.tag !== 'meta') {
172
- // The default favicon should be below any extra icons that the user may have set
173
- // because if several icons are equally appropriate, the last one is used and we
174
- // want to use the SVG icon when supported.
175
- if (entry.tag === 'link' && 'rel' in entry.attrs && entry.attrs.rel === 'shortcut icon') {
176
- return 70;
177
- }
178
- return 80;
179
- }
180
- // 4. SEO meta tags.
181
- return 0;
182
- }
183
- /** Create a fully parsed, merged, and sorted head entry array from multiple sources. */
184
- export function createHead(defaultHeaders: HeadUserConfig, ...heads: HeadConfig[]) {
185
- let head = HeadSchema.parse(defaultHeaders);
186
- for (const next of heads) {
187
- head = mergeHead(head, next);
188
- }
189
- return sortHead(head);
190
- }
package/src/utils/iconStrings.ts DELETED
@@ -1,29 +0,0 @@
1
- type ValidIconString =
2
- | 'check-circle'
3
- | 'exclamation-triangle'
4
- | 'exclamation-circle'
5
- | 'information-circle'
6
- | 'x-mark';
7
-
8
- const iconStrings: Record<ValidIconString, string> = {
9
- 'check-circle':
10
- '<svg xmlns="http://www.w3.org/2000/svg" class="%class%" width="%width%" height="%height%" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>',
11
- 'exclamation-circle':
12
- '<svg xmlns="http://www.w3.org/2000/svg" class="%class%" width="%width%" height="%height%" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" /></svg>',
13
- 'information-circle':
14
- '<svg xmlns="http://www.w3.org/2000/svg" class="%class%" width="%width%" height="%height%" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" /></svg>',
15
- 'x-mark':
16
- '<svg xmlns="http://www.w3.org/2000/svg" class="%class%" width="%width%" height="%height%" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>',
17
- 'exclamation-triangle':
18
- '<svg xmlns="http://www.w3.org/2000/svg" class="%class%" width="%width%" height="%height%" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" /></svg>',
19
- };
20
-
21
- function getIconString(icon: ValidIconString, classes: string, width: number, height: number) {
22
- return iconStrings[icon]
23
- .replace('%class%', classes)
24
- .replace('%width%', width.toString())
25
- .replace('%height%', height.toString());
26
- }
27
-
28
- export { getIconString };
29
- export type { ValidIconString };
package/src/utils/index.ts DELETED
@@ -1 +0,0 @@
1
- export { default as Icon } from './Icon.astro';
package/src/utils/virtual-module-plugin-builder.ts DELETED
@@ -1,37 +0,0 @@
1
- import type { AstroConfig } from 'astro';
2
-
3
- type VitePlugin = Required<AstroConfig['vite']>['plugins'][number];
4
-
5
- /**
6
- * Builds a Vite plugin that creates a virtual module.
7
- *
8
- * @param moduleId - The ID of the virtual module.
9
- * @param name - The name of the plugin.
10
- * @param moduleContent - The content of the virtual module.
11
- * @returns A Vite plugin that resolves and loads the virtual module.
12
- */
13
- export function viteVirtualModulePluginBuilder(
14
- moduleId: string,
15
- name: string,
16
- moduleContent: string
17
- ) {
18
- return function modulePlugin(): VitePlugin {
19
- const resolvedVirtualModuleId = `\0${moduleId}`; // Prefix with \0 to avoid conflicts
20
-
21
- return {
22
- name,
23
- resolveId(id) {
24
- if (id === moduleId) {
25
- return resolvedVirtualModuleId;
26
- }
27
- return;
28
- },
29
- load(id) {
30
- if (id === resolvedVirtualModuleId) {
31
- return moduleContent;
32
- }
33
- return;
34
- },
35
- };
36
- };
37
- }
/package/{src → dist}/components/Sidebar/Double.astro RENAMED
File without changes
/package/{src → dist}/components/Sidebar/Single.astro RENAMED
File without changes
/package/{src → dist}/icons/Checkmark.astro RENAMED
File without changes
/package/{src → dist}/icons/ChevronUpDown.astro RENAMED
File without changes
/package/{src → dist}/icons/User.astro RENAMED
File without changes
/package/{src → dist}/icons/X-Mark.astro RENAMED
File without changes