@starwind-ui/core 1.11.1 → 1.12.0

package/dist/index.js

@@ -11,13 +11,19 @@ var registry_default = {
     {
       name: "alert-dialog",
       type: "component",
-      version: "1.0.1",
+      version: "1.0.2",
       dependencies: ["@starwind-ui/core/button@^2.1.0"]
     },
     { name: "aspect-ratio", type: "component", version: "1.0.0", dependencies: [] },
-    { name: "avatar", type: "component", version: "1.2.0", dependencies: [] },
+    { name: "avatar", type: "component", version: "1.2.1", dependencies: [] },
     { name: "badge", type: "component", version: "1.3.0", dependencies: [] },
     { name: "breadcrumb", type: "component", version: "1.1.1", dependencies: [] },
+    {
+      name: "button-group",
+      type: "component",
+      version: "1.0.0",
+      dependencies: ["@starwind-ui/core/separator@^1.0.0"]
+    },
     { name: "button", type: "component", version: "2.2.0", dependencies: [] },
     { name: "card", type: "component", version: "1.3.0", dependencies: [] },
     {
@@ -28,7 +34,7 @@ var registry_default = {
     },
     { name: "checkbox", type: "component", version: "1.4.0", dependencies: [] },
     { name: "dialog", type: "component", version: "1.4.1", dependencies: [] },
-    { name: "dropdown", type: "component", version: "1.2.0", dependencies: [] },
+    { name: "dropdown", type: "component", version: "1.2.2", dependencies: [] },
     { name: "dropzone", type: "component", version: "1.2.0", dependencies: [] },
     { name: "input", type: "component", version: "1.3.0", dependencies: [] },
     {
@@ -39,10 +45,10 @@ var registry_default = {
     },
     { name: "kbd", type: "component", version: "1.0.0", dependencies: [] },
     { name: "label", type: "component", version: "1.2.0", dependencies: [] },
-    { name: "pagination", type: "component", version: "3.0.1", dependencies: [] },
+    { name: "pagination", type: "component", version: "3.0.2", dependencies: [] },
     { name: "progress", type: "component", version: "1.1.0", dependencies: [] },
-    { name: "radio-group", type: "component", version: "1.2.1", dependencies: [] },
-    { name: "select", type: "component", version: "1.6.1", dependencies: [] },
+    { name: "radio-group", type: "component", version: "1.2.2", dependencies: [] },
+    { name: "select", type: "component", version: "1.7.0", dependencies: [] },
     { name: "separator", type: "component", version: "1.0.0", dependencies: [] },
     {
       name: "sheet",
@@ -56,6 +62,7 @@ var registry_default = {
     { name: "table", type: "component", version: "1.1.0", dependencies: [] },
     { name: "tabs", type: "component", version: "1.4.0", dependencies: [] },
     { name: "textarea", type: "component", version: "1.3.0", dependencies: [] },
+    { name: "toggle", type: "component", version: "1.0.0", dependencies: [] },
     { name: "tooltip", type: "component", version: "1.3.0", dependencies: [] }
   ]
 };

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/registry.json"],"sourcesContent":["import { join } from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\n\nimport componentRegistry from \"./registry.json\" with { type: \"json\" };\n\n/**\n * Component metadata interface describing a Starwind UI component\n */\nexport interface ComponentMeta {\n  name: string;\n  version: string;\n  type: \"component\";\n  dependencies: string[];\n}\n\n/**\n * Registry interface containing all available components\n */\nexport interface Registry {\n  components: ComponentMeta[];\n}\n\nconst __dirname = fileURLToPath(new URL(\".\", import.meta.url));\n\n/**\n * Get the absolute path to a component file\n * @param {string} componentName - The name of the component\n * @param {string} fileName - The name of the file within the component\n * @returns {string} The absolute path to the component file\n */\nexport const getComponentPath = (componentName: string, fileName: string): string => {\n  // In production (when installed as a dependency), the components will be in dist/src/components\n  // In development, they will be in src/components\n  const componentsDir = __dirname.includes(\"dist\") ? \"src/components\" : \"src/components\";\n  return join(__dirname, componentsDir, componentName, fileName);\n};\n\n/**\n * Map of all components and their metadata from registry\n */\nexport const registry = componentRegistry.components as ComponentMeta[];\n","{\n  \"$schema\": \"https://starwind.dev/registry-schema.json\",\n  \"components\": [\n    { \"name\": \"accordion\", \"type\": \"component\", \"version\": \"1.3.2\", \"dependencies\": [] },\n    { \"name\": \"alert\", \"type\": \"component\", \"version\": \"1.3.0\", \"dependencies\": [] },\n    {\n      \"name\": \"alert-dialog\",\n      \"type\": \"component\",\n      \"version\": \"1.0.1\",\n      \"dependencies\": [\"@starwind-ui/core/button@^2.1.0\"]\n    },\n    { \"name\": \"aspect-ratio\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"avatar\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n    { \"name\": \"badge\", \"type\": \"component\", \"version\": \"1.3.0\", \"dependencies\": [] },\n    { \"name\": \"breadcrumb\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n    { \"name\": \"button\", \"type\": \"component\", \"version\": \"2.2.0\", \"dependencies\": [] },\n    { \"name\": \"card\", \"type\": \"component\", \"version\": \"1.3.0\", \"dependencies\": [] },\n    {\n      \"name\": \"carousel\",\n      \"type\": \"component\",\n      \"version\": \"1.0.1\",\n      \"dependencies\": [\"@starwind-ui/core/button@^2.1.0\", \"embla-carousel@^8.6.0\"]\n    },\n    { \"name\": \"checkbox\", \"type\": \"component\", \"version\": \"1.4.0\", \"dependencies\": [] },\n    { \"name\": \"dialog\", \"type\": \"component\", \"version\": \"1.4.1\", \"dependencies\": [] },\n    { \"name\": \"dropdown\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n    { \"name\": \"dropzone\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n    { \"name\": \"input\", \"type\": \"component\", \"version\": \"1.3.0\", \"dependencies\": [] },\n    {\n      \"name\": \"item\",\n      \"type\": \"component\",\n      \"version\": \"1.0.0\",\n      \"dependencies\": [\"@starwind-ui/core/separator@^1.0.0\"]\n    },\n    { \"name\": \"kbd\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"label\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n    { \"name\": \"pagination\", \"type\": \"component\", \"version\": \"3.0.1\", \"dependencies\": [] },\n    { \"name\": \"progress\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n    { \"name\": \"radio-group\", \"type\": \"component\", \"version\": \"1.2.1\", \"dependencies\": [] },\n    { \"name\": \"select\", \"type\": \"component\", \"version\": \"1.6.1\", \"dependencies\": [] },\n    { \"name\": \"separator\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    {\n      \"name\": \"sheet\",\n      \"type\": \"component\",\n      \"version\": \"1.1.1\",\n      \"dependencies\": [\"@starwind-ui/core/dialog@^1.3.0\"]\n    },\n    { \"name\": \"skeleton\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n    { \"name\": \"spinner\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"switch\", \"type\": \"component\", \"version\": \"1.3.0\", \"dependencies\": [] },\n    { \"name\": \"table\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n    { \"name\": \"tabs\", \"type\": \"component\", \"version\": \"1.4.0\", \"dependencies\": [] },\n    { \"name\": \"textarea\", \"type\": \"component\", \"version\": \"1.3.0\", \"dependencies\": [] },\n    { \"name\": \"tooltip\", \"type\": \"component\", \"version\": \"1.3.0\", \"dependencies\": [] }\n  ]\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/registry.json"],"sourcesContent":["import { join } from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\n\nimport componentRegistry from \"./registry.json\" with { type: \"json\" };\n\n/**\n * Component metadata interface describing a Starwind UI component\n */\nexport interface ComponentMeta {\n  name: string;\n  version: string;\n  type: \"component\";\n  dependencies: string[];\n}\n\n/**\n * Registry interface containing all available components\n */\nexport interface Registry {\n  components: ComponentMeta[];\n}\n\nconst __dirname = fileURLToPath(new URL(\".\", import.meta.url));\n\n/**\n * Get the absolute path to a component file\n * @param {string} componentName - The name of the component\n * @param {string} fileName - The name of the file within the component\n * @returns {string} The absolute path to the component file\n */\nexport const getComponentPath = (componentName: string, fileName: string): string => {\n  // In production (when installed as a dependency), the components will be in dist/src/components\n  // In development, they will be in src/components\n  const componentsDir = __dirname.includes(\"dist\") ? \"src/components\" : \"src/components\";\n  return join(__dirname, componentsDir, componentName, fileName);\n};\n\n/**\n * Map of all components and their metadata from registry\n */\nexport const registry = componentRegistry.components as ComponentMeta[];\n","{\n  \"$schema\": \"https://starwind.dev/registry-schema.json\",\n  \"components\": [\n    { \"name\": \"accordion\", \"type\": \"component\", \"version\": \"1.3.2\", \"dependencies\": [] },\n    { \"name\": \"alert\", \"type\": \"component\", \"version\": \"1.3.0\", \"dependencies\": [] },\n    {\n      \"name\": \"alert-dialog\",\n      \"type\": \"component\",\n      \"version\": \"1.0.2\",\n      \"dependencies\": [\"@starwind-ui/core/button@^2.1.0\"]\n    },\n    { \"name\": \"aspect-ratio\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"avatar\", \"type\": \"component\", \"version\": \"1.2.1\", \"dependencies\": [] },\n    { \"name\": \"badge\", \"type\": \"component\", \"version\": \"1.3.0\", \"dependencies\": [] },\n    { \"name\": \"breadcrumb\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n    {\n      \"name\": \"button-group\",\n      \"type\": \"component\",\n      \"version\": \"1.0.0\",\n      \"dependencies\": [\"@starwind-ui/core/separator@^1.0.0\"]\n    },\n    { \"name\": \"button\", \"type\": \"component\", \"version\": \"2.2.0\", \"dependencies\": [] },\n    { \"name\": \"card\", \"type\": \"component\", \"version\": \"1.3.0\", \"dependencies\": [] },\n    {\n      \"name\": \"carousel\",\n      \"type\": \"component\",\n      \"version\": \"1.0.1\",\n      \"dependencies\": [\"@starwind-ui/core/button@^2.1.0\", \"embla-carousel@^8.6.0\"]\n    },\n    { \"name\": \"checkbox\", \"type\": \"component\", \"version\": \"1.4.0\", \"dependencies\": [] },\n    { \"name\": \"dialog\", \"type\": \"component\", \"version\": \"1.4.1\", \"dependencies\": [] },\n    { \"name\": \"dropdown\", \"type\": \"component\", \"version\": \"1.2.2\", \"dependencies\": [] },\n    { \"name\": \"dropzone\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n    { \"name\": \"input\", \"type\": \"component\", \"version\": \"1.3.0\", \"dependencies\": [] },\n    {\n      \"name\": \"item\",\n      \"type\": \"component\",\n      \"version\": \"1.0.0\",\n      \"dependencies\": [\"@starwind-ui/core/separator@^1.0.0\"]\n    },\n    { \"name\": \"kbd\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"label\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n    { \"name\": \"pagination\", \"type\": \"component\", \"version\": \"3.0.2\", \"dependencies\": [] },\n    { \"name\": \"progress\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n    { \"name\": \"radio-group\", \"type\": \"component\", \"version\": \"1.2.2\", \"dependencies\": [] },\n    { \"name\": \"select\", \"type\": \"component\", \"version\": \"1.7.0\", \"dependencies\": [] },\n    { \"name\": \"separator\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    {\n      \"name\": \"sheet\",\n      \"type\": \"component\",\n      \"version\": \"1.1.1\",\n      \"dependencies\": [\"@starwind-ui/core/dialog@^1.3.0\"]\n    },\n    { \"name\": \"skeleton\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n    { \"name\": \"spinner\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"switch\", \"type\": \"component\", \"version\": \"1.3.0\", \"dependencies\": [] },\n    { \"name\": \"table\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n    { \"name\": \"tabs\", \"type\": \"component\", \"version\": \"1.4.0\", \"dependencies\": [] },\n    { \"name\": \"textarea\", \"type\": \"component\", \"version\": \"1.3.0\", \"dependencies\": [] },\n    { \"name\": \"toggle\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"tooltip\", \"type\": \"component\", \"version\": \"1.3.0\", \"dependencies\": [] }\n  ]\n}\n"],"mappings":"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","names":[]}

package/dist/src/components/alert-dialog/AlertDialogAction.astro

@@ -33,7 +33,7 @@ if (Astro.slots.has("default")) {
       type="button"
       class={ButtonVariants.button({
         variant: "default",
-        class: `starwind-alert-dialog-action ${className}`,
+        class: `starwind-alert-dialog-action ${className || ""}`,
       })}
       data-slot="alert-dialog-action"
       {...rest}

package/dist/src/components/alert-dialog/AlertDialogCancel.astro

@@ -34,7 +34,7 @@ if (Astro.slots.has("default")) {
       type="button"
       class={ButtonVariants.button({
         variant: "outline",
-        class: `starwind-alert-dialog-close ${className}`,
+        class: `starwind-alert-dialog-close ${className || ""}`,
       })}
       data-slot="alert-dialog-cancel"
       {...rest}

package/dist/src/components/button-group/ButtonGroup.astro

@@ -0,0 +1,62 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div"> & {
+  /**
+   * The orientation of the button group.
+   * @default "horizontal"
+   */
+  orientation?: "horizontal" | "vertical";
+};
+
+export const buttonGroup = tv({
+  base: [
+    "flex w-fit items-stretch",
+    "[&>*]:focus-visible:relative [&>*]:focus-visible:z-10",
+    "has-[>[data-slot=button-group]]:gap-2 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  ],
+  variants: {
+    orientation: {
+      horizontal: [
+        "[&>*:not(:first-child)]:rounded-l-none",
+        "[&>*:not(:first-child)]:border-l-0",
+        "[&>*:not(:last-child):not(:has(+_script:last-child))]:rounded-r-none",
+        "[&>*:not(:first-child)_>_[data-as-child]_>_*]:rounded-l-none",
+        "[&>*:not(:first-child)_>_[data-as-child]_>_*]:border-l-0",
+        "[&>*:not(:last-child):not(:has(+_script:last-child))_>_[data-as-child]_>_*]:rounded-r-none",
+        "[&>*:not(:first-child)_>_[data-slot=select-trigger]]:rounded-l-none",
+        "[&>*:not(:first-child)_>_[data-slot=select-trigger]]:border-l-0",
+        "[&>*:not(:last-child):not(:has(+_script:last-child))_>_[data-slot=select-trigger]]:rounded-r-none",
+      ],
+      vertical: [
+        "flex-col",
+        "[&>*:not(:first-child)]:rounded-t-none",
+        "[&>*:not(:first-child)]:border-t-0",
+        "[&>*:not(:last-child):not(:has(+_script:last-child))]:rounded-b-none",
+        "[&>*:not(:first-child)_>_[data-as-child]_>_*]:rounded-t-none",
+        "[&>*:not(:first-child)_>_[data-as-child]_>_*]:border-t-0",
+        "[&>*:not(:last-child):not(:has(+_script:last-child))_>_[data-as-child]_>_*]:rounded-b-none",
+        "[&>*:not(:first-child)_>_[data-slot=select-trigger]]:rounded-t-none",
+        "[&>*:not(:first-child)_>_[data-slot=select-trigger]]:border-t-0",
+        "[&>*:not(:last-child):not(:has(+_script:last-child))_>_[data-slot=select-trigger]]:rounded-b-none",
+      ],
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+});
+
+const { class: className, orientation = "horizontal", ...rest } = Astro.props;
+---
+
+<div
+  role="group"
+  data-slot="button-group"
+  data-orientation={orientation}
+  class={buttonGroup({ orientation, class: className })}
+  {...rest}
+>
+  <slot />
+</div>

package/dist/src/components/button-group/ButtonGroupSeparator.astro

@@ -0,0 +1,27 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+import { Separator } from "@/components/starwind/separator";
+
+type Props = HTMLAttributes<"div"> & {
+  /**
+   * The orientation of the separator.
+   * @default "vertical"
+   */
+  orientation?: "horizontal" | "vertical";
+};
+
+export const buttonGroupSeparator = tv({
+  base: ["bg-input relative m-0! self-stretch data-[orientation=vertical]:h-auto"],
+});
+
+const { class: className, orientation = "vertical", ...rest } = Astro.props;
+---
+
+<Separator
+  data-slot="button-group-separator"
+  orientation={orientation}
+  class={buttonGroupSeparator({ class: className })}
+  {...rest}
+/>

package/dist/src/components/button-group/ButtonGroupText.astro

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const buttonGroupText = tv({
+  base: [
+    "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs",
+    "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+  ],
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={[buttonGroupText(), className]} data-slot="button-group-text" {...rest}>
+  <slot />
+</div>

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

@@ -0,0 +1,17 @@
+import ButtonGroup, { buttonGroup } from "./ButtonGroup.astro";
+import ButtonGroupSeparator, { buttonGroupSeparator } from "./ButtonGroupSeparator.astro";
+import ButtonGroupText, { buttonGroupText } from "./ButtonGroupText.astro";
+
+const ButtonGroupVariants = {
+  buttonGroup,
+  buttonGroupSeparator,
+  buttonGroupText,
+};
+
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, ButtonGroupVariants };
+
+export default {
+  Root: ButtonGroup,
+  Separator: ButtonGroupSeparator,
+  Text: ButtonGroupText,
+};

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

@@ -30,7 +30,7 @@ if (Astro.slots.has("default")) {
 {
   asChild && hasChildren ? (
     <div
-      class={`starwind-dropdown-trigger ${className}`}
+      class:list={["starwind-dropdown-trigger", className]}
       data-slot="dropdown-trigger"
       data-as-child
     >

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

@@ -1,18 +1,28 @@
 ---
 import Dots from "@tabler/icons/outline/dots.svg";
 import type { HTMLAttributes } from "astro/types";
-import { tv } from "tailwind-variants";
+import { tv, type VariantProps } from "tailwind-variants";
 
-type Props = HTMLAttributes<"span">;
+type Props = HTMLAttributes<"span"> & VariantProps<typeof paginationEllipsis>;
 
-export const paginationEllipsis = tv({ base: "flex h-9 w-9 items-center justify-center" });
+export const paginationEllipsis = tv({
+  base: "flex items-center justify-center",
+  variants: {
+    size: {
+      "icon-sm": "size-9",
+      icon: "size-11",
+      "icon-lg": "size-12",
+    },
+  },
+  defaultVariants: { size: "icon" },
+});
 
-const { class: className, ...rest } = Astro.props;
+const { class: className, size, ...rest } = Astro.props;
 ---
 
 <span
   aria-hidden
-  class={paginationEllipsis({ class: className })}
+  class={paginationEllipsis({ size, class: className })}
   data-slot="pagination-ellipsis"
   {...rest}
 >

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

@@ -1,11 +1,15 @@
 ---
 import ChevronRight from "@tabler/icons/outline/chevron-right.svg";
 import type { HTMLAttributes } from "astro/types";
-import { tv } from "tailwind-variants";
+import { tv, type VariantProps } from "tailwind-variants";
+
+import { ButtonVariants } from "@/components/starwind/button";
 
 import PaginationLink from "./PaginationLink.astro";
 
-type Props = HTMLAttributes<"a"> & { size?: "sm" | "md" | "lg" | "icon" };
+type Props = HTMLAttributes<"a"> & {
+  size?: VariantProps<typeof ButtonVariants.button>["size"];
+};
 
 export const paginationNext = tv({ base: "group gap-1" });
 

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

@@ -1,11 +1,15 @@
 ---
 import ChevronLeft from "@tabler/icons/outline/chevron-left.svg";
 import type { HTMLAttributes } from "astro/types";
-import { tv } from "tailwind-variants";
+import { tv, type VariantProps } from "tailwind-variants";
+
+import { ButtonVariants } from "@/components/starwind/button";
 
 import PaginationLink from "./PaginationLink.astro";
 
-type Props = HTMLAttributes<"a"> & { size?: "sm" | "md" | "lg" | "icon" };
+type Props = HTMLAttributes<"a"> & {
+  size?: VariantProps<typeof ButtonVariants.button>["size"];
+};
 
 export const paginationPrevious = tv({ base: "group gap-1" });
 

package/dist/src/components/select/Select.astro

@@ -34,8 +34,11 @@ const { class: className, name, defaultValue, ...rest } = Astro.props;
     private select: HTMLElement;
     private trigger: HTMLButtonElement | null;
     private content: HTMLElement | null;
+    private searchInput: HTMLInputElement | null = null;
+    private emptyElement: HTMLElement | null = null;
     private isOpen: boolean = false;
     private selectedItem: HTMLElement | null = null;
+    private activeItem: HTMLElement | null = null;
     private animationDuration = 150;
     private typeaheadTimerRef: number | null = null;
     private typeaheadSearch = "";
@@ -45,6 +48,8 @@ const { class: className, name, defaultValue, ...rest } = Astro.props;
       this.select = select;
       this.trigger = select.querySelector(".starwind-select-trigger");
       this.content = select.querySelector(".starwind-select-content");
+      this.searchInput = select.querySelector('[data-slot="select-search"]');
+      this.emptyElement = select.querySelector('[data-slot="select-empty"]');
 
       if (!this.trigger || !this.content) return;
 
@@ -118,11 +123,32 @@ const { class: className, name, defaultValue, ...rest } = Astro.props;
       // Set up additional ARIA attributes
       this.trigger.setAttribute("aria-controls", this.content.id);
       this.content.setAttribute("aria-labelledby", this.trigger.id);
+
+      // If search input exists, add IDs to all items for aria-activedescendant
+      if (this.searchInput) {
+        if (!this.searchInput.id) {
+          this.searchInput.id = `starwind-select${selectIdx}-search`;
+        }
+        // Link search input to the listbox it filters
+        this.searchInput.setAttribute("aria-controls", this.content.id);
+
+        const items = this.content.querySelectorAll('[role="option"]');
+        items.forEach((item, index) => {
+          if (!item.id) {
+            item.id = `starwind-select${selectIdx}-option${index}`;
+          }
+        });
+      }
     }
 
     private setupEvents() {
       if (!this.trigger || !this.content) return;
 
+      // Handle search input if it exists
+      if (this.searchInput) {
+        this.setupSearchInput();
+      }
+
       // Handle pointerdown
       this.trigger.addEventListener("pointerdown", (e) => {
         // prevent implicit pointer capture
@@ -164,11 +190,18 @@ const { class: className, name, defaultValue, ...rest } = Astro.props;
 
       // Handle keyboard navigation inside select content
       this.content.addEventListener("keydown", (e) => {
+        // Check if the event originated from the search input
+        const isFromSearchInput = e.target === this.searchInput;
+
         if (e.key === "Enter" || e.key === " ") {
-          // set element based on current focused element
-          const activeElement = document.activeElement;
-          this.returnFocusOnClose = true;
-          this.handleSelection(activeElement as HTMLElement);
+          // Only handle selection if not typing in search input
+          if (!isFromSearchInput) {
+            // set element based on current focused element
+            const activeElement = document.activeElement;
+            this.returnFocusOnClose = true;
+            this.handleSelection(activeElement as HTMLElement);
+          }
+          // If from search input, don't handle it here - let the input handle it naturally
         } else if (e.key === "Escape" && this.isOpen) {
           this.returnFocusOnClose = true;
           this.closeSelect();
@@ -188,7 +221,7 @@ const { class: className, name, defaultValue, ...rest } = Astro.props;
           // select should not be navigated using tab key so we prevent it
           if (e.key === "Tab") e.preventDefault();
 
-          if (!isModifierKey && e.key.length === 1) {
+          if (!isModifierKey && e.key.length === 1 && !this.searchInput) {
             this.handleTypeahead(e.key);
           }
         }
@@ -199,7 +232,7 @@ const { class: className, name, defaultValue, ...rest } = Astro.props;
         const target = e.target as HTMLElement;
         const option = target.closest('[role="option"]');
         if (option && option instanceof HTMLElement && this.isOpen === true) {
-          option.focus();
+          this.setActiveItem(option);
         }
       });
 
@@ -259,50 +292,181 @@ const { class: className, name, defaultValue, ...rest } = Astro.props;
       });
     }
 
-    private handleNavigationKeys(e: KeyboardEvent) {
+    private setActiveItem(item: HTMLElement | null) {
       if (!this.content) return;
-      const items = this.content.querySelectorAll('[role="option"]');
 
-      // current, or first item, is focused upon opening the select
-      const activeElement = document.activeElement;
-      const currentIndex = Array.from(items).indexOf(activeElement as HTMLElement);
-      if (e.key === "Home") {
-        const firstEnabledItem = Array.from(items).find(
-          (item) => item.getAttribute("data-disabled") !== "true",
-        ) as HTMLElement;
-        if (firstEnabledItem) {
-          firstEnabledItem.focus();
+      // Remove active state from previous item
+      if (this.activeItem) {
+        this.activeItem.removeAttribute("data-active");
+      }
+
+      // Set new active item
+      this.activeItem = item;
+      if (item) {
+        item.setAttribute("data-active", "true");
+
+        // Scroll item into view if needed
+        item.scrollIntoView({ block: "nearest" });
+
+        // For search mode, set aria-activedescendant for assistive technologies
+        if (this.searchInput) {
+          // Item should already have an ID from setupAccessibility
+          this.searchInput.setAttribute("aria-activedescendant", item.id);
+        } else {
+          // For non-search mode, set focus for keyboard accessibility
+          item.focus();
         }
-        return;
+      } else if (this.searchInput) {
+        // Clear aria-activedescendant when no item is active
+        this.searchInput.removeAttribute("aria-activedescendant");
       }
-      if (e.key === "End") {
-        const lastEnabledItem = Array.from(items)
-          .reverse()
-          .find((item) => item.getAttribute("data-disabled") !== "true") as HTMLElement;
-        if (lastEnabledItem) {
-          lastEnabledItem.focus();
+    }
+
+    private findNavigableItem(
+      items: NodeListOf<Element>,
+      startIndex: number,
+      direction: "forward" | "backward",
+    ): HTMLElement | null {
+      const step = direction === "forward" ? 1 : -1;
+      const end = direction === "forward" ? items.length : -1;
+
+      for (let i = startIndex; i !== end; i += step) {
+        const item = items[i] as HTMLElement;
+        if (
+          item.getAttribute("data-disabled") !== "true" &&
+          item.getAttribute("data-filtered") !== "true"
+        ) {
+          return item;
         }
-        return;
       }
-      if (e.key === "ArrowUp" && currentIndex > 0) {
-        for (let i = currentIndex - 1; i >= 0; i--) {
-          const item = items[i] as HTMLElement;
-          if (item.getAttribute("data-disabled") !== "true") {
-            item.focus();
-            break;
+      return null;
+    }
+
+    private handleNavigationKeys(e: KeyboardEvent) {
+      if (!this.content) return;
+      const items = this.content.querySelectorAll('[role="option"]');
+      const currentIndex = Array.from(items).indexOf(this.activeItem as HTMLElement);
+
+      let targetItem: HTMLElement | null = null;
+
+      switch (e.key) {
+        case "Home":
+          targetItem = this.findNavigableItem(items, 0, "forward");
+          break;
+
+        case "End":
+          targetItem = this.findNavigableItem(items, items.length - 1, "backward");
+          break;
+
+        case "ArrowUp":
+          if (currentIndex > 0) {
+            targetItem = this.findNavigableItem(items, currentIndex - 1, "backward");
+          }
+          break;
+
+        case "ArrowDown":
+          if (currentIndex < items.length - 1) {
+            targetItem = this.findNavigableItem(items, currentIndex + 1, "forward");
+          }
+          break;
+      }
+
+      if (targetItem) {
+        this.setActiveItem(targetItem);
+      }
+    }
+
+    private setupSearchInput() {
+      if (!this.searchInput || !this.content) return;
+
+      this.searchInput.addEventListener("input", (e) => {
+        const target = e.target as HTMLInputElement;
+        const searchValue = target.value.toLowerCase().trim();
+        this.filterItems(searchValue);
+      });
+
+      // Handle keyboard navigation from search input
+      this.searchInput.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") {
+          e.stopPropagation();
+          this.returnFocusOnClose = true;
+          this.closeSelect();
+        }
+        // Allow arrow keys to navigate to items
+        else if (["ArrowUp", "ArrowDown", "Home", "End"].includes(e.key)) {
+          e.preventDefault();
+          e.stopPropagation();
+          this.handleNavigationKeys(e);
+        }
+        // Handle Enter to select the active or first visible item
+        else if (e.key === "Enter") {
+          e.preventDefault();
+          const itemToSelect = this.activeItem || this.getFirstVisibleItem();
+          if (itemToSelect) {
+            this.returnFocusOnClose = true;
+            this.handleSelection(itemToSelect);
           }
         }
-        return;
+        // Prevent space from scrolling the page, but allow it to be typed
+        else if (e.key === " ") {
+          e.stopPropagation();
+        }
+      });
+    }
+
+    private getFirstVisibleItem(): HTMLElement | null {
+      if (!this.content) return null;
+
+      const items = this.content.querySelectorAll('[role="option"]');
+      for (const item of items) {
+        if (
+          item.getAttribute("data-disabled") !== "true" &&
+          item.getAttribute("data-filtered") !== "true"
+        ) {
+          return item as HTMLElement;
+        }
       }
-      if (e.key === "ArrowDown" && currentIndex < items.length - 1) {
-        for (let i = currentIndex + 1; i < items.length; i++) {
-          const item = items[i] as HTMLElement;
-          if (item.getAttribute("data-disabled") !== "true") {
-            item.focus();
-            break;
+      return null;
+    }
+
+    private filterItems(searchValue: string) {
+      if (!this.content) return;
+
+      const items = this.content.querySelectorAll('[role="option"]');
+      let visibleCount = 0;
+      let firstVisibleItem: HTMLElement | null = null;
+
+      items.forEach((item) => {
+        const itemText = item.textContent?.toLowerCase().trim() || "";
+        const matches = itemText.includes(searchValue);
+
+        if (matches || searchValue === "") {
+          item.classList.remove("starwind-sr-only");
+          item.removeAttribute("data-filtered");
+          visibleCount++;
+          if (!firstVisibleItem) {
+            firstVisibleItem = item as HTMLElement;
           }
+        } else {
+          item.classList.add("starwind-sr-only");
+          item.setAttribute("data-filtered", "true");
+        }
+      });
+
+      // Update active item to first visible item after filtering
+      if (this.searchInput && firstVisibleItem) {
+        this.setActiveItem(firstVisibleItem);
+      } else if (this.searchInput && visibleCount === 0) {
+        this.setActiveItem(null);
+      }
+
+      // Show/hide empty message
+      if (this.emptyElement) {
+        if (visibleCount === 0 && searchValue !== "") {
+          this.emptyElement.classList.remove("hidden");
+        } else {
+          this.emptyElement.classList.add("hidden");
         }
-        return;
       }
     }
 
@@ -311,12 +475,12 @@ const { class: className, name, defaultValue, ...rest } = Astro.props;
       const search = this.typeaheadSearch + key;
       const items = this.content.querySelectorAll('[role="option"]');
 
-      // find and focus the first matching option
+      // find and set active the first matching option
       const matches = Array.from(items).filter((item) =>
         item.textContent?.toLowerCase().trim().startsWith(search.toLowerCase()),
       ) as HTMLElement[];
       if (matches.length > 0) {
-        matches[0].focus();
+        this.setActiveItem(matches[0]);
       }
 
       // update the typeahead search and reset the timer
@@ -361,18 +525,32 @@ const { class: className, name, defaultValue, ...rest } = Astro.props;
       this.trigger.setAttribute("aria-expanded", "true");
       this.content.style.removeProperty("display");
 
-      // set focus on the current selected item
-      if (this.selectedItem) {
-        this.selectedItem.focus();
+      // If search input exists, focus it and clear any previous search
+      if (this.searchInput) {
+        this.searchInput.value = "";
+        this.filterItems("");
+
+        // Set the selected item or first item as active
+        const initialItem = this.selectedItem || this.getFirstVisibleItem();
+        if (initialItem) {
+          this.setActiveItem(initialItem);
+        }
+
+        requestAnimationFrame(() => {
+          this.searchInput?.focus();
+        });
       } else {
-        // if no item is selected, focus on the first item
-        const firstItem = this.content.querySelector('[role="option"]') as HTMLElement;
-        if (firstItem) {
-          firstItem.focus();
+        // set active on the current selected item
+        if (this.selectedItem) {
+          this.setActiveItem(this.selectedItem);
+        } else {
+          // if no item is selected, set active on the first item
+          const firstItem = this.content.querySelector('[role="option"]') as HTMLElement;
+          if (firstItem) {
+            this.setActiveItem(firstItem);
+          }
         }
       }
-
-      this.positionContent();
     }
 
     private closeSelect() {
@@ -399,6 +577,13 @@ const { class: className, name, defaultValue, ...rest } = Astro.props;
       setTimeout(() => {
         if (!this.content) return;
         this.content.style.display = "none";
+
+        // Clear search and show all items after animation completes
+        if (this.searchInput) {
+          this.searchInput.value = "";
+          this.filterItems("");
+          this.setActiveItem(null);
+        }
       }, this.animationDuration);
 
       this.trigger.setAttribute("aria-expanded", "false");
@@ -478,29 +663,6 @@ const { class: className, name, defaultValue, ...rest } = Astro.props;
         this.handleSelection(item);
       }
     }
-
-    /**
-     * TODO: add position logic to avoid collisions with window boundary
-     * It will need to switch to top or bottom depending on space available
-     * It will also need to set the content max height so it doesn't overflow the viewport
-     */
-    private positionContent() {
-      // if (!this.content || !this.trigger) return;
-      // const triggerRect = this.trigger.getBoundingClientRect();
-      // const contentRect = this.content.getBoundingClientRect();
-      // const viewportHeight = window.innerHeight;
-      // // Position the content below the trigger by default
-      // let top = triggerRect.bottom;
-      // // If there's not enough space below, position it above
-      // if (top + contentRect.height > viewportHeight) {
-      //   top = triggerRect.top - contentRect.height;
-      // }
-      // this.content.style.position = "absolute";
-      // this.content.style.top = `${top}px`;
-      // this.content.style.left = `${triggerRect.left}px`;
-      // this.content.style.width = `${triggerRect.width}px`;
-      // this.content.style.zIndex = "50";
-    }
   }
 
   // Store instances in a WeakMap to avoid memory leaks

package/dist/src/components/select/SelectContent.astro

@@ -23,6 +23,11 @@ type Props = HTMLAttributes<"div"> & {
    * @default 150
    */
   animationDuration?: number;
+  /**
+   * Size of the select content
+   * @default md
+   */
+  size?: "sm" | "md" | "lg";
 };
 
 export const selectContent = tv({
@@ -42,8 +47,13 @@ export const selectContent = tv({
       center: "left-1/2 -translate-x-1/2",
       end: "slide-in-from-right-1 slide-out-to-right-1 right-0",
     },
+    size: {
+      sm: "text-sm [&_[data-slot=select-label]]:text-xs",
+      md: "text-base [&_[data-slot=select-label]]:text-sm",
+      lg: "text-lg [&_[data-slot=select-label]]:text-base",
+    },
   },
-  defaultVariants: { side: "bottom", align: "start" },
+  defaultVariants: { side: "bottom", align: "start", size: "md" },
 });
 
 export const selectContentInner = tv({
@@ -54,6 +64,7 @@ const {
   class: className,
   side = "bottom",
   align = "start",
+  size = "md",
   sideOffset = 4,
   animationDuration = 150,
   ...rest
@@ -61,7 +72,7 @@ const {
 ---
 
 <div
-  class={selectContent({ side, align, class: className })}
+  class={selectContent({ side, align, size, class: className })}
   role="listbox"
   data-side={side}
   data-align={align}

package/dist/src/components/select/SelectItem.astro

@@ -16,14 +16,16 @@ type Props = HTMLAttributes<"div"> & {
 
 export const selectItem = tv({
   base: [
-    "relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 outline-none select-none",
-    "focus:bg-accent focus:text-accent-foreground",
+    "relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 outline-none select-none",
+    "data-[active]:bg-accent data-[active]:text-accent-foreground",
     "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
     "not-aria-selected:[&_svg]:hidden aria-selected:[&_svg]:flex",
   ],
 });
 
-export const selectItemIcon = tv({ base: "absolute left-2 size-3.5 items-center justify-center" });
+export const selectItemIcon = tv({
+  base: "absolute right-2 flex size-4 items-center justify-center",
+});
 
 const { class: className, value, disabled, ...rest } = Astro.props;
 ---
@@ -38,12 +40,12 @@ const { class: className, value, disabled, ...rest } = Astro.props;
   tabindex="0"
   {...rest}
 >
+  <span>
+    <slot />
+  </span>
   <span class={selectItemIcon()}>
     <slot name="icon">
       <Check class="size-4" />
     </slot>
   </span>
-  <span>
-    <slot />
-  </span>
 </div>

package/dist/src/components/select/SelectLabel.astro

@@ -4,7 +4,7 @@ import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div">;
 
-export const selectLabel = tv({ base: "text-muted-foreground py-1.5 pr-2 pl-8 text-sm" });
+export const selectLabel = tv({ base: "text-muted-foreground py-1.5 pr-8 pl-2" });
 
 const { class: className, ...rest } = Astro.props;
 ---

package/dist/src/components/select/SelectSearch.astro

@@ -0,0 +1,49 @@
+---
+import Search from "@tabler/icons/outline/search.svg";
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = Omit<HTMLAttributes<"input">, "type" | "autocomplete"> & {
+  /**
+   * The text to display when no results are found
+   * @default "No results found."
+   */
+  emptyText?: string;
+};
+
+export const selectSearch = tv({
+  base: [
+    "placeholder:text-muted-foreground flex w-full border-0 bg-transparent px-0 py-2.5",
+    "ring-0 outline-none disabled:cursor-not-allowed disabled:opacity-50",
+  ],
+});
+
+const {
+  class: className,
+  placeholder = "Search...",
+  emptyText = "No results found.",
+  ...rest
+} = Astro.props;
+---
+
+<div
+  data-slot="select-search-wrapper"
+  class="-mx-1 -mt-1 mb-1 flex items-center gap-2 border-b px-3"
+>
+  <slot name="icon">
+    <Search class="text-muted-foreground size-4.5 shrink-0" />
+  </slot>
+  <input
+    type="text"
+    class={selectSearch({ class: className })}
+    data-slot="select-search"
+    placeholder={placeholder}
+    autocomplete="off"
+    aria-label={placeholder}
+    {...rest}
+  />
+</div>
+
+<div class="text-muted-foreground hidden py-6 text-center text-sm" data-slot="select-empty">
+  <slot name="empty">{emptyText}</slot>
+</div>

package/dist/src/components/select/SelectTrigger.astro

@@ -1,34 +1,44 @@
 ---
 import ChevronDown from "@tabler/icons/outline/chevron-down.svg";
 import type { HTMLAttributes } from "astro/types";
-import { tv } from "tailwind-variants";
+import { tv, type VariantProps } from "tailwind-variants";
 
-type Props = Omit<HTMLAttributes<"button">, "role" | "type"> & {
-  /**
-   * The content to be rendered inside the select trigger
-   */
-
-  children: any;
-  /**
-   * Whether the select field is required in a form context
-   */
-  required?: boolean;
-};
+type Props = Omit<HTMLAttributes<"button">, "role" | "type"> &
+  VariantProps<typeof selectTrigger> & {
+    /**
+     * The content to be rendered inside the select trigger
+     */
+    children: any;
+    /**
+     * Whether the select field is required in a form context
+     */
+    required?: boolean;
+  };
 
 export const selectTrigger = tv({
   base: [
     "starwind-select-trigger",
-    "border-input dark:bg-input/30 text-foreground ring-offset-background flex h-11 items-center justify-between rounded-md border bg-transparent px-3 py-2 shadow-xs",
+    "border-input dark:bg-input/30 text-foreground ring-offset-background flex items-center justify-between gap-2 rounded-md border bg-transparent shadow-xs",
     "focus-visible:border-outline focus-visible:ring-outline/50 transition-[color,box-shadow] outline-none focus-visible:ring-3",
     "disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
   ],
+  variants: {
+    size: {
+      sm: "h-9 px-2 text-sm",
+      md: "h-11 px-3 text-base",
+      lg: "h-12 px-4 text-lg",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
 });
 
-const { class: className, required = false, ...rest } = Astro.props;
+const { class: className, size, required = false, ...rest } = Astro.props;
 ---
 
 <button
-  class={selectTrigger({ class: className })}
+  class={selectTrigger({ size, class: className })}
   type="button"
   role="combobox"
   aria-label="Select field"

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

@@ -3,6 +3,7 @@ import SelectContent, { selectContent, selectContentInner } from "./SelectConten
 import SelectGroup from "./SelectGroup.astro";
 import SelectItem, { selectItem, selectItemIcon } from "./SelectItem.astro";
 import SelectLabel, { selectLabel } from "./SelectLabel.astro";
+import SelectSearch, { selectSearch } from "./SelectSearch.astro";
 import SelectSeparator, { selectSeparator } from "./SelectSeparator.astro";
 import SelectTrigger, { selectTrigger } from "./SelectTrigger.astro";
 import type { SelectChangeEvent, SelectEvent } from "./SelectTypes";
@@ -14,6 +15,7 @@ const SelectVariants = {
   selectItem,
   selectItemIcon,
   selectLabel,
+  selectSearch,
   selectSeparator,
   selectTrigger,
   selectValue,
@@ -27,6 +29,7 @@ export {
   SelectGroup,
   SelectItem,
   SelectLabel,
+  SelectSearch,
   SelectSeparator,
   SelectTrigger,
   SelectValue,
@@ -40,6 +43,7 @@ export default {
   Content: SelectContent,
   Group: SelectGroup,
   Label: SelectLabel,
+  Search: SelectSearch,
   Item: SelectItem,
   Separator: SelectSeparator,
 };

package/dist/src/components/toggle/Toggle.astro

@@ -0,0 +1,172 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const toggle = tv({
+  base: [
+    "inline-flex items-center justify-center gap-2 rounded-md font-medium whitespace-nowrap",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    "focus-visible:border-outline focus-visible:ring-outline/50 focus-visible:ring-3",
+    "transition-colors outline-none",
+    "aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 aria-invalid:border-error",
+  ],
+  variants: {
+    variant: {
+      default: "hover:bg-muted hover:text-muted-foreground bg-transparent",
+      outline:
+        "border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-xs",
+    },
+    size: {
+      sm: "h-9 min-w-9 px-2 text-sm",
+      md: "h-11 min-w-11 px-2.5 text-base",
+      lg: "h-12 min-w-12 px-3 text-lg",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md",
+  },
+});
+
+type Props = VariantProps<typeof toggle> &
+  HTMLAttributes<"button"> & {
+    /**
+     * The pressed state of the toggle when initially rendered
+     */
+    defaultPressed?: boolean;
+    /**
+     * Optional sync group name. When set, all toggles with the same sync group will mirror each other's state
+     */
+    syncGroup?: string;
+  };
+
+const { class: className, defaultPressed = false, syncGroup, variant, size, ...rest } = Astro.props;
+
+const dataState = defaultPressed ? "on" : "off";
+---
+
+<button
+  type="button"
+  class={toggle({ variant, size, class: `starwind-toggle ${className || ""}` })}
+  data-slot="toggle"
+  data-state={dataState}
+  data-sync-group={syncGroup}
+  aria-pressed={defaultPressed}
+  {...rest}
+>
+  <slot />
+</button>
+
+<script>
+  import type { ToggleChangeEvent, ToggleSyncEvent } from "./ToggleTypes";
+
+  class ToggleHandler {
+    private toggle: HTMLButtonElement;
+    private syncGroup?: string;
+
+    constructor(toggle: HTMLButtonElement, idx: number) {
+      this.toggle = toggle;
+      this.syncGroup = toggle.dataset.syncGroup;
+
+      if (!this.toggle.id) {
+        this.toggle.id = `starwind-toggle${idx}`;
+      }
+
+      this.setupEventListeners();
+
+      if (this.syncGroup) {
+        this.setupSyncListener();
+      }
+    }
+
+    private setupEventListeners(): void {
+      this.toggle.addEventListener("click", () => this.handleToggle());
+      this.toggle.addEventListener("keydown", (event) => this.handleKeyDown(event));
+    }
+
+    private setupSyncListener(): void {
+      if (!this.syncGroup) return;
+
+      document.addEventListener(`starwind-toggle-sync:${this.syncGroup}`, ((e: ToggleSyncEvent) => {
+        // Don't sync if this toggle triggered the event
+        if (e.detail.sourceId === this.toggle.id) return;
+
+        const newPressed = e.detail.pressed;
+        this.updateState(newPressed, false); // false = don't dispatch sync event
+      }) as EventListener);
+    }
+
+    private handleToggle(): void {
+      if (this.isDisabled()) return;
+
+      const isPressed = this.toggle.getAttribute("aria-pressed") === "true";
+      const newPressed = !isPressed;
+
+      this.updateState(newPressed, true);
+    }
+
+    private handleKeyDown(event: KeyboardEvent): void {
+      if (this.isDisabled()) return;
+
+      if (event.key === " " || event.key === "Enter") {
+        event.preventDefault();
+        this.handleToggle();
+      }
+    }
+
+    private isDisabled(): boolean {
+      return this.toggle.disabled;
+    }
+
+    private updateState(pressed: boolean, dispatchSync: boolean): void {
+      const newState = pressed ? "on" : "off";
+
+      this.toggle.setAttribute("aria-pressed", pressed.toString());
+      this.toggle.setAttribute("data-state", newState);
+
+      // Dispatch change event (always fired for user to listen to)
+      const changeEvent = new CustomEvent<ToggleChangeEvent["detail"]>("starwind-toggle:change", {
+        detail: {
+          pressed,
+          toggleId: this.toggle.id,
+          syncGroup: this.syncGroup,
+        },
+        bubbles: true,
+        cancelable: true,
+      });
+
+      this.toggle.dispatchEvent(changeEvent);
+
+      // Dispatch sync event if in a sync group and requested
+      if (this.syncGroup && dispatchSync) {
+        const syncEvent = new CustomEvent<ToggleSyncEvent["detail"]>(
+          `starwind-toggle-sync:${this.syncGroup}`,
+          {
+            detail: {
+              pressed,
+              sourceId: this.toggle.id,
+            },
+          },
+        );
+
+        document.dispatchEvent(syncEvent);
+      }
+    }
+  }
+
+  // Store instances in a WeakMap to avoid memory leaks
+  const toggleInstances = new WeakMap<HTMLElement, ToggleHandler>();
+
+  const setupToggles = () => {
+    document.querySelectorAll<HTMLButtonElement>(".starwind-toggle").forEach((toggle, idx) => {
+      if (!toggleInstances.has(toggle)) {
+        toggleInstances.set(toggle, new ToggleHandler(toggle, idx));
+      }
+    });
+  };
+
+  setupToggles();
+  document.addEventListener("astro:after-swap", setupToggles);
+</script>

package/dist/src/components/toggle/ToggleTypes.ts

@@ -0,0 +1,14 @@
+export interface ToggleChangeEvent extends CustomEvent {
+  detail: {
+    pressed: boolean;
+    toggleId: string;
+    syncGroup?: string;
+  };
+}
+
+export interface ToggleSyncEvent extends CustomEvent {
+  detail: {
+    pressed: boolean;
+    sourceId: string;
+  };
+}

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

@@ -0,0 +1,8 @@
+import Toggle, { toggle } from "./Toggle.astro";
+import type { ToggleChangeEvent, ToggleSyncEvent } from "./ToggleTypes";
+
+const ToggleVariants = { toggle };
+
+export { Toggle, type ToggleChangeEvent, type ToggleSyncEvent, ToggleVariants };
+
+export default Toggle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starwind-ui/core",
-  "version": "1.11.1",
+  "version": "1.12.0",
   "description": "Starwind UI core components and registry",
   "license": "MIT",
   "author": {