@soave/ui 0.1.0 → 0.2.0

package/dist/components/ui/Textarea.vue

@@ -1,7 +1,7 @@
 <template>
     <textarea
         :id="id"
-        :class="composable.base_classes.value"
+        :class="[computed_classes, props.class]"
         :disabled="composable.is_disabled.value"
         :readonly="composable.is_readonly.value"
         :placeholder="placeholder"
@@ -15,20 +15,25 @@
 </template>
 
 <script setup lang="ts">
-import { toRef } from "vue"
+import { toRef, computed } from "vue"
 import { useTextarea } from "../../composables/useTextarea"
+import { useStyleAdapter, useUI } from "../../composables/useUIConfig"
 import type { TextareaProps } from "../../types/textarea"
+import type { TextareaState } from "../../types/composables"
 
 interface Props extends TextareaProps {
     id?: string
     modelValue?: string
+    class?: string
+    unstyled?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
     rows: 3,
     resize: "vertical",
     disabled: false,
-    readonly: false
+    readonly: false,
+    unstyled: false
 })
 
 const emit = defineEmits<{
@@ -36,8 +41,26 @@ const emit = defineEmits<{
     blur: [event: FocusEvent]
 }>()
 
+const ui_config = useUI("input")
+const style_adapter = useStyleAdapter()
 const composable = useTextarea(toRef(() => props))
 
+// StyleAdapterからクラスを取得
+const computed_classes = computed(() => {
+    if (props.unstyled) {
+        return ""
+    }
+
+    const state: TextareaState = {
+        size: props.size ?? ui_config.default_size,
+        disabled: composable.is_disabled.value,
+        readonly: composable.is_readonly.value,
+        error: props.error
+    }
+
+    return style_adapter.getClasses("textarea", state)
+})
+
 const handleInput = (event: Event) => {
     const target = event.target as HTMLTextAreaElement
     emit("update:modelValue", target.value)

package/dist/components/ui/Toast.vue

@@ -1,15 +1,15 @@
 <template>
     <div
-        :class="cn(base_classes, variant_classes[variant], props.class)"
+        :class="[computed_classes, props.class]"
         :role="aria_role"
         :aria-live="aria_live"
         aria-atomic="true"
     >
         <div class="flex-1 space-y-1">
-            <div v-if="title" class="text-sm font-semibold">
+            <div v-if="title" :class="title_classes">
                 {{ title }}
             </div>
-            <div v-if="description" class="text-sm opacity-90">
+            <div v-if="description" :class="description_classes">
                 {{ description }}
             </div>
         </div>
@@ -18,7 +18,7 @@
             <button
                 v-if="action"
                 type="button"
-                :class="action_button_classes"
+                :class="action_classes"
                 @click="action.onClick"
             >
                 {{ action.label }}
@@ -27,7 +27,7 @@
             <button
                 v-if="dismissible"
                 type="button"
-                :class="dismiss_button_classes"
+                :class="dismiss_classes"
                 aria-label="Dismiss"
                 @click="emit('dismiss')"
             >
@@ -52,8 +52,9 @@
 
 <script setup lang="ts">
 import { computed } from "vue"
-import { cn } from "../../utils/cn"
+import { useStyleAdapter } from "../../composables"
 import type { ToastVariant, ToastAction } from "../../types/toast"
+import type { ToastState } from "../../types/composables"
 
 export interface Props {
     title?: string
@@ -62,26 +63,48 @@ export interface Props {
     dismissible?: boolean
     action?: ToastAction
     class?: string
+    unstyled?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
     variant: "default",
-    dismissible: true
+    dismissible: true,
+    unstyled: false
 })
 
 const emit = defineEmits<{
     dismiss: []
 }>()
 
-const base_classes = "pointer-events-auto flex items-start gap-4 rounded-lg border p-4 shadow-lg transition-all"
+const style_adapter = useStyleAdapter()
 
-const variant_classes: Record<ToastVariant, string> = {
-    default: "bg-background text-foreground border-border",
-    success: "bg-green-50 text-green-900 border-green-200 dark:bg-green-950 dark:text-green-100 dark:border-green-800",
-    error: "bg-red-50 text-red-900 border-red-200 dark:bg-red-950 dark:text-red-100 dark:border-red-800",
-    warning: "bg-yellow-50 text-yellow-900 border-yellow-200 dark:bg-yellow-950 dark:text-yellow-100 dark:border-yellow-800",
-    info: "bg-blue-50 text-blue-900 border-blue-200 dark:bg-blue-950 dark:text-blue-100 dark:border-blue-800"
-}
+const computed_classes = computed(() => {
+    if (props.unstyled) return ""
+    const state: ToastState = {
+        variant: props.variant
+    }
+    return style_adapter.getClasses("toast", state)
+})
+
+const title_classes = computed(() => {
+    if (props.unstyled) return ""
+    return style_adapter.getClasses("toast-title", {})
+})
+
+const description_classes = computed(() => {
+    if (props.unstyled) return ""
+    return style_adapter.getClasses("toast-description", {})
+})
+
+const action_classes = computed(() => {
+    if (props.unstyled) return ""
+    return style_adapter.getClasses("toast-action", {})
+})
+
+const dismiss_classes = computed(() => {
+    if (props.unstyled) return ""
+    return style_adapter.getClasses("toast-dismiss", {})
+})
 
 const aria_role = computed(() => {
     return props.variant === "error" ? "alert" : "status"
@@ -90,18 +113,4 @@ const aria_role = computed(() => {
 const aria_live = computed(() => {
     return props.variant === "error" ? "assertive" : "polite"
 })
-
-const action_button_classes = cn(
-    "inline-flex items-center justify-center rounded-md text-sm font-medium",
-    "h-8 px-3 ring-offset-background transition-colors",
-    "hover:bg-secondary focus-visible:outline-none focus-visible:ring-2",
-    "focus-visible:ring-ring focus-visible:ring-offset-2"
-)
-
-const dismiss_button_classes = cn(
-    "inline-flex items-center justify-center rounded-md",
-    "h-6 w-6 shrink-0 opacity-70 transition-opacity",
-    "hover:opacity-100 focus-visible:outline-none focus-visible:ring-2",
-    "focus-visible:ring-ring"
-)
 </script>

package/dist/components/ui/Toaster.vue

@@ -1,13 +1,13 @@
 <template>
     <Teleport to="body">
         <div
-            :class="cn(container_classes, position_classes[position], props.class)"
+            :class="[computed_classes, props.class]"
             aria-label="Notifications"
         >
             <TransitionGroup
                 name="toast"
                 tag="div"
-                :class="cn('flex flex-col', gap_class)"
+                class="flex flex-col gap-2"
             >
                 <Toast
                     v-for="toast in visible_toasts"
@@ -17,6 +17,7 @@
                     :variant="toast.variant"
                     :dismissible="toast.dismissible"
                     :action="toast.action"
+                    :unstyled="unstyled"
                     @dismiss="handleDismiss(toast.id)"
                 />
             </TransitionGroup>
@@ -26,7 +27,7 @@
 
 <script setup lang="ts">
 import { computed, ref, watchEffect } from "vue"
-import { cn } from "../../utils/cn"
+import { useStyleAdapter } from "../../composables"
 import { useToast } from "../../composables/useToast"
 import Toast from "./Toast.vue"
 import type { ToastPosition, Toast as ToastType } from "../../types/toast"
@@ -36,15 +37,18 @@ export interface Props {
     max_toasts?: number
     gap?: number
     class?: string
+    unstyled?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
     position: "bottom-right",
     max_toasts: 5,
-    gap: 8
+    gap: 8,
+    unstyled: false
 })
 
 const { toasts, dismiss } = useToast()
+const style_adapter = useStyleAdapter()
 
 const internal_toasts = ref<ToastType[]>([])
 
@@ -61,18 +65,10 @@ const handleDismiss = (id: string): void => {
     dismiss(id)
 }
 
-const container_classes = "fixed z-[100] flex pointer-events-none p-4"
-
-const position_classes: Record<ToastPosition, string> = {
-    "top-left": "top-0 left-0 flex-col",
-    "top-center": "top-0 left-1/2 -translate-x-1/2 flex-col items-center",
-    "top-right": "top-0 right-0 flex-col items-end",
-    "bottom-left": "bottom-0 left-0 flex-col-reverse",
-    "bottom-center": "bottom-0 left-1/2 -translate-x-1/2 flex-col-reverse items-center",
-    "bottom-right": "bottom-0 right-0 flex-col-reverse items-end"
-}
-
-const gap_class = computed(() => `gap-${props.gap / 4}`)
+const computed_classes = computed(() => {
+    if (props.unstyled) return ""
+    return style_adapter.getClasses("toaster", { position: props.position })
+})
 </script>
 
 <style scoped>

package/dist/components/ui/TooltipContent.vue

@@ -6,7 +6,7 @@
             :id="tooltip_id"
             role="tooltip"
             :style="position_styles"
-            :class="cn(base_classes, props.class)"
+            :class="[computed_classes, props.class]"
             @mouseenter="handleContentMouseEnter"
             @mouseleave="handleContentMouseLeave"
         >
@@ -16,15 +16,15 @@
 </template>
 
 <script setup lang="ts">
-import { inject, ref, watchEffect } from "vue"
-import { cn } from "../../utils/cn"
+import { inject, ref, computed, watchEffect } from "vue"
+import { useStyleAdapter } from "../../composables"
 import { TOOLTIP_CONTEXT_KEY } from "./Tooltip.vue"
+import type { TooltipContentProps } from "../../types/tooltip"
+import type { TooltipState } from "../../types/composables"
 
-export interface Props {
-    class?: string
-}
-
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<TooltipContentProps>(), {
+    unstyled: false
+})
 
 const context = inject(TOOLTIP_CONTEXT_KEY)
 
@@ -41,26 +41,29 @@ const {
     handleMouseLeave
 } = context
 
+const style_adapter = useStyleAdapter()
 const content_element = ref<HTMLElement | null>(null)
 
 watchEffect(() => {
     content_ref.value = content_element.value
 })
 
+const computed_classes = computed(() => {
+    if (props.unstyled) return ""
+    const state: TooltipState = {
+        is_open: is_open.value,
+        side: "top"
+    }
+    return style_adapter.getClasses("tooltip", state)
+})
+
 const handleContentMouseEnter = (): void => {
-    // Keep tooltip open when hovering over content
     handleMouseEnter()
 }
 
 const handleContentMouseLeave = (): void => {
     handleMouseLeave()
 }
-
-const base_classes = cn(
-    "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5",
-    "text-xs text-primary-foreground shadow-md",
-    "animate-in fade-in-0 zoom-in-95"
-)
 </script>
 
 <style scoped>

package/dist/components/ui/UIProvider.vue

@@ -1,17 +1,21 @@
 <script setup lang="ts">
 import type { DeepPartial } from "../../types/utils"
 import type { UIConfig } from "../../types/config"
+import type { StyleAdapter } from "../../adapters/types"
 import { useUIProvider } from "../../composables/useUIConfig"
+import { tailwindAdapter } from "../../adapters/tailwind"
 
 interface UIProviderProps {
     config?: DeepPartial<UIConfig>
+    adapter?: StyleAdapter
 }
 
 const props = withDefaults(defineProps<UIProviderProps>(), {
-    config: () => ({})
+    config: () => ({}),
+    adapter: () => tailwindAdapter
 })
 
-useUIProvider(props.config)
+useUIProvider(props.config, props.adapter)
 </script>
 
 <template>

package/dist/composables/index.d.ts

@@ -3,7 +3,7 @@ export { useInput } from "./useInput";
 export { useCard } from "./useCard";
 export { useDialog } from "./useDialog";
 export { useForm } from "./useForm";
-export { useUIProvider, useUI, useUIConfig, UI_CONFIG_KEY } from "./useUIConfig";
+export { useUIProvider, useUI, useUIConfig, useStyleAdapter, UI_PROVIDER_KEY, UI_CONFIG_KEY } from "./useUIConfig";
 export { useCheckbox } from "./useCheckbox";
 export { useRadioItem } from "./useRadio";
 export { useSwitch } from "./useSwitch";

package/dist/composables/index.mjs

@@ -3,7 +3,7 @@ export { useInput } from "./useInput.mjs";
 export { useCard } from "./useCard.mjs";
 export { useDialog } from "./useDialog.mjs";
 export { useForm } from "./useForm.mjs";
-export { useUIProvider, useUI, useUIConfig, UI_CONFIG_KEY } from "./useUIConfig.mjs";
+export { useUIProvider, useUI, useUIConfig, useStyleAdapter, UI_PROVIDER_KEY, UI_CONFIG_KEY } from "./useUIConfig.mjs";
 export { useCheckbox } from "./useCheckbox.mjs";
 export { useRadioItem } from "./useRadio.mjs";
 export { useSwitch } from "./useSwitch.mjs";

package/dist/composables/useUIConfig.d.ts

@@ -1,16 +1,22 @@
 import { type InjectionKey } from "vue";
 import type { DeepPartial } from "../types/utils";
-import type { UIConfig, ButtonConfig, InputConfig, CardConfig, AlertConfig } from "../types/config";
+import type { UIConfig, UIProviderContext, ButtonConfig, InputConfig, CardConfig, AlertConfig } from "../types/config";
+import type { StyleAdapter } from "../adapters/types";
 /**
- * UIConfig用のInjectionKey
+ * UIProviderContext用のInjectionKey
+ */
+export declare const UI_PROVIDER_KEY: InjectionKey<UIProviderContext>;
+/**
+ * @deprecated UI_CONFIG_KEY は後方互換性のために残されています。UI_PROVIDER_KEY を使用してください。
  */
 export declare const UI_CONFIG_KEY: InjectionKey<UIConfig>;
 /**
- * UIProviderで設定を提供する
+ * UIProviderで設定とStyleAdapterを提供する
  * @param config - 部分的なUI設定（デフォルト値とマージされる）
- * @returns マージされたUI設定
+ * @param adapter - 使用するStyleAdapter（デフォルト: tailwindAdapter）
+ * @returns UIProviderContext
  */
-export declare const useUIProvider: (config?: DeepPartial<UIConfig>) => UIConfig;
+export declare const useUIProvider: (config?: DeepPartial<UIConfig>, adapter?: StyleAdapter) => UIProviderContext;
 /**
  * コンポーネント固有の設定を取得する
  * @param component - コンポーネント名
@@ -26,3 +32,8 @@ export declare function useUI(component: "alert"): Readonly<AlertConfig>;
  * @returns 読み取り専用の全体設定
  */
 export declare const useUIConfig: () => Readonly<UIConfig>;
+/**
+ * Style Adapter を取得する
+ * @returns 現在設定されているStyleAdapter（デフォルト: tailwindAdapter）
+ */
+export declare const useStyleAdapter: () => StyleAdapter;

package/dist/composables/useUIConfig.mjs

@@ -1,36 +1,53 @@
 import { inject, provide, reactive, readonly } from "vue";
 import { DEFAULT_UI_CONFIG } from "../types/config.mjs";
+import { tailwindAdapter } from "../adapters/tailwind.mjs";
 import { deepMerge } from "../utils/deepMerge.mjs";
 import { COMPONENT_ERRORS } from "../constants/errors.mjs";
 import { CONFIG_LOGS } from "../constants/logs.mjs";
+export const UI_PROVIDER_KEY = Symbol("ui-provider");
 export const UI_CONFIG_KEY = Symbol("ui-config");
-export const useUIProvider = (config = {}) => {
+export const useUIProvider = (config = {}, adapter = tailwindAdapter) => {
   const merged_config = reactive(
     deepMerge(DEFAULT_UI_CONFIG, config)
   );
+  const context = {
+    config: merged_config,
+    adapter
+  };
+  provide(UI_PROVIDER_KEY, context);
   provide(UI_CONFIG_KEY, merged_config);
   if (import.meta.env.DEV) {
-    console.debug(CONFIG_LOGS.PROVIDER_INITIALIZED, merged_config);
+    console.debug(CONFIG_LOGS.PROVIDER_INITIALIZED, context);
   }
-  return merged_config;
+  return context;
 };
 export function useUI(component) {
-  const config = inject(UI_CONFIG_KEY, null);
-  if (!config) {
+  const context = inject(UI_PROVIDER_KEY, null);
+  if (!context) {
     if (import.meta.env.DEV) {
       console.warn(COMPONENT_ERRORS.PROVIDER_NOT_FOUND);
     }
     return readonly(DEFAULT_UI_CONFIG[component]);
   }
-  return readonly(config[component]);
+  return readonly(context.config[component]);
 }
 export const useUIConfig = () => {
-  const config = inject(UI_CONFIG_KEY, null);
-  if (!config) {
+  const context = inject(UI_PROVIDER_KEY, null);
+  if (!context) {
     if (import.meta.env.DEV) {
       console.warn(COMPONENT_ERRORS.PROVIDER_NOT_FOUND);
     }
     return readonly(DEFAULT_UI_CONFIG);
   }
-  return readonly(config);
+  return readonly(context.config);
+};
+export const useStyleAdapter = () => {
+  const context = inject(UI_PROVIDER_KEY, null);
+  if (!context) {
+    if (import.meta.env.DEV) {
+      console.warn(COMPONENT_ERRORS.PROVIDER_NOT_FOUND);
+    }
+    return tailwindAdapter;
+  }
+  return context.adapter;
 };

package/dist/index.d.ts

@@ -3,3 +3,4 @@ export * from "./components/ui";
 export * from "./types";
 export * from "./utils";
 export * from "./constants";
+export * from "./adapters";

package/dist/index.mjs

@@ -3,3 +3,4 @@ export * from "./components/ui/index.mjs";
 export * from "./types/index.mjs";
 export * from "./utils/index.mjs";
 export * from "./constants/index.mjs";
+export * from "./adapters/index.mjs";

package/dist/styles/css-variables.css

@@ -0,0 +1 @@
+:root{--color-primary:#0080ff;--color-primary-foreground:#fff;--color-primary-hover:#0073e6;--color-primary-active:#06c;--color-secondary:#f5f5f5;--color-secondary-foreground:#000;--color-secondary-hover:#e6e6e6;--color-accent:#141414;--color-accent-foreground:#fff;--color-destructive:#ef4343;--color-destructive-foreground:#fff;--color-ghost-hover:#f1f5f9;--color-input:#f1f5f9;--color-input-border:#dbe6f0;--color-input-error:#ef4343;--color-card:#fff;--color-card-border:#dbe6f0;--color-card-foreground:#000;--color-background:#fff;--color-foreground:#000;--color-muted:#f1f5f9;--color-muted-foreground:#4573a1;--color-popover:#fff;--color-popover-foreground:#000;--color-alert-info:#e6f2ff;--color-alert-info-border:#9cf;--color-alert-info-foreground:#004d99;--color-alert-success:#e6ffe6;--color-alert-success-border:#9f9;--color-alert-success-foreground:green;--color-alert-warning:#fff7e6;--color-alert-warning-border:#fd9;--color-alert-warning-foreground:#805500;--size-xs:0.75rem;--size-sm:0.875rem;--size-md:1rem;--size-lg:1.125rem;--size-xl:1.25rem;--space-0-5:0.125rem;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-11:2.75rem;--space-12:3rem;--space-16:4rem;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.625rem;--radius-full:9999px;--border-width-1:1px;--border-width-2:2px;--font-family-base:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-family-mono:"Courier New",monospace;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-tight:1.2;--line-height-normal:1.5;--line-height-relaxed:1.75;--transition-fast:150ms cubic-bezier(0.16,1,0.3,1);--transition-normal:250ms cubic-bezier(0.16,1,0.3,1);--transition-slow:350ms cubic-bezier(0.16,1,0.3,1);--shadow-xs:0 1px 2px rgba(0,0,0,.05);--shadow-sm:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);--shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--z-dropdown:50;--z-sticky:100;--z-fixed:200;--z-modal-backdrop:300;--z-modal:400;--z-popover:500;--z-tooltip:600}.button{align-items:center;border:none;border-radius:var(--radius-md);cursor:pointer;display:inline-flex;font-family:var(--font-family-base);font-size:var(--size-sm);font-weight:var(--font-weight-medium);gap:var(--space-2);justify-content:center;transition:all var(--transition-normal);white-space:nowrap}.button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.button--primary{background-color:var(--color-primary);border:var(--border-width-1) solid var(--color-primary);color:var(--color-primary-foreground)}.button--primary:hover:not(:disabled){background-color:var(--color-primary-hover);border-color:var(--color-primary-hover)}.button--primary:active:not(:disabled){background-color:var(--color-primary-active)}.button--secondary{background-color:var(--color-secondary);border:var(--border-width-1) solid var(--color-input-border);color:var(--color-secondary-foreground)}.button--secondary:hover:not(:disabled){background-color:var(--color-secondary-hover)}.button--outline{background-color:transparent;border:var(--border-width-1) solid var(--color-input-border);color:var(--color-foreground)}.button--outline:hover:not(:disabled){background-color:var(--color-ghost-hover)}.button--ghost{background-color:transparent;border:none;color:var(--color-foreground)}.button--ghost:hover:not(:disabled){background-color:var(--color-ghost-hover)}.button--destructive{background-color:var(--color-destructive);border:var(--border-width-1) solid var(--color-destructive);color:var(--color-destructive-foreground)}.button--destructive:hover:not(:disabled){background-color:#ed2c2c}.button--sm{font-size:var(--size-sm);height:var(--space-8);padding:var(--space-2) var(--space-3)}.button--md{height:var(--space-10);padding:var(--space-2) var(--space-4)}.button--lg{font-size:var(--size-lg);height:var(--space-11);padding:var(--space-3) var(--space-8)}.button--disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.button--loading{cursor:wait}.input{background-color:var(--color-background);border:var(--border-width-1) solid var(--color-input-border);border-radius:var(--radius-md);display:flex;font-family:var(--font-family-base);font-size:var(--size-sm);padding:var(--space-2) var(--space-3);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);width:100%}.input::-moz-placeholder{color:var(--color-muted-foreground)}.input::placeholder{color:var(--color-muted-foreground)}.input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(0,128,255,.1);outline:none}.input--sm{font-size:var(--size-sm);height:var(--space-8);padding:var(--space-1) var(--space-2)}.input--md{height:var(--space-10);padding:var(--space-2) var(--space-3)}.input--lg{font-size:var(--size-lg);height:var(--space-11);padding:var(--space-3) var(--space-4)}.input--error{border-color:var(--color-input-error)}.input--error:focus{box-shadow:0 0 0 3px rgba(239,67,67,.1)}.input--disabled{cursor:not-allowed;opacity:.7}.input--disabled,.input--readonly{background-color:var(--color-muted)}.textarea{background-color:var(--color-background);border:var(--border-width-1) solid var(--color-input-border);border-radius:var(--radius-md);display:flex;font-family:var(--font-family-base);font-size:var(--size-sm);padding:var(--space-2) var(--space-3);resize:vertical;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);width:100%}.textarea::-moz-placeholder{color:var(--color-muted-foreground)}.textarea::placeholder{color:var(--color-muted-foreground)}.textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(0,128,255,.1);outline:none}.textarea--sm{font-size:var(--size-sm);min-height:80px}.textarea--md{min-height:100px}.textarea--lg{font-size:var(--size-lg);min-height:120px}.textarea--error{border-color:var(--color-input-error)}.textarea--disabled{cursor:not-allowed;opacity:.7}.textarea--disabled,.textarea--readonly{background-color:var(--color-muted)}.card{background-color:var(--color-card);border:var(--border-width-1) solid var(--color-card-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);color:var(--color-card-foreground)}.card--padding-sm{padding:var(--space-4)}.card--padding-md{padding:var(--space-6)}.card--padding-lg{padding:var(--space-8)}.checkbox{align-items:center;background-color:var(--color-background);border:var(--border-width-1) solid var(--color-primary);border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;height:1rem;justify-content:center;transition:all var(--transition-fast);width:1rem}.checkbox:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.checkbox--checked,.checkbox--indeterminate{background-color:var(--color-primary);color:var(--color-primary-foreground)}.checkbox--disabled{cursor:not-allowed;opacity:.5}.radio{align-items:center;background-color:var(--color-background);border:var(--border-width-1) solid var(--color-primary);border-radius:var(--radius-full);cursor:pointer;display:inline-flex;height:1rem;justify-content:center;transition:all var(--transition-fast);width:1rem}.radio:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.radio--checked:after{background-color:var(--color-primary);border-radius:var(--radius-full);content:"";display:block;height:.5rem;width:.5rem}.radio--disabled{cursor:not-allowed;opacity:.5}.switch{align-items:center;background-color:var(--color-input-border);border-radius:var(--radius-full);cursor:pointer;display:inline-flex;height:1.5rem;padding:2px;transition:all var(--transition-fast);width:2.75rem}.switch:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.switch--checked{background-color:var(--color-primary)}.switch--disabled{cursor:not-allowed;opacity:.5}.select{align-items:center;background-color:var(--color-background);border:var(--border-width-1) solid var(--color-input-border);border-radius:var(--radius-md);cursor:pointer;display:flex;font-size:var(--size-sm);justify-content:space-between;padding:var(--space-2) var(--space-3);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);width:100%}.select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(0,128,255,.1);outline:none}.select--sm{font-size:var(--size-sm);height:var(--space-8)}.select--md{height:var(--space-10)}.select--lg{font-size:var(--size-lg);height:var(--space-11)}.select--disabled{cursor:not-allowed;opacity:.5}.select__content{background-color:var(--color-popover);border:var(--border-width-1) solid var(--color-card-border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);max-height:24rem;min-width:8rem;overflow:auto;position:absolute;z-index:var(--z-dropdown)}.select__item{align-items:center;cursor:pointer;display:flex;font-size:var(--size-sm);padding:var(--space-2) var(--space-3);transition:background-color var(--transition-fast);width:100%}.select__item:hover{background-color:var(--color-ghost-hover)}.dialog{background-color:var(--color-background);border:var(--border-width-1) solid var(--color-card-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);left:50%;max-width:32rem;padding:var(--space-6);position:fixed;top:50%;transform:translate(-50%,-50%);width:100%;z-index:var(--z-modal)}.dialog__overlay{background-color:rgba(0,0,0,.8);inset:0;position:fixed;z-index:var(--z-modal-backdrop)}.sheet{background-color:var(--color-background);box-shadow:var(--shadow-lg);padding:var(--space-6);position:fixed;transition:transform var(--transition-slow);z-index:var(--z-modal)}.sheet--top{border-bottom:var(--border-width-1) solid var(--color-card-border);inset:0 0 auto 0}.sheet--bottom{border-top:var(--border-width-1) solid var(--color-card-border);inset:auto 0 0 0}.sheet--left{border-right:var(--border-width-1) solid var(--color-card-border);inset:0 auto 0 0}.sheet--left,.sheet--right{height:100%;max-width:24rem;width:75%}.sheet--right{border-left:var(--border-width-1) solid var(--color-card-border);inset:0 0 0 auto}.sheet__overlay{background-color:rgba(0,0,0,.8);inset:0;position:fixed;z-index:var(--z-modal-backdrop)}.alert{border:var(--border-width-1) solid var(--color-card-border);border-radius:var(--radius-lg);padding:var(--space-4);position:relative;width:100%}.alert--default{background-color:var(--color-background);color:var(--color-foreground)}.alert--info{background-color:var(--color-alert-info);border-color:var(--color-alert-info-border);color:var(--color-alert-info-foreground)}.alert--success{background-color:var(--color-alert-success);border-color:var(--color-alert-success-border);color:var(--color-alert-success-foreground)}.alert--warning{background-color:var(--color-alert-warning);border-color:var(--color-alert-warning-border);color:var(--color-alert-warning-foreground)}.alert--destructive{background-color:rgba(239,67,67,.1);border-color:rgba(239,67,67,.5);color:var(--color-destructive)}.toast{align-items:center;border:var(--border-width-1) solid var(--color-card-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);display:flex;gap:var(--space-4);justify-content:space-between;overflow:hidden;padding:var(--space-6);padding-right:var(--space-8);width:100%}.toast--default{background-color:var(--color-background);color:var(--color-foreground)}.toast--success{background-color:var(--color-alert-success);border-color:var(--color-alert-success-border);color:var(--color-alert-success-foreground)}.toast--error{background-color:rgba(239,67,67,.1);border-color:var(--color-destructive);color:var(--color-destructive)}.toast--warning{background-color:var(--color-alert-warning);border-color:var(--color-alert-warning-border);color:var(--color-alert-warning-foreground)}.toast--info{background-color:var(--color-alert-info);border-color:var(--color-alert-info-border);color:var(--color-alert-info-foreground)}.tooltip{font-size:var(--size-sm);overflow:hidden;padding:var(--space-1) var(--space-3);z-index:var(--z-tooltip)}.popover,.tooltip{background-color:var(--color-popover);border:var(--border-width-1) solid var(--color-card-border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);color:var(--color-popover-foreground)}.popover{padding:var(--space-4);width:18rem;z-index:var(--z-popover)}.dropdown{background-color:var(--color-popover);border:var(--border-width-1) solid var(--color-card-border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);color:var(--color-popover-foreground);min-width:8rem;overflow:hidden;padding:var(--space-1);z-index:var(--z-dropdown)}.dropdown__item{align-items:center;border-radius:var(--radius-sm);cursor:pointer;display:flex;font-size:var(--size-sm);padding:var(--space-2);transition:background-color var(--transition-fast)}.dropdown__item:hover{background-color:var(--color-ghost-hover)}.label{font-size:var(--size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight)}@media (prefers-color-scheme:dark){:root{--color-primary:#39f;--color-primary-foreground:#000;--color-secondary:#25292c;--color-secondary-foreground:#fff;--color-card:#171a1c;--color-card-border:#2e3338;--color-card-foreground:#fff;--color-background:#131416;--color-foreground:#fff;--color-muted:#25292c;--color-muted-foreground:#9099a2;--color-input:#25292c;--color-input-border:#3a4045;--color-popover:#1c1f21;--color-popover-foreground:#fff;--color-ghost-hover:#2e3338;--color-alert-info:#00264d;--color-alert-info-border:#06c;--color-alert-info-foreground:#9cf;--color-alert-success:#004d00;--color-alert-success-border:#00b300;--color-alert-success-foreground:#9f9;--color-alert-warning:#4d3300;--color-alert-warning-border:#e69900;--color-alert-warning-foreground:#fd9}}[data-theme=dark]{--color-primary:#39f;--color-primary-foreground:#000;--color-secondary:#25292c;--color-secondary-foreground:#fff;--color-card:#171a1c;--color-card-border:#2e3338;--color-card-foreground:#fff;--color-background:#131416;--color-foreground:#fff;--color-muted:#25292c;--color-muted-foreground:#9099a2;--color-input:#25292c;--color-input-border:#3a4045;--color-popover:#1c1f21;--color-popover-foreground:#fff;--color-ghost-hover:#2e3338;--color-alert-info:#00264d;--color-alert-info-border:#06c;--color-alert-info-foreground:#9cf;--color-alert-success:#004d00;--color-alert-success-border:#00b300;--color-alert-success-foreground:#9f9;--color-alert-warning:#4d3300;--color-alert-warning-border:#e69900;--color-alert-warning-foreground:#fd9}[data-theme=light]{--color-primary:#0080ff;--color-primary-foreground:#fff;--color-secondary:#f5f5f5;--color-secondary-foreground:#000;--color-card:#fff;--color-card-border:#dbe6f0;--color-card-foreground:#000;--color-background:#fff;--color-foreground:#000;--color-muted:#f1f5f9;--color-muted-foreground:#4573a1;--color-input:#f1f5f9;--color-input-border:#dbe6f0;--color-popover:#fff;--color-popover-foreground:#000;--color-ghost-hover:#f1f5f9;--color-alert-info:#e6f2ff;--color-alert-info-border:#9cf;--color-alert-info-foreground:#004d99;--color-alert-success:#e6ffe6;--color-alert-success-border:#9f9;--color-alert-success-foreground:green;--color-alert-warning:#fff7e6;--color-alert-warning-border:#fd9;--color-alert-warning-foreground:#805500}

package/dist/styles/index.d.ts

@@ -0,0 +1 @@
+export declare const CSS_VARIABLES_PATH = "./css-variables.css";

package/dist/styles/index.mjs

@@ -0,0 +1 @@
+export const CSS_VARIABLES_PATH = "./css-variables.css";

package/dist/types/alert.d.ts

@@ -9,7 +9,9 @@ export interface AlertReturn {
 }
 export interface AlertTitleProps {
     class?: string;
+    unstyled?: boolean;
 }
 export interface AlertDescriptionProps {
     class?: string;
+    unstyled?: boolean;
 }

package/dist/types/card.d.ts

@@ -8,16 +8,21 @@ export interface CardReturn {
 }
 export interface CardHeaderProps {
     class?: string;
+    unstyled?: boolean;
 }
 export interface CardTitleProps {
     class?: string;
+    unstyled?: boolean;
 }
 export interface CardDescriptionProps {
     class?: string;
+    unstyled?: boolean;
 }
 export interface CardContentProps {
     class?: string;
+    unstyled?: boolean;
 }
 export interface CardFooterProps {
     class?: string;
+    unstyled?: boolean;
 }