@soave/ui 0.2.1 → 0.3.0

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)
   };
 };

package/dist/composables/useTextarea.d.ts

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

package/dist/composables/useTextarea.mjs

@@ -1,35 +1,17 @@
-import { computed, ref } from "vue";
-import { cn } from "../utils/cn.mjs";
+import { computed, ref, readonly } from "vue";
 export const useTextarea = (props) => {
   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 resize_classes = computed(() => {
-    const resize_map = {
-      none: "resize-none",
-      vertical: "resize-y",
-      horizontal: "resize-x",
-      both: "resize"
-    };
-    return resize_map[props.value.resize ?? "vertical"];
-  });
-  const base_classes = computed(
-    () => cn(
-      "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2",
-      "text-sm ring-offset-background",
-      "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",
-      resize_classes.value,
-      has_error.value && "border-destructive focus-visible:ring-destructive",
-      is_readonly.value && "bg-muted"
-    )
-  );
+  const state = computed(() => ({
+    size: props.value.size ?? "md",
+    disabled: props.value.disabled ?? false,
+    readonly: props.value.readonly ?? false,
+    has_error: !!props.value.error,
+    resize: props.value.resize ?? "vertical"
+  }));
   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;
@@ -38,12 +20,9 @@ export const useTextarea = (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/useToast.mjs

@@ -46,7 +46,7 @@ export function useToast() {
     });
   };
   return {
-    toasts: toasts.value,
+    toasts: [...toasts.value],
     add,
     dismiss,
     dismissAll,

package/dist/env.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+    readonly DEV: boolean
+    readonly PROD: boolean
+    readonly MODE: string
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv
+}

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export * from "./composables";
-export * from "./components/ui";
+export * from "./components";
 export * from "./types";
 export * from "./utils";
 export * from "./constants";

package/dist/index.mjs

@@ -1,5 +1,5 @@
 export * from "./composables/index.mjs";
-export * from "./components/ui/index.mjs";
+export * from "./components/index.mjs";
 export * from "./types/index.mjs";
 export * from "./utils/index.mjs";
 export * from "./constants/index.mjs";

package/dist/types/button.d.ts

@@ -1,20 +1,34 @@
-import type { ComputedRef } from "vue";
+import type { ComputedRef, DeepReadonly } from "vue";
 export type ButtonVariant = "primary" | "secondary" | "ghost" | "outline" | "destructive";
 export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonType = "button" | "submit" | "reset";
 export interface ButtonProps {
     variant?: ButtonVariant;
     size?: ButtonSize;
     disabled?: boolean;
     loading?: boolean;
+    type?: ButtonType;
+}
+/**
+ * ボタンの状態（StyleAdapterに渡す用）
+ */
+export interface ButtonState {
+    variant: ButtonVariant;
+    size: ButtonSize;
+    disabled: boolean;
+    loading: boolean;
+    type: ButtonType;
 }
 export interface ButtonAriaAttributes {
     "aria-disabled"?: boolean;
     "aria-busy"?: boolean;
     role: "button";
+    type: ButtonType;
 }
+/**
+ * useButton の戻り値（ヘッドレス - スタイル情報なし）
+ */
 export interface ButtonReturn {
-    base_classes: ComputedRef<string>;
-    is_disabled: ComputedRef<boolean>;
-    is_loading: ComputedRef<boolean>;
-    aria_attributes: ComputedRef<ButtonAriaAttributes>;
+    state: DeepReadonly<ComputedRef<ButtonState>>;
+    aria_attributes: DeepReadonly<ComputedRef<ButtonAriaAttributes>>;
 }

package/dist/types/card.d.ts

@@ -1,10 +1,19 @@
-import type { ComputedRef } from "vue";
+import type { ComputedRef, DeepReadonly } from "vue";
 export type CardPadding = "sm" | "md" | "lg" | "none";
 export interface CardProps {
     padding?: CardPadding;
 }
+/**
+ * カードの状態（StyleAdapterに渡す用）
+ */
+export interface CardState {
+    padding: CardPadding;
+}
+/**
+ * useCard の戻り値（ヘッドレス - スタイル情報なし）
+ */
 export interface CardReturn {
-    base_classes: ComputedRef<string>;
+    state: DeepReadonly<ComputedRef<CardState>>;
 }
 export interface CardHeaderProps {
     class?: string;

package/dist/types/checkbox.d.ts

@@ -1,19 +1,28 @@
-import type { ComputedRef } from "vue";
+import type { ComputedRef, DeepReadonly } from "vue";
 export type CheckboxSize = "sm" | "md" | "lg";
 export interface CheckboxProps {
     size?: CheckboxSize;
     disabled?: boolean;
     indeterminate?: boolean;
 }
+/**
+ * チェックボックスの状態（StyleAdapterに渡す用）
+ */
+export interface CheckboxState {
+    size: CheckboxSize;
+    disabled: boolean;
+    indeterminate: boolean;
+    checked: boolean;
+}
 export interface CheckboxAriaAttributes {
     role: "checkbox";
     "aria-checked": boolean | "mixed";
     "aria-disabled"?: boolean;
 }
+/**
+ * useCheckbox の戻り値（ヘッドレス - スタイル情報なし）
+ */
 export interface CheckboxReturn {
-    base_classes: ComputedRef<string>;
-    indicator_classes: ComputedRef<string>;
-    is_disabled: ComputedRef<boolean>;
-    is_indeterminate: ComputedRef<boolean>;
-    aria_attributes: ComputedRef<CheckboxAriaAttributes>;
+    state: DeepReadonly<ComputedRef<CheckboxState>>;
+    aria_attributes: DeepReadonly<ComputedRef<CheckboxAriaAttributes>>;
 }

package/dist/types/composables.d.ts

@@ -1,38 +1,47 @@
 import type { Ref } from "vue";
+/**
+ * 汎用的なコンポーネント状態（基底型）
+ */
+export interface ComponentState {
+    [key: string]: unknown;
+}
 /**
  * Button の状態
  */
-export interface ButtonState {
+export interface ButtonState extends ComponentState {
     variant: "primary" | "secondary" | "ghost" | "outline" | "destructive";
     size: "sm" | "md" | "lg";
     disabled: boolean;
     loading: boolean;
+    type: "button" | "submit" | "reset";
 }
 /**
  * Input の状態
  */
-export interface InputState {
+export interface InputState extends ComponentState {
+    type: "text" | "email" | "password" | "number" | "tel" | "url" | "search";
     size: "sm" | "md" | "lg";
     disabled: boolean;
     readonly: boolean;
-    error: string | undefined;
+    has_error: boolean;
 }
 /**
  * Dialog の状態
  */
-export interface DialogState {
+export interface DialogState extends ComponentState {
     is_open: boolean;
 }
 /**
  * Card の状態
  */
-export interface CardState {
+export interface CardState extends ComponentState {
     padding: "sm" | "md" | "lg" | "none";
 }
 /**
  * Checkbox の状態
  */
-export interface CheckboxState {
+export interface CheckboxState extends ComponentState {
+    size: "sm" | "md" | "lg";
     checked: boolean;
     disabled: boolean;
     indeterminate: boolean;
@@ -40,78 +49,97 @@ export interface CheckboxState {
 /**
  * Radio の状態
  */
-export interface RadioState {
+export interface RadioItemState extends ComponentState {
+    size: "sm" | "md" | "lg";
     checked: boolean;
     disabled: boolean;
 }
 /**
  * Switch の状態
  */
-export interface SwitchState {
+export interface SwitchState extends ComponentState {
+    size: "sm" | "md" | "lg";
     checked: boolean;
     disabled: boolean;
 }
 /**
  * Textarea の状態
  */
-export interface TextareaState {
+export interface TextareaState extends ComponentState {
     size: "sm" | "md" | "lg";
     disabled: boolean;
     readonly: boolean;
-    error: string | undefined;
+    has_error: boolean;
+    resize: "none" | "vertical" | "horizontal" | "both";
 }
 /**
- * Select の状態
+ * Select Trigger の状態
  */
-export interface SelectState {
+export interface SelectTriggerState extends ComponentState {
     size: "sm" | "md" | "lg";
     disabled: boolean;
     is_open: boolean;
 }
+/**
+ * Select Content の状態
+ */
+export interface SelectContentState extends ComponentState {
+    is_open: boolean;
+}
+/**
+ * Select Item の状態
+ */
+export interface SelectItemState extends ComponentState {
+    selected: boolean;
+    disabled: boolean;
+}
+/**
+ * FileInput の状態
+ */
+export interface FileInputState extends ComponentState {
+    disabled: boolean;
+    is_dragging: boolean;
+    has_error: boolean;
+    has_files: boolean;
+}
 /**
  * Toast の状態
  */
-export interface ToastState {
+export interface ToastState extends ComponentState {
     variant: "default" | "success" | "error" | "warning" | "info";
 }
 /**
  * Tooltip の状態
  */
-export interface TooltipState {
+export interface TooltipState extends ComponentState {
     is_open: boolean;
     side: "top" | "right" | "bottom" | "left";
 }
 /**
  * Popover の状態
  */
-export interface PopoverState {
+export interface PopoverState extends ComponentState {
     is_open: boolean;
 }
 /**
  * Dropdown の状態
  */
-export interface DropdownState {
+export interface DropdownState extends ComponentState {
     is_open: boolean;
 }
 /**
  * Sheet の状態
  */
-export interface SheetState {
+export interface SheetState extends ComponentState {
     is_open: boolean;
     side: "top" | "right" | "bottom" | "left";
 }
 /**
  * Alert の状態
  */
-export interface AlertState {
+export interface AlertState extends ComponentState {
     variant: "default" | "info" | "success" | "warning" | "destructive";
 }
-/**
- * 汎用的なコンポーネント状態
- */
-export interface ComponentState {
-    [key: string]: unknown;
-}
 /**
  * Headless Composable の戻り値型
  * ロジック情報のみを返し、スタイル情報は返さない

package/dist/types/config.d.ts

@@ -7,6 +7,7 @@ import type { StyleAdapter } from "../adapters/types";
  * UIコンポーネントのグローバル設定
  */
 export interface UIConfig {
+    [key: string]: unknown;
     button: ButtonConfig;
     input: InputConfig;
     card: CardConfig;

package/dist/types/file-input.d.ts

@@ -1,4 +1,4 @@
-import type { ComputedRef, Ref } from "vue";
+import type { ComputedRef, Ref, DeepReadonly } from "vue";
 export interface FileInputProps {
     accept?: string;
     multiple?: boolean;
@@ -13,18 +13,28 @@ export interface FileInfo {
     type: string;
     preview_url: string | null;
 }
+/**
+ * ファイル入力の状態（StyleAdapterに渡す用）
+ */
+export interface FileInputState {
+    disabled: boolean;
+    is_dragging: boolean;
+    has_error: boolean;
+    has_files: boolean;
+}
 export interface FileInputAriaAttributes {
     "aria-disabled"?: boolean;
     "aria-invalid"?: boolean;
 }
+/**
+ * useFileInput の戻り値（ヘッドレス - スタイル情報なし）
+ */
 export interface FileInputReturn {
-    base_classes: ComputedRef<string>;
-    dropzone_classes: ComputedRef<string>;
-    is_disabled: ComputedRef<boolean>;
+    state: DeepReadonly<ComputedRef<FileInputState>>;
     is_dragging: Ref<boolean>;
     files: Ref<FileInfo[]>;
     error: Ref<string | null>;
-    aria_attributes: ComputedRef<FileInputAriaAttributes>;
+    aria_attributes: DeepReadonly<ComputedRef<FileInputAriaAttributes>>;
     handleFiles: (file_list: FileList | null) => void;
     handleDragEnter: (event: DragEvent) => void;
     handleDragLeave: (event: DragEvent) => void;

package/dist/types/form.d.ts

@@ -1,4 +1,4 @@
-import type { ComputedRef, DeepReadonly } from "vue";
+import type { ComputedRef } from "vue";
 export interface FormState<T> {
     values: T;
     errors: Partial<Record<keyof T, string>>;
@@ -37,11 +37,11 @@ export interface FileFieldOptions {
 }
 export interface FormReturn<T> {
     values: T;
-    errors: DeepReadonly<Partial<Record<keyof T, string>>>;
-    touched: DeepReadonly<Partial<Record<keyof T, boolean>>>;
+    errors: Readonly<Partial<Record<keyof T, string>>>;
+    touched: Readonly<Partial<Record<keyof T, boolean>>>;
     is_valid: ComputedRef<boolean>;
-    is_submitting: DeepReadonly<ComputedRef<boolean>>;
-    is_dirty: DeepReadonly<ComputedRef<boolean>>;
+    is_submitting: ComputedRef<boolean>;
+    is_dirty: ComputedRef<boolean>;
     validateField: (field: keyof T) => void;
     validateAll: () => boolean;
     reset: () => void;

package/dist/types/input.d.ts

@@ -1,4 +1,4 @@
-import type { ComputedRef, Ref } from "vue";
+import type { ComputedRef, Ref, DeepReadonly } from "vue";
 export type InputSize = "sm" | "md" | "lg";
 export type InputType = "text" | "email" | "password" | "number" | "tel" | "url" | "search";
 export interface InputProps {
@@ -9,19 +9,30 @@ export interface InputProps {
     readonly?: boolean;
     error?: string;
     error_id?: string;
+    id?: string;
+}
+/**
+ * 入力の状態（StyleAdapterに渡す用）
+ */
+export interface InputState {
+    type: InputType;
+    size: InputSize;
+    disabled: boolean;
+    readonly: boolean;
+    has_error: boolean;
 }
 export interface InputAriaAttributes {
     "aria-invalid"?: boolean;
     "aria-describedby"?: string;
     "aria-readonly"?: boolean;
 }
+/**
+ * useInput の戻り値（ヘッドレス - スタイル情報なし）
+ */
 export interface InputReturn {
-    base_classes: ComputedRef<string>;
+    state: DeepReadonly<ComputedRef<InputState>>;
     is_focused: Ref<boolean>;
-    has_error: ComputedRef<boolean>;
-    is_disabled: ComputedRef<boolean>;
-    is_readonly: ComputedRef<boolean>;
-    aria_attributes: ComputedRef<InputAriaAttributes>;
+    aria_attributes: DeepReadonly<ComputedRef<InputAriaAttributes>>;
     handleFocus: () => void;
     handleBlur: () => void;
 }

package/dist/types/radio.d.ts

@@ -1,4 +1,4 @@
-import type { ComputedRef, InjectionKey, Ref } from "vue";
+import type { ComputedRef, InjectionKey, Ref, DeepReadonly } from "vue";
 export type RadioSize = "sm" | "md" | "lg";
 export interface RadioGroupProps {
     disabled?: boolean;
@@ -19,15 +19,23 @@ export interface RadioGroupContext {
     updateValue: (value: string) => void;
 }
 export declare const RADIO_GROUP_KEY: InjectionKey<RadioGroupContext>;
+/**
+ * ラジオボタンの状態（StyleAdapterに渡す用）
+ */
+export interface RadioItemState {
+    size: RadioSize;
+    disabled: boolean;
+    checked: boolean;
+}
 export interface RadioAriaAttributes {
     role: "radio";
     "aria-checked": boolean;
     "aria-disabled"?: boolean;
 }
+/**
+ * useRadioItem の戻り値（ヘッドレス - スタイル情報なし）
+ */
 export interface RadioItemReturn {
-    base_classes: ComputedRef<string>;
-    indicator_classes: ComputedRef<string>;
-    is_checked: ComputedRef<boolean>;
-    is_disabled: ComputedRef<boolean>;
-    aria_attributes: ComputedRef<RadioAriaAttributes>;
+    state: DeepReadonly<ComputedRef<RadioItemState>>;
+    aria_attributes: DeepReadonly<ComputedRef<RadioAriaAttributes>>;
 }

package/dist/types/select.d.ts

@@ -1,4 +1,4 @@
-import type { ComputedRef, InjectionKey, Ref } from "vue";
+import type { ComputedRef, InjectionKey, Ref, DeepReadonly } from "vue";
 export type SelectSize = "sm" | "md" | "lg";
 export interface SelectProps {
     size?: SelectSize;
@@ -43,15 +43,33 @@ export interface SelectContext {
     setTriggerRef: (element: HTMLElement | null) => void;
 }
 export declare const SELECT_KEY: InjectionKey<SelectContext>;
+/**
+ * セレクトトリガーの状態（StyleAdapterに渡す用）
+ */
+export interface SelectTriggerState {
+    size: SelectSize;
+    disabled: boolean;
+    is_open: boolean;
+}
+/**
+ * セレクトコンテンツの状態（StyleAdapterに渡す用）
+ */
+export interface SelectContentState {
+    is_open: boolean;
+}
+/**
+ * セレクトアイテムの状態（StyleAdapterに渡す用）
+ */
+export interface SelectItemState {
+    selected: boolean;
+    disabled: boolean;
+}
 export interface SelectTriggerReturn {
-    base_classes: ComputedRef<string>;
-    is_disabled: ComputedRef<boolean>;
+    state: DeepReadonly<ComputedRef<SelectTriggerState>>;
 }
 export interface SelectContentReturn {
-    base_classes: ComputedRef<string>;
+    state: DeepReadonly<ComputedRef<SelectContentState>>;
 }
 export interface SelectItemReturn {
-    base_classes: ComputedRef<string>;
-    is_selected: ComputedRef<boolean>;
-    is_disabled: ComputedRef<boolean>;
+    state: DeepReadonly<ComputedRef<SelectItemState>>;
 }

package/dist/types/switch.d.ts

@@ -1,17 +1,26 @@
-import type { ComputedRef } from "vue";
+import type { ComputedRef, DeepReadonly } from "vue";
 export type SwitchSize = "sm" | "md" | "lg";
 export interface SwitchProps {
     size?: SwitchSize;
     disabled?: boolean;
 }
+/**
+ * スイッチの状態（StyleAdapterに渡す用）
+ */
+export interface SwitchState {
+    size: SwitchSize;
+    disabled: boolean;
+    checked: boolean;
+}
 export interface SwitchAriaAttributes {
     role: "switch";
     "aria-checked": boolean;
     "aria-disabled"?: boolean;
 }
+/**
+ * useSwitch の戻り値（ヘッドレス - スタイル情報なし）
+ */
 export interface SwitchReturn {
-    track_classes: ComputedRef<string>;
-    thumb_classes: ComputedRef<string>;
-    is_disabled: ComputedRef<boolean>;
-    aria_attributes: ComputedRef<SwitchAriaAttributes>;
+    state: DeepReadonly<ComputedRef<SwitchState>>;
+    aria_attributes: DeepReadonly<ComputedRef<SwitchAriaAttributes>>;
 }