@starwind-ui/core 1.12.3 → 1.13.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.
- package/dist/index.js +16 -12
- package/dist/index.js.map +1 -1
- package/dist/src/components/accordion/Accordion.astro +10 -3
- package/dist/src/components/alert/AlertTitle.astro +1 -1
- package/dist/src/components/alert-dialog/AlertDialog.astro +4 -2
- package/dist/src/components/alert-dialog/AlertDialogTitle.astro +1 -1
- package/dist/src/components/badge/Badge.astro +1 -3
- package/dist/src/components/button/Button.astro +2 -1
- package/dist/src/components/dialog/Dialog.astro +101 -9
- package/dist/src/components/dialog/DialogContent.astro +13 -2
- package/dist/src/components/dialog/DialogTitle.astro +3 -1
- package/dist/src/components/dropdown/Dropdown.astro +4 -2
- package/dist/src/components/dropzone/Dropzone.astro +5 -3
- package/dist/src/components/image/Image.astro +24 -0
- package/dist/src/components/image/index.ts +9 -0
- package/dist/src/components/progress/Progress.astro +1 -0
- package/dist/src/components/radio-group/RadioGroup.astro +7 -2
- package/dist/src/components/select/Select.astro +4 -2
- package/dist/src/components/sheet/SheetTitle.astro +1 -1
- package/dist/src/components/slider/Slider.astro +411 -0
- package/dist/src/components/slider/index.ts +9 -0
- package/dist/src/components/switch/Switch.astro +1 -0
- package/dist/src/components/tabs/Tabs.astro +4 -2
- package/dist/src/components/toast/ToastDescription.astro +21 -0
- package/dist/src/components/toast/ToastItem.astro +54 -0
- package/dist/src/components/toast/ToastTemplate.astro +25 -0
- package/dist/src/components/toast/ToastTitle.astro +57 -0
- package/dist/src/components/toast/Toaster.astro +982 -0
- package/dist/src/components/toast/index.ts +29 -0
- package/dist/src/components/toast/toast-manager.ts +216 -0
- package/dist/src/components/toggle/Toggle.astro +4 -2
- package/dist/src/components/tooltip/Tooltip.astro +4 -2
- package/dist/src/components/tooltip/TooltipContent.astro +1 -1
- package/dist/src/components/video/Video.astro +120 -0
- package/dist/src/components/video/index.ts +9 -0
- package/package.json +8 -6
package/dist/index.js
CHANGED
|
@@ -6,12 +6,12 @@ import { fileURLToPath } from "url";
|
|
|
6
6
|
var registry_default = {
|
|
7
7
|
$schema: "https://starwind.dev/registry-schema.json",
|
|
8
8
|
components: [
|
|
9
|
-
{ name: "accordion", type: "component", version: "1.3.
|
|
9
|
+
{ name: "accordion", type: "component", version: "1.3.3", dependencies: [] },
|
|
10
10
|
{ name: "alert", type: "component", version: "1.3.0", dependencies: [] },
|
|
11
11
|
{
|
|
12
12
|
name: "alert-dialog",
|
|
13
13
|
type: "component",
|
|
14
|
-
version: "1.0.
|
|
14
|
+
version: "1.0.3",
|
|
15
15
|
dependencies: ["@starwind-ui/core/button@^2.1.0"]
|
|
16
16
|
},
|
|
17
17
|
{ name: "aspect-ratio", type: "component", version: "1.0.0", dependencies: [] },
|
|
@@ -33,9 +33,10 @@ var registry_default = {
|
|
|
33
33
|
dependencies: ["@starwind-ui/core/button@^2.1.0", "embla-carousel@^8.6.0"]
|
|
34
34
|
},
|
|
35
35
|
{ name: "checkbox", type: "component", version: "1.4.1", dependencies: [] },
|
|
36
|
-
{ name: "dialog", type: "component", version: "1.4.
|
|
37
|
-
{ name: "dropdown", type: "component", version: "1.2.
|
|
38
|
-
{ name: "dropzone", type: "component", version: "1.2.
|
|
36
|
+
{ name: "dialog", type: "component", version: "1.4.2", dependencies: [] },
|
|
37
|
+
{ name: "dropdown", type: "component", version: "1.2.3", dependencies: [] },
|
|
38
|
+
{ name: "dropzone", type: "component", version: "1.2.2", dependencies: [] },
|
|
39
|
+
{ name: "image", type: "component", version: "1.0.0", dependencies: [] },
|
|
39
40
|
{ name: "input", type: "component", version: "1.3.1", dependencies: [] },
|
|
40
41
|
{
|
|
41
42
|
name: "item",
|
|
@@ -46,9 +47,9 @@ var registry_default = {
|
|
|
46
47
|
{ name: "kbd", type: "component", version: "1.0.0", dependencies: [] },
|
|
47
48
|
{ name: "label", type: "component", version: "1.2.0", dependencies: [] },
|
|
48
49
|
{ name: "pagination", type: "component", version: "3.0.2", dependencies: [] },
|
|
49
|
-
{ name: "progress", type: "component", version: "1.1.
|
|
50
|
-
{ name: "radio-group", type: "component", version: "1.2.
|
|
51
|
-
{ name: "select", type: "component", version: "1.8.
|
|
50
|
+
{ name: "progress", type: "component", version: "1.1.1", dependencies: [] },
|
|
51
|
+
{ name: "radio-group", type: "component", version: "1.2.4", dependencies: [] },
|
|
52
|
+
{ name: "select", type: "component", version: "1.8.1", dependencies: [] },
|
|
52
53
|
{ name: "separator", type: "component", version: "1.0.0", dependencies: [] },
|
|
53
54
|
{
|
|
54
55
|
name: "sheet",
|
|
@@ -57,13 +58,16 @@ var registry_default = {
|
|
|
57
58
|
dependencies: ["@starwind-ui/core/dialog@^1.3.0"]
|
|
58
59
|
},
|
|
59
60
|
{ name: "skeleton", type: "component", version: "1.2.0", dependencies: [] },
|
|
61
|
+
{ name: "slider", type: "component", version: "1.0.0", dependencies: [] },
|
|
60
62
|
{ name: "spinner", type: "component", version: "1.0.0", dependencies: [] },
|
|
61
|
-
{ name: "switch", type: "component", version: "1.3.
|
|
63
|
+
{ name: "switch", type: "component", version: "1.3.1", dependencies: [] },
|
|
62
64
|
{ name: "table", type: "component", version: "1.1.0", dependencies: [] },
|
|
63
|
-
{ name: "tabs", type: "component", version: "1.4.
|
|
65
|
+
{ name: "tabs", type: "component", version: "1.4.1", dependencies: [] },
|
|
64
66
|
{ name: "textarea", type: "component", version: "1.3.1", dependencies: [] },
|
|
65
|
-
{ name: "
|
|
66
|
-
{ name: "
|
|
67
|
+
{ name: "toast", type: "component", version: "1.0.0", dependencies: [] },
|
|
68
|
+
{ name: "toggle", type: "component", version: "1.0.1", dependencies: [] },
|
|
69
|
+
{ name: "tooltip", type: "component", version: "1.3.1", dependencies: [] },
|
|
70
|
+
{ name: "video", type: "component", version: "1.0.0", dependencies: [] }
|
|
67
71
|
]
|
|
68
72
|
};
|
|
69
73
|
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/registry.json"],"sourcesContent":["import { join } from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\n\nimport componentRegistry from \"./registry.json\" with { type: \"json\" };\n\n/**\n * Component metadata interface describing a Starwind UI component\n */\nexport interface ComponentMeta {\n name: string;\n version: string;\n type: \"component\";\n dependencies: string[];\n}\n\n/**\n * Registry interface containing all available components\n */\nexport interface Registry {\n components: ComponentMeta[];\n}\n\nconst __dirname = fileURLToPath(new URL(\".\", import.meta.url));\n\n/**\n * Get the absolute path to a component file\n * @param {string} componentName - The name of the component\n * @param {string} fileName - The name of the file within the component\n * @returns {string} The absolute path to the component file\n */\nexport const getComponentPath = (componentName: string, fileName: string): string => {\n // In production (when installed as a dependency), the components will be in dist/src/components\n // In development, they will be in src/components\n const componentsDir = __dirname.includes(\"dist\") ? \"src/components\" : \"src/components\";\n return join(__dirname, componentsDir, componentName, fileName);\n};\n\n/**\n * Map of all components and their metadata from registry\n */\nexport const registry = componentRegistry.components as ComponentMeta[];\n","{\n \"$schema\": \"https://starwind.dev/registry-schema.json\",\n \"components\": [\n { \"name\": \"accordion\", \"type\": \"component\", \"version\": \"1.3.
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/registry.json"],"sourcesContent":["import { join } from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\n\nimport componentRegistry from \"./registry.json\" with { type: \"json\" };\n\n/**\n * Component metadata interface describing a Starwind UI component\n */\nexport interface ComponentMeta {\n name: string;\n version: string;\n type: \"component\";\n dependencies: string[];\n}\n\n/**\n * Registry interface containing all available components\n */\nexport interface Registry {\n components: ComponentMeta[];\n}\n\nconst __dirname = fileURLToPath(new URL(\".\", import.meta.url));\n\n/**\n * Get the absolute path to a component file\n * @param {string} componentName - The name of the component\n * @param {string} fileName - The name of the file within the component\n * @returns {string} The absolute path to the component file\n */\nexport const getComponentPath = (componentName: string, fileName: string): string => {\n // In production (when installed as a dependency), the components will be in dist/src/components\n // In development, they will be in src/components\n const componentsDir = __dirname.includes(\"dist\") ? \"src/components\" : \"src/components\";\n return join(__dirname, componentsDir, componentName, fileName);\n};\n\n/**\n * Map of all components and their metadata from registry\n */\nexport const registry = componentRegistry.components as ComponentMeta[];\n","{\n \"$schema\": \"https://starwind.dev/registry-schema.json\",\n \"components\": [\n { \"name\": \"accordion\", \"type\": \"component\", \"version\": \"1.3.3\", \"dependencies\": [] },\n { \"name\": \"alert\", \"type\": \"component\", \"version\": \"1.3.0\", \"dependencies\": [] },\n {\n \"name\": \"alert-dialog\",\n \"type\": \"component\",\n \"version\": \"1.0.3\",\n \"dependencies\": [\"@starwind-ui/core/button@^2.1.0\"]\n },\n { \"name\": \"aspect-ratio\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n { \"name\": \"avatar\", \"type\": \"component\", \"version\": \"1.2.1\", \"dependencies\": [] },\n { \"name\": \"badge\", \"type\": \"component\", \"version\": \"1.3.0\", \"dependencies\": [] },\n { \"name\": \"breadcrumb\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n {\n \"name\": \"button-group\",\n \"type\": \"component\",\n \"version\": \"1.0.0\",\n \"dependencies\": [\"@starwind-ui/core/separator@^1.0.0\"]\n },\n { \"name\": \"button\", \"type\": \"component\", \"version\": \"2.2.0\", \"dependencies\": [] },\n { \"name\": \"card\", \"type\": \"component\", \"version\": \"1.3.0\", \"dependencies\": [] },\n {\n \"name\": \"carousel\",\n \"type\": \"component\",\n \"version\": \"1.0.1\",\n \"dependencies\": [\"@starwind-ui/core/button@^2.1.0\", \"embla-carousel@^8.6.0\"]\n },\n { \"name\": \"checkbox\", \"type\": \"component\", \"version\": \"1.4.1\", \"dependencies\": [] },\n { \"name\": \"dialog\", \"type\": \"component\", \"version\": \"1.4.2\", \"dependencies\": [] },\n { \"name\": \"dropdown\", \"type\": \"component\", \"version\": \"1.2.3\", \"dependencies\": [] },\n { \"name\": \"dropzone\", \"type\": \"component\", \"version\": \"1.2.2\", \"dependencies\": [] },\n { \"name\": \"image\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n { \"name\": \"input\", \"type\": \"component\", \"version\": \"1.3.1\", \"dependencies\": [] },\n {\n \"name\": \"item\",\n \"type\": \"component\",\n \"version\": \"1.0.0\",\n \"dependencies\": [\"@starwind-ui/core/separator@^1.0.0\"]\n },\n { \"name\": \"kbd\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n { \"name\": \"label\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n { \"name\": \"pagination\", \"type\": \"component\", \"version\": \"3.0.2\", \"dependencies\": [] },\n { \"name\": \"progress\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n { \"name\": \"radio-group\", \"type\": \"component\", \"version\": \"1.2.4\", \"dependencies\": [] },\n { \"name\": \"select\", \"type\": \"component\", \"version\": \"1.8.1\", \"dependencies\": [] },\n { \"name\": \"separator\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n {\n \"name\": \"sheet\",\n \"type\": \"component\",\n \"version\": \"1.1.1\",\n \"dependencies\": [\"@starwind-ui/core/dialog@^1.3.0\"]\n },\n { \"name\": \"skeleton\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n { \"name\": \"slider\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n { \"name\": \"spinner\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n { \"name\": \"switch\", \"type\": \"component\", \"version\": \"1.3.1\", \"dependencies\": [] },\n { \"name\": \"table\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n { \"name\": \"tabs\", \"type\": \"component\", \"version\": \"1.4.1\", \"dependencies\": [] },\n { \"name\": \"textarea\", \"type\": \"component\", \"version\": \"1.3.1\", \"dependencies\": [] },\n { \"name\": \"toast\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n { \"name\": \"toggle\", \"type\": \"component\", \"version\": \"1.0.1\", \"dependencies\": [] },\n { \"name\": \"tooltip\", \"type\": \"component\", \"version\": \"1.3.1\", \"dependencies\": [] },\n { \"name\": \"video\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] }\n ]\n}\n"],"mappings":"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","names":[]}
|
|
@@ -51,6 +51,7 @@ const { type = "single", defaultValue, class: className, ...rest } = Astro.props
|
|
|
51
51
|
private items: AccordionItem[];
|
|
52
52
|
private itemsByValue: Map<string, AccordionItem>;
|
|
53
53
|
private accordionId: string;
|
|
54
|
+
private isInitialized: boolean = false;
|
|
54
55
|
|
|
55
56
|
/**
|
|
56
57
|
* Creates a new AccordionHandler instance
|
|
@@ -68,6 +69,7 @@ const { type = "single", defaultValue, class: className, ...rest } = Astro.props
|
|
|
68
69
|
|
|
69
70
|
this.setupItems();
|
|
70
71
|
this.setInitialState();
|
|
72
|
+
this.isInitialized = true;
|
|
71
73
|
}
|
|
72
74
|
|
|
73
75
|
/**
|
|
@@ -217,7 +219,10 @@ const { type = "single", defaultValue, class: className, ...rest } = Astro.props
|
|
|
217
219
|
private setItemState(item: AccordionItem, isOpen: boolean): void {
|
|
218
220
|
const state: AccordionState = isOpen ? "open" : "closed";
|
|
219
221
|
|
|
220
|
-
|
|
222
|
+
// Skip animation during initial setup, enable for subsequent toggles
|
|
223
|
+
if (!this.isInitialized) {
|
|
224
|
+
item.content.style.setProperty("animation", "none");
|
|
225
|
+
} else {
|
|
221
226
|
item.content.style.removeProperty("animation");
|
|
222
227
|
}
|
|
223
228
|
|
|
@@ -233,15 +238,17 @@ const { type = "single", defaultValue, class: className, ...rest } = Astro.props
|
|
|
233
238
|
|
|
234
239
|
// Store instances in a WeakMap to avoid memory leaks
|
|
235
240
|
const accordionInstances = new WeakMap<HTMLElement, AccordionHandler>();
|
|
241
|
+
let accordionCounter = 0;
|
|
236
242
|
|
|
237
243
|
const setupAccordions = () => {
|
|
238
|
-
document.querySelectorAll<HTMLElement>(".starwind-accordion").forEach((accordion
|
|
244
|
+
document.querySelectorAll<HTMLElement>(".starwind-accordion").forEach((accordion) => {
|
|
239
245
|
if (!accordionInstances.has(accordion)) {
|
|
240
|
-
accordionInstances.set(accordion, new AccordionHandler(accordion,
|
|
246
|
+
accordionInstances.set(accordion, new AccordionHandler(accordion, accordionCounter++));
|
|
241
247
|
}
|
|
242
248
|
});
|
|
243
249
|
};
|
|
244
250
|
|
|
245
251
|
setupAccordions();
|
|
246
252
|
document.addEventListener("astro:after-swap", setupAccordions);
|
|
253
|
+
document.addEventListener("starwind:init", setupAccordions);
|
|
247
254
|
</script>
|
|
@@ -3,7 +3,7 @@ import type { HTMLAttributes } from "astro/types";
|
|
|
3
3
|
import { tv } from "tailwind-variants";
|
|
4
4
|
|
|
5
5
|
export const alertTitle = tv({
|
|
6
|
-
base: "mb-2 flex items-center gap-2 text-lg leading-none font-medium tracking-tight",
|
|
6
|
+
base: "font-heading mb-2 flex items-center gap-2 text-lg leading-none font-medium tracking-tight",
|
|
7
7
|
});
|
|
8
8
|
|
|
9
9
|
type Props = HTMLAttributes<"h5">;
|
|
@@ -251,19 +251,21 @@ const { class: className, ...rest } = Astro.props;
|
|
|
251
251
|
|
|
252
252
|
// Store instances in a WeakMap to avoid memory leaks
|
|
253
253
|
const alertDialogInstances = new WeakMap<HTMLElement, AlertDialogHandler>();
|
|
254
|
+
let alertDialogCounter = 0;
|
|
254
255
|
|
|
255
256
|
// Initialize all dialogs
|
|
256
257
|
const setupAlertDialogs = () => {
|
|
257
|
-
document.querySelectorAll(".starwind-alert-dialog").forEach((dialogWrapper
|
|
258
|
+
document.querySelectorAll(".starwind-alert-dialog").forEach((dialogWrapper) => {
|
|
258
259
|
const wrapper = dialogWrapper as HTMLElement;
|
|
259
260
|
if (!alertDialogInstances.has(wrapper)) {
|
|
260
|
-
alertDialogInstances.set(wrapper, new AlertDialogHandler(wrapper,
|
|
261
|
+
alertDialogInstances.set(wrapper, new AlertDialogHandler(wrapper, alertDialogCounter++));
|
|
261
262
|
}
|
|
262
263
|
});
|
|
263
264
|
};
|
|
264
265
|
|
|
265
266
|
setupAlertDialogs();
|
|
266
267
|
document.addEventListener("astro:after-swap", setupAlertDialogs);
|
|
268
|
+
document.addEventListener("starwind:init", setupAlertDialogs);
|
|
267
269
|
</script>
|
|
268
270
|
|
|
269
271
|
<style>
|
|
@@ -10,7 +10,7 @@ type Props = Omit<HTMLAttributes<"h2">, "id"> & {
|
|
|
10
10
|
children: any;
|
|
11
11
|
};
|
|
12
12
|
|
|
13
|
-
export const alertDialogTitle = tv({ base: "text-xl font-semibold" });
|
|
13
|
+
export const alertDialogTitle = tv({ base: "font-heading text-xl font-semibold" });
|
|
14
14
|
|
|
15
15
|
const { class: className, ...rest } = Astro.props;
|
|
16
16
|
---
|
|
@@ -3,9 +3,7 @@ import type { HTMLAttributes } from "astro/types";
|
|
|
3
3
|
import { tv, type VariantProps } from "tailwind-variants";
|
|
4
4
|
|
|
5
5
|
interface Props
|
|
6
|
-
extends HTMLAttributes<"div">,
|
|
7
|
-
Omit<HTMLAttributes<"a">, "type">,
|
|
8
|
-
VariantProps<typeof badge> {}
|
|
6
|
+
extends HTMLAttributes<"div">, Omit<HTMLAttributes<"a">, "type">, VariantProps<typeof badge> {}
|
|
9
7
|
|
|
10
8
|
export const badge = tv({
|
|
11
9
|
base: [
|
|
@@ -3,7 +3,8 @@ import type { HTMLAttributes } from "astro/types";
|
|
|
3
3
|
import { tv, type VariantProps } from "tailwind-variants";
|
|
4
4
|
|
|
5
5
|
interface Props
|
|
6
|
-
extends
|
|
6
|
+
extends
|
|
7
|
+
HTMLAttributes<"button">,
|
|
7
8
|
Omit<HTMLAttributes<"a">, "type">,
|
|
8
9
|
VariantProps<typeof button> {}
|
|
9
10
|
|
|
@@ -11,19 +11,28 @@ const { class: className, ...rest } = Astro.props;
|
|
|
11
11
|
</div>
|
|
12
12
|
|
|
13
13
|
<script>
|
|
14
|
+
// Store instances in a WeakMap to avoid memory leaks
|
|
15
|
+
const dialogInstances = new WeakMap<HTMLElement, DialogHandler>();
|
|
16
|
+
let dialogCounter = 0;
|
|
17
|
+
|
|
14
18
|
class DialogHandler {
|
|
15
19
|
private triggers: HTMLButtonElement[] = [];
|
|
16
20
|
private dialog: HTMLDialogElement | null = null;
|
|
17
21
|
private closeButtons: HTMLButtonElement[] = [];
|
|
18
22
|
private backdrop: HTMLElement | null = null;
|
|
23
|
+
private dialogWrapper: HTMLElement;
|
|
19
24
|
private dialogId: string;
|
|
20
25
|
/**
|
|
21
26
|
* The duration of the animation in milliseconds. This is used to calculate the
|
|
22
27
|
* duration of close animation before hiding the dialog and backdrop
|
|
23
28
|
*/
|
|
24
29
|
private animationDuration: number;
|
|
30
|
+
private parentDialog: DialogHandler | null = null;
|
|
31
|
+
private nestedOpenCount: number = 0;
|
|
32
|
+
private isNested: boolean = false;
|
|
25
33
|
|
|
26
34
|
constructor(dialogWrapper: HTMLElement, dialogNumber: number) {
|
|
35
|
+
this.dialogWrapper = dialogWrapper;
|
|
27
36
|
this.dialog = dialogWrapper.querySelector("dialog");
|
|
28
37
|
this.backdrop = dialogWrapper.querySelector(".starwind-dialog-backdrop");
|
|
29
38
|
if (!this.dialog || !this.backdrop) {
|
|
@@ -215,21 +224,43 @@ const { class: className, ...rest } = Astro.props;
|
|
|
215
224
|
|
|
216
225
|
private open(): void {
|
|
217
226
|
if (!this.dialog || !this.backdrop) return;
|
|
227
|
+
|
|
228
|
+
// Reset nested count when opening (in case it wasn't properly reset)
|
|
229
|
+
this.nestedOpenCount = 0;
|
|
230
|
+
this.updateNestedState();
|
|
231
|
+
|
|
218
232
|
this.dialog.showModal();
|
|
219
233
|
document.body.classList.add("overflow-hidden");
|
|
220
|
-
|
|
221
|
-
|
|
234
|
+
|
|
235
|
+
// For nested dialogs, hide the backdrop and notify parent
|
|
236
|
+
if (this.isNested && this.parentDialog) {
|
|
237
|
+
this.backdrop.classList.add("hidden");
|
|
238
|
+
this.parentDialog.onNestedDialogOpen();
|
|
239
|
+
} else {
|
|
240
|
+
this.backdrop.classList.remove("hidden");
|
|
241
|
+
this.backdrop.dataset.state = "open";
|
|
242
|
+
}
|
|
243
|
+
|
|
222
244
|
this.dialog.dataset.state = "open";
|
|
223
245
|
}
|
|
224
246
|
|
|
225
247
|
private close(): void {
|
|
226
248
|
if (!this.dialog || !this.backdrop) return;
|
|
249
|
+
|
|
227
250
|
this.dialog.dataset.state = "closed";
|
|
228
|
-
|
|
251
|
+
|
|
252
|
+
// Notify parent dialog that nested dialog is closing
|
|
253
|
+
if (this.isNested && this.parentDialog) {
|
|
254
|
+
this.parentDialog.onNestedDialogClose();
|
|
255
|
+
} else {
|
|
256
|
+
this.backdrop.dataset.state = "closed";
|
|
257
|
+
}
|
|
229
258
|
|
|
230
259
|
// Wait for animation to finish before hiding backdrop
|
|
231
260
|
setTimeout(() => {
|
|
232
|
-
this.
|
|
261
|
+
if (!this.isNested) {
|
|
262
|
+
this.backdrop?.classList.add("hidden");
|
|
263
|
+
}
|
|
233
264
|
this.dialog?.close();
|
|
234
265
|
const stillOpen = document.querySelectorAll("dialog[open]").length;
|
|
235
266
|
if (stillOpen === 0) {
|
|
@@ -237,23 +268,84 @@ const { class: className, ...rest } = Astro.props;
|
|
|
237
268
|
}
|
|
238
269
|
}, this.animationDuration);
|
|
239
270
|
}
|
|
240
|
-
}
|
|
241
271
|
|
|
242
|
-
|
|
243
|
-
|
|
272
|
+
/**
|
|
273
|
+
* Called by child dialogs when they open
|
|
274
|
+
*/
|
|
275
|
+
public onNestedDialogOpen(): void {
|
|
276
|
+
this.nestedOpenCount++;
|
|
277
|
+
this.updateNestedState();
|
|
278
|
+
// Propagate up the chain to grandparent dialogs
|
|
279
|
+
if (this.parentDialog) {
|
|
280
|
+
this.parentDialog.onNestedDialogOpen();
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
/**
|
|
285
|
+
* Called by child dialogs when they close
|
|
286
|
+
*/
|
|
287
|
+
public onNestedDialogClose(): void {
|
|
288
|
+
this.nestedOpenCount = Math.max(0, this.nestedOpenCount - 1);
|
|
289
|
+
this.updateNestedState();
|
|
290
|
+
// Propagate up the chain to grandparent dialogs
|
|
291
|
+
if (this.parentDialog) {
|
|
292
|
+
this.parentDialog.onNestedDialogClose();
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
/**
|
|
297
|
+
* Updates the nested dialog state attributes
|
|
298
|
+
*/
|
|
299
|
+
private updateNestedState(): void {
|
|
300
|
+
if (!this.dialog) return;
|
|
301
|
+
|
|
302
|
+
if (this.nestedOpenCount > 0) {
|
|
303
|
+
this.dialog.setAttribute("data-nested-dialog-open", "");
|
|
304
|
+
this.dialog.style.setProperty("--nested-dialogs", String(this.nestedOpenCount));
|
|
305
|
+
} else {
|
|
306
|
+
this.dialog.removeAttribute("data-nested-dialog-open");
|
|
307
|
+
this.dialog.style.removeProperty("--nested-dialogs");
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
/**
|
|
312
|
+
* Links this dialog to its parent dialog (called after all dialogs are initialized)
|
|
313
|
+
*/
|
|
314
|
+
public linkParentDialog(): void {
|
|
315
|
+
const parentDialogWrapper = this.dialogWrapper.parentElement?.closest(".starwind-dialog");
|
|
316
|
+
if (parentDialogWrapper) {
|
|
317
|
+
this.isNested = true;
|
|
318
|
+
const parentInstance = dialogInstances.get(parentDialogWrapper as HTMLElement);
|
|
319
|
+
if (parentInstance) {
|
|
320
|
+
this.parentDialog = parentInstance;
|
|
321
|
+
}
|
|
322
|
+
}
|
|
323
|
+
}
|
|
324
|
+
}
|
|
244
325
|
|
|
245
326
|
// Initialize all dialogs
|
|
246
327
|
const setupDialogs = () => {
|
|
247
|
-
|
|
328
|
+
// First pass: create all dialog instances
|
|
329
|
+
document.querySelectorAll(".starwind-dialog").forEach((dialogWrapper) => {
|
|
248
330
|
const wrapper = dialogWrapper as HTMLElement;
|
|
249
331
|
if (!dialogInstances.has(wrapper)) {
|
|
250
|
-
dialogInstances.set(wrapper, new DialogHandler(wrapper,
|
|
332
|
+
dialogInstances.set(wrapper, new DialogHandler(wrapper, dialogCounter++));
|
|
333
|
+
}
|
|
334
|
+
});
|
|
335
|
+
|
|
336
|
+
// Second pass: link parent dialogs (now that all instances exist)
|
|
337
|
+
document.querySelectorAll(".starwind-dialog").forEach((dialogWrapper) => {
|
|
338
|
+
const wrapper = dialogWrapper as HTMLElement;
|
|
339
|
+
const instance = dialogInstances.get(wrapper);
|
|
340
|
+
if (instance) {
|
|
341
|
+
instance.linkParentDialog();
|
|
251
342
|
}
|
|
252
343
|
});
|
|
253
344
|
};
|
|
254
345
|
|
|
255
346
|
setupDialogs();
|
|
256
347
|
document.addEventListener("astro:after-swap", setupDialogs);
|
|
348
|
+
document.addEventListener("starwind:init", setupDialogs);
|
|
257
349
|
</script>
|
|
258
350
|
|
|
259
351
|
<style>
|
|
@@ -20,11 +20,15 @@ export const dialogBackdrop = tv({
|
|
|
20
20
|
|
|
21
21
|
export const dialogContent = tv({
|
|
22
22
|
base: [
|
|
23
|
+
"starwind-dialog-content",
|
|
23
24
|
"fixed top-16 left-[50%] z-50 translate-x-[-50%] sm:top-[50%] sm:translate-y-[-50%]",
|
|
24
|
-
"bg-background w-full max-w-md border p-8 shadow-lg
|
|
25
|
-
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards",
|
|
25
|
+
"bg-background w-full max-w-md rounded-lg border p-8 shadow-lg",
|
|
26
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards transition-[translate,scale,opacity]",
|
|
26
27
|
"fade-in zoom-in-95 slide-in-from-bottom-2",
|
|
27
28
|
"fade-out zoom-out-95 slide-out-to-bottom-2",
|
|
29
|
+
"data-[state=open]:data-[nested-dialog-open]:-translate-y-[calc(50%-var(--nested-offset)*var(--nested-dialogs,1))]",
|
|
30
|
+
"data-[state=open]:data-[nested-dialog-open]:scale-[calc(1-var(--nested-scale)*var(--nested-dialogs,1))]",
|
|
31
|
+
"max-sm:data-[state=open]:data-[nested-dialog-open]:translate-y-[calc(var(--nested-offset)*var(--nested-dialogs,1))]",
|
|
28
32
|
],
|
|
29
33
|
});
|
|
30
34
|
|
|
@@ -65,3 +69,10 @@ const { class: className, animationDuration = 200, ...rest } = Astro.props;
|
|
|
65
69
|
<span class="sr-only">Close</span>
|
|
66
70
|
</button>
|
|
67
71
|
</dialog>
|
|
72
|
+
|
|
73
|
+
<style>
|
|
74
|
+
.starwind-dialog-content {
|
|
75
|
+
--nested-offset: 1rem;
|
|
76
|
+
--nested-scale: 0.05;
|
|
77
|
+
}
|
|
78
|
+
</style>
|
|
@@ -10,7 +10,9 @@ type Props = Omit<HTMLAttributes<"h2">, "id"> & {
|
|
|
10
10
|
children: any;
|
|
11
11
|
};
|
|
12
12
|
|
|
13
|
-
export const dialogTitle = tv({
|
|
13
|
+
export const dialogTitle = tv({
|
|
14
|
+
base: "font-heading text-xl leading-none font-semibold tracking-tight",
|
|
15
|
+
});
|
|
14
16
|
|
|
15
17
|
const { class: className, ...rest } = Astro.props;
|
|
16
18
|
---
|
|
@@ -360,16 +360,18 @@ const { class: className, openOnHover = false, closeDelay = 200, ...rest } = Ast
|
|
|
360
360
|
|
|
361
361
|
// Store instances in a WeakMap to avoid memory leaks
|
|
362
362
|
const dropdownInstances = new WeakMap<HTMLElement, DropdownHandler>();
|
|
363
|
+
let dropdownCounter = 0;
|
|
363
364
|
|
|
364
365
|
// Initialize dropdowns
|
|
365
366
|
const initDropdowns = () => {
|
|
366
|
-
document.querySelectorAll(".starwind-dropdown").forEach((dropdown
|
|
367
|
+
document.querySelectorAll(".starwind-dropdown").forEach((dropdown) => {
|
|
367
368
|
if (dropdown instanceof HTMLElement && !dropdownInstances.has(dropdown)) {
|
|
368
|
-
dropdownInstances.set(dropdown, new DropdownHandler(dropdown,
|
|
369
|
+
dropdownInstances.set(dropdown, new DropdownHandler(dropdown, dropdownCounter++));
|
|
369
370
|
}
|
|
370
371
|
});
|
|
371
372
|
};
|
|
372
373
|
|
|
373
374
|
initDropdowns();
|
|
374
375
|
document.addEventListener("astro:after-swap", initDropdowns);
|
|
376
|
+
document.addEventListener("starwind:init", initDropdowns);
|
|
375
377
|
</script>
|
|
@@ -21,7 +21,7 @@ export const dropzone = tv({
|
|
|
21
21
|
"starwind-dropzone",
|
|
22
22
|
"relative flex w-full flex-col items-center justify-center gap-1 rounded-lg px-6 py-12 shadow-xs",
|
|
23
23
|
"bg-background dark:bg-input/30 text-muted-foreground border-input cursor-pointer border border-dashed text-center text-sm",
|
|
24
|
-
"data-[is-uploading=false]:hover:bg-muted
|
|
24
|
+
"data-[is-uploading=false]:hover:bg-muted data-[drag-active=true]:bg-muted transition",
|
|
25
25
|
"focus-visible:border-outline focus-visible:ring-outline/50 outline-none focus-visible:ring-3",
|
|
26
26
|
"aria-invalid:border-error aria-invalid:focus-visible:ring-error/40",
|
|
27
27
|
],
|
|
@@ -216,12 +216,13 @@ export const dropzone = tv({
|
|
|
216
216
|
|
|
217
217
|
// Store instances in a WeakMap to avoid memory leaks
|
|
218
218
|
const fileInputInstances = new WeakMap<HTMLElement, FileInputHandler>();
|
|
219
|
+
let dropzoneCounter = 0;
|
|
219
220
|
|
|
220
221
|
const setupFileInputs = () => {
|
|
221
|
-
document.querySelectorAll<HTMLLabelElement>(".starwind-dropzone").forEach((label
|
|
222
|
+
document.querySelectorAll<HTMLLabelElement>(".starwind-dropzone").forEach((label) => {
|
|
222
223
|
if (!fileInputInstances.has(label)) {
|
|
223
224
|
try {
|
|
224
|
-
fileInputInstances.set(label, new FileInputHandler(label,
|
|
225
|
+
fileInputInstances.set(label, new FileInputHandler(label, dropzoneCounter++));
|
|
225
226
|
} catch {
|
|
226
227
|
/* ignore labels without inputs */
|
|
227
228
|
}
|
|
@@ -231,4 +232,5 @@ export const dropzone = tv({
|
|
|
231
232
|
|
|
232
233
|
setupFileInputs();
|
|
233
234
|
document.addEventListener("astro:after-swap", setupFileInputs);
|
|
235
|
+
document.addEventListener("starwind:init", setupFileInputs);
|
|
234
236
|
</script>
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
---
|
|
2
|
+
import type { ComponentProps } from "astro/types";
|
|
3
|
+
import { Image as AstroImage } from "astro:assets";
|
|
4
|
+
import { tv } from "tailwind-variants";
|
|
5
|
+
|
|
6
|
+
export const image = tv({ base: "starwind-image h-auto w-full" });
|
|
7
|
+
|
|
8
|
+
type Props = Partial<ComponentProps<typeof AstroImage>> & { inferSize?: boolean };
|
|
9
|
+
|
|
10
|
+
const { class: className, src, alt = "", inferSize = true, ...rest } = Astro.props;
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
{
|
|
14
|
+
src && (
|
|
15
|
+
<AstroImage
|
|
16
|
+
class={image({ class: className })}
|
|
17
|
+
src={src}
|
|
18
|
+
alt={alt}
|
|
19
|
+
inferSize={inferSize}
|
|
20
|
+
data-slot="image"
|
|
21
|
+
{...(rest as any)}
|
|
22
|
+
/>
|
|
23
|
+
)
|
|
24
|
+
}
|
|
@@ -140,13 +140,17 @@ const {
|
|
|
140
140
|
|
|
141
141
|
// Store instances in a WeakMap to avoid memory leaks
|
|
142
142
|
const radioGroupInstances = new WeakMap<HTMLElement, RadioGroupHandler>();
|
|
143
|
+
let radioGroupCounter = 0;
|
|
143
144
|
|
|
144
145
|
const setupRadioGroups = () => {
|
|
145
146
|
document
|
|
146
147
|
.querySelectorAll<HTMLFieldSetElement>(".starwind-radio-group")
|
|
147
|
-
.forEach((radioGroup
|
|
148
|
+
.forEach((radioGroup) => {
|
|
148
149
|
if (!radioGroupInstances.has(radioGroup)) {
|
|
149
|
-
radioGroupInstances.set(
|
|
150
|
+
radioGroupInstances.set(
|
|
151
|
+
radioGroup,
|
|
152
|
+
new RadioGroupHandler(radioGroup, radioGroupCounter++),
|
|
153
|
+
);
|
|
150
154
|
}
|
|
151
155
|
});
|
|
152
156
|
};
|
|
@@ -154,4 +158,5 @@ const {
|
|
|
154
158
|
// Initialize on page load and after Astro view transitions
|
|
155
159
|
setupRadioGroups();
|
|
156
160
|
document.addEventListener("astro:after-swap", setupRadioGroups);
|
|
161
|
+
document.addEventListener("starwind:init", setupRadioGroups);
|
|
157
162
|
</script>
|
|
@@ -717,18 +717,20 @@ const { class: className, name, defaultValue, required, ...rest } = Astro.props;
|
|
|
717
717
|
|
|
718
718
|
// Store instances in a WeakMap to avoid memory leaks
|
|
719
719
|
const selectInstances = new WeakMap<HTMLElement, SelectHandler>();
|
|
720
|
+
let selectCounter = 0;
|
|
720
721
|
|
|
721
722
|
// Initialize selects
|
|
722
723
|
const initSelects = () => {
|
|
723
|
-
document.querySelectorAll(".starwind-select").forEach((select
|
|
724
|
+
document.querySelectorAll(".starwind-select").forEach((select) => {
|
|
724
725
|
if (select instanceof HTMLElement && !selectInstances.has(select)) {
|
|
725
|
-
selectInstances.set(select, new SelectHandler(select,
|
|
726
|
+
selectInstances.set(select, new SelectHandler(select, selectCounter++));
|
|
726
727
|
}
|
|
727
728
|
});
|
|
728
729
|
};
|
|
729
730
|
|
|
730
731
|
initSelects();
|
|
731
732
|
document.addEventListener("astro:after-swap", initSelects);
|
|
733
|
+
document.addEventListener("starwind:init", initSelects);
|
|
732
734
|
</script>
|
|
733
735
|
|
|
734
736
|
<style is:global>
|
|
@@ -7,7 +7,7 @@ type Props = HTMLAttributes<"h2">;
|
|
|
7
7
|
const { class: className, ...rest } = Astro.props;
|
|
8
8
|
|
|
9
9
|
export const sheetTitle = tv({
|
|
10
|
-
base: ["starwind-sheet-title", "text-foreground font-semibold"],
|
|
10
|
+
base: ["starwind-sheet-title", "text-foreground font-heading font-semibold"],
|
|
11
11
|
});
|
|
12
12
|
---
|
|
13
13
|
|