@soave/ui 0.2.2 → 0.3.1

package/dist/components/index.d.ts

@@ -0,0 +1,13 @@
+export { default as Button } from "./Button.vue";
+export { default as Input } from "./Input.vue";
+export { default as Textarea } from "./Textarea.vue";
+export { default as Card } from "./Card.vue";
+export { default as Checkbox } from "./Checkbox.vue";
+export { default as Switch } from "./Switch.vue";
+export { default as Dialog } from "./Dialog.vue";
+export { default as Select } from "./Select.vue";
+export { default as SelectTrigger } from "./SelectTrigger.vue";
+export { default as SelectContent } from "./SelectContent.vue";
+export { default as SelectItem } from "./SelectItem.vue";
+export { default as RadioGroup } from "./RadioGroup.vue";
+export { default as RadioItem } from "./RadioItem.vue";

package/dist/components/index.mjs

@@ -0,0 +1,13 @@
+export { default as Button } from "./Button.vue";
+export { default as Input } from "./Input.vue";
+export { default as Textarea } from "./Textarea.vue";
+export { default as Card } from "./Card.vue";
+export { default as Checkbox } from "./Checkbox.vue";
+export { default as Switch } from "./Switch.vue";
+export { default as Dialog } from "./Dialog.vue";
+export { default as Select } from "./Select.vue";
+export { default as SelectTrigger } from "./SelectTrigger.vue";
+export { default as SelectContent } from "./SelectContent.vue";
+export { default as SelectItem } from "./SelectItem.vue";
+export { default as RadioGroup } from "./RadioGroup.vue";
+export { default as RadioItem } from "./RadioItem.vue";

package/dist/composables/useButton.d.ts

@@ -2,7 +2,7 @@ import { type Ref } from "vue";
 import type { ButtonProps, ButtonReturn } from "../types/button";
 /**
  * Buttonコンポーネントのロジックを提供するComposable
- * variant, size, disabled, loadingに基づいてクラスとaria属性を生成
- * Providerから設定されたデフォルト値を使用
+ * 状態とARIA属性のみを返す（スタイル情報なし）
+ * スタイルは StyleAdapter または外部のスタイルパッケージが担当
  */
 export declare const useButton: (props: Ref<ButtonProps>) => ButtonReturn;

package/dist/composables/useButton.mjs

@@ -1,49 +1,22 @@
-import { computed } from "vue";
-import { cn } from "../utils/cn.mjs";
+import { computed, readonly } from "vue";
 import { useUI } from "./useUIConfig.mjs";
 export const useButton = (props) => {
   const ui_config = useUI("button");
-  const is_disabled = computed(() => props.value.disabled ?? false);
-  const is_loading = computed(() => props.value.loading ?? false);
-  const variant_classes = computed(() => {
-    const variant_map = {
-      primary: "bg-primary text-primary-foreground hover:bg-primary/90",
-      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-      ghost: "hover:bg-accent hover:text-accent-foreground",
-      outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-      destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90"
-    };
-    return variant_map[props.value.variant ?? ui_config.default_variant];
-  });
-  const size_classes = computed(() => {
-    const size_map = {
-      sm: "h-9 px-3 text-sm",
-      md: "h-10 px-4 py-2",
-      lg: "h-11 px-8"
-    };
-    return size_map[props.value.size ?? ui_config.default_size];
-  });
-  const base_classes = computed(
-    () => cn(
-      "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium",
-      "ring-offset-background transition-colors",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      "disabled:pointer-events-none disabled:opacity-50",
-      variant_classes.value,
-      size_classes.value,
-      is_disabled.value && "opacity-50 cursor-not-allowed",
-      is_loading.value && "cursor-wait"
-    )
-  );
+  const state = computed(() => ({
+    variant: props.value.variant ?? ui_config.default_variant,
+    size: props.value.size ?? ui_config.default_size,
+    disabled: props.value.disabled ?? false,
+    loading: props.value.loading ?? false,
+    type: props.value.type ?? "button"
+  }));
   const aria_attributes = computed(() => ({
-    "aria-disabled": is_disabled.value || void 0,
-    "aria-busy": is_loading.value || void 0,
-    role: "button"
+    "aria-disabled": state.value.disabled || void 0,
+    "aria-busy": state.value.loading || void 0,
+    role: "button",
+    type: state.value.type
   }));
   return {
-    base_classes,
-    is_disabled,
-    is_loading,
-    aria_attributes
+    state: readonly(state),
+    aria_attributes: readonly(aria_attributes)
   };
 };

package/dist/composables/useCard.d.ts

@@ -2,7 +2,7 @@ import { type Ref } from "vue";
 import type { CardProps, CardReturn } from "../types/card";
 /**
  * Cardコンポーネントのロジックを提供するComposable
- * paddingに基づいてクラスを生成
- * Providerから設定されたデフォルト値を使用
+ * 状態のみを返す（スタイル情報なし）
+ * スタイルは StyleAdapter または外部のスタイルパッケージが担当
  */
 export declare const useCard: (props: Ref<CardProps>) => CardReturn;

package/dist/composables/useCard.mjs

@@ -1,24 +1,11 @@
-import { computed } from "vue";
-import { cn } from "../utils/cn.mjs";
+import { computed, readonly } from "vue";
 import { useUI } from "./useUIConfig.mjs";
 export const useCard = (props) => {
   const ui_config = useUI("card");
-  const padding_classes = computed(() => {
-    const padding_map = {
-      none: "",
-      sm: "p-4",
-      md: "p-6",
-      lg: "p-8"
-    };
-    return padding_map[props.value.padding ?? ui_config.default_padding];
-  });
-  const base_classes = computed(
-    () => cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
-      padding_classes.value
-    )
-  );
+  const state = computed(() => ({
+    padding: props.value.padding ?? ui_config.default_padding
+  }));
   return {
-    base_classes
+    state: readonly(state)
   };
 };

package/dist/composables/useCheckbox.d.ts

@@ -2,6 +2,7 @@ import { type Ref } from "vue";
 import type { CheckboxProps, CheckboxReturn } from "../types/checkbox";
 /**
  * Checkboxコンポーネントのロジックを提供するComposable
- * size, disabled, indeterminateに基づいてクラスとaria属性を生成
+ * 状態とARIA属性のみを返す（スタイル情報なし）
+ * スタイルは StyleAdapter または外部のスタイルパッケージが担当
  */
 export declare const useCheckbox: (props: Ref<CheckboxProps>, checked: Ref<boolean>) => CheckboxReturn;

package/dist/composables/useCheckbox.mjs

@@ -1,51 +1,18 @@
-import { computed } from "vue";
-import { cn } from "../utils/cn.mjs";
+import { computed, readonly } from "vue";
 export const useCheckbox = (props, checked) => {
-  const is_disabled = computed(() => props.value.disabled ?? false);
-  const is_indeterminate = computed(() => props.value.indeterminate ?? false);
-  const size_classes = computed(() => {
-    const size_map = {
-      sm: "h-4 w-4",
-      md: "h-5 w-5",
-      lg: "h-6 w-6"
-    };
-    return size_map[props.value.size ?? "md"];
-  });
-  const base_classes = computed(
-    () => cn(
-      "peer shrink-0 rounded-sm border border-primary",
-      "ring-offset-background",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      "disabled:cursor-not-allowed disabled:opacity-50",
-      "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      "data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground",
-      size_classes.value
-    )
-  );
-  const indicator_size_classes = computed(() => {
-    const size_map = {
-      sm: "h-3 w-3",
-      md: "h-4 w-4",
-      lg: "h-5 w-5"
-    };
-    return size_map[props.value.size ?? "md"];
-  });
-  const indicator_classes = computed(
-    () => cn(
-      "flex items-center justify-center text-current",
-      indicator_size_classes.value
-    )
-  );
+  const state = computed(() => ({
+    size: props.value.size ?? "md",
+    disabled: props.value.disabled ?? false,
+    indeterminate: props.value.indeterminate ?? false,
+    checked: checked.value
+  }));
   const aria_attributes = computed(() => ({
     role: "checkbox",
-    "aria-checked": is_indeterminate.value ? "mixed" : checked.value,
-    "aria-disabled": is_disabled.value || void 0
+    "aria-checked": state.value.indeterminate ? "mixed" : state.value.checked,
+    "aria-disabled": state.value.disabled || void 0
   }));
   return {
-    base_classes,
-    indicator_classes,
-    is_disabled,
-    is_indeterminate,
-    aria_attributes
+    state: readonly(state),
+    aria_attributes: readonly(aria_attributes)
   };
 };

package/dist/composables/useFileInput.d.ts

@@ -2,5 +2,7 @@ import { type Ref } from "vue";
 import type { FileInputProps, FileInputReturn } from "../types/file-input";
 /**
  * FileInputコンポーネントのロジックを提供するComposable
+ * 状態とARIA属性のみを返す（スタイル情報なし）
+ * スタイルは StyleAdapter または外部のスタイルパッケージが担当
  */
 export declare const useFileInput: (props: Ref<FileInputProps>, input_ref: Ref<HTMLInputElement | null>) => FileInputReturn;

package/dist/composables/useFileInput.mjs

@@ -1,5 +1,4 @@
-import { computed, ref } from "vue";
-import { cn } from "../utils/cn.mjs";
+import { computed, ref, readonly } from "vue";
 const FILE_ERRORS = {
   MAX_SIZE_EXCEEDED: (max) => `\u30D5\u30A1\u30A4\u30EB\u30B5\u30A4\u30BA\u304C${formatFileSize(max)}\u3092\u8D85\u3048\u3066\u3044\u307E\u3059`,
   MAX_FILES_EXCEEDED: (max) => `\u6700\u5927${max}\u30D5\u30A1\u30A4\u30EB\u307E\u3067\u30A2\u30C3\u30D7\u30ED\u30FC\u30C9\u3067\u304D\u307E\u3059`,
@@ -17,30 +16,18 @@ const createPreviewUrl = (file) => {
   return null;
 };
 export const useFileInput = (props, input_ref) => {
-  const is_disabled = computed(() => props.value.disabled ?? false);
   const is_dragging = ref(false);
   const files = ref([]);
   const error = ref(null);
-  const base_classes = computed(
-    () => cn(
-      "relative",
-      is_disabled.value && "opacity-50 cursor-not-allowed"
-    )
-  );
-  const dropzone_classes = computed(
-    () => cn(
-      "flex flex-col items-center justify-center w-full p-6",
-      "border-2 border-dashed rounded-lg",
-      "transition-colors cursor-pointer",
-      "hover:border-primary hover:bg-primary/5",
-      is_dragging.value && "border-primary bg-primary/10",
-      error.value && "border-destructive",
-      is_disabled.value && "pointer-events-none"
-    )
-  );
+  const state = computed(() => ({
+    disabled: props.value.disabled ?? false,
+    is_dragging: is_dragging.value,
+    has_error: !!error.value,
+    has_files: files.value.length > 0
+  }));
   const aria_attributes = computed(() => ({
-    "aria-disabled": is_disabled.value || void 0,
-    "aria-invalid": !!error.value || void 0
+    "aria-disabled": state.value.disabled || void 0,
+    "aria-invalid": state.value.has_error || void 0
   }));
   const validateFile = (file) => {
     const { accept, max_size } = props.value;
@@ -65,7 +52,7 @@ export const useFileInput = (props, input_ref) => {
     return null;
   };
   const handleFiles = (file_list) => {
-    if (!file_list || is_disabled.value) return;
+    if (!file_list || state.value.disabled) return;
     error.value = null;
     const { multiple, max_files } = props.value;
     const new_files = [];
@@ -100,7 +87,7 @@ export const useFileInput = (props, input_ref) => {
   };
   const handleDragEnter = (event) => {
     event.preventDefault();
-    if (!is_disabled.value) {
+    if (!state.value.disabled) {
       is_dragging.value = true;
     }
   };
@@ -111,7 +98,7 @@ export const useFileInput = (props, input_ref) => {
   const handleDrop = (event) => {
     event.preventDefault();
     is_dragging.value = false;
-    if (!is_disabled.value) {
+    if (!state.value.disabled) {
       handleFiles(event.dataTransfer?.files ?? null);
     }
   };
@@ -129,18 +116,16 @@ export const useFileInput = (props, input_ref) => {
     error.value = null;
   };
   const openFilePicker = () => {
-    if (!is_disabled.value && input_ref.value) {
+    if (!state.value.disabled && input_ref.value) {
       input_ref.value.click();
     }
   };
   return {
-    base_classes,
-    dropzone_classes,
-    is_disabled,
+    state: readonly(state),
     is_dragging,
     files,
     error,
-    aria_attributes,
+    aria_attributes: readonly(aria_attributes),
     handleFiles,
     handleDragEnter,
     handleDragLeave,

package/dist/composables/useInput.d.ts

@@ -2,7 +2,7 @@ import { type Ref } from "vue";
 import type { InputProps, InputReturn } from "../types/input";
 /**
  * Inputコンポーネントのロジックを提供するComposable
- * size, error, disabled, readonlyに基づいてクラスとaria属性を生成
- * Providerから設定されたデフォルト値を使用
+ * 状態とARIA属性のみを返す（スタイル情報なし）
+ * スタイルは StyleAdapter または外部のスタイルパッケージが担当
  */
 export declare const useInput: (props: Ref<InputProps>) => InputReturn;

package/dist/composables/useInput.mjs

@@ -1,37 +1,19 @@
-import { computed, ref } from "vue";
-import { cn } from "../utils/cn.mjs";
+import { computed, ref, readonly } from "vue";
 import { useUI } from "./useUIConfig.mjs";
 export const useInput = (props) => {
   const ui_config = useUI("input");
   const is_focused = ref(false);
-  const has_error = computed(() => !!props.value.error);
-  const is_disabled = computed(() => props.value.disabled ?? false);
-  const is_readonly = computed(() => props.value.readonly ?? false);
-  const size_classes = computed(() => {
-    const size_map = {
-      sm: "h-9 text-sm",
-      md: "h-10",
-      lg: "h-11 text-lg"
-    };
-    return size_map[props.value.size ?? ui_config.default_size];
-  });
-  const base_classes = computed(
-    () => cn(
-      "flex w-full rounded-md border border-input bg-background px-3 py-2",
-      "text-sm ring-offset-background",
-      "file:border-0 file:bg-transparent file:text-sm file:font-medium",
-      "placeholder:text-muted-foreground",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      "disabled:cursor-not-allowed disabled:opacity-50",
-      size_classes.value,
-      has_error.value && "border-destructive focus-visible:ring-destructive",
-      is_readonly.value && "bg-muted"
-    )
-  );
+  const state = computed(() => ({
+    type: props.value.type ?? "text",
+    size: props.value.size ?? ui_config.default_size,
+    disabled: props.value.disabled ?? false,
+    readonly: props.value.readonly ?? false,
+    has_error: !!props.value.error
+  }));
   const aria_attributes = computed(() => ({
-    "aria-invalid": has_error.value || void 0,
+    "aria-invalid": state.value.has_error || void 0,
     "aria-describedby": props.value.error_id,
-    "aria-readonly": is_readonly.value || void 0
+    "aria-readonly": state.value.readonly || void 0
   }));
   const handleFocus = () => {
     is_focused.value = true;
@@ -40,12 +22,9 @@ export const useInput = (props) => {
     is_focused.value = false;
   };
   return {
-    base_classes,
+    state: readonly(state),
     is_focused,
-    has_error,
-    is_disabled,
-    is_readonly,
-    aria_attributes,
+    aria_attributes: readonly(aria_attributes),
     handleFocus,
     handleBlur
   };

package/dist/composables/useRadio.d.ts

@@ -2,6 +2,7 @@ import { type Ref } from "vue";
 import type { RadioItemProps, RadioItemReturn } from "../types/radio";
 /**
  * RadioItemコンポーネントのロジックを提供するComposable
- * size, disabled, valueに基づいてクラスとaria属性を生成
+ * 状態とARIA属性のみを返す（スタイル情報なし）
+ * スタイルは StyleAdapter または外部のスタイルパッケージが担当
  */
 export declare const useRadioItem: (props: Ref<RadioItemProps>) => RadioItemReturn;

package/dist/composables/useRadio.mjs

@@ -1,5 +1,4 @@
-import { computed, inject } from "vue";
-import { cn } from "../utils/cn.mjs";
+import { computed, inject, readonly } from "vue";
 import { RADIO_GROUP_KEY } from "../types/radio.mjs";
 import { COMPONENT_ERRORS } from "../constants/errors.mjs";
 export const useRadioItem = (props) => {
@@ -7,49 +6,18 @@ export const useRadioItem = (props) => {
   if (!context) {
     throw new Error(COMPONENT_ERRORS.PROVIDER_NOT_FOUND);
   }
-  const is_disabled = computed(() => props.value.disabled ?? context.disabled.value);
-  const is_checked = computed(() => context.model_value.value === props.value.value);
-  const size_classes = computed(() => {
-    const size_map = {
-      sm: "h-4 w-4",
-      md: "h-5 w-5",
-      lg: "h-6 w-6"
-    };
-    return size_map[props.value.size ?? "md"];
-  });
-  const base_classes = computed(
-    () => cn(
-      "aspect-square rounded-full border border-primary text-primary",
-      "ring-offset-background",
-      "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      "disabled:cursor-not-allowed disabled:opacity-50",
-      size_classes.value
-    )
-  );
-  const indicator_size_classes = computed(() => {
-    const size_map = {
-      sm: "h-2 w-2",
-      md: "h-2.5 w-2.5",
-      lg: "h-3 w-3"
-    };
-    return size_map[props.value.size ?? "md"];
-  });
-  const indicator_classes = computed(
-    () => cn(
-      "flex items-center justify-center",
-      indicator_size_classes.value
-    )
-  );
+  const state = computed(() => ({
+    size: props.value.size ?? "md",
+    disabled: props.value.disabled ?? context.disabled.value,
+    checked: context.model_value.value === props.value.value
+  }));
   const aria_attributes = computed(() => ({
     role: "radio",
-    "aria-checked": is_checked.value,
-    "aria-disabled": is_disabled.value || void 0
+    "aria-checked": state.value.checked,
+    "aria-disabled": state.value.disabled || void 0
   }));
   return {
-    base_classes,
-    indicator_classes,
-    is_checked,
-    is_disabled,
-    aria_attributes
+    state: readonly(state),
+    aria_attributes: readonly(aria_attributes)
   };
 };

package/dist/composables/useSelect.d.ts

@@ -2,14 +2,17 @@ import { type Ref } from "vue";
 import type { SelectTriggerReturn, SelectContentReturn, SelectItemReturn } from "../types/select";
 /**
  * SelectTriggerコンポーネントのロジックを提供するComposable
+ * 状態のみを返す（スタイル情報なし）
  */
 export declare const useSelectTrigger: () => SelectTriggerReturn;
 /**
  * SelectContentコンポーネントのロジックを提供するComposable
+ * 状態のみを返す（スタイル情報なし）
  */
 export declare const useSelectContent: () => SelectContentReturn;
 /**
  * SelectItemコンポーネントのロジックを提供するComposable
+ * 状態のみを返す（スタイル情報なし）
  */
 export declare const useSelectItem: (props: Ref<{
     value: string;

package/dist/composables/useSelect.mjs

@@ -1,5 +1,4 @@
-import { computed, inject } from "vue";
-import { cn } from "../utils/cn.mjs";
+import { computed, inject, readonly } from "vue";
 import { SELECT_KEY } from "../types/select.mjs";
 import { COMPONENT_ERRORS } from "../constants/errors.mjs";
 export const useSelectTrigger = () => {
@@ -7,44 +6,25 @@ export const useSelectTrigger = () => {
   if (!context) {
     throw new Error(COMPONENT_ERRORS.PROVIDER_NOT_FOUND);
   }
-  const is_disabled = computed(() => context.disabled.value);
-  const size_classes = computed(() => {
-    const size_map = {
-      sm: "h-9 text-sm",
-      md: "h-10",
-      lg: "h-11 text-lg"
-    };
-    return size_map[context.size.value];
-  });
-  const base_classes = computed(
-    () => cn(
-      "flex w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2",
-      "text-sm ring-offset-background",
-      "placeholder:text-muted-foreground",
-      "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-      "disabled:cursor-not-allowed disabled:opacity-50",
-      "[&>span]:line-clamp-1",
-      size_classes.value
-    )
-  );
+  const state = computed(() => ({
+    size: context.size.value,
+    disabled: context.disabled.value,
+    is_open: context.is_open.value
+  }));
   return {
-    base_classes,
-    is_disabled
+    state: readonly(state)
   };
 };
 export const useSelectContent = () => {
-  const base_classes = computed(
-    () => cn(
-      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
-      "data-[state=open]:animate-in data-[state=closed]:animate-out",
-      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-      "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
-      "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
-    )
-  );
+  const context = inject(SELECT_KEY, null);
+  if (!context) {
+    throw new Error(COMPONENT_ERRORS.PROVIDER_NOT_FOUND);
+  }
+  const state = computed(() => ({
+    is_open: context.is_open.value
+  }));
   return {
-    base_classes
+    state: readonly(state)
   };
 };
 export const useSelectItem = (props) => {
@@ -52,20 +32,11 @@ export const useSelectItem = (props) => {
   if (!context) {
     throw new Error(COMPONENT_ERRORS.PROVIDER_NOT_FOUND);
   }
-  const is_selected = computed(() => context.model_value.value === props.value.value);
-  const is_disabled = computed(() => props.value.disabled ?? false);
-  const base_classes = computed(
-    () => cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2",
-      "text-sm outline-none",
-      "focus:bg-accent focus:text-accent-foreground",
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      is_selected.value && "bg-accent text-accent-foreground"
-    )
-  );
+  const state = computed(() => ({
+    selected: context.model_value.value === props.value.value,
+    disabled: props.value.disabled ?? false
+  }));
   return {
-    base_classes,
-    is_selected,
-    is_disabled
+    state: readonly(state)
   };
 };

package/dist/composables/useSwitch.d.ts

@@ -2,6 +2,7 @@ import { type Ref } from "vue";
 import type { SwitchProps, SwitchReturn } from "../types/switch";
 /**
  * Switchコンポーネントのロジックを提供するComposable
- * size, disabledに基づいてクラスとaria属性を生成
+ * 状態とARIA属性のみを返す（スタイル情報なし）
+ * スタイルは StyleAdapter または外部のスタイルパッケージが担当
  */
 export declare const useSwitch: (props: Ref<SwitchProps>, checked: Ref<boolean>) => SwitchReturn;

package/dist/composables/useSwitch.mjs

@@ -1,50 +1,17 @@
-import { computed } from "vue";
-import { cn } from "../utils/cn.mjs";
+import { computed, readonly } from "vue";
 export const useSwitch = (props, checked) => {
-  const is_disabled = computed(() => props.value.disabled ?? false);
-  const track_size_classes = computed(() => {
-    const size_map = {
-      sm: "h-5 w-9",
-      md: "h-6 w-11",
-      lg: "h-7 w-14"
-    };
-    return size_map[props.value.size ?? "md"];
-  });
-  const track_classes = computed(
-    () => cn(
-      "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent",
-      "transition-colors",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-      "disabled:cursor-not-allowed disabled:opacity-50",
-      "data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-      track_size_classes.value
-    )
-  );
-  const thumb_size_classes = computed(() => {
-    const size_map = {
-      sm: "h-4 w-4 data-[state=checked]:translate-x-4",
-      md: "h-5 w-5 data-[state=checked]:translate-x-5",
-      lg: "h-6 w-6 data-[state=checked]:translate-x-7"
-    };
-    return size_map[props.value.size ?? "md"];
-  });
-  const thumb_classes = computed(
-    () => cn(
-      "pointer-events-none block rounded-full bg-background shadow-lg ring-0",
-      "transition-transform",
-      "data-[state=unchecked]:translate-x-0",
-      thumb_size_classes.value
-    )
-  );
+  const state = computed(() => ({
+    size: props.value.size ?? "md",
+    disabled: props.value.disabled ?? false,
+    checked: checked.value
+  }));
   const aria_attributes = computed(() => ({
     role: "switch",
-    "aria-checked": checked.value,
-    "aria-disabled": is_disabled.value || void 0
+    "aria-checked": state.value.checked,
+    "aria-disabled": state.value.disabled || void 0
   }));
   return {
-    track_classes,
-    thumb_classes,
-    is_disabled,
-    aria_attributes
+    state: readonly(state),
+    aria_attributes: readonly(aria_attributes)
   };
 };