starwind 3.0.0-beta.1 → 3.0.0-beta.2

package/dist/index.js

@@ -6,7 +6,7 @@ import { Command, Option } from "commander";
 // package.json
 var package_default = {
   name: "starwind",
-  version: "3.0.0-beta.1",
+  version: "3.0.0-beta.2",
   description: "Install and manage Starwind UI components in Astro and React applications",
   license: "MIT",
   homepage: "https://starwind.dev/",
@@ -2042,7 +2042,7 @@ export const badge = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -2576,7 +2576,7 @@ export const badge = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -2606,7 +2606,7 @@ export const badge = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -2628,7 +2628,7 @@ export const badge = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -2676,7 +2676,7 @@ export const kbdGroup = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -2716,7 +2716,7 @@ export const kbdGroup = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -2746,7 +2746,7 @@ export const kbdGroup = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -2768,7 +2768,7 @@ export const kbdGroup = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -2798,7 +2798,7 @@ export const kbdGroup = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -2820,7 +2820,7 @@ export const kbdGroup = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -2850,7 +2850,7 @@ export const kbdGroup = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -2872,7 +2872,7 @@ export const kbdGroup = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -2902,7 +2902,7 @@ export const kbdGroup = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons", range: "^3.37.1" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -2925,7 +2925,7 @@ export const kbdGroup = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons-react", range: "^3.37.1" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -2980,7 +2980,7 @@ export const kbdGroup = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -3026,7 +3026,7 @@ export const kbdGroup = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -3080,7 +3080,7 @@ export const kbdGroup = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons", range: "^3.37.1" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -3127,7 +3127,7 @@ export const kbdGroup = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons-react", range: "^3.37.1" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -3166,7 +3166,7 @@ export const kbdGroup = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -3196,7 +3196,7 @@ export const kbdGroup = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -3226,7 +3226,7 @@ export const kbdGroup = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -3248,7 +3248,7 @@ export const kbdGroup = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -3286,7 +3286,7 @@ export const kbdGroup = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -3316,7 +3316,7 @@ export const kbdGroup = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -3350,7 +3350,7 @@ export const kbdGroup = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons", range: "^3.37.1" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -3377,7 +3377,7 @@ export const kbdGroup = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons-react", range: "^3.37.1" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -3408,7 +3408,7 @@ export const kbdGroup = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -3430,7 +3430,7 @@ export const kbdGroup = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -3646,7 +3646,7 @@ export const comboboxValue = tv({
           ],
           componentDependencies: ["input-group"],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons", range: "^3.37.1" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -3855,7 +3855,229 @@ export const comboboxValue = tv({
           ],
           componentDependencies: ["input-group"],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
+            { name: "@tabler/icons-react", range: "^3.37.1" },
+            { name: "react", range: ">=18" },
+            { name: "tailwind-variants", range: "^3.2.2" }
+          ]
+        }
+      }
+    },
+    {
+      name: "color-picker",
+      version: "0.1.0",
+      type: "component",
+      dependencies: [],
+      targets: {
+        astro: {
+          files: [
+            {
+              path: "src/components/starwind/color-picker/ColorPicker.astro",
+              content: '---\nimport type { ComponentProps } from "astro/types";\n\nimport { Popover } from "../popover";\nimport ColorPickerRoot from "./ColorPickerRoot.astro";\n\ntype Props = ComponentProps<typeof ColorPickerRoot> & {\n  defaultOpen?: boolean;\n  closeOnEscape?: boolean;\n  closeOnOutsideInteract?: boolean;\n  modal?: boolean;\n  openOnHover?: boolean;\n  closeDelay?: number;\n};\n\nconst {\n  defaultOpen = false,\n  closeOnEscape = true,\n  closeOnOutsideInteract = true,\n  modal = false,\n  openOnHover = false,\n  closeDelay = 200,\n  defaultValue = "#000000",\n  format = "hex",\n  alpha = true,\n  allowEmpty = false,\n  disabled = false,\n  readOnly = false,\n  name,\n  form,\n  required = false,\n  locale,\n  dir,\n  class: className,\n  size = "md",\n  ...rest\n} = Astro.props;\n---\n\n<Popover\n  defaultOpen={defaultOpen}\n  closeOnEscape={closeOnEscape}\n  closeOnOutsideInteract={closeOnOutsideInteract}\n  modal={modal}\n  openOnHover={openOnHover}\n  closeDelay={closeDelay}\n>\n  <ColorPickerRoot\n    defaultValue={defaultValue}\n    format={format}\n    alpha={alpha}\n    allowEmpty={allowEmpty}\n    disabled={disabled}\n    readOnly={readOnly}\n    name={name}\n    form={form}\n    required={required}\n    locale={locale}\n    dir={dir}\n    {...rest}\n    data-floating-root={true}\n    class={className}\n    size={size}\n  >\n    {async (initial: import("@starwind-ui/astro/color-picker").ColorPickerRenderProjection) => (\n      <Fragment set:html={await Astro.slots.render("default", [initial])} />\n    )}\n  </ColorPickerRoot>\n</Popover>\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerArea.astro",
+              content: '---\nimport type { HTMLAttributes } from "astro/types";\nimport type { VariantProps } from "tailwind-variants";\n\nimport "./styles.css";\nimport ColorPickerPrimitive from "@starwind-ui/astro/color-picker";\nimport ColorPickerAreaThumb from "./ColorPickerAreaThumb.astro";\nimport { colorPickerArea } from "./variants";\n\ntype Props = HTMLAttributes<"div"> & VariantProps<typeof colorPickerArea> & {\n  initial?: import("@starwind-ui/astro/color-picker").ColorPickerAreaProjection;\n};\n\nconst { initial, class: className, size = "md", ...rest } = Astro.props;\n---\n\n<ColorPickerPrimitive.Area\n  initial={initial?.root.initial}\n  class={colorPickerArea({ size, class: className })}\n  {...rest}\n  data-slot="color-picker-area"\n>\n  <ColorPickerPrimitive.AreaBackground\n    initial={initial?.background.initial}\n    class="pointer-events-none absolute inset-0 size-full"\n    data-slot="color-picker-area-background"\n  />\n\n  <ColorPickerAreaThumb initial={initial?.thumb.initial} size={size} />\n\n  <ColorPickerPrimitive.AreaInput\n    initial={initial?.input({ axis: "x" }).initial}\n    axis="x"\n    class="absolute inset-0 size-full cursor-crosshair opacity-0"\n    data-slot="color-picker-area-input-x"\n  />\n\n  <ColorPickerPrimitive.AreaInput\n    initial={initial?.input({ axis: "y" }).initial}\n    axis="y"\n    class="absolute inset-0 size-full cursor-crosshair opacity-0"\n    data-slot="color-picker-area-input-y"\n  />\n</ColorPickerPrimitive.Area>\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerAreaThumb.astro",
+              content: '---\nimport ColorPickerPrimitive from "@starwind-ui/astro/color-picker";\nimport type { HTMLAttributes } from "astro/types";\nimport type { VariantProps } from "tailwind-variants";\nimport { colorPickerAreaThumb } from "./variants";\n\ntype Props = HTMLAttributes<"span"> & VariantProps<typeof colorPickerAreaThumb> & {\n  initial?: import("@starwind-ui/astro/color-picker").ColorPickerInitialPartProjection;\n};\n\nconst { initial, class: className, size = "md", ...rest } = Astro.props;\n---\n\n<ColorPickerPrimitive.AreaThumb\n  initial={initial}\n  class={colorPickerAreaThumb({ size, class: className })}\n  {...rest}\n  data-slot="color-picker-area-thumb"\n>\n  <slot />\n</ColorPickerPrimitive.AreaThumb>\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerChannelInput.astro",
+              content: '---\nimport ColorPickerPrimitive from "@starwind-ui/astro/color-picker";\nimport type { HTMLAttributes } from "astro/types";\nimport type { VariantProps } from "tailwind-variants";\nimport { colorPickerChannelInput, colorPickerChannelInputLayout } from "./variants";\n\ntype Props = HTMLAttributes<"input"> & VariantProps<typeof colorPickerChannelInput> & {\n  channel: import("@starwind-ui/astro/color-picker").ColorPickerChannel;\n  initial?: import("@starwind-ui/astro/color-picker").ColorPickerInitialPartProjection;\n};\n\nconst { initial, channel, class: className, size = "md", ...rest } = Astro.props;\n---\n\n<ColorPickerPrimitive.ChannelInput\n  initial={initial}\n  class={[colorPickerChannelInput({ size }), colorPickerChannelInputLayout({ size }), className].filter(Boolean).join(" ")}\n  channel={channel}\n  {...rest}\n  data-slot="color-picker-channel-input"\n/>\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerChannelSlider.astro",
+              content: '---\nimport type { HTMLAttributes } from "astro/types";\nimport type { VariantProps } from "tailwind-variants";\n\nimport "./styles.css";\nimport ColorPickerPrimitive from "@starwind-ui/astro/color-picker";\nimport { colorPickerChannelSlider, colorPickerChannelSliderThumb } from "./variants";\n\ntype Props = HTMLAttributes<"div"> & VariantProps<typeof colorPickerChannelSlider> & {\n  channel: import("@starwind-ui/astro/color-picker").ColorPickerChannel;\n  orientation?: "horizontal" | "vertical";\n  step?: number;\n  initial?: import("@starwind-ui/astro/color-picker").ColorPickerRenderProjection;\n};\n\nconst {\n  initial,\n  step,\n  channel,\n  orientation = "horizontal",\n  class: className,\n  size = "md",\n  ...rest\n} = Astro.props;\n---\n\n<ColorPickerPrimitive.ChannelSlider\n  initial={initial?.channelSlider({ channel, orientation, step }).root.initial}\n  channel={channel}\n  orientation={orientation}\n  class={colorPickerChannelSlider({ size, class: className })}\n  {...rest}\n  data-slot="color-picker-channel-slider"\n>\n  <ColorPickerPrimitive.TransparencyGrid\n    initial={initial?.transparencyGrid.initial}\n    class="pointer-events-none absolute inset-0 size-full rounded-[inherit]"\n    data-slot="color-picker-transparency-grid"\n  />\n\n  <ColorPickerPrimitive.ChannelSliderTrack\n    initial={initial?.channelSlider({ channel, orientation, step }).track.initial}\n    class="pointer-events-none absolute inset-0 size-full rounded-[inherit]"\n    data-slot="color-picker-channel-slider-track"\n  />\n\n  <ColorPickerPrimitive.ChannelSliderThumb\n    initial={initial?.channelSlider({ channel, orientation, step }).thumb.initial}\n    class={colorPickerChannelSliderThumb({ size })}\n    data-slot="color-picker-channel-slider-thumb"\n  >\n    <span\n      class="pointer-events-none absolute inset-0 size-full"\n      data-slot="color-picker-transparency-grid"\n    />\n\n    <span\n      class="pointer-events-none absolute inset-0 size-full bg-[var(--sw-color-picker-channel-thumb-color)]"\n      data-slot="color-picker-channel-thumb-color-layer"\n    />\n  </ColorPickerPrimitive.ChannelSliderThumb>\n\n  <ColorPickerPrimitive.ChannelSliderInput\n    initial={initial?.channelSlider({ channel, orientation, step }).input().initial}\n    class="absolute inset-0 size-full cursor-pointer opacity-0"\n    data-slot="color-picker-channel-slider-input"\n  />\n</ColorPickerPrimitive.ChannelSlider>\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerClear.astro",
+              content: '---\nimport ColorPickerPrimitive from "@starwind-ui/astro/color-picker";\nimport type { HTMLAttributes } from "astro/types";\nimport type { VariantProps } from "tailwind-variants";\nimport { colorPickerAction } from "./variants";\n\ntype Props = HTMLAttributes<"button"> & VariantProps<typeof colorPickerAction> & {\n  initial?: import("@starwind-ui/astro/color-picker").ColorPickerInitialPartProjection;\n};\n\nconst { initial, class: className, size = "md", ...rest } = Astro.props;\n---\n\n<ColorPickerPrimitive.Clear\n  initial={initial}\n  class={colorPickerAction({ size, class: className })}\n  {...rest}\n  data-slot="color-picker-clear"\n>\n  <slot />\n</ColorPickerPrimitive.Clear>\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerContent.astro",
+              content: '---\nimport ColorPicker from "@tabler/icons/outline/color-picker.svg";\nimport type { ComponentProps } from "astro/types";\nimport type { VariantProps } from "tailwind-variants";\n\nimport "./styles.css";\nimport { PopoverContent } from "../popover";\nimport ColorPickerArea from "./ColorPickerArea.astro";\nimport ColorPickerClear from "./ColorPickerClear.astro";\nimport ColorPickerEyeDropper from "./ColorPickerEyeDropper.astro";\nimport ColorPickerInput from "./ColorPickerInput.astro";\nimport ColorPickerSliders from "./ColorPickerSliders.astro";\nimport { colorPickerContent, colorPickerSeparator, colorPickerSliderActionRow, colorPickerValueFormatRow } from "./variants";\n\ntype Props = ComponentProps<typeof PopoverContent> & VariantProps<typeof colorPickerContent> & {\n  alpha?: boolean;\n  showEyeDropper?: boolean;\n  showClear?: boolean;\n  initial?: import("@starwind-ui/astro/color-picker").ColorPickerRenderProjection;\n};\n\nconst {\n  initial,\n  class: className,\n  size = "md",\n  alpha = true,\n  showEyeDropper = true,\n  showClear = false,\n  side = "bottom",\n  align = "start",\n  exitMotion = "fade",\n  ...rest\n} = Astro.props;\n\nconst inputSize = size === "lg" ? "md" : "sm";\nconst hasSwatches = Astro.slots.has("swatches");\nconst hasSwatchesAttribute = hasSwatches ? "true" : "false";\n---\n\n<PopoverContent\n  class={colorPickerContent({ size, class: className })}\n  side={side}\n  align={align}\n  exitMotion={exitMotion}\n  {...rest}\n  data-slot="color-picker-content"\n>\n  <slot>\n    <ColorPickerArea initial={initial?.area()} size={size} />\n\n    <div class={colorPickerSliderActionRow({ size })} data-slot="color-picker-slider-action-row">\n      <ColorPickerSliders initial={initial} alpha={alpha} size={size} class="min-w-0 flex-1" />\n\n      {\n        showEyeDropper && (\n          <ColorPickerEyeDropper\n            initial={initial?.eyeDropperTrigger.initial}\n            size={size}\n            aria-label="Pick a color from the screen"\n          >\n            <ColorPicker class="size-4" aria-hidden="true" />\n          </ColorPickerEyeDropper>\n        )\n      }\n    </div>\n\n    <div class={colorPickerValueFormatRow({ size })} data-slot="color-picker-value-format-row">\n      <ColorPickerInput initial={initial} size={inputSize} class="min-w-0 flex-1" />\n    </div>\n\n    <div class="contents" data-has-swatches={hasSwatchesAttribute} data-slot="color-picker-footer">\n      {\n        (hasSwatches || showClear) && (\n          <div\n            class={colorPickerSeparator({ size })}\n            role="separator"\n            aria-hidden="true"\n            data-slot="color-picker-separator"\n          />\n        )\n      }\n\n      <slot name="swatches" />\n\n      {\n        showClear && (\n          <ColorPickerClear\n            initial={initial?.clear.initial}\n            size={inputSize}\n            aria-label="Clear color"\n          >\n            Clear\n          </ColorPickerClear>\n        )\n      }\n    </div>\n  </slot>\n</PopoverContent>\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerControl.astro",
+              content: '---\nimport ColorPickerPrimitive from "@starwind-ui/astro/color-picker";\nimport type { HTMLAttributes } from "astro/types";\nimport type { VariantProps } from "tailwind-variants";\nimport { colorPickerControl } from "./variants";\n\ntype Props = HTMLAttributes<"div"> & VariantProps<typeof colorPickerControl> & {\n  initial?: import("@starwind-ui/astro/color-picker").ColorPickerInitialPartProjection;\n};\n\nconst { initial, class: className, size = "md", ...rest } = Astro.props;\n---\n\n<ColorPickerPrimitive.Control\n  initial={initial}\n  class={colorPickerControl({ size, class: className })}\n  {...rest}\n  data-slot="color-picker-control"\n>\n  <slot />\n</ColorPickerPrimitive.Control>\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerEyeDropper.astro",
+              content: '---\nimport ColorPickerPrimitive from "@starwind-ui/astro/color-picker";\nimport type { HTMLAttributes } from "astro/types";\nimport type { VariantProps } from "tailwind-variants";\nimport { colorPickerAction } from "./variants";\n\ntype Props = HTMLAttributes<"button"> & VariantProps<typeof colorPickerAction> & {\n  initial?: import("@starwind-ui/astro/color-picker").ColorPickerInitialPartProjection;\n};\n\nconst { initial, class: className, size = "md", ...rest } = Astro.props;\n---\n\n<ColorPickerPrimitive.EyeDropperTrigger\n  initial={initial}\n  class={colorPickerAction({ size, class: className })}\n  {...rest}\n  data-slot="color-picker-eye-dropper"\n>\n  <slot />\n</ColorPickerPrimitive.EyeDropperTrigger>\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerFormatSelect.astro",
+              content: '---\nimport type { HTMLAttributes } from "astro/types";\n\nimport "./styles.css";\nimport ColorPickerPrimitive from "@starwind-ui/astro/color-picker";\nimport { Select, SelectContent, SelectItem, SelectTrigger } from "../select";\nimport { colorPickerFormatSelectTrigger } from "./variants";\n\ntype Props = HTMLAttributes<"div"> & {\n  size?: "sm" | "md" | "lg";\n  initial?: import("@starwind-ui/astro/color-picker").ColorPickerInitialPartProjection;\n};\n\nconst { initial, class: className, size = "md", ...rest } = Astro.props;\n---\n\n<ColorPickerPrimitive.FormatControl\n  initial={initial}\n  class={["shrink-0", className].filter(Boolean).join(" ")}\n  {...rest}\n  data-slot="color-picker-format-control"\n>\n  <Select>\n    <SelectTrigger\n      size={size}\n      aria-label="Color format"\n      class={colorPickerFormatSelectTrigger({ size })}\n    />\n\n    <SelectContent size={size} data-sw-color-picker-format-options="">\n      <SelectItem value="hex">HEX</SelectItem>\n\n      <SelectItem value="rgb">RGB</SelectItem>\n\n      <SelectItem value="hsl">HSL</SelectItem>\n\n      <SelectItem value="hsb">HSB</SelectItem>\n    </SelectContent>\n  </Select>\n</ColorPickerPrimitive.FormatControl>\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerHiddenInput.astro",
+              content: '---\nimport ColorPickerPrimitive from "@starwind-ui/astro/color-picker";\nimport type { HTMLAttributes } from "astro/types";\nimport type { VariantProps } from "tailwind-variants";\nimport { colorPickerHiddenInput } from "./variants";\n\ntype Props = HTMLAttributes<"input"> & VariantProps<typeof colorPickerHiddenInput> & {\n  initial?: import("@starwind-ui/astro/color-picker").ColorPickerInitialPartProjection;\n};\n\nconst { initial, class: className, size = "md", ...rest } = Astro.props;\n---\n\n<ColorPickerPrimitive.HiddenInput\n  initial={initial}\n  class={colorPickerHiddenInput({ size, class: className })}\n  {...rest}\n  data-slot="color-picker-hidden-input"\n/>\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerInput.astro",
+              content: '---\nimport type { HTMLAttributes } from "astro/types";\nimport type { VariantProps } from "tailwind-variants";\n\nimport ColorPickerFormatSelect from "./ColorPickerFormatSelect.astro";\nimport ColorPickerNativeFormatSelect from "./ColorPickerNativeFormatSelect.astro";\nimport ColorPickerValueInput from "./ColorPickerValueInput.astro";\nimport { colorPickerInput } from "./variants";\n\ntype Props = HTMLAttributes<"div"> & VariantProps<typeof colorPickerInput> & {\n  formatControl?: "select" | "native";\n  initial?: import("@starwind-ui/astro/color-picker").ColorPickerRenderProjection;\n};\n\nconst { initial, formatControl = "select", class: className, size = "md", ...rest } = Astro.props;\n---\n\n<div class={colorPickerInput({ size, class: className })} {...rest} data-slot="color-picker-input">\n  <ColorPickerValueInput initial={initial?.valueInput.initial} size={size} />\n\n  {\n    formatControl === "native" ? (\n      <ColorPickerNativeFormatSelect initial={initial?.formatSelect.initial} size={size} />\n    ) : (\n      <ColorPickerFormatSelect initial={initial?.formatControl.initial} size={size} />\n    )\n  }\n</div>\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerLabel.astro",
+              content: '---\nimport ColorPickerPrimitive from "@starwind-ui/astro/color-picker";\nimport type { HTMLAttributes } from "astro/types";\nimport type { VariantProps } from "tailwind-variants";\nimport { colorPickerLabel } from "./variants";\n\ntype Props = HTMLAttributes<"label"> & VariantProps<typeof colorPickerLabel> & {\n  initial?: import("@starwind-ui/astro/color-picker").ColorPickerInitialPartProjection;\n};\n\nconst { initial, class: className, size = "md", ...rest } = Astro.props;\n---\n\n<ColorPickerPrimitive.Label\n  initial={initial}\n  class={colorPickerLabel({ size, class: className })}\n  {...rest}\n  data-slot="color-picker-label"\n>\n  <slot />\n</ColorPickerPrimitive.Label>\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerNativeFormatSelect.astro",
+              content: '---\nimport ColorPickerPrimitive from "@starwind-ui/astro/color-picker";\nimport ChevronDown from "@tabler/icons/outline/chevron-down.svg";\nimport type { HTMLAttributes } from "astro/types";\nimport type { VariantProps } from "tailwind-variants";\nimport { NativeSelectOption } from "../native-select";\nimport { colorPickerNativeFormatSelect, colorPickerNativeFormatSelectIcon, colorPickerNativeFormatSelectWrapper } from "./variants";\n\ntype Props = Omit<HTMLAttributes<"select">, "size"> & VariantProps<typeof colorPickerNativeFormatSelect> & {\n  initial?: import("@starwind-ui/astro/color-picker").ColorPickerInitialPartProjection;\n};\n\nconst { initial, class: className, size = "md", ...rest } = Astro.props;\n---\n\n<div\n  class={colorPickerNativeFormatSelectWrapper()}\n  data-slot="color-picker-native-format-select-wrapper"\n>\n  <ColorPickerPrimitive.FormatSelect\n    initial={initial}\n    class={colorPickerNativeFormatSelect({ size, class: className })}\n    aria-label="Color format"\n    {...rest}\n    data-slot="color-picker-native-format-select"\n  >\n    <NativeSelectOption value="hex" selected={(initial?.properties.value ?? rest.value) === "hex"}>\n      HEX\n    </NativeSelectOption>\n\n    <NativeSelectOption value="rgb" selected={(initial?.properties.value ?? rest.value) === "rgb"}>\n      RGB\n    </NativeSelectOption>\n\n    <NativeSelectOption value="hsl" selected={(initial?.properties.value ?? rest.value) === "hsl"}>\n      HSL\n    </NativeSelectOption>\n\n    <NativeSelectOption value="hsb" selected={(initial?.properties.value ?? rest.value) === "hsb"}>\n      HSB\n    </NativeSelectOption>\n  </ColorPickerPrimitive.FormatSelect>\n\n  <ChevronDown\n    class={colorPickerNativeFormatSelectIcon({ size })}\n    aria-hidden="true"\n    data-slot="color-picker-native-format-select-icon"\n  />\n</div>\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerRoot.astro",
+              content: '---\nimport ColorPickerPrimitive from "@starwind-ui/astro/color-picker";\nimport type { HTMLAttributes } from "astro/types";\nimport type { VariantProps } from "tailwind-variants";\nimport { colorPicker } from "./variants";\n\ntype Props = Omit<HTMLAttributes<"div">, "value" | "defaultValue" | "onChange" | "dir"> & VariantProps<typeof colorPicker> & {\n  defaultValue?: import("@starwind-ui/astro/color-picker").ColorPickerValue;\n  format?: import("@starwind-ui/astro/color-picker").ColorPickerFormat;\n  alpha?: boolean;\n  allowEmpty?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  name?: string;\n  form?: string;\n  required?: boolean;\n  locale?: string;\n  dir?: import("@starwind-ui/astro/color-picker").ColorPickerDirection;\n};\n\nconst {\n  defaultValue = "#000000",\n  format = "hex",\n  alpha = true,\n  allowEmpty = false,\n  disabled = false,\n  readOnly = false,\n  name,\n  form,\n  required = false,\n  locale,\n  dir,\n  class: className,\n  size = "md",\n  ...rest\n} = Astro.props;\n---\n\n<ColorPickerPrimitive.Root\n  class={colorPicker({ size, class: className })}\n  defaultValue={defaultValue}\n  format={format}\n  alpha={alpha}\n  allowEmpty={allowEmpty}\n  disabled={disabled}\n  readOnly={readOnly}\n  name={name}\n  form={form}\n  required={required}\n  locale={locale}\n  dir={dir}\n  {...rest}\n  data-slot="color-picker"\n>\n  {async (initial: import("@starwind-ui/astro/color-picker").ColorPickerRenderProjection) => (\n    <Fragment set:html={await Astro.slots.render("default", [initial])} />\n  )}\n</ColorPickerPrimitive.Root>\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerSliders.astro",
+              content: '---\nimport type { HTMLAttributes } from "astro/types";\nimport type { VariantProps } from "tailwind-variants";\n\nimport ColorPickerChannelSlider from "./ColorPickerChannelSlider.astro";\nimport { colorPickerSliders } from "./variants";\n\ntype Props = HTMLAttributes<"div"> & VariantProps<typeof colorPickerSliders> & {\n  alpha?: boolean;\n  initial?: import("@starwind-ui/astro/color-picker").ColorPickerRenderProjection;\n};\n\nconst { initial, alpha = true, class: className, size = "md", ...rest } = Astro.props;\n---\n\n<div\n  class={colorPickerSliders({ size, class: className })}\n  {...rest}\n  data-slot="color-picker-sliders"\n>\n  <ColorPickerChannelSlider initial={initial} channel="hue" size={size} />\n\n  {\n    alpha && (\n      <ColorPickerChannelSlider initial={initial} channel="alpha" size={size} />\n    )\n  }\n</div>\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerSwatch.astro",
+              content: '---\nimport type { HTMLAttributes } from "astro/types";\nimport type { VariantProps } from "tailwind-variants";\n\nimport "./styles.css";\nimport ColorPickerPrimitive from "@starwind-ui/astro/color-picker";\nimport { colorPickerSwatch } from "./variants";\n\ntype Props = HTMLAttributes<"button"> & VariantProps<typeof colorPickerSwatch> & {\n  value: import("@starwind-ui/astro/color-picker").ColorPickerValue;\n  disabled?: boolean;\n  initial?: import("@starwind-ui/astro/color-picker").ColorPickerRenderProjection;\n};\n\nconst { initial, value, disabled = false, class: className, size = "md", ...rest } = Astro.props;\n---\n\n<ColorPickerPrimitive.Swatch\n  initial={initial?.swatch({ value, disabled }).initial}\n  swatchValue={value}\n  swatchDisabled={disabled}\n  class={colorPickerSwatch({ size, class: className })}\n  {...rest}\n  data-slot="color-picker-swatch"\n>\n  <ColorPickerPrimitive.TransparencyGrid\n    initial={initial?.transparencyGrid.initial}\n    class="pointer-events-none absolute inset-0 size-full"\n    data-slot="color-picker-transparency-grid"\n  />\n\n  <span\n    class="pointer-events-none absolute inset-0 size-full"\n    data-slot="color-picker-swatch-color"\n  />\n\n  <slot />\n</ColorPickerPrimitive.Swatch>\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerSwatchGroup.astro",
+              content: '---\nimport ColorPickerPrimitive from "@starwind-ui/astro/color-picker";\nimport type { HTMLAttributes } from "astro/types";\nimport type { VariantProps } from "tailwind-variants";\nimport { colorPickerSwatchGroup } from "./variants";\n\ntype Props = HTMLAttributes<"div"> & VariantProps<typeof colorPickerSwatchGroup> & {\n  initial?: import("@starwind-ui/astro/color-picker").ColorPickerInitialPartProjection;\n};\n\nconst { initial, class: className, size = "md", ...rest } = Astro.props;\n---\n\n<ColorPickerPrimitive.SwatchGroup\n  initial={initial}\n  class={colorPickerSwatchGroup({ size, class: className })}\n  {...rest}\n  data-slot="color-picker-swatch-group"\n>\n  <slot />\n</ColorPickerPrimitive.SwatchGroup>\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerTrigger.astro",
+              content: '---\nimport ColorPickerPrimitive from "@starwind-ui/astro/color-picker";\nimport type { ComponentProps } from "astro/types";\nimport type { VariantProps } from "tailwind-variants";\nimport { PopoverTrigger } from "../popover";\nimport { colorPickerTrigger, colorPickerValueSwatch } from "./variants";\n\ntype Props = ComponentProps<typeof PopoverTrigger> & VariantProps<typeof colorPickerTrigger> & {\n  showValueText?: boolean;\n  initial?: import("@starwind-ui/astro/color-picker").ColorPickerRenderProjection;\n};\n\nconst { initial, class: className, size = "md", showValueText = true, ...rest } = Astro.props;\n---\n\n<PopoverTrigger\n  class={colorPickerTrigger({ size, class: className })}\n  {...rest}\n  data-slot="color-picker-trigger"\n>\n  <slot />\n\n  <ColorPickerPrimitive.ValueSwatch\n    initial={initial?.valueSwatch.initial}\n    class={colorPickerValueSwatch({ size })}\n    data-slot="color-picker-value-swatch"\n  >\n    <ColorPickerPrimitive.TransparencyGrid\n      initial={initial?.transparencyGrid.initial}\n      class="pointer-events-none absolute inset-0 size-full"\n      data-slot="color-picker-transparency-grid"\n    />\n\n    <span\n      class="pointer-events-none absolute inset-0 size-full"\n      data-slot="color-picker-value-swatch-color"\n    />\n  </ColorPickerPrimitive.ValueSwatch>\n\n  {\n    showValueText && (\n      <ColorPickerPrimitive.ValueText\n        initial={initial?.valueText.initial}\n        data-slot="color-picker-value-text"\n      />\n    )\n  }\n</PopoverTrigger>\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerValueInput.astro",
+              content: '---\nimport ColorPickerPrimitive from "@starwind-ui/astro/color-picker";\nimport type { HTMLAttributes } from "astro/types";\nimport type { VariantProps } from "tailwind-variants";\nimport { colorPickerValueInput, colorPickerValueInputLayout } from "./variants";\n\ntype Props = Omit<HTMLAttributes<"input">, "size"> & VariantProps<typeof colorPickerValueInput> & {\n  initial?: import("@starwind-ui/astro/color-picker").ColorPickerInitialPartProjection;\n};\n\nconst { initial, class: className, size = "md", ...rest } = Astro.props;\n---\n\n<ColorPickerPrimitive.ValueInput\n  initial={initial}\n  class={[colorPickerValueInput({ size }), colorPickerValueInputLayout({ size }), className].filter(Boolean).join(" ")}\n  {...rest}\n  data-slot="color-picker-value-input"\n/>\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerValueSwatch.astro",
+              content: '---\nimport type { HTMLAttributes } from "astro/types";\nimport type { VariantProps } from "tailwind-variants";\n\nimport "./styles.css";\nimport ColorPickerPrimitive from "@starwind-ui/astro/color-picker";\nimport { colorPickerValueSwatch } from "./variants";\n\ntype Props = HTMLAttributes<"span"> & VariantProps<typeof colorPickerValueSwatch> & {\n  initial?: import("@starwind-ui/astro/color-picker").ColorPickerRenderProjection;\n};\n\nconst { initial, class: className, size = "md", ...rest } = Astro.props;\n---\n\n<ColorPickerPrimitive.ValueSwatch\n  initial={initial?.valueSwatch.initial}\n  class={colorPickerValueSwatch({ size, class: className })}\n  {...rest}\n  data-slot="color-picker-value-swatch"\n>\n  <ColorPickerPrimitive.TransparencyGrid\n    initial={initial?.transparencyGrid.initial}\n    class="pointer-events-none absolute inset-0 size-full"\n    data-slot="color-picker-transparency-grid"\n  />\n\n  <span\n    class="pointer-events-none absolute inset-0 size-full"\n    data-slot="color-picker-value-swatch-color"\n  />\n</ColorPickerPrimitive.ValueSwatch>\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/index.ts",
+              content: 'import ColorPicker from "./ColorPicker.astro";\nimport ColorPickerArea from "./ColorPickerArea.astro";\nimport ColorPickerAreaThumb from "./ColorPickerAreaThumb.astro";\nimport ColorPickerChannelInput from "./ColorPickerChannelInput.astro";\nimport ColorPickerChannelSlider from "./ColorPickerChannelSlider.astro";\nimport ColorPickerClear from "./ColorPickerClear.astro";\nimport ColorPickerContent from "./ColorPickerContent.astro";\nimport ColorPickerControl from "./ColorPickerControl.astro";\nimport ColorPickerEyeDropper from "./ColorPickerEyeDropper.astro";\nimport ColorPickerFormatSelect from "./ColorPickerFormatSelect.astro";\nimport ColorPickerHiddenInput from "./ColorPickerHiddenInput.astro";\nimport ColorPickerInput from "./ColorPickerInput.astro";\nimport ColorPickerLabel from "./ColorPickerLabel.astro";\nimport ColorPickerNativeFormatSelect from "./ColorPickerNativeFormatSelect.astro";\nimport ColorPickerRoot from "./ColorPickerRoot.astro";\nimport ColorPickerSliders from "./ColorPickerSliders.astro";\nimport ColorPickerSwatch from "./ColorPickerSwatch.astro";\nimport ColorPickerSwatchGroup from "./ColorPickerSwatchGroup.astro";\nimport ColorPickerTrigger from "./ColorPickerTrigger.astro";\nimport ColorPickerValueInput from "./ColorPickerValueInput.astro";\nimport ColorPickerValueSwatch from "./ColorPickerValueSwatch.astro";\nimport {\n  colorPicker,\n  colorPickerAction,\n  colorPickerArea,\n  colorPickerAreaThumb,\n  colorPickerChannelInput,\n  colorPickerChannelInputLayout,\n  colorPickerChannelSlider,\n  colorPickerChannelSliderThumb,\n  colorPickerContent,\n  colorPickerControl,\n  colorPickerFormatSelectTrigger,\n  colorPickerHiddenInput,\n  colorPickerInput,\n  colorPickerLabel,\n  colorPickerNativeFormatSelect,\n  colorPickerNativeFormatSelectIcon,\n  colorPickerNativeFormatSelectWrapper,\n  colorPickerSeparator,\n  colorPickerSliderActionRow,\n  colorPickerSliders,\n  colorPickerSwatch,\n  colorPickerSwatchGroup,\n  colorPickerTrigger,\n  colorPickerValueFormatRow,\n  colorPickerValueInput,\n  colorPickerValueInputLayout,\n  colorPickerValueSwatch,\n} from "./variants";\n\nconst ColorPickerVariants = {\n  colorPicker,\n  colorPickerAction,\n  colorPickerArea,\n  colorPickerAreaThumb,\n  colorPickerChannelInput,\n  colorPickerChannelInputLayout,\n  colorPickerChannelSlider,\n  colorPickerChannelSliderThumb,\n  colorPickerContent,\n  colorPickerControl,\n  colorPickerFormatSelectTrigger,\n  colorPickerHiddenInput,\n  colorPickerInput,\n  colorPickerLabel,\n  colorPickerNativeFormatSelect,\n  colorPickerNativeFormatSelectIcon,\n  colorPickerNativeFormatSelectWrapper,\n  colorPickerSeparator,\n  colorPickerSliderActionRow,\n  colorPickerSliders,\n  colorPickerSwatch,\n  colorPickerSwatchGroup,\n  colorPickerTrigger,\n  colorPickerValueFormatRow,\n  colorPickerValueInput,\n  colorPickerValueInputLayout,\n  colorPickerValueSwatch,\n};\n\nexport {\n  ColorPicker,\n  ColorPickerArea,\n  ColorPickerAreaThumb,\n  ColorPickerChannelInput,\n  ColorPickerChannelSlider,\n  ColorPickerClear,\n  ColorPickerContent,\n  ColorPickerControl,\n  ColorPickerEyeDropper,\n  ColorPickerFormatSelect,\n  ColorPickerHiddenInput,\n  ColorPickerInput,\n  ColorPickerLabel,\n  ColorPickerNativeFormatSelect,\n  ColorPickerRoot,\n  ColorPickerSliders,\n  ColorPickerSwatch,\n  ColorPickerSwatchGroup,\n  ColorPickerTrigger,\n  ColorPickerValueInput,\n  ColorPickerValueSwatch,\n  ColorPickerVariants,\n};\n\nexport default {\n  Root: ColorPicker,\n  InlineRoot: ColorPickerRoot,\n  Label: ColorPickerLabel,\n  Control: ColorPickerControl,\n  Input: ColorPickerInput,\n  Trigger: ColorPickerTrigger,\n  Content: ColorPickerContent,\n  Area: ColorPickerArea,\n  AreaThumb: ColorPickerAreaThumb,\n  Sliders: ColorPickerSliders,\n  ChannelSlider: ColorPickerChannelSlider,\n  ChannelInput: ColorPickerChannelInput,\n  ValueInput: ColorPickerValueInput,\n  NativeFormatSelect: ColorPickerNativeFormatSelect,\n  FormatSelect: ColorPickerFormatSelect,\n  ValueSwatch: ColorPickerValueSwatch,\n  SwatchGroup: ColorPickerSwatchGroup,\n  Swatch: ColorPickerSwatch,\n  EyeDropper: ColorPickerEyeDropper,\n  Clear: ColorPickerClear,\n  HiddenInput: ColorPickerHiddenInput,\n};\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/styles.css",
+              content: '[data-slot="color-picker-area-background"] { background: var(--sw-color-picker-area-background-overlay, linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent)), var(--sw-color-picker-area-background, hsl(var(--sw-color-picker-hue) 100% 50%)); }\n[data-slot="color-picker-channel-slider"] { --sw-color-picker-channel-gradient-direction: to right; --sw-color-picker-channel-gradient: linear-gradient(var(--sw-color-picker-channel-gradient-direction), transparent, var(--sw-color-picker-color, #000)); }\n[data-slot="color-picker-channel-slider"][data-orientation="vertical"] { --sw-color-picker-channel-gradient-direction: to top; }\n[data-slot="color-picker-channel-slider"][data-channel="hue"] { --sw-color-picker-channel-gradient: linear-gradient(var(--sw-color-picker-channel-gradient-direction), #f00 0%, #ff0 16.67%, #0f0 33.33%, #0ff 50%, #00f 66.67%, #f0f 83.33%, #f00 100%); }\n[data-slot="color-picker-channel-slider"][data-channel="alpha"] { --sw-color-picker-channel-gradient: linear-gradient(var(--sw-color-picker-channel-gradient-direction), rgb(from var(--sw-color-picker-color, #000) r g b / 0), rgb(from var(--sw-color-picker-color, #000) r g b / 1)); }\n[data-slot="color-picker-channel-slider"][data-channel="saturation"] { --sw-color-picker-channel-gradient: linear-gradient(var(--sw-color-picker-channel-gradient-direction), hsl(var(--sw-color-picker-hue, 0) 0% 50%), hsl(var(--sw-color-picker-hue, 0) 100% 50%)); }\n[data-slot="color-picker-channel-slider"][data-channel="brightness"] { --sw-color-picker-channel-gradient: linear-gradient(var(--sw-color-picker-channel-gradient-direction), #000, hsl(var(--sw-color-picker-hue, 0) 100% 50%)); }\n[data-slot="color-picker-channel-slider"][data-channel="lightness"] { --sw-color-picker-channel-gradient: linear-gradient(var(--sw-color-picker-channel-gradient-direction), #000, hsl(var(--sw-color-picker-hue, 0) 100% 50%), #fff); }\n[data-slot="color-picker-channel-slider"][data-channel="red"] { --sw-color-picker-channel-gradient: linear-gradient(var(--sw-color-picker-channel-gradient-direction), rgb(from var(--sw-color-picker-color, #000) 0 g b), rgb(from var(--sw-color-picker-color, #000) 255 g b)); }\n[data-slot="color-picker-channel-slider"][data-channel="green"] { --sw-color-picker-channel-gradient: linear-gradient(var(--sw-color-picker-channel-gradient-direction), rgb(from var(--sw-color-picker-color, #000) r 0 b), rgb(from var(--sw-color-picker-color, #000) r 255 b)); }\n[data-slot="color-picker-channel-slider"][data-channel="blue"] { --sw-color-picker-channel-gradient: linear-gradient(var(--sw-color-picker-channel-gradient-direction), rgb(from var(--sw-color-picker-color, #000) r g 0), rgb(from var(--sw-color-picker-color, #000) r g 255)); }\n[data-slot="color-picker-channel-slider-track"] { background: var(--sw-color-picker-channel-gradient); }\n[data-slot="color-picker-transparency-grid"] { background-color: #fff; background-image: linear-gradient(45deg, #d4d4d8 25%, transparent 25%), linear-gradient(-45deg, #d4d4d8 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d4d4d8 75%), linear-gradient(-45deg, transparent 75%, #d4d4d8 75%); background-position: 0 0, 0 4px, 4px -4px, -4px 0; background-size: 8px 8px; }\n[data-slot="color-picker-value-swatch-color"], [data-slot="color-picker-swatch-color"] { background: var(--sw-color-picker-swatch-color); }\n[data-slot="color-picker-value-swatch"] { background-color: #fff; background-image: linear-gradient(var(--sw-color-picker-swatch-color, transparent), var(--sw-color-picker-swatch-color, transparent)), linear-gradient(45deg, #d4d4d8 25%, transparent 25%), linear-gradient(-45deg, #d4d4d8 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d4d4d8 75%), linear-gradient(-45deg, transparent 75%, #d4d4d8 75%); background-position: 0 0, 0 0, 0 4px, 4px -4px, -4px 0; background-size: 100% 100%, 8px 8px, 8px 8px, 8px 8px, 8px 8px; }\n[data-slot="color-picker-value-swatch"] > [data-slot="color-picker-transparency-grid"], [data-slot="color-picker-value-swatch"] > [data-slot="color-picker-value-swatch-color"] { display: none; }\n[data-slot="color-picker-footer"][data-has-swatches="false"]:not(:has([data-slot="color-picker-clear"]:not([hidden]))) > [data-slot="color-picker-separator"] { display: none; }\n[data-sw-color-picker][data-floating-root] > [data-slot="select-positioner"]:has(> [data-sw-color-picker-format-options]) { z-index: 60; }\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/variants.ts",
+              content: 'import { input as channelInputRecipe } from "../input/variants";\nimport { input as valueInputRecipe } from "../input/variants";\nimport { nativeSelectWrapper as nativeSelectWrapperRecipe } from "../native-select/variants";\nimport { nativeSelect as nativeSelectRecipe } from "../native-select/variants";\nimport { nativeSelectIcon as nativeSelectIconRecipe } from "../native-select/variants";\nimport { tv } from "tailwind-variants";\n\nexport const colorPickerChannelInput = channelInputRecipe;\n\nexport const colorPickerValueInput = valueInputRecipe;\n\nexport const colorPickerNativeFormatSelectWrapper = nativeSelectWrapperRecipe;\n\nexport const colorPickerNativeFormatSelect = nativeSelectRecipe;\n\nexport const colorPickerNativeFormatSelectIcon = nativeSelectIconRecipe;\n\nexport const colorPicker = tv({\n  base: "relative flex flex-col gap-3",\n  variants: {\n    size: {\n      sm: "text-sm",\n      md: "text-base",\n      lg: "text-lg",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerLabel = tv({\n  base: "font-medium leading-none data-disabled:cursor-not-allowed data-disabled:opacity-50",\n  variants: {\n    size: {\n      sm: "text-xs",\n      md: "text-sm",\n      lg: "text-base",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerControl = tv({\n  base: "flex items-center gap-2",\n  variants: {\n    size: {\n      sm: "gap-1.5",\n      md: "gap-2",\n      lg: "gap-2.5",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerTrigger = tv({\n  base: "border-input bg-background focus-visible:ring-outline/50 inline-flex items-center rounded-md border shadow-xs outline-none focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50",\n  variants: {\n    size: {\n      sm: "h-9 gap-2 px-2 text-sm",\n      md: "h-11 gap-2.5 px-3",\n      lg: "h-12 gap-3 px-4 text-lg",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerContent = tv({\n  base: "flex max-h-[max(10rem,var(--sw-floating-available-height))] w-72 flex-col gap-3 p-3",\n  variants: {\n    size: {\n      sm: "w-64 gap-2 p-2",\n      md: "w-72 gap-3 p-3",\n      lg: "w-80 gap-4 p-4",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerInput = tv({\n  base: "flex items-center gap-2",\n  variants: {\n    size: {\n      sm: "gap-1.5",\n      md: "gap-2",\n      lg: "gap-2.5",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerValueInputLayout = tv({\n  base: "min-w-0 flex-1 data-invalid:border-error data-invalid:focus-visible:ring-error/40",\n  variants: {\n    size: {\n      sm: "",\n      md: "",\n      lg: "",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerArea = tv({\n  base: "group/color-picker-area border-outline relative w-full touch-none rounded-md border [&>[data-slot=color-picker-area-background]]:inset-0 [&>[data-slot=color-picker-area-background]]:size-full [&>[data-slot=color-picker-area-background]]:rounded-[7px]",\n  variants: {\n    size: {\n      sm: "h-[150px]",\n      md: "h-[175px]",\n      lg: "h-[200px]",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerAreaThumb = tv({\n  base: "group-has-[[data-slot=color-picker-area-input-x]:focus-visible]/color-picker-area:ring-outline/60 pointer-events-none absolute top-[clamp(1px,var(--sw-color-picker-area-y),calc(100%_-_1px))] left-[clamp(1px,var(--sw-color-picker-area-x),calc(100%_-_1px))] z-10 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white bg-[var(--sw-color-picker-area-thumb-color)] shadow-md ring-1 ring-black/30 outline-none group-has-[[data-slot=color-picker-area-input-x]:focus-visible]/color-picker-area:ring-3 focus-visible:ring-3 data-disabled:opacity-50 data-dragging:scale-110",\n  variants: {\n    size: {\n      sm: "size-3.5",\n      md: "size-4",\n      lg: "size-5",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerSliders = tv({\n  base: "flex flex-col gap-3 px-2",\n  variants: {\n    size: {\n      sm: "gap-2",\n      md: "gap-3",\n      lg: "gap-4",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerSliderActionRow = tv({\n  base: "flex items-center gap-2",\n  variants: {\n    size: {\n      sm: "gap-1.5",\n      md: "gap-2",\n      lg: "gap-2.5",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerValueFormatRow = tv({\n  base: "flex items-center gap-2",\n  variants: {\n    size: {\n      sm: "gap-1.5",\n      md: "gap-2",\n      lg: "gap-2.5",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerSeparator = tv({\n  base: "bg-border h-px w-full",\n  variants: {\n    size: {\n      sm: "my-0.5",\n      md: "my-1",\n      lg: "my-1.5",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerChannelSlider = tv({\n  base: "group/color-picker-channel-slider bg-border relative touch-none rounded-full [&>[data-slot=color-picker-channel-slider-track]]:inset-px [&>[data-slot=color-picker-channel-slider-track]]:size-auto [&>[data-slot=color-picker-transparency-grid]]:inset-px [&>[data-slot=color-picker-transparency-grid]]:size-auto",\n  variants: {\n    size: {\n      sm: "h-2.5 data-[orientation=vertical]:h-40 data-[orientation=vertical]:w-2.5",\n      md: "h-3 data-[orientation=vertical]:h-48 data-[orientation=vertical]:w-3",\n      lg: "h-4 data-[orientation=vertical]:h-56 data-[orientation=vertical]:w-4",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerChannelSliderThumb = tv({\n  base: "group-has-[[data-slot=color-picker-channel-slider-input]:focus-visible]/color-picker-channel-slider:ring-outline/60 pointer-events-none absolute top-1/2 left-[var(--sw-color-picker-channel-position)] z-10 -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-full border-2 border-white shadow-md ring-1 ring-black/30 outline-none group-has-[[data-slot=color-picker-channel-slider-input]:focus-visible]/color-picker-channel-slider:ring-3 group-data-[orientation=vertical]/color-picker-channel-slider:top-[calc(100%-var(--sw-color-picker-channel-position))] group-data-[orientation=vertical]/color-picker-channel-slider:left-1/2 data-disabled:opacity-50 data-dragging:scale-110",\n  variants: {\n    size: {\n      sm: "size-3",\n      md: "size-4",\n      lg: "size-5",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerChannelInputLayout = tv({\n  base: "text-center data-invalid:border-error data-invalid:focus-visible:ring-error/40",\n  variants: {\n    size: {\n      sm: "h-9 w-16 text-sm",\n      md: "h-11 w-20",\n      lg: "h-12 w-24 text-lg",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerSwatch = tv({\n  base: "relative overflow-hidden rounded-md border shadow-xs outline-none focus-visible:ring-3 data-selected:ring-2 data-disabled:opacity-50",\n  variants: {\n    size: {\n      sm: "size-6",\n      md: "size-7",\n      lg: "size-8",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerSwatchGroup = tv({\n  base: "flex flex-wrap gap-2",\n  variants: {\n    size: {\n      sm: "gap-1.5",\n      md: "gap-2",\n      lg: "gap-2.5",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerValueSwatch = tv({\n  base: "border-input relative shrink-0 overflow-hidden border",\n  variants: {\n    size: {\n      sm: "size-4 rounded-[4.5px]",\n      md: "size-5 rounded-[5.5px]",\n      lg: "size-6 rounded-[6.5px]",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerFormatSelectTrigger = tv({\n  base: "uppercase",\n  variants: {\n    size: {\n      sm: "min-w-20",\n      md: "min-w-24",\n      lg: "min-w-24",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerAction = tv({\n  base: "border-input bg-background inline-flex items-center justify-center rounded-md border outline-none focus-visible:ring-3 disabled:opacity-50",\n  variants: {\n    size: {\n      sm: "h-9 px-2 text-sm",\n      md: "h-11 px-3",\n      lg: "h-12 px-4 text-lg",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerHiddenInput = tv({\n  base: "sr-only",\n  variants: {\n    size: {\n      sm: "",\n      md: "",\n      lg: "",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n'
+            }
+          ],
+          componentDependencies: ["input", "native-select", "popover", "select"],
+          packageRequirements: [
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
+            { name: "@tabler/icons", range: "^3.37.1" },
+            { name: "astro", range: ">=5" },
+            { name: "tailwind-variants", range: "^3.2.2" }
+          ]
+        },
+        react: {
+          files: [
+            {
+              path: "src/components/starwind/color-picker/ColorPicker.tsx",
+              content: 'import * as React from "react";\nimport { Popover } from "../popover";\nimport ColorPickerRoot from "./ColorPickerRoot";\n\nexport type ColorPickerProps = React.ComponentProps<typeof ColorPickerRoot> & {\n  defaultOpen?: boolean;\n  open?: boolean;\n  closeOnEscape?: boolean;\n  closeOnOutsideInteract?: boolean;\n  modal?: boolean;\n  openOnHover?: boolean;\n  closeDelay?: number;\n  onOpenChange?: React.ComponentProps<typeof Popover>["onOpenChange"];\n  onCloseComplete?: React.ComponentProps<typeof Popover>["onCloseComplete"];\n};\n\nconst ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>(\n  function ColorPicker(props, forwardedRef) {\n    const {\n      defaultOpen = false,\n      open,\n      closeOnEscape = true,\n      closeOnOutsideInteract = true,\n      modal = false,\n      openOnHover = false,\n      closeDelay = 200,\n      onOpenChange,\n      onCloseComplete,\n      value,\n      defaultValue = "#000000",\n      format,\n      alpha = true,\n      allowEmpty = false,\n      disabled = false,\n      readOnly = false,\n      name,\n      form,\n      required = false,\n      locale,\n      dir,\n      onValueChange,\n      onValueCommitted,\n      onFormatChange,\n      className,\n      size = "md",\n      children,\n      ...rest\n    } = props;\n\n    return (\n      <Popover\n        defaultOpen={defaultOpen}\n        open={open}\n        closeOnEscape={closeOnEscape}\n        closeOnOutsideInteract={closeOnOutsideInteract}\n        modal={modal}\n        openOnHover={openOnHover}\n        closeDelay={closeDelay}\n        onOpenChange={onOpenChange}\n        onCloseComplete={onCloseComplete}\n      >\n        <ColorPickerRoot\n          value={value}\n          defaultValue={defaultValue}\n          format={format}\n          alpha={alpha}\n          allowEmpty={allowEmpty}\n          disabled={disabled}\n          readOnly={readOnly}\n          name={name}\n          form={form}\n          required={required}\n          locale={locale}\n          dir={dir}\n          {...rest}\n          data-floating-root={true}\n          onValueChange={onValueChange}\n          onValueCommitted={onValueCommitted}\n          onFormatChange={onFormatChange}\n          ref={forwardedRef}\n          className={className}\n          size={size}\n        >\n          {children}\n        </ColorPickerRoot>\n      </Popover>\n    );\n  },\n);\n\nColorPicker.displayName = "ColorPicker";\n\nexport default ColorPicker;\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerArea.tsx",
+              content: 'import type * as React from "react";\nimport type { VariantProps } from "tailwind-variants";\nimport "./styles.css";\nimport ColorPickerPrimitive from "@starwind-ui/react/color-picker";\nimport ColorPickerAreaThumb from "./ColorPickerAreaThumb";\nimport { colorPickerArea } from "./variants";\n\nexport type ColorPickerAreaProps =\n  React.ComponentPropsWithoutRef<"div"> &\n  VariantProps<typeof colorPickerArea>;\n\nfunction ColorPickerArea(props: ColorPickerAreaProps) {\n  const { className, size = "md", ...rest } = props;\n\n  return (\n    <ColorPickerPrimitive.Area\n      className={colorPickerArea({ size, class: className })}\n      {...rest}\n      data-slot="color-picker-area"\n    >\n      <ColorPickerPrimitive.AreaBackground\n        className="pointer-events-none absolute inset-0 size-full"\n        data-slot="color-picker-area-background"\n      />\n\n      <ColorPickerAreaThumb\n        size={size}\n      />\n\n      <ColorPickerPrimitive.AreaInput\n        axis="x"\n        className="absolute inset-0 size-full cursor-crosshair opacity-0"\n        data-slot="color-picker-area-input-x"\n      />\n\n      <ColorPickerPrimitive.AreaInput\n        axis="y"\n        className="absolute inset-0 size-full cursor-crosshair opacity-0"\n        data-slot="color-picker-area-input-y"\n      />\n    </ColorPickerPrimitive.Area>\n  );\n}\n\nexport default ColorPickerArea;\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerAreaThumb.tsx",
+              content: 'import ColorPickerPrimitive from "@starwind-ui/react/color-picker";\nimport type * as React from "react";\nimport type { VariantProps } from "tailwind-variants";\nimport { colorPickerAreaThumb } from "./variants";\n\nexport type ColorPickerAreaThumbProps =\n  React.ComponentPropsWithoutRef<"span"> &\n  VariantProps<typeof colorPickerAreaThumb>;\n\nfunction ColorPickerAreaThumb(props: ColorPickerAreaThumbProps) {\n  const { className, size = "md", children, ...rest } = props;\n\n  return (\n    <ColorPickerPrimitive.AreaThumb\n      className={colorPickerAreaThumb({ size, class: className })}\n      {...rest}\n      data-slot="color-picker-area-thumb"\n    >\n      {children}\n    </ColorPickerPrimitive.AreaThumb>\n  );\n}\n\nexport default ColorPickerAreaThumb;\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerChannelInput.tsx",
+              content: 'import ColorPickerPrimitive from "@starwind-ui/react/color-picker";\nimport type * as React from "react";\nimport type { VariantProps } from "tailwind-variants";\nimport { colorPickerChannelInput, colorPickerChannelInputLayout } from "./variants";\n\nexport type ColorPickerChannelInputProps = React.ComponentPropsWithoutRef<"input"> &\n  VariantProps<typeof colorPickerChannelInput> & {\n    channel: import("@starwind-ui/react/color-picker").ColorPickerChannel;\n  };\n\nfunction ColorPickerChannelInput(props: ColorPickerChannelInputProps) {\n  const { channel, className, size = "md", ...rest } = props;\n\n  return (\n    <ColorPickerPrimitive.ChannelInput\n      className={[colorPickerChannelInput({ size }), colorPickerChannelInputLayout({ size }), className].filter(Boolean).join(" ")}\n      channel={channel}\n      {...rest}\n      data-slot="color-picker-channel-input"\n    />\n  );\n}\n\nexport default ColorPickerChannelInput;\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerChannelSlider.tsx",
+              content: 'import type * as React from "react";\nimport type { VariantProps } from "tailwind-variants";\nimport "./styles.css";\nimport ColorPickerPrimitive from "@starwind-ui/react/color-picker";\nimport { colorPickerChannelSlider, colorPickerChannelSliderThumb } from "./variants";\n\nexport type ColorPickerChannelSliderProps = React.ComponentPropsWithoutRef<"div"> &\n  VariantProps<typeof colorPickerChannelSlider> & {\n    channel: import("@starwind-ui/react/color-picker").ColorPickerChannel;\n    orientation?: "horizontal" | "vertical";\n  };\n\nfunction ColorPickerChannelSlider(props: ColorPickerChannelSliderProps) {\n  const { channel, orientation = "horizontal", className, size = "md", ...rest } = props;\n\n  return (\n    <ColorPickerPrimitive.ChannelSlider\n      channel={channel}\n      orientation={orientation}\n      className={colorPickerChannelSlider({ size, class: className })}\n      {...rest}\n      data-slot="color-picker-channel-slider"\n    >\n      <ColorPickerPrimitive.TransparencyGrid\n        className="pointer-events-none absolute inset-0 size-full rounded-[inherit]"\n        data-slot="color-picker-transparency-grid"\n      />\n\n      <ColorPickerPrimitive.ChannelSliderTrack\n        className="pointer-events-none absolute inset-0 size-full rounded-[inherit]"\n        data-slot="color-picker-channel-slider-track"\n      />\n\n      <ColorPickerPrimitive.ChannelSliderThumb\n        className={colorPickerChannelSliderThumb({ size })}\n        data-slot="color-picker-channel-slider-thumb"\n      >\n        <span\n          className="pointer-events-none absolute inset-0 size-full"\n          data-slot="color-picker-transparency-grid"\n        />\n\n        <span\n          className="pointer-events-none absolute inset-0 size-full bg-[var(--sw-color-picker-channel-thumb-color)]"\n          data-slot="color-picker-channel-thumb-color-layer"\n        />\n      </ColorPickerPrimitive.ChannelSliderThumb>\n\n      <ColorPickerPrimitive.ChannelSliderInput\n        className="absolute inset-0 size-full cursor-pointer opacity-0"\n        data-slot="color-picker-channel-slider-input"\n      />\n    </ColorPickerPrimitive.ChannelSlider>\n  );\n}\n\nexport default ColorPickerChannelSlider;\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerClear.tsx",
+              content: 'import ColorPickerPrimitive from "@starwind-ui/react/color-picker";\nimport type * as React from "react";\nimport type { VariantProps } from "tailwind-variants";\nimport { colorPickerAction } from "./variants";\n\nexport type ColorPickerClearProps =\n  React.ComponentPropsWithoutRef<"button"> &\n  VariantProps<typeof colorPickerAction>;\n\nfunction ColorPickerClear(props: ColorPickerClearProps) {\n  const { className, size = "md", children, ...rest } = props;\n\n  return (\n    <ColorPickerPrimitive.Clear\n      className={colorPickerAction({ size, class: className })}\n      {...rest}\n      data-slot="color-picker-clear"\n    >\n      {children}\n    </ColorPickerPrimitive.Clear>\n  );\n}\n\nexport default ColorPickerClear;\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerContent.tsx",
+              content: 'import type * as React from "react";\nimport type { VariantProps } from "tailwind-variants";\nimport "./styles.css";\nimport { IconColorPicker as ColorPicker } from "@tabler/icons-react";\nimport { PopoverContent } from "../popover";\nimport ColorPickerArea from "./ColorPickerArea";\nimport ColorPickerClear from "./ColorPickerClear";\nimport ColorPickerEyeDropper from "./ColorPickerEyeDropper";\nimport ColorPickerInput from "./ColorPickerInput";\nimport ColorPickerSliders from "./ColorPickerSliders";\nimport { colorPickerContent, colorPickerSeparator, colorPickerSliderActionRow, colorPickerValueFormatRow } from "./variants";\n\nexport type ColorPickerContentProps = React.ComponentProps<typeof PopoverContent> &\n  VariantProps<typeof colorPickerContent> & {\n    alpha?: boolean;\n    showEyeDropper?: boolean;\n    showClear?: boolean;\n    swatches?: React.ReactNode;\n  };\n\nfunction ColorPickerContent(props: ColorPickerContentProps) {\n  const {\n    className,\n    size = "md",\n    alpha = true,\n    showEyeDropper = true,\n    showClear = false,\n    side = "bottom",\n    align = "start",\n    exitMotion = "fade",\n    children,\n    swatches,\n    ...rest\n  } = props;\n\n  const inputSize = size === "lg" ? "md" : "sm";\n  const hasSwatches = swatches != null;\n  const hasSwatchesAttribute = hasSwatches ? "true" : "false";\n\n  return (\n    <PopoverContent\n      className={colorPickerContent({ size, class: className })}\n      side={side}\n      align={align}\n      exitMotion={exitMotion}\n      {...rest}\n      data-slot="color-picker-content"\n    >\n      {children ?? (\n        <>\n          <ColorPickerArea\n            size={size}\n          />\n\n          <div\n            className={colorPickerSliderActionRow({ size })}\n            data-slot="color-picker-slider-action-row"\n          >\n            <ColorPickerSliders\n              alpha={alpha}\n              size={size}\n              className="min-w-0 flex-1"\n            />\n\n            {showEyeDropper && (\n              <ColorPickerEyeDropper\n                size={size}\n                aria-label="Pick a color from the screen"\n              >\n                <ColorPicker\n                  className="size-4"\n                  aria-hidden="true"\n                />\n              </ColorPickerEyeDropper>\n            )}\n          </div>\n\n          <div\n            className={colorPickerValueFormatRow({ size })}\n            data-slot="color-picker-value-format-row"\n          >\n            <ColorPickerInput\n              size={inputSize}\n              className="min-w-0 flex-1"\n            />\n          </div>\n\n          <div\n            className="contents"\n            data-has-swatches={hasSwatchesAttribute}\n            data-slot="color-picker-footer"\n          >\n            {(hasSwatches || showClear) && (\n              <div\n                className={colorPickerSeparator({ size })}\n                role="separator"\n                aria-hidden="true"\n                data-slot="color-picker-separator"\n              />\n            )}\n\n            {swatches}\n\n            {showClear && (\n              <ColorPickerClear\n                size={inputSize}\n                aria-label="Clear color"\n              >\n                Clear\n              </ColorPickerClear>\n            )}\n          </div>\n        </>\n      )}\n    </PopoverContent>\n  );\n}\n\nexport default ColorPickerContent;\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerControl.tsx",
+              content: 'import ColorPickerPrimitive from "@starwind-ui/react/color-picker";\nimport type * as React from "react";\nimport type { VariantProps } from "tailwind-variants";\nimport { colorPickerControl } from "./variants";\n\nexport type ColorPickerControlProps =\n  React.ComponentPropsWithoutRef<"div"> &\n  VariantProps<typeof colorPickerControl>;\n\nfunction ColorPickerControl(props: ColorPickerControlProps) {\n  const { className, size = "md", children, ...rest } = props;\n\n  return (\n    <ColorPickerPrimitive.Control\n      className={colorPickerControl({ size, class: className })}\n      {...rest}\n      data-slot="color-picker-control"\n    >\n      {children}\n    </ColorPickerPrimitive.Control>\n  );\n}\n\nexport default ColorPickerControl;\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerEyeDropper.tsx",
+              content: 'import ColorPickerPrimitive from "@starwind-ui/react/color-picker";\nimport type * as React from "react";\nimport type { VariantProps } from "tailwind-variants";\nimport { colorPickerAction } from "./variants";\n\nexport type ColorPickerEyeDropperProps =\n  React.ComponentPropsWithoutRef<"button"> &\n  VariantProps<typeof colorPickerAction>;\n\nfunction ColorPickerEyeDropper(props: ColorPickerEyeDropperProps) {\n  const { className, size = "md", children, ...rest } = props;\n\n  return (\n    <ColorPickerPrimitive.EyeDropperTrigger\n      className={colorPickerAction({ size, class: className })}\n      {...rest}\n      data-slot="color-picker-eye-dropper"\n    >\n      {children}\n    </ColorPickerPrimitive.EyeDropperTrigger>\n  );\n}\n\nexport default ColorPickerEyeDropper;\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerFormatSelect.tsx",
+              content: 'import type * as React from "react";\nimport "./styles.css";\nimport ColorPickerPrimitive from "@starwind-ui/react/color-picker";\nimport { Select, SelectContent, SelectItem, SelectTrigger } from "../select";\nimport { colorPickerFormatSelectTrigger } from "./variants";\n\nexport type ColorPickerFormatSelectProps = React.ComponentPropsWithoutRef<"div"> & {\n  size?: "sm" | "md" | "lg";\n};\n\nfunction ColorPickerFormatSelect(props: ColorPickerFormatSelectProps) {\n  const { className, size = "md", ...rest } = props;\n\n  return (\n    <ColorPickerPrimitive.FormatControl\n      className={["shrink-0", className].filter(Boolean).join(" ")}\n      {...rest}\n      data-slot="color-picker-format-control"\n    >\n      <Select>\n        <SelectTrigger\n          size={size}\n          aria-label="Color format"\n          className={colorPickerFormatSelectTrigger({ size })}\n        />\n\n        <SelectContent\n          size={size}\n          data-sw-color-picker-format-options=""\n        >\n          <SelectItem value="hex">HEX</SelectItem>\n\n          <SelectItem value="rgb">RGB</SelectItem>\n\n          <SelectItem value="hsl">HSL</SelectItem>\n\n          <SelectItem value="hsb">HSB</SelectItem>\n        </SelectContent>\n      </Select>\n    </ColorPickerPrimitive.FormatControl>\n  );\n}\n\nexport default ColorPickerFormatSelect;\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerHiddenInput.tsx",
+              content: 'import ColorPickerPrimitive from "@starwind-ui/react/color-picker";\nimport type * as React from "react";\nimport type { VariantProps } from "tailwind-variants";\nimport { colorPickerHiddenInput } from "./variants";\n\nexport type ColorPickerHiddenInputProps =\n  React.ComponentPropsWithoutRef<"input"> &\n  VariantProps<typeof colorPickerHiddenInput>;\n\nfunction ColorPickerHiddenInput(props: ColorPickerHiddenInputProps) {\n  const { className, size = "md", ...rest } = props;\n\n  return (\n    <ColorPickerPrimitive.HiddenInput\n      className={colorPickerHiddenInput({ size, class: className })}\n      {...rest}\n      data-slot="color-picker-hidden-input"\n    />\n  );\n}\n\nexport default ColorPickerHiddenInput;\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerInput.tsx",
+              content: 'import type * as React from "react";\nimport type { VariantProps } from "tailwind-variants";\nimport ColorPickerFormatSelect from "./ColorPickerFormatSelect";\nimport ColorPickerNativeFormatSelect from "./ColorPickerNativeFormatSelect";\nimport ColorPickerValueInput from "./ColorPickerValueInput";\nimport { colorPickerInput } from "./variants";\n\nexport type ColorPickerInputProps = React.ComponentPropsWithoutRef<"div"> &\n  VariantProps<typeof colorPickerInput> & {\n    formatControl?: "select" | "native";\n  };\n\nfunction ColorPickerInput(props: ColorPickerInputProps) {\n  const { formatControl = "select", className, size = "md", ...rest } = props;\n\n  return (\n    <div\n      className={colorPickerInput({ size, class: className })}\n      {...rest}\n      data-slot="color-picker-input"\n    >\n      <ColorPickerValueInput\n        size={size}\n      />\n\n      {formatControl === "native" ? (\n        <ColorPickerNativeFormatSelect\n          size={size}\n        />\n      ) : (\n        <ColorPickerFormatSelect\n          size={size}\n        />\n      )}\n    </div>\n  );\n}\n\nexport default ColorPickerInput;\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerLabel.tsx",
+              content: 'import ColorPickerPrimitive from "@starwind-ui/react/color-picker";\nimport type * as React from "react";\nimport type { VariantProps } from "tailwind-variants";\nimport { colorPickerLabel } from "./variants";\n\nexport type ColorPickerLabelProps =\n  React.ComponentPropsWithoutRef<"label"> &\n  VariantProps<typeof colorPickerLabel>;\n\nfunction ColorPickerLabel(props: ColorPickerLabelProps) {\n  const { className, size = "md", children, ...rest } = props;\n\n  return (\n    <ColorPickerPrimitive.Label\n      className={colorPickerLabel({ size, class: className })}\n      {...rest}\n      data-slot="color-picker-label"\n    >\n      {children}\n    </ColorPickerPrimitive.Label>\n  );\n}\n\nexport default ColorPickerLabel;\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerNativeFormatSelect.tsx",
+              content: 'import ColorPickerPrimitive from "@starwind-ui/react/color-picker";\nimport { IconChevronDown as ChevronDown } from "@tabler/icons-react";\nimport type * as React from "react";\nimport type { VariantProps } from "tailwind-variants";\nimport { NativeSelectOption } from "../native-select";\nimport { colorPickerNativeFormatSelect, colorPickerNativeFormatSelectIcon, colorPickerNativeFormatSelectWrapper } from "./variants";\n\nexport type ColorPickerNativeFormatSelectProps =\n  Omit<React.ComponentPropsWithoutRef<"select">, "size"> &\n  VariantProps<typeof colorPickerNativeFormatSelect>;\n\nfunction ColorPickerNativeFormatSelect(props: ColorPickerNativeFormatSelectProps) {\n  const { className, size = "md", ...rest } = props;\n\n  return (\n    <div\n      className={colorPickerNativeFormatSelectWrapper()}\n      data-slot="color-picker-native-format-select-wrapper"\n    >\n      <ColorPickerPrimitive.FormatSelect\n        className={colorPickerNativeFormatSelect({ size, class: className })}\n        aria-label="Color format"\n        {...rest}\n        data-slot="color-picker-native-format-select"\n      >\n        <NativeSelectOption value="hex">HEX</NativeSelectOption>\n\n        <NativeSelectOption value="rgb">RGB</NativeSelectOption>\n\n        <NativeSelectOption value="hsl">HSL</NativeSelectOption>\n\n        <NativeSelectOption value="hsb">HSB</NativeSelectOption>\n      </ColorPickerPrimitive.FormatSelect>\n\n      <ChevronDown\n        className={colorPickerNativeFormatSelectIcon({ size })}\n        aria-hidden="true"\n        data-slot="color-picker-native-format-select-icon"\n      />\n    </div>\n  );\n}\n\nexport default ColorPickerNativeFormatSelect;\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerRoot.tsx",
+              content: 'import ColorPickerPrimitive from "@starwind-ui/react/color-picker";\nimport * as React from "react";\nimport type { VariantProps } from "tailwind-variants";\nimport { colorPicker } from "./variants";\n\nexport type ColorPickerRootProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" | "defaultValue" | "onChange" | "dir"> &\n  VariantProps<typeof colorPicker> & {\n    value?: import("@starwind-ui/react/color-picker").ColorPickerValue;\n    defaultValue?: import("@starwind-ui/react/color-picker").ColorPickerValue;\n    format?: import("@starwind-ui/react/color-picker").ColorPickerFormat;\n    alpha?: boolean;\n    allowEmpty?: boolean;\n    disabled?: boolean;\n    readOnly?: boolean;\n    name?: string;\n    form?: string;\n    required?: boolean;\n    locale?: string;\n    dir?: import("@starwind-ui/react/color-picker").ColorPickerDirection;\n    onValueChange?: (value: import("@starwind-ui/react/color-picker").ColorPickerColor | null, details: import("@starwind-ui/react/color-picker").ColorPickerValueChangeDetails) => void;\n    onValueCommitted?: (value: import("@starwind-ui/react/color-picker").ColorPickerColor | null, details: import("@starwind-ui/react/color-picker").ColorPickerValueCommitDetails) => void;\n    onFormatChange?: (format: import("@starwind-ui/react/color-picker").ColorPickerFormat, details: import("@starwind-ui/react/color-picker").ColorPickerFormatChangeDetails) => void;\n    ref?: React.Ref<HTMLDivElement>;\n  };\n\nconst ColorPickerRoot = React.forwardRef<HTMLDivElement, ColorPickerRootProps>(\n  function ColorPickerRoot(props, forwardedRef) {\n    const {\n      value,\n      defaultValue = "#000000",\n      format,\n      alpha = true,\n      allowEmpty = false,\n      disabled = false,\n      readOnly = false,\n      name,\n      form,\n      required = false,\n      locale,\n      dir,\n      onValueChange,\n      onValueCommitted,\n      onFormatChange,\n      className,\n      size = "md",\n      children,\n      ...rest\n    } = props;\n\n    return (\n      <ColorPickerPrimitive.Root\n        className={colorPicker({ size, class: className })}\n        value={value}\n        defaultValue={defaultValue}\n        format={format}\n        alpha={alpha}\n        allowEmpty={allowEmpty}\n        disabled={disabled}\n        readOnly={readOnly}\n        name={name}\n        form={form}\n        required={required}\n        locale={locale}\n        dir={dir}\n        onValueChange={onValueChange}\n        onValueCommitted={onValueCommitted}\n        onFormatChange={onFormatChange}\n        {...rest}\n        ref={forwardedRef}\n        data-slot="color-picker"\n      >\n        {children}\n      </ColorPickerPrimitive.Root>\n    );\n  },\n);\n\nColorPickerRoot.displayName = "ColorPickerRoot";\n\nexport default ColorPickerRoot;\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerSliders.tsx",
+              content: 'import type * as React from "react";\nimport type { VariantProps } from "tailwind-variants";\nimport ColorPickerChannelSlider from "./ColorPickerChannelSlider";\nimport { colorPickerSliders } from "./variants";\n\nexport type ColorPickerSlidersProps = React.ComponentPropsWithoutRef<"div"> &\n  VariantProps<typeof colorPickerSliders> & {\n    alpha?: boolean;\n  };\n\nfunction ColorPickerSliders(props: ColorPickerSlidersProps) {\n  const { alpha = true, className, size = "md", ...rest } = props;\n\n  return (\n    <div\n      className={colorPickerSliders({ size, class: className })}\n      {...rest}\n      data-slot="color-picker-sliders"\n    >\n      <ColorPickerChannelSlider\n        channel="hue"\n        size={size}\n      />\n\n      {alpha && (\n        <ColorPickerChannelSlider\n          channel="alpha"\n          size={size}\n        />\n      )}\n    </div>\n  );\n}\n\nexport default ColorPickerSliders;\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerSwatch.tsx",
+              content: 'import type * as React from "react";\nimport type { VariantProps } from "tailwind-variants";\nimport "./styles.css";\nimport ColorPickerPrimitive from "@starwind-ui/react/color-picker";\nimport { colorPickerSwatch } from "./variants";\n\nexport type ColorPickerSwatchProps = React.ComponentPropsWithoutRef<"button"> &\n  VariantProps<typeof colorPickerSwatch> & {\n    value: import("@starwind-ui/react/color-picker").ColorPickerValue;\n    disabled?: boolean;\n  };\n\nfunction ColorPickerSwatch(props: ColorPickerSwatchProps) {\n  const { value, disabled = false, className, size = "md", children, ...rest } = props;\n\n  return (\n    <ColorPickerPrimitive.Swatch\n      swatchValue={value}\n      swatchDisabled={disabled}\n      className={colorPickerSwatch({ size, class: className })}\n      {...rest}\n      data-slot="color-picker-swatch"\n    >\n      <ColorPickerPrimitive.TransparencyGrid\n        className="pointer-events-none absolute inset-0 size-full"\n        data-slot="color-picker-transparency-grid"\n      />\n\n      <span\n        className="pointer-events-none absolute inset-0 size-full"\n        data-slot="color-picker-swatch-color"\n      />\n\n      {children}\n    </ColorPickerPrimitive.Swatch>\n  );\n}\n\nexport default ColorPickerSwatch;\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerSwatchGroup.tsx",
+              content: 'import ColorPickerPrimitive from "@starwind-ui/react/color-picker";\nimport type * as React from "react";\nimport type { VariantProps } from "tailwind-variants";\nimport { colorPickerSwatchGroup } from "./variants";\n\nexport type ColorPickerSwatchGroupProps =\n  React.ComponentPropsWithoutRef<"div"> &\n  VariantProps<typeof colorPickerSwatchGroup>;\n\nfunction ColorPickerSwatchGroup(props: ColorPickerSwatchGroupProps) {\n  const { className, size = "md", children, ...rest } = props;\n\n  return (\n    <ColorPickerPrimitive.SwatchGroup\n      className={colorPickerSwatchGroup({ size, class: className })}\n      {...rest}\n      data-slot="color-picker-swatch-group"\n    >\n      {children}\n    </ColorPickerPrimitive.SwatchGroup>\n  );\n}\n\nexport default ColorPickerSwatchGroup;\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerTrigger.tsx",
+              content: 'import ColorPickerPrimitive from "@starwind-ui/react/color-picker";\nimport type * as React from "react";\nimport type { VariantProps } from "tailwind-variants";\nimport { PopoverTrigger } from "../popover";\nimport { colorPickerTrigger, colorPickerValueSwatch } from "./variants";\n\nexport type ColorPickerTriggerProps = React.ComponentProps<typeof PopoverTrigger> &\n  VariantProps<typeof colorPickerTrigger> & {\n    showValueText?: boolean;\n  };\n\nfunction ColorPickerTrigger(props: ColorPickerTriggerProps) {\n  const { className, size = "md", showValueText = true, children, ...rest } = props;\n\n  return (\n    <PopoverTrigger\n      className={colorPickerTrigger({ size, class: className })}\n      {...rest}\n      data-slot="color-picker-trigger"\n    >\n      {children}\n\n      <ColorPickerPrimitive.ValueSwatch\n        className={colorPickerValueSwatch({ size })}\n        data-slot="color-picker-value-swatch"\n      >\n        <ColorPickerPrimitive.TransparencyGrid\n          className="pointer-events-none absolute inset-0 size-full"\n          data-slot="color-picker-transparency-grid"\n        />\n\n        <span\n          className="pointer-events-none absolute inset-0 size-full"\n          data-slot="color-picker-value-swatch-color"\n        />\n      </ColorPickerPrimitive.ValueSwatch>\n\n      {showValueText && (\n        <ColorPickerPrimitive.ValueText\n          data-slot="color-picker-value-text"\n        />\n      )}\n    </PopoverTrigger>\n  );\n}\n\nexport default ColorPickerTrigger;\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerValueInput.tsx",
+              content: 'import ColorPickerPrimitive from "@starwind-ui/react/color-picker";\nimport type * as React from "react";\nimport type { VariantProps } from "tailwind-variants";\nimport { colorPickerValueInput, colorPickerValueInputLayout } from "./variants";\n\nexport type ColorPickerValueInputProps =\n  Omit<React.ComponentPropsWithoutRef<"input">, "size"> &\n  VariantProps<typeof colorPickerValueInput>;\n\nfunction ColorPickerValueInput(props: ColorPickerValueInputProps) {\n  const { className, size = "md", ...rest } = props;\n\n  return (\n    <ColorPickerPrimitive.ValueInput\n      className={[colorPickerValueInput({ size }), colorPickerValueInputLayout({ size }), className].filter(Boolean).join(" ")}\n      {...rest}\n      data-slot="color-picker-value-input"\n    />\n  );\n}\n\nexport default ColorPickerValueInput;\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/ColorPickerValueSwatch.tsx",
+              content: 'import type * as React from "react";\nimport type { VariantProps } from "tailwind-variants";\nimport "./styles.css";\nimport ColorPickerPrimitive from "@starwind-ui/react/color-picker";\nimport { colorPickerValueSwatch } from "./variants";\n\nexport type ColorPickerValueSwatchProps =\n  React.ComponentPropsWithoutRef<"span"> &\n  VariantProps<typeof colorPickerValueSwatch>;\n\nfunction ColorPickerValueSwatch(props: ColorPickerValueSwatchProps) {\n  const { className, size = "md", ...rest } = props;\n\n  return (\n    <ColorPickerPrimitive.ValueSwatch\n      className={colorPickerValueSwatch({ size, class: className })}\n      {...rest}\n      data-slot="color-picker-value-swatch"\n    >\n      <ColorPickerPrimitive.TransparencyGrid\n        className="pointer-events-none absolute inset-0 size-full"\n        data-slot="color-picker-transparency-grid"\n      />\n\n      <span\n        className="pointer-events-none absolute inset-0 size-full"\n        data-slot="color-picker-value-swatch-color"\n      />\n    </ColorPickerPrimitive.ValueSwatch>\n  );\n}\n\nexport default ColorPickerValueSwatch;\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/index.ts",
+              content: 'import ColorPicker from "./ColorPicker";\nimport ColorPickerArea from "./ColorPickerArea";\nimport ColorPickerAreaThumb from "./ColorPickerAreaThumb";\nimport ColorPickerChannelInput from "./ColorPickerChannelInput";\nimport ColorPickerChannelSlider from "./ColorPickerChannelSlider";\nimport ColorPickerClear from "./ColorPickerClear";\nimport ColorPickerContent from "./ColorPickerContent";\nimport ColorPickerControl from "./ColorPickerControl";\nimport ColorPickerEyeDropper from "./ColorPickerEyeDropper";\nimport ColorPickerFormatSelect from "./ColorPickerFormatSelect";\nimport ColorPickerHiddenInput from "./ColorPickerHiddenInput";\nimport ColorPickerInput from "./ColorPickerInput";\nimport ColorPickerLabel from "./ColorPickerLabel";\nimport ColorPickerNativeFormatSelect from "./ColorPickerNativeFormatSelect";\nimport ColorPickerRoot from "./ColorPickerRoot";\nimport ColorPickerSliders from "./ColorPickerSliders";\nimport ColorPickerSwatch from "./ColorPickerSwatch";\nimport ColorPickerSwatchGroup from "./ColorPickerSwatchGroup";\nimport ColorPickerTrigger from "./ColorPickerTrigger";\nimport ColorPickerValueInput from "./ColorPickerValueInput";\nimport ColorPickerValueSwatch from "./ColorPickerValueSwatch";\nimport {\n  colorPicker,\n  colorPickerAction,\n  colorPickerArea,\n  colorPickerAreaThumb,\n  colorPickerChannelInput,\n  colorPickerChannelInputLayout,\n  colorPickerChannelSlider,\n  colorPickerChannelSliderThumb,\n  colorPickerContent,\n  colorPickerControl,\n  colorPickerFormatSelectTrigger,\n  colorPickerHiddenInput,\n  colorPickerInput,\n  colorPickerLabel,\n  colorPickerNativeFormatSelect,\n  colorPickerNativeFormatSelectIcon,\n  colorPickerNativeFormatSelectWrapper,\n  colorPickerSeparator,\n  colorPickerSliderActionRow,\n  colorPickerSliders,\n  colorPickerSwatch,\n  colorPickerSwatchGroup,\n  colorPickerTrigger,\n  colorPickerValueFormatRow,\n  colorPickerValueInput,\n  colorPickerValueInputLayout,\n  colorPickerValueSwatch,\n} from "./variants";\n\nconst ColorPickerVariants = {\n  colorPicker,\n  colorPickerAction,\n  colorPickerArea,\n  colorPickerAreaThumb,\n  colorPickerChannelInput,\n  colorPickerChannelInputLayout,\n  colorPickerChannelSlider,\n  colorPickerChannelSliderThumb,\n  colorPickerContent,\n  colorPickerControl,\n  colorPickerFormatSelectTrigger,\n  colorPickerHiddenInput,\n  colorPickerInput,\n  colorPickerLabel,\n  colorPickerNativeFormatSelect,\n  colorPickerNativeFormatSelectIcon,\n  colorPickerNativeFormatSelectWrapper,\n  colorPickerSeparator,\n  colorPickerSliderActionRow,\n  colorPickerSliders,\n  colorPickerSwatch,\n  colorPickerSwatchGroup,\n  colorPickerTrigger,\n  colorPickerValueFormatRow,\n  colorPickerValueInput,\n  colorPickerValueInputLayout,\n  colorPickerValueSwatch,\n};\n\nexport {\n  ColorPicker,\n  ColorPickerArea,\n  ColorPickerAreaThumb,\n  ColorPickerChannelInput,\n  ColorPickerChannelSlider,\n  ColorPickerClear,\n  ColorPickerContent,\n  ColorPickerControl,\n  ColorPickerEyeDropper,\n  ColorPickerFormatSelect,\n  ColorPickerHiddenInput,\n  ColorPickerInput,\n  ColorPickerLabel,\n  ColorPickerNativeFormatSelect,\n  ColorPickerRoot,\n  ColorPickerSliders,\n  ColorPickerSwatch,\n  ColorPickerSwatchGroup,\n  ColorPickerTrigger,\n  ColorPickerValueInput,\n  ColorPickerValueSwatch,\n  ColorPickerVariants,\n};\n\nexport default {\n  Root: ColorPicker,\n  InlineRoot: ColorPickerRoot,\n  Label: ColorPickerLabel,\n  Control: ColorPickerControl,\n  Input: ColorPickerInput,\n  Trigger: ColorPickerTrigger,\n  Content: ColorPickerContent,\n  Area: ColorPickerArea,\n  AreaThumb: ColorPickerAreaThumb,\n  Sliders: ColorPickerSliders,\n  ChannelSlider: ColorPickerChannelSlider,\n  ChannelInput: ColorPickerChannelInput,\n  ValueInput: ColorPickerValueInput,\n  NativeFormatSelect: ColorPickerNativeFormatSelect,\n  FormatSelect: ColorPickerFormatSelect,\n  ValueSwatch: ColorPickerValueSwatch,\n  SwatchGroup: ColorPickerSwatchGroup,\n  Swatch: ColorPickerSwatch,\n  EyeDropper: ColorPickerEyeDropper,\n  Clear: ColorPickerClear,\n  HiddenInput: ColorPickerHiddenInput,\n};\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/styles.css",
+              content: '[data-slot="color-picker-area-background"] { background: var(--sw-color-picker-area-background-overlay, linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent)), var(--sw-color-picker-area-background, hsl(var(--sw-color-picker-hue) 100% 50%)); }\n[data-slot="color-picker-channel-slider"] { --sw-color-picker-channel-gradient-direction: to right; --sw-color-picker-channel-gradient: linear-gradient(var(--sw-color-picker-channel-gradient-direction), transparent, var(--sw-color-picker-color, #000)); }\n[data-slot="color-picker-channel-slider"][data-orientation="vertical"] { --sw-color-picker-channel-gradient-direction: to top; }\n[data-slot="color-picker-channel-slider"][data-channel="hue"] { --sw-color-picker-channel-gradient: linear-gradient(var(--sw-color-picker-channel-gradient-direction), #f00 0%, #ff0 16.67%, #0f0 33.33%, #0ff 50%, #00f 66.67%, #f0f 83.33%, #f00 100%); }\n[data-slot="color-picker-channel-slider"][data-channel="alpha"] { --sw-color-picker-channel-gradient: linear-gradient(var(--sw-color-picker-channel-gradient-direction), rgb(from var(--sw-color-picker-color, #000) r g b / 0), rgb(from var(--sw-color-picker-color, #000) r g b / 1)); }\n[data-slot="color-picker-channel-slider"][data-channel="saturation"] { --sw-color-picker-channel-gradient: linear-gradient(var(--sw-color-picker-channel-gradient-direction), hsl(var(--sw-color-picker-hue, 0) 0% 50%), hsl(var(--sw-color-picker-hue, 0) 100% 50%)); }\n[data-slot="color-picker-channel-slider"][data-channel="brightness"] { --sw-color-picker-channel-gradient: linear-gradient(var(--sw-color-picker-channel-gradient-direction), #000, hsl(var(--sw-color-picker-hue, 0) 100% 50%)); }\n[data-slot="color-picker-channel-slider"][data-channel="lightness"] { --sw-color-picker-channel-gradient: linear-gradient(var(--sw-color-picker-channel-gradient-direction), #000, hsl(var(--sw-color-picker-hue, 0) 100% 50%), #fff); }\n[data-slot="color-picker-channel-slider"][data-channel="red"] { --sw-color-picker-channel-gradient: linear-gradient(var(--sw-color-picker-channel-gradient-direction), rgb(from var(--sw-color-picker-color, #000) 0 g b), rgb(from var(--sw-color-picker-color, #000) 255 g b)); }\n[data-slot="color-picker-channel-slider"][data-channel="green"] { --sw-color-picker-channel-gradient: linear-gradient(var(--sw-color-picker-channel-gradient-direction), rgb(from var(--sw-color-picker-color, #000) r 0 b), rgb(from var(--sw-color-picker-color, #000) r 255 b)); }\n[data-slot="color-picker-channel-slider"][data-channel="blue"] { --sw-color-picker-channel-gradient: linear-gradient(var(--sw-color-picker-channel-gradient-direction), rgb(from var(--sw-color-picker-color, #000) r g 0), rgb(from var(--sw-color-picker-color, #000) r g 255)); }\n[data-slot="color-picker-channel-slider-track"] { background: var(--sw-color-picker-channel-gradient); }\n[data-slot="color-picker-transparency-grid"] { background-color: #fff; background-image: linear-gradient(45deg, #d4d4d8 25%, transparent 25%), linear-gradient(-45deg, #d4d4d8 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d4d4d8 75%), linear-gradient(-45deg, transparent 75%, #d4d4d8 75%); background-position: 0 0, 0 4px, 4px -4px, -4px 0; background-size: 8px 8px; }\n[data-slot="color-picker-value-swatch-color"], [data-slot="color-picker-swatch-color"] { background: var(--sw-color-picker-swatch-color); }\n[data-slot="color-picker-value-swatch"] { background-color: #fff; background-image: linear-gradient(var(--sw-color-picker-swatch-color, transparent), var(--sw-color-picker-swatch-color, transparent)), linear-gradient(45deg, #d4d4d8 25%, transparent 25%), linear-gradient(-45deg, #d4d4d8 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d4d4d8 75%), linear-gradient(-45deg, transparent 75%, #d4d4d8 75%); background-position: 0 0, 0 0, 0 4px, 4px -4px, -4px 0; background-size: 100% 100%, 8px 8px, 8px 8px, 8px 8px, 8px 8px; }\n[data-slot="color-picker-value-swatch"] > [data-slot="color-picker-transparency-grid"], [data-slot="color-picker-value-swatch"] > [data-slot="color-picker-value-swatch-color"] { display: none; }\n[data-slot="color-picker-footer"][data-has-swatches="false"]:not(:has([data-slot="color-picker-clear"]:not([hidden]))) > [data-slot="color-picker-separator"] { display: none; }\n[data-sw-color-picker][data-floating-root] > [data-slot="select-positioner"]:has(> [data-sw-color-picker-format-options]) { z-index: 60; }\n'
+            },
+            {
+              path: "src/components/starwind/color-picker/variants.ts",
+              content: 'import { tv } from "tailwind-variants";\nimport { input as channelInputRecipe, input as valueInputRecipe } from "../input/variants";\nimport {\n  nativeSelectIcon as nativeSelectIconRecipe,\n  nativeSelect as nativeSelectRecipe,\n  nativeSelectWrapper as nativeSelectWrapperRecipe,\n} from "../native-select/variants";\n\nexport const colorPickerChannelInput = channelInputRecipe;\n\nexport const colorPickerValueInput = valueInputRecipe;\n\nexport const colorPickerNativeFormatSelectWrapper = nativeSelectWrapperRecipe;\n\nexport const colorPickerNativeFormatSelect = nativeSelectRecipe;\n\nexport const colorPickerNativeFormatSelectIcon = nativeSelectIconRecipe;\n\nexport const colorPicker = tv({\n  base: "relative flex flex-col gap-3",\n  variants: {\n    size: {\n      sm: "text-sm",\n      md: "text-base",\n      lg: "text-lg",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerLabel = tv({\n  base: "font-medium leading-none data-disabled:cursor-not-allowed data-disabled:opacity-50",\n  variants: {\n    size: {\n      sm: "text-xs",\n      md: "text-sm",\n      lg: "text-base",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerControl = tv({\n  base: "flex items-center gap-2",\n  variants: {\n    size: {\n      sm: "gap-1.5",\n      md: "gap-2",\n      lg: "gap-2.5",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerTrigger = tv({\n  base: "border-input bg-background focus-visible:ring-outline/50 inline-flex items-center rounded-md border shadow-xs outline-none focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50",\n  variants: {\n    size: {\n      sm: "h-9 gap-2 px-2 text-sm",\n      md: "h-11 gap-2.5 px-3",\n      lg: "h-12 gap-3 px-4 text-lg",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerContent = tv({\n  base: "flex max-h-[max(10rem,var(--sw-floating-available-height))] w-72 flex-col gap-3 p-3",\n  variants: {\n    size: {\n      sm: "w-64 gap-2 p-2",\n      md: "w-72 gap-3 p-3",\n      lg: "w-80 gap-4 p-4",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerInput = tv({\n  base: "flex items-center gap-2",\n  variants: {\n    size: {\n      sm: "gap-1.5",\n      md: "gap-2",\n      lg: "gap-2.5",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerValueInputLayout = tv({\n  base: "min-w-0 flex-1 data-invalid:border-error data-invalid:focus-visible:ring-error/40",\n  variants: {\n    size: {\n      sm: "",\n      md: "",\n      lg: "",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerArea = tv({\n  base: "group/color-picker-area border-outline relative w-full touch-none rounded-md border [&>[data-slot=color-picker-area-background]]:inset-0 [&>[data-slot=color-picker-area-background]]:size-full [&>[data-slot=color-picker-area-background]]:rounded-[7px]",\n  variants: {\n    size: {\n      sm: "h-[150px]",\n      md: "h-[175px]",\n      lg: "h-[200px]",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerAreaThumb = tv({\n  base: "group-has-[[data-slot=color-picker-area-input-x]:focus-visible]/color-picker-area:ring-outline/60 pointer-events-none absolute top-[clamp(1px,var(--sw-color-picker-area-y),calc(100%_-_1px))] left-[clamp(1px,var(--sw-color-picker-area-x),calc(100%_-_1px))] z-10 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white bg-[var(--sw-color-picker-area-thumb-color)] shadow-md ring-1 ring-black/30 outline-none group-has-[[data-slot=color-picker-area-input-x]:focus-visible]/color-picker-area:ring-3 focus-visible:ring-3 data-disabled:opacity-50 data-dragging:scale-110",\n  variants: {\n    size: {\n      sm: "size-3.5",\n      md: "size-4",\n      lg: "size-5",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerSliders = tv({\n  base: "flex flex-col gap-3 px-2",\n  variants: {\n    size: {\n      sm: "gap-2",\n      md: "gap-3",\n      lg: "gap-4",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerSliderActionRow = tv({\n  base: "flex items-center gap-2",\n  variants: {\n    size: {\n      sm: "gap-1.5",\n      md: "gap-2",\n      lg: "gap-2.5",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerValueFormatRow = tv({\n  base: "flex items-center gap-2",\n  variants: {\n    size: {\n      sm: "gap-1.5",\n      md: "gap-2",\n      lg: "gap-2.5",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerSeparator = tv({\n  base: "bg-border h-px w-full",\n  variants: {\n    size: {\n      sm: "my-0.5",\n      md: "my-1",\n      lg: "my-1.5",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerChannelSlider = tv({\n  base: "group/color-picker-channel-slider bg-border relative touch-none rounded-full [&>[data-slot=color-picker-channel-slider-track]]:inset-px [&>[data-slot=color-picker-channel-slider-track]]:size-auto [&>[data-slot=color-picker-transparency-grid]]:inset-px [&>[data-slot=color-picker-transparency-grid]]:size-auto",\n  variants: {\n    size: {\n      sm: "h-2.5 data-[orientation=vertical]:h-40 data-[orientation=vertical]:w-2.5",\n      md: "h-3 data-[orientation=vertical]:h-48 data-[orientation=vertical]:w-3",\n      lg: "h-4 data-[orientation=vertical]:h-56 data-[orientation=vertical]:w-4",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerChannelSliderThumb = tv({\n  base: "group-has-[[data-slot=color-picker-channel-slider-input]:focus-visible]/color-picker-channel-slider:ring-outline/60 pointer-events-none absolute top-1/2 left-[var(--sw-color-picker-channel-position)] z-10 -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-full border-2 border-white shadow-md ring-1 ring-black/30 outline-none group-has-[[data-slot=color-picker-channel-slider-input]:focus-visible]/color-picker-channel-slider:ring-3 group-data-[orientation=vertical]/color-picker-channel-slider:top-[calc(100%-var(--sw-color-picker-channel-position))] group-data-[orientation=vertical]/color-picker-channel-slider:left-1/2 data-disabled:opacity-50 data-dragging:scale-110",\n  variants: {\n    size: {\n      sm: "size-3",\n      md: "size-4",\n      lg: "size-5",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerChannelInputLayout = tv({\n  base: "text-center data-invalid:border-error data-invalid:focus-visible:ring-error/40",\n  variants: {\n    size: {\n      sm: "h-9 w-16 text-sm",\n      md: "h-11 w-20",\n      lg: "h-12 w-24 text-lg",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerSwatch = tv({\n  base: "relative overflow-hidden rounded-md border shadow-xs outline-none focus-visible:ring-3 data-selected:ring-2 data-disabled:opacity-50",\n  variants: {\n    size: {\n      sm: "size-6",\n      md: "size-7",\n      lg: "size-8",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerSwatchGroup = tv({\n  base: "flex flex-wrap gap-2",\n  variants: {\n    size: {\n      sm: "gap-1.5",\n      md: "gap-2",\n      lg: "gap-2.5",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerValueSwatch = tv({\n  base: "border-input relative shrink-0 overflow-hidden border",\n  variants: {\n    size: {\n      sm: "size-4 rounded-[4.5px]",\n      md: "size-5 rounded-[5.5px]",\n      lg: "size-6 rounded-[6.5px]",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerFormatSelectTrigger = tv({\n  base: "uppercase",\n  variants: {\n    size: {\n      sm: "min-w-20",\n      md: "min-w-24",\n      lg: "min-w-24",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerAction = tv({\n  base: "border-input bg-background inline-flex items-center justify-center rounded-md border outline-none focus-visible:ring-3 disabled:opacity-50",\n  variants: {\n    size: {\n      sm: "h-9 px-2 text-sm",\n      md: "h-11 px-3",\n      lg: "h-12 px-4 text-lg",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n\nexport const colorPickerHiddenInput = tv({\n  base: "sr-only",\n  variants: {\n    size: {\n      sm: "",\n      md: "",\n      lg: "",\n    },\n  },\n  defaultVariants: {\n    size: "md",\n  },\n});\n'
+            }
+          ],
+          componentDependencies: ["input", "native-select", "popover", "select"],
+          packageRequirements: [
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons-react", range: "^3.37.1" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -3886,7 +4108,7 @@ export const comboboxValue = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -3908,7 +4130,7 @@ export const comboboxValue = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -4020,7 +4242,7 @@ export const inputGroupTextarea = tv({
           ],
           componentDependencies: ["button", "input", "textarea"],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -4124,7 +4346,7 @@ export const inputGroupTextarea = tv({
           ],
           componentDependencies: ["button", "input", "textarea"],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -4166,7 +4388,7 @@ export const inputGroupTextarea = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons", range: "^3.37.1" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -4201,7 +4423,7 @@ export const inputGroupTextarea = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons-react", range: "^3.37.1" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -4344,7 +4566,7 @@ export const itemTitle = tv({
           ],
           componentDependencies: ["separator"],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -4478,7 +4700,7 @@ export const itemTitle = tv({
           ],
           componentDependencies: ["separator"],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -4516,7 +4738,7 @@ export const itemTitle = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons", range: "^3.37.1" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -4547,7 +4769,7 @@ export const itemTitle = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons-react", range: "^3.37.1" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -4674,7 +4896,7 @@ export const navigationMenuViewport = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons", range: "^3.37.1" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -4793,7 +5015,7 @@ export const navigationMenuViewport = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons-react", range: "^3.37.1" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -4848,7 +5070,7 @@ export const navigationMenuViewport = tv({
           ],
           componentDependencies: ["button"],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons", range: "^3.37.1" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -4895,7 +5117,7 @@ export const navigationMenuViewport = tv({
           ],
           componentDependencies: ["button"],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons-react", range: "^3.37.1" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -4926,7 +5148,7 @@ export const navigationMenuViewport = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -4948,7 +5170,7 @@ export const navigationMenuViewport = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -5582,7 +5804,7 @@ export const navigationMenuViewport = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -6208,7 +6430,7 @@ export const navigationMenuViewport = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -6242,7 +6464,7 @@ export const navigationMenuViewport = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons", range: "^3.37.1" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -6269,7 +6491,7 @@ export const navigationMenuViewport = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons-react", range: "^3.37.1" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -6324,7 +6546,7 @@ export const navigationMenuViewport = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -6370,7 +6592,7 @@ export const navigationMenuViewport = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -6444,7 +6666,7 @@ export const navigationMenuViewport = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons", range: "^3.37.1" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -6511,7 +6733,7 @@ export const navigationMenuViewport = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons-react", range: "^3.37.1" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -6542,7 +6764,7 @@ export const navigationMenuViewport = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -6564,7 +6786,7 @@ export const navigationMenuViewport = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -6594,7 +6816,7 @@ export const navigationMenuViewport = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -6616,7 +6838,7 @@ export const navigationMenuViewport = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -6682,7 +6904,7 @@ export const tabsTrigger = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -6740,7 +6962,7 @@ export const tabsTrigger = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -6798,7 +7020,7 @@ export const tabsTrigger = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -6848,7 +7070,7 @@ export const tabsTrigger = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -6910,7 +7132,7 @@ export const tabsTrigger = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons", range: "^3.37.1" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -6965,7 +7187,7 @@ export const tabsTrigger = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons-react", range: "^3.37.1" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -7004,7 +7226,7 @@ export const tabsTrigger = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -7034,7 +7256,7 @@ export const tabsTrigger = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -7072,7 +7294,7 @@ export const tabsTrigger = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons", range: "^3.37.1" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -7103,7 +7325,7 @@ export const tabsTrigger = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons-react", range: "^3.37.1" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -7163,7 +7385,7 @@ export const themeToggle = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons", range: "^3.37.1" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -7215,7 +7437,7 @@ export const themeToggle = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons-react", range: "^3.37.1" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -7274,7 +7496,7 @@ export const toggle = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -7324,7 +7546,7 @@ export const toggle = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -7401,7 +7623,7 @@ export const toggleGroupItem = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -7470,7 +7692,7 @@ export const toggleGroupItem = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -7500,7 +7722,7 @@ export const toggleGroupItem = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -7522,7 +7744,7 @@ export const toggleGroupItem = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -7624,7 +7846,7 @@ export const buttonGroupText = tv({
           ],
           componentDependencies: ["separator"],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -7718,7 +7940,7 @@ export const buttonGroupText = tv({
           ],
           componentDependencies: ["separator"],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -7764,7 +7986,7 @@ export const buttonGroupText = tv({
           ],
           componentDependencies: ["button"],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons", range: "^3.37.1" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -7798,12 +8020,12 @@ export const buttonGroupText = tv({
             },
             {
               path: "src/components/starwind/carousel/variants.ts",
-              content: 'import { button as buttonVariants } from "../button/variants";\nimport { tv } from "tailwind-variants";\n\nexport const carouselControl = tv({\n  extend: buttonVariants,\n  defaultVariants: {\n    variant: "outline",\n    size: "icon",\n  },\n});\n\nexport const carousel = tv({\n  base: "group/carousel relative",\n});\n\nexport const carouselContent = tv({\n  base: "overflow-hidden",\n});\n\nexport const carouselContainer = tv({\n  base: [\n    "flex group-data-[axis=y]/carousel:flex-col",\n    "group-data-[axis=x]/carousel:-ml-4",\n    "group-data-[axis=y]/carousel:-mt-4",\n  ],\n});\n\nexport const carouselItem = tv({\n  base: [\n    "min-w-0 shrink-0 grow-0 basis-full",\n    "group-data-[axis=x]/carousel:pl-4",\n    "group-data-[axis=y]/carousel:pt-4",\n  ],\n});\n\nexport const carouselNext = tv({\n  base: [\n    "absolute size-8 rounded-full",\n    "group-data-[axis=x]/carousel:top-1/2 group-data-[axis=x]/carousel:-right-12 group-data-[axis=x]/carousel:-translate-y-1/2",\n    "group-data-[axis=y]/carousel:-bottom-12 group-data-[axis=y]/carousel:left-1/2 group-data-[axis=y]/carousel:-translate-x-1/2 group-data-[axis=y]/carousel:rotate-90",\n  ],\n});\n\nexport const carouselPrevious = tv({\n  base: [\n    "absolute size-8 rounded-full",\n    "group-data-[axis=x]/carousel:top-1/2 group-data-[axis=x]/carousel:-left-12 group-data-[axis=x]/carousel:-translate-y-1/2",\n    "group-data-[axis=y]/carousel:-top-12 group-data-[axis=y]/carousel:left-1/2 group-data-[axis=y]/carousel:-translate-x-1/2 group-data-[axis=y]/carousel:rotate-90",\n  ],\n});\n'
+              content: 'import { tv } from "tailwind-variants";\nimport { button as buttonVariants } from "../button/variants";\n\nexport const carouselControl = tv({\n  extend: buttonVariants,\n  defaultVariants: {\n    variant: "outline",\n    size: "icon",\n  },\n});\n\nexport const carousel = tv({\n  base: "group/carousel relative",\n});\n\nexport const carouselContent = tv({\n  base: "overflow-hidden",\n});\n\nexport const carouselContainer = tv({\n  base: [\n    "flex group-data-[axis=y]/carousel:flex-col",\n    "group-data-[axis=x]/carousel:-ml-4",\n    "group-data-[axis=y]/carousel:-mt-4",\n  ],\n});\n\nexport const carouselItem = tv({\n  base: [\n    "min-w-0 shrink-0 grow-0 basis-full",\n    "group-data-[axis=x]/carousel:pl-4",\n    "group-data-[axis=y]/carousel:pt-4",\n  ],\n});\n\nexport const carouselNext = tv({\n  base: [\n    "absolute size-8 rounded-full",\n    "group-data-[axis=x]/carousel:top-1/2 group-data-[axis=x]/carousel:-right-12 group-data-[axis=x]/carousel:-translate-y-1/2",\n    "group-data-[axis=y]/carousel:-bottom-12 group-data-[axis=y]/carousel:left-1/2 group-data-[axis=y]/carousel:-translate-x-1/2 group-data-[axis=y]/carousel:rotate-90",\n  ],\n});\n\nexport const carouselPrevious = tv({\n  base: [\n    "absolute size-8 rounded-full",\n    "group-data-[axis=x]/carousel:top-1/2 group-data-[axis=x]/carousel:-left-12 group-data-[axis=x]/carousel:-translate-y-1/2",\n    "group-data-[axis=y]/carousel:-top-12 group-data-[axis=y]/carousel:left-1/2 group-data-[axis=y]/carousel:-translate-x-1/2 group-data-[axis=y]/carousel:rotate-90",\n  ],\n});\n'
             }
           ],
           componentDependencies: ["button"],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons-react", range: "^3.37.1" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -7844,7 +8066,7 @@ export const button = tv({
     variant: {
       default: "bg-foreground text-background hover:bg-foreground/90 focus-visible:ring-outline/50",
       primary: "bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-primary/50",
-      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/90 focus-visible:ring-secondary/50",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] focus-visible:ring-secondary/50",
       outline: "dark:border-input focus-visible:ring-outline/50 bg-background dark:bg-input/30 focus-visible:border-outline hover:bg-muted dark:hover:bg-input/50 hover:text-foreground border shadow-xs",
       ghost: "hover:bg-muted hover:text-foreground focus-visible:ring-outline/50",
       info: "bg-info text-info-foreground hover:bg-info/90 focus-visible:ring-info/50",
@@ -7871,7 +8093,7 @@ export const button = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -7903,7 +8125,7 @@ export const button = tv({
     variant: {
       default: "bg-foreground text-background hover:bg-foreground/90 focus-visible:ring-outline/50",
       primary: "bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-primary/50",
-      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/90 focus-visible:ring-secondary/50",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] focus-visible:ring-secondary/50",
       outline: "dark:border-input focus-visible:ring-outline/50 bg-background dark:bg-input/30 focus-visible:border-outline hover:bg-muted dark:hover:bg-input/50 hover:text-foreground border shadow-xs",
       ghost: "hover:bg-muted hover:text-foreground focus-visible:ring-outline/50",
       info: "bg-info text-info-foreground hover:bg-info/90 focus-visible:ring-info/50",
@@ -7930,7 +8152,7 @@ export const button = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -7968,7 +8190,7 @@ export const button = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -7998,7 +8220,7 @@ export const button = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -8007,7 +8229,7 @@ export const button = tv({
     },
     {
       name: "accordion",
-      version: "2.0.0",
+      version: "2.0.1",
       type: "component",
       dependencies: [],
       targets: {
@@ -8015,7 +8237,7 @@ export const button = tv({
           files: [
             {
               path: "src/components/starwind/accordion/Accordion.astro",
-              content: '---\nimport AccordionPrimitive from "@starwind-ui/astro/accordion";\nimport type { HTMLAttributes } from "astro/types";\nimport { accordion } from "./variants";\n\ntype Props = HTMLAttributes<"div"> & {\n  type?: "single" | "multiple";\n  defaultValue?: string | string[];\n  collapsible?: boolean;\n};\n\nconst {\n  type = "single",\n  defaultValue,\n  collapsible = false,\n  class: className,\n  ...rest\n} = Astro.props;\n---\n\n<AccordionPrimitive.Root\n  class={accordion({ class: className })}\n  type={type}\n  defaultValue={defaultValue}\n  collapsible={collapsible}\n  {...rest}\n  data-slot="accordion"\n>\n  <slot />\n</AccordionPrimitive.Root>\n'
+              content: '---\nimport AccordionPrimitive from "@starwind-ui/astro/accordion";\nimport type { HTMLAttributes } from "astro/types";\nimport { accordion } from "./variants";\n\ntype Props = HTMLAttributes<"div"> & {\n  type?: "single" | "multiple";\n  defaultValue?: string | string[];\n  collapsible?: boolean;\n};\n\nconst {\n  type = "single",\n  defaultValue,\n  collapsible = true,\n  class: className,\n  ...rest\n} = Astro.props;\n---\n\n<AccordionPrimitive.Root\n  class={accordion({ class: className })}\n  type={type}\n  defaultValue={defaultValue}\n  collapsible={collapsible}\n  {...rest}\n  data-slot="accordion"\n>\n  <slot />\n</AccordionPrimitive.Root>\n'
             },
             {
               path: "src/components/starwind/accordion/AccordionContent.astro",
@@ -8040,7 +8262,7 @@ export const button = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons", range: "^3.37.1" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -8050,7 +8272,7 @@ export const button = tv({
           files: [
             {
               path: "src/components/starwind/accordion/Accordion.tsx",
-              content: 'import AccordionPrimitive from "@starwind-ui/react/accordion";\nimport type * as React from "react";\nimport { accordion } from "./variants";\n\nexport type AccordionProps = React.ComponentPropsWithoutRef<"div"> & {\n  type?: "single" | "multiple";\n  defaultValue?: string | string[];\n  value?: import("@starwind-ui/react/accordion").AccordionValue;\n  collapsible?: boolean;\n  onValueChange?: (details: import("@starwind-ui/react/accordion").AccordionValueChangeDetails) => void;\n};\n\nfunction Accordion(props: AccordionProps) {\n  const {\n    type = "single",\n    defaultValue,\n    value,\n    collapsible = false,\n    onValueChange,\n    className,\n    children,\n    ...rest\n  } = props;\n\n  return (\n    <AccordionPrimitive.Root\n      className={accordion({ class: className })}\n      type={type}\n      defaultValue={defaultValue}\n      value={value}\n      collapsible={collapsible}\n      onValueChange={onValueChange}\n      {...rest}\n      data-slot="accordion"\n    >\n      {children}\n    </AccordionPrimitive.Root>\n  );\n}\n\nexport default Accordion;\n'
+              content: 'import AccordionPrimitive from "@starwind-ui/react/accordion";\nimport type * as React from "react";\nimport { accordion } from "./variants";\n\nexport type AccordionProps = React.ComponentPropsWithoutRef<"div"> & {\n  type?: "single" | "multiple";\n  defaultValue?: string | string[];\n  value?: import("@starwind-ui/react/accordion").AccordionValue;\n  collapsible?: boolean;\n  onValueChange?: (details: import("@starwind-ui/react/accordion").AccordionValueChangeDetails) => void;\n};\n\nfunction Accordion(props: AccordionProps) {\n  const {\n    type = "single",\n    defaultValue,\n    value,\n    collapsible = true,\n    onValueChange,\n    className,\n    children,\n    ...rest\n  } = props;\n\n  return (\n    <AccordionPrimitive.Root\n      className={accordion({ class: className })}\n      type={type}\n      defaultValue={defaultValue}\n      value={value}\n      collapsible={collapsible}\n      onValueChange={onValueChange}\n      {...rest}\n      data-slot="accordion"\n    >\n      {children}\n    </AccordionPrimitive.Root>\n  );\n}\n\nexport default Accordion;\n'
             },
             {
               path: "src/components/starwind/accordion/AccordionContent.tsx",
@@ -8075,7 +8297,7 @@ export const button = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons-react", range: "^3.37.1" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -8138,7 +8360,7 @@ export const button = tv({
           ],
           componentDependencies: ["button"],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons", range: "^3.37.1" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -8193,7 +8415,7 @@ export const button = tv({
           ],
           componentDependencies: ["button"],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons-react", range: "^3.37.1" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -8284,7 +8506,7 @@ export const button = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons", range: "^3.37.1" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -8367,7 +8589,7 @@ export const button = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons-react", range: "^3.37.1" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -8410,7 +8632,7 @@ export const button = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons", range: "^3.37.1" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -8445,7 +8667,7 @@ export const button = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons-react", range: "^3.37.1" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -8536,7 +8758,7 @@ export const button = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons", range: "^3.37.1" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -8619,7 +8841,7 @@ export const button = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons-react", range: "^3.37.1" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -8678,7 +8900,7 @@ export const button = tv({
           ],
           componentDependencies: ["button"],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons", range: "^3.37.1" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -8729,7 +8951,7 @@ export const button = tv({
           ],
           componentDependencies: ["button"],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons-react", range: "^3.37.1" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -8852,7 +9074,7 @@ export const button = tv({
           ],
           componentDependencies: ["button", "input", "separator", "sheet", "skeleton", "tooltip"],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons", range: "^3.37.1" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -8967,7 +9189,7 @@ export const button = tv({
           ],
           componentDependencies: ["button", "input", "separator", "sheet", "skeleton", "tooltip"],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "@tabler/icons-react", range: "^3.37.1" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
@@ -8998,7 +9220,7 @@ export const button = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -9032,7 +9254,7 @@ export const button = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -9058,7 +9280,7 @@ export const button = tv({
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -9136,7 +9358,7 @@ export const button = tv({
           ],
           componentDependencies: ["separator"],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -9206,7 +9428,7 @@ export const button = tv({
           ],
           componentDependencies: ["separator"],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -9227,7 +9449,7 @@ export const button = tv({
             },
             {
               path: "src/components/starwind/popover/PopoverContent.astro",
-              content: '---\nimport PopoverPrimitive from "@starwind-ui/astro/popover";\nimport type { HTMLAttributes } from "astro/types";\nimport { popoverContent } from "./variants";\n\ntype Props = HTMLAttributes<"div"> & {\n  side?: "top" | "right" | "bottom" | "left";\n  align?: "start" | "center" | "end";\n  sideOffset?: number;\n  avoidCollisions?: boolean;\n};\n\nconst {\n  class: className,\n  side = "bottom",\n  align = "center",\n  sideOffset = 4,\n  avoidCollisions = true,\n  ...rest\n} = Astro.props;\n---\n\n<PopoverPrimitive.Portal data-slot="popover-portal">\n  <PopoverPrimitive.Popup\n    class={popoverContent({ class: className })}\n    side={side}\n    align={align}\n    sideOffset={sideOffset}\n    avoidCollisions={avoidCollisions}\n    {...rest}\n    data-slot="popover-content"\n  >\n    <slot />\n  </PopoverPrimitive.Popup>\n</PopoverPrimitive.Portal>\n'
+              content: '---\nimport PopoverPrimitive from "@starwind-ui/astro/popover";\nimport type { HTMLAttributes } from "astro/types";\nimport type { VariantProps } from "tailwind-variants";\nimport { popoverContent } from "./variants";\n\ntype Props = HTMLAttributes<"div"> & VariantProps<typeof popoverContent> & {\n  side?: "top" | "right" | "bottom" | "left";\n  align?: "start" | "center" | "end";\n  sideOffset?: number;\n  avoidCollisions?: boolean;\n};\n\nconst {\n  class: className,\n  side = "bottom",\n  align = "center",\n  sideOffset = 4,\n  avoidCollisions = true,\n  exitMotion = "popover",\n  ...rest\n} = Astro.props;\n---\n\n<PopoverPrimitive.Portal data-slot="popover-portal">\n  <PopoverPrimitive.Popup\n    class={popoverContent({ exitMotion, class: className })}\n    side={side}\n    align={align}\n    sideOffset={sideOffset}\n    avoidCollisions={avoidCollisions}\n    {...rest}\n    data-slot="popover-content"\n  >\n    <slot />\n  </PopoverPrimitive.Popup>\n</PopoverPrimitive.Portal>\n'
             },
             {
               path: "src/components/starwind/popover/PopoverDescription.astro",
@@ -9251,12 +9473,12 @@ export const button = tv({
             },
             {
               path: "src/components/starwind/popover/variants.ts",
-              content: 'import { tv } from "tailwind-variants";\n\nexport const popover = tv({\n  base: "",\n});\n\nexport const popoverContent = tv({\n  base: [\n    "bg-popover text-popover-foreground z-50 flex w-72 flex-col gap-2.5 overflow-x-hidden overflow-y-auto rounded-lg border p-2.5 shadow-md",\n    "data-[state=open]:animate-in fade-in zoom-in-95 outline-none",\n    "data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fade-out zoom-out-95",\n    "data-[side=bottom]:slide-in-from-top-2 data-[side=bottom]:slide-out-to-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=top]:slide-out-to-bottom-2",\n    "data-[side=right]:slide-in-from-left-2 data-[side=right]:slide-out-to-left-2 data-[side=left]:slide-in-from-right-2 data-[side=left]:slide-out-to-right-2",\n    "origin-(--transform-origin) pointer-events-auto fixed isolate will-change-transform",\n  ],\n});\n\nexport const popoverDescription = tv({\n  base: "text-muted-foreground",\n});\n\nexport const popoverHeader = tv({\n  base: "flex flex-col gap-1",\n});\n\nexport const popoverTitle = tv({\n  base: "font-medium",\n});\n\nexport const popoverTrigger = tv({\n  base: [\n    "inline-flex items-center justify-center",\n    "focus-visible:ring-outline/50 transition-[color,box-shadow] outline-none focus-visible:ring-3",\n    "disabled:pointer-events-none",\n  ],\n});\n'
+              content: 'import { tv } from "tailwind-variants";\n\nexport const popover = tv({\n  base: "",\n});\n\nexport const popoverContent = tv({\n  base: [\n    "bg-popover text-popover-foreground z-50 flex w-72 flex-col gap-2.5 overflow-x-hidden overflow-y-auto rounded-lg border p-2.5 shadow-md",\n    "data-[state=open]:animate-in fade-in zoom-in-95 outline-none",\n    "data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fade-out",\n    "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",\n    "data-[side=right]:slide-in-from-left-2 data-[side=left]:slide-in-from-right-2",\n    "origin-(--transform-origin) pointer-events-auto fixed isolate will-change-transform",\n  ],\n  variants: {\n    exitMotion: {\n      popover: [\n        "zoom-out-95",\n        "data-[side=bottom]:slide-out-to-top-2 data-[side=top]:slide-out-to-bottom-2",\n        "data-[side=right]:slide-out-to-left-2 data-[side=left]:slide-out-to-right-2",\n      ],\n      fade: "",\n    },\n  },\n  defaultVariants: {\n    exitMotion: "popover",\n  },\n});\n\nexport const popoverDescription = tv({\n  base: "text-muted-foreground",\n});\n\nexport const popoverHeader = tv({\n  base: "flex flex-col gap-1",\n});\n\nexport const popoverTitle = tv({\n  base: "font-medium",\n});\n\nexport const popoverTrigger = tv({\n  base: [\n    "inline-flex items-center justify-center",\n    "focus-visible:ring-outline/50 transition-[color,box-shadow] outline-none focus-visible:ring-3",\n    "disabled:pointer-events-none",\n  ],\n});\n'
             }
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -9269,7 +9491,7 @@ export const button = tv({
             },
             {
               path: "src/components/starwind/popover/PopoverContent.tsx",
-              content: 'import PopoverPrimitive from "@starwind-ui/react/popover";\nimport type * as React from "react";\nimport { popoverContent } from "./variants";\n\nexport type PopoverContentProps = React.ComponentPropsWithoutRef<"div"> & {\n  side?: "top" | "right" | "bottom" | "left";\n  align?: "start" | "center" | "end";\n  sideOffset?: number;\n  avoidCollisions?: boolean;\n};\n\nfunction PopoverContent(props: PopoverContentProps) {\n  const {\n    className,\n    side = "bottom",\n    align = "center",\n    sideOffset = 4,\n    avoidCollisions = true,\n    children,\n    ...rest\n  } = props;\n\n  return (\n    <PopoverPrimitive.Portal\n      data-slot="popover-portal"\n    >\n      <PopoverPrimitive.Popup\n        className={popoverContent({ class: className })}\n        side={side}\n        align={align}\n        sideOffset={sideOffset}\n        avoidCollisions={avoidCollisions}\n        {...rest}\n        data-slot="popover-content"\n      >\n        {children}\n      </PopoverPrimitive.Popup>\n    </PopoverPrimitive.Portal>\n  );\n}\n\nexport default PopoverContent;\n'
+              content: 'import PopoverPrimitive from "@starwind-ui/react/popover";\nimport type * as React from "react";\nimport type { VariantProps } from "tailwind-variants";\nimport { popoverContent } from "./variants";\n\nexport type PopoverContentProps = React.ComponentPropsWithoutRef<"div"> &\n  VariantProps<typeof popoverContent> & {\n    side?: "top" | "right" | "bottom" | "left";\n    align?: "start" | "center" | "end";\n    sideOffset?: number;\n    avoidCollisions?: boolean;\n  };\n\nfunction PopoverContent(props: PopoverContentProps) {\n  const {\n    className,\n    side = "bottom",\n    align = "center",\n    sideOffset = 4,\n    avoidCollisions = true,\n    exitMotion = "popover",\n    children,\n    ...rest\n  } = props;\n\n  return (\n    <PopoverPrimitive.Portal\n      data-slot="popover-portal"\n    >\n      <PopoverPrimitive.Popup\n        className={popoverContent({ exitMotion, class: className })}\n        side={side}\n        align={align}\n        sideOffset={sideOffset}\n        avoidCollisions={avoidCollisions}\n        {...rest}\n        data-slot="popover-content"\n      >\n        {children}\n      </PopoverPrimitive.Popup>\n    </PopoverPrimitive.Portal>\n  );\n}\n\nexport default PopoverContent;\n'
             },
             {
               path: "src/components/starwind/popover/PopoverDescription.tsx",
@@ -9293,12 +9515,12 @@ export const button = tv({
             },
             {
               path: "src/components/starwind/popover/variants.ts",
-              content: 'import { tv } from "tailwind-variants";\n\nexport const popover = tv({\n  base: "",\n});\n\nexport const popoverContent = tv({\n  base: [\n    "bg-popover text-popover-foreground z-50 flex w-72 flex-col gap-2.5 overflow-x-hidden overflow-y-auto rounded-lg border p-2.5 shadow-md",\n    "data-[state=open]:animate-in fade-in zoom-in-95 outline-none",\n    "data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fade-out zoom-out-95",\n    "data-[side=bottom]:slide-in-from-top-2 data-[side=bottom]:slide-out-to-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=top]:slide-out-to-bottom-2",\n    "data-[side=right]:slide-in-from-left-2 data-[side=right]:slide-out-to-left-2 data-[side=left]:slide-in-from-right-2 data-[side=left]:slide-out-to-right-2",\n    "origin-(--transform-origin) pointer-events-auto fixed isolate will-change-transform",\n  ],\n});\n\nexport const popoverDescription = tv({\n  base: "text-muted-foreground",\n});\n\nexport const popoverHeader = tv({\n  base: "flex flex-col gap-1",\n});\n\nexport const popoverTitle = tv({\n  base: "font-medium",\n});\n\nexport const popoverTrigger = tv({\n  base: [\n    "inline-flex items-center justify-center",\n    "focus-visible:ring-outline/50 transition-[color,box-shadow] outline-none focus-visible:ring-3",\n    "disabled:pointer-events-none",\n  ],\n});\n'
+              content: 'import { tv } from "tailwind-variants";\n\nexport const popover = tv({\n  base: "",\n});\n\nexport const popoverContent = tv({\n  base: [\n    "bg-popover text-popover-foreground z-50 flex w-72 flex-col gap-2.5 overflow-x-hidden overflow-y-auto rounded-lg border p-2.5 shadow-md",\n    "data-[state=open]:animate-in fade-in zoom-in-95 outline-none",\n    "data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fade-out",\n    "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",\n    "data-[side=right]:slide-in-from-left-2 data-[side=left]:slide-in-from-right-2",\n    "origin-(--transform-origin) pointer-events-auto fixed isolate will-change-transform",\n  ],\n  variants: {\n    exitMotion: {\n      popover: [\n        "zoom-out-95",\n        "data-[side=bottom]:slide-out-to-top-2 data-[side=top]:slide-out-to-bottom-2",\n        "data-[side=right]:slide-out-to-left-2 data-[side=left]:slide-out-to-right-2",\n      ],\n      fade: "",\n    },\n  },\n  defaultVariants: {\n    exitMotion: "popover",\n  },\n});\n\nexport const popoverDescription = tv({\n  base: "text-muted-foreground",\n});\n\nexport const popoverHeader = tv({\n  base: "flex flex-col gap-1",\n});\n\nexport const popoverTitle = tv({\n  base: "font-medium",\n});\n\nexport const popoverTrigger = tv({\n  base: [\n    "inline-flex items-center justify-center",\n    "focus-visible:ring-outline/50 transition-[color,box-shadow] outline-none focus-visible:ring-3",\n    "disabled:pointer-events-none",\n  ],\n});\n'
             }
           ],
           componentDependencies: [],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -9407,7 +9629,7 @@ export const alertDialogActionAsChild = tv({
     variant: {
       default: "bg-foreground text-background hover:bg-foreground/90 focus-visible:ring-outline/50",
       primary: "bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-primary/50",
-      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/90 focus-visible:ring-secondary/50",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] focus-visible:ring-secondary/50",
       outline: "dark:border-input focus-visible:ring-outline/50 bg-background dark:bg-input/30 focus-visible:border-outline hover:bg-muted dark:hover:bg-input/50 hover:text-foreground border shadow-xs",
       ghost: "hover:bg-muted hover:text-foreground focus-visible:ring-outline/50",
       info: "bg-info text-info-foreground hover:bg-info/90 focus-visible:ring-info/50",
@@ -9447,7 +9669,7 @@ export const alertDialogCancelAsChild = tv({
     variant: {
       default: "bg-foreground text-background hover:bg-foreground/90 focus-visible:ring-outline/50",
       primary: "bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-primary/50",
-      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/90 focus-visible:ring-secondary/50",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] focus-visible:ring-secondary/50",
       outline: "dark:border-input focus-visible:ring-outline/50 bg-background dark:bg-input/30 focus-visible:border-outline hover:bg-muted dark:hover:bg-input/50 hover:text-foreground border shadow-xs",
       ghost: "hover:bg-muted hover:text-foreground focus-visible:ring-outline/50",
       info: "bg-info text-info-foreground hover:bg-info/90 focus-visible:ring-info/50",
@@ -9474,7 +9696,7 @@ export const alertDialogCancelAsChild = tv({
           ],
           componentDependencies: ["button"],
           packageRequirements: [
-            { name: "@starwind-ui/astro", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/astro", range: "^0.1.0-beta.2" },
             { name: "astro", range: ">=5" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -9575,7 +9797,7 @@ export const alertDialogActionAsChild = tv({
     variant: {
       default: "bg-foreground text-background hover:bg-foreground/90 focus-visible:ring-outline/50",
       primary: "bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-primary/50",
-      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/90 focus-visible:ring-secondary/50",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] focus-visible:ring-secondary/50",
       outline: "dark:border-input focus-visible:ring-outline/50 bg-background dark:bg-input/30 focus-visible:border-outline hover:bg-muted dark:hover:bg-input/50 hover:text-foreground border shadow-xs",
       ghost: "hover:bg-muted hover:text-foreground focus-visible:ring-outline/50",
       info: "bg-info text-info-foreground hover:bg-info/90 focus-visible:ring-info/50",
@@ -9615,7 +9837,7 @@ export const alertDialogCancelAsChild = tv({
     variant: {
       default: "bg-foreground text-background hover:bg-foreground/90 focus-visible:ring-outline/50",
       primary: "bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-primary/50",
-      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/90 focus-visible:ring-secondary/50",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] focus-visible:ring-secondary/50",
       outline: "dark:border-input focus-visible:ring-outline/50 bg-background dark:bg-input/30 focus-visible:border-outline hover:bg-muted dark:hover:bg-input/50 hover:text-foreground border shadow-xs",
       ghost: "hover:bg-muted hover:text-foreground focus-visible:ring-outline/50",
       info: "bg-info text-info-foreground hover:bg-info/90 focus-visible:ring-info/50",
@@ -9642,7 +9864,7 @@ export const alertDialogCancelAsChild = tv({
           ],
           componentDependencies: ["button"],
           packageRequirements: [
-            { name: "@starwind-ui/react", range: "^0.1.0-beta.1" },
+            { name: "@starwind-ui/react", range: "^0.1.0-beta.2" },
             { name: "react", range: ">=18" },
             { name: "tailwind-variants", range: "^3.2.2" }
           ]
@@ -11784,8 +12006,7 @@ async function migrate(options) {
         applied: [],
         skipped: [],
         unavailable: []
-      },
-      compatibility: []
+      }
     };
     const existingFolders = await listDirectories(componentDir);
     const legacyComponentNames = new Set(
@@ -11834,28 +12055,9 @@ async function migrate(options) {
         legacyComponents.set(component.name, toLegacyComponent(component));
       }
     }
-    const hasLegacyColorPicker = legacyConfig.components.some(
-      (component) => component.name === "color-picker"
-    );
-    const canBridgeLegacyColorPicker = hasLegacyColorPicker ? await canApplyLegacyColorPickerSelectBridge(componentDir) : false;
-    const keepLegacySelect = hasLegacyColorPicker && !canBridgeLegacyColorPicker;
-    if (keepLegacySelect) {
-      report.compatibility.push(
-        "Color Picker is customized, so Select remains legacy to preserve compatibility; unrelated components will continue migrating."
-      );
-    }
     const componentsToMigrate = [];
     const conflicts = [];
     for (const item of migrationPlan.values()) {
-      if (item.component.name === "select" && keepLegacySelect) {
-        const legacySelect = item.legacyComponent ?? legacyConfig.components.find((component) => component.name === "select") ?? {
-          name: "select",
-          version: "0.0.0"
-        };
-        report.legacy.push("select");
-        legacyComponents.set("select", toLegacyComponent(legacySelect));
-        continue;
-      }
       const componentPath = path6.join(componentDir, item.component.name);
       const hasExistingFolder = await fs8.pathExists(componentPath);
       if (!hasExistingFolder) {
@@ -11962,12 +12164,6 @@ async function migrate(options) {
         });
         report.codemods[codemodResult].push(formatRenameCodemodLabel(item.rename));
       }
-      if (hasLegacyColorPicker && installedNames.has("select")) {
-        const bridgeResult = await applyLegacyColorPickerSelectBridge(componentDir);
-        report.compatibility.push(
-          bridgeResult === "applied" ? "Color Picker remains legacy Astro-only; added its Runtime Select event bridge." : bridgeResult === "already-applied" ? "Color Picker remains legacy Astro-only; its Runtime Select event bridge was already present." : "Color Picker remains legacy Astro-only and customized; verify its Select integration manually."
-        );
-      }
     }
     await p8.tasks([
       {
@@ -12187,44 +12383,6 @@ ${formatIndentedList(report.codemods.unavailable)}`
 ${formatIndentedList(report.custom)}`
     );
   }
-  report.compatibility.forEach((message) => p8.log.warn(highlighter.warn(message)));
-}
-async function canApplyLegacyColorPickerSelectBridge(componentDir) {
-  const relativePath = path6.posix.join(
-    componentDir.replace(/\\/g, "/"),
-    "color-picker/ColorPicker.astro"
-  );
-  if (!await fs8.pathExists(relativePath)) return false;
-  const content = await fs8.readFile(relativePath, "utf8");
-  return content.includes('"starwind:value-change", handleColorFormatChange') || /colorFormatSelect\.addEventListener\(\s*"starwind-select:change",\s*\(event: Event\) => \{([\s\S]*?)\},\s*\{ signal: abortController\.signal \},\s*\);/.test(
-    content
-  );
-}
-async function applyLegacyColorPickerSelectBridge(componentDir) {
-  const relativePath = path6.posix.join(
-    componentDir.replace(/\\/g, "/"),
-    "color-picker/ColorPicker.astro"
-  );
-  if (!await fs8.pathExists(relativePath)) return "unavailable";
-  const content = await fs8.readFile(relativePath, "utf8");
-  if (content.includes('"starwind:value-change", handleColorFormatChange')) {
-    return "already-applied";
-  }
-  const listenerPattern = /colorFormatSelect\.addEventListener\(\s*"starwind-select:change",\s*\(event: Event\) => \{([\s\S]*?)\},\s*\{ signal: abortController\.signal \},\s*\);/;
-  const match = content.match(listenerPattern);
-  if (!match) return "unavailable";
-  const body = match[1];
-  const replacement = `const handleColorFormatChange = (event: Event) => {${body}};
-
-    colorFormatSelect.addEventListener("starwind-select:change", handleColorFormatChange, {
-      signal: abortController.signal,
-    });
-    colorFormatSelect.addEventListener("starwind:value-change", handleColorFormatChange, {
-      signal: abortController.signal,
-    });`;
-  const destination = await resolveProjectMutationPath(relativePath);
-  await fs8.writeFile(destination, content.replace(listenerPattern, replacement), "utf8");
-  return "applied";
 }
 function formatIndentedList(items) {
   return items.map((item) => `  ${item}`).join("\n");
@@ -13265,12 +13423,76 @@ var primitive_vendoring_artifacts_default = {
     {
       component: "button",
       framework: "astro",
-      version: "0.1.0",
+      version: "0.1.1",
       files: [
         {
           path: "src/components/starwind-primitives/button/ButtonRoot.astro",
-          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ninterface Props extends HTMLAttributes<"button"> {\n  focusableWhenDisabled?: boolean;\n}\n\nconst { type = "button", disabled = false, focusableWhenDisabled = false, ...rest } = Astro.props;\n---\n\n<button\n  data-focusable-when-disabled={focusableWhenDisabled ? "true" : undefined}\n  data-disabled={disabled ? "" : undefined}\n  aria-disabled={disabled && focusableWhenDisabled ? "true" : undefined}\n  disabled={disabled && !focusableWhenDisabled}\n  type={type}\n  {...rest}\n  data-sw-button\n>\n  <slot />\n</button>\n\n<script>\n  import { createButton } from "@starwind-ui/runtime/button";\n  import {\n    registerAstroControllerLifecycle,\n    trackAstroController,\n  } from "../internal/controller-lifecycle";\n\n  const getInitCandidates = (event: Event | undefined, selector: string): HTMLElement[] => {\n    const initRoot =\n      event?.type === "starwind:init" && event instanceof CustomEvent\n        ? event.detail?.root\n        : undefined;\n    const scopedRoot: Document | DocumentFragment | Element = isQueryableRoot(initRoot)\n      ? initRoot\n      : document;\n    const candidates = Array.from(scopedRoot.querySelectorAll<HTMLElement>(selector));\n\n    if (scopedRoot instanceof Element && scopedRoot.matches(selector)) {\n      candidates.unshift(scopedRoot as HTMLElement);\n    }\n\n    return candidates;\n  };\n\n  const isQueryableRoot = (value: unknown): value is Document | DocumentFragment | Element =>\n    value instanceof Document || value instanceof DocumentFragment || value instanceof Element;\n\n  const setupButtons = (event?: Event) => {\n    getInitCandidates(event, "[data-sw-button]").forEach((button) =>\n      trackAstroController("ButtonRoot", button, createButton(button)),\n    );\n  };\n\n  registerAstroControllerLifecycle("ButtonRoot", setupButtons);\n</script>\n',
-          sourceHash: "sha256:8e4feedb43f8d9b459958fee36d91b565e252b3351a08fad546009fefe019e1f",
+          content: `---
+/**
+ * Vendored by the Starwind CLI.
+ * You own this file in your project.
+ */
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"button"> {
+  focusableWhenDisabled?: boolean;
+}
+
+const { type = "button", disabled = false, focusableWhenDisabled = false, ...rest } = Astro.props;
+---
+
+<button
+  data-focusable-when-disabled={focusableWhenDisabled ? "true" : undefined}
+  data-disabled={disabled ? "" : undefined}
+  aria-disabled={disabled && focusableWhenDisabled ? "true" : undefined}
+  disabled={disabled && !focusableWhenDisabled}
+  type={type}
+  {...rest}
+  data-sw-button
+>
+  <slot />
+</button>
+
+<script>
+  import { createButton } from "@starwind-ui/runtime/button";
+  import {
+    registerAstroControllerLifecycle,
+    trackAstroController,
+  } from "../internal/controller-lifecycle";
+
+  const getInitCandidates = (event: Event | undefined, selector: string): HTMLButtonElement[] => {
+    const initRoot =
+      event?.type === "starwind:init" && event instanceof CustomEvent
+        ? event.detail?.root
+        : undefined;
+    const scopedRoot: Document | DocumentFragment | Element = isQueryableRoot(initRoot)
+      ? initRoot
+      : document;
+    const candidates = Array.from(scopedRoot.querySelectorAll<HTMLButtonElement>(selector));
+
+    if (scopedRoot instanceof HTMLButtonElement && scopedRoot.matches(selector)) {
+      candidates.unshift(scopedRoot);
+    }
+
+    return candidates;
+  };
+
+  const isQueryableRoot = (value: unknown): value is Document | DocumentFragment | Element =>
+    value instanceof Document || value instanceof DocumentFragment || value instanceof Element;
+
+  const setupButtons = (event?: Event) => {
+    getInitCandidates(event, '[data-sw-button][data-focusable-when-disabled="true"]').forEach(
+      (button) =>
+        trackAstroController("ButtonRoot", button, createButton(button)).setDisabled(
+          button.hasAttribute("data-disabled"),
+        ),
+    );
+  };
+
+  registerAstroControllerLifecycle("ButtonRoot", setupButtons);
+</script>
+`,
+          sourceHash: "sha256:f3cc206f66110e8ff7f02953684ff83143a5bf5f9a34ab89c569048390f6b53f",
           sourcePath: "packages/astro/src/button/ButtonRoot.astro"
         },
         {
@@ -13278,12 +13500,18 @@ var primitive_vendoring_artifacts_default = {
           content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport ButtonRoot from "./ButtonRoot.astro";\n\nconst Button = {\n  Root: ButtonRoot,\n};\n\nexport { Button, ButtonRoot };\n\nexport default Button;\n',
           sourceHash: "sha256:bc7160d21174ec75768e367d49b12c166a1f02b78a7b703db252bf7c9cbcdb0e",
           sourcePath: "packages/astro/src/button/index.ts"
+        },
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
         }
       ],
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -13337,12 +13565,18 @@ var primitive_vendoring_artifacts_default = {
           content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport CarouselContainer from "./CarouselContainer.astro";\nimport CarouselItem from "./CarouselItem.astro";\nimport CarouselNext from "./CarouselNext.astro";\nimport CarouselPrevious from "./CarouselPrevious.astro";\nimport CarouselRoot from "./CarouselRoot.astro";\nimport CarouselViewport from "./CarouselViewport.astro";\n\nconst Carousel = {\n  Root: CarouselRoot,\n  Viewport: CarouselViewport,\n  Container: CarouselContainer,\n  Item: CarouselItem,\n  Previous: CarouselPrevious,\n  Next: CarouselNext,\n};\n\nexport {\n  Carousel,\n  CarouselContainer,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n  CarouselRoot,\n  CarouselViewport,\n};\n\nexport default Carousel;\n\nexport type { CarouselInstance, CarouselOptions } from "@starwind-ui/runtime";\nexport { createCarousel } from "@starwind-ui/runtime/carousel";\n',
           sourceHash: "sha256:afaa6695bd5fde0254c8a31b32a9c35575dce09dfc8aea7f0b6a56c2c20ac2d4",
           sourcePath: "packages/astro/src/carousel/index.ts"
+        },
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
         }
       ],
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -13355,6 +13589,12 @@ var primitive_vendoring_artifacts_default = {
       framework: "astro",
       version: "0.1.1",
       files: [
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
+        },
         {
           path: "src/components/starwind-primitives/toggle/ToggleRoot.astro",
           content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ninterface Props extends Omit<\n  HTMLAttributes<"button">,\n  "aria-pressed" | "defaultPressed" | "disabled" | "onChange" | "type" | "value"\n> {\n  defaultPressed?: boolean;\n  disabled?: boolean;\n  nativeButton?: boolean;\n  pressed?: boolean;\n  syncGroup?: string;\n  value?: string;\n}\n\nconst {\n  defaultPressed = false,\n  disabled = false,\n  nativeButton = true,\n  pressed,\n  syncGroup,\n  value,\n  ...rest\n} = Astro.props;\n\nconst Tag = nativeButton ? "button" : "span";\nconst initialPressed = pressed ?? defaultPressed;\nconst defaultPressedAttribute = pressed === undefined && defaultPressed ? "true" : undefined;\n---\n\n<Tag\n  {...rest}\n  data-sw-toggle\n  data-default-pressed={defaultPressedAttribute}\n  data-native={!nativeButton ? "false" : undefined}\n  data-sync-group={syncGroup}\n  data-value={value}\n  aria-disabled={!nativeButton && disabled ? "true" : undefined}\n  aria-pressed={initialPressed ? "true" : "false"}\n  data-disabled={disabled ? "" : undefined}\n  data-pressed={initialPressed ? "" : undefined}\n  data-state={initialPressed ? "on" : "off"}\n  data-unpressed={!initialPressed ? "" : undefined}\n  disabled={nativeButton && disabled ? true : undefined}\n  role={!nativeButton ? "button" : undefined}\n  tabindex={!nativeButton ? (disabled ? -1 : 0) : undefined}\n  type={nativeButton ? "button" : undefined}\n  value={nativeButton ? value : undefined}\n>\n  <slot />\n</Tag>\n\n<script>\n  import { createToggle } from "@starwind-ui/runtime/toggle";\n  import { registerAstroControllerLifecycle } from "../internal/controller-lifecycle";\n\n  const toggleInstances = new Set<ReturnType<typeof createToggle>>();\n\n  const getInitCandidates = (event: Event | undefined, selector: string): HTMLElement[] => {\n    const initRoot =\n      event?.type === "starwind:init" && event instanceof CustomEvent\n        ? event.detail?.root\n        : undefined;\n    const scopedRoot: Document | DocumentFragment | Element = isQueryableRoot(initRoot)\n      ? initRoot\n      : document;\n    const candidates = Array.from(scopedRoot.querySelectorAll<HTMLElement>(selector));\n\n    if (scopedRoot instanceof Element && scopedRoot.matches(selector)) {\n      candidates.unshift(scopedRoot as HTMLElement);\n    }\n\n    return candidates;\n  };\n\n  const isQueryableRoot = (value: unknown): value is Document | DocumentFragment | Element =>\n    value instanceof Document || value instanceof DocumentFragment || value instanceof Element;\n\n  const setupToggles = (event?: Event) => {\n    getInitCandidates(event, "[data-sw-toggle]").forEach((root) => {\n      if (root.hasAttribute("data-sw-theme-toggle")) return;\n\n      toggleInstances.add(createToggle(root));\n    });\n  };\n\n  const destroyToggles = () => {\n    toggleInstances.forEach((instance) => instance.destroy());\n    toggleInstances.clear();\n  };\n\n  registerAstroControllerLifecycle("ToggleRoot", setupToggles, destroyToggles);\n</script>\n',
@@ -13371,7 +13611,7 @@ var primitive_vendoring_artifacts_default = {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -13431,12 +13671,18 @@ var primitive_vendoring_artifacts_default = {
           content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport FieldControl from "./FieldControl.astro";\nimport FieldDescription from "./FieldDescription.astro";\nimport FieldError from "./FieldError.astro";\nimport FieldItem from "./FieldItem.astro";\nimport FieldLabel from "./FieldLabel.astro";\nimport FieldRoot from "./FieldRoot.astro";\nimport FieldValidity from "./FieldValidity.astro";\n\nconst Field = {\n  Control: FieldControl,\n  Description: FieldDescription,\n  Error: FieldError,\n  Item: FieldItem,\n  Label: FieldLabel,\n  Root: FieldRoot,\n  Validity: FieldValidity,\n};\n\nexport {\n  Field,\n  FieldControl,\n  FieldDescription,\n  FieldError,\n  FieldItem,\n  FieldLabel,\n  FieldRoot,\n  FieldValidity,\n};\n\nexport default Field;\n\nexport type { InputValue, InputValueChangeDetails } from "@starwind-ui/runtime";\n',
           sourceHash: "sha256:2526f8a5d6301a727d46b6babf9b38cab3469c005156aab70ff28a78a2b3dc08",
           sourcePath: "packages/astro/src/field/index.ts"
+        },
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
         }
       ],
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -13466,12 +13712,18 @@ var primitive_vendoring_artifacts_default = {
           content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport FieldsetLegend from "./FieldsetLegend.astro";\nimport FieldsetRoot from "./FieldsetRoot.astro";\n\nconst Fieldset = {\n  Legend: FieldsetLegend,\n  Root: FieldsetRoot,\n};\n\nexport { Fieldset, FieldsetLegend, FieldsetRoot };\n\nexport default Fieldset;\n',
           sourceHash: "sha256:2e73a115dd3e3bd7a607c72c227b313ca1629ed6c0122cd1a85118aa5d3f538a",
           sourcePath: "packages/astro/src/fieldset/index.ts"
+        },
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
         }
       ],
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -13501,12 +13753,18 @@ var primitive_vendoring_artifacts_default = {
           content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport FormErrorSummary from "./FormErrorSummary.astro";\nimport FormRoot from "./FormRoot.astro";\n\nconst Form = {\n  ErrorSummary: FormErrorSummary,\n  Root: FormRoot,\n};\n\nexport { Form, FormErrorSummary, FormRoot };\n\nexport default Form;\n\nexport type {\n  FormExternalErrors,\n  FormSchemaResult,\n  FormValidationTiming,\n  FormValues,\n} from "@starwind-ui/runtime";\nexport {\n  createForm,\n  createFormSchemaValidator,\n  validateFormSchema,\n} from "@starwind-ui/runtime/form";\n',
           sourceHash: "sha256:8d7051bc5a476e4fcb26fae9a61290f2c06fec40e344bd7bcd3c17755e10717e",
           sourcePath: "packages/astro/src/form/index.ts"
+        },
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
         }
       ],
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -13530,12 +13788,18 @@ var primitive_vendoring_artifacts_default = {
           content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport InputRoot from "./InputRoot.astro";\n\nconst Input = {\n  Root: InputRoot,\n};\n\nexport { Input, InputRoot };\n\nexport default Input;\n\nexport type { InputValue, InputValueChangeDetails } from "@starwind-ui/runtime";\n',
           sourceHash: "sha256:88484b8c131f4138737eef5081ac9dcfe532860ef9f8a584147c6ecdc1d36c48",
           sourcePath: "packages/astro/src/input/index.ts"
+        },
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
         }
       ],
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -13548,6 +13812,12 @@ var primitive_vendoring_artifacts_default = {
       framework: "astro",
       version: "0.1.0",
       files: [
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
+        },
         {
           path: "src/components/starwind-primitives/switch/SwitchRoot.astro",
           content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ninterface Props extends Omit<HTMLAttributes<"span">, "aria-checked" | "onChange"> {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  disabled?: boolean;\n  form?: string;\n  id?: string;\n  name?: string;\n  nativeButton?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  uncheckedValue?: string;\n  value?: string;\n}\n\nconst {\n  checked,\n  defaultChecked = false,\n  disabled = false,\n  form,\n  id,\n  name,\n  nativeButton = false,\n  readOnly = false,\n  required = false,\n  uncheckedValue,\n  value,\n  ...rest\n} = Astro.props;\n\nconst Tag = nativeButton ? "button" : "span";\nconst initialChecked = checked ?? defaultChecked;\nconst inputId = id && nativeButton ? `${id}-input` : id;\nconst rootId = nativeButton ? id : undefined;\n---\n\n<Tag\n  {...rest}\n  data-sw-switch\n  data-default-checked={initialChecked ? "true" : undefined}\n  data-form={form}\n  data-id={id}\n  data-name={name}\n  data-unchecked-value={uncheckedValue}\n  data-value={value}\n  aria-checked={initialChecked ? "true" : "false"}\n  aria-readonly={readOnly ? "true" : undefined}\n  aria-required={required ? "true" : undefined}\n  data-checked={initialChecked ? "" : undefined}\n  data-disabled={disabled ? "" : undefined}\n  data-filled={initialChecked ? "" : undefined}\n  data-readonly={readOnly ? "" : undefined}\n  data-required={required ? "" : undefined}\n  data-unchecked={!initialChecked ? "" : undefined}\n  disabled={nativeButton && disabled ? true : undefined}\n  id={rootId}\n  role="switch"\n  tabindex={disabled ? -1 : 0}\n  type={nativeButton ? "button" : undefined}\n>\n  <slot />\n</Tag>\n<input data-sw-switch-input id={inputId} hidden />\n\n<script>\n  import { createSwitch } from "@starwind-ui/runtime/switch";\n  import {\n    registerAstroControllerLifecycle,\n    trackAstroController,\n  } from "../internal/controller-lifecycle";\n\n  const getInitCandidates = (event: Event | undefined, selector: string): HTMLElement[] => {\n    const initRoot =\n      event?.type === "starwind:init" && event instanceof CustomEvent\n        ? event.detail?.root\n        : undefined;\n    const scopedRoot: Document | DocumentFragment | Element = isQueryableRoot(initRoot)\n      ? initRoot\n      : document;\n    const candidates = Array.from(scopedRoot.querySelectorAll<HTMLElement>(selector));\n\n    if (scopedRoot instanceof Element && scopedRoot.matches(selector)) {\n      candidates.unshift(scopedRoot as HTMLElement);\n    }\n\n    return candidates;\n  };\n\n  const isQueryableRoot = (value: unknown): value is Document | DocumentFragment | Element =>\n    value instanceof Document || value instanceof DocumentFragment || value instanceof Element;\n\n  const setupSwitches = (event?: Event) => {\n    getInitCandidates(event, "[data-sw-switch]").forEach((root) =>\n      trackAstroController("SwitchRoot", root, createSwitch(root)),\n    );\n  };\n\n  registerAstroControllerLifecycle("SwitchRoot", setupSwitches);\n</script>\n',
@@ -13570,7 +13840,7 @@ var primitive_vendoring_artifacts_default = {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -13600,12 +13870,18 @@ var primitive_vendoring_artifacts_default = {
           content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport CheckboxIndicator from "./CheckboxIndicator.astro";\nimport CheckboxRoot from "./CheckboxRoot.astro";\n\nconst Checkbox = {\n  Root: CheckboxRoot,\n  Indicator: CheckboxIndicator,\n};\n\nexport { Checkbox, CheckboxIndicator, CheckboxRoot };\n\nexport default Checkbox;\n\nexport type { CheckboxCheckedChangeDetails } from "@starwind-ui/runtime";\n',
           sourceHash: "sha256:1d0d754e19e791004aeb9530d7af51444b818313b80c71c8ef4da8144b06e50f",
           sourcePath: "packages/astro/src/checkbox/index.ts"
+        },
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
         }
       ],
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -13618,6 +13894,12 @@ var primitive_vendoring_artifacts_default = {
       framework: "astro",
       version: "0.1.0",
       files: [
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
+        },
         {
           path: "src/components/starwind-primitives/radio/RadioIndicator.astro",
           content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = HTMLAttributes<"span"> & {\n  keepMounted?: boolean;\n};\n\nconst { keepMounted = false, ...rest } = Astro.props;\n---\n\n<span\n  data-sw-radio-indicator\n  data-keep-mounted={keepMounted ? "true" : undefined}\n  data-unchecked\n  hidden={!keepMounted}\n  {...rest}\n>\n  <slot />\n</span>\n',
@@ -13640,7 +13922,7 @@ var primitive_vendoring_artifacts_default = {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -13653,6 +13935,12 @@ var primitive_vendoring_artifacts_default = {
       framework: "astro",
       version: "0.1.0",
       files: [
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
+        },
         {
           path: "src/components/starwind-primitives/slider/SliderControl.astro",
           content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = HTMLAttributes<"div">;\n\nconst { ...rest } = Astro.props;\n---\n\n<div data-sw-slider-control {...rest}>\n  <slot />\n</div>\n',
@@ -13699,7 +13987,7 @@ var primitive_vendoring_artifacts_default = {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -13735,12 +14023,18 @@ var primitive_vendoring_artifacts_default = {
           content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport CollapsiblePanel from "./CollapsiblePanel.astro";\nimport CollapsibleRoot from "./CollapsibleRoot.astro";\nimport CollapsibleTrigger from "./CollapsibleTrigger.astro";\n\nconst Collapsible = {\n  Root: CollapsibleRoot,\n  Trigger: CollapsibleTrigger,\n  Panel: CollapsiblePanel,\n};\n\nexport { Collapsible, CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger };\n\nexport default Collapsible;\n\nexport type { CollapsibleOpenChangeDetails } from "@starwind-ui/runtime";\n',
           sourceHash: "sha256:8337084a35e7a4a5b7c8d8bae8eaf0f68b1ce1547a15700a0c51ea2c904aff55",
           sourcePath: "packages/astro/src/collapsible/index.ts"
+        },
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
         }
       ],
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -13753,6 +14047,12 @@ var primitive_vendoring_artifacts_default = {
       framework: "astro",
       version: "0.1.0",
       files: [
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
+        },
         {
           path: "src/components/starwind-primitives/toggle-group/ToggleGroupRoot.astro",
           content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = Omit<HTMLAttributes<"div">, "defaultValue" | "onChange"> & {\n  defaultValue?: string[];\n  disabled?: boolean;\n  loopFocus?: boolean;\n  multiple?: boolean;\n  orientation?: "horizontal" | "vertical";\n};\n\nconst {\n  defaultValue,\n  disabled = false,\n  loopFocus = true,\n  multiple = false,\n  orientation = "horizontal",\n  ...rest\n} = Astro.props;\nconst defaultValueAttribute = defaultValue ? JSON.stringify(defaultValue) : undefined;\nconst valueAttribute = JSON.stringify(defaultValue ?? []);\n---\n\n<div\n  data-sw-toggle-group\n  data-default-value={defaultValueAttribute}\n  data-disabled={disabled ? "" : undefined}\n  data-loop-focus={!loopFocus ? "false" : undefined}\n  data-multiple={multiple ? "" : undefined}\n  data-orientation={orientation}\n  data-value={valueAttribute}\n  role="group"\n  {...rest}\n>\n  <slot />\n</div>\n\n<script>\n  import { createToggleGroup } from "@starwind-ui/runtime/toggle-group";\n  import {\n    registerAstroControllerLifecycle,\n    trackAstroController,\n  } from "../internal/controller-lifecycle";\n\n  const getInitCandidates = (event: Event | undefined, selector: string): HTMLElement[] => {\n    const initRoot =\n      event?.type === "starwind:init" && event instanceof CustomEvent\n        ? event.detail?.root\n        : undefined;\n    const scopedRoot: Document | DocumentFragment | Element = isQueryableRoot(initRoot)\n      ? initRoot\n      : document;\n    const candidates = Array.from(scopedRoot.querySelectorAll<HTMLElement>(selector));\n\n    if (scopedRoot instanceof Element && scopedRoot.matches(selector)) {\n      candidates.unshift(scopedRoot as HTMLElement);\n    }\n\n    return candidates;\n  };\n\n  const isQueryableRoot = (value: unknown): value is Document | DocumentFragment | Element =>\n    value instanceof Document || value instanceof DocumentFragment || value instanceof Element;\n\n  const setupToggleGroups = (event?: Event) => {\n    getInitCandidates(event, "[data-sw-toggle-group]").forEach((root) =>\n      trackAstroController("ToggleGroupRoot", root, createToggleGroup(root)),\n    );\n  };\n\n  registerAstroControllerLifecycle("ToggleGroupRoot", setupToggleGroups);\n</script>\n',
@@ -13769,7 +14069,7 @@ var primitive_vendoring_artifacts_default = {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -13782,6 +14082,12 @@ var primitive_vendoring_artifacts_default = {
       framework: "astro",
       version: "0.1.0",
       files: [
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
+        },
         {
           path: "src/components/starwind-primitives/radio-group/RadioGroupRoot.astro",
           content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = Omit<HTMLAttributes<"div">, "defaultValue"> & {\n  defaultValue?: string;\n  disabled?: boolean;\n  form?: string;\n  name?: string;\n  orientation?: "horizontal" | "vertical";\n  readOnly?: boolean;\n  required?: boolean;\n  value?: string;\n};\n\nconst {\n  defaultValue,\n  disabled = false,\n  form,\n  name,\n  orientation = "vertical",\n  readOnly = false,\n  required = false,\n  value,\n  ...rest\n} = Astro.props;\n\nconst renderedValue = value ?? defaultValue;\n---\n\n<div\n  data-sw-radio-group\n  data-default-value={defaultValue}\n  data-form={form}\n  data-name={name}\n  data-orientation={orientation}\n  data-value={renderedValue}\n  aria-disabled={disabled ? "true" : undefined}\n  aria-orientation={orientation}\n  aria-readonly={readOnly ? "true" : undefined}\n  aria-required={required ? "true" : undefined}\n  data-disabled={disabled ? "" : undefined}\n  data-readonly={readOnly ? "" : undefined}\n  data-required={required ? "" : undefined}\n  role="radiogroup"\n  {...rest}\n>\n  <slot />\n</div>\n\n<script>\n  import { createRadioGroup } from "@starwind-ui/runtime/radio-group";\n  import {\n    registerAstroControllerLifecycle,\n    trackAstroController,\n  } from "../internal/controller-lifecycle";\n\n  const getInitCandidates = (event: Event | undefined, selector: string): HTMLElement[] => {\n    const initRoot =\n      event?.type === "starwind:init" && event instanceof CustomEvent\n        ? event.detail?.root\n        : undefined;\n    const scopedRoot: Document | DocumentFragment | Element = isQueryableRoot(initRoot)\n      ? initRoot\n      : document;\n    const candidates = Array.from(scopedRoot.querySelectorAll<HTMLElement>(selector));\n\n    if (scopedRoot instanceof Element && scopedRoot.matches(selector)) {\n      candidates.unshift(scopedRoot as HTMLElement);\n    }\n\n    return candidates;\n  };\n\n  const isQueryableRoot = (value: unknown): value is Document | DocumentFragment | Element =>\n    value instanceof Document || value instanceof DocumentFragment || value instanceof Element;\n\n  const setupRadioGroups = (event?: Event) => {\n    getInitCandidates(event, "[data-sw-radio-group]").forEach((root) =>\n      trackAstroController("RadioGroupRoot", root, createRadioGroup(root)),\n    );\n  };\n\n  registerAstroControllerLifecycle("RadioGroupRoot", setupRadioGroups);\n</script>\n',
@@ -13798,7 +14104,7 @@ var primitive_vendoring_artifacts_default = {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -13822,12 +14128,18 @@ var primitive_vendoring_artifacts_default = {
           content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport CheckboxGroupRoot from "./CheckboxGroupRoot.astro";\n\nconst CheckboxGroup = {\n  Root: CheckboxGroupRoot,\n};\n\nexport { CheckboxGroup, CheckboxGroupRoot };\n\nexport default CheckboxGroup;\n\nexport type { CheckboxGroupValue, CheckboxGroupValueChangeDetails } from "@starwind-ui/runtime";\n',
           sourceHash: "sha256:6bcc86c29237de480a87ddca3931e21dd70fb544e2a3748a7fa513f812d5b9fc",
           sourcePath: "packages/astro/src/checkbox-group/index.ts"
+        },
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
         }
       ],
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -13840,6 +14152,12 @@ var primitive_vendoring_artifacts_default = {
       framework: "astro",
       version: "0.1.0",
       files: [
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
+        },
         {
           path: "src/components/starwind-primitives/tabs/TabsIndicator.astro",
           content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = HTMLAttributes<"span">;\n\nconst { ...rest } = Astro.props;\n---\n\n<span data-sw-tabs-indicator {...rest}>\n  <slot />\n</span>\n',
@@ -13880,7 +14198,7 @@ var primitive_vendoring_artifacts_default = {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -13891,7 +14209,7 @@ var primitive_vendoring_artifacts_default = {
     {
       component: "accordion",
       framework: "astro",
-      version: "0.1.0",
+      version: "0.1.1",
       files: [
         {
           path: "src/components/starwind-primitives/accordion/AccordionHeader.astro",
@@ -13913,8 +14231,8 @@ var primitive_vendoring_artifacts_default = {
         },
         {
           path: "src/components/starwind-primitives/accordion/AccordionRoot.astro",
-          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = HTMLAttributes<"div"> & {\n  type?: "single" | "multiple";\n  defaultValue?: string | string[];\n  collapsible?: boolean;\n};\n\nconst { type = "single", defaultValue, collapsible = false, ...rest } = Astro.props;\n\nconst defaultValueAttribute = Array.isArray(defaultValue)\n  ? JSON.stringify(defaultValue)\n  : defaultValue;\n---\n\n<div\n  data-sw-accordion\n  data-type={type}\n  data-default-value={defaultValueAttribute}\n  data-collapsible={collapsible ? "true" : undefined}\n  data-state="closed"\n  {...rest}\n>\n  <slot />\n</div>\n\n<script>\n  import { createAccordion } from "@starwind-ui/runtime/accordion";\n  import {\n    registerAstroControllerLifecycle,\n    trackAstroController,\n  } from "../internal/controller-lifecycle";\n\n  const getInitCandidates = (event: Event | undefined, selector: string): HTMLElement[] => {\n    const initRoot =\n      event?.type === "starwind:init" && event instanceof CustomEvent\n        ? event.detail?.root\n        : undefined;\n    const scopedRoot: Document | DocumentFragment | Element = isQueryableRoot(initRoot)\n      ? initRoot\n      : document;\n    const candidates = Array.from(scopedRoot.querySelectorAll<HTMLElement>(selector));\n\n    if (scopedRoot instanceof Element && scopedRoot.matches(selector)) {\n      candidates.unshift(scopedRoot as HTMLElement);\n    }\n\n    return candidates;\n  };\n\n  const isQueryableRoot = (value: unknown): value is Document | DocumentFragment | Element =>\n    value instanceof Document || value instanceof DocumentFragment || value instanceof Element;\n\n  const setupAccordions = (event?: Event) => {\n    getInitCandidates(event, "[data-sw-accordion]").forEach((root) =>\n      trackAstroController("AccordionRoot", root, createAccordion(root)),\n    );\n  };\n\n  registerAstroControllerLifecycle("AccordionRoot", setupAccordions);\n</script>\n',
-          sourceHash: "sha256:c93ebcf33f9bbfaa157d9b579dea23e3022fecdeedd3990d554c55f5442ce2f2",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = HTMLAttributes<"div"> & {\n  type?: "single" | "multiple";\n  defaultValue?: string | string[];\n  collapsible?: boolean;\n};\n\nconst { type = "single", defaultValue, collapsible = true, ...rest } = Astro.props;\n\nconst defaultValueAttribute = Array.isArray(defaultValue)\n  ? JSON.stringify(defaultValue)\n  : defaultValue;\n---\n\n<div\n  data-sw-accordion\n  data-type={type}\n  data-default-value={defaultValueAttribute}\n  data-collapsible={String(collapsible)}\n  data-state="closed"\n  {...rest}\n>\n  <slot />\n</div>\n\n<script>\n  import { createAccordion } from "@starwind-ui/runtime/accordion";\n  import {\n    registerAstroControllerLifecycle,\n    trackAstroController,\n  } from "../internal/controller-lifecycle";\n\n  const getInitCandidates = (event: Event | undefined, selector: string): HTMLElement[] => {\n    const initRoot =\n      event?.type === "starwind:init" && event instanceof CustomEvent\n        ? event.detail?.root\n        : undefined;\n    const scopedRoot: Document | DocumentFragment | Element = isQueryableRoot(initRoot)\n      ? initRoot\n      : document;\n    const candidates = Array.from(scopedRoot.querySelectorAll<HTMLElement>(selector));\n\n    if (scopedRoot instanceof Element && scopedRoot.matches(selector)) {\n      candidates.unshift(scopedRoot as HTMLElement);\n    }\n\n    return candidates;\n  };\n\n  const isQueryableRoot = (value: unknown): value is Document | DocumentFragment | Element =>\n    value instanceof Document || value instanceof DocumentFragment || value instanceof Element;\n\n  const setupAccordions = (event?: Event) => {\n    getInitCandidates(event, "[data-sw-accordion]").forEach((root) =>\n      trackAstroController("AccordionRoot", root, createAccordion(root)),\n    );\n  };\n\n  registerAstroControllerLifecycle("AccordionRoot", setupAccordions);\n</script>\n',
+          sourceHash: "sha256:614dacad3ff8e0463511e08a29e91593232f319741481c3cea2e43b5fd8e0c7f",
           sourcePath: "packages/astro/src/accordion/AccordionRoot.astro"
         },
         {
@@ -13928,12 +14246,18 @@ var primitive_vendoring_artifacts_default = {
           content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport AccordionHeader from "./AccordionHeader.astro";\nimport AccordionItem from "./AccordionItem.astro";\nimport AccordionPanel from "./AccordionPanel.astro";\nimport AccordionRoot from "./AccordionRoot.astro";\nimport AccordionTrigger from "./AccordionTrigger.astro";\n\nconst Accordion = {\n  Root: AccordionRoot,\n  Item: AccordionItem,\n  Header: AccordionHeader,\n  Trigger: AccordionTrigger,\n  Panel: AccordionPanel,\n};\n\nexport {\n  Accordion,\n  AccordionHeader,\n  AccordionItem,\n  AccordionPanel,\n  AccordionRoot,\n  AccordionTrigger,\n};\n\nexport default Accordion;\n\nexport type { AccordionValue, AccordionValueChangeDetails } from "@starwind-ui/runtime";\n',
           sourceHash: "sha256:67db87ed4f9d962b4e872e159591905770066932f0d3e0c11c17ca17cc9a7aa1",
           sourcePath: "packages/astro/src/accordion/index.ts"
+        },
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
         }
       ],
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -14017,12 +14341,18 @@ if (!src && !image) {
           content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport AvatarFallback from "./AvatarFallback.astro";\nimport AvatarImage from "./AvatarImage.astro";\nimport AvatarRoot from "./AvatarRoot.astro";\n\nconst Avatar = {\n  Root: AvatarRoot,\n  Image: AvatarImage,\n  Fallback: AvatarFallback,\n};\n\nexport { Avatar, AvatarFallback, AvatarImage, AvatarRoot };\n\nexport default Avatar;\n\nexport type {\n  AvatarImageLoadingStatus,\n  AvatarLoadingStatusChangeDetails,\n} from "@starwind-ui/runtime";\n',
           sourceHash: "sha256:8dcb08224b0de18309d76b157c1bcba8ce21d61284400cbcbc43289938646bbb",
           sourcePath: "packages/astro/src/avatar/index.ts"
+        },
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
         }
       ],
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -14035,6 +14365,12 @@ if (!src && !image) {
       framework: "astro",
       version: "0.1.0",
       files: [
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
+        },
         {
           path: "src/components/starwind-primitives/progress/ProgressIndicator.astro",
           content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = HTMLAttributes<"div">;\n\nconst { ...rest } = Astro.props;\n---\n\n<div data-sw-progress-indicator {...rest}>\n  <slot />\n</div>\n',
@@ -14075,7 +14411,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -14088,6 +14424,12 @@ if (!src && !image) {
       framework: "astro",
       version: "0.1.0",
       files: [
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
+        },
         {
           path: "src/components/starwind-primitives/scroll-area/ScrollAreaContent.astro",
           content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = HTMLAttributes<"div">;\n\nconst { ...rest } = Astro.props;\n---\n\n<div data-sw-scroll-area-content role="presentation" {...rest}>\n  <slot />\n</div>\n',
@@ -14134,7 +14476,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -14176,12 +14518,18 @@ if (!src && !image) {
           content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport InputOtpGroup from "./InputOtpGroup.astro";\nimport InputOtpRoot from "./InputOtpRoot.astro";\nimport InputOtpSeparator from "./InputOtpSeparator.astro";\nimport InputOtpSlot from "./InputOtpSlot.astro";\n\nconst InputOtp = {\n  Root: InputOtpRoot,\n  Group: InputOtpGroup,\n  Separator: InputOtpSeparator,\n  Slot: InputOtpSlot,\n};\n\nexport { InputOtp, InputOtpGroup, InputOtpRoot, InputOtpSeparator, InputOtpSlot };\n\nexport default InputOtp;\n\nexport type { InputOtpValueChangeDetails } from "@starwind-ui/runtime";\n',
           sourceHash: "sha256:c9f96f451bfb14ccbd2ac3dfeb050185a43eaf0d7cef5717e12a87feb5a9d719",
           sourcePath: "packages/astro/src/input-otp/index.ts"
+        },
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
         }
       ],
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -14194,6 +14542,12 @@ if (!src && !image) {
       framework: "astro",
       version: "0.1.0",
       files: [
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
+        },
         {
           path: "src/components/starwind-primitives/tooltip/TooltipArrow.astro",
           content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = HTMLAttributes<"div">;\n\nconst { ...rest } = Astro.props;\n---\n\n<div data-sw-tooltip-arrow data-state="closed" {...rest}>\n  <slot />\n</div>\n',
@@ -14240,7 +14594,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -14253,6 +14607,12 @@ if (!src && !image) {
       framework: "astro",
       version: "0.1.1",
       files: [
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
+        },
         {
           path: "src/components/starwind-primitives/popover/PopoverArrow.astro",
           content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = HTMLAttributes<"div">;\n\nconst { ...rest } = Astro.props;\n---\n\n<div data-sw-popover-arrow {...rest}>\n  <slot />\n</div>\n',
@@ -14329,7 +14689,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -14342,6 +14702,12 @@ if (!src && !image) {
       framework: "astro",
       version: "0.1.0",
       files: [
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
+        },
         {
           path: "src/components/starwind-primitives/preview-card/PreviewCardArrow.astro",
           content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = HTMLAttributes<"div">;\n\nconst { ...rest } = Astro.props;\n---\n\n<div data-sw-preview-card-arrow data-state="closed" {...rest}>\n  <slot />\n</div>\n',
@@ -14400,7 +14766,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -14460,12 +14826,18 @@ if (!src && !image) {
           content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport DialogBackdrop from "./DialogBackdrop.astro";\nimport DialogClose from "./DialogClose.astro";\nimport DialogDescription from "./DialogDescription.astro";\nimport DialogPopup from "./DialogPopup.astro";\nimport DialogRoot from "./DialogRoot.astro";\nimport DialogTitle from "./DialogTitle.astro";\nimport DialogTrigger from "./DialogTrigger.astro";\n\nconst Dialog = {\n  Root: DialogRoot,\n  Trigger: DialogTrigger,\n  Backdrop: DialogBackdrop,\n  Popup: DialogPopup,\n  Title: DialogTitle,\n  Description: DialogDescription,\n  Close: DialogClose,\n};\n\nexport {\n  Dialog,\n  DialogBackdrop,\n  DialogClose,\n  DialogDescription,\n  DialogPopup,\n  DialogRoot,\n  DialogTitle,\n  DialogTrigger,\n};\n\nexport default Dialog;\n\nexport type { DialogCloseCompleteDetails, DialogOpenChangeDetails } from "@starwind-ui/runtime";\n',
           sourceHash: "sha256:5a60646e7a79c48f9f3202a637a5f1acd04e69246575529ce47afeef2e38b674",
           sourcePath: "packages/astro/src/dialog/index.ts"
+        },
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
         }
       ],
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -14537,12 +14909,18 @@ if (!src && !image) {
           content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport AlertDialogBackdrop from "./AlertDialogBackdrop.astro";\nimport AlertDialogClose from "./AlertDialogClose.astro";\nimport AlertDialogDescription from "./AlertDialogDescription.astro";\nimport AlertDialogPopup from "./AlertDialogPopup.astro";\nimport AlertDialogPortal from "./AlertDialogPortal.astro";\nimport AlertDialogRoot from "./AlertDialogRoot.astro";\nimport AlertDialogTitle from "./AlertDialogTitle.astro";\nimport AlertDialogTrigger from "./AlertDialogTrigger.astro";\nimport AlertDialogViewport from "./AlertDialogViewport.astro";\n\nconst AlertDialog = {\n  Root: AlertDialogRoot,\n  Trigger: AlertDialogTrigger,\n  Portal: AlertDialogPortal,\n  Backdrop: AlertDialogBackdrop,\n  Viewport: AlertDialogViewport,\n  Popup: AlertDialogPopup,\n  Title: AlertDialogTitle,\n  Description: AlertDialogDescription,\n  Close: AlertDialogClose,\n};\n\nexport {\n  AlertDialog,\n  AlertDialogBackdrop,\n  AlertDialogClose,\n  AlertDialogDescription,\n  AlertDialogPopup,\n  AlertDialogPortal,\n  AlertDialogRoot,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n  AlertDialogViewport,\n};\n\nexport default AlertDialog;\n\nexport type {\n  AlertDialogCloseCompleteDetails,\n  AlertDialogOpenChangeDetails,\n} from "@starwind-ui/runtime";\n',
           sourceHash: "sha256:101b8d725dc28883ea06f4668b81cbffa11ee7c2edba98ea9c3002b70461aa0c",
           sourcePath: "packages/astro/src/alert-dialog/index.ts"
+        },
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
         }
       ],
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -14614,12 +14992,18 @@ if (!src && !image) {
           content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport DrawerBackdrop from "./DrawerBackdrop.astro";\nimport DrawerClose from "./DrawerClose.astro";\nimport DrawerDescription from "./DrawerDescription.astro";\nimport DrawerPopup from "./DrawerPopup.astro";\nimport DrawerPortal from "./DrawerPortal.astro";\nimport DrawerRoot from "./DrawerRoot.astro";\nimport DrawerTitle from "./DrawerTitle.astro";\nimport DrawerTrigger from "./DrawerTrigger.astro";\nimport DrawerViewport from "./DrawerViewport.astro";\n\nconst Drawer = {\n  Root: DrawerRoot,\n  Trigger: DrawerTrigger,\n  Portal: DrawerPortal,\n  Backdrop: DrawerBackdrop,\n  Viewport: DrawerViewport,\n  Popup: DrawerPopup,\n  Title: DrawerTitle,\n  Description: DrawerDescription,\n  Close: DrawerClose,\n};\n\nexport {\n  Drawer,\n  DrawerBackdrop,\n  DrawerClose,\n  DrawerDescription,\n  DrawerPopup,\n  DrawerPortal,\n  DrawerRoot,\n  DrawerTitle,\n  DrawerTrigger,\n  DrawerViewport,\n};\n\nexport default Drawer;\n\nexport type { DrawerCloseCompleteDetails, DrawerOpenChangeDetails } from "@starwind-ui/runtime";\n',
           sourceHash: "sha256:64ca75adbaf283938be9ed5ebd472e4919f66ce0a6e5c9e5f0436ca633b18536",
           sourcePath: "packages/astro/src/drawer/index.ts"
+        },
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
         }
       ],
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -14667,12 +15051,18 @@ if (!src && !image) {
           content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport DropzoneFilesList from "./DropzoneFilesList.astro";\nimport DropzoneInput from "./DropzoneInput.astro";\nimport DropzoneLoadingIndicator from "./DropzoneLoadingIndicator.astro";\nimport DropzoneRoot from "./DropzoneRoot.astro";\nimport DropzoneUploadIndicator from "./DropzoneUploadIndicator.astro";\n\nconst Dropzone = {\n  Root: DropzoneRoot,\n  Input: DropzoneInput,\n  UploadIndicator: DropzoneUploadIndicator,\n  LoadingIndicator: DropzoneLoadingIndicator,\n  FilesList: DropzoneFilesList,\n};\n\nexport {\n  Dropzone,\n  DropzoneFilesList,\n  DropzoneInput,\n  DropzoneLoadingIndicator,\n  DropzoneRoot,\n  DropzoneUploadIndicator,\n};\n\nexport default Dropzone;\n\nexport type { DropzoneFilesChangeDetails } from "@starwind-ui/runtime";\n',
           sourceHash: "sha256:4b71b12551996c34612324b85deb989dd30e1d3278e9c6acef8e7e0fa78dbe39",
           sourcePath: "packages/astro/src/dropzone/index.ts"
+        },
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
         }
       ],
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -14685,6 +15075,12 @@ if (!src && !image) {
       framework: "astro",
       version: "0.1.1",
       files: [
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
+        },
         {
           path: "src/components/starwind-primitives/menu/MenuCheckboxItem.astro",
           content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = Omit<HTMLAttributes<"div">, "aria-checked" | "role"> & {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  closeOnClick?: boolean;\n  disabled?: boolean;\n};\n\nconst {\n  checked,\n  defaultChecked = false,\n  closeOnClick = false,\n  disabled = false,\n  ...rest\n} = Astro.props;\n\nconst initialChecked = checked ?? defaultChecked;\n---\n\n<div\n  data-sw-menu-checkbox-item\n  data-default-checked={initialChecked ? "true" : undefined}\n  data-close-on-click={closeOnClick ? "true" : undefined}\n  role="menuitemcheckbox"\n  aria-checked={initialChecked ? "true" : "false"}\n  aria-disabled={disabled ? "true" : undefined}\n  data-checked={initialChecked ? "" : undefined}\n  data-disabled={disabled ? "" : undefined}\n  data-unchecked={!initialChecked ? "" : undefined}\n  tabindex="0"\n  {...rest}\n>\n  <slot />\n</div>\n',
@@ -14803,7 +15199,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -14816,6 +15212,12 @@ if (!src && !image) {
       framework: "astro",
       version: "0.1.0",
       files: [
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
+        },
         {
           path: "src/components/starwind-primitives/navigation-menu/NavigationMenuArrow.astro",
           content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = HTMLAttributes<"div">;\n\nconst { ...rest } = Astro.props;\n---\n\n<div data-sw-nav-menu-arrow aria-hidden="true" {...rest}>\n  <slot />\n</div>\n',
@@ -14898,7 +15300,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -14928,12 +15330,132 @@ if (!src && !image) {
           content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport {\n  MenuCheckboxItem as ContextMenuCheckboxItem,\n  MenuCheckboxItemIndicator as ContextMenuCheckboxItemIndicator,\n  MenuGroup as ContextMenuGroup,\n  MenuItem as ContextMenuItem,\n  MenuLabel as ContextMenuLabel,\n  MenuLinkItem as ContextMenuLinkItem,\n  MenuPopup as ContextMenuPopup,\n  MenuPortal as ContextMenuPortal,\n  MenuPositioner as ContextMenuPositioner,\n  MenuRadioGroup as ContextMenuRadioGroup,\n  MenuRadioItem as ContextMenuRadioItem,\n  MenuRadioItemIndicator as ContextMenuRadioItemIndicator,\n  MenuSeparator as ContextMenuSeparator,\n  MenuShortcut as ContextMenuShortcut,\n  MenuSubmenuRoot as ContextMenuSubmenuRoot,\n  MenuSubmenuTrigger as ContextMenuSubmenuTrigger,\n} from "../menu";\nimport ContextMenuRoot from "./ContextMenuRoot.astro";\nimport ContextMenuTrigger from "./ContextMenuTrigger.astro";\n\nconst ContextMenu = {\n  Root: ContextMenuRoot,\n  Trigger: ContextMenuTrigger,\n  Portal: ContextMenuPortal,\n  Positioner: ContextMenuPositioner,\n  Popup: ContextMenuPopup,\n  Item: ContextMenuItem,\n  LinkItem: ContextMenuLinkItem,\n  CheckboxItem: ContextMenuCheckboxItem,\n  CheckboxItemIndicator: ContextMenuCheckboxItemIndicator,\n  RadioGroup: ContextMenuRadioGroup,\n  RadioItem: ContextMenuRadioItem,\n  RadioItemIndicator: ContextMenuRadioItemIndicator,\n  Group: ContextMenuGroup,\n  Label: ContextMenuLabel,\n  Separator: ContextMenuSeparator,\n  Shortcut: ContextMenuShortcut,\n  SubmenuRoot: ContextMenuSubmenuRoot,\n  SubmenuTrigger: ContextMenuSubmenuTrigger,\n};\n\nexport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuCheckboxItemIndicator,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuLinkItem,\n  ContextMenuPopup,\n  ContextMenuPortal,\n  ContextMenuPositioner,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuRadioItemIndicator,\n  ContextMenuRoot,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSubmenuRoot,\n  ContextMenuSubmenuTrigger,\n  ContextMenuTrigger,\n};\n\nexport default ContextMenu;\n\nexport type {\n  ContextMenuCloseCompleteDetails,\n  ContextMenuOpenChangeDetails,\n  MenuCheckedChangeDetails,\n  MenuValueChangeDetails,\n} from "@starwind-ui/runtime";\n',
           sourceHash: "sha256:7c52c85ac79ef648e1c48d2f8def0a266175a1deff39e09fadfc429dd043d475",
           sourcePath: "packages/astro/src/context-menu/index.ts"
+        },
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
+        },
+        {
+          path: "src/components/starwind-primitives/menu/MenuCheckboxItem.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = Omit<HTMLAttributes<"div">, "aria-checked" | "role"> & {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  closeOnClick?: boolean;\n  disabled?: boolean;\n};\n\nconst {\n  checked,\n  defaultChecked = false,\n  closeOnClick = false,\n  disabled = false,\n  ...rest\n} = Astro.props;\n\nconst initialChecked = checked ?? defaultChecked;\n---\n\n<div\n  data-sw-menu-checkbox-item\n  data-default-checked={initialChecked ? "true" : undefined}\n  data-close-on-click={closeOnClick ? "true" : undefined}\n  role="menuitemcheckbox"\n  aria-checked={initialChecked ? "true" : "false"}\n  aria-disabled={disabled ? "true" : undefined}\n  data-checked={initialChecked ? "" : undefined}\n  data-disabled={disabled ? "" : undefined}\n  data-unchecked={!initialChecked ? "" : undefined}\n  tabindex="0"\n  {...rest}\n>\n  <slot />\n</div>\n',
+          sourceHash: "sha256:30ca05dd5a90dadeb2d685d9fc335a169279e1f328498c61eb4c1f61dcd76b93",
+          sourcePath: "packages/astro/src/menu/MenuCheckboxItem.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/menu/MenuCheckboxItemIndicator.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = HTMLAttributes<"span">;\n\nconst { ...rest } = Astro.props;\n---\n\n<span data-sw-menu-checkbox-item-indicator aria-hidden="true" data-state="unchecked" {...rest}>\n  <slot />\n</span>\n',
+          sourceHash: "sha256:5e0b73cf71ae58dbc7022557eab93783b84cde4b7d33a30a9ab0550332b25a08",
+          sourcePath: "packages/astro/src/menu/MenuCheckboxItemIndicator.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/menu/MenuGroup.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = HTMLAttributes<"div">;\n\nconst { ...rest } = Astro.props;\n---\n\n<div data-sw-menu-group role="group" {...rest}>\n  <slot />\n</div>\n',
+          sourceHash: "sha256:a270601b56cb066189bb20c903c7b22e0412864d9bb5d5e20ac4e6bf817a04dd",
+          sourcePath: "packages/astro/src/menu/MenuGroup.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/menu/MenuItem.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = HTMLAttributes<"div"> & {\n  disabled?: boolean;\n  closeOnClick?: boolean;\n};\n\nconst { disabled = false, closeOnClick = true, ...rest } = Astro.props;\n---\n\n<div\n  data-sw-menu-item\n  role="menuitem"\n  tabindex="0"\n  data-close-on-click={closeOnClick ? undefined : "false"}\n  aria-disabled={disabled ? "true" : undefined}\n  data-disabled={disabled ? "" : undefined}\n  {...rest}\n>\n  <slot />\n</div>\n',
+          sourceHash: "sha256:33c160ce05e58e0a57af1a0121dd2ac4fc966fbccbed5090eb8e1b1459931b8e",
+          sourcePath: "packages/astro/src/menu/MenuItem.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/menu/MenuLabel.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = HTMLAttributes<"div">;\n\nconst { ...rest } = Astro.props;\n---\n\n<div data-sw-menu-label {...rest}>\n  <slot />\n</div>\n',
+          sourceHash: "sha256:25b00d1bcf98a79790b4828b22233377bcae69ca8ebb8ba4475cea5be109adbe",
+          sourcePath: "packages/astro/src/menu/MenuLabel.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/menu/MenuLinkItem.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = HTMLAttributes<"a"> & {\n  disabled?: boolean;\n  closeOnClick?: boolean;\n};\n\nconst { disabled = false, href, closeOnClick = false, ...rest } = Astro.props;\n---\n\n<a\n  data-sw-menu-link-item\n  href={disabled ? undefined : href}\n  role="menuitem"\n  tabindex="0"\n  data-close-on-click={closeOnClick ? "true" : undefined}\n  aria-disabled={disabled ? "true" : undefined}\n  data-disabled={disabled ? "" : undefined}\n  {...rest}\n>\n  <slot />\n</a>\n',
+          sourceHash: "sha256:3e4fafccc2403ca58e90da059c2351ee6863c6b11d37d3ad32220b9564ef9ab7",
+          sourcePath: "packages/astro/src/menu/MenuLinkItem.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/menu/MenuPopup.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = HTMLAttributes<"div"> & {\n  side?: "top" | "right" | "bottom" | "left";\n  align?: "start" | "center" | "end";\n  sideOffset?: number;\n  avoidCollisions?: boolean;\n};\n\nconst {\n  side = "bottom",\n  align = "start",\n  sideOffset = 4,\n  avoidCollisions = true,\n  ...rest\n} = Astro.props;\n---\n\n<div\n  data-sw-menu-popup\n  role="menu"\n  tabindex="-1"\n  data-state="closed"\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-avoid-collisions={avoidCollisions ? "true" : "false"}\n  hidden\n  {...rest}\n>\n  <slot />\n</div>\n',
+          sourceHash: "sha256:a9bc1f222c8d75b76e565038ea8d1128a03fbee99c829da27afa14a7a9ed63b8",
+          sourcePath: "packages/astro/src/menu/MenuPopup.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/menu/MenuPortal.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = HTMLAttributes<"div">;\n\nconst { ...rest } = Astro.props;\n---\n\n<div data-sw-menu-portal {...rest}>\n  <slot />\n</div>\n',
+          sourceHash: "sha256:a1cc6da5aa2d9111610ef0537ccc860928dc3c214f78e4a961b5356469dab6ff",
+          sourcePath: "packages/astro/src/menu/MenuPortal.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/menu/MenuPositioner.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = HTMLAttributes<"div"> & {\n  side?: "top" | "right" | "bottom" | "left";\n  align?: "start" | "center" | "end";\n  sideOffset?: number;\n  avoidCollisions?: boolean;\n};\n\nconst {\n  side = "bottom",\n  align = "start",\n  sideOffset = 4,\n  avoidCollisions = true,\n  ...rest\n} = Astro.props;\n---\n\n<div\n  data-sw-menu-positioner\n  data-state="closed"\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-avoid-collisions={avoidCollisions ? "true" : "false"}\n  {...rest}\n>\n  <slot />\n</div>\n',
+          sourceHash: "sha256:d2493a65d790abf56257b042a51be22945379731d9be9572b9e0cc8a6e96f4ca",
+          sourcePath: "packages/astro/src/menu/MenuPositioner.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/menu/MenuRadioGroup.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = HTMLAttributes<"div"> & {\n  value?: string;\n  defaultValue?: string;\n};\n\nconst { value, defaultValue, ...rest } = Astro.props;\n\nconst initialValue = value ?? defaultValue;\n---\n\n<div data-sw-menu-radio-group role="group" data-value={initialValue} {...rest}>\n  <slot />\n</div>\n',
+          sourceHash: "sha256:e5e250c32af68a5953253dc6aaebb5891d2596e560e80d1d1c298933fbb878d7",
+          sourcePath: "packages/astro/src/menu/MenuRadioGroup.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/menu/MenuRadioItem.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = Omit<HTMLAttributes<"div">, "aria-checked" | "role"> & {\n  value: string;\n  checked?: boolean;\n  defaultChecked?: boolean;\n  closeOnClick?: boolean;\n  disabled?: boolean;\n};\n\nconst {\n  value,\n  checked,\n  defaultChecked = false,\n  closeOnClick = false,\n  disabled = false,\n  ...rest\n} = Astro.props;\n\nconst initialChecked = checked ?? defaultChecked;\n---\n\n<div\n  data-sw-menu-radio-item\n  data-value={value}\n  data-default-checked={initialChecked ? "true" : undefined}\n  data-close-on-click={closeOnClick ? "true" : undefined}\n  role="menuitemradio"\n  aria-checked={initialChecked ? "true" : "false"}\n  aria-disabled={disabled ? "true" : undefined}\n  data-checked={initialChecked ? "" : undefined}\n  data-disabled={disabled ? "" : undefined}\n  data-unchecked={!initialChecked ? "" : undefined}\n  tabindex="0"\n  {...rest}\n>\n  <slot />\n</div>\n',
+          sourceHash: "sha256:aaccb5255f05622b7704d6b43aa8eb3e384a62e9db599c7afc3ecc6d28916338",
+          sourcePath: "packages/astro/src/menu/MenuRadioItem.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/menu/MenuRadioItemIndicator.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = HTMLAttributes<"span">;\n\nconst { ...rest } = Astro.props;\n---\n\n<span data-sw-menu-radio-item-indicator aria-hidden="true" data-state="unchecked" {...rest}>\n  <slot />\n</span>\n',
+          sourceHash: "sha256:cde94696f33cb86eb78bec8ea34519c134eb32a054b7bcac4432dc23f4fc6808",
+          sourcePath: "packages/astro/src/menu/MenuRadioItemIndicator.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/menu/MenuRoot.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = HTMLAttributes<"div"> & {\n  defaultOpen?: boolean;\n  disabled?: boolean;\n  modal?: boolean;\n  openOnHover?: boolean;\n  closeDelay?: number;\n};\n\nconst {\n  defaultOpen = false,\n  disabled = false,\n  modal = false,\n  openOnHover = false,\n  closeDelay = 200,\n  ...rest\n} = Astro.props;\n---\n\n<div\n  data-sw-menu\n  data-default-open={defaultOpen ? "true" : undefined}\n  data-disabled={disabled ? "" : undefined}\n  data-modal={modal ? "true" : "false"}\n  data-open-on-hover={openOnHover ? "true" : undefined}\n  data-close-delay={closeDelay}\n  data-state={defaultOpen ? "open" : "closed"}\n  {...rest}\n>\n  <slot />\n</div>\n\n<script>\n  import { createMenu } from "@starwind-ui/runtime/menu";\n  import { registerAstroControllerLifecycle } from "../internal/controller-lifecycle";\n\n  const menuInstances = new Set<ReturnType<typeof createMenu>>();\n\n  const getInitCandidates = (event: Event | undefined, selector: string): HTMLElement[] => {\n    const initRoot =\n      event?.type === "starwind:init" && event instanceof CustomEvent\n        ? event.detail?.root\n        : undefined;\n    const scopedRoot: Document | DocumentFragment | Element = isQueryableRoot(initRoot)\n      ? initRoot\n      : document;\n    const candidates = Array.from(scopedRoot.querySelectorAll<HTMLElement>(selector));\n\n    if (scopedRoot instanceof Element && scopedRoot.matches(selector)) {\n      candidates.unshift(scopedRoot as HTMLElement);\n    }\n\n    return candidates;\n  };\n\n  const isQueryableRoot = (value: unknown): value is Document | DocumentFragment | Element =>\n    value instanceof Document || value instanceof DocumentFragment || value instanceof Element;\n\n  const setupMenus = (event?: Event) => {\n    getInitCandidates(event, "[data-sw-menu]").forEach((root) => {\n      if (root.hasAttribute("data-sw-context-menu")) return;\n      menuInstances.add(createMenu(root));\n    });\n  };\n\n  const destroyMenus = () => {\n    menuInstances.forEach((instance) => instance.destroy());\n    menuInstances.clear();\n  };\n\n  registerAstroControllerLifecycle("MenuRoot", setupMenus, destroyMenus);\n</script>\n',
+          sourceHash: "sha256:b1ec247194d07ec7f6641a35c0b8a9c743bad56f35302fba83b1d2e228df4f18",
+          sourcePath: "packages/astro/src/menu/MenuRoot.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/menu/MenuSeparator.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = HTMLAttributes<"div">;\n\nconst { ...rest } = Astro.props;\n---\n\n<div data-sw-menu-separator role="separator" aria-orientation="horizontal" {...rest}></div>\n',
+          sourceHash: "sha256:18944c79760d054e696447845984a8be7c17ba03ac12ed932e60ea857e549421",
+          sourcePath: "packages/astro/src/menu/MenuSeparator.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/menu/MenuShortcut.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = HTMLAttributes<"span">;\n\nconst { ...rest } = Astro.props;\n---\n\n<span data-sw-menu-shortcut {...rest}>\n  <slot />\n</span>\n',
+          sourceHash: "sha256:001f18975506096dbd6e228bf08e327c4bd67b8f1d6bec41b0bc7e397cdf67c4",
+          sourcePath: "packages/astro/src/menu/MenuShortcut.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/menu/MenuSubmenuRoot.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = HTMLAttributes<"div"> & {\n  closeDelay?: number;\n};\n\nconst { closeDelay = 200, ...rest } = Astro.props;\n---\n\n<div data-sw-menu-submenu-root data-close-delay={closeDelay} data-state="closed" {...rest}>\n  <slot />\n</div>\n',
+          sourceHash: "sha256:86c1c6d3b86372ea4af059960d1348c8cd75ac972dbb2e7d0c31eb3c322006b3",
+          sourcePath: "packages/astro/src/menu/MenuSubmenuRoot.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/menu/MenuSubmenuTrigger.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = HTMLAttributes<"div"> & {\n  disabled?: boolean;\n};\n\nconst { disabled = false, ...rest } = Astro.props;\n---\n\n<div\n  data-sw-menu-submenu-trigger\n  role="menuitem"\n  aria-haspopup="menu"\n  aria-expanded="false"\n  aria-disabled={disabled ? "true" : undefined}\n  data-disabled={disabled ? "" : undefined}\n  data-state="closed"\n  tabindex="0"\n  {...rest}\n>\n  <slot />\n</div>\n',
+          sourceHash: "sha256:180bfca69a1e4c1f886630f43c0b4fc8a2e31c7137843a0490f07ce87b02a224",
+          sourcePath: "packages/astro/src/menu/MenuSubmenuTrigger.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/menu/MenuTrigger.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = HTMLAttributes<"button"> & {\n  asChild?: boolean;\n};\n\nconst { asChild = false, ...rest } = Astro.props;\n---\n\n{\n  asChild ? (\n    <div\n      data-sw-menu-trigger\n      data-as-child\n      aria-haspopup="menu"\n      aria-expanded="false"\n      data-state="closed"\n      {...rest}\n    >\n      <slot />\n    </div>\n  ) : (\n    <button\n      type="button"\n      data-sw-menu-trigger\n      aria-haspopup="menu"\n      aria-expanded="false"\n      data-state="closed"\n      {...rest}\n    >\n      <slot />\n    </button>\n  )\n}\n',
+          sourceHash: "sha256:99a66fd89b74a56107096bd920bb7d3033ea5970726d09d72011a7124da54a8d",
+          sourcePath: "packages/astro/src/menu/MenuTrigger.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/menu/index.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport MenuCheckboxItem from "./MenuCheckboxItem.astro";\nimport MenuCheckboxItemIndicator from "./MenuCheckboxItemIndicator.astro";\nimport MenuGroup from "./MenuGroup.astro";\nimport MenuItem from "./MenuItem.astro";\nimport MenuLabel from "./MenuLabel.astro";\nimport MenuLinkItem from "./MenuLinkItem.astro";\nimport MenuPopup from "./MenuPopup.astro";\nimport MenuPortal from "./MenuPortal.astro";\nimport MenuPositioner from "./MenuPositioner.astro";\nimport MenuRadioGroup from "./MenuRadioGroup.astro";\nimport MenuRadioItem from "./MenuRadioItem.astro";\nimport MenuRadioItemIndicator from "./MenuRadioItemIndicator.astro";\nimport MenuRoot from "./MenuRoot.astro";\nimport MenuSeparator from "./MenuSeparator.astro";\nimport MenuShortcut from "./MenuShortcut.astro";\nimport MenuSubmenuRoot from "./MenuSubmenuRoot.astro";\nimport MenuSubmenuTrigger from "./MenuSubmenuTrigger.astro";\nimport MenuTrigger from "./MenuTrigger.astro";\n\nconst Menu = {\n  Root: MenuRoot,\n  Trigger: MenuTrigger,\n  Portal: MenuPortal,\n  Positioner: MenuPositioner,\n  Popup: MenuPopup,\n  Item: MenuItem,\n  LinkItem: MenuLinkItem,\n  CheckboxItem: MenuCheckboxItem,\n  CheckboxItemIndicator: MenuCheckboxItemIndicator,\n  RadioGroup: MenuRadioGroup,\n  RadioItem: MenuRadioItem,\n  RadioItemIndicator: MenuRadioItemIndicator,\n  Group: MenuGroup,\n  Label: MenuLabel,\n  Separator: MenuSeparator,\n  Shortcut: MenuShortcut,\n  SubmenuRoot: MenuSubmenuRoot,\n  SubmenuTrigger: MenuSubmenuTrigger,\n};\n\nexport {\n  Menu,\n  MenuCheckboxItem,\n  MenuCheckboxItemIndicator,\n  MenuGroup,\n  MenuItem,\n  MenuLabel,\n  MenuLinkItem,\n  MenuPopup,\n  MenuPortal,\n  MenuPositioner,\n  MenuRadioGroup,\n  MenuRadioItem,\n  MenuRadioItemIndicator,\n  MenuRoot,\n  MenuSeparator,\n  MenuShortcut,\n  MenuSubmenuRoot,\n  MenuSubmenuTrigger,\n  MenuTrigger,\n};\n\nexport default Menu;\n\nexport type {\n  MenuCheckedChangeDetails,\n  MenuCloseCompleteDetails,\n  MenuOpenChangeDetails,\n  MenuValueChangeDetails,\n} from "@starwind-ui/runtime";\n',
+          sourceHash: "sha256:29ca5909db26a42783ba3ae919b41b623561a49ebf0c967c0aee75f4627e23bb",
+          sourcePath: "packages/astro/src/menu/index.ts"
         }
       ],
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -14946,6 +15468,12 @@ if (!src && !image) {
       framework: "astro",
       version: "0.1.2",
       files: [
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
+        },
         {
           path: "src/components/starwind-primitives/select/SelectGroup.astro",
           content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = HTMLAttributes<"div">;\n\nconst { ...rest } = Astro.props;\n---\n\n<div data-sw-select-group role="group" {...rest}>\n  <slot />\n</div>\n',
@@ -15058,7 +15586,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -15071,6 +15599,12 @@ if (!src && !image) {
       framework: "astro",
       version: "0.1.0",
       files: [
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
+        },
         {
           path: "src/components/starwind-primitives/sidebar/Sidebar.astro",
           content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = HTMLAttributes<"div"> & {\n  side?: "left" | "right";\n  variant?: "sidebar" | "floating" | "inset";\n  collapsible?: "offcanvas" | "icon";\n};\n\nconst { side = "left", variant = "sidebar", collapsible = "offcanvas", ...rest } = Astro.props;\n---\n\n<div\n  data-sw-sidebar\n  data-state="expanded"\n  data-collapsible=""\n  data-collapsible-mode={collapsible}\n  data-variant={variant}\n  data-side={side}\n  {...rest}\n>\n  <slot />\n</div>\n',
@@ -15111,7 +15645,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -15243,12 +15777,191 @@ if (!src && !image) {
           content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport ComboboxClear from "./ComboboxClear.astro";\nimport ComboboxEmpty from "./ComboboxEmpty.astro";\nimport ComboboxGroup from "./ComboboxGroup.astro";\nimport ComboboxGroupLabel from "./ComboboxGroupLabel.astro";\nimport ComboboxIcon from "./ComboboxIcon.astro";\nimport ComboboxInput from "./ComboboxInput.astro";\nimport ComboboxInputGroup from "./ComboboxInputGroup.astro";\nimport ComboboxItem from "./ComboboxItem.astro";\nimport ComboboxItemIndicator from "./ComboboxItemIndicator.astro";\nimport ComboboxItemText from "./ComboboxItemText.astro";\nimport ComboboxLabel from "./ComboboxLabel.astro";\nimport ComboboxList from "./ComboboxList.astro";\nimport ComboboxPopup from "./ComboboxPopup.astro";\nimport ComboboxPortal from "./ComboboxPortal.astro";\nimport ComboboxPositioner from "./ComboboxPositioner.astro";\nimport ComboboxRoot from "./ComboboxRoot.astro";\nimport ComboboxSeparator from "./ComboboxSeparator.astro";\nimport ComboboxTrigger from "./ComboboxTrigger.astro";\nimport ComboboxValue from "./ComboboxValue.astro";\n\nconst Combobox = {\n  Root: ComboboxRoot,\n  Label: ComboboxLabel,\n  InputGroup: ComboboxInputGroup,\n  Input: ComboboxInput,\n  Trigger: ComboboxTrigger,\n  Icon: ComboboxIcon,\n  Clear: ComboboxClear,\n  Value: ComboboxValue,\n  Portal: ComboboxPortal,\n  Positioner: ComboboxPositioner,\n  Popup: ComboboxPopup,\n  Empty: ComboboxEmpty,\n  List: ComboboxList,\n  Group: ComboboxGroup,\n  GroupLabel: ComboboxGroupLabel,\n  Item: ComboboxItem,\n  ItemText: ComboboxItemText,\n  ItemIndicator: ComboboxItemIndicator,\n  Separator: ComboboxSeparator,\n};\n\nexport {\n  Combobox,\n  ComboboxClear,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxGroupLabel,\n  ComboboxIcon,\n  ComboboxInput,\n  ComboboxInputGroup,\n  ComboboxItem,\n  ComboboxItemIndicator,\n  ComboboxItemText,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxPortal,\n  ComboboxPositioner,\n  ComboboxRoot,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n};\n\nexport default Combobox;\n\nexport type {\n  ComboboxInputValueChangeDetails,\n  ComboboxOpenChangeDetails,\n  ComboboxValueChangeDetails,\n} from "@starwind-ui/runtime";\n',
           sourceHash: "sha256:9f9ec2714d78f1b53774bf33cd41b7b917c4492d9eae76669a430e49e88587ad",
           sourcePath: "packages/astro/src/combobox/index.ts"
+        },
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
         }
       ],
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
+        },
+        {
+          name: "astro",
+          range: ">=5"
+        }
+      ]
+    },
+    {
+      component: "color-picker",
+      framework: "astro",
+      version: "0.1.0",
+      files: [
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerArea.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\nimport type {\n  ColorPickerChannel,\n  ColorPickerInitialPartProjection,\n} from "@starwind-ui/runtime/color-picker";\nimport {\n  assertColorPickerInitialPart,\n  mergeColorPickerInitialStyles,\n} from "./ColorPickerRenderProjection";\n\ninterface Props extends HTMLAttributes<"div"> {\n  initial?: ColorPickerInitialPartProjection;\n  xChannel?: ColorPickerChannel;\n  yChannel?: ColorPickerChannel;\n}\nconst {\n  initial: suppliedInitial,\n  xChannel = "saturation",\n  yChannel = "brightness",\n  style,\n  ...rest\n} = Astro.props;\nconst initial = assertColorPickerInitialPart("area", suppliedInitial);\nconst mergedStyle = mergeColorPickerInitialStyles(style, initial);\n---\n\n<div\n  {...rest}\n  data-x-channel={initial ? undefined : xChannel}\n  data-y-channel={initial ? undefined : yChannel}\n  {...initial?.attributes}\n  style={mergedStyle}\n  data-sw-color-picker-area\n>\n  <slot />\n</div>\n',
+          sourceHash: "sha256:94ce56fea56c0e1b4a4e8fba210498d6feb976992529285973a05a2f57c25dab",
+          sourcePath: "packages/astro/src/color-picker/ColorPickerArea.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerAreaBackground.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\nimport type { ColorPickerInitialPartProjection } from "@starwind-ui/runtime/color-picker";\nimport {\n  assertColorPickerInitialPart,\n  mergeColorPickerInitialStyles,\n} from "./ColorPickerRenderProjection";\n\ninterface Props extends HTMLAttributes<"div"> {\n  initial?: ColorPickerInitialPartProjection;\n}\nconst { initial: suppliedInitial, style, ...rest } = Astro.props;\nconst initial = assertColorPickerInitialPart("areaBackground", suppliedInitial);\nconst mergedStyle = mergeColorPickerInitialStyles(style, initial);\n---\n\n<div {...rest} {...initial?.attributes} style={mergedStyle} data-sw-color-picker-area-background>\n  <slot />\n</div>\n',
+          sourceHash: "sha256:17962d959c43c547aa0e900847ff7cb1acf169e2ac397cc43d5e543f5a225af2",
+          sourcePath: "packages/astro/src/color-picker/ColorPickerAreaBackground.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerAreaInput.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\nimport type { ColorPickerInitialPartProjection } from "@starwind-ui/runtime/color-picker";\nimport {\n  assertColorPickerInitialPart,\n  mergeColorPickerInitialStyles,\n} from "./ColorPickerRenderProjection";\n\ninterface Props extends HTMLAttributes<"input"> {\n  initial?: ColorPickerInitialPartProjection;\n  axis?: "x" | "y";\n  step?: number;\n  readOnly?: boolean;\n}\nconst {\n  initial: suppliedInitial,\n  axis = "x",\n  step,\n  style,\n  value,\n  disabled,\n  readOnly,\n  hidden,\n  ...rest\n} = Astro.props;\nconst initial = assertColorPickerInitialPart("areaInput", suppliedInitial);\nconst mergedStyle = mergeColorPickerInitialStyles(style, initial);\n---\n\n<input\n  {...rest}\n  type={initial ? undefined : "range"}\n  data-axis={initial ? undefined : axis}\n  data-step={initial ? undefined : step}\n  {...initial?.attributes}\n  value={initial?.properties.value ?? value}\n  disabled={initial?.properties.disabled ?? disabled}\n  readonly={initial?.properties.readOnly ?? readOnly}\n  hidden={initial?.properties.hidden ?? hidden ?? false}\n  style={mergedStyle}\n  data-sw-color-picker-area-input\n/>\n',
+          sourceHash: "sha256:780da163c54de72760458b13732c70149191bfdacaea4409750be11ff5b8cffe",
+          sourcePath: "packages/astro/src/color-picker/ColorPickerAreaInput.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerAreaThumb.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\nimport type { ColorPickerInitialPartProjection } from "@starwind-ui/runtime/color-picker";\nimport {\n  assertColorPickerInitialPart,\n  mergeColorPickerInitialStyles,\n} from "./ColorPickerRenderProjection";\n\ninterface Props extends HTMLAttributes<"span"> {\n  initial?: ColorPickerInitialPartProjection;\n}\nconst { initial: suppliedInitial, style, ...rest } = Astro.props;\nconst initial = assertColorPickerInitialPart("areaThumb", suppliedInitial);\nconst mergedStyle = mergeColorPickerInitialStyles(style, initial);\n---\n\n<span {...rest} {...initial?.attributes} style={mergedStyle} data-sw-color-picker-area-thumb>\n  <slot />\n</span>\n',
+          sourceHash: "sha256:1a581203b8c08499cd3b833b26e542002333af9c5176aea846412046238dcac0",
+          sourcePath: "packages/astro/src/color-picker/ColorPickerAreaThumb.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerChannelInput.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\nimport type {\n  ColorPickerInitialPartProjection,\n  ColorPickerChannel,\n} from "@starwind-ui/runtime/color-picker";\nimport {\n  assertColorPickerInitialPart,\n  mergeColorPickerInitialStyles,\n} from "./ColorPickerRenderProjection";\n\ninterface Props extends HTMLAttributes<"input"> {\n  initial?: ColorPickerInitialPartProjection;\n  channel: ColorPickerChannel;\n  readOnly?: boolean;\n}\nconst {\n  initial: suppliedInitial,\n  channel,\n  style,\n  value,\n  disabled,\n  readOnly,\n  hidden,\n  ...rest\n} = Astro.props;\nconst initial = assertColorPickerInitialPart("channelInput", suppliedInitial);\nconst mergedStyle = mergeColorPickerInitialStyles(style, initial);\n---\n\n<input\n  {...rest}\n  data-channel={initial ? undefined : channel}\n  {...initial?.attributes}\n  value={initial?.properties.value ?? value}\n  disabled={initial?.properties.disabled ?? disabled}\n  readonly={initial?.properties.readOnly ?? readOnly}\n  hidden={initial?.properties.hidden ?? hidden ?? false}\n  style={mergedStyle}\n  data-sw-color-picker-channel-field\n/>\n',
+          sourceHash: "sha256:1244793a021d22325de8a52df5ea5c67fa2321a2bfb5626cc227fefb3f62b309",
+          sourcePath: "packages/astro/src/color-picker/ColorPickerChannelInput.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerChannelSlider.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\nimport type {\n  ColorPickerChannel,\n  ColorPickerInitialPartProjection,\n} from "@starwind-ui/runtime/color-picker";\nimport {\n  assertColorPickerInitialPart,\n  mergeColorPickerInitialStyles,\n} from "./ColorPickerRenderProjection";\n\ninterface Props extends HTMLAttributes<"div"> {\n  initial?: ColorPickerInitialPartProjection;\n  channel: ColorPickerChannel;\n  orientation?: "horizontal" | "vertical";\n}\nconst {\n  initial: suppliedInitial,\n  channel,\n  orientation = "horizontal",\n  style,\n  hidden,\n  ...rest\n} = Astro.props;\nconst initial = assertColorPickerInitialPart("channelSlider", suppliedInitial);\nconst mergedStyle = mergeColorPickerInitialStyles(style, initial);\n---\n\n<div\n  {...rest}\n  data-channel={initial ? undefined : channel}\n  data-orientation={initial ? undefined : orientation}\n  {...initial?.attributes}\n  hidden={initial?.properties.hidden ?? hidden}\n  style={mergedStyle}\n  data-sw-color-picker-channel-slider\n>\n  <slot />\n</div>\n',
+          sourceHash: "sha256:0cf7c0b5d7bdc34c609f2afcd9166fdae15e4181f8782a824abd5e3de07257d0",
+          sourcePath: "packages/astro/src/color-picker/ColorPickerChannelSlider.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerChannelSliderInput.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\nimport type { ColorPickerInitialPartProjection } from "@starwind-ui/runtime/color-picker";\nimport {\n  assertColorPickerInitialPart,\n  mergeColorPickerInitialStyles,\n} from "./ColorPickerRenderProjection";\n\ninterface Props extends HTMLAttributes<"input"> {\n  initial?: ColorPickerInitialPartProjection;\n  step?: number;\n  readOnly?: boolean;\n}\nconst {\n  initial: suppliedInitial,\n  step,\n  style,\n  value,\n  disabled,\n  readOnly,\n  hidden,\n  ...rest\n} = Astro.props;\nconst initial = assertColorPickerInitialPart("channelSliderInput", suppliedInitial);\nconst mergedStyle = mergeColorPickerInitialStyles(style, initial);\n---\n\n<input\n  {...rest}\n  type={initial ? undefined : "range"}\n  data-step={initial ? undefined : step}\n  {...initial?.attributes}\n  value={initial?.properties.value ?? value}\n  disabled={initial?.properties.disabled ?? disabled}\n  readonly={initial?.properties.readOnly ?? readOnly}\n  hidden={initial?.properties.hidden ?? hidden ?? false}\n  style={mergedStyle}\n  data-sw-color-picker-channel-input\n/>\n',
+          sourceHash: "sha256:b9339c1f8ea06a66a01c58f720f8221e99b94d2cfdaf025c65cf0c0fab6bcb78",
+          sourcePath: "packages/astro/src/color-picker/ColorPickerChannelSliderInput.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerChannelSliderThumb.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\nimport type { ColorPickerInitialPartProjection } from "@starwind-ui/runtime/color-picker";\nimport {\n  assertColorPickerInitialPart,\n  mergeColorPickerInitialStyles,\n} from "./ColorPickerRenderProjection";\n\ninterface Props extends HTMLAttributes<"span"> {\n  initial?: ColorPickerInitialPartProjection;\n}\nconst { initial: suppliedInitial, style, ...rest } = Astro.props;\nconst initial = assertColorPickerInitialPart("channelSliderThumb", suppliedInitial);\nconst mergedStyle = mergeColorPickerInitialStyles(style, initial);\n---\n\n<span\n  {...rest}\n  {...initial?.attributes}\n  style={mergedStyle}\n  data-sw-color-picker-channel-slider-thumb\n>\n  <slot />\n</span>\n',
+          sourceHash: "sha256:e6f3dc49bcb882e3ca7758d4a121c47391f22bf55ae4a81752cf73359c1bdf24",
+          sourcePath: "packages/astro/src/color-picker/ColorPickerChannelSliderThumb.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerChannelSliderTrack.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\nimport type { ColorPickerInitialPartProjection } from "@starwind-ui/runtime/color-picker";\nimport {\n  assertColorPickerInitialPart,\n  mergeColorPickerInitialStyles,\n} from "./ColorPickerRenderProjection";\n\ninterface Props extends HTMLAttributes<"div"> {\n  initial?: ColorPickerInitialPartProjection;\n}\nconst { initial: suppliedInitial, style, ...rest } = Astro.props;\nconst initial = assertColorPickerInitialPart("channelSliderTrack", suppliedInitial);\nconst mergedStyle = mergeColorPickerInitialStyles(style, initial);\n---\n\n<div\n  {...rest}\n  {...initial?.attributes}\n  style={mergedStyle}\n  data-sw-color-picker-channel-slider-track\n>\n  <slot />\n</div>\n',
+          sourceHash: "sha256:58530cbf82d7ab5d8f55baf55c3b23344a46501d43c5910212e8878d4147d746",
+          sourcePath: "packages/astro/src/color-picker/ColorPickerChannelSliderTrack.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerClear.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\nimport type { ColorPickerInitialPartProjection } from "@starwind-ui/runtime/color-picker";\nimport {\n  assertColorPickerInitialPart,\n  mergeColorPickerInitialStyles,\n} from "./ColorPickerRenderProjection";\n\ninterface Props extends HTMLAttributes<"button"> {\n  initial?: ColorPickerInitialPartProjection;\n}\nconst { initial: suppliedInitial, style, disabled, hidden, ...rest } = Astro.props;\nconst initial = assertColorPickerInitialPart("clear", suppliedInitial);\nconst mergedStyle = mergeColorPickerInitialStyles(style, initial);\n---\n\n<button\n  {...rest}\n  type={initial ? undefined : "button"}\n  {...initial?.attributes}\n  disabled={initial?.properties.disabled ?? disabled}\n  hidden={initial?.properties.hidden ?? hidden}\n  style={mergedStyle}\n  data-sw-color-picker-clear\n>\n  <slot />\n</button>\n',
+          sourceHash: "sha256:4ca62fe300ea02c7c82b8e61bbc861f70a9f08c85163c14ae262c9d00db708f3",
+          sourcePath: "packages/astro/src/color-picker/ColorPickerClear.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerControl.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\nimport type { ColorPickerInitialPartProjection } from "@starwind-ui/runtime/color-picker";\nimport {\n  assertColorPickerInitialPart,\n  mergeColorPickerInitialStyles,\n} from "./ColorPickerRenderProjection";\n\ninterface Props extends HTMLAttributes<"div"> {\n  initial?: ColorPickerInitialPartProjection;\n}\nconst { initial: suppliedInitial, style, ...rest } = Astro.props;\nconst initial = assertColorPickerInitialPart("control", suppliedInitial);\nconst mergedStyle = mergeColorPickerInitialStyles(style, initial);\n---\n\n<div {...rest} {...initial?.attributes} style={mergedStyle} data-sw-color-picker-control>\n  <slot />\n</div>\n',
+          sourceHash: "sha256:7e524a03d24a6f1ee7b43f9dad74cc7bbda87b48a97eb2cebe567062bd6a9261",
+          sourcePath: "packages/astro/src/color-picker/ColorPickerControl.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerEyeDropperTrigger.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\nimport type { ColorPickerInitialPartProjection } from "@starwind-ui/runtime/color-picker";\nimport {\n  assertColorPickerInitialPart,\n  mergeColorPickerInitialStyles,\n} from "./ColorPickerRenderProjection";\n\ninterface Props extends HTMLAttributes<"button"> {\n  initial?: ColorPickerInitialPartProjection;\n}\nconst { initial: suppliedInitial, style, disabled, hidden, ...rest } = Astro.props;\nconst initial = assertColorPickerInitialPart("eyeDropperTrigger", suppliedInitial);\nconst mergedStyle = mergeColorPickerInitialStyles(style, initial);\n---\n\n<button\n  {...rest}\n  type={initial ? undefined : "button"}\n  {...initial?.attributes}\n  disabled={initial?.properties.disabled ?? disabled}\n  hidden={initial?.properties.hidden ?? hidden}\n  style={mergedStyle}\n  data-sw-color-picker-eye-dropper\n>\n  <slot />\n</button>\n',
+          sourceHash: "sha256:30b9dda00db500079458036945f069400b8e3e7b6058627cf170c1573e0c1099",
+          sourcePath: "packages/astro/src/color-picker/ColorPickerEyeDropperTrigger.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerFormatControl.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\nimport type { ColorPickerInitialPartProjection } from "@starwind-ui/runtime/color-picker";\nimport {\n  assertColorPickerInitialPart,\n  mergeColorPickerInitialStyles,\n} from "./ColorPickerRenderProjection";\n\ninterface Props extends HTMLAttributes<"div"> {\n  initial?: ColorPickerInitialPartProjection;\n}\nconst { initial: suppliedInitial, style, ...rest } = Astro.props;\nconst initial = assertColorPickerInitialPart("formatControl", suppliedInitial);\nconst mergedStyle = mergeColorPickerInitialStyles(style, initial);\n---\n\n<div {...rest} {...initial?.attributes} style={mergedStyle} data-sw-color-picker-format-control>\n  <slot />\n</div>\n',
+          sourceHash: "sha256:c3e4a4be9b66611502e8cd8160ee4136f9f6f357f5739401c3f37f6535057c0f",
+          sourcePath: "packages/astro/src/color-picker/ColorPickerFormatControl.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerFormatSelect.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\nimport type { ColorPickerInitialPartProjection } from "@starwind-ui/runtime/color-picker";\nimport {\n  assertColorPickerInitialPart,\n  mergeColorPickerInitialStyles,\n} from "./ColorPickerRenderProjection";\n\ninterface Props extends HTMLAttributes<"select"> {\n  initial?: ColorPickerInitialPartProjection;\n}\nconst { initial: suppliedInitial, style, value, disabled, ...rest } = Astro.props;\nconst initial = assertColorPickerInitialPart("formatSelect", suppliedInitial);\nconst mergedStyle = mergeColorPickerInitialStyles(style, initial);\n---\n\n<select\n  {...rest}\n  {...initial?.attributes}\n  value={initial?.properties.value ?? value}\n  disabled={initial?.properties.disabled ?? disabled}\n  style={mergedStyle}\n  data-sw-color-picker-format-select\n>\n  <slot>\n    <option value="hex" selected={(initial?.properties.value ?? value) === "hex"}>HEX</option>\n    <option value="rgb" selected={(initial?.properties.value ?? value) === "rgb"}>RGB</option>\n    <option value="hsl" selected={(initial?.properties.value ?? value) === "hsl"}>HSL</option>\n    <option value="hsb" selected={(initial?.properties.value ?? value) === "hsb"}>HSB</option>\n  </slot>\n</select>\n',
+          sourceHash: "sha256:6e3f100f98e32ddd71587f145807332b2a96998480d5f97407e7a326852ea715",
+          sourcePath: "packages/astro/src/color-picker/ColorPickerFormatSelect.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerHiddenInput.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\nimport type { ColorPickerInitialPartProjection } from "@starwind-ui/runtime/color-picker";\nimport {\n  assertColorPickerInitialPart,\n  mergeColorPickerInitialStyles,\n} from "./ColorPickerRenderProjection";\n\ninterface Props extends HTMLAttributes<"input"> {\n  initial?: ColorPickerInitialPartProjection;\n\n  readOnly?: boolean;\n}\nconst { initial: suppliedInitial, style, value, disabled, readOnly, hidden, ...rest } = Astro.props;\nconst initial = assertColorPickerInitialPart("hiddenInput", suppliedInitial);\nconst mergedStyle = mergeColorPickerInitialStyles(style, initial);\n---\n\n<input\n  {...rest}\n  type={initial ? undefined : "text"}\n  {...initial?.attributes}\n  value={initial?.properties.value ?? value}\n  disabled={initial?.properties.disabled ?? disabled}\n  readonly={initial?.properties.readOnly ?? readOnly}\n  hidden={initial?.properties.hidden ?? hidden ?? false}\n  style={mergedStyle}\n  data-sw-color-picker-hidden-input\n/>\n',
+          sourceHash: "sha256:0a4958d74feea4bdf30d92f45adae6682ba29798265b2ea9ea3b9dce27c0b893",
+          sourcePath: "packages/astro/src/color-picker/ColorPickerHiddenInput.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerLabel.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\nimport type { ColorPickerInitialPartProjection } from "@starwind-ui/runtime/color-picker";\nimport {\n  assertColorPickerInitialPart,\n  mergeColorPickerInitialStyles,\n} from "./ColorPickerRenderProjection";\n\ninterface Props extends HTMLAttributes<"span"> {\n  initial?: ColorPickerInitialPartProjection;\n}\nconst { initial: suppliedInitial, style, ...rest } = Astro.props;\nconst initial = assertColorPickerInitialPart("label", suppliedInitial);\nconst mergedStyle = mergeColorPickerInitialStyles(style, initial);\n---\n\n<span {...rest} {...initial?.attributes} style={mergedStyle} data-sw-color-picker-label>\n  <slot />\n</span>\n',
+          sourceHash: "sha256:b3db102151f79cb734cc52cbfe8a3f346db9f7c9c41a78907da1fa8b7e2eadcb",
+          sourcePath: "packages/astro/src/color-picker/ColorPickerLabel.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerRenderProjection.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport type { HTMLAttributes } from "astro/types";\nimport {\n  projectColorPickerInitialPart,\n  type ColorPickerInitialAxis,\n  type ColorPickerInitialChannel,\n  type ColorPickerInitialOrientation,\n  type ColorPickerInitialPartName,\n  type ColorPickerInitialPartProjection,\n  type ColorPickerInitialState,\n  type ColorPickerInitialValue,\n} from "@starwind-ui/runtime/color-picker";\n\nexport type ColorPickerInitialProps = Readonly<{\n  initial: ColorPickerInitialPartProjection;\n}>;\n\nexport type ColorPickerAreaProjection = Readonly<{\n  root: ColorPickerInitialProps;\n  background: ColorPickerInitialProps;\n  thumb: ColorPickerInitialProps;\n  input(options: {\n    axis: ColorPickerInitialAxis;\n    ariaLabel?: string;\n    ariaLabelledBy?: string;\n    ariaRoleDescription?: string;\n  }): ColorPickerInitialProps;\n}>;\n\nexport type ColorPickerChannelSliderProjection = Readonly<{\n  root: ColorPickerInitialProps;\n  track: ColorPickerInitialProps;\n  thumb: ColorPickerInitialProps;\n  input(options?: { ariaLabel?: string }): ColorPickerInitialProps;\n}>;\n\nexport type ColorPickerRenderProjection = Readonly<{\n  root: ColorPickerInitialProps;\n  label: ColorPickerInitialProps;\n  control: ColorPickerInitialProps;\n  valueInput: ColorPickerInitialProps;\n  valueSwatch: ColorPickerInitialProps;\n  valueText: ColorPickerInitialProps;\n  area(options?: {\n    xChannel?: ColorPickerInitialChannel;\n    yChannel?: ColorPickerInitialChannel;\n    xStep?: number;\n    yStep?: number;\n  }): ColorPickerAreaProjection;\n  channelSlider(options: {\n    channel: ColorPickerInitialChannel;\n    orientation?: ColorPickerInitialOrientation;\n    step?: number;\n  }): ColorPickerChannelSliderProjection;\n  channelInput(options: { channel: ColorPickerInitialChannel }): ColorPickerInitialProps;\n  formatSelect: ColorPickerInitialProps;\n  formatControl: ColorPickerInitialProps;\n  transparencyGrid: ColorPickerInitialProps;\n  swatchGroup: ColorPickerInitialProps;\n  swatch(options: { value: ColorPickerInitialValue; disabled?: boolean }): ColorPickerInitialProps;\n  eyeDropperTrigger: ColorPickerInitialProps;\n  clear: ColorPickerInitialProps;\n  hiddenInput: ColorPickerInitialProps;\n}>;\n\nexport function createColorPickerRenderProjection(\n  state: ColorPickerInitialState,\n): ColorPickerRenderProjection {\n  const part = (\n    request: Parameters<typeof projectColorPickerInitialPart>[1],\n  ): ColorPickerInitialProps =>\n    Object.freeze({ initial: projectColorPickerInitialPart(state, request) });\n  const simple = (name: ColorPickerInitialPartName) => part({ part: name } as never);\n\n  return Object.freeze({\n    root: simple("root"),\n    label: simple("label"),\n    control: simple("control"),\n    valueInput: simple("valueInput"),\n    valueSwatch: simple("valueSwatch"),\n    valueText: simple("valueText"),\n    area(options = {}) {\n      const context = Object.freeze({ ...options });\n      return Object.freeze({\n        root: part({ part: "area", ...context }),\n        background: part({ part: "areaBackground", ...context }),\n        thumb: part({ part: "areaThumb", ...context }),\n        input(inputOptions) {\n          return part({ part: "areaInput", ...context, ...inputOptions });\n        },\n      });\n    },\n    channelSlider(options) {\n      const context = Object.freeze({ ...options });\n      return Object.freeze({\n        root: part({ part: "channelSlider", ...context }),\n        track: part({ part: "channelSliderTrack", ...context }),\n        thumb: part({ part: "channelSliderThumb", ...context }),\n        input(inputOptions = {}) {\n          return part({ part: "channelSliderInput", ...context, ...inputOptions });\n        },\n      });\n    },\n    channelInput: (options) => part({ part: "channelInput", ...options }),\n    formatSelect: simple("formatSelect"),\n    formatControl: simple("formatControl"),\n    transparencyGrid: simple("transparencyGrid"),\n    swatchGroup: simple("swatchGroup"),\n    swatch: (options) => part({ part: "swatch", ...options }),\n    eyeDropperTrigger: simple("eyeDropperTrigger"),\n    clear: simple("clear"),\n    hiddenInput: simple("hiddenInput"),\n  });\n}\n\nexport function assertColorPickerInitialPart(\n  expected: ColorPickerInitialPartName,\n  initial: ColorPickerInitialPartProjection | undefined,\n): ColorPickerInitialPartProjection | undefined {\n  if (initial && initial.part !== expected) {\n    throw new Error(\n      `Color Picker ${expected} received the initial projection for ${initial.part}.`,\n    );\n  }\n  return initial;\n}\n\nexport function mergeColorPickerInitialStyles(\n  style: HTMLAttributes<"div">["style"],\n  initial: ColorPickerInitialPartProjection | undefined,\n): HTMLAttributes<"div">["style"] {\n  const projected = Object.fromEntries(\n    Object.entries(initial?.styles ?? {}).filter(\n      (entry): entry is [string, string] => entry[1] !== undefined,\n    ),\n  );\n  if (Object.keys(projected).length === 0) return style;\n  if (typeof style === "string") {\n    const suffix = Object.entries(projected)\n      .map(([name, value]) => `${name}: ${value}`)\n      .join("; ");\n    return style.length > 0 ? `${style}; ${suffix}` : suffix;\n  }\n  return { ...(typeof style === "object" && style !== null ? style : {}), ...projected };\n}\n',
+          sourceHash: "sha256:cac62787f69847cda171861e603c15fda0e9c8c1b49a4da32bf4db6b5a7c6ea5",
+          sourcePath: "packages/astro/src/color-picker/ColorPickerRenderProjection.ts"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerRoot.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\nimport {\n  createColorPickerInitialState,\n  projectColorPickerInitialPart,\n} from "@starwind-ui/runtime/color-picker";\nimport type {\n  ColorPickerDirection,\n  ColorPickerFormat,\n  ColorPickerOptions,\n  ColorPickerValue,\n} from "@starwind-ui/runtime/color-picker";\nimport {\n  createColorPickerRenderProjection,\n  mergeColorPickerInitialStyles,\n  type ColorPickerRenderProjection,\n} from "./ColorPickerRenderProjection";\n\ninterface Props extends Omit<HTMLAttributes<"div">, "defaultValue" | "dir"> {\n  value?: ColorPickerValue;\n  defaultValue?: ColorPickerValue;\n  format?: ColorPickerFormat;\n  alpha?: boolean;\n  allowEmpty?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  name?: string;\n  form?: string;\n  locale?: string;\n  dir?: ColorPickerDirection;\n  getAriaValueText?: ColorPickerOptions["getAriaValueText"];\n  getAreaRoleDescription?: ColorPickerOptions["getAreaRoleDescription"];\n  getColorDescription?: ColorPickerOptions["getColorDescription"];\n  children?: (initial: ColorPickerRenderProjection) => unknown;\n}\n\nconst {\n  value,\n  defaultValue = "#000000",\n  format = "hex",\n  alpha = true,\n  allowEmpty = false,\n  disabled = false,\n  readOnly = false,\n  required = false,\n  name,\n  form,\n  locale,\n  dir,\n  getAriaValueText,\n  getAreaRoleDescription,\n  getColorDescription,\n  style,\n  ...rest\n} = Astro.props;\nconst initialState = createColorPickerInitialState({\n  ...(value === undefined ? {} : { value }),\n  defaultValue,\n  format,\n  alpha,\n  allowEmpty,\n  disabled,\n  readOnly,\n  required,\n  name,\n  form,\n  locale,\n  dir,\n  getAriaValueText,\n  getAreaRoleDescription,\n  getColorDescription,\n});\nconst rootInitial = projectColorPickerInitialPart(initialState, { part: "root" });\nconst initial = createColorPickerRenderProjection(initialState);\nconst content = Astro.slots.has("default") ? await Astro.slots.render("default", [initial]) : "";\nconst mergedStyle = mergeColorPickerInitialStyles(style, rootInitial);\n---\n\n<div {...rest} {...rootInitial.attributes} style={mergedStyle} data-sw-color-picker>\n  <Fragment set:html={content} />\n</div>\n\n<script>\n  import { createColorPicker } from "@starwind-ui/runtime/color-picker";\n  import {\n    registerAstroControllerLifecycle,\n    trackAstroController,\n  } from "../internal/controller-lifecycle";\n\n  const getInitCandidates = (event: Event | undefined, selector: string): HTMLElement[] => {\n    const initRoot =\n      event?.type === "starwind:init" && event instanceof CustomEvent\n        ? event.detail?.root\n        : undefined;\n    const scopedRoot: Document | DocumentFragment | Element = isQueryableRoot(initRoot)\n      ? initRoot\n      : document;\n    const candidates = Array.from(scopedRoot.querySelectorAll<HTMLElement>(selector));\n\n    if (scopedRoot instanceof Element && scopedRoot.matches(selector)) {\n      candidates.unshift(scopedRoot as HTMLElement);\n    }\n\n    return candidates;\n  };\n\n  const isQueryableRoot = (value: unknown): value is Document | DocumentFragment | Element =>\n    value instanceof Document || value instanceof DocumentFragment || value instanceof Element;\n\n  const setupColorPickers = (event?: Event) => {\n    getInitCandidates(event, "[data-sw-color-picker]").forEach((root) =>\n      trackAstroController("ColorPickerRoot", root, createColorPicker(root)),\n    );\n  };\n\n  registerAstroControllerLifecycle("ColorPickerRoot", setupColorPickers);\n</script>\n',
+          sourceHash: "sha256:96107e83f5d82695413028f1a403fb3325ff91f87e2bdda272c6a2fb56a8aba7",
+          sourcePath: "packages/astro/src/color-picker/ColorPickerRoot.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerSwatch.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\nimport type {\n  ColorPickerInitialPartProjection,\n  ColorPickerValue,\n} from "@starwind-ui/runtime/color-picker";\nimport {\n  assertColorPickerInitialPart,\n  mergeColorPickerInitialStyles,\n} from "./ColorPickerRenderProjection";\n\ninterface Props extends HTMLAttributes<"button"> {\n  initial?: ColorPickerInitialPartProjection;\n  swatchValue: ColorPickerValue;\n  swatchDisabled?: boolean;\n}\nconst {\n  initial: suppliedInitial,\n  swatchValue,\n  swatchDisabled = false,\n  style,\n  disabled,\n  ...rest\n} = Astro.props;\nconst initial = assertColorPickerInitialPart("swatch", suppliedInitial);\nconst mergedStyle = mergeColorPickerInitialStyles(style, initial);\n---\n\n<button\n  {...rest}\n  type={initial ? undefined : "button"}\n  data-value={initial ? undefined : swatchValue === null ? undefined : String(swatchValue)}\n  data-disabled={initial ? undefined : swatchDisabled ? "" : undefined}\n  {...initial?.attributes}\n  disabled={initial?.properties.disabled ?? disabled ?? swatchDisabled}\n  style={mergedStyle}\n  data-sw-color-picker-swatch\n>\n  <slot />\n</button>\n',
+          sourceHash: "sha256:cb59f549a12f0bda237d267a84d578e21364daef519b68f44f260fef1f8d6efb",
+          sourcePath: "packages/astro/src/color-picker/ColorPickerSwatch.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerSwatchGroup.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\nimport type { ColorPickerInitialPartProjection } from "@starwind-ui/runtime/color-picker";\nimport {\n  assertColorPickerInitialPart,\n  mergeColorPickerInitialStyles,\n} from "./ColorPickerRenderProjection";\n\ninterface Props extends HTMLAttributes<"div"> {\n  initial?: ColorPickerInitialPartProjection;\n}\nconst { initial: suppliedInitial, style, ...rest } = Astro.props;\nconst initial = assertColorPickerInitialPart("swatchGroup", suppliedInitial);\nconst mergedStyle = mergeColorPickerInitialStyles(style, initial);\n---\n\n<div {...rest} {...initial?.attributes} style={mergedStyle} data-sw-color-picker-swatch-group>\n  <slot />\n</div>\n',
+          sourceHash: "sha256:5e4361fbf4bd5101d1980bf4d1f256eb2698c0cb00259dfc6f3d03241c3ecbbd",
+          sourcePath: "packages/astro/src/color-picker/ColorPickerSwatchGroup.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerTransparencyGrid.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\nimport type { ColorPickerInitialPartProjection } from "@starwind-ui/runtime/color-picker";\nimport {\n  assertColorPickerInitialPart,\n  mergeColorPickerInitialStyles,\n} from "./ColorPickerRenderProjection";\n\ninterface Props extends HTMLAttributes<"span"> {\n  initial?: ColorPickerInitialPartProjection;\n}\nconst { initial: suppliedInitial, style, ...rest } = Astro.props;\nconst initial = assertColorPickerInitialPart("transparencyGrid", suppliedInitial);\nconst mergedStyle = mergeColorPickerInitialStyles(style, initial);\n---\n\n<span {...rest} {...initial?.attributes} style={mergedStyle} data-sw-color-picker-transparency-grid>\n  <slot />\n</span>\n',
+          sourceHash: "sha256:728ed52e2856935c9237ecf49ea6d25ac08b487478f71580b0fbb60972b16e1c",
+          sourcePath: "packages/astro/src/color-picker/ColorPickerTransparencyGrid.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerValueInput.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\nimport type { ColorPickerInitialPartProjection } from "@starwind-ui/runtime/color-picker";\nimport {\n  assertColorPickerInitialPart,\n  mergeColorPickerInitialStyles,\n} from "./ColorPickerRenderProjection";\n\ninterface Props extends HTMLAttributes<"input"> {\n  initial?: ColorPickerInitialPartProjection;\n\n  readOnly?: boolean;\n}\nconst { initial: suppliedInitial, style, value, disabled, readOnly, hidden, ...rest } = Astro.props;\nconst initial = assertColorPickerInitialPart("valueInput", suppliedInitial);\nconst mergedStyle = mergeColorPickerInitialStyles(style, initial);\n---\n\n<input\n  {...rest}\n  {...initial?.attributes}\n  value={initial?.properties.value ?? value}\n  disabled={initial?.properties.disabled ?? disabled}\n  readonly={initial?.properties.readOnly ?? readOnly}\n  hidden={initial?.properties.hidden ?? hidden ?? false}\n  style={mergedStyle}\n  data-sw-color-picker-value-input\n/>\n',
+          sourceHash: "sha256:15c6a27d4cedcb4575764b93c2be10d3c5748d22a6359efff0b11d8b164cfec7",
+          sourcePath: "packages/astro/src/color-picker/ColorPickerValueInput.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerValueSwatch.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\nimport type { ColorPickerInitialPartProjection } from "@starwind-ui/runtime/color-picker";\nimport {\n  assertColorPickerInitialPart,\n  mergeColorPickerInitialStyles,\n} from "./ColorPickerRenderProjection";\n\ninterface Props extends HTMLAttributes<"span"> {\n  initial?: ColorPickerInitialPartProjection;\n}\nconst { initial: suppliedInitial, style, ...rest } = Astro.props;\nconst initial = assertColorPickerInitialPart("valueSwatch", suppliedInitial);\nconst mergedStyle = mergeColorPickerInitialStyles(style, initial);\n---\n\n<span {...rest} {...initial?.attributes} style={mergedStyle} data-sw-color-picker-value-swatch>\n  <slot />\n</span>\n',
+          sourceHash: "sha256:5b662c0aa87703f6ce2adb97e363b7d8a990ef0830f80d896944eb75d750fe64",
+          sourcePath: "packages/astro/src/color-picker/ColorPickerValueSwatch.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerValueText.astro",
+          content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\nimport type { ColorPickerInitialPartProjection } from "@starwind-ui/runtime/color-picker";\nimport {\n  assertColorPickerInitialPart,\n  mergeColorPickerInitialStyles,\n} from "./ColorPickerRenderProjection";\n\ninterface Props extends HTMLAttributes<"span"> {\n  initial?: ColorPickerInitialPartProjection;\n}\nconst { initial: suppliedInitial, style, ...rest } = Astro.props;\nconst initial = assertColorPickerInitialPart("valueText", suppliedInitial);\nconst mergedStyle = mergeColorPickerInitialStyles(style, initial);\n---\n\n<span {...rest} {...initial?.attributes} style={mergedStyle} data-sw-color-picker-value-text>\n  <slot>{initial?.text}</slot>\n</span>\n',
+          sourceHash: "sha256:7ad0e80be15f1041071d4b827ef694e72333f9ba09a292c2bd54d1d9482c8ac5",
+          sourcePath: "packages/astro/src/color-picker/ColorPickerValueText.astro"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/index.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport ColorPickerRoot from "./ColorPickerRoot.astro";\nimport ColorPickerLabel from "./ColorPickerLabel.astro";\nimport ColorPickerControl from "./ColorPickerControl.astro";\nimport ColorPickerValueInput from "./ColorPickerValueInput.astro";\nimport ColorPickerValueSwatch from "./ColorPickerValueSwatch.astro";\nimport ColorPickerValueText from "./ColorPickerValueText.astro";\nimport ColorPickerArea from "./ColorPickerArea.astro";\nimport ColorPickerAreaBackground from "./ColorPickerAreaBackground.astro";\nimport ColorPickerAreaThumb from "./ColorPickerAreaThumb.astro";\nimport ColorPickerAreaInput from "./ColorPickerAreaInput.astro";\nimport ColorPickerChannelSlider from "./ColorPickerChannelSlider.astro";\nimport ColorPickerChannelSliderTrack from "./ColorPickerChannelSliderTrack.astro";\nimport ColorPickerChannelSliderThumb from "./ColorPickerChannelSliderThumb.astro";\nimport ColorPickerChannelSliderInput from "./ColorPickerChannelSliderInput.astro";\nimport ColorPickerChannelInput from "./ColorPickerChannelInput.astro";\nimport ColorPickerFormatSelect from "./ColorPickerFormatSelect.astro";\nimport ColorPickerFormatControl from "./ColorPickerFormatControl.astro";\nimport ColorPickerTransparencyGrid from "./ColorPickerTransparencyGrid.astro";\nimport ColorPickerSwatchGroup from "./ColorPickerSwatchGroup.astro";\nimport ColorPickerSwatch from "./ColorPickerSwatch.astro";\nimport ColorPickerEyeDropperTrigger from "./ColorPickerEyeDropperTrigger.astro";\nimport ColorPickerClear from "./ColorPickerClear.astro";\nimport ColorPickerHiddenInput from "./ColorPickerHiddenInput.astro";\n\nconst ColorPicker = {\n  Root: ColorPickerRoot,\n  Label: ColorPickerLabel,\n  Control: ColorPickerControl,\n  ValueInput: ColorPickerValueInput,\n  ValueSwatch: ColorPickerValueSwatch,\n  ValueText: ColorPickerValueText,\n  Area: ColorPickerArea,\n  AreaBackground: ColorPickerAreaBackground,\n  AreaThumb: ColorPickerAreaThumb,\n  AreaInput: ColorPickerAreaInput,\n  ChannelSlider: ColorPickerChannelSlider,\n  ChannelSliderTrack: ColorPickerChannelSliderTrack,\n  ChannelSliderThumb: ColorPickerChannelSliderThumb,\n  ChannelSliderInput: ColorPickerChannelSliderInput,\n  ChannelInput: ColorPickerChannelInput,\n  FormatSelect: ColorPickerFormatSelect,\n  FormatControl: ColorPickerFormatControl,\n  TransparencyGrid: ColorPickerTransparencyGrid,\n  SwatchGroup: ColorPickerSwatchGroup,\n  Swatch: ColorPickerSwatch,\n  EyeDropperTrigger: ColorPickerEyeDropperTrigger,\n  Clear: ColorPickerClear,\n  HiddenInput: ColorPickerHiddenInput,\n};\n\nexport {\n  ColorPicker,\n  ColorPickerRoot,\n  ColorPickerLabel,\n  ColorPickerControl,\n  ColorPickerValueInput,\n  ColorPickerValueSwatch,\n  ColorPickerValueText,\n  ColorPickerArea,\n  ColorPickerAreaBackground,\n  ColorPickerAreaThumb,\n  ColorPickerAreaInput,\n  ColorPickerChannelSlider,\n  ColorPickerChannelSliderTrack,\n  ColorPickerChannelSliderThumb,\n  ColorPickerChannelSliderInput,\n  ColorPickerChannelInput,\n  ColorPickerFormatSelect,\n  ColorPickerFormatControl,\n  ColorPickerTransparencyGrid,\n  ColorPickerSwatchGroup,\n  ColorPickerSwatch,\n  ColorPickerEyeDropperTrigger,\n  ColorPickerClear,\n  ColorPickerHiddenInput,\n};\n\nexport default ColorPicker;\n\nexport type {\n  ColorPickerAreaProjection,\n  ColorPickerChannelSliderProjection,\n  ColorPickerInitialProps,\n  ColorPickerRenderProjection,\n} from "./ColorPickerRenderProjection";\nexport {\n  createColorPickerInitialState,\n  parseColor,\n  projectColorPickerInitialPart,\n} from "@starwind-ui/runtime/color-picker";\nexport type {\n  ColorPickerChannel,\n  ColorPickerColor,\n  ColorPickerDirection,\n  ColorPickerFormat,\n  ColorPickerFormatChangeDetails,\n  ColorPickerHsbChannelUpdates,\n  ColorPickerHsbChannels,\n  ColorPickerHslChannelUpdates,\n  ColorPickerHslChannels,\n  ColorPickerInstance,\n  ColorPickerInitialAxis,\n  ColorPickerInitialChannel,\n  ColorPickerInitialDirection,\n  ColorPickerInitialOrientation,\n  ColorPickerInitialPartName,\n  ColorPickerInitialPartProjection,\n  ColorPickerInitialPartRequest,\n  ColorPickerInitialState,\n  ColorPickerInitialStateOptions,\n  ColorPickerInitialValue,\n  ColorPickerOptions,\n  ColorPickerRgbChannelUpdates,\n  ColorPickerRgbChannels,\n  ColorPickerSetOptions,\n  ColorPickerSetValueOptions,\n  ColorPickerStringFormat,\n  ColorPickerValue,\n  ColorPickerValueChangeDetails,\n  ColorPickerValueChangeReason,\n  ColorPickerValueCommitDetails,\n} from "@starwind-ui/runtime/color-picker";\n',
+          sourceHash: "sha256:76e9681916afa443711e9e42c685658a483816d11dd205c80a550781cce1b8c8",
+          sourcePath: "packages/astro/src/color-picker/index.ts"
+        },
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
+        }
+      ],
+      packageRequirements: [
+        {
+          name: "@starwind-ui/runtime",
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -15261,6 +15974,12 @@ if (!src && !image) {
       framework: "astro",
       version: "0.1.0",
       files: [
+        {
+          path: "src/components/starwind-primitives/internal/controller-lifecycle.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\ntype AstroController = {\n  destroy(): void;\n};\n\ntype AstroControllerSetup = (event?: Event) => void;\n\ntype AstroControllerLifecycle = {\n  controllers: WeakMap<HTMLElement, AstroController>;\n  destroy?: () => void;\n  registered: boolean;\n  roots: Set<HTMLElement>;\n  setup: AstroControllerSetup;\n};\n\nconst lifecycles = new Map<string, AstroControllerLifecycle>();\n\nexport function registerAstroControllerLifecycle(\n  key: string,\n  setup: AstroControllerSetup,\n  destroy?: () => void,\n): void {\n  const lifecycle = getLifecycle(key);\n  lifecycle.setup = setup;\n  lifecycle.destroy = destroy;\n\n  if (!lifecycle.registered) {\n    lifecycle.registered = true;\n    document.addEventListener("astro:after-swap", () => lifecycle.setup());\n    document.addEventListener("starwind:init", (event) => lifecycle.setup(event));\n    document.addEventListener("astro:before-swap", () => destroyLifecycle(lifecycle));\n  }\n\n  lifecycle.setup();\n}\n\nexport function trackAstroController<T extends AstroController>(\n  key: string,\n  root: HTMLElement,\n  controller: T,\n): T {\n  const lifecycle = getLifecycle(key);\n  const previous = lifecycle.controllers.get(root);\n\n  if (previous && previous !== controller) {\n    previous.destroy();\n  }\n\n  lifecycle.controllers.set(root, controller);\n  lifecycle.roots.add(root);\n  return controller;\n}\n\nfunction getLifecycle(key: string): AstroControllerLifecycle {\n  const existing = lifecycles.get(key);\n  if (existing) return existing;\n\n  const lifecycle: AstroControllerLifecycle = {\n    controllers: new WeakMap(),\n    registered: false,\n    roots: new Set(),\n    setup: () => {},\n  };\n  lifecycles.set(key, lifecycle);\n  return lifecycle;\n}\n\nfunction destroyLifecycle(lifecycle: AstroControllerLifecycle): void {\n  if (lifecycle.destroy) {\n    lifecycle.destroy();\n  }\n\n  lifecycle.roots.forEach((root) => {\n    lifecycle.controllers.get(root)?.destroy();\n    lifecycle.controllers.delete(root);\n  });\n  lifecycle.roots.clear();\n}\n',
+          sourceHash: "sha256:690d4aa4512228d3d6bb9a0a5357a90c63e6fe9471849494335d45b6236f9f1b",
+          sourcePath: "packages/astro/src/internal/controller-lifecycle.ts"
+        },
         {
           path: "src/components/starwind-primitives/toast/ToastAction.astro",
           content: '---\n/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\nimport type { HTMLAttributes } from "astro/types";\n\ntype Props = HTMLAttributes<"button">;\n\nconst { ...rest } = Astro.props;\n---\n\n<button type="button" data-sw-toast-action {...rest}>\n  <slot />\n</button>\n',
@@ -15325,7 +16044,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "astro",
@@ -15336,12 +16055,12 @@ if (!src && !image) {
     {
       component: "button",
       framework: "react",
-      version: "0.1.0",
+      version: "0.1.1",
       files: [
         {
           path: "src/components/starwind-primitives/button/ButtonRoot.tsx",
-          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport { createButton } from "@starwind-ui/runtime/button";\nimport * as React from "react";\nimport { setRef } from "../internal/compose-refs";\nimport { useIsomorphicLayoutEffect } from "../internal/use-isomorphic-layout-effect";\n\nexport type ButtonRootProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n  disabled?: boolean;\n  focusableWhenDisabled?: boolean;\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>["type"];\n};\n\nconst ButtonRoot = React.forwardRef<HTMLButtonElement, ButtonRootProps>(function ButtonRoot(\n  { disabled = false, focusableWhenDisabled = false, type, ...props },\n  forwardedRef,\n) {\n  const rootRef = React.useRef<HTMLButtonElement>(null);\n\n  const composedRef = React.useCallback(\n    (node: HTMLButtonElement | null) => {\n      rootRef.current = node;\n      return setRef(forwardedRef, node);\n    },\n    [forwardedRef],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    const root = rootRef.current;\n    if (!root) return;\n\n    const instance = createButton(root, {\n      disabled,\n      focusableWhenDisabled,\n    });\n\n    return () => {\n      instance.destroy();\n    };\n  }, [disabled, focusableWhenDisabled]);\n\n  return (\n    <button\n      data-focusable-when-disabled={focusableWhenDisabled ? "true" : undefined}\n      aria-disabled={disabled && focusableWhenDisabled ? "true" : undefined}\n      data-disabled={disabled ? "" : undefined}\n      disabled={disabled && !focusableWhenDisabled}\n      ref={composedRef}\n      type={type ?? "button"}\n      {...props}\n      data-sw-button\n    />\n  );\n});\n\nButtonRoot.displayName = "Button.Root";\n\nexport default ButtonRoot;\n',
-          sourceHash: "sha256:4143b2bd56c71a9efe7b4e68e3b1b4dbf3d30364f2c31488c52d252dbe56a202",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport { createButton } from "@starwind-ui/runtime/button";\nimport * as React from "react";\nimport { setRef } from "../internal/compose-refs";\nimport { useIsomorphicLayoutEffect } from "../internal/use-isomorphic-layout-effect";\n\nexport type ButtonRootProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n  disabled?: boolean;\n  focusableWhenDisabled?: boolean;\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>["type"];\n};\n\nconst ButtonRoot = React.forwardRef<HTMLButtonElement, ButtonRootProps>(function ButtonRoot(\n  { disabled = false, focusableWhenDisabled = false, type, ...props },\n  forwardedRef,\n) {\n  const rootRef = React.useRef<HTMLButtonElement>(null);\n  const instanceRef = React.useRef<ReturnType<typeof createButton> | null>(null);\n  const disabledRef = React.useRef(disabled);\n  disabledRef.current = disabled;\n\n  const composedRef = React.useCallback(\n    (node: HTMLButtonElement | null) => {\n      rootRef.current = node;\n      return setRef(forwardedRef, node);\n    },\n    [forwardedRef],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (!focusableWhenDisabled) {\n      instanceRef.current?.destroy();\n      instanceRef.current = null;\n      return;\n    }\n\n    const root = rootRef.current;\n    if (!root) return;\n\n    const instance = createButton(root, {\n      disabled: disabledRef.current,\n    });\n    instanceRef.current = instance;\n\n    return () => {\n      if (instanceRef.current === instance) {\n        instanceRef.current = null;\n      }\n      instance.destroy();\n    };\n  }, [focusableWhenDisabled]);\n\n  useIsomorphicLayoutEffect(() => {\n    instanceRef.current?.setDisabled(disabled);\n  }, [disabled]);\n\n  return (\n    <button\n      data-focusable-when-disabled={focusableWhenDisabled ? "true" : undefined}\n      aria-disabled={disabled && focusableWhenDisabled ? "true" : undefined}\n      data-disabled={disabled ? "" : undefined}\n      disabled={disabled && !focusableWhenDisabled}\n      ref={composedRef}\n      type={type ?? "button"}\n      {...props}\n      data-sw-button\n    />\n  );\n});\n\nButtonRoot.displayName = "Button.Root";\n\nexport default ButtonRoot;\n',
+          sourceHash: "sha256:59d410043fac11cbdacbd52b844bb4bd5bbaf5bfc9174b21c9ff67fa6daa14da",
           sourcePath: "packages/react/src/button/ButtonRoot.tsx"
         },
         {
@@ -15366,7 +16085,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -15441,7 +16160,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -15486,7 +16205,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -15573,7 +16292,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -15624,7 +16343,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -15675,7 +16394,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -15720,7 +16439,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -15771,7 +16490,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -15828,7 +16547,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -15885,7 +16604,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -15960,7 +16679,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -16017,7 +16736,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -16062,7 +16781,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -16113,7 +16832,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -16164,7 +16883,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -16239,7 +16958,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -16254,7 +16973,7 @@ if (!src && !image) {
     {
       component: "accordion",
       framework: "react",
-      version: "0.1.0",
+      version: "0.1.1",
       files: [
         {
           path: "src/components/starwind-primitives/accordion/AccordionHeader.tsx",
@@ -16276,8 +16995,8 @@ if (!src && !image) {
         },
         {
           path: "src/components/starwind-primitives/accordion/AccordionRoot.tsx",
-          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport {\n  type AccordionValue,\n  type AccordionValueChangeDetails,\n  createAccordion,\n} from "@starwind-ui/runtime/accordion";\nimport * as React from "react";\nimport { setRef } from "../internal/compose-refs";\nimport { useIsomorphicLayoutEffect } from "../internal/use-isomorphic-layout-effect";\n\nexport type AccordionRootProps = Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  "defaultValue" | "onChange"\n> & {\n  type?: "single" | "multiple";\n  defaultValue?: AccordionValue;\n  value?: AccordionValue;\n  collapsible?: boolean;\n  onValueChange?: (details: AccordionValueChangeDetails) => void;\n};\n\nconst AccordionRoot = React.forwardRef<HTMLDivElement, AccordionRootProps>(function AccordionRoot(\n  { type = "single", defaultValue, value, collapsible = false, onValueChange, ...props },\n  forwardedRef,\n) {\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const instanceRef = React.useRef<ReturnType<typeof createAccordion> | undefined>(undefined);\n  const onValueChangeRef = React.useRef(onValueChange);\n  const valueRef = React.useRef(value);\n  const defaultValueRef = React.useRef(defaultValue);\n  const uncontrolledValueRef = React.useRef<AccordionValue | undefined>(defaultValueRef.current);\n\n  useIsomorphicLayoutEffect(() => {\n    onValueChangeRef.current = onValueChange;\n  }, [onValueChange]);\n\n  useIsomorphicLayoutEffect(() => {\n    valueRef.current = value;\n  }, [value]);\n\n  const composedRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      rootRef.current = node;\n      return setRef(forwardedRef, node);\n    },\n    [forwardedRef],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    const root = rootRef.current;\n    if (!root) return;\n\n    const instance = createAccordion(root, {\n      type,\n      defaultValue: uncontrolledValueRef.current,\n      collapsible,\n      ...(valueRef.current !== undefined ? { value: valueRef.current } : {}),\n    });\n    instanceRef.current = instance;\n    const unsubscribe = instance.subscribe("valueChange", (details) => {\n      onValueChangeRef.current?.(details);\n      if (valueRef.current === undefined) {\n        uncontrolledValueRef.current = details.value;\n      }\n    });\n\n    return () => {\n      unsubscribe();\n      instance.destroy();\n      if (instanceRef.current === instance) {\n        instanceRef.current = undefined;\n      }\n    };\n  }, [type, collapsible]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (value === undefined) return;\n    const instance = instanceRef.current;\n    if (!instance) return;\n    if (isAccordionValueEqual(instance.getValue(), value)) return;\n\n    instance.setValue(value, { emit: false });\n  }, [value]);\n\n  const defaultValueAttribute = Array.isArray(defaultValueRef.current)\n    ? JSON.stringify(defaultValueRef.current)\n    : defaultValueRef.current;\n\n  return (\n    <div\n      data-sw-accordion\n      data-type={type}\n      data-default-value={defaultValueAttribute}\n      data-collapsible={collapsible ? "true" : undefined}\n      data-state="closed"\n      ref={composedRef}\n      {...props}\n    />\n  );\n});\n\nAccordionRoot.displayName = "Accordion.Root";\n\nexport default AccordionRoot;\n\nfunction isAccordionValueEqual(left: AccordionValue, right: AccordionValue): boolean {\n  if (Array.isArray(left) || Array.isArray(right)) {\n    return JSON.stringify(left) === JSON.stringify(right);\n  }\n\n  return left === right;\n}\n',
-          sourceHash: "sha256:c013100c694a13e03795cf78fb5898c62465d39768311201d66f3d63883c39d5",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport {\n  type AccordionValue,\n  type AccordionValueChangeDetails,\n  createAccordion,\n} from "@starwind-ui/runtime/accordion";\nimport * as React from "react";\nimport { setRef } from "../internal/compose-refs";\nimport { useIsomorphicLayoutEffect } from "../internal/use-isomorphic-layout-effect";\n\nexport type AccordionRootProps = Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  "defaultValue" | "onChange"\n> & {\n  type?: "single" | "multiple";\n  defaultValue?: AccordionValue;\n  value?: AccordionValue;\n  collapsible?: boolean;\n  onValueChange?: (details: AccordionValueChangeDetails) => void;\n};\n\nconst AccordionRoot = React.forwardRef<HTMLDivElement, AccordionRootProps>(function AccordionRoot(\n  { type = "single", defaultValue, value, collapsible = true, onValueChange, ...props },\n  forwardedRef,\n) {\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const instanceRef = React.useRef<ReturnType<typeof createAccordion> | undefined>(undefined);\n  const onValueChangeRef = React.useRef(onValueChange);\n  const valueRef = React.useRef(value);\n  const defaultValueRef = React.useRef(defaultValue);\n  const uncontrolledValueRef = React.useRef<AccordionValue | undefined>(defaultValueRef.current);\n\n  useIsomorphicLayoutEffect(() => {\n    onValueChangeRef.current = onValueChange;\n  }, [onValueChange]);\n\n  useIsomorphicLayoutEffect(() => {\n    valueRef.current = value;\n  }, [value]);\n\n  const composedRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      rootRef.current = node;\n      return setRef(forwardedRef, node);\n    },\n    [forwardedRef],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    const root = rootRef.current;\n    if (!root) return;\n\n    const instance = createAccordion(root, {\n      type,\n      defaultValue: uncontrolledValueRef.current,\n      collapsible,\n      ...(valueRef.current !== undefined ? { value: valueRef.current } : {}),\n    });\n    instanceRef.current = instance;\n    const unsubscribe = instance.subscribe("valueChange", (details) => {\n      onValueChangeRef.current?.(details);\n      if (valueRef.current === undefined) {\n        uncontrolledValueRef.current = details.value;\n      }\n    });\n\n    return () => {\n      unsubscribe();\n      instance.destroy();\n      if (instanceRef.current === instance) {\n        instanceRef.current = undefined;\n      }\n    };\n  }, [type, collapsible]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (value === undefined) return;\n    const instance = instanceRef.current;\n    if (!instance) return;\n    if (isAccordionValueEqual(instance.getValue(), value)) return;\n\n    instance.setValue(value, { emit: false });\n  }, [value]);\n\n  const defaultValueAttribute = Array.isArray(defaultValueRef.current)\n    ? JSON.stringify(defaultValueRef.current)\n    : defaultValueRef.current;\n\n  return (\n    <div\n      data-sw-accordion\n      data-type={type}\n      data-default-value={defaultValueAttribute}\n      data-collapsible={String(collapsible)}\n      data-state="closed"\n      ref={composedRef}\n      {...props}\n    />\n  );\n});\n\nAccordionRoot.displayName = "Accordion.Root";\n\nexport default AccordionRoot;\n\nfunction isAccordionValueEqual(left: AccordionValue, right: AccordionValue): boolean {\n  if (Array.isArray(left) || Array.isArray(right)) {\n    return JSON.stringify(left) === JSON.stringify(right);\n  }\n\n  return left === right;\n}\n',
+          sourceHash: "sha256:17a4321eac074ca45aa0de4b98439ba1080634fe9623bad7032c52d540ffcadf",
           sourcePath: "packages/react/src/accordion/AccordionRoot.tsx"
         },
         {
@@ -16308,7 +17027,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -16365,7 +17084,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -16434,7 +17153,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -16509,7 +17228,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -16572,7 +17291,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -16647,7 +17366,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -16752,7 +17471,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -16839,7 +17558,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -16920,7 +17639,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -17013,7 +17732,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -17106,7 +17825,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -17175,7 +17894,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -17328,7 +18047,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -17439,7 +18158,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -17592,7 +18311,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -17745,7 +18464,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -17820,7 +18539,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -17985,7 +18704,184 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
+        },
+        {
+          name: "react",
+          range: ">=18"
+        },
+        {
+          name: "react-dom",
+          range: ">=18"
+        }
+      ]
+    },
+    {
+      component: "color-picker",
+      framework: "react",
+      version: "0.1.0",
+      files: [
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerArea.tsx",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport * as React from "react";\nimport { useColorPickerPartProjection, ColorPickerAreaContext } from "./ColorPickerRoot";\nimport type { ColorPickerInitialChannel } from "@starwind-ui/runtime/color-picker";\n\nexport type ColorPickerAreaProps = React.ComponentPropsWithoutRef<"div"> & {\n  children?: React.ReactNode;\n  xChannel?: ColorPickerInitialChannel;\n  yChannel?: ColorPickerInitialChannel;\n  xStep?: number;\n  yStep?: number;\n};\n\nconst ColorPickerArea = React.forwardRef<HTMLDivElement, ColorPickerAreaProps>(\n  function ColorPickerArea(\n    { children, xChannel = "saturation", yChannel = "brightness", xStep, yStep, ...props },\n    forwardedRef,\n  ) {\n    const areaContextValue = React.useMemo(\n      () => ({ xChannel, yChannel, xStep, yStep }),\n      [xChannel, yChannel, xStep, yStep],\n    );\n    const { props: projectedProps } = useColorPickerPartProjection(\n      { part: "area", ...areaContextValue },\n      {\n        ...props,\n        "data-sw-color-picker-area": "",\n        "data-x-channel": xChannel,\n        "data-y-channel": yChannel,\n      },\n    );\n    return (\n      <ColorPickerAreaContext.Provider value={areaContextValue}>\n        <div {...projectedProps} ref={forwardedRef}>\n          {children}\n        </div>\n      </ColorPickerAreaContext.Provider>\n    );\n  },\n);\n\nColorPickerArea.displayName = "ColorPicker.Area";\n\nexport default ColorPickerArea;\n',
+          sourceHash: "sha256:280923c4f3381ddc20aa1683220f06c234dd2c350b89b82f98e335bdd172c896",
+          sourcePath: "packages/react/src/color-picker/ColorPickerArea.tsx"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerAreaBackground.tsx",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport * as React from "react";\nimport { useColorPickerPartProjection, useColorPickerAreaContext } from "./ColorPickerRoot";\n\nexport type ColorPickerAreaBackgroundProps = React.ComponentPropsWithoutRef<"div"> & {\n  children?: React.ReactNode;\n};\n\nconst ColorPickerAreaBackground = React.forwardRef<HTMLDivElement, ColorPickerAreaBackgroundProps>(\n  function ColorPickerAreaBackground({ children, ...props }, forwardedRef) {\n    const areaContext = useColorPickerAreaContext();\n    const { props: projectedProps } = useColorPickerPartProjection(\n      { part: "areaBackground", ...areaContext },\n      { ...props, "data-sw-color-picker-area-background": "" },\n    );\n    return (\n      <div {...projectedProps} ref={forwardedRef}>\n        {children}\n      </div>\n    );\n  },\n);\n\nColorPickerAreaBackground.displayName = "ColorPicker.AreaBackground";\n\nexport default ColorPickerAreaBackground;\n',
+          sourceHash: "sha256:4d181ea31cffeacd9964355859bf949ed54aaea6f51cfc4dd1f011e5e77b886c",
+          sourcePath: "packages/react/src/color-picker/ColorPickerAreaBackground.tsx"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerAreaInput.tsx",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport * as React from "react";\nimport { useColorPickerPartProjection, useColorPickerAreaContext } from "./ColorPickerRoot";\n\nexport type ColorPickerAreaInputProps = React.ComponentPropsWithoutRef<"input"> & {\n  axis?: "x" | "y";\n  step?: number;\n};\n\nconst ColorPickerAreaInput = React.forwardRef<HTMLInputElement, ColorPickerAreaInputProps>(\n  function ColorPickerAreaInput({ axis = "x", step, ...props }, forwardedRef) {\n    const areaContext = useColorPickerAreaContext();\n    const { props: projectedProps } = useColorPickerPartProjection(\n      {\n        part: "areaInput",\n        ...areaContext,\n        axis,\n        ...(axis === "x"\n          ? { xStep: step ?? areaContext.xStep }\n          : { yStep: step ?? areaContext.yStep }),\n      },\n      {\n        ...props,\n        "data-sw-color-picker-area-input": "",\n        "data-axis": axis,\n        "data-step": step ?? (axis === "x" ? areaContext.xStep : areaContext.yStep),\n      },\n    );\n    return <input {...projectedProps} ref={forwardedRef} />;\n  },\n);\n\nColorPickerAreaInput.displayName = "ColorPicker.AreaInput";\n\nexport default ColorPickerAreaInput;\n',
+          sourceHash: "sha256:73a6f6a4def2a4b7156edec1a37b1b33d0ccd9bceff98ee7d9e803990cd5ba79",
+          sourcePath: "packages/react/src/color-picker/ColorPickerAreaInput.tsx"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerAreaThumb.tsx",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport * as React from "react";\nimport { useColorPickerPartProjection, useColorPickerAreaContext } from "./ColorPickerRoot";\n\nexport type ColorPickerAreaThumbProps = React.ComponentPropsWithoutRef<"span"> & {\n  children?: React.ReactNode;\n};\n\nconst ColorPickerAreaThumb = React.forwardRef<HTMLSpanElement, ColorPickerAreaThumbProps>(\n  function ColorPickerAreaThumb({ children, ...props }, forwardedRef) {\n    const areaContext = useColorPickerAreaContext();\n    const { props: projectedProps } = useColorPickerPartProjection(\n      { part: "areaThumb", ...areaContext },\n      { ...props, "data-sw-color-picker-area-thumb": "" },\n    );\n    return (\n      <span {...projectedProps} ref={forwardedRef}>\n        {children}\n      </span>\n    );\n  },\n);\n\nColorPickerAreaThumb.displayName = "ColorPicker.AreaThumb";\n\nexport default ColorPickerAreaThumb;\n',
+          sourceHash: "sha256:d6577229f89a7ae04df9d5d7cac40cc40c594871de12edba882219f59e853f4b",
+          sourcePath: "packages/react/src/color-picker/ColorPickerAreaThumb.tsx"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerChannelInput.tsx",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport * as React from "react";\nimport { useColorPickerPartProjection } from "./ColorPickerRoot";\nimport type { ColorPickerInitialChannel } from "@starwind-ui/runtime/color-picker";\n\nexport type ColorPickerChannelInputProps = React.ComponentPropsWithoutRef<"input"> & {\n  channel?: ColorPickerInitialChannel;\n};\n\nconst ColorPickerChannelInput = React.forwardRef<HTMLInputElement, ColorPickerChannelInputProps>(\n  function ColorPickerChannelInput({ channel = "hue", ...props }, forwardedRef) {\n    const { props: projectedProps } = useColorPickerPartProjection(\n      { part: "channelInput", channel },\n      { ...props, "data-sw-color-picker-channel-field": "", "data-channel": channel },\n    );\n    return <input {...projectedProps} ref={forwardedRef} />;\n  },\n);\n\nColorPickerChannelInput.displayName = "ColorPicker.ChannelInput";\n\nexport default ColorPickerChannelInput;\n',
+          sourceHash: "sha256:c94a3d1ee2499a09f282493370b5a12df8c86fbba8a35390b0a36aa0b55e50b6",
+          sourcePath: "packages/react/src/color-picker/ColorPickerChannelInput.tsx"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerChannelSlider.tsx",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport * as React from "react";\nimport { useColorPickerPartProjection, ColorPickerChannelSliderContext } from "./ColorPickerRoot";\nimport type { ColorPickerInitialChannel } from "@starwind-ui/runtime/color-picker";\n\nexport type ColorPickerChannelSliderProps = React.ComponentPropsWithoutRef<"div"> & {\n  children?: React.ReactNode;\n  channel?: ColorPickerInitialChannel;\n  orientation?: "horizontal" | "vertical";\n  step?: number;\n};\n\nconst ColorPickerChannelSlider = React.forwardRef<HTMLDivElement, ColorPickerChannelSliderProps>(\n  function ColorPickerChannelSlider(\n    { children, channel = "hue", orientation = "horizontal", step, ...props },\n    forwardedRef,\n  ) {\n    const sliderContextValue = React.useMemo(\n      () => ({ channel, orientation, step }),\n      [channel, orientation, step],\n    );\n    const { props: projectedProps } = useColorPickerPartProjection(\n      { part: "channelSlider", ...sliderContextValue },\n      {\n        ...props,\n        "data-sw-color-picker-channel-slider": "",\n        "data-channel": channel,\n        "data-orientation": orientation,\n      },\n    );\n    return (\n      <ColorPickerChannelSliderContext.Provider value={sliderContextValue}>\n        <div {...projectedProps} ref={forwardedRef}>\n          {children}\n        </div>\n      </ColorPickerChannelSliderContext.Provider>\n    );\n  },\n);\n\nColorPickerChannelSlider.displayName = "ColorPicker.ChannelSlider";\n\nexport default ColorPickerChannelSlider;\n',
+          sourceHash: "sha256:ed42cb23f5d23e5a82c45681348acd0387308f7b84302dcd11958e465188f744",
+          sourcePath: "packages/react/src/color-picker/ColorPickerChannelSlider.tsx"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerChannelSliderInput.tsx",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport * as React from "react";\nimport {\n  useColorPickerPartProjection,\n  useColorPickerChannelSliderContext,\n} from "./ColorPickerRoot";\n\nexport type ColorPickerChannelSliderInputProps = React.ComponentPropsWithoutRef<"input"> & {\n  step?: number;\n};\n\nconst ColorPickerChannelSliderInput = React.forwardRef<\n  HTMLInputElement,\n  ColorPickerChannelSliderInputProps\n>(function ColorPickerChannelSliderInput({ step, ...props }, forwardedRef) {\n  const sliderContext = useColorPickerChannelSliderContext();\n  const { props: projectedProps } = useColorPickerPartProjection(\n    { part: "channelSliderInput", ...sliderContext, step: step ?? sliderContext.step },\n    { ...props, "data-sw-color-picker-channel-input": "", "data-step": step ?? sliderContext.step },\n  );\n  return <input {...projectedProps} ref={forwardedRef} />;\n});\n\nColorPickerChannelSliderInput.displayName = "ColorPicker.ChannelSliderInput";\n\nexport default ColorPickerChannelSliderInput;\n',
+          sourceHash: "sha256:ee381ccff2019aa383a1cdc373cb7a3609d02e2a3023642f2a08f4f2f1ce7e3a",
+          sourcePath: "packages/react/src/color-picker/ColorPickerChannelSliderInput.tsx"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerChannelSliderThumb.tsx",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport * as React from "react";\nimport {\n  useColorPickerPartProjection,\n  useColorPickerChannelSliderContext,\n} from "./ColorPickerRoot";\n\nexport type ColorPickerChannelSliderThumbProps = React.ComponentPropsWithoutRef<"span"> & {\n  children?: React.ReactNode;\n};\n\nconst ColorPickerChannelSliderThumb = React.forwardRef<\n  HTMLSpanElement,\n  ColorPickerChannelSliderThumbProps\n>(function ColorPickerChannelSliderThumb({ children, ...props }, forwardedRef) {\n  const sliderContext = useColorPickerChannelSliderContext();\n  const { props: projectedProps } = useColorPickerPartProjection(\n    { part: "channelSliderThumb", ...sliderContext },\n    { ...props, "data-sw-color-picker-channel-slider-thumb": "" },\n  );\n  return (\n    <span {...projectedProps} ref={forwardedRef}>\n      {children}\n    </span>\n  );\n});\n\nColorPickerChannelSliderThumb.displayName = "ColorPicker.ChannelSliderThumb";\n\nexport default ColorPickerChannelSliderThumb;\n',
+          sourceHash: "sha256:b06c1e7ba62188190be023e1fc9784376ceec17a8a13d6edbd037e96362ce52c",
+          sourcePath: "packages/react/src/color-picker/ColorPickerChannelSliderThumb.tsx"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerChannelSliderTrack.tsx",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport * as React from "react";\nimport {\n  useColorPickerPartProjection,\n  useColorPickerChannelSliderContext,\n} from "./ColorPickerRoot";\n\nexport type ColorPickerChannelSliderTrackProps = React.ComponentPropsWithoutRef<"div"> & {\n  children?: React.ReactNode;\n};\n\nconst ColorPickerChannelSliderTrack = React.forwardRef<\n  HTMLDivElement,\n  ColorPickerChannelSliderTrackProps\n>(function ColorPickerChannelSliderTrack({ children, ...props }, forwardedRef) {\n  const sliderContext = useColorPickerChannelSliderContext();\n  const { props: projectedProps } = useColorPickerPartProjection(\n    { part: "channelSliderTrack", ...sliderContext },\n    { ...props, "data-sw-color-picker-channel-slider-track": "" },\n  );\n  return (\n    <div {...projectedProps} ref={forwardedRef}>\n      {children}\n    </div>\n  );\n});\n\nColorPickerChannelSliderTrack.displayName = "ColorPicker.ChannelSliderTrack";\n\nexport default ColorPickerChannelSliderTrack;\n',
+          sourceHash: "sha256:8d7d2c7f1f10726df06315a1cc2b28e0bf3c6566da8b950ad9be7f725fe80de4",
+          sourcePath: "packages/react/src/color-picker/ColorPickerChannelSliderTrack.tsx"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerClear.tsx",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport * as React from "react";\nimport { useColorPickerPartProjection } from "./ColorPickerRoot";\n\nexport type ColorPickerClearProps = React.ComponentPropsWithoutRef<"button"> & {\n  children?: React.ReactNode;\n};\n\nconst ColorPickerClear = React.forwardRef<HTMLButtonElement, ColorPickerClearProps>(\n  function ColorPickerClear({ children, ...props }, forwardedRef) {\n    const { props: projectedProps } = useColorPickerPartProjection(\n      { part: "clear" },\n      { ...props, "data-sw-color-picker-clear": "" },\n    );\n    return (\n      <button {...projectedProps} ref={forwardedRef}>\n        {children}\n      </button>\n    );\n  },\n);\n\nColorPickerClear.displayName = "ColorPicker.Clear";\n\nexport default ColorPickerClear;\n',
+          sourceHash: "sha256:73b8ad9d0ecb6a6bd291984d64e2d4c14987337ccfb9a13c16ffbb1d163fcedb",
+          sourcePath: "packages/react/src/color-picker/ColorPickerClear.tsx"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerControl.tsx",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport * as React from "react";\nimport { useColorPickerPartProjection } from "./ColorPickerRoot";\n\nexport type ColorPickerControlProps = React.ComponentPropsWithoutRef<"div"> & {\n  children?: React.ReactNode;\n};\n\nconst ColorPickerControl = React.forwardRef<HTMLDivElement, ColorPickerControlProps>(\n  function ColorPickerControl({ children, ...props }, forwardedRef) {\n    const { props: projectedProps } = useColorPickerPartProjection(\n      { part: "control" },\n      { ...props, "data-sw-color-picker-control": "" },\n    );\n    return (\n      <div {...projectedProps} ref={forwardedRef}>\n        {children}\n      </div>\n    );\n  },\n);\n\nColorPickerControl.displayName = "ColorPicker.Control";\n\nexport default ColorPickerControl;\n',
+          sourceHash: "sha256:4b32b16fedd23716cb348f1eb495aebec6755e730e99b0effd0a2b1778e05cc4",
+          sourcePath: "packages/react/src/color-picker/ColorPickerControl.tsx"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerEyeDropperTrigger.tsx",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport * as React from "react";\nimport { useColorPickerPartProjection } from "./ColorPickerRoot";\n\nexport type ColorPickerEyeDropperTriggerProps = React.ComponentPropsWithoutRef<"button"> & {\n  children?: React.ReactNode;\n};\n\nconst ColorPickerEyeDropperTrigger = React.forwardRef<\n  HTMLButtonElement,\n  ColorPickerEyeDropperTriggerProps\n>(function ColorPickerEyeDropperTrigger({ children, ...props }, forwardedRef) {\n  const { props: projectedProps } = useColorPickerPartProjection(\n    { part: "eyeDropperTrigger" },\n    { ...props, "data-sw-color-picker-eye-dropper": "" },\n  );\n  return (\n    <button {...projectedProps} ref={forwardedRef}>\n      {children}\n    </button>\n  );\n});\n\nColorPickerEyeDropperTrigger.displayName = "ColorPicker.EyeDropperTrigger";\n\nexport default ColorPickerEyeDropperTrigger;\n',
+          sourceHash: "sha256:bd480e33d628676cb465026dd951a87df0b03dd9562cab40f2eef0f264505182",
+          sourcePath: "packages/react/src/color-picker/ColorPickerEyeDropperTrigger.tsx"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerFormatControl.tsx",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport * as React from "react";\nimport { useColorPickerPartProjection } from "./ColorPickerRoot";\n\nexport type ColorPickerFormatControlProps = React.ComponentPropsWithoutRef<"div"> & {\n  children?: React.ReactNode;\n};\n\nconst ColorPickerFormatControl = React.forwardRef<HTMLDivElement, ColorPickerFormatControlProps>(\n  function ColorPickerFormatControl({ children, ...props }, forwardedRef) {\n    const { props: projectedProps } = useColorPickerPartProjection(\n      { part: "formatControl" },\n      { ...props, "data-sw-color-picker-format-control": "" },\n    );\n    return (\n      <div {...projectedProps} ref={forwardedRef}>\n        {children}\n      </div>\n    );\n  },\n);\n\nColorPickerFormatControl.displayName = "ColorPicker.FormatControl";\n\nexport default ColorPickerFormatControl;\n',
+          sourceHash: "sha256:bac4d5effcfa6386e160f008abec383dc9e6e90542c50cd68c71a9e5f18d07b1",
+          sourcePath: "packages/react/src/color-picker/ColorPickerFormatControl.tsx"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerFormatSelect.tsx",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport * as React from "react";\nimport { useColorPickerPartProjection } from "./ColorPickerRoot";\n\nexport type ColorPickerFormatSelectProps = React.ComponentPropsWithoutRef<"select"> & {\n  children?: React.ReactNode;\n};\n\nconst ColorPickerFormatSelect = React.forwardRef<HTMLSelectElement, ColorPickerFormatSelectProps>(\n  function ColorPickerFormatSelect({ children, ...props }, forwardedRef) {\n    const { props: projectedProps } = useColorPickerPartProjection(\n      { part: "formatSelect" },\n      { ...props, "data-sw-color-picker-format-select": "" },\n    );\n    return (\n      <select {...projectedProps} ref={forwardedRef}>\n        {children}\n      </select>\n    );\n  },\n);\n\nColorPickerFormatSelect.displayName = "ColorPicker.FormatSelect";\n\nexport default ColorPickerFormatSelect;\n',
+          sourceHash: "sha256:50f73ee0ff7c0f2621d603880c9f3bb32cbd8b66a97fa85a2c97085acc84e342",
+          sourcePath: "packages/react/src/color-picker/ColorPickerFormatSelect.tsx"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerHiddenInput.tsx",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport * as React from "react";\nimport { useColorPickerPartProjection } from "./ColorPickerRoot";\n\nexport type ColorPickerHiddenInputProps = React.ComponentPropsWithoutRef<"input"> & {};\n\nconst ColorPickerHiddenInput = React.forwardRef<HTMLInputElement, ColorPickerHiddenInputProps>(\n  function ColorPickerHiddenInput({ ...props }, forwardedRef) {\n    const { props: projectedProps } = useColorPickerPartProjection(\n      { part: "hiddenInput" },\n      { ...props, "data-sw-color-picker-hidden-input": "" },\n    );\n    return <input {...projectedProps} ref={forwardedRef} />;\n  },\n);\n\nColorPickerHiddenInput.displayName = "ColorPicker.HiddenInput";\n\nexport default ColorPickerHiddenInput;\n',
+          sourceHash: "sha256:8ec4ca5ea3b1a160270fbd20678ec4938695d913552df7125c303a3370b254db",
+          sourcePath: "packages/react/src/color-picker/ColorPickerHiddenInput.tsx"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerLabel.tsx",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport * as React from "react";\nimport { useColorPickerPartProjection } from "./ColorPickerRoot";\n\nexport type ColorPickerLabelProps = React.ComponentPropsWithoutRef<"span"> & {\n  children?: React.ReactNode;\n};\n\nconst ColorPickerLabel = React.forwardRef<HTMLSpanElement, ColorPickerLabelProps>(\n  function ColorPickerLabel({ children, ...props }, forwardedRef) {\n    const { props: projectedProps } = useColorPickerPartProjection(\n      { part: "label" },\n      { ...props, "data-sw-color-picker-label": "" },\n    );\n    return (\n      <span {...projectedProps} ref={forwardedRef}>\n        {children}\n      </span>\n    );\n  },\n);\n\nColorPickerLabel.displayName = "ColorPicker.Label";\n\nexport default ColorPickerLabel;\n',
+          sourceHash: "sha256:cea7f36e0fd53809ba3ef1453a99c33ff6407a93cae2baa76ff62cb0b71def2c",
+          sourcePath: "packages/react/src/color-picker/ColorPickerLabel.tsx"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerRoot.tsx",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport * as React from "react";\nimport {\n  createColorPicker,\n  createColorPickerInitialState,\n  projectColorPickerInitialPart,\n  type ColorPickerColor,\n  type ColorPickerDirection,\n  type ColorPickerFormat,\n  type ColorPickerFormatChangeDetails,\n  type ColorPickerInitialChannel,\n  type ColorPickerInitialPartProjection,\n  type ColorPickerInitialPartRequest,\n  type ColorPickerInitialState,\n  type ColorPickerOptions,\n  type ColorPickerValue,\n  type ColorPickerValueChangeDetails,\n  type ColorPickerValueCommitDetails,\n} from "@starwind-ui/runtime/color-picker";\nimport { setRef } from "../internal/compose-refs";\nimport { useIsomorphicLayoutEffect } from "../internal/use-isomorphic-layout-effect";\n\ntype ColorPickerRootContextValue = {\n  initialState: ColorPickerInitialState;\n};\n\nexport type ColorPickerAreaContextValue = {\n  xChannel: ColorPickerInitialChannel;\n  yChannel: ColorPickerInitialChannel;\n  xStep?: number;\n  yStep?: number;\n};\n\nexport type ColorPickerChannelSliderContextValue = {\n  channel: ColorPickerInitialChannel;\n  orientation: "horizontal" | "vertical";\n  step?: number;\n};\n\nconst ColorPickerRootContext = React.createContext<ColorPickerRootContextValue | null>(null);\nexport const ColorPickerAreaContext = React.createContext<ColorPickerAreaContextValue | null>(null);\nexport const ColorPickerChannelSliderContext =\n  React.createContext<ColorPickerChannelSliderContextValue | null>(null);\n\nconst COLOR_PICKER_PART_SELECTOR =\n  "[data-sw-color-picker], [data-sw-color-picker-label], [data-sw-color-picker-control], [data-sw-color-picker-value-input], [data-sw-color-picker-value-swatch], [data-sw-color-picker-value-text], [data-sw-color-picker-area], [data-sw-color-picker-area-background], [data-sw-color-picker-area-thumb], [data-sw-color-picker-area-input], [data-sw-color-picker-channel-slider], [data-sw-color-picker-channel-slider-track], [data-sw-color-picker-channel-slider-thumb], [data-sw-color-picker-channel-input], [data-sw-color-picker-channel-field], [data-sw-color-picker-format-select], [data-sw-color-picker-format-control], [data-sw-color-picker-transparency-grid], [data-sw-color-picker-swatch-group], [data-sw-color-picker-swatch], [data-sw-color-picker-eye-dropper], [data-sw-color-picker-clear], [data-sw-color-picker-hidden-input]";\nconst COLOR_PICKER_CONFIGURATION_ATTRIBUTES = [\n  "data-axis",\n  "data-channel",\n  "data-disabled",\n  "data-orientation",\n  "data-step",\n  "data-value",\n  "data-x-channel",\n  "data-y-channel",\n  "aria-label",\n  "aria-labelledby",\n  "aria-roledescription",\n] as const;\nconst COLOR_PICKER_AUTHORED_ARIA_ATTRIBUTES = [\n  "aria-label",\n  "aria-labelledby",\n  "aria-roledescription",\n] as const;\n\nexport type ColorPickerProjectedProps = Record<string, unknown> & {\n  children?: React.ReactNode;\n  style?: React.CSSProperties;\n};\n\nexport function useColorPickerPartProjection(\n  request: ColorPickerInitialPartRequest,\n  authoredProps: ColorPickerProjectedProps,\n): { props: ColorPickerProjectedProps; text?: string } {\n  const context = React.useContext(ColorPickerRootContext);\n  if (!context) {\n    throw new Error("Color Picker parts must be rendered inside ColorPicker.Root.");\n  }\n  const initialProjectionRef = React.useRef<ColorPickerInitialPartProjection | undefined>(\n    undefined,\n  );\n  initialProjectionRef.current ??= projectColorPickerInitialPart(context.initialState, request);\n  const ownershipPendingRef = React.useRef(true);\n  const authoredAriaHistoryRef = React.useRef(new Set<string>());\n  const projection = initialProjectionRef.current;\n  const initialValueRef = React.useRef(projection.properties.value);\n  const dynamicAuthoredProps = { ...authoredProps };\n  for (const name of COLOR_PICKER_AUTHORED_ARIA_ATTRIBUTES) {\n    if (authoredProps[name] === undefined) {\n      delete dynamicAuthoredProps[name];\n      if (authoredAriaHistoryRef.current.has(name)) dynamicAuthoredProps[name] = undefined;\n    }\n  }\n  useIsomorphicLayoutEffect(() => {\n    ownershipPendingRef.current = false;\n    for (const name of COLOR_PICKER_AUTHORED_ARIA_ATTRIBUTES) {\n      if (authoredProps[name] !== undefined) authoredAriaHistoryRef.current.add(name);\n    }\n  });\n  const stableProjection =\n    projection.properties.value === undefined\n      ? projection\n      : {\n          ...projection,\n          properties: { ...projection.properties, value: initialValueRef.current },\n        };\n  return {\n    props: translateColorPickerProjection(\n      stableProjection,\n      dynamicAuthoredProps,\n      ownershipPendingRef.current,\n    ),\n    ...(projection.text === undefined ? {} : { text: projection.text }),\n  };\n}\n\nexport function useColorPickerAreaContext(): ColorPickerAreaContextValue {\n  return (\n    React.useContext(ColorPickerAreaContext) ?? {\n      xChannel: "saturation",\n      yChannel: "brightness",\n    }\n  );\n}\n\nexport function useColorPickerChannelSliderContext(): ColorPickerChannelSliderContextValue {\n  return (\n    React.useContext(ColorPickerChannelSliderContext) ?? {\n      channel: "hue",\n      orientation: "horizontal",\n    }\n  );\n}\n\nexport type ColorPickerRootProps = Omit<\n  React.ComponentPropsWithoutRef<"div">,\n  "value" | "defaultValue" | "dir"\n> & {\n  value?: ColorPickerValue;\n  defaultValue?: ColorPickerValue;\n  format?: ColorPickerFormat;\n  alpha?: boolean;\n  allowEmpty?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  name?: string;\n  form?: string;\n  required?: boolean;\n  locale?: string;\n  dir?: ColorPickerDirection;\n  getAriaValueText?: ColorPickerOptions["getAriaValueText"];\n  getAreaRoleDescription?: ColorPickerOptions["getAreaRoleDescription"];\n  getColorDescription?: ColorPickerOptions["getColorDescription"];\n  onValueChange?: (value: ColorPickerColor | null, details: ColorPickerValueChangeDetails) => void;\n  onValueCommitted?: (\n    value: ColorPickerColor | null,\n    details: ColorPickerValueCommitDetails,\n  ) => void;\n  onFormatChange?: (format: ColorPickerFormat, details: ColorPickerFormatChangeDetails) => void;\n};\n\nconst ColorPickerRoot = React.forwardRef<React.ElementRef<"div">, ColorPickerRootProps>(\n  function ColorPickerRoot(\n    {\n      value,\n      defaultValue = "#000000",\n      format,\n      alpha = true,\n      allowEmpty = false,\n      disabled = false,\n      readOnly = false,\n      name,\n      form,\n      required = false,\n      locale,\n      dir,\n      getAriaValueText,\n      getAreaRoleDescription,\n      getColorDescription,\n      onValueChange,\n      onValueCommitted,\n      onFormatChange,\n      children,\n      ...props\n    },\n    forwardedRef,\n  ) {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const instanceRef = React.useRef<ReturnType<typeof createColorPicker> | undefined>(undefined);\n    const ownershipSeedsRef = React.useRef(new Map<Element, string>());\n    const structuralFingerprintRef = React.useRef("");\n    const structuralElementIdsRef = React.useRef(new WeakMap<Element, number>());\n    const nextStructuralElementIdRef = React.useRef(1);\n    const rootOwnershipPendingRef = React.useRef(true);\n    const isValueControlledRef = React.useRef(value !== undefined);\n    const isFormatControlledRef = React.useRef(format !== undefined);\n    const valueRef = React.useRef(value);\n    const formatRef = React.useRef(format);\n    const defaultValueRef = React.useRef(defaultValue);\n    const onValueChangeRef = React.useRef(onValueChange);\n    const onValueCommittedRef = React.useRef(onValueCommitted);\n    const onFormatChangeRef = React.useRef(onFormatChange);\n    const initialUncontrolledStateRef = React.useRef(\n      createColorPickerInitialState({\n        defaultValue: defaultValueRef.current,\n        format: formatRef.current,\n        alpha,\n        allowEmpty,\n      }),\n    );\n    const [uncontrolledValue, setUncontrolledValue] = React.useState<ColorPickerColor | null>(\n      initialUncontrolledStateRef.current.value,\n    );\n    const [uncontrolledFormat, setUncontrolledFormat] = React.useState<ColorPickerFormat>(\n      initialUncontrolledStateRef.current.format,\n    );\n\n    if (isValueControlledRef.current && value !== undefined) valueRef.current = value;\n    if (isFormatControlledRef.current && format !== undefined) formatRef.current = format;\n    onValueChangeRef.current = onValueChange;\n    onValueCommittedRef.current = onValueCommitted;\n    onFormatChangeRef.current = onFormatChange;\n\n    const renderedValue = isValueControlledRef.current ? valueRef.current : uncontrolledValue;\n    const renderedFormat = isFormatControlledRef.current\n      ? (formatRef.current ?? uncontrolledFormat)\n      : uncontrolledFormat;\n    const initialState = React.useMemo(\n      () =>\n        createColorPickerInitialState({\n          value: renderedValue,\n          format: renderedFormat,\n          alpha,\n          allowEmpty,\n          disabled,\n          readOnly,\n          required,\n          name,\n          form,\n          locale,\n          dir,\n          getAriaValueText,\n          getAreaRoleDescription,\n          getColorDescription,\n        }),\n      [\n        renderedValue,\n        renderedFormat,\n        alpha,\n        allowEmpty,\n        disabled,\n        readOnly,\n        required,\n        name,\n        form,\n        locale,\n        dir,\n        getAriaValueText,\n        getAreaRoleDescription,\n        getColorDescription,\n      ],\n    );\n    const contextValue = React.useMemo(() => ({ initialState }), [initialState]);\n\n    const composedRef = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        rootRef.current = node;\n        return setRef(forwardedRef, node);\n      },\n      [forwardedRef],\n    );\n\n    useIsomorphicLayoutEffect(() => {\n      const root = rootRef.current;\n      if (!root) return;\n\n      replayColorPickerOwnership(root, ownershipSeedsRef.current);\n      captureColorPickerOwnership(root, ownershipSeedsRef.current);\n      const instance = createColorPicker(root, {\n        ...(isValueControlledRef.current\n          ? { value: valueRef.current }\n          : { defaultValue: defaultValueRef.current }),\n        format: formatRef.current ?? uncontrolledFormat,\n        alpha,\n        allowEmpty,\n        disabled,\n        readOnly,\n        name,\n        form,\n        required,\n        locale,\n        dir,\n        getAriaValueText,\n        getAreaRoleDescription,\n        getColorDescription,\n        onValueChange: (nextValue, details) => {\n          onValueChangeRef.current?.(nextValue, details);\n          if (!details.isCanceled && !isValueControlledRef.current) {\n            setUncontrolledValue(() => nextValue);\n          }\n        },\n        onValueCommitted: (nextValue, details) => {\n          onValueCommittedRef.current?.(nextValue, details);\n        },\n        onFormatChange: (nextFormat, details) => {\n          onFormatChangeRef.current?.(nextFormat, details);\n          if (isFormatControlledRef.current) {\n            const controlledFormat = formatRef.current;\n            if (controlledFormat !== undefined && controlledFormat !== nextFormat) {\n              instanceRef.current?.setFormat(controlledFormat, { emit: false });\n            }\n            return;\n          }\n          setUncontrolledFormat(() => nextFormat);\n        },\n      });\n      instanceRef.current = instance;\n      rootOwnershipPendingRef.current = false;\n      instance.refresh();\n      structuralFingerprintRef.current = colorPickerStructuralFingerprint(\n        root,\n        structuralElementIdsRef.current,\n        nextStructuralElementIdRef,\n      );\n\n      return () => {\n        instance.destroy();\n        if (instanceRef.current === instance) instanceRef.current = undefined;\n      };\n    }, []);\n\n    useIsomorphicLayoutEffect(() => {\n      const root = rootRef.current;\n      if (!root || typeof MutationObserver === "undefined") return;\n      let refreshScheduled = false;\n      let disposed = false;\n      const refreshStructure = () => {\n        refreshScheduled = false;\n        if (disposed) return;\n        const nextFingerprint = colorPickerStructuralFingerprint(\n          root,\n          structuralElementIdsRef.current,\n          nextStructuralElementIdRef,\n        );\n        if (nextFingerprint === structuralFingerprintRef.current) return;\n        structuralFingerprintRef.current = nextFingerprint;\n        captureColorPickerOwnership(root, ownershipSeedsRef.current);\n        instanceRef.current?.refresh({ preserveState: true });\n        structuralFingerprintRef.current = colorPickerStructuralFingerprint(\n          root,\n          structuralElementIdsRef.current,\n          nextStructuralElementIdRef,\n        );\n      };\n      const observer = new MutationObserver((records) => {\n        if (!records.some((record) => isColorPickerConfigurationMutation(root, record))) return;\n        if (refreshScheduled) return;\n        refreshScheduled = true;\n        Promise.resolve().then(refreshStructure);\n      });\n      observer.observe(root, {\n        attributes: true,\n        attributeFilter: [...COLOR_PICKER_CONFIGURATION_ATTRIBUTES],\n        childList: true,\n        subtree: true,\n      });\n      return () => {\n        disposed = true;\n        observer.disconnect();\n      };\n    }, []);\n\n    useIsomorphicLayoutEffect(() => {\n      if (!isValueControlledRef.current || value === undefined) return;\n      instanceRef.current?.setValue(value, { emit: false });\n    }, [value]);\n\n    useIsomorphicLayoutEffect(() => {\n      if (!isFormatControlledRef.current || format === undefined) return;\n      instanceRef.current?.setFormat(format, { emit: false });\n    }, [format]);\n\n    useIsomorphicLayoutEffect(() => {\n      const instance = instanceRef.current;\n      if (!instance) return;\n      instance.setDisabled(disabled);\n      instance.setReadOnly(readOnly);\n      instance.setName(name ?? null);\n      instance.setOptions({\n        alpha,\n        allowEmpty,\n        dir: dir ?? null,\n        form: form ?? null,\n        getAreaRoleDescription,\n        getAriaValueText,\n        getColorDescription,\n        locale: locale ?? null,\n        required,\n      });\n    }, [\n      alpha,\n      allowEmpty,\n      dir,\n      disabled,\n      form,\n      getAreaRoleDescription,\n      getAriaValueText,\n      getColorDescription,\n      locale,\n      name,\n      readOnly,\n      required,\n    ]);\n\n    const initialRootProjectionRef = React.useRef<ColorPickerInitialPartProjection | undefined>(\n      undefined,\n    );\n    initialRootProjectionRef.current ??= projectColorPickerInitialPart(initialState, {\n      part: "root",\n    });\n    const rootProps = translateColorPickerProjection(\n      initialRootProjectionRef.current,\n      { ...props, "data-sw-color-picker": "" },\n      rootOwnershipPendingRef.current,\n    );\n\n    return (\n      <ColorPickerRootContext.Provider value={contextValue}>\n        <div {...rootProps} ref={composedRef}>\n          {children}\n        </div>\n      </ColorPickerRootContext.Provider>\n    );\n  },\n);\n\nColorPickerRoot.displayName = "ColorPicker.Root";\n\nexport default ColorPickerRoot;\n\nfunction translateColorPickerProjection(\n  projection: ColorPickerInitialPartProjection,\n  authoredProps: ColorPickerProjectedProps,\n  includeOwnership: boolean,\n): ColorPickerProjectedProps {\n  const projected: ColorPickerProjectedProps = {};\n  for (const [name, value] of Object.entries(projection.attributes)) {\n    if (name === "data-sw-color-picker-initial-owned" || value === undefined || value === false)\n      continue;\n    projected[toReactPropName(name)] = name.startsWith("data-") && value === true ? "" : value;\n  }\n  for (const [name, value] of Object.entries(projection.properties)) {\n    if (value === undefined || name === "defaultValue") continue;\n    projected[name === "value" ? "defaultValue" : name] = value;\n  }\n  if (Object.keys(projection.styles).length > 0) {\n    projected.style = Object.fromEntries(\n      Object.entries(projection.styles).map(([name, value]) => [toReactStyleName(name), value]),\n    ) as React.CSSProperties;\n  }\n\n  const result = { ...projected, ...authoredProps };\n  if (projected.style || authoredProps.style) {\n    result.style = { ...projected.style, ...authoredProps.style };\n  }\n  if (includeOwnership) {\n    const tokens = [\n      ...projection.ownership.attributes\n        .filter((name) => !Object.hasOwn(authoredProps, toReactPropName(name)))\n        .map((name) => `a:${name}`),\n      ...projection.ownership.properties\n        .filter(\n          (name) =>\n            !Object.hasOwn(authoredProps, name) &&\n            !(name === "value" && Object.hasOwn(authoredProps, "defaultValue")),\n        )\n        .map((name) => `p:${name}`),\n    ];\n    if (tokens.length > 0) result["data-sw-color-picker-initial-owned"] = tokens.join(",");\n  }\n  return result;\n}\n\nfunction toReactPropName(name: string): string {\n  if (name === "class") return "className";\n  if (name === "for") return "htmlFor";\n  if (name === "readonly") return "readOnly";\n  if (name === "tabindex") return "tabIndex";\n  return name;\n}\n\nfunction toReactStyleName(name: string): string {\n  return name.startsWith("--")\n    ? name\n    : name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());\n}\n\nfunction ownedColorPickerParts(root: HTMLElement): Element[] {\n  return [root, ...root.querySelectorAll(COLOR_PICKER_PART_SELECTOR)].filter(\n    (element) => element.closest("[data-sw-color-picker]") === root,\n  );\n}\n\nfunction captureColorPickerOwnership(root: HTMLElement, seeds: Map<Element, string>): void {\n  for (const element of ownedColorPickerParts(root)) {\n    const marker = element.getAttribute("data-sw-color-picker-initial-owned");\n    if (marker) seeds.set(element, marker);\n  }\n}\n\nfunction replayColorPickerOwnership(root: HTMLElement, seeds: Map<Element, string>): void {\n  for (const [element, marker] of seeds) {\n    if (!element.isConnected || element.closest("[data-sw-color-picker]") !== root) {\n      seeds.delete(element);\n      continue;\n    }\n    element.setAttribute("data-sw-color-picker-initial-owned", marker);\n  }\n}\n\nfunction isColorPickerConfigurationMutation(root: HTMLElement, record: MutationRecord): boolean {\n  const target = record.target instanceof Element ? record.target : null;\n  if (!target || target.closest("[data-sw-color-picker]") !== root) return false;\n  if (record.type === "childList") return true;\n  if (record.type !== "attributes" || !record.attributeName) return false;\n  if (record.attributeName === "data-value" || record.attributeName === "data-disabled") {\n    return target.hasAttribute("data-sw-color-picker-swatch");\n  }\n  return true;\n}\n\nfunction colorPickerStructuralFingerprint(\n  root: HTMLElement,\n  ids: WeakMap<Element, number>,\n  nextIdRef: React.MutableRefObject<number>,\n): string {\n  return ownedColorPickerParts(root)\n    .map((element) => {\n      let id = ids.get(element);\n      if (id === undefined) {\n        id = nextIdRef.current;\n        nextIdRef.current += 1;\n        ids.set(element, id);\n      }\n      const attributes = colorPickerConfigurationAttributes(element)\n        .map((name) => `${name}=${element.getAttribute(name) ?? ""}`)\n        .join(";");\n      return `${id}:${element.tagName}:${attributes}`;\n    })\n    .join("|");\n}\n\nfunction colorPickerConfigurationAttributes(element: Element): readonly string[] {\n  if (element.hasAttribute("data-sw-color-picker-area")) {\n    return ["data-x-channel", "data-y-channel"];\n  }\n  if (element.hasAttribute("data-sw-color-picker-area-input")) {\n    return ["data-axis", "data-step", "aria-label", "aria-labelledby", "aria-roledescription"];\n  }\n  if (element.hasAttribute("data-sw-color-picker-channel-slider")) {\n    return ["data-channel", "data-orientation"];\n  }\n  if (element.hasAttribute("data-sw-color-picker-channel-input")) return ["data-step"];\n  if (element.hasAttribute("data-sw-color-picker-channel-field")) return ["data-channel"];\n  if (element.hasAttribute("data-sw-color-picker-swatch")) {\n    return ["data-value", "data-disabled"];\n  }\n  return [];\n}\n',
+          sourceHash: "sha256:480ff7c550bead133ba08b1fd49cb465dc8583fe3d0531a59bd481d19b6088b1",
+          sourcePath: "packages/react/src/color-picker/ColorPickerRoot.tsx"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerSwatch.tsx",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport * as React from "react";\nimport { useColorPickerPartProjection } from "./ColorPickerRoot";\nimport type { ColorPickerValue } from "@starwind-ui/runtime/color-picker";\n\nexport type ColorPickerSwatchProps = React.ComponentPropsWithoutRef<"button"> & {\n  children?: React.ReactNode;\n  swatchValue: ColorPickerValue;\n  swatchDisabled?: boolean;\n};\n\nconst ColorPickerSwatch = React.forwardRef<HTMLButtonElement, ColorPickerSwatchProps>(\n  function ColorPickerSwatch(\n    { children, swatchValue, swatchDisabled = false, ...props },\n    forwardedRef,\n  ) {\n    const { props: projectedProps } = useColorPickerPartProjection(\n      { part: "swatch", value: swatchValue, disabled: swatchDisabled },\n      {\n        ...props,\n        "data-sw-color-picker-swatch": "",\n        "data-value":\n          typeof swatchValue === "string" ? swatchValue : (swatchValue?.toString() ?? undefined),\n        "data-disabled": swatchDisabled ? "" : undefined,\n      },\n    );\n    return (\n      <button {...projectedProps} ref={forwardedRef}>\n        {children}\n      </button>\n    );\n  },\n);\n\nColorPickerSwatch.displayName = "ColorPicker.Swatch";\n\nexport default ColorPickerSwatch;\n',
+          sourceHash: "sha256:c37d425d00ff5092dedd1bc21e73ebbd0547d3c46d51ea6b7bf94e83613d0e79",
+          sourcePath: "packages/react/src/color-picker/ColorPickerSwatch.tsx"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerSwatchGroup.tsx",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport * as React from "react";\nimport { useColorPickerPartProjection } from "./ColorPickerRoot";\n\nexport type ColorPickerSwatchGroupProps = React.ComponentPropsWithoutRef<"div"> & {\n  children?: React.ReactNode;\n};\n\nconst ColorPickerSwatchGroup = React.forwardRef<HTMLDivElement, ColorPickerSwatchGroupProps>(\n  function ColorPickerSwatchGroup({ children, ...props }, forwardedRef) {\n    const { props: projectedProps } = useColorPickerPartProjection(\n      { part: "swatchGroup" },\n      { ...props, "data-sw-color-picker-swatch-group": "" },\n    );\n    return (\n      <div {...projectedProps} ref={forwardedRef}>\n        {children}\n      </div>\n    );\n  },\n);\n\nColorPickerSwatchGroup.displayName = "ColorPicker.SwatchGroup";\n\nexport default ColorPickerSwatchGroup;\n',
+          sourceHash: "sha256:807e23e652288da912158ef42305a4b5ba836e70e584a5cc2772b1bae377a83a",
+          sourcePath: "packages/react/src/color-picker/ColorPickerSwatchGroup.tsx"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerTransparencyGrid.tsx",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport * as React from "react";\nimport { useColorPickerPartProjection } from "./ColorPickerRoot";\n\nexport type ColorPickerTransparencyGridProps = React.ComponentPropsWithoutRef<"span"> & {\n  children?: React.ReactNode;\n};\n\nconst ColorPickerTransparencyGrid = React.forwardRef<\n  HTMLSpanElement,\n  ColorPickerTransparencyGridProps\n>(function ColorPickerTransparencyGrid({ children, ...props }, forwardedRef) {\n  const { props: projectedProps } = useColorPickerPartProjection(\n    { part: "transparencyGrid" },\n    { ...props, "data-sw-color-picker-transparency-grid": "" },\n  );\n  return (\n    <span {...projectedProps} ref={forwardedRef}>\n      {children}\n    </span>\n  );\n});\n\nColorPickerTransparencyGrid.displayName = "ColorPicker.TransparencyGrid";\n\nexport default ColorPickerTransparencyGrid;\n',
+          sourceHash: "sha256:2766d826fc8ad9ef2ec9873b037e8d0893c2a768768824dc297a1e70cf7091ce",
+          sourcePath: "packages/react/src/color-picker/ColorPickerTransparencyGrid.tsx"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerValueInput.tsx",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport * as React from "react";\nimport { useColorPickerPartProjection } from "./ColorPickerRoot";\n\nexport type ColorPickerValueInputProps = React.ComponentPropsWithoutRef<"input"> & {};\n\nconst ColorPickerValueInput = React.forwardRef<HTMLInputElement, ColorPickerValueInputProps>(\n  function ColorPickerValueInput({ ...props }, forwardedRef) {\n    const { props: projectedProps } = useColorPickerPartProjection(\n      { part: "valueInput" },\n      { ...props, "data-sw-color-picker-value-input": "" },\n    );\n    return <input {...projectedProps} ref={forwardedRef} />;\n  },\n);\n\nColorPickerValueInput.displayName = "ColorPicker.ValueInput";\n\nexport default ColorPickerValueInput;\n',
+          sourceHash: "sha256:94d572adaa1a5798bd3affa6a7906aa4ddb6c34a13ae97b4f50dc718cf263d7b",
+          sourcePath: "packages/react/src/color-picker/ColorPickerValueInput.tsx"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerValueSwatch.tsx",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport * as React from "react";\nimport { useColorPickerPartProjection } from "./ColorPickerRoot";\n\nexport type ColorPickerValueSwatchProps = React.ComponentPropsWithoutRef<"span"> & {\n  children?: React.ReactNode;\n};\n\nconst ColorPickerValueSwatch = React.forwardRef<HTMLSpanElement, ColorPickerValueSwatchProps>(\n  function ColorPickerValueSwatch({ children, ...props }, forwardedRef) {\n    const { props: projectedProps } = useColorPickerPartProjection(\n      { part: "valueSwatch" },\n      { ...props, "data-sw-color-picker-value-swatch": "" },\n    );\n    return (\n      <span {...projectedProps} ref={forwardedRef}>\n        {children}\n      </span>\n    );\n  },\n);\n\nColorPickerValueSwatch.displayName = "ColorPicker.ValueSwatch";\n\nexport default ColorPickerValueSwatch;\n',
+          sourceHash: "sha256:575d0c6327853fa9c5c307d2af2e19cb3decc5da4e8454e097e42d15b449ff3e",
+          sourcePath: "packages/react/src/color-picker/ColorPickerValueSwatch.tsx"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/ColorPickerValueText.tsx",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport * as React from "react";\nimport { useColorPickerPartProjection } from "./ColorPickerRoot";\n\nexport type ColorPickerValueTextProps = React.ComponentPropsWithoutRef<"span"> & {\n  children?: React.ReactNode;\n};\n\nconst ColorPickerValueText = React.forwardRef<HTMLSpanElement, ColorPickerValueTextProps>(\n  function ColorPickerValueText({ children, ...props }, forwardedRef) {\n    const { props: projectedProps, text } = useColorPickerPartProjection(\n      { part: "valueText" },\n      { ...props, "data-sw-color-picker-value-text": "" },\n    );\n    return (\n      <span {...projectedProps} ref={forwardedRef}>\n        {children ?? text}\n      </span>\n    );\n  },\n);\n\nColorPickerValueText.displayName = "ColorPicker.ValueText";\n\nexport default ColorPickerValueText;\n',
+          sourceHash: "sha256:9d679c36de91b1b24003f6ab368ae1f134a8d5cae8edc49c81c33166a8838271",
+          sourcePath: "packages/react/src/color-picker/ColorPickerValueText.tsx"
+        },
+        {
+          path: "src/components/starwind-primitives/color-picker/index.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport ColorPickerRoot from "./ColorPickerRoot";\nimport ColorPickerLabel from "./ColorPickerLabel";\nimport ColorPickerControl from "./ColorPickerControl";\nimport ColorPickerValueInput from "./ColorPickerValueInput";\nimport ColorPickerValueSwatch from "./ColorPickerValueSwatch";\nimport ColorPickerValueText from "./ColorPickerValueText";\nimport ColorPickerArea from "./ColorPickerArea";\nimport ColorPickerAreaBackground from "./ColorPickerAreaBackground";\nimport ColorPickerAreaThumb from "./ColorPickerAreaThumb";\nimport ColorPickerAreaInput from "./ColorPickerAreaInput";\nimport ColorPickerChannelSlider from "./ColorPickerChannelSlider";\nimport ColorPickerChannelSliderTrack from "./ColorPickerChannelSliderTrack";\nimport ColorPickerChannelSliderThumb from "./ColorPickerChannelSliderThumb";\nimport ColorPickerChannelSliderInput from "./ColorPickerChannelSliderInput";\nimport ColorPickerChannelInput from "./ColorPickerChannelInput";\nimport ColorPickerFormatSelect from "./ColorPickerFormatSelect";\nimport ColorPickerFormatControl from "./ColorPickerFormatControl";\nimport ColorPickerTransparencyGrid from "./ColorPickerTransparencyGrid";\nimport ColorPickerSwatchGroup from "./ColorPickerSwatchGroup";\nimport ColorPickerSwatch from "./ColorPickerSwatch";\nimport ColorPickerEyeDropperTrigger from "./ColorPickerEyeDropperTrigger";\nimport ColorPickerClear from "./ColorPickerClear";\nimport ColorPickerHiddenInput from "./ColorPickerHiddenInput";\n\nconst ColorPicker = {\n  Root: ColorPickerRoot,\n  Label: ColorPickerLabel,\n  Control: ColorPickerControl,\n  ValueInput: ColorPickerValueInput,\n  ValueSwatch: ColorPickerValueSwatch,\n  ValueText: ColorPickerValueText,\n  Area: ColorPickerArea,\n  AreaBackground: ColorPickerAreaBackground,\n  AreaThumb: ColorPickerAreaThumb,\n  AreaInput: ColorPickerAreaInput,\n  ChannelSlider: ColorPickerChannelSlider,\n  ChannelSliderTrack: ColorPickerChannelSliderTrack,\n  ChannelSliderThumb: ColorPickerChannelSliderThumb,\n  ChannelSliderInput: ColorPickerChannelSliderInput,\n  ChannelInput: ColorPickerChannelInput,\n  FormatSelect: ColorPickerFormatSelect,\n  FormatControl: ColorPickerFormatControl,\n  TransparencyGrid: ColorPickerTransparencyGrid,\n  SwatchGroup: ColorPickerSwatchGroup,\n  Swatch: ColorPickerSwatch,\n  EyeDropperTrigger: ColorPickerEyeDropperTrigger,\n  Clear: ColorPickerClear,\n  HiddenInput: ColorPickerHiddenInput,\n};\n\nexport {\n  ColorPicker,\n  ColorPickerRoot,\n  ColorPickerLabel,\n  ColorPickerControl,\n  ColorPickerValueInput,\n  ColorPickerValueSwatch,\n  ColorPickerValueText,\n  ColorPickerArea,\n  ColorPickerAreaBackground,\n  ColorPickerAreaThumb,\n  ColorPickerAreaInput,\n  ColorPickerChannelSlider,\n  ColorPickerChannelSliderTrack,\n  ColorPickerChannelSliderThumb,\n  ColorPickerChannelSliderInput,\n  ColorPickerChannelInput,\n  ColorPickerFormatSelect,\n  ColorPickerFormatControl,\n  ColorPickerTransparencyGrid,\n  ColorPickerSwatchGroup,\n  ColorPickerSwatch,\n  ColorPickerEyeDropperTrigger,\n  ColorPickerClear,\n  ColorPickerHiddenInput,\n};\n\nexport default ColorPicker;\n\nexport type {\n  ColorPickerChannel,\n  ColorPickerColor,\n  ColorPickerDirection,\n  ColorPickerFormat,\n  ColorPickerFormatChangeDetails,\n  ColorPickerHsbChannelUpdates,\n  ColorPickerHsbChannels,\n  ColorPickerHslChannelUpdates,\n  ColorPickerHslChannels,\n  ColorPickerInstance,\n  ColorPickerInitialAxis,\n  ColorPickerInitialChannel,\n  ColorPickerInitialDirection,\n  ColorPickerInitialOrientation,\n  ColorPickerInitialPartName,\n  ColorPickerInitialPartProjection,\n  ColorPickerInitialPartRequest,\n  ColorPickerInitialState,\n  ColorPickerInitialStateOptions,\n  ColorPickerInitialValue,\n  ColorPickerOptions,\n  ColorPickerRgbChannelUpdates,\n  ColorPickerRgbChannels,\n  ColorPickerSetOptions,\n  ColorPickerSetValueOptions,\n  ColorPickerStringFormat,\n  ColorPickerValue,\n  ColorPickerValueChangeDetails,\n  ColorPickerValueChangeReason,\n  ColorPickerValueCommitDetails,\n} from "@starwind-ui/runtime/color-picker";\nexport {\n  createColorPickerInitialState,\n  parseColor,\n  projectColorPickerInitialPart,\n} from "@starwind-ui/runtime/color-picker";\n',
+          sourceHash: "sha256:58de9d7ceefb8eafc92e5fb3a2fae300af3eced02affd58602a9daa90d9258b0",
+          sourcePath: "packages/react/src/color-picker/index.ts"
+        },
+        {
+          path: "src/components/starwind-primitives/internal/compose-refs.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport * as React from "react";\n\nexport type AsChildProps = React.HTMLAttributes<HTMLElement> &\n  React.RefAttributes<HTMLElement> &\n  Record<string, unknown>;\n\nexport type RefCapableElementProps = AsChildProps & {\n  href?: string;\n};\n\nexport type AsChildMergeOptions = {\n  eventOrder?: "child-first" | "parent-first";\n  protectedProps?: AsChildProps;\n};\n\nexport function getElementRef(\n  element: React.ReactElement<RefCapableElementProps>,\n): React.Ref<HTMLElement> | undefined {\n  if (Number.parseInt(React.version, 10) >= 19) {\n    return element.props.ref;\n  }\n\n  return (element as React.ReactElement<RefCapableElementProps> & { ref?: React.Ref<HTMLElement> })\n    .ref;\n}\n\nexport function getAsChildElement(\n  children: React.ReactNode,\n): React.ReactElement<RefCapableElementProps> | null {\n  const childArray = React.Children.toArray(children);\n  if (childArray.length !== 1) return null;\n\n  const child = childArray[0];\n  return React.isValidElement<RefCapableElementProps>(child) ? child : null;\n}\n\nexport function mergeAsChildProps(\n  parentProps: AsChildProps,\n  childProps: AsChildProps,\n  options: AsChildMergeOptions = {},\n): AsChildProps {\n  const { eventOrder = "child-first", protectedProps } = options;\n  const mergedProps: AsChildProps = { ...parentProps, ...childProps };\n  const className = mergeAsChildClassName(parentProps.className, childProps.className);\n  const style = mergeAsChildStyle(parentProps.style, childProps.style);\n\n  if (className) {\n    mergedProps.className = className;\n  } else {\n    delete mergedProps.className;\n  }\n\n  if (style) {\n    mergedProps.style = style;\n  } else {\n    delete mergedProps.style;\n  }\n\n  Object.keys(parentProps).forEach((propName) => {\n    if (!isAsChildEventHandler(propName)) return;\n\n    const parentHandler = getAsChildEventHandler(parentProps[propName]);\n    const childHandler = getAsChildEventHandler(childProps[propName]);\n    if (!parentHandler || !childHandler) return;\n\n    mergedProps[propName] = composeAsChildEventHandlers(parentHandler, childHandler, eventOrder);\n  });\n\n  if (protectedProps) {\n    Object.assign(mergedProps, protectedProps);\n  }\n\n  return mergedProps;\n}\n\nexport function useComposedRefs<T>(\n  outerRef: React.Ref<T> | undefined,\n  innerRef: React.Ref<T> | undefined,\n): React.RefCallback<T> {\n  return React.useCallback(\n    (value) => {\n      const cleanups = [setRef(outerRef, value), setRef(innerRef, value)].filter(\n        (cleanup): cleanup is RefCleanup => typeof cleanup === "function",\n      );\n\n      return () => {\n        cleanups.reverse().forEach((cleanup) => cleanup());\n      };\n    },\n    [outerRef, innerRef],\n  );\n}\n\nfunction mergeAsChildClassName(\n  parentClassName: string | undefined,\n  childClassName: string | undefined,\n): string | undefined {\n  return [parentClassName, childClassName].filter(Boolean).join(" ") || undefined;\n}\n\nfunction mergeAsChildStyle(\n  parentStyle: React.CSSProperties | undefined,\n  childStyle: React.CSSProperties | undefined,\n): React.CSSProperties | undefined {\n  if (parentStyle && childStyle) return { ...parentStyle, ...childStyle };\n  return childStyle ?? parentStyle;\n}\n\nfunction isAsChildEventHandler(propName: string): boolean {\n  return /^on[A-Z]/.test(propName);\n}\n\nfunction getAsChildEventHandler(value: unknown): ((...args: unknown[]) => unknown) | undefined {\n  return typeof value === "function" ? (value as (...args: unknown[]) => unknown) : undefined;\n}\n\nfunction composeAsChildEventHandlers(\n  parentHandler: (...args: unknown[]) => unknown,\n  childHandler: (...args: unknown[]) => unknown,\n  eventOrder: NonNullable<AsChildMergeOptions["eventOrder"]>,\n): (...args: unknown[]) => void {\n  return (...args) => {\n    if (eventOrder === "parent-first") {\n      parentHandler(...args);\n      if (!isDefaultPrevented(args[0])) {\n        childHandler(...args);\n      }\n      return;\n    }\n\n    childHandler(...args);\n    if (!isDefaultPrevented(args[0])) {\n      parentHandler(...args);\n    }\n  };\n}\n\nfunction isDefaultPrevented(value: unknown): boolean {\n  if (typeof value !== "object" || value === null) return false;\n  const event = value as { defaultPrevented?: boolean };\n  return event.defaultPrevented === true;\n}\n\ntype RefCleanup = () => void;\n\nexport function setRef<T>(ref: React.Ref<T> | undefined, value: T | null): RefCleanup | undefined {\n  if (!ref) return undefined;\n\n  if (typeof ref === "function") {\n    const cleanup = ref(value);\n    return typeof cleanup === "function" ? cleanup : () => ref(null);\n  }\n\n  ref.current = value;\n  return () => {\n    ref.current = null;\n  };\n}\n',
+          sourceHash: "sha256:599814a3efff84ec03259a7fc7817f919aed593b5446c572ac0f7a7f4b9334d1",
+          sourcePath: "packages/react/src/internal/compose-refs.ts"
+        },
+        {
+          path: "src/components/starwind-primitives/internal/use-isomorphic-layout-effect.ts",
+          content: '/**\n * Vendored by the Starwind CLI.\n * You own this file in your project.\n */\n\nimport * as React from "react";\n\nexport const useIsomorphicLayoutEffect =\n  typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;\n',
+          sourceHash: "sha256:277183522889c375f2fd0e140ae643bec81b941da1d9f31fa49bd291a2ee84d9",
+          sourcePath: "packages/react/src/internal/use-isomorphic-layout-effect.ts"
+        }
+      ],
+      packageRequirements: [
+        {
+          name: "@starwind-ui/runtime",
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",
@@ -18078,7 +18974,7 @@ if (!src && !image) {
       packageRequirements: [
         {
           name: "@starwind-ui/runtime",
-          range: "^0.1.0-beta.1"
+          range: "^0.1.0-beta.2"
         },
         {
           name: "react",