@soave/ui 0.2.2 → 0.3.1

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/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

@@ -13,15 +13,17 @@ export interface ButtonState extends ComponentState {
     size: "sm" | "md" | "lg";
     disabled: boolean;
     loading: boolean;
+    type: "button" | "submit" | "reset";
 }
 /**
  * Input の状態
  */
 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 の状態
@@ -39,6 +41,7 @@ export interface CardState extends ComponentState {
  * Checkbox の状態
  */
 export interface CheckboxState extends ComponentState {
+    size: "sm" | "md" | "lg";
     checked: boolean;
     disabled: boolean;
     indeterminate: boolean;
@@ -46,7 +49,8 @@ export interface CheckboxState extends ComponentState {
 /**
  * Radio の状態
  */
-export interface RadioState extends ComponentState {
+export interface RadioItemState extends ComponentState {
+    size: "sm" | "md" | "lg";
     checked: boolean;
     disabled: boolean;
 }
@@ -54,6 +58,7 @@ export interface RadioState extends ComponentState {
  * Switch の状態
  */
 export interface SwitchState extends ComponentState {
+    size: "sm" | "md" | "lg";
     checked: boolean;
     disabled: boolean;
 }
@@ -64,16 +69,39 @@ 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 extends ComponentState {
+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 の状態
  */

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

package/dist/types/textarea.d.ts

@@ -1,5 +1,6 @@
-import type { ComputedRef, Ref } from "vue";
+import type { ComputedRef, Ref, DeepReadonly } from "vue";
 export type TextareaSize = "sm" | "md" | "lg";
+export type TextareaResize = "none" | "vertical" | "horizontal" | "both";
 export interface TextareaProps {
     size?: TextareaSize;
     placeholder?: string;
@@ -8,20 +9,30 @@ export interface TextareaProps {
     error?: string;
     error_id?: string;
     rows?: number;
-    resize?: "none" | "vertical" | "horizontal" | "both";
+    resize?: TextareaResize;
+}
+/**
+ * テキストエリアの状態（StyleAdapterに渡す用）
+ */
+export interface TextareaState {
+    size: TextareaSize;
+    disabled: boolean;
+    readonly: boolean;
+    has_error: boolean;
+    resize: TextareaResize;
 }
 export interface TextareaAriaAttributes {
     "aria-invalid"?: boolean;
     "aria-describedby"?: string;
     "aria-readonly"?: boolean;
 }
+/**
+ * useTextarea の戻り値（ヘッドレス - スタイル情報なし）
+ */
 export interface TextareaReturn {
-    base_classes: ComputedRef<string>;
+    state: DeepReadonly<ComputedRef<TextareaState>>;
     is_focused: Ref<boolean>;
-    has_error: ComputedRef<boolean>;
-    is_disabled: ComputedRef<boolean>;
-    is_readonly: ComputedRef<boolean>;
-    aria_attributes: ComputedRef<TextareaAriaAttributes>;
+    aria_attributes: DeepReadonly<ComputedRef<TextareaAriaAttributes>>;
     handleFocus: () => void;
     handleBlur: () => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@soave/ui",
-    "version": "0.2.2",
+    "version": "0.3.1",
     "description": "soave UI - Composable-First UI Framework for Vue 3 / Nuxt 4",
     "author": "Arata Ouchi (Original SIN Architecture)",
     "license": "MIT",
@@ -22,17 +22,9 @@
             "import": "./dist/composables/index.mjs",
             "types": "./dist/composables/index.d.ts"
         },
-        "./components": {
-            "import": "./dist/components/ui/index.mjs",
-            "types": "./dist/components/ui/index.d.ts"
-        },
         "./adapters": {
             "import": "./dist/adapters/index.mjs",
             "types": "./dist/adapters/index.d.ts"
-        },
-        "./styles/css-variables.css": {
-            "import": "./dist/styles/css-variables.css",
-            "default": "./dist/styles/css-variables.css"
         }
     },
     "files": [

package/dist/components/ui/Alert.vue

@@ -1,41 +0,0 @@
-<template>
-    <div
-        role="alert"
-        :class="[computed_classes, props.class]"
-    >
-        <slot />
-    </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue"
-import { useUI, useStyleAdapter } from "../../composables/useUIConfig"
-import type { AlertVariant } from "../../types/alert"
-import type { AlertState } from "../../types/composables"
-
-interface Props {
-    variant?: AlertVariant
-    class?: string
-    unstyled?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    unstyled: false
-})
-
-const ui_config = useUI("alert")
-const style_adapter = useStyleAdapter()
-
-// StyleAdapterからクラスを取得
-const computed_classes = computed(() => {
-    if (props.unstyled) {
-        return ""
-    }
-
-    const state: AlertState = {
-        variant: props.variant ?? ui_config.default_variant
-    }
-
-    return style_adapter.getClasses("alert", state)
-})
-</script>

package/dist/components/ui/AlertDescription.vue

@@ -1,22 +0,0 @@
-<template>
-    <div :class="[computed_classes, props.class]">
-        <slot />
-    </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue"
-import { useStyleAdapter } from "../../composables"
-import type { AlertDescriptionProps } from "../../types/alert"
-
-const props = withDefaults(defineProps<AlertDescriptionProps>(), {
-    unstyled: false
-})
-
-const style_adapter = useStyleAdapter()
-
-const computed_classes = computed(() => {
-    if (props.unstyled) return ""
-    return style_adapter.getClasses("alert-description", {})
-})
-</script>

package/dist/components/ui/AlertTitle.vue

@@ -1,22 +0,0 @@
-<template>
-    <h5 :class="[computed_classes, props.class]">
-        <slot />
-    </h5>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue"
-import { useStyleAdapter } from "../../composables"
-import type { AlertTitleProps } from "../../types/alert"
-
-const props = withDefaults(defineProps<AlertTitleProps>(), {
-    unstyled: false
-})
-
-const style_adapter = useStyleAdapter()
-
-const computed_classes = computed(() => {
-    if (props.unstyled) return ""
-    return style_adapter.getClasses("alert-title", {})
-})
-</script>