@starwind-ui/core 1.15.4 → 1.16.0

package/dist/src/components/dropdown/DropdownSubTrigger.astro

@@ -0,0 +1,34 @@
+---
+import ChevronRight from "@tabler/icons/outline/chevron-right.svg";
+import type { HTMLAttributes } from "astro/types";
+
+import { dropdownItem } from "./DropdownItem.astro";
+
+type Props = HTMLAttributes<"div"> & {
+  /**
+   * Whether the item is inset (has left padding)
+   */
+  inset?: boolean;
+  /**
+   * Whether the item is disabled
+   */
+  disabled?: boolean;
+};
+
+const { class: className, inset = false, disabled = false, ...rest } = Astro.props;
+---
+
+<div
+  class={dropdownItem({ inset, disabled, class: ["starwind-dropdown-sub-trigger", className] })}
+  role="menuitem"
+  aria-haspopup="true"
+  aria-expanded="false"
+  tabindex={disabled ? "-1" : "0"}
+  data-disabled={disabled ? "true" : undefined}
+  data-sub-trigger
+  {...rest}
+  data-slot="dropdown-item"
+>
+  <slot />
+  <ChevronRight class="ml-auto size-4" />
+</div>

package/dist/src/components/dropdown/DropdownTrigger.astro

@@ -43,8 +43,8 @@ if (Astro.slots.has("default")) {
       aria-haspopup="true"
       aria-expanded="false"
       data-state="closed"
-      data-slot="dropdown-trigger"
       {...rest}
+      data-slot="dropdown-trigger"
     >
       <slot />
     </button>

package/dist/src/components/dropdown/index.ts

@@ -3,6 +3,10 @@ import DropdownContent, { dropdownContent } from "./DropdownContent.astro";
 import DropdownItem, { dropdownItem } from "./DropdownItem.astro";
 import DropdownLabel, { dropdownLabel } from "./DropdownLabel.astro";
 import DropdownSeparator, { dropdownSeparator } from "./DropdownSeparator.astro";
+import DropdownShortcut from "./DropdownShortcut.astro";
+import DropdownSub from "./DropdownSub.astro";
+import DropdownSubContent from "./DropdownSubContent.astro";
+import DropdownSubTrigger from "./DropdownSubTrigger.astro";
 import DropdownTrigger, { dropdownTrigger } from "./DropdownTrigger.astro";
 
 const DropdownVariants = {
@@ -19,6 +23,10 @@ export {
   DropdownItem,
   DropdownLabel,
   DropdownSeparator,
+  DropdownShortcut,
+  DropdownSub,
+  DropdownSubContent,
+  DropdownSubTrigger,
   DropdownTrigger,
   DropdownVariants,
 };
@@ -30,4 +38,8 @@ export default {
   Item: DropdownItem,
   Label: DropdownLabel,
   Separator: DropdownSeparator,
+  Shortcut: DropdownShortcut,
+  Sub: DropdownSub,
+  SubTrigger: DropdownSubTrigger,
+  SubContent: DropdownSubContent,
 };

package/dist/src/components/dropzone/DropzoneFilesList.astro

@@ -20,7 +20,7 @@ export const dropzoneFilesList = tv({
   class={dropzoneFilesList({ class: className })}
   aria-live="polite"
   aria-label="Uploaded files"
-  data-slot="dropzone-files-list"
   {...rest}
+  data-slot="dropzone-files-list"
 >
 </div>

package/dist/src/components/image/Image.astro

@@ -17,8 +17,8 @@ const { class: className, src, alt = "", inferSize = true, ...rest } = Astro.pro
       src={src}
       alt={alt}
       inferSize={inferSize}
-      data-slot="image"
       {...(rest as any)}
+      data-slot="image"
     />
   )
 }

package/dist/src/components/input/Input.astro

@@ -22,4 +22,4 @@ export const input = tv({
 const { size, class: className, ...rest } = Astro.props;
 ---
 
-<input class={input({ size, class: className })} data-slot="input" {...rest} />
+<input class={input({ size, class: className })} {...rest} data-slot="input" />

package/dist/src/components/input-group/InputGroup.astro

@@ -0,0 +1,28 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const inputGroup = tv({
+  base: [
+    "border-input dark:bg-input/30 group/input-group relative flex h-11 w-full min-w-0 items-center rounded-lg border transition-colors outline-none",
+    "has-[[data-slot=input-group-control]:focus-visible]:border-outline has-[[data-slot=input-group-control]:focus-visible]:ring-outline/50 has-[[data-slot=input-group-control]:focus-visible]:ring-3",
+    "has-[[data-slot][aria-invalid=true]]:border-error has-[[data-slot][aria-invalid=true]]:ring-error/40 has-[[data-slot][aria-invalid=true]]:ring-3",
+    "has-disabled:bg-input/50 has-disabled:opacity-50",
+    "has-[>textarea]:h-auto",
+    "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col",
+    "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col",
+    "has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:pt-3",
+    "has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:pb-3",
+    "has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:pr-1.5",
+    "has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:pl-1.5",
+  ],
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div role="group" class={inputGroup({ class: className })} {...rest} data-slot="input-group">
+  <slot />
+</div>

package/dist/src/components/input-group/InputGroupAddon.astro

@@ -0,0 +1,79 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div"> & VariantProps<typeof inputGroupAddon>;
+
+export const inputGroupAddon = tv({
+  base: [
+    "text-muted-foreground flex cursor-text items-center justify-center gap-2 text-sm font-medium select-none",
+    "group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-xs [&>svg:not([class*='size-'])]:size-4",
+  ],
+  variants: {
+    align: {
+      "inline-start": "order-first pl-2.5 has-[>button]:ml-[-0.3rem]",
+      "inline-end": "order-last pr-2.5 has-[>button]:mr-[-0.3rem]",
+      "block-start":
+        "order-first w-full justify-start px-3 pt-2 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-2.5",
+      "block-end":
+        "order-last w-full justify-start px-3 pb-2 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-2.5",
+    },
+  },
+  defaultVariants: {
+    align: "inline-start",
+  },
+});
+
+const { align, class: className, ...rest } = Astro.props;
+---
+
+<div
+  role="group"
+  data-align={align}
+  class={inputGroupAddon({ align, class: className })}
+  {...rest}
+  data-slot="input-group-addon"
+>
+  <slot />
+</div>
+
+<script>
+  class InputGroupAddonHandler {
+    private addon: HTMLElement;
+
+    constructor(addon: HTMLElement) {
+      this.addon = addon;
+      this.setupEventListeners();
+    }
+
+    private setupEventListeners(): void {
+      this.addon.addEventListener("click", (e) => this.handleClick(e));
+    }
+
+    private handleClick(e: MouseEvent): void {
+      if ((e.target as HTMLElement).closest("button")) return;
+
+      const input = this.addon.parentElement?.querySelector("input, textarea") as
+        | HTMLInputElement
+        | HTMLTextAreaElement;
+
+      if (input) {
+        input.focus();
+      }
+    }
+  }
+
+  const addonInstances = new WeakMap<HTMLElement, InputGroupAddonHandler>();
+
+  const setupAddons = () => {
+    document.querySelectorAll<HTMLElement>('[data-slot="input-group-addon"]').forEach((addon) => {
+      if (!addonInstances.has(addon)) {
+        addonInstances.set(addon, new InputGroupAddonHandler(addon));
+      }
+    });
+  };
+
+  setupAddons();
+  document.addEventListener("astro:after-swap", setupAddons);
+  document.addEventListener("starwind:init", setupAddons);
+</script>

package/dist/src/components/input-group/InputGroupButton.astro

@@ -0,0 +1,34 @@
+---
+import type { ComponentProps } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
+
+import { Button } from "@/components/starwind/button";
+
+type Props = Omit<ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButton>;
+
+export const inputGroupButton = tv({
+  base: "gap-2 rounded-sm shadow-none",
+  variants: {
+    size: {
+      sm: "h-8 px-2",
+      "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+    },
+  },
+  defaultVariants: {
+    size: "sm",
+  },
+});
+
+const { type = "button", variant = "ghost", size, class: className, ...rest } = Astro.props;
+---
+
+<Button
+  type={type}
+  data-size={size}
+  size={size}
+  variant={variant}
+  class={inputGroupButton({ size, class: className })}
+  {...rest}
+>
+  <slot />
+</Button>

package/dist/src/components/input-group/InputGroupInput.astro

@@ -0,0 +1,16 @@
+---
+import type { ComponentProps } from "astro/types";
+import { tv } from "tailwind-variants";
+
+import { Input } from "@/components/starwind/input";
+
+type Props = ComponentProps<typeof Input>;
+
+export const inputGroupInput = tv({
+  base: "h-full flex-1 rounded-none border-0 shadow-none ring-0 outline-none focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<Input class={inputGroupInput({ class: className })} {...rest} data-slot="input-group-control" />

package/dist/src/components/input-group/InputGroupText.astro

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"span">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<span
+  class:list={[
+    "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4.5",
+    className,
+  ]}
+  {...rest}
+>
+  <slot />
+</span>

package/dist/src/components/input-group/InputGroupTextarea.astro

@@ -0,0 +1,20 @@
+---
+import type { ComponentProps } from "astro/types";
+import { tv } from "tailwind-variants";
+
+import { Textarea } from "@/components/starwind/textarea";
+
+type Props = ComponentProps<typeof Textarea>;
+
+export const inputGroupTextarea = tv({
+  base: "h-full flex-1 resize-none rounded-none border-0 shadow-none ring-0 outline-none focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<Textarea
+  class={inputGroupTextarea({ class: className })}
+  {...rest}
+  data-slot="input-group-control"
+/>

package/dist/src/components/input-group/index.ts

@@ -0,0 +1,33 @@
+import InputGroup, { inputGroup } from "./InputGroup.astro";
+import InputGroupAddon, { inputGroupAddon } from "./InputGroupAddon.astro";
+import InputGroupButton, { inputGroupButton } from "./InputGroupButton.astro";
+import InputGroupInput, { inputGroupInput } from "./InputGroupInput.astro";
+import InputGroupText from "./InputGroupText.astro";
+import InputGroupTextarea, { inputGroupTextarea } from "./InputGroupTextarea.astro";
+
+const InputGroupVariants = {
+  inputGroup,
+  inputGroupAddon,
+  inputGroupButton,
+  inputGroupInput,
+  inputGroupTextarea,
+};
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+  InputGroupVariants,
+};
+
+export default {
+  Root: InputGroup,
+  Addon: InputGroupAddon,
+  Button: InputGroupButton,
+  Input: InputGroupInput,
+  Text: InputGroupText,
+  Textarea: InputGroupTextarea,
+};

package/dist/src/components/input-otp/InputOtp.astro

@@ -51,9 +51,9 @@ const inputMode = isNumericOnly ? "numeric" : "text";
   data-value={value || defaultValue || ""}
   data-disabled={disabled}
   data-pattern={patternStr}
-  data-slot="input-otp"
   tabindex={disabled ? "-1" : "0"}
   {...rest}
+  data-slot="input-otp"
 >
   <input
     autocomplete="one-time-code"

package/dist/src/components/input-otp/InputOtpGroup.astro

@@ -11,6 +11,6 @@ export const inputOtpGroup = tv({
 const { class: className, ...rest } = Astro.props;
 ---
 
-<div class={inputOtpGroup({ class: className })} data-slot="input-otp-group" {...rest}>
+<div class={inputOtpGroup({ class: className })} {...rest} data-slot="input-otp-group">
   <slot />
 </div>

package/dist/src/components/input-otp/InputOtpSeparator.astro

@@ -15,9 +15,9 @@ const { class: className, ...rest } = Astro.props;
 <div
   aria-hidden="true"
   class={inputOtpSeparator({ class: className })}
-  data-slot="input-otp-separator"
   role="separator"
   {...rest}
+  data-slot="input-otp-separator"
 >
   <slot name="icon">
     <MinusIcon class="size-6" />

package/dist/src/components/input-otp/InputOtpSlot.astro

@@ -33,8 +33,8 @@ const { size, index, class: className, ...rest } = Astro.props;
   class={inputOtpSlot({ size, class: className })}
   data-otp-slot
   data-index={index}
-  data-slot="input-otp-slot"
   {...rest}
+  data-slot="input-otp-slot"
 >
   <span data-otp-char></span>
   <div

package/dist/src/components/item/Item.astro

@@ -47,6 +47,6 @@ const {
 } = Astro.props;
 ---
 
-<Tag class={item({ variant, size, class: className })} data-slot="item" {...rest}>
+<Tag class={item({ variant, size, class: className })} {...rest} data-slot="item">
   <slot />
 </Tag>

package/dist/src/components/item/ItemActions.astro

@@ -11,6 +11,6 @@ export const itemActions = tv({
 const { class: className, ...rest } = Astro.props;
 ---
 
-<div class={itemActions({ class: className })} data-slot="item-actions" {...rest}>
+<div class={itemActions({ class: className })} {...rest} data-slot="item-actions">
   <slot />
 </div>

package/dist/src/components/item/ItemContent.astro

@@ -11,6 +11,6 @@ export const itemContent = tv({
 const { class: className, ...rest } = Astro.props;
 ---
 
-<div class={itemContent({ class: className })} data-slot="item-content" {...rest}>
+<div class={itemContent({ class: className })} {...rest} data-slot="item-content">
   <slot />
 </div>

package/dist/src/components/item/ItemDescription.astro

@@ -14,6 +14,6 @@ export const itemDescription = tv({
 const { class: className, ...rest } = Astro.props;
 ---
 
-<p class={itemDescription({ class: className })} data-slot="item-description" {...rest}>
+<p class={itemDescription({ class: className })} {...rest} data-slot="item-description">
   <slot />
 </p>

package/dist/src/components/item/ItemFooter.astro

@@ -11,6 +11,6 @@ export const itemFooter = tv({
 const { class: className, ...rest } = Astro.props;
 ---
 
-<div class={itemFooter({ class: className })} data-slot="item-footer" {...rest}>
+<div class={itemFooter({ class: className })} {...rest} data-slot="item-footer">
   <slot />
 </div>

package/dist/src/components/item/ItemGroup.astro

@@ -11,6 +11,6 @@ export const itemGroup = tv({
 const { class: className, ...rest } = Astro.props;
 ---
 
-<div role="list" class={itemGroup({ class: className })} data-slot="item-group" {...rest}>
+<div role="list" class={itemGroup({ class: className })} {...rest} data-slot="item-group">
   <slot />
 </div>

package/dist/src/components/item/ItemHeader.astro

@@ -11,6 +11,6 @@ export const itemHeader = tv({
 const { class: className, ...rest } = Astro.props;
 ---
 
-<div class={itemHeader({ class: className })} data-slot="item-header" {...rest}>
+<div class={itemHeader({ class: className })} {...rest} data-slot="item-header">
   <slot />
 </div>

package/dist/src/components/item/ItemMedia.astro

@@ -32,9 +32,9 @@ const { variant = "default", class: className, ...rest } = Astro.props;
 
 <div
   class={itemMedia({ variant, class: className })}
-  data-slot="item-media"
   data-variant={variant}
   {...rest}
+  data-slot="item-media"
 >
   <slot />
 </div>

package/dist/src/components/item/ItemSeparator.astro

@@ -16,6 +16,6 @@ const { class: className, orientation = "horizontal", ...rest } = Astro.props;
 <Separator
   orientation={orientation}
   class={itemSeparator({ class: className })}
-  data-slot="item-separator"
   {...rest}
+  data-slot="item-separator"
 />

package/dist/src/components/item/ItemTitle.astro

@@ -11,6 +11,6 @@ export const itemTitle = tv({
 const { class: className, ...rest } = Astro.props;
 ---
 
-<div class={itemTitle({ class: className })} data-slot="item-title" {...rest}>
+<div class={itemTitle({ class: className })} {...rest} data-slot="item-title">
   <slot />
 </div>

package/dist/src/components/kbd/Kbd.astro

@@ -16,6 +16,6 @@ export const kbd = tv({
 const { class: className, ...rest } = Astro.props;
 ---
 
-<kbd class={kbd({ class: className })} data-slot="kbd" {...rest}>
+<kbd class={kbd({ class: className })} {...rest} data-slot="kbd">
   <slot />
 </kbd>

package/dist/src/components/kbd/KbdGroup.astro

@@ -11,6 +11,6 @@ export const kbdGroup = tv({
 const { class: className, ...rest } = Astro.props;
 ---
 
-<kbd class={kbdGroup({ class: className })} data-slot="kbd-group" {...rest}>
+<kbd class={kbdGroup({ class: className })} {...rest} data-slot="kbd-group">
   <slot />
 </kbd>

package/dist/src/components/label/Label.astro

@@ -17,6 +17,6 @@ const { size, class: className, ...rest } = Astro.props;
 ---
 
 {/* eslint-disable-next-line astro/jsx-a11y/label-has-associated-control */}
-<label class={label({ size, class: className })} data-slot="label" {...rest}>
+<label class={label({ size, class: className })} {...rest} data-slot="label">
   <slot />
 </label>

package/dist/src/components/native-select/NativeSelect.astro

@@ -0,0 +1,64 @@
+---
+import ChevronDown from "@tabler/icons/outline/chevron-down.svg";
+import type { HTMLAttributes } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
+
+type Props = Omit<HTMLAttributes<"select">, "size"> & VariantProps<typeof nativeSelect>;
+
+export const nativeSelectWrapper = tv({
+  base: [
+    "starwind-native-select-wrapper",
+    "group/native-select relative w-fit has-[select:disabled]:opacity-50",
+  ],
+});
+
+export const nativeSelect = tv({
+  base: [
+    "starwind-native-select",
+    "border-input dark:bg-input/30 text-foreground ring-offset-background w-full rounded-md border bg-transparent shadow-xs",
+    "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground appearance-none bg-none select-none",
+    "focus-visible:border-outline focus-visible:ring-outline/50 transition-[color,box-shadow] outline-none focus-visible:ring-3",
+    "disabled:pointer-events-none disabled:cursor-not-allowed",
+    "aria-invalid:border-error aria-invalid:focus-visible:ring-error/40 aria-invalid:focus-visible:ring-3",
+  ],
+  variants: {
+    size: {
+      sm: "h-9 pr-8 pl-2 text-sm",
+      md: "h-11 pr-9 pl-3 text-base",
+      lg: "h-12 pr-10 pl-4 text-lg",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+export const nativeSelectIcon = tv({
+  base: ["text-foreground pointer-events-none absolute top-1/2 -translate-y-1/2 opacity-50"],
+  variants: {
+    size: {
+      sm: "right-2 size-3.5",
+      md: "right-3 size-4",
+      lg: "right-4 size-5",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+const { class: className, size, ...rest } = Astro.props;
+---
+
+<div class={nativeSelectWrapper()} data-size={size} data-slot="native-select-wrapper">
+  <select class={nativeSelect({ size, class: className })} {...rest} data-slot="native-select">
+    <slot />
+  </select>
+  <slot name="icon">
+    <ChevronDown
+      class={nativeSelectIcon({ size })}
+      aria-hidden="true"
+      data-slot="native-select-icon"
+    />
+  </slot>
+</div>

package/dist/src/components/native-select/NativeSelectOptGroup.astro

@@ -0,0 +1,15 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"optgroup">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<optgroup
+  class:list={["starwind-native-select-optgroup", className]}
+  {...rest}
+  data-slot="native-select-optgroup"
+>
+  <slot />
+</optgroup>

package/dist/src/components/native-select/NativeSelectOption.astro

@@ -0,0 +1,15 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"option">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<option
+  class:list={["starwind-native-select-option", className]}
+  {...rest}
+  data-slot="native-select-option"
+>
+  <slot />
+</option>

package/dist/src/components/native-select/index.ts

@@ -0,0 +1,21 @@
+import NativeSelect, {
+  nativeSelect,
+  nativeSelectIcon,
+  nativeSelectWrapper,
+} from "./NativeSelect.astro";
+import NativeSelectOptGroup from "./NativeSelectOptGroup.astro";
+import NativeSelectOption from "./NativeSelectOption.astro";
+
+const NativeSelectVariants = {
+  nativeSelect,
+  nativeSelectIcon,
+  nativeSelectWrapper,
+};
+
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption, NativeSelectVariants };
+
+export default {
+  Root: NativeSelect,
+  Option: NativeSelectOption,
+  OptGroup: NativeSelectOptGroup,
+};

package/dist/src/components/pagination/Pagination.astro

@@ -13,8 +13,8 @@ const { class: className, ...rest } = Astro.props;
   role="navigation"
   aria-label="pagination"
   class={pagination({ class: className })}
-  data-slot="pagination"
   {...rest}
+  data-slot="pagination"
 >
   <slot />
 </nav>

package/dist/src/components/pagination/PaginationContent.astro

@@ -11,6 +11,6 @@ export const paginationContent = tv({ base: "flex flex-row items-center gap-1" }
 const { class: className, ...rest } = Astro.props;
 ---
 
-<ul class={paginationContent({ class: className })} data-slot="pagination-content" {...rest}>
+<ul class={paginationContent({ class: className })} {...rest} data-slot="pagination-content">
   <slot />
 </ul>

package/dist/src/components/pagination/PaginationEllipsis.astro

@@ -23,8 +23,8 @@ const { class: className, size, ...rest } = Astro.props;
 <span
   aria-hidden
   class={paginationEllipsis({ size, class: className })}
-  data-slot="pagination-ellipsis"
   {...rest}
+  data-slot="pagination-ellipsis"
 >
   <slot name="icon">
     <Dots class="size-4" />