@starwind-ui/core 1.6.0 → 1.6.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.
- package/dist/index.js +4 -4
- package/dist/index.js.map +1 -1
- package/dist/src/components/alert/Alert.astro +1 -1
- package/dist/src/components/avatar/Avatar.astro +1 -1
- package/dist/src/components/badge/Badge.astro +1 -1
- package/dist/src/components/breadcrumb/BreadcrumbLink.astro +10 -8
- package/dist/src/components/breadcrumb/BreadcrumbPage.astro +7 -7
- package/dist/src/components/breadcrumb/index.ts +2 -2
- package/dist/src/components/button/Button.astro +1 -1
- package/dist/src/components/checkbox/Checkbox.astro +1 -1
- package/dist/src/components/dialog/Dialog.astro +1 -1
- package/dist/src/components/dialog/DialogContent.astro +5 -5
- package/dist/src/components/dropdown/Dropdown.astro +20 -6
- package/dist/src/components/dropdown/DropdownContent.astro +6 -6
- package/dist/src/components/dropdown/index.ts +1 -1
- package/dist/src/components/input/Input.astro +1 -1
- package/dist/src/components/label/Label.astro +1 -1
- package/dist/src/components/select/Select.astro +1 -1
- package/dist/src/components/select/SelectContent.astro +6 -6
- package/dist/src/components/table/Table.astro +1 -1
- package/dist/src/components/table/TableBody.astro +1 -1
- package/dist/src/components/table/TableCaption.astro +1 -1
- package/dist/src/components/table/TableCell.astro +1 -1
- package/dist/src/components/table/TableFoot.astro +1 -1
- package/dist/src/components/table/TableHead.astro +1 -1
- package/dist/src/components/table/TableHeader.astro +1 -1
- package/dist/src/components/table/TableRow.astro +1 -1
- package/dist/src/components/table/index.ts +1 -1
- package/dist/src/components/tabs/Tabs.astro +4 -2
- package/dist/src/components/textarea/Textarea.astro +1 -1
- package/dist/src/components/tooltip/Tooltip.astro +2 -2
- package/dist/src/components/tooltip/TooltipContent.astro +2 -2
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -14,17 +14,17 @@ var registry_default = {
|
|
|
14
14
|
{ name: "button", type: "component", version: "2.0.1", dependencies: [] },
|
|
15
15
|
{ name: "card", type: "component", version: "1.1.0", dependencies: [] },
|
|
16
16
|
{ name: "checkbox", type: "component", version: "1.2.0", dependencies: [] },
|
|
17
|
-
{ name: "dialog", type: "component", version: "1.1.
|
|
18
|
-
{ name: "dropdown", type: "component", version: "1.0.
|
|
17
|
+
{ name: "dialog", type: "component", version: "1.1.3", dependencies: [] },
|
|
18
|
+
{ name: "dropdown", type: "component", version: "1.0.3", dependencies: [] },
|
|
19
19
|
{ name: "input", type: "component", version: "1.1.1", dependencies: [] },
|
|
20
20
|
{ name: "label", type: "component", version: "1.1.1", dependencies: [] },
|
|
21
21
|
{ name: "pagination", type: "component", version: "2.0.1", dependencies: [] },
|
|
22
|
-
{ name: "select", type: "component", version: "1.3.
|
|
22
|
+
{ name: "select", type: "component", version: "1.3.1", dependencies: [] },
|
|
23
23
|
{ name: "switch", type: "component", version: "1.1.0", dependencies: [] },
|
|
24
24
|
{ name: "table", type: "component", version: "1.0.0", dependencies: [] },
|
|
25
25
|
{ name: "tabs", type: "component", version: "1.2.0", dependencies: [] },
|
|
26
26
|
{ name: "textarea", type: "component", version: "1.1.1", dependencies: [] },
|
|
27
|
-
{ name: "tooltip", type: "component", version: "1.1.
|
|
27
|
+
{ name: "tooltip", type: "component", version: "1.1.2", dependencies: [] }
|
|
28
28
|
]
|
|
29
29
|
};
|
|
30
30
|
|
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\";\nimport componentRegistry from \"./registry.json\" with { type: \"json\" };\n\n/**\n * Component metadata interface describing a Starwind UI component\n */\nexport interface ComponentMeta {\n\tname: string;\n\tversion: string;\n\ttype: \"component\";\n\tdependencies: string[];\n}\n\n/**\n * Registry interface containing all available components\n */\nexport interface Registry {\n\tcomponents: 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\t// In production (when installed as a dependency), the components will be in dist/src/components\n\t// In development, they will be in src/components\n\tconst componentsDir = __dirname.includes(\"dist\") ? \"src/components\" : \"src/components\";\n\treturn 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\t\"$schema\": \"https://starwind.dev/registry-schema.json\",\n\t\"components\": [\n\t\t{ \"name\": \"accordion\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"alert\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"avatar\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"badge\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"breadcrumb\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"button\", \"type\": \"component\", \"version\": \"2.0.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"card\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"checkbox\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"dialog\", \"type\": \"component\", \"version\": \"1.1.
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/registry.json"],"sourcesContent":["import { join } from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\nimport componentRegistry from \"./registry.json\" with { type: \"json\" };\n\n/**\n * Component metadata interface describing a Starwind UI component\n */\nexport interface ComponentMeta {\n\tname: string;\n\tversion: string;\n\ttype: \"component\";\n\tdependencies: string[];\n}\n\n/**\n * Registry interface containing all available components\n */\nexport interface Registry {\n\tcomponents: 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\t// In production (when installed as a dependency), the components will be in dist/src/components\n\t// In development, they will be in src/components\n\tconst componentsDir = __dirname.includes(\"dist\") ? \"src/components\" : \"src/components\";\n\treturn 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\t\"$schema\": \"https://starwind.dev/registry-schema.json\",\n\t\"components\": [\n\t\t{ \"name\": \"accordion\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"alert\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"avatar\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"badge\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"breadcrumb\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"button\", \"type\": \"component\", \"version\": \"2.0.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"card\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"checkbox\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"dialog\", \"type\": \"component\", \"version\": \"1.1.3\", \"dependencies\": [] },\n\t\t{ \"name\": \"dropdown\", \"type\": \"component\", \"version\": \"1.0.3\", \"dependencies\": [] },\n\t\t{ \"name\": \"input\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"label\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"pagination\", \"type\": \"component\", \"version\": \"2.0.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"select\", \"type\": \"component\", \"version\": \"1.3.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"switch\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"table\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"tabs\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"textarea\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"tooltip\", \"type\": \"component\", \"version\": \"1.1.2\", \"dependencies\": [] }\n\t]\n}\n"],"mappings":";AAAA,SAAS,YAAY;AACrB,SAAS,qBAAqB;;;ACD9B;AAAA,EACC,SAAW;AAAA,EACX,YAAc;AAAA,IACb,EAAE,MAAQ,aAAa,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IACnF,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E,EAAE,MAAQ,cAAc,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IACpF,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,QAAQ,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC9E,EAAE,MAAQ,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E,EAAE,MAAQ,cAAc,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IACpF,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E,EAAE,MAAQ,QAAQ,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC9E,EAAE,MAAQ,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,EAAE,MAAQ,WAAW,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,EAClF;AACD;;;ADFA,IAAM,YAAY,cAAc,IAAI,IAAI,KAAK,YAAY,GAAG,CAAC;AAQtD,IAAM,mBAAmB,CAAC,eAAuB,aAA6B;AAGpF,QAAM,gBAAgB,UAAU,SAAS,MAAM,IAAI,mBAAmB;AACtE,SAAO,KAAK,WAAW,eAAe,eAAe,QAAQ;AAC9D;AAKO,IAAM,WAAW,iBAAkB;","names":[]}
|
|
@@ -3,7 +3,7 @@ import type { HTMLAttributes } from "astro/types";
|
|
|
3
3
|
import { tv } from "tailwind-variants";
|
|
4
4
|
|
|
5
5
|
type Props = HTMLAttributes<"a"> & {
|
|
6
|
-
|
|
6
|
+
asChild?: boolean;
|
|
7
7
|
};
|
|
8
8
|
|
|
9
9
|
const breadcrumbLink = tv({ base: "hover:text-foreground transition-colors" });
|
|
@@ -11,10 +11,12 @@ const breadcrumbLink = tv({ base: "hover:text-foreground transition-colors" });
|
|
|
11
11
|
const { class: className, asChild = false, ...rest } = Astro.props;
|
|
12
12
|
---
|
|
13
13
|
|
|
14
|
-
{
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
14
|
+
{
|
|
15
|
+
asChild ? (
|
|
16
|
+
<slot />
|
|
17
|
+
) : (
|
|
18
|
+
<a class={breadcrumbLink({ class: className })} {...rest}>
|
|
19
|
+
<slot />
|
|
20
|
+
</a>
|
|
21
|
+
)
|
|
22
|
+
}
|
|
@@ -9,12 +9,12 @@ const breadcrumbPage = tv({ base: "text-foreground font-normal" });
|
|
|
9
9
|
const { class: className, ...rest } = Astro.props;
|
|
10
10
|
---
|
|
11
11
|
|
|
12
|
-
<span
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
12
|
+
<span
|
|
13
|
+
role="link"
|
|
14
|
+
aria-disabled="true"
|
|
15
|
+
aria-current="page"
|
|
16
|
+
class={breadcrumbPage({ class: className })}
|
|
17
|
+
{...rest}
|
|
18
18
|
>
|
|
19
|
-
|
|
19
|
+
<slot />
|
|
20
20
|
</span>
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import Breadcrumb from "./Breadcrumb.astro";
|
|
2
|
-
import BreadcrumbList from "./BreadcrumbList.astro";
|
|
3
2
|
import BreadcrumbEllipsis from "./BreadcrumbEllipsis.astro";
|
|
4
3
|
import BreadcrumbItem from "./BreadcrumbItem.astro";
|
|
5
4
|
import BreadcrumbLink from "./BreadcrumbLink.astro";
|
|
6
|
-
import
|
|
5
|
+
import BreadcrumbList from "./BreadcrumbList.astro";
|
|
7
6
|
import BreadcrumbPage from "./BreadcrumbPage.astro";
|
|
7
|
+
import BreadcrumbSeparator from "./BreadcrumbSeparator.astro";
|
|
8
8
|
|
|
9
9
|
export {
|
|
10
10
|
Breadcrumb,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
import Check from "@tabler/icons/outline/check.svg";
|
|
3
3
|
import type { HTMLAttributes } from "astro/types";
|
|
4
|
-
import {
|
|
4
|
+
import { type VariantProps, tv } from "tailwind-variants";
|
|
5
5
|
|
|
6
6
|
type Props = Omit<HTMLAttributes<"input">, "type"> &
|
|
7
7
|
VariantProps<typeof checkbox> & {
|
|
@@ -13,8 +13,8 @@ type Props = HTMLAttributes<"dialog"> & {
|
|
|
13
13
|
const dialogBackdrop = tv({
|
|
14
14
|
base: [
|
|
15
15
|
"starwind-dialog-backdrop fixed inset-0 top-0 left-0 z-50 hidden h-screen w-screen bg-black/80",
|
|
16
|
-
"data-[state=open]:animate-in
|
|
17
|
-
"data-[state=closed]:animate-out data-[state=closed]:fade-out
|
|
16
|
+
"data-[state=open]:animate-in fade-in",
|
|
17
|
+
"data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fade-out",
|
|
18
18
|
],
|
|
19
19
|
});
|
|
20
20
|
|
|
@@ -22,9 +22,9 @@ const dialogContent = tv({
|
|
|
22
22
|
base: [
|
|
23
23
|
"fixed top-16 left-[50%] z-50 translate-x-[-50%] sm:top-[50%] sm:translate-y-[-50%]",
|
|
24
24
|
"bg-background w-full max-w-md border p-8 shadow-lg sm:rounded-lg",
|
|
25
|
-
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
26
|
-
"
|
|
27
|
-
"
|
|
25
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards",
|
|
26
|
+
"fade-in zoom-in-95 slide-in-from-bottom-2",
|
|
27
|
+
"fade-out zoom-out-95 slide-out-to-bottom-2",
|
|
28
28
|
],
|
|
29
29
|
});
|
|
30
30
|
|
|
@@ -40,6 +40,8 @@ const { class: className, openOnHover = false, closeDelay = 200, ...rest } = Ast
|
|
|
40
40
|
private openOnHover: boolean;
|
|
41
41
|
private closeDelay: number;
|
|
42
42
|
private closeTimerRef: number | null = null;
|
|
43
|
+
private lastOpenSource: "keyboard" | "mouse" = "keyboard";
|
|
44
|
+
private lastCloseSource: "keyboard" | "mouse" = "keyboard";
|
|
43
45
|
|
|
44
46
|
constructor(dropdown: HTMLElement, dropdownIdx: number) {
|
|
45
47
|
this.dropdown = dropdown;
|
|
@@ -94,6 +96,7 @@ const { class: className, openOnHover = false, closeDelay = 200, ...rest } = Ast
|
|
|
94
96
|
// Handle trigger click
|
|
95
97
|
this.trigger.addEventListener("click", (e) => {
|
|
96
98
|
e.preventDefault();
|
|
99
|
+
this.lastOpenSource = e.detail === 0 ? "keyboard" : "mouse";
|
|
97
100
|
this.toggleDropdown();
|
|
98
101
|
});
|
|
99
102
|
|
|
@@ -101,12 +104,15 @@ const { class: className, openOnHover = false, closeDelay = 200, ...rest } = Ast
|
|
|
101
104
|
this.trigger.addEventListener("keydown", (e) => {
|
|
102
105
|
if (e.key === "Enter" || e.key === " ") {
|
|
103
106
|
e.preventDefault();
|
|
107
|
+
this.lastOpenSource = "keyboard";
|
|
104
108
|
this.toggleDropdown();
|
|
105
109
|
} else if (e.key === "Escape" && this.isOpen) {
|
|
106
110
|
e.preventDefault();
|
|
111
|
+
this.lastCloseSource = "keyboard";
|
|
107
112
|
this.closeDropdown();
|
|
108
113
|
} else if (this.isOpen && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
|
|
109
114
|
e.preventDefault();
|
|
115
|
+
this.lastOpenSource = "keyboard";
|
|
110
116
|
this.updateDropdownItems();
|
|
111
117
|
if (e.key === "ArrowDown") {
|
|
112
118
|
this.focusItem(0); // Focus first item when opening with arrow down
|
|
@@ -181,6 +187,7 @@ const { class: className, openOnHover = false, closeDelay = 200, ...rest } = Ast
|
|
|
181
187
|
if (e.pointerType !== "mouse") return;
|
|
182
188
|
if (this.isClosing) return;
|
|
183
189
|
if (!this.isOpen) {
|
|
190
|
+
this.lastOpenSource = "mouse";
|
|
184
191
|
this.openDropdown();
|
|
185
192
|
} else {
|
|
186
193
|
// If the dropdown is already open, make sure to clear any close timer
|
|
@@ -191,6 +198,7 @@ const { class: className, openOnHover = false, closeDelay = 200, ...rest } = Ast
|
|
|
191
198
|
this.dropdown.addEventListener("pointerleave", (e) => {
|
|
192
199
|
if (e.pointerType !== "mouse") return;
|
|
193
200
|
if (this.isOpen) {
|
|
201
|
+
this.lastCloseSource = "mouse";
|
|
194
202
|
this.closeDropdownDelayed();
|
|
195
203
|
}
|
|
196
204
|
});
|
|
@@ -290,18 +298,24 @@ const { class: className, openOnHover = false, closeDelay = 200, ...rest } = Ast
|
|
|
290
298
|
this.isOpen = false;
|
|
291
299
|
this.content.setAttribute("data-state", "closed");
|
|
292
300
|
|
|
293
|
-
// Set focus back on trigger
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
this.
|
|
297
|
-
|
|
301
|
+
// Set focus back on trigger only if opened or closed by keyboard
|
|
302
|
+
if (
|
|
303
|
+
!this.openOnHover ||
|
|
304
|
+
this.lastOpenSource === "keyboard" ||
|
|
305
|
+
this.lastCloseSource === "keyboard"
|
|
306
|
+
) {
|
|
307
|
+
requestAnimationFrame(() => {
|
|
308
|
+
if (!this.trigger) return;
|
|
309
|
+
this.trigger.focus();
|
|
310
|
+
});
|
|
311
|
+
}
|
|
298
312
|
|
|
299
313
|
// Give the content time to animate before hiding
|
|
300
314
|
setTimeout(() => {
|
|
301
315
|
if (!this.content) return;
|
|
302
316
|
this.content.style.display = "none";
|
|
303
317
|
this.isClosing = false;
|
|
304
|
-
}, this.animationDuration
|
|
318
|
+
}, this.animationDuration);
|
|
305
319
|
|
|
306
320
|
this.trigger.setAttribute("aria-expanded", "false");
|
|
307
321
|
|
|
@@ -29,19 +29,19 @@ const dropdownContent = tv({
|
|
|
29
29
|
base: [
|
|
30
30
|
"starwind-dropdown-content",
|
|
31
31
|
"bg-popover text-popover-foreground z-50 min-w-[9rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
|
|
32
|
-
"animate-in fade-in
|
|
33
|
-
"data-[state=closed]:animate-out data-[state=closed]:fade-out
|
|
32
|
+
"data-[state=open]:animate-in fade-in zoom-in-95",
|
|
33
|
+
"data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fade-out zoom-out-95",
|
|
34
34
|
"absolute will-change-transform",
|
|
35
35
|
],
|
|
36
36
|
variants: {
|
|
37
37
|
side: {
|
|
38
|
-
bottom: "slide-in-from-top-2
|
|
39
|
-
top: "slide-in-from-bottom-2
|
|
38
|
+
bottom: "slide-in-from-top-2 slide-out-to-top-2 top-full",
|
|
39
|
+
top: "slide-in-from-bottom-2 slide-out-to-bottom-2 bottom-full",
|
|
40
40
|
},
|
|
41
41
|
align: {
|
|
42
|
-
start: "slide-in-from-left-1
|
|
42
|
+
start: "slide-in-from-left-1 slide-out-to-left-1 left-0",
|
|
43
43
|
center: "left-1/2 -translate-x-1/2",
|
|
44
|
-
end: "slide-in-from-right-1
|
|
44
|
+
end: "slide-in-from-right-1 slide-out-to-right-1 right-0",
|
|
45
45
|
},
|
|
46
46
|
},
|
|
47
47
|
defaultVariants: {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import Dropdown from "./Dropdown.astro";
|
|
2
|
-
import DropdownTrigger from "./DropdownTrigger.astro";
|
|
3
2
|
import DropdownContent from "./DropdownContent.astro";
|
|
4
3
|
import DropdownItem from "./DropdownItem.astro";
|
|
5
4
|
import DropdownLabel from "./DropdownLabel.astro";
|
|
6
5
|
import DropdownSeparator from "./DropdownSeparator.astro";
|
|
6
|
+
import DropdownTrigger from "./DropdownTrigger.astro";
|
|
7
7
|
|
|
8
8
|
export {
|
|
9
9
|
Dropdown,
|
|
@@ -368,7 +368,7 @@ const { class: className, name, defaultValue, ...rest } = Astro.props;
|
|
|
368
368
|
setTimeout(() => {
|
|
369
369
|
if (!this.content) return;
|
|
370
370
|
this.content.style.display = "none";
|
|
371
|
-
}, this.animationDuration
|
|
371
|
+
}, this.animationDuration);
|
|
372
372
|
|
|
373
373
|
this.trigger.setAttribute("aria-expanded", "false");
|
|
374
374
|
}
|
|
@@ -29,18 +29,18 @@ const selectContent = tv({
|
|
|
29
29
|
base: [
|
|
30
30
|
"starwind-select-content",
|
|
31
31
|
"bg-popover text-popover-foreground absolute z-50 min-w-[8rem] rounded-md border shadow-md",
|
|
32
|
-
"fade-in
|
|
33
|
-
"data-[state=closed]:animate-out data-[state=closed]:fade-out
|
|
32
|
+
"data-[state=open]:animate-in fade-in zoom-in-95 overflow-hidden will-change-transform",
|
|
33
|
+
"data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fade-out zoom-out-95",
|
|
34
34
|
],
|
|
35
35
|
variants: {
|
|
36
36
|
side: {
|
|
37
|
-
bottom: "slide-in-from-top-2
|
|
38
|
-
top: "slide-in-from-bottom-2
|
|
37
|
+
bottom: "slide-in-from-top-2 slide-out-to-top-2 top-full",
|
|
38
|
+
top: "slide-in-from-bottom-2 slide-out-to-bottom-2 bottom-full",
|
|
39
39
|
},
|
|
40
40
|
align: {
|
|
41
|
-
start: "slide-in-from-left-1
|
|
41
|
+
start: "slide-in-from-left-1 slide-out-to-left-1 left-0",
|
|
42
42
|
center: "left-1/2 -translate-x-1/2",
|
|
43
|
-
end: "slide-in-from-right-1
|
|
43
|
+
end: "slide-in-from-right-1 slide-out-to-right-1 right-0",
|
|
44
44
|
},
|
|
45
45
|
},
|
|
46
46
|
defaultVariants: { side: "bottom", align: "start" },
|
|
@@ -3,8 +3,8 @@ import TableBody from "./TableBody.astro";
|
|
|
3
3
|
import TableCaption from "./TableCaption.astro";
|
|
4
4
|
import TableCell from "./TableCell.astro";
|
|
5
5
|
import TableFoot from "./TableFoot.astro";
|
|
6
|
-
import TableHeader from "./TableHeader.astro";
|
|
7
6
|
import TableHead from "./TableHead.astro";
|
|
7
|
+
import TableHeader from "./TableHeader.astro";
|
|
8
8
|
import TableRow from "./TableRow.astro";
|
|
9
9
|
|
|
10
10
|
export { Table, TableBody, TableCaption, TableCell, TableFoot, TableHead, TableHeader, TableRow };
|
|
@@ -47,7 +47,9 @@ const { defaultValue, syncKey, class: className, ...rest } = Astro.props;
|
|
|
47
47
|
constructor(tabs: HTMLElement, idx: number, parentHandler: TabsHandler | null = null) {
|
|
48
48
|
this.tabs = tabs;
|
|
49
49
|
this.parentHandler = parentHandler;
|
|
50
|
-
this.triggers = Array.from(
|
|
50
|
+
this.triggers = Array.from(
|
|
51
|
+
tabs.querySelectorAll(":scope > [data-tabs-list] > [data-tabs-trigger]"),
|
|
52
|
+
);
|
|
51
53
|
this.contents = Array.from(tabs.querySelectorAll(":scope > [data-tabs-content]"));
|
|
52
54
|
this.tabsId = `starwind-tabs${idx}`;
|
|
53
55
|
this.syncKey = tabs.dataset.syncKey;
|
|
@@ -234,7 +236,7 @@ const { defaultValue, syncKey, class: className, ...rest } = Astro.props;
|
|
|
234
236
|
// Initialize any nested tabs in the active content
|
|
235
237
|
if (content.hasAttribute("data-state") && content.getAttribute("data-state") === "active") {
|
|
236
238
|
const nestedTabs = content.querySelectorAll<HTMLElement>(".starwind-tabs");
|
|
237
|
-
|
|
239
|
+
|
|
238
240
|
nestedTabs.forEach((nestedTab, nestedIdx) => {
|
|
239
241
|
// Skip tabs that already have instances
|
|
240
242
|
if (!tabInstances.has(nestedTab)) {
|
|
@@ -162,7 +162,7 @@ const {
|
|
|
162
162
|
setTimeout(() => {
|
|
163
163
|
if (!this.content) return;
|
|
164
164
|
this.content.style.display = "none";
|
|
165
|
-
}, this.animationDuration
|
|
165
|
+
}, this.animationDuration);
|
|
166
166
|
this.content.setAttribute("data-state", "closed");
|
|
167
167
|
return;
|
|
168
168
|
}
|
|
@@ -173,7 +173,7 @@ const {
|
|
|
173
173
|
setTimeout(() => {
|
|
174
174
|
if (!this.content) return;
|
|
175
175
|
this.content.style.display = "none";
|
|
176
|
-
}, this.animationDuration
|
|
176
|
+
}, this.animationDuration);
|
|
177
177
|
if (!this.content) return;
|
|
178
178
|
this.content.setAttribute("data-state", "closed");
|
|
179
179
|
this.closeTimerRef = null;
|
|
@@ -35,8 +35,8 @@ const tooltipContent = tv({
|
|
|
35
35
|
"starwind-tooltip-content",
|
|
36
36
|
"absolute z-50 hidden px-3 py-1.5 whitespace-nowrap shadow-sm will-change-transform",
|
|
37
37
|
"bg-popover text-popover-foreground rounded-md border",
|
|
38
|
-
"animate-in fade-in
|
|
39
|
-
"data-[state=closed]:animate-out data-[state=closed]:fade-out
|
|
38
|
+
"animate-in fade-in zoom-in-95",
|
|
39
|
+
"data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fade-out zoom-out-95",
|
|
40
40
|
],
|
|
41
41
|
variants: {
|
|
42
42
|
side: {
|