@starwind-ui/core 1.15.0 → 1.15.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/package.json +1 -1
- package/dist/index.d.ts +0 -28
- package/dist/index.js +0 -108
- package/dist/index.js.map +0 -1
- package/dist/src/components/accordion/Accordion.astro +0 -254
- package/dist/src/components/accordion/AccordionContent.astro +0 -33
- package/dist/src/components/accordion/AccordionItem.astro +0 -27
- package/dist/src/components/accordion/AccordionTrigger.astro +0 -32
- package/dist/src/components/accordion/index.ts +0 -15
- package/dist/src/components/alert/Alert.astro +0 -31
- package/dist/src/components/alert/AlertDescription.astro +0 -14
- package/dist/src/components/alert/AlertTitle.astro +0 -16
- package/dist/src/components/alert/index.ts +0 -13
- package/dist/src/components/alert-dialog/AlertDialog.astro +0 -275
- package/dist/src/components/alert-dialog/AlertDialogAction.astro +0 -44
- package/dist/src/components/alert-dialog/AlertDialogCancel.astro +0 -45
- package/dist/src/components/alert-dialog/AlertDialogContent.astro +0 -52
- package/dist/src/components/alert-dialog/AlertDialogDescription.astro +0 -18
- package/dist/src/components/alert-dialog/AlertDialogFooter.astro +0 -16
- package/dist/src/components/alert-dialog/AlertDialogHeader.astro +0 -14
- package/dist/src/components/alert-dialog/AlertDialogTitle.astro +0 -20
- package/dist/src/components/alert-dialog/AlertDialogTrigger.astro +0 -47
- package/dist/src/components/alert-dialog/index.ts +0 -46
- package/dist/src/components/aspect-ratio/AspectRatio.astro +0 -32
- package/dist/src/components/aspect-ratio/index.ts +0 -7
- package/dist/src/components/avatar/Avatar.astro +0 -29
- package/dist/src/components/avatar/AvatarFallback.astro +0 -18
- package/dist/src/components/avatar/AvatarImage.astro +0 -49
- package/dist/src/components/avatar/index.ts +0 -13
- package/dist/src/components/badge/Badge.astro +0 -55
- package/dist/src/components/badge/index.ts +0 -7
- package/dist/src/components/breadcrumb/Breadcrumb.astro +0 -11
- package/dist/src/components/breadcrumb/BreadcrumbEllipsis.astro +0 -28
- package/dist/src/components/breadcrumb/BreadcrumbItem.astro +0 -14
- package/dist/src/components/breadcrumb/BreadcrumbLink.astro +0 -22
- package/dist/src/components/breadcrumb/BreadcrumbList.astro +0 -16
- package/dist/src/components/breadcrumb/BreadcrumbPage.astro +0 -21
- package/dist/src/components/breadcrumb/BreadcrumbSeparator.astro +0 -23
- package/dist/src/components/breadcrumb/index.ts +0 -37
- package/dist/src/components/button/Button.astro +0 -55
- package/dist/src/components/button/index.ts +0 -7
- package/dist/src/components/button-group/ButtonGroup.astro +0 -62
- package/dist/src/components/button-group/ButtonGroupSeparator.astro +0 -27
- package/dist/src/components/button-group/ButtonGroupText.astro +0 -19
- package/dist/src/components/button-group/index.ts +0 -17
- package/dist/src/components/card/Card.astro +0 -14
- package/dist/src/components/card/CardContent.astro +0 -14
- package/dist/src/components/card/CardDescription.astro +0 -14
- package/dist/src/components/card/CardFooter.astro +0 -14
- package/dist/src/components/card/CardHeader.astro +0 -14
- package/dist/src/components/card/CardTitle.astro +0 -14
- package/dist/src/components/card/index.ts +0 -26
- package/dist/src/components/carousel/Carousel.astro +0 -55
- package/dist/src/components/carousel/CarouselContent.astro +0 -26
- package/dist/src/components/carousel/CarouselItem.astro +0 -26
- package/dist/src/components/carousel/CarouselNext.astro +0 -37
- package/dist/src/components/carousel/CarouselPrevious.astro +0 -37
- package/dist/src/components/carousel/carousel-script.ts +0 -191
- package/dist/src/components/carousel/index.ts +0 -32
- package/dist/src/components/checkbox/Checkbox.astro +0 -128
- package/dist/src/components/checkbox/index.ts +0 -7
- package/dist/src/components/collapsible/Collapsible.astro +0 -161
- package/dist/src/components/collapsible/CollapsibleContent.astro +0 -22
- package/dist/src/components/collapsible/CollapsibleTrigger.astro +0 -44
- package/dist/src/components/collapsible/index.ts +0 -13
- package/dist/src/components/dialog/Dialog.astro +0 -389
- package/dist/src/components/dialog/DialogClose.astro +0 -35
- package/dist/src/components/dialog/DialogContent.astro +0 -78
- package/dist/src/components/dialog/DialogDescription.astro +0 -14
- package/dist/src/components/dialog/DialogFooter.astro +0 -14
- package/dist/src/components/dialog/DialogHeader.astro +0 -14
- package/dist/src/components/dialog/DialogTitle.astro +0 -22
- package/dist/src/components/dialog/DialogTrigger.astro +0 -47
- package/dist/src/components/dialog/index.ts +0 -45
- package/dist/src/components/dropdown/Dropdown.astro +0 -377
- package/dist/src/components/dropdown/DropdownContent.astro +0 -81
- package/dist/src/components/dropdown/DropdownItem.astro +0 -48
- package/dist/src/components/dropdown/DropdownLabel.astro +0 -29
- package/dist/src/components/dropdown/DropdownSeparator.astro +0 -21
- package/dist/src/components/dropdown/DropdownTrigger.astro +0 -52
- package/dist/src/components/dropdown/index.ts +0 -33
- package/dist/src/components/dropzone/Dropzone.astro +0 -236
- package/dist/src/components/dropzone/DropzoneFilesList.astro +0 -26
- package/dist/src/components/dropzone/DropzoneLoadingIndicator.astro +0 -10
- package/dist/src/components/dropzone/DropzoneUploadIndicator.astro +0 -10
- package/dist/src/components/dropzone/index.ts +0 -24
- package/dist/src/components/image/Image.astro +0 -24
- package/dist/src/components/image/index.ts +0 -9
- package/dist/src/components/input/Input.astro +0 -25
- package/dist/src/components/input/index.ts +0 -7
- package/dist/src/components/input-otp/InputOtp.astro +0 -319
- package/dist/src/components/input-otp/InputOtpGroup.astro +0 -16
- package/dist/src/components/input-otp/InputOtpSeparator.astro +0 -25
- package/dist/src/components/input-otp/InputOtpSlot.astro +0 -48
- package/dist/src/components/input-otp/InputOtpTypes.ts +0 -6
- package/dist/src/components/input-otp/index.ts +0 -33
- package/dist/src/components/item/Item.astro +0 -52
- package/dist/src/components/item/ItemActions.astro +0 -16
- package/dist/src/components/item/ItemContent.astro +0 -16
- package/dist/src/components/item/ItemDescription.astro +0 -19
- package/dist/src/components/item/ItemFooter.astro +0 -16
- package/dist/src/components/item/ItemGroup.astro +0 -16
- package/dist/src/components/item/ItemHeader.astro +0 -16
- package/dist/src/components/item/ItemMedia.astro +0 -40
- package/dist/src/components/item/ItemSeparator.astro +0 -21
- package/dist/src/components/item/ItemTitle.astro +0 -16
- package/dist/src/components/item/index.ts +0 -50
- package/dist/src/components/kbd/Kbd.astro +0 -21
- package/dist/src/components/kbd/KbdGroup.astro +0 -16
- package/dist/src/components/kbd/index.ts +0 -11
- package/dist/src/components/label/Label.astro +0 -22
- package/dist/src/components/label/index.ts +0 -7
- package/dist/src/components/pagination/Pagination.astro +0 -20
- package/dist/src/components/pagination/PaginationContent.astro +0 -16
- package/dist/src/components/pagination/PaginationEllipsis.astro +0 -35
- package/dist/src/components/pagination/PaginationItem.astro +0 -16
- package/dist/src/components/pagination/PaginationLink.astro +0 -24
- package/dist/src/components/pagination/PaginationNext.astro +0 -30
- package/dist/src/components/pagination/PaginationPrevious.astro +0 -30
- package/dist/src/components/pagination/index.ts +0 -38
- package/dist/src/components/progress/Progress.astro +0 -155
- package/dist/src/components/progress/index.ts +0 -10
- package/dist/src/components/prose/Prose.astro +0 -617
- package/dist/src/components/prose/index.ts +0 -9
- package/dist/src/components/radio-group/RadioGroup.astro +0 -162
- package/dist/src/components/radio-group/RadioGroupItem.astro +0 -129
- package/dist/src/components/radio-group/RadioGroupTypes.ts +0 -6
- package/dist/src/components/radio-group/index.ts +0 -23
- package/dist/src/components/select/Select.astro +0 -751
- package/dist/src/components/select/SelectContent.astro +0 -94
- package/dist/src/components/select/SelectGroup.astro +0 -9
- package/dist/src/components/select/SelectItem.astro +0 -51
- package/dist/src/components/select/SelectLabel.astro +0 -14
- package/dist/src/components/select/SelectSearch.astro +0 -49
- package/dist/src/components/select/SelectSeparator.astro +0 -12
- package/dist/src/components/select/SelectTrigger.astro +0 -54
- package/dist/src/components/select/SelectTypes.ts +0 -13
- package/dist/src/components/select/SelectValue.astro +0 -19
- package/dist/src/components/select/index.ts +0 -49
- package/dist/src/components/separator/Separator.astro +0 -36
- package/dist/src/components/separator/index.ts +0 -7
- package/dist/src/components/sheet/Sheet.astro +0 -13
- package/dist/src/components/sheet/SheetClose.astro +0 -13
- package/dist/src/components/sheet/SheetContent.astro +0 -92
- package/dist/src/components/sheet/SheetDescription.astro +0 -16
- package/dist/src/components/sheet/SheetFooter.astro +0 -16
- package/dist/src/components/sheet/SheetHeader.astro +0 -16
- package/dist/src/components/sheet/SheetTitle.astro +0 -16
- package/dist/src/components/sheet/SheetTrigger.astro +0 -13
- package/dist/src/components/sheet/index.ts +0 -41
- package/dist/src/components/sidebar/Sidebar.astro +0 -213
- package/dist/src/components/sidebar/SidebarContent.astro +0 -24
- package/dist/src/components/sidebar/SidebarFooter.astro +0 -21
- package/dist/src/components/sidebar/SidebarGroup.astro +0 -21
- package/dist/src/components/sidebar/SidebarGroupContent.astro +0 -21
- package/dist/src/components/sidebar/SidebarGroupLabel.astro +0 -52
- package/dist/src/components/sidebar/SidebarHeader.astro +0 -21
- package/dist/src/components/sidebar/SidebarInput.astro +0 -22
- package/dist/src/components/sidebar/SidebarInset.astro +0 -21
- package/dist/src/components/sidebar/SidebarMenu.astro +0 -21
- package/dist/src/components/sidebar/SidebarMenuAction.astro +0 -59
- package/dist/src/components/sidebar/SidebarMenuBadge.astro +0 -30
- package/dist/src/components/sidebar/SidebarMenuButton.astro +0 -129
- package/dist/src/components/sidebar/SidebarMenuItem.astro +0 -21
- package/dist/src/components/sidebar/SidebarMenuSkeleton.astro +0 -40
- package/dist/src/components/sidebar/SidebarMenuSub.astro +0 -24
- package/dist/src/components/sidebar/SidebarMenuSubButton.astro +0 -49
- package/dist/src/components/sidebar/SidebarMenuSubItem.astro +0 -16
- package/dist/src/components/sidebar/SidebarProvider.astro +0 -213
- package/dist/src/components/sidebar/SidebarRail.astro +0 -71
- package/dist/src/components/sidebar/SidebarSeparator.astro +0 -22
- package/dist/src/components/sidebar/SidebarTrigger.astro +0 -66
- package/dist/src/components/sidebar/index.ts +0 -103
- package/dist/src/components/skeleton/Skeleton.astro +0 -14
- package/dist/src/components/skeleton/index.ts +0 -9
- package/dist/src/components/slider/Slider.astro +0 -411
- package/dist/src/components/slider/index.ts +0 -9
- package/dist/src/components/spinner/Spinner.astro +0 -21
- package/dist/src/components/spinner/index.ts +0 -7
- package/dist/src/components/switch/Switch.astro +0 -192
- package/dist/src/components/switch/SwitchTypes.ts +0 -6
- package/dist/src/components/switch/index.ts +0 -12
- package/dist/src/components/table/Table.astro +0 -18
- package/dist/src/components/table/TableBody.astro +0 -16
- package/dist/src/components/table/TableCaption.astro +0 -16
- package/dist/src/components/table/TableCell.astro +0 -16
- package/dist/src/components/table/TableFoot.astro +0 -16
- package/dist/src/components/table/TableHead.astro +0 -16
- package/dist/src/components/table/TableHeader.astro +0 -16
- package/dist/src/components/table/TableRow.astro +0 -16
- package/dist/src/components/table/index.ts +0 -42
- package/dist/src/components/tabs/Tabs.astro +0 -271
- package/dist/src/components/tabs/TabsContent.astro +0 -28
- package/dist/src/components/tabs/TabsList.astro +0 -22
- package/dist/src/components/tabs/TabsTrigger.astro +0 -34
- package/dist/src/components/tabs/index.ts +0 -20
- package/dist/src/components/textarea/Textarea.astro +0 -29
- package/dist/src/components/textarea/index.ts +0 -9
- package/dist/src/components/theme-toggle/ThemeToggle.astro +0 -208
- package/dist/src/components/theme-toggle/index.ts +0 -7
- package/dist/src/components/toast/ToastDescription.astro +0 -21
- package/dist/src/components/toast/ToastItem.astro +0 -54
- package/dist/src/components/toast/ToastTemplate.astro +0 -25
- package/dist/src/components/toast/ToastTitle.astro +0 -57
- package/dist/src/components/toast/Toaster.astro +0 -982
- package/dist/src/components/toast/index.ts +0 -29
- package/dist/src/components/toast/toast-manager.ts +0 -216
- package/dist/src/components/toggle/Toggle.astro +0 -174
- package/dist/src/components/toggle/ToggleTypes.ts +0 -14
- package/dist/src/components/toggle/index.ts +0 -8
- package/dist/src/components/tooltip/Tooltip.astro +0 -282
- package/dist/src/components/tooltip/TooltipContent.astro +0 -89
- package/dist/src/components/tooltip/TooltipTrigger.astro +0 -10
- package/dist/src/components/tooltip/index.ts +0 -16
- package/dist/src/components/video/Video.astro +0 -120
- package/dist/src/components/video/index.ts +0 -9
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
import type { HTMLAttributes } from "astro/types";
|
|
3
|
-
import { tv, type VariantProps } from "tailwind-variants";
|
|
4
|
-
|
|
5
|
-
type Props = HTMLAttributes<"caption"> & VariantProps<typeof tableCaption>;
|
|
6
|
-
|
|
7
|
-
export const tableCaption = tv({
|
|
8
|
-
base: "text-muted-foreground mt-4 text-sm",
|
|
9
|
-
});
|
|
10
|
-
|
|
11
|
-
const { class: className, ...rest } = Astro.props;
|
|
12
|
-
---
|
|
13
|
-
|
|
14
|
-
<caption data-slot="table-caption" class={tableCaption({ class: className })} {...rest}>
|
|
15
|
-
<slot />
|
|
16
|
-
</caption>
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
import type { HTMLAttributes } from "astro/types";
|
|
3
|
-
import { tv, type VariantProps } from "tailwind-variants";
|
|
4
|
-
|
|
5
|
-
type Props = HTMLAttributes<"td"> & VariantProps<typeof tableCell>;
|
|
6
|
-
|
|
7
|
-
export const tableCell = tv({
|
|
8
|
-
base: "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
|
9
|
-
});
|
|
10
|
-
|
|
11
|
-
const { class: className, ...rest } = Astro.props;
|
|
12
|
-
---
|
|
13
|
-
|
|
14
|
-
<td data-slot="table-cell" class={tableCell({ class: className })} {...rest}>
|
|
15
|
-
<slot />
|
|
16
|
-
</td>
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
import type { HTMLAttributes } from "astro/types";
|
|
3
|
-
import { tv, type VariantProps } from "tailwind-variants";
|
|
4
|
-
|
|
5
|
-
type Props = HTMLAttributes<"tfoot"> & VariantProps<typeof tableFoot>;
|
|
6
|
-
|
|
7
|
-
export const tableFoot = tv({
|
|
8
|
-
base: "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
|
|
9
|
-
});
|
|
10
|
-
|
|
11
|
-
const { class: className, ...rest } = Astro.props;
|
|
12
|
-
---
|
|
13
|
-
|
|
14
|
-
<tfoot data-slot="table-foot" class={tableFoot({ class: className })} {...rest}>
|
|
15
|
-
<slot />
|
|
16
|
-
</tfoot>
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
import type { HTMLAttributes } from "astro/types";
|
|
3
|
-
import { tv, type VariantProps } from "tailwind-variants";
|
|
4
|
-
|
|
5
|
-
type Props = HTMLAttributes<"th"> & VariantProps<typeof tableHead>;
|
|
6
|
-
|
|
7
|
-
export const tableHead = tv({
|
|
8
|
-
base: "text-muted-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
|
9
|
-
});
|
|
10
|
-
|
|
11
|
-
const { class: className, ...rest } = Astro.props;
|
|
12
|
-
---
|
|
13
|
-
|
|
14
|
-
<th data-slot="table-head" class={tableHead({ class: className })} {...rest} role="columnheader">
|
|
15
|
-
<slot />
|
|
16
|
-
</th>
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
import type { HTMLAttributes } from "astro/types";
|
|
3
|
-
import { tv, type VariantProps } from "tailwind-variants";
|
|
4
|
-
|
|
5
|
-
type Props = HTMLAttributes<"thead"> & VariantProps<typeof tableHeader>;
|
|
6
|
-
|
|
7
|
-
export const tableHeader = tv({
|
|
8
|
-
base: "[&_tr]:border-b",
|
|
9
|
-
});
|
|
10
|
-
|
|
11
|
-
const { class: className, ...rest } = Astro.props;
|
|
12
|
-
---
|
|
13
|
-
|
|
14
|
-
<thead data-slot="table-header" class={tableHeader({ class: className })} {...rest}>
|
|
15
|
-
<slot />
|
|
16
|
-
</thead>
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
import type { HTMLAttributes } from "astro/types";
|
|
3
|
-
import { tv, type VariantProps } from "tailwind-variants";
|
|
4
|
-
|
|
5
|
-
type Props = HTMLAttributes<"tr"> & VariantProps<typeof tableRow>;
|
|
6
|
-
|
|
7
|
-
export const tableRow = tv({
|
|
8
|
-
base: "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
|
|
9
|
-
});
|
|
10
|
-
|
|
11
|
-
const { class: className, ...rest } = Astro.props;
|
|
12
|
-
---
|
|
13
|
-
|
|
14
|
-
<tr data-slot="table-row" class={tableRow({ class: className })} {...rest} role="row">
|
|
15
|
-
<slot />
|
|
16
|
-
</tr>
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import Table, { table } from "./Table.astro";
|
|
2
|
-
import TableBody, { tableBody } from "./TableBody.astro";
|
|
3
|
-
import TableCaption, { tableCaption } from "./TableCaption.astro";
|
|
4
|
-
import TableCell, { tableCell } from "./TableCell.astro";
|
|
5
|
-
import TableFoot, { tableFoot } from "./TableFoot.astro";
|
|
6
|
-
import TableHead, { tableHead } from "./TableHead.astro";
|
|
7
|
-
import TableHeader, { tableHeader } from "./TableHeader.astro";
|
|
8
|
-
import TableRow, { tableRow } from "./TableRow.astro";
|
|
9
|
-
|
|
10
|
-
const TableVariants = {
|
|
11
|
-
table,
|
|
12
|
-
tableBody,
|
|
13
|
-
tableCaption,
|
|
14
|
-
tableCell,
|
|
15
|
-
tableFoot,
|
|
16
|
-
tableHead,
|
|
17
|
-
tableHeader,
|
|
18
|
-
tableRow,
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
export {
|
|
22
|
-
Table,
|
|
23
|
-
TableBody,
|
|
24
|
-
TableCaption,
|
|
25
|
-
TableCell,
|
|
26
|
-
TableFoot,
|
|
27
|
-
TableHead,
|
|
28
|
-
TableHeader,
|
|
29
|
-
TableRow,
|
|
30
|
-
TableVariants,
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
export default {
|
|
34
|
-
Root: Table,
|
|
35
|
-
Body: TableBody,
|
|
36
|
-
Caption: TableCaption,
|
|
37
|
-
Cell: TableCell,
|
|
38
|
-
Foot: TableFoot,
|
|
39
|
-
Head: TableHead,
|
|
40
|
-
Header: TableHeader,
|
|
41
|
-
Row: TableRow,
|
|
42
|
-
};
|
|
@@ -1,271 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
import type { HTMLAttributes } from "astro/types";
|
|
3
|
-
import { tv } from "tailwind-variants";
|
|
4
|
-
|
|
5
|
-
interface Props extends HTMLAttributes<"div"> {
|
|
6
|
-
defaultValue?: string;
|
|
7
|
-
syncKey?: string;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export const tabs = tv({ base: "starwind-tabs" });
|
|
11
|
-
|
|
12
|
-
const { defaultValue, syncKey, class: className, ...rest } = Astro.props;
|
|
13
|
-
---
|
|
14
|
-
|
|
15
|
-
<div
|
|
16
|
-
class={tabs({ class: className })}
|
|
17
|
-
data-default-value={defaultValue}
|
|
18
|
-
data-sync-key={syncKey}
|
|
19
|
-
data-slot="tabs"
|
|
20
|
-
{...rest}
|
|
21
|
-
>
|
|
22
|
-
<slot />
|
|
23
|
-
</div>
|
|
24
|
-
|
|
25
|
-
<script>
|
|
26
|
-
type TabValue = string;
|
|
27
|
-
|
|
28
|
-
interface TabsSyncEventDetail {
|
|
29
|
-
value: TabValue;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
interface TabsSyncEvent extends CustomEvent<TabsSyncEventDetail> {
|
|
33
|
-
type: `starwind-tabs-sync:${string}`;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
class TabsHandler {
|
|
37
|
-
private tabs: HTMLElement;
|
|
38
|
-
private triggers: HTMLButtonElement[];
|
|
39
|
-
private contents: HTMLElement[];
|
|
40
|
-
private currentTabIndex: number = 0;
|
|
41
|
-
private tabsId: string;
|
|
42
|
-
private syncKey?: string;
|
|
43
|
-
private storageKey: string;
|
|
44
|
-
private valueToTriggerMap: Map<string, HTMLButtonElement>;
|
|
45
|
-
private valueToContentMap: Map<string, HTMLElement>;
|
|
46
|
-
private parentHandler: TabsHandler | null = null;
|
|
47
|
-
|
|
48
|
-
constructor(tabs: HTMLElement, idx: number, parentHandler: TabsHandler | null = null) {
|
|
49
|
-
this.tabs = tabs;
|
|
50
|
-
this.parentHandler = parentHandler;
|
|
51
|
-
this.triggers = Array.from(
|
|
52
|
-
tabs.querySelectorAll(":scope > [data-tabs-list] > [data-tabs-trigger]"),
|
|
53
|
-
);
|
|
54
|
-
this.contents = Array.from(tabs.querySelectorAll(":scope > [data-tabs-content]"));
|
|
55
|
-
this.tabsId = `starwind-tabs${idx}`;
|
|
56
|
-
this.syncKey = tabs.dataset.syncKey;
|
|
57
|
-
this.storageKey = this.syncKey
|
|
58
|
-
? `starwind-tabs-${this.syncKey}`
|
|
59
|
-
: `starwind-tabs-${this.tabsId}`;
|
|
60
|
-
|
|
61
|
-
// Create maps for faster lookups
|
|
62
|
-
this.valueToTriggerMap = new Map(
|
|
63
|
-
this.triggers.map((trigger) => [trigger.getAttribute("data-value") ?? "", trigger]),
|
|
64
|
-
);
|
|
65
|
-
this.valueToContentMap = new Map(
|
|
66
|
-
this.contents.map((content) => [content.getAttribute("data-value") ?? "", content]),
|
|
67
|
-
);
|
|
68
|
-
|
|
69
|
-
this.setupIds();
|
|
70
|
-
this.initializeTab();
|
|
71
|
-
this.addEventListeners();
|
|
72
|
-
|
|
73
|
-
if (this.syncKey) {
|
|
74
|
-
this.setupSyncListener();
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
private initializeTab(): void {
|
|
79
|
-
const value = this.syncKey
|
|
80
|
-
? (localStorage.getItem(this.storageKey) ?? this.tabs.dataset.defaultValue)
|
|
81
|
-
: this.tabs.dataset.defaultValue;
|
|
82
|
-
|
|
83
|
-
if (value) {
|
|
84
|
-
this.showTab(value);
|
|
85
|
-
this.currentTabIndex = this.triggers.findIndex(
|
|
86
|
-
(trigger) => trigger.getAttribute("data-value") === value,
|
|
87
|
-
);
|
|
88
|
-
this.setTabIndex();
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
private setupSyncListener(): void {
|
|
93
|
-
document.addEventListener(`starwind-tabs-sync:${this.syncKey}`, ((e: TabsSyncEvent) => {
|
|
94
|
-
const value = e.detail.value;
|
|
95
|
-
const trigger = this.valueToTriggerMap.get(value);
|
|
96
|
-
const index = trigger ? this.triggers.indexOf(trigger) : -1;
|
|
97
|
-
|
|
98
|
-
if (index !== -1) {
|
|
99
|
-
this.showTab(value);
|
|
100
|
-
this.currentTabIndex = index;
|
|
101
|
-
this.setTabIndex();
|
|
102
|
-
}
|
|
103
|
-
}) as EventListener);
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
private setupIds(): void {
|
|
107
|
-
this.triggers.forEach((trigger, idx) => {
|
|
108
|
-
const triggerId = `${this.tabsId}-t${idx}`;
|
|
109
|
-
const contentId = `${this.tabsId}-c${idx}`;
|
|
110
|
-
const value = trigger.getAttribute("data-value");
|
|
111
|
-
|
|
112
|
-
trigger.id = triggerId;
|
|
113
|
-
|
|
114
|
-
if (value) {
|
|
115
|
-
trigger.setAttribute("aria-controls", contentId);
|
|
116
|
-
const content = this.valueToContentMap.get(value);
|
|
117
|
-
if (content) {
|
|
118
|
-
content.id = contentId;
|
|
119
|
-
content.setAttribute("aria-labelledby", triggerId);
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
});
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
private setTabIndex(): void {
|
|
126
|
-
this.triggers.forEach((trigger, index) => {
|
|
127
|
-
trigger.setAttribute("tabindex", index === this.currentTabIndex ? "0" : "-1");
|
|
128
|
-
});
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
private dispatchSyncEvent(value: TabValue): void {
|
|
132
|
-
if (!this.syncKey) return;
|
|
133
|
-
|
|
134
|
-
document.dispatchEvent(
|
|
135
|
-
new CustomEvent(`starwind-tabs-sync:${this.syncKey}`, { detail: { value } }),
|
|
136
|
-
);
|
|
137
|
-
|
|
138
|
-
localStorage.setItem(this.storageKey, value);
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
private handleKeyNavigation = (e: KeyboardEvent): void => {
|
|
142
|
-
const key = e.key;
|
|
143
|
-
let newIndex = this.currentTabIndex;
|
|
144
|
-
|
|
145
|
-
switch (key) {
|
|
146
|
-
case "ArrowRight": {
|
|
147
|
-
for (let i = 1; i < this.triggers.length; i++) {
|
|
148
|
-
const index = (this.currentTabIndex + i) % this.triggers.length;
|
|
149
|
-
if (!this.triggers[index].disabled) {
|
|
150
|
-
newIndex = index;
|
|
151
|
-
break;
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
break;
|
|
155
|
-
}
|
|
156
|
-
case "ArrowLeft": {
|
|
157
|
-
for (let i = 1; i < this.triggers.length; i++) {
|
|
158
|
-
const index = (this.currentTabIndex - i + this.triggers.length) % this.triggers.length;
|
|
159
|
-
if (!this.triggers[index].disabled) {
|
|
160
|
-
newIndex = index;
|
|
161
|
-
break;
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
break;
|
|
165
|
-
}
|
|
166
|
-
case "Home": {
|
|
167
|
-
for (let i = 0; i < this.triggers.length; i++) {
|
|
168
|
-
if (!this.triggers[i].disabled) {
|
|
169
|
-
newIndex = i;
|
|
170
|
-
break;
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
|
-
break;
|
|
174
|
-
}
|
|
175
|
-
case "End": {
|
|
176
|
-
for (let i = this.triggers.length - 1; i >= 0; i--) {
|
|
177
|
-
if (!this.triggers[i].disabled) {
|
|
178
|
-
newIndex = i;
|
|
179
|
-
break;
|
|
180
|
-
}
|
|
181
|
-
}
|
|
182
|
-
break;
|
|
183
|
-
}
|
|
184
|
-
default:
|
|
185
|
-
return;
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
e.preventDefault();
|
|
189
|
-
const newTrigger = this.triggers[newIndex];
|
|
190
|
-
const value = newTrigger.getAttribute("data-value");
|
|
191
|
-
if (value) {
|
|
192
|
-
this.showTab(value);
|
|
193
|
-
this.currentTabIndex = newIndex;
|
|
194
|
-
this.setTabIndex();
|
|
195
|
-
newTrigger.focus();
|
|
196
|
-
this.dispatchSyncEvent(value);
|
|
197
|
-
}
|
|
198
|
-
};
|
|
199
|
-
|
|
200
|
-
private handleClick = (trigger: HTMLElement, index: number): void => {
|
|
201
|
-
const value = trigger.getAttribute("data-value");
|
|
202
|
-
if (value) {
|
|
203
|
-
this.showTab(value);
|
|
204
|
-
this.currentTabIndex = index;
|
|
205
|
-
this.setTabIndex();
|
|
206
|
-
trigger.focus();
|
|
207
|
-
this.dispatchSyncEvent(value);
|
|
208
|
-
}
|
|
209
|
-
};
|
|
210
|
-
|
|
211
|
-
private addEventListeners(): void {
|
|
212
|
-
this.triggers.forEach((trigger, index) => {
|
|
213
|
-
trigger.addEventListener("click", () => this.handleClick(trigger, index));
|
|
214
|
-
trigger.addEventListener("keydown", (e) => this.handleKeyNavigation(e));
|
|
215
|
-
});
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
private showTab(value: TabValue): void {
|
|
219
|
-
const trigger = this.valueToTriggerMap.get(value);
|
|
220
|
-
const content = this.valueToContentMap.get(value);
|
|
221
|
-
|
|
222
|
-
if (!trigger || !content) return;
|
|
223
|
-
|
|
224
|
-
// Update all triggers and contents
|
|
225
|
-
this.triggers.forEach((t) => {
|
|
226
|
-
const isActive = t === trigger;
|
|
227
|
-
t.setAttribute("data-state", isActive ? "active" : "inactive");
|
|
228
|
-
t.setAttribute("aria-selected", isActive.toString());
|
|
229
|
-
});
|
|
230
|
-
|
|
231
|
-
this.contents.forEach((c) => {
|
|
232
|
-
const isActive = c === content;
|
|
233
|
-
c.setAttribute("data-state", isActive ? "active" : "inactive");
|
|
234
|
-
c.hidden = !isActive;
|
|
235
|
-
});
|
|
236
|
-
|
|
237
|
-
// Initialize any nested tabs in the active content
|
|
238
|
-
if (content.hasAttribute("data-state") && content.getAttribute("data-state") === "active") {
|
|
239
|
-
const nestedTabs = content.querySelectorAll<HTMLElement>(".starwind-tabs");
|
|
240
|
-
|
|
241
|
-
nestedTabs.forEach((nestedTab, nestedIdx) => {
|
|
242
|
-
// Skip tabs that already have instances
|
|
243
|
-
if (!tabInstances.has(nestedTab)) {
|
|
244
|
-
const uniqueIdx = 1000 + nestedIdx;
|
|
245
|
-
const handler = new TabsHandler(nestedTab, uniqueIdx, this);
|
|
246
|
-
tabInstances.set(nestedTab, handler);
|
|
247
|
-
}
|
|
248
|
-
});
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
}
|
|
252
|
-
|
|
253
|
-
// Store instances in a WeakMap to avoid memory leaks
|
|
254
|
-
const tabInstances = new WeakMap<HTMLElement, TabsHandler>();
|
|
255
|
-
let tabCounter = 0;
|
|
256
|
-
|
|
257
|
-
const setupTabs = () => {
|
|
258
|
-
// First handle top-level tabs
|
|
259
|
-
document.querySelectorAll<HTMLElement>(".starwind-tabs").forEach((tabs) => {
|
|
260
|
-
// Skip tabs that are nested within other tab contents
|
|
261
|
-
const isNested = !!tabs.closest("[data-tabs-content]");
|
|
262
|
-
if (!isNested && !tabInstances.has(tabs)) {
|
|
263
|
-
tabInstances.set(tabs, new TabsHandler(tabs, tabCounter++));
|
|
264
|
-
}
|
|
265
|
-
});
|
|
266
|
-
};
|
|
267
|
-
|
|
268
|
-
setupTabs();
|
|
269
|
-
document.addEventListener("astro:after-swap", setupTabs);
|
|
270
|
-
document.addEventListener("starwind:init", setupTabs);
|
|
271
|
-
</script>
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
import type { HTMLAttributes } from "astro/types";
|
|
3
|
-
import { tv } from "tailwind-variants";
|
|
4
|
-
|
|
5
|
-
interface Props extends Omit<HTMLAttributes<"div">, "id" | "role" | "tabindex" | "hidden"> {
|
|
6
|
-
value: string;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
export const tabsContent = tv({
|
|
10
|
-
base: "mt-2 focus-visible:outline-2 focus-visible:outline-offset-2",
|
|
11
|
-
});
|
|
12
|
-
|
|
13
|
-
const { value, class: className, ...rest } = Astro.props;
|
|
14
|
-
---
|
|
15
|
-
|
|
16
|
-
<div
|
|
17
|
-
class={tabsContent({ class: className })}
|
|
18
|
-
data-slot="tabs-content"
|
|
19
|
-
data-tabs-content
|
|
20
|
-
data-value={value}
|
|
21
|
-
data-state="inactive"
|
|
22
|
-
role="tabpanel"
|
|
23
|
-
tabindex="0"
|
|
24
|
-
hidden
|
|
25
|
-
{...rest}
|
|
26
|
-
>
|
|
27
|
-
<slot />
|
|
28
|
-
</div>
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
import type { HTMLAttributes } from "astro/types";
|
|
3
|
-
import { tv } from "tailwind-variants";
|
|
4
|
-
|
|
5
|
-
type Props = Omit<HTMLAttributes<"div">, "role">;
|
|
6
|
-
|
|
7
|
-
export const tabsList = tv({
|
|
8
|
-
base: "bg-muted text-muted-foreground inline-flex w-fit items-center justify-center rounded-md p-1",
|
|
9
|
-
});
|
|
10
|
-
|
|
11
|
-
const { class: className, ...rest } = Astro.props;
|
|
12
|
-
---
|
|
13
|
-
|
|
14
|
-
<div
|
|
15
|
-
class={tabsList({ class: className })}
|
|
16
|
-
data-slot="tabs-list"
|
|
17
|
-
data-tabs-list
|
|
18
|
-
role="tablist"
|
|
19
|
-
{...rest}
|
|
20
|
-
>
|
|
21
|
-
<slot />
|
|
22
|
-
</div>
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
import type { HTMLAttributes } from "astro/types";
|
|
3
|
-
import { tv } from "tailwind-variants";
|
|
4
|
-
|
|
5
|
-
interface Props extends Omit<HTMLAttributes<"button">, "type" | "id" | "role"> {
|
|
6
|
-
value: string;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
export const tabsTrigger = tv({
|
|
10
|
-
base: [
|
|
11
|
-
"inline-flex grow items-center justify-center gap-2 rounded-sm border border-transparent px-3 py-1.5 font-medium whitespace-nowrap transition-[color,box-shadow]",
|
|
12
|
-
"data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
|
|
13
|
-
"dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:text-muted-foreground",
|
|
14
|
-
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
15
|
-
"focus-visible:border-outline focus-visible:ring-outline/50 focus-visible:outline-outline focus-visible:ring-3 focus-visible:outline-1",
|
|
16
|
-
"disabled:pointer-events-none disabled:opacity-50",
|
|
17
|
-
],
|
|
18
|
-
});
|
|
19
|
-
|
|
20
|
-
const { value, class: className, ...rest } = Astro.props;
|
|
21
|
-
---
|
|
22
|
-
|
|
23
|
-
<button
|
|
24
|
-
class={tabsTrigger({ class: className })}
|
|
25
|
-
data-slot="tabs-trigger"
|
|
26
|
-
data-tabs-trigger
|
|
27
|
-
data-value={value}
|
|
28
|
-
data-state="inactive"
|
|
29
|
-
role="tab"
|
|
30
|
-
aria-selected="false"
|
|
31
|
-
{...rest}
|
|
32
|
-
>
|
|
33
|
-
<slot />
|
|
34
|
-
</button>
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import Tabs, { tabs } from "./Tabs.astro";
|
|
2
|
-
import TabsContent, { tabsContent } from "./TabsContent.astro";
|
|
3
|
-
import TabsList, { tabsList } from "./TabsList.astro";
|
|
4
|
-
import TabsTrigger, { tabsTrigger } from "./TabsTrigger.astro";
|
|
5
|
-
|
|
6
|
-
const TabsVariants = {
|
|
7
|
-
tabs,
|
|
8
|
-
tabsContent,
|
|
9
|
-
tabsList,
|
|
10
|
-
tabsTrigger,
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
export { Tabs, TabsContent, TabsList, TabsTrigger, TabsVariants };
|
|
14
|
-
|
|
15
|
-
export default {
|
|
16
|
-
Root: Tabs,
|
|
17
|
-
Content: TabsContent,
|
|
18
|
-
List: TabsList,
|
|
19
|
-
Trigger: TabsTrigger,
|
|
20
|
-
};
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
import type { HTMLAttributes } from "astro/types";
|
|
3
|
-
import { tv, type VariantProps } from "tailwind-variants";
|
|
4
|
-
|
|
5
|
-
type Props = HTMLAttributes<"textarea"> & VariantProps<typeof textarea>;
|
|
6
|
-
|
|
7
|
-
export const textarea = tv({
|
|
8
|
-
base: [
|
|
9
|
-
"border-input dark:bg-input/30 text-foreground ring-offset-background min-h-10 w-full rounded-md border bg-transparent shadow-xs",
|
|
10
|
-
"focus-visible:border-outline focus-visible:ring-outline/50 transition-[color,box-shadow] focus-visible:ring-3",
|
|
11
|
-
"file:text-foreground file:border-0 file:bg-transparent file:text-sm file:font-medium",
|
|
12
|
-
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
13
|
-
"aria-invalid:border-error aria-invalid:focus-visible:ring-error/40",
|
|
14
|
-
"peer placeholder:text-muted-foreground",
|
|
15
|
-
],
|
|
16
|
-
variants: {
|
|
17
|
-
size: {
|
|
18
|
-
sm: "min-h-9 px-2 py-1 text-sm",
|
|
19
|
-
md: "min-h-10 px-3 py-2 text-base",
|
|
20
|
-
lg: "min-h-12 px-4 py-3 text-lg",
|
|
21
|
-
},
|
|
22
|
-
},
|
|
23
|
-
defaultVariants: { size: "md" },
|
|
24
|
-
});
|
|
25
|
-
|
|
26
|
-
const { size, class: className, ...rest } = Astro.props;
|
|
27
|
-
---
|
|
28
|
-
|
|
29
|
-
<textarea class={textarea({ size, class: className })} data-slot="textarea" {...rest}></textarea>
|