@starwind-ui/core 1.3.1 → 1.4.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 +13 -13
- package/dist/index.js.map +1 -1
- package/dist/src/components/alert/Alert.astro +4 -10
- package/dist/src/components/avatar/Avatar.astro +2 -13
- package/dist/src/components/avatar/AvatarImage.astro +1 -0
- package/dist/src/components/badge/Badge.astro +10 -31
- package/dist/src/components/button/Button.astro +6 -23
- package/dist/src/components/checkbox/Checkbox.astro +9 -31
- package/dist/src/components/dialog/DialogTitle.astro +1 -0
- package/dist/src/components/input/Input.astro +3 -3
- package/dist/src/components/label/Label.astro +4 -3
- package/dist/src/components/pagination/Pagination.astro +1 -1
- package/dist/src/components/pagination/PaginationContent.astro +4 -1
- package/dist/src/components/pagination/PaginationEllipsis.astro +1 -1
- package/dist/src/components/pagination/PaginationItem.astro +4 -1
- package/dist/src/components/select/Select.astro +13 -4
- package/dist/src/components/select/SelectGroup.astro +1 -0
- package/dist/src/components/select/SelectTrigger.astro +2 -0
- package/dist/src/components/tabs/Tabs.astro +2 -2
- package/dist/src/components/textarea/Textarea.astro +3 -3
- package/dist/src/components/tooltip/TooltipContent.astro +1 -1
- package/dist/src/components/tooltip/TooltipTrigger.astro +1 -0
- package/package.json +11 -1
package/dist/index.js
CHANGED
|
@@ -7,21 +7,21 @@ var registry_default = {
|
|
|
7
7
|
$schema: "https://starwind.dev/registry-schema.json",
|
|
8
8
|
components: [
|
|
9
9
|
{ name: "accordion", type: "component", version: "1.1.0", dependencies: [] },
|
|
10
|
-
{ name: "alert", type: "component", version: "1.1.
|
|
11
|
-
{ name: "avatar", type: "component", version: "1.1.
|
|
12
|
-
{ name: "badge", type: "component", version: "1.1.
|
|
13
|
-
{ name: "button", type: "component", version: "2.0.
|
|
10
|
+
{ name: "alert", type: "component", version: "1.1.1", dependencies: [] },
|
|
11
|
+
{ name: "avatar", type: "component", version: "1.1.1", dependencies: [] },
|
|
12
|
+
{ name: "badge", type: "component", version: "1.1.1", dependencies: [] },
|
|
13
|
+
{ name: "button", type: "component", version: "2.0.1", dependencies: [] },
|
|
14
14
|
{ name: "card", type: "component", version: "1.1.0", dependencies: [] },
|
|
15
|
-
{ name: "checkbox", type: "component", version: "1.
|
|
16
|
-
{ name: "dialog", type: "component", version: "1.1.
|
|
17
|
-
{ name: "input", type: "component", version: "1.1.
|
|
18
|
-
{ name: "label", type: "component", version: "1.1.
|
|
19
|
-
{ name: "pagination", type: "component", version: "2.0.
|
|
20
|
-
{ name: "select", type: "component", version: "1.
|
|
15
|
+
{ name: "checkbox", type: "component", version: "1.2.0", dependencies: [] },
|
|
16
|
+
{ name: "dialog", type: "component", version: "1.1.1", dependencies: [] },
|
|
17
|
+
{ name: "input", type: "component", version: "1.1.1", dependencies: [] },
|
|
18
|
+
{ name: "label", type: "component", version: "1.1.1", dependencies: [] },
|
|
19
|
+
{ name: "pagination", type: "component", version: "2.0.1", dependencies: [] },
|
|
20
|
+
{ name: "select", type: "component", version: "1.2.0", dependencies: [] },
|
|
21
21
|
{ name: "switch", type: "component", version: "1.1.0", dependencies: [] },
|
|
22
|
-
{ name: "tabs", type: "component", version: "1.1.
|
|
23
|
-
{ name: "textarea", type: "component", version: "1.1.
|
|
24
|
-
{ name: "tooltip", type: "component", version: "1.1.
|
|
22
|
+
{ name: "tabs", type: "component", version: "1.1.1", dependencies: [] },
|
|
23
|
+
{ name: "textarea", type: "component", version: "1.1.1", dependencies: [] },
|
|
24
|
+
{ name: "tooltip", type: "component", version: "1.1.1", dependencies: [] }
|
|
25
25
|
]
|
|
26
26
|
};
|
|
27
27
|
|
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
|
+
{"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\": \"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\", \"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.2.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"switch\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"tabs\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"textarea\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"tooltip\", \"type\": \"component\", \"version\": \"1.1.1\", \"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,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,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,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;;;ADCA,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":[]}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
---
|
|
2
2
|
import type { HTMLAttributes } from "astro/types";
|
|
3
|
-
import { tv } from "tailwind-variants";
|
|
3
|
+
import { tv, type VariantProps } from "tailwind-variants";
|
|
4
|
+
|
|
5
|
+
type Props = HTMLAttributes<"div"> & VariantProps<typeof alert>;
|
|
4
6
|
|
|
5
7
|
const alert = tv({
|
|
6
8
|
base: "text-foreground relative w-full rounded-lg border p-4",
|
|
@@ -18,15 +20,7 @@ const alert = tv({
|
|
|
18
20
|
defaultVariants: { variant: "default" },
|
|
19
21
|
});
|
|
20
22
|
|
|
21
|
-
|
|
22
|
-
/**
|
|
23
|
-
* Sets the variant of the alert
|
|
24
|
-
* @default "default"
|
|
25
|
-
*/
|
|
26
|
-
variant?: "default" | "primary" | "secondary" | "info" | "success" | "warning" | "error";
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
const { variant = "default", class: className, ...rest } = Astro.props;
|
|
23
|
+
const { variant, class: className, ...rest } = Astro.props;
|
|
30
24
|
---
|
|
31
25
|
|
|
32
26
|
<div class={alert({ variant, class: className })} {...rest}>
|
|
@@ -1,19 +1,8 @@
|
|
|
1
1
|
---
|
|
2
2
|
import type { HTMLAttributes } from "astro/types";
|
|
3
|
-
import { tv } from "tailwind-variants";
|
|
3
|
+
import { tv, type VariantProps } from "tailwind-variants";
|
|
4
4
|
|
|
5
|
-
interface Props extends HTMLAttributes<"div"> {
|
|
6
|
-
/**
|
|
7
|
-
* Sets the variant of the avatar
|
|
8
|
-
* @default "default"
|
|
9
|
-
*/
|
|
10
|
-
variant?: "default" | "primary" | "secondary" | "info" | "success" | "warning" | "error";
|
|
11
|
-
/**
|
|
12
|
-
* Sets the size of the avatar
|
|
13
|
-
* @default "md"
|
|
14
|
-
*/
|
|
15
|
-
size?: "sm" | "md" | "lg";
|
|
16
|
-
}
|
|
5
|
+
interface Props extends HTMLAttributes<"div">, VariantProps<typeof avatar> {}
|
|
17
6
|
|
|
18
7
|
const avatar = tv({
|
|
19
8
|
base: "text-foreground bg-muted relative overflow-hidden rounded-full border-2",
|
|
@@ -1,34 +1,13 @@
|
|
|
1
1
|
---
|
|
2
2
|
import type { HTMLAttributes } from "astro/types";
|
|
3
|
-
import { tv } from "tailwind-variants";
|
|
3
|
+
import { tv, type VariantProps } from "tailwind-variants";
|
|
4
4
|
|
|
5
|
-
interface Props
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
*/
|
|
10
|
-
variant?:
|
|
11
|
-
| "default"
|
|
12
|
-
| "primary"
|
|
13
|
-
| "secondary"
|
|
14
|
-
| "outline"
|
|
15
|
-
| "ghost"
|
|
16
|
-
| "info"
|
|
17
|
-
| "success"
|
|
18
|
-
| "warning"
|
|
19
|
-
| "error";
|
|
20
|
-
/**
|
|
21
|
-
* Sets the size of the badge
|
|
22
|
-
* @default "md"
|
|
23
|
-
*/
|
|
24
|
-
size?: "sm" | "md" | "lg";
|
|
25
|
-
/**
|
|
26
|
-
* URL to link to when badge is clicked
|
|
27
|
-
*/
|
|
28
|
-
href?: string;
|
|
29
|
-
}
|
|
5
|
+
interface Props
|
|
6
|
+
extends HTMLAttributes<"div">,
|
|
7
|
+
Omit<HTMLAttributes<"a">, "type">,
|
|
8
|
+
VariantProps<typeof badge> {}
|
|
30
9
|
|
|
31
|
-
const
|
|
10
|
+
const badge = tv({
|
|
32
11
|
base: "starwind-badge starwind-transition-colors inline-flex items-center rounded-full font-semibold focus-visible:outline-2 focus-visible:outline-offset-2",
|
|
33
12
|
variants: {
|
|
34
13
|
variant: {
|
|
@@ -59,11 +38,11 @@ const badgeVariants = tv({
|
|
|
59
38
|
defaultVariants: { variant: "default", size: "md", isLink: false },
|
|
60
39
|
});
|
|
61
40
|
|
|
62
|
-
const { variant
|
|
63
|
-
const isLink =
|
|
64
|
-
const Tag =
|
|
41
|
+
const { variant, size, class: className, ...rest } = Astro.props;
|
|
42
|
+
const isLink = Astro.props.href ? true : false;
|
|
43
|
+
const Tag = Astro.props.href ? "a" : "div";
|
|
65
44
|
---
|
|
66
45
|
|
|
67
|
-
<Tag class={
|
|
46
|
+
<Tag class={badge({ variant, size, isLink, class: className })} {...rest}>
|
|
68
47
|
<slot />
|
|
69
48
|
</Tag>
|
|
@@ -1,30 +1,13 @@
|
|
|
1
1
|
---
|
|
2
2
|
import type { HTMLAttributes } from "astro/types";
|
|
3
|
-
import { tv } from "tailwind-variants";
|
|
3
|
+
import { tv, type VariantProps } from "tailwind-variants";
|
|
4
4
|
|
|
5
|
-
interface Props
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
*/
|
|
10
|
-
variant?:
|
|
11
|
-
| "default"
|
|
12
|
-
| "primary"
|
|
13
|
-
| "secondary"
|
|
14
|
-
| "outline"
|
|
15
|
-
| "ghost"
|
|
16
|
-
| "info"
|
|
17
|
-
| "success"
|
|
18
|
-
| "warning"
|
|
19
|
-
| "error";
|
|
20
|
-
/**
|
|
21
|
-
* Sets the size of the button
|
|
22
|
-
* @default "md"
|
|
23
|
-
*/
|
|
24
|
-
size?: "sm" | "md" | "lg" | "icon";
|
|
25
|
-
}
|
|
5
|
+
interface Props
|
|
6
|
+
extends HTMLAttributes<"button">,
|
|
7
|
+
Omit<HTMLAttributes<"a">, "type">,
|
|
8
|
+
VariantProps<typeof button> {}
|
|
26
9
|
|
|
27
|
-
const { variant
|
|
10
|
+
const { variant, size, class: className, ...rest } = Astro.props;
|
|
28
11
|
|
|
29
12
|
const button = tv({
|
|
30
13
|
base: [
|
|
@@ -1,28 +1,15 @@
|
|
|
1
1
|
---
|
|
2
2
|
import Check from "@tabler/icons/outline/check.svg";
|
|
3
3
|
import type { HTMLAttributes } from "astro/types";
|
|
4
|
-
import { tv } from "tailwind-variants";
|
|
4
|
+
import { tv, type VariantProps } from "tailwind-variants";
|
|
5
5
|
|
|
6
|
-
type Props = Omit<HTMLAttributes<"input">, "type"> &
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
*/
|
|
14
|
-
label?: string;
|
|
15
|
-
/**
|
|
16
|
-
* Size variant of the checkbox
|
|
17
|
-
* @default "md"
|
|
18
|
-
*/
|
|
19
|
-
size?: "sm" | "md" | "lg";
|
|
20
|
-
/**
|
|
21
|
-
* Visual style variant of the checkbox
|
|
22
|
-
* @default "default"
|
|
23
|
-
*/
|
|
24
|
-
variant?: "default" | "primary" | "secondary" | "info" | "success" | "warning" | "error";
|
|
25
|
-
};
|
|
6
|
+
type Props = Omit<HTMLAttributes<"input">, "type"> &
|
|
7
|
+
VariantProps<typeof checkbox> & {
|
|
8
|
+
/**
|
|
9
|
+
* Optional label text to display next to the checkbox
|
|
10
|
+
*/
|
|
11
|
+
label?: string;
|
|
12
|
+
};
|
|
26
13
|
|
|
27
14
|
const checkbox = tv({
|
|
28
15
|
slots: {
|
|
@@ -77,16 +64,7 @@ const checkbox = tv({
|
|
|
77
64
|
defaultVariants: { size: "md", variant: "default" },
|
|
78
65
|
});
|
|
79
66
|
|
|
80
|
-
const {
|
|
81
|
-
id,
|
|
82
|
-
label,
|
|
83
|
-
value,
|
|
84
|
-
checked,
|
|
85
|
-
size = "md",
|
|
86
|
-
variant = "default",
|
|
87
|
-
class: className = "",
|
|
88
|
-
...rest
|
|
89
|
-
} = Astro.props;
|
|
67
|
+
const { id, label, checked, size, variant, class: className, ...rest } = Astro.props;
|
|
90
68
|
|
|
91
69
|
const { base, input, icon, label: labelClass } = checkbox({ size, variant });
|
|
92
70
|
---
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
2
|
import type { HTMLAttributes } from "astro/types";
|
|
3
|
-
import { tv } from "tailwind-variants";
|
|
3
|
+
import { tv, type VariantProps } from "tailwind-variants";
|
|
4
4
|
|
|
5
|
-
type Props = HTMLAttributes<"input"> &
|
|
5
|
+
type Props = HTMLAttributes<"input"> & VariantProps<typeof input>;
|
|
6
6
|
|
|
7
7
|
const input = tv({
|
|
8
8
|
base: [
|
|
@@ -18,7 +18,7 @@ const input = tv({
|
|
|
18
18
|
defaultVariants: { size: "md" },
|
|
19
19
|
});
|
|
20
20
|
|
|
21
|
-
const { size
|
|
21
|
+
const { size, class: className, ...rest } = Astro.props;
|
|
22
22
|
---
|
|
23
23
|
|
|
24
24
|
<input class={input({ size, class: className })} {...rest} />
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
2
|
import type { HTMLAttributes } from "astro/types";
|
|
3
|
-
import { tv } from "tailwind-variants";
|
|
3
|
+
import { tv, type VariantProps } from "tailwind-variants";
|
|
4
4
|
|
|
5
|
-
type Props = HTMLAttributes<"label"> &
|
|
5
|
+
type Props = HTMLAttributes<"label"> & VariantProps<typeof label>;
|
|
6
6
|
|
|
7
7
|
const label = tv({
|
|
8
8
|
base: [
|
|
@@ -13,9 +13,10 @@ const label = tv({
|
|
|
13
13
|
defaultVariants: { size: "md" },
|
|
14
14
|
});
|
|
15
15
|
|
|
16
|
-
const { size
|
|
16
|
+
const { size, class: className, ...rest } = Astro.props;
|
|
17
17
|
---
|
|
18
18
|
|
|
19
|
+
{/* eslint-disable-next-line astro/jsx-a11y/label-has-associated-control */}
|
|
19
20
|
<label class={label({ size, class: className })} {...rest}>
|
|
20
21
|
<slot />
|
|
21
22
|
</label>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import type { HTMLAttributes } from "astro/types";
|
|
3
3
|
import { tv } from "tailwind-variants";
|
|
4
4
|
|
|
5
|
-
type Props = HTMLAttributes<"nav"
|
|
5
|
+
type Props = HTMLAttributes<"nav">;
|
|
6
6
|
|
|
7
7
|
const pagination = tv({ base: "mx-auto flex w-full justify-center" });
|
|
8
8
|
|
|
@@ -2,7 +2,10 @@
|
|
|
2
2
|
import type { HTMLAttributes } from "astro/types";
|
|
3
3
|
import { tv } from "tailwind-variants";
|
|
4
4
|
|
|
5
|
-
type Props = HTMLAttributes<"ul"> & {
|
|
5
|
+
type Props = HTMLAttributes<"ul"> & {
|
|
6
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
7
|
+
children: any;
|
|
8
|
+
};
|
|
6
9
|
|
|
7
10
|
const paginationContent = tv({ base: "flex flex-row items-center gap-1" });
|
|
8
11
|
|
|
@@ -3,7 +3,7 @@ import Dots from "@tabler/icons/outline/dots.svg";
|
|
|
3
3
|
import type { HTMLAttributes } from "astro/types";
|
|
4
4
|
import { tv } from "tailwind-variants";
|
|
5
5
|
|
|
6
|
-
type Props = HTMLAttributes<"span"
|
|
6
|
+
type Props = HTMLAttributes<"span">;
|
|
7
7
|
|
|
8
8
|
const paginationEllipsis = tv({ base: "flex h-9 w-9 items-center justify-center" });
|
|
9
9
|
|
|
@@ -2,7 +2,10 @@
|
|
|
2
2
|
import type { HTMLAttributes } from "astro/types";
|
|
3
3
|
import { tv } from "tailwind-variants";
|
|
4
4
|
|
|
5
|
-
type Props = HTMLAttributes<"li"> & {
|
|
5
|
+
type Props = HTMLAttributes<"li"> & {
|
|
6
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
7
|
+
children: any;
|
|
8
|
+
};
|
|
6
9
|
|
|
7
10
|
const paginationItem = tv({ base: "" });
|
|
8
11
|
|
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
---
|
|
2
2
|
import type { HTMLAttributes } from "astro/types";
|
|
3
3
|
|
|
4
|
-
type Props = HTMLAttributes<"div"> & {
|
|
4
|
+
type Props = HTMLAttributes<"div"> & {
|
|
5
|
+
name?: string;
|
|
6
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
7
|
+
children: any;
|
|
8
|
+
};
|
|
5
9
|
|
|
6
|
-
const { class: className, ...rest } = Astro.props;
|
|
10
|
+
const { class: className, name, ...rest } = Astro.props;
|
|
7
11
|
---
|
|
8
12
|
|
|
9
|
-
<div class:list={["starwind-select", "relative", className]} {...rest}>
|
|
13
|
+
<div class:list={["starwind-select", "relative", className]} data-name={name} {...rest}>
|
|
10
14
|
<slot />
|
|
11
15
|
</div>
|
|
12
16
|
|
|
@@ -55,6 +59,7 @@ const { class: className, ...rest } = Astro.props;
|
|
|
55
59
|
selectField.tabIndex = -1;
|
|
56
60
|
selectField.setAttribute("aria-hidden", "true");
|
|
57
61
|
selectField.setAttribute("placeholder", "select");
|
|
62
|
+
selectField.name = this.select.getAttribute("data-name") || "";
|
|
58
63
|
|
|
59
64
|
// you can comment out this "sr-only" class line below if you want to see the native select in action
|
|
60
65
|
selectField.classList.add("starwind-sr-only");
|
|
@@ -299,7 +304,11 @@ const { class: className, ...rest } = Astro.props;
|
|
|
299
304
|
}
|
|
300
305
|
|
|
301
306
|
private toggleSelect() {
|
|
302
|
-
this.isOpen
|
|
307
|
+
if (this.isOpen) {
|
|
308
|
+
this.closeSelect();
|
|
309
|
+
} else {
|
|
310
|
+
this.openSelect();
|
|
311
|
+
}
|
|
303
312
|
}
|
|
304
313
|
|
|
305
314
|
private openSelect() {
|
|
@@ -7,6 +7,7 @@ type Props = Omit<HTMLAttributes<"button">, "role" | "type"> & {
|
|
|
7
7
|
/**
|
|
8
8
|
* The content to be rendered inside the select trigger
|
|
9
9
|
*/
|
|
10
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
10
11
|
children: any;
|
|
11
12
|
/**
|
|
12
13
|
* Whether the select field is required in a form context
|
|
@@ -31,6 +32,7 @@ const { class: className, required = false, ...rest } = Astro.props;
|
|
|
31
32
|
type="button"
|
|
32
33
|
role="combobox"
|
|
33
34
|
aria-label="Select field"
|
|
35
|
+
aria-controls=""
|
|
34
36
|
aria-expanded="false"
|
|
35
37
|
aria-haspopup="listbox"
|
|
36
38
|
aria-autocomplete="none"
|
|
@@ -133,7 +133,7 @@ const { defaultValue, syncKey, class: className, ...rest } = Astro.props;
|
|
|
133
133
|
localStorage.setItem(this.storageKey, value);
|
|
134
134
|
}
|
|
135
135
|
|
|
136
|
-
private handleKeyNavigation = (e: KeyboardEvent
|
|
136
|
+
private handleKeyNavigation = (e: KeyboardEvent): void => {
|
|
137
137
|
const key = e.key;
|
|
138
138
|
let newIndex = this.currentTabIndex;
|
|
139
139
|
|
|
@@ -206,7 +206,7 @@ const { defaultValue, syncKey, class: className, ...rest } = Astro.props;
|
|
|
206
206
|
private addEventListeners(): void {
|
|
207
207
|
this.triggers.forEach((trigger, index) => {
|
|
208
208
|
trigger.addEventListener("click", () => this.handleClick(trigger, index));
|
|
209
|
-
trigger.addEventListener("keydown", (e) => this.handleKeyNavigation(e
|
|
209
|
+
trigger.addEventListener("keydown", (e) => this.handleKeyNavigation(e));
|
|
210
210
|
});
|
|
211
211
|
}
|
|
212
212
|
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
2
|
import type { HTMLAttributes } from "astro/types";
|
|
3
|
-
import { tv } from "tailwind-variants";
|
|
3
|
+
import { tv, type VariantProps } from "tailwind-variants";
|
|
4
4
|
|
|
5
|
-
type Props = HTMLAttributes<"textarea"> &
|
|
5
|
+
type Props = HTMLAttributes<"textarea"> & VariantProps<typeof textarea>;
|
|
6
6
|
|
|
7
7
|
const textarea = tv({
|
|
8
8
|
base: [
|
|
@@ -22,7 +22,7 @@ const textarea = tv({
|
|
|
22
22
|
defaultVariants: { size: "md" },
|
|
23
23
|
});
|
|
24
24
|
|
|
25
|
-
const { size
|
|
25
|
+
const { size, class: className, ...rest } = Astro.props;
|
|
26
26
|
---
|
|
27
27
|
|
|
28
28
|
<textarea class={textarea({ size, class: className })} {...rest}></textarea>
|
|
@@ -33,7 +33,7 @@ type Props = HTMLAttributes<"div"> & {
|
|
|
33
33
|
const tooltipContent = tv({
|
|
34
34
|
base: [
|
|
35
35
|
"starwind-tooltip-content",
|
|
36
|
-
"absolute z-50 hidden px-3 py-1.5 whitespace-nowrap shadow-sm",
|
|
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
38
|
"animate-in fade-in-0 zoom-in-95",
|
|
39
39
|
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
|
package/package.json
CHANGED
|
@@ -1,7 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@starwind-ui/core",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.1",
|
|
4
4
|
"description": "Starwind UI core components and registry",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"author": {
|
|
7
|
+
"name": "webreaper",
|
|
8
|
+
"url": "https://x.com/BowTiedWebReapr"
|
|
9
|
+
},
|
|
10
|
+
"repository": {
|
|
11
|
+
"type": "git",
|
|
12
|
+
"url": "https://github.com/starwind-ui/starwind-ui.git",
|
|
13
|
+
"directory": "packages/core"
|
|
14
|
+
},
|
|
5
15
|
"type": "module",
|
|
6
16
|
"main": "./dist/index.js",
|
|
7
17
|
"types": "./dist/index.d.ts",
|