@proj-airi/ui 0.8.1-beta.2 → 0.8.1-beta.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@proj-airi/ui",
   "type": "module",
-  "version": "0.8.1-beta.2",
+  "version": "0.8.1-beta.4",
   "description": "A collection of UI components that used by Project AIRI",
   "author": {
     "name": "Moeru AI Project AIRI Team",
@@ -16,8 +16,9 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./components/animations": "./src/components/Animations/index.ts",
-    "./components/form": "./src/components/Form/index.ts",
+    "./components/animations": "./src/components/animations/index.ts",
+    "./components/form": "./src/components/form/index.ts",
+    "./components/layouts": "./src/components/layouts/index.ts",
     "./*": "./*"
   },
   "dependencies": {

package/src/components/animations/index.ts

@@ -0,0 +1,9 @@
+export { default as TransitionBidirectional } from './transition-bidirectional.vue'
+export {
+  /**
+   * @deprecated Use TransitionBidirectional instead
+   */
+  default as BidirectionalTransition,
+} from './transition-bidirectional.vue'
+export { default as TransitionHorizontal } from './transition-horizontal.vue'
+export { default as TransitionVertical } from './transition-vertical.vue'

package/src/components/{Form/Checkbox/Checkbox.vue → form/checkbox/checkbox.vue}

@@ -11,6 +11,7 @@ const modelValue = defineModel<boolean>({ required: true })
       'duration-250 ease-in-out',
       'focus-within:outline-none',
       'flex',
+      'is-interacting',
       'border-neutral-300 dark:border-neutral-700 data-[state=checked]:border-primary-200 data-[state=unchecked]:border-neutral-300 focus-within:border-neutral-800',
       'data-[state=checked]:bg-primary-400 data-[state=unchecked]:bg-neutral-300 data-[state=checked]:dark:bg-primary-400/80 dark:data-[state=unchecked]:bg-neutral-800',
       'relative h-7 w-12.5 rounded-full',

package/src/components/form/checkbox/index.ts

@@ -0,0 +1 @@
+export { default as Checkbox } from './checkbox.vue'

package/src/components/form/combobox/index.ts

@@ -0,0 +1 @@
+export { default as Combobox } from './combobox.vue'

package/src/components/{Form/Field/FieldCheckbox.vue → form/field/field-checkbox.vue}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Checkbox from '../Checkbox/Checkbox.vue'
+import { Checkbox } from '../checkbox'
 
 const props = defineProps<{
   label?: string

package/src/components/{Form/Field/FieldInput.vue → form/field/field-input.vue}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Input from '../Input/Input.vue'
+import { Input } from '../input'
 
 const props = withDefaults(defineProps<{
   label?: string
@@ -24,9 +24,9 @@ const modelValue = defineModel<string>({ required: false })
           <slot name="label">
             {{ props.label }}
           </slot>
-          <span v-if="props.required !== false" class="text-red-500">*</span>
+          <span v-if="props.required" class="text-red-500">*</span>
         </div>
-        <div class="text-xs text-neutral-500 dark:text-neutral-400" text-nowrap>
+        <div class="text-xs text-neutral-500 dark:text-neutral-400" text-wrap>
           <slot name="description">
             {{ props.description }}
           </slot>

package/src/components/{Form/Field/FieldKeyValues.vue → form/field/field-key-values.vue}

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 
-import InputKeyValue from '../Input/InputKeyValue.vue'
+import { InputKeyValue } from '../input'
 
 const props = defineProps<{
   label?: string
@@ -37,7 +37,7 @@ watch([inputKey, inputValue], () => {
           </slot>
           <span v-if="props.required !== false" class="text-red-500">*</span>
         </div>
-        <div class="text-xs text-neutral-500 dark:text-neutral-400" text-nowrap>
+        <div class="text-xs text-neutral-500 dark:text-neutral-400">
           <slot name="description">
             {{ props.description }}
           </slot>

package/src/components/{Form/Field/FieldRange.vue → form/field/field-range.vue}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Range from '../Range/Range.vue'
+import { Range } from '../range'
 
 const props = withDefaults(defineProps<{
   min?: number

package/src/components/{Form/Field/FieldSelect.vue → form/field/field-select.vue}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Select } from '@proj-airi/ui'
+import { Select } from '../select'
 
 const props = withDefaults(defineProps<{
   label: string

package/src/components/{Form/Field/FieldTextArea.vue → form/field/field-text-area.vue}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Textarea from '../Textarea/Textarea.vue'
+import { Textarea } from '../textarea'
 
 const props = withDefaults(defineProps<{
   label?: string
@@ -25,7 +25,7 @@ const modelValue = defineModel<string>({ required: false })
           </slot>
           <span v-if="props.required !== false" class="text-red-500">*</span>
         </div>
-        <div class="text-xs text-neutral-500 dark:text-neutral-400" text-nowrap>
+        <div class="text-xs text-neutral-500 dark:text-neutral-400">
           <slot name="description">
             {{ props.description }}
           </slot>

package/src/components/{Form/Field/FieldValues.vue → form/field/field-values.vue}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Input from '../Input/Input.vue'
+import { Input } from '../input'
 
 const props = defineProps<{
   label?: string

package/src/components/form/field/index.ts

@@ -0,0 +1,7 @@
+export { default as FieldCheckbox } from './field-checkbox.vue'
+export { default as FieldInput } from './field-input.vue'
+export { default as FieldKeyValues } from './field-key-values.vue'
+export { default as FieldRange } from './field-range.vue'
+export { default as FieldSelect } from './field-select.vue'
+export { default as FieldTextArea } from './field-text-area.vue'
+export { default as FieldValues } from './field-values.vue'

package/src/components/form/index.ts

@@ -0,0 +1,9 @@
+export * from './checkbox'
+export * from './combobox'
+export * from './field'
+export * from './input'
+export * from './radio'
+export * from './range'
+export * from './select'
+export * from './select-tab'
+export * from './textarea'

package/src/components/form/input/index.ts

@@ -0,0 +1,4 @@
+export { default as BasicInputFile } from './basic-input-file.vue'
+export { default as InputFile } from './input-file.vue'
+export { default as InputKeyValue } from './input-key-value.vue'
+export { default as Input } from './input.vue'

package/src/components/{Form/Input/InputFile.vue → form/input/input-file.vue}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import BasicInputFile from './BasicInputFile.vue'
+import BasicInputFile from './basic-input-file.vue'
 
 defineProps<{
   accept?: string

package/src/components/{Form/Input/InputKeyValue.vue → form/input/input-key-value.vue}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Input from './Input.vue'
+import Input from './input.vue'
 
 const props = defineProps<{
   name?: string

package/src/components/form/input/input.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+// Define button variants for better type safety and maintainability
+type InputVariant = 'primary' | 'secondary' | 'primary-dimmed'
+
+type InputTheme = 'default'
+
+// Define size options for better flexibility
+type InputSize = 'sm' | 'md' | 'lg'
+
+const props = withDefaults(defineProps<{
+  type?: string
+  variant?: InputVariant // Button style variant
+  size?: InputSize // Button size variant
+  theme?: InputTheme // Button theme
+}>(), {
+  variant: 'primary',
+  size: 'md',
+  theme: 'default',
+})
+
+const modelValue = defineModel<string>({ required: false })
+
+const variantClasses: Record<InputVariant, Record<InputTheme, {
+  default: string[]
+}>> = {
+  'primary': {
+    default: {
+      default: [
+        'w-full rounded-lg px-2 py-1 text-nowrap text-sm outline-none',
+        'bg-neutral-50 dark:bg-neutral-950 focus:bg-neutral-50 dark:focus:bg-neutral-900',
+        'focus:border-primary-300 dark:focus:border-primary-400/50 border-2 border-solid border-neutral-100 dark:border-neutral-900',
+        'text-disabled:neutral-400 dark:text-disabled:neutral-600',
+        'shadow-sm',
+      ],
+    },
+  },
+  'secondary': {
+    default: {
+      default: [
+        'w-full rounded-lg px-2 py-1 text-nowrap text-sm outline-none',
+        'bg-neutral-50 dark:bg-neutral-950 focus:bg-neutral-50 dark:focus:bg-neutral-900',
+        'focus:border-primary-300 dark:focus:border-primary-400/50 border-2 border-solid border-neutral-100 dark:border-neutral-900',
+        'text-disabled:neutral-400 dark:text-disabled:neutral-600',
+        'shadow-sm',
+      ],
+    },
+  },
+  'primary-dimmed': {
+    default: {
+      default: [
+        'w-full rounded-lg px-2 py-1 text-nowrap text-sm outline-none',
+        'bg-neutral-100 dark:bg-neutral-800 focus:bg-neutral-50 dark:focus:bg-neutral-950',
+        'focus:border-primary-500/30 dark:focus:border-primary-400/50 border-2 border-solid border-neutral-500/5 dark:border-neutral-700/40',
+        'text-disabled:neutral-400 dark:text-disabled:neutral-600',
+      ],
+    },
+  },
+}
+</script>
+
+<template>
+  <input
+    v-model="modelValue"
+    :type="props.type || 'text'"
+    :class="[
+      'transition-all duration-200 ease-in-out',
+      'cursor-disabled:not-allowed',
+      ...variantClasses[props.variant][props.theme].default,
+    ]"
+  >
+</template>

package/src/components/form/radio/index.ts

@@ -0,0 +1 @@
+export { default as Radio } from './radio.vue'

package/src/components/form/range/index.ts

@@ -0,0 +1,3 @@
+export { default as ColorHueRange } from './color-hue-range.vue'
+export { default as Range } from './range.vue'
+export { default as RoundRange } from './round-range.vue'

package/src/components/form/select/index.ts

@@ -0,0 +1,2 @@
+export { default as Option } from './option.vue'
+export { default as Select } from './select.vue'

package/src/components/{Form/Select/Select.vue → form/select/select.vue}

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { provide, ref } from 'vue'
 
-import Combobox from '../Combobox/Combobox.vue'
+import { Combobox } from '../combobox'
 
 const props = defineProps<{
   options?: { label: string, value: string | number }[]

package/src/components/form/select-tab/index.ts

@@ -0,0 +1 @@
+export { default as SelectTab } from './select-tab.vue'

package/src/components/{Form/SelectTab/SelectTab.vue → form/select-tab/select-tab.vue}

@@ -48,6 +48,7 @@ const rootStyle = computed(() => ({
     :aria-readonly="props.readonly"
     :class="[
       'select-tab',
+      'is-interacting',
       'relative', 'flex', 'w-full', 'items-stretch', 'rounded-lg',
       'overflow-hidden',
       'bg-white-400/6', 'dark:bg-neutral-950/70',

package/src/components/form/textarea/index.ts

@@ -0,0 +1,2 @@
+export { default as BasicTextarea } from './basic-text-area.vue'
+export { default as Textarea } from './textarea.vue'

package/src/components/{Form/Textarea/Textarea.vue → form/textarea/textarea.vue}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import BasicTextarea from './Basic.vue'
+import BasicTextarea from './basic-text-area.vue'
 
 const modelValue = defineModel<string>({ default: '' })
 </script>

package/src/components/layouts/collapsible.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { watchEffect } from 'vue'
+
+import { TransitionVertical } from '../animations'
+
+const props = defineProps<{
+  default?: boolean
+  label?: string
+}>()
+const visible = defineModel<boolean>({ default: false })
+watchEffect(() => {
+  if (props.default != null) {
+    visible.value = !!props.default
+  }
+})
+
+function setVisible(value: boolean) {
+  visible.value = value
+  return value
+}
+</script>
+
+<template>
+  <div>
+    <slot name="trigger" v-bind="{ visible, setVisible }">
+      <button
+        :class="['sticky top-0 z-10 flex items-center justify-between px2 py1 text-sm backdrop-blur-xl']"
+        @click="visible = !visible"
+      >
+        <span>
+          {{ props.label ?? 'Collapsable' }}
+        </span> <span op50>{{ visible ? '▲' : '▼' }}</span>
+      </button>
+    </slot>
+    <TransitionVertical>
+      <slot v-if="visible" v-bind="{ visible, setVisible }" />
+    </TransitionVertical>
+  </div>
+</template>

package/src/components/layouts/index.ts

@@ -0,0 +1,3 @@
+export { default as Collapsible } from './collapsible.vue'
+export { default as Screen } from './screen.vue'
+export { default as Skeleton } from './skeleton.vue'

package/src/components/layouts/screen.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { breakpointsTailwind, useBreakpoints, useElementBounding, useWindowSize } from '@vueuse/core'
+import { computed, onMounted, ref, watch } from 'vue'
+
+const containerRef = ref<HTMLDivElement>()
+
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const { width, height } = useWindowSize()
+const containerElementBounding = useElementBounding(containerRef, { immediate: true, windowResize: true, reset: true })
+
+const isMobile = computed(() => breakpoints.between('sm', 'md').value || breakpoints.smaller('sm').value)
+const isTablet = computed(() => breakpoints.between('md', 'lg').value)
+const isDesktop = computed(() => breakpoints.greaterOrEqual('lg').value)
+
+const canvasWidth = computed(() => {
+  if (isDesktop.value)
+    return containerElementBounding.width.value
+  else if (isMobile.value)
+    return (width.value - 16) // padding
+  else if (isTablet.value)
+    return (width.value - 16) // padding
+  else
+    return containerElementBounding.width.value
+})
+
+const canvasHeight = ref(0)
+
+watch([width, height, containerRef], () => {
+  const bounding = containerRef.value?.parentElement?.getBoundingClientRect()
+
+  if (isDesktop.value) {
+    canvasHeight.value = bounding?.height || 0
+  }
+  else if (isMobile.value) {
+    canvasHeight.value = bounding?.height || 0
+  }
+  else if (isTablet.value) {
+    canvasHeight.value = bounding?.height || 0
+  }
+  else {
+    canvasHeight.value = 600
+  }
+})
+
+watch([containerElementBounding.width, containerElementBounding.height], () => {
+  if (isDesktop.value) {
+    canvasHeight.value = containerElementBounding.height.value
+  }
+  else if (isMobile.value) {
+    canvasHeight.value = containerElementBounding.height.value
+  }
+  else if (isTablet.value) {
+    canvasHeight.value = containerElementBounding.height.value
+  }
+  else {
+    canvasHeight.value = 600
+  }
+})
+
+onMounted(async () => {
+  if (!containerRef.value)
+    return
+
+  containerElementBounding.update()
+})
+</script>
+
+<template>
+  <div ref="containerRef" h-full w-full>
+    <slot :width="canvasWidth" :height="canvasHeight" />
+  </div>
+</template>

package/src/components/layouts/skeleton.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  animation?: 'pulse' | 'wave' | 'none'
+}>(), {
+  animation: 'pulse',
+})
+</script>
+
+<template>
+  <div
+    class="skeleton"
+    :class="props.animation !== 'none' ? `skeleton-${props.animation}` : ''"
+    bg="neutral-200 dark:neutral-800"
+    overflow="hidden"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.skeleton {
+  position: relative;
+  transition: all 0.2s ease-in-out;
+}
+
+/* Pulse animation */
+.skeleton-pulse {
+  animation: skeleton-pulse 2s ease-in-out 0.5s infinite;
+}
+
+@keyframes skeleton-pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+/* Wave animation */
+.skeleton-wave::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(90deg, transparent, rgb(255, 255, 255), transparent);
+  animation: skeleton-wave 2s ease-in-out infinite;
+  border-radius: inherit;
+}
+
+.dark .skeleton-wave::after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+}
+
+@keyframes skeleton-wave {
+  0% {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  60% {
+    transform: translateX(100%);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
+</style>

package/src/components/misc/button.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { TransitionBidirectional } from '../animations'
+
+// Define button variants for better type safety and maintainability
+type ButtonVariant = 'primary' | 'secondary' | 'secondary-muted' | 'danger' | 'caution' | 'pure' | 'ghost'
+
+type ButtonTheme = 'default'
+
+// Define size options for better flexibility
+type ButtonSize = 'sm' | 'md' | 'lg'
+
+interface ButtonProps {
+  toggled?: boolean // Optional toggled state for toggle buttons
+  icon?: string // Icon class name
+  label?: string // Button text label
+  disabled?: boolean // Disabled state
+  loading?: boolean // Loading state
+  variant?: ButtonVariant // Button style variant
+  size?: ButtonSize // Button size variant
+  theme?: ButtonTheme // Button theme
+  block?: boolean // Full width button
+}
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+  toggled: false,
+  variant: 'primary',
+  disabled: false,
+  loading: false,
+  size: 'md',
+  theme: 'default',
+  block: false,
+})
+
+const isDisabled = computed(() => props.disabled || props.loading)
+
+// Extract variant styles for better organization
+const variantClasses: Record<ButtonVariant, Record<ButtonTheme, {
+  default: string[]
+  nonToggled?: string
+  toggled?: string
+}>> = {
+  'primary': {
+    default: {
+      default: [
+        'rounded-lg',
+        'backdrop-blur-md',
+        'bg-primary-500/15 hover:bg-primary-500/20 active:bg-primary-500/30 dark:bg-primary-700/30 dark:hover:bg-primary-700/40 dark:active:bg-primary-700/30',
+        'focus:ring-primary-300/60 dark:focus:ring-primary-600/30',
+        'border-2 border-solid border-primary-500/5 dark:border-primary-900/40',
+        'text-primary-950 dark:text-primary-100',
+        'focus:ring-2',
+      ],
+    },
+  },
+  'secondary': {
+    default: {
+      default: [
+        'rounded-lg',
+        'backdrop-blur-md',
+        'bg-neutral-100/55 hover:bg-neutral-400/20 active:bg-neutral-400/30 dark:bg-neutral-700/60 dark:hover:bg-neutral-700/80 dark:active:bg-neutral-700/60',
+        'focus:ring-neutral-300/30 dark:focus:ring-neutral-600/60 dark:focus:ring-neutral-600/30',
+        'border-2 border-solid border-neutral-300/30 dark:border-neutral-700/30',
+        'text-neutral-950 dark:text-neutral-100',
+        'focus:ring-2',
+      ],
+    },
+  },
+  'secondary-muted': {
+    default: {
+      default: [
+        'rounded-lg',
+        'backdrop-blur-md',
+        'hover:bg-neutral-50/50 active:bg-neutral-50/90 hover:dark:bg-neutral-800/50 active:dark:bg-neutral-800/90',
+        'border-2 border-solid border-neutral-100/60 dark:border-neutral-800/30',
+        'focus:ring-2 focus:ring-neutral-300/30 dark:focus:ring-neutral-600/60 dark:focus:ring-neutral-600/30',
+      ],
+      nonToggled: 'bg-neutral-50/70 dark:bg-neutral-800/70 text-neutral-500 dark:text-neutral-400',
+      toggled: 'bg-white/90 dark:bg-neutral-500/70 ring-neutral-300/30 dark:ring-neutral-600/60 ring-2 dark:ring-neutral-600/30 text-primary-500 dark:text-primary-100',
+    },
+  },
+  'danger': {
+    default: {
+      default: [
+        'rounded-lg',
+        'backdrop-blur-md',
+        'bg-red-500/15 hover:bg-red-500/20 active:bg-red-500/30 dark:bg-red-700/30 dark:hover:bg-red-700/40 dark:active:bg-red-700/30',
+        'focus:ring-2 focus:ring-red-300/30 dark:focus:ring-red-600/60 dark:focus:ring-red-600/30',
+        'border-2 border-solid border-red-200/30 dark:border-red-900/30',
+        'text-red-950 dark:text-red-100',
+      ],
+    },
+  },
+  'caution': {
+    default: {
+      default: [
+        'rounded-lg',
+        'backdrop-blur-md',
+        'bg-amber-400/20 hover:bg-amber-400/25 active:bg-amber-400/35 dark:bg-amber-500/20 dark:hover:bg-amber-500/30 dark:active:bg-amber-500/35',
+        'focus:ring-2 focus:ring-amber-300/40 dark:focus:ring-amber-400/40',
+        'border-2 border-solid border-amber-300/40 dark:border-amber-500/40',
+        'text-amber-900 dark:text-amber-50',
+      ],
+    },
+  },
+  'pure': {
+    default: {
+      default: [
+        'bg-transparent',
+        'text-neutral-900 dark:text-neutral-50',
+        '!px-0 !py-0',
+      ],
+    },
+  },
+  'ghost': {
+    default: {
+      default: [
+        'bg-transparent',
+        'hover:bg-neutral-100/50 dark:hover:bg-neutral-800/50',
+        'text-neutral-500 dark:text-neutral-400',
+        'focus:ring-2 focus:ring-neutral-300/30 dark:focus:ring-neutral-600/30',
+      ],
+    },
+  },
+}
+
+// Extract size styles for better organization
+const sizeClasses: Record<ButtonSize, string> = {
+  sm: 'px-3 py-1.5 text-xs',
+  md: 'px-4 py-2 text-sm',
+  lg: 'px-6 py-3 text-base',
+}
+
+// Base classes that are always applied
+const baseClasses = computed(() => {
+  const variant = variantClasses[props.variant] || variantClasses.primary
+  const theme = variant[props.theme] || variant.default
+
+  return [
+    'rounded-lg font-medium outline-none',
+    'transition-all duration-200 ease-in-out',
+    'disabled:cursor-not-allowed disabled:opacity-50',
+    'backdrop-blur-md',
+    props.block ? 'w-full' : '',
+    sizeClasses[props.size],
+    theme.default,
+    props.toggled ? theme.toggled || '' : theme.nonToggled || '',
+    { 'opacity-50 cursor-not-allowed': isDisabled.value },
+    'focus:ring-2',
+  ]
+})
+</script>
+
+<template>
+  <button
+    :disabled="isDisabled"
+    :class="baseClasses"
+  >
+    <div class="flex flex-row items-center justify-center gap-2">
+      <TransitionBidirectional
+        from-class="opacity-0 mr-0! w-0!"
+        active-class="transition-[width,margin] ease-in-out overflow-hidden transition-100"
+      >
+        <div v-if="loading || icon" class="w-4">
+          <div v-if="loading" class="i-svg-spinners:ring-resize h-4 w-4" />
+          <div v-else-if="icon" class="h-4 w-4" :class="icon" />
+        </div>
+      </TransitionBidirectional>
+      <span v-if="label">{{ label }}</span>
+      <slot v-else />
+    </div>
+  </button>
+</template>

package/src/components/misc/callout.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+type ThemeVariant = 'primary' | 'violet' | 'lime' | 'orange'
+
+const props = withDefaults(defineProps<{
+  theme?: ThemeVariant
+  label?: string
+}>(), {
+  theme: 'primary',
+})
+
+const themeClasses: Record<ThemeVariant, {
+  container: string[]
+  label?: string[]
+}> = {
+  primary: {
+    container: [
+      'text-neutral-900/80 dark:text-neutral-100/80',
+      'bg-primary-50/80 dark:bg-primary-900/50 backdrop-blur-md',
+      `before:bg-primary-500/30 before:content-[''] before:dark:bg-primary-200/20`,
+    ],
+    label: [
+      'text-primary-500 dark:text-primary-200 font-semibold',
+    ],
+  },
+  lime: {
+    container: [
+      'text-neutral-900/80 dark:text-neutral-100/80',
+      'bg-lime-50/80 dark:bg-lime-900/50 backdrop-blur-md',
+      `before:bg-lime-500/30 before:content-[''] before:dark:bg-lime-200/20`,
+    ],
+    label: [
+      'text-lime-500 dark:text-lime-200 font-semibold',
+    ],
+  },
+  violet: {
+    container: [
+      'text-neutral-900/80 dark:text-neutral-100/80',
+      'bg-violet-50/80 dark:bg-violet-900/50 backdrop-blur-md',
+      `before:bg-violet-500/30 before:content-[''] before:dark:bg-violet-200/20`,
+    ],
+    label: [
+      'text-violet-500 dark:text-violet-200 font-semibold',
+    ],
+  },
+  orange: {
+    container: [
+      'text-neutral-900/80 dark:text-neutral-100/80',
+      'bg-orange-100/60 dark:bg-orange-900/50 backdrop-blur-md',
+      `before:bg-orange-500/30 before:content-[''] before:dark:bg-orange-200/20`,
+    ],
+    label: [
+      'text-orange-500 dark:text-orange-200 font-semibold',
+    ],
+  },
+}
+</script>
+
+<template>
+  <div
+    relative
+    flex flex-col gap-1
+    rounded-lg
+    py="2.5" pl="5" pr-3
+    :class="[
+      ...themeClasses[props.theme || 'violet'].container,
+      // eslint-disable-next-line vue/prefer-separate-static-class
+      'before-position-absolute before:left-2 before:right-0 before:h-[calc(100%-1rem)] before:top-50% before:translate-y--50% before:w-1 before:rounded-full',
+    ]"
+  >
+    <div text="font-semibold" :class="[...(themeClasses[props.theme || 'violet'].label || [])]">
+      <slot name="label">
+        {{ props.label || 'Callout' }}
+      </slot>
+    </div>
+    <slot />
+  </div>
+</template>

package/src/components/{Misc/DoubleCheckButton.vue → misc/double-check-button.vue}

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 
-import Button from './Button.vue'
+import Button from './button.vue'
 
 type ButtonVariant = 'primary' | 'secondary' | 'secondary-muted' | 'danger' | 'caution'
 type ButtonSize = 'sm' | 'md' | 'lg'

package/src/components/misc/index.ts

@@ -0,0 +1,4 @@
+export { default as Button } from './button.vue'
+export { default as Callout } from './callout.vue'
+export { default as DoubleCheckButton } from './double-check-button.vue'
+export { default as Progress } from './progress.vue'

package/src/components/misc/progress.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+defineProps<{
+  progress: number
+  barClass?: string
+}>()
+</script>
+
+<template>
+  <div relative overflow-hidden rounded-md>
+    <div
+      :class="[barClass ? barClass : 'bg-primary-300 dark:bg-primary-300/50']"
+      absolute h-4 min-w-2 rounded-md will-change-width
+      :style="{ width: `${progress}%` }"
+      transition="width duration-500 ease-in-out"
+    >
+      <div
+        v-if="progress < 100"
+        absolute inset-0 origin-left rounded-md bg-white
+        class="progress-shine-animation"
+      />
+    </div>
+    <div
+      bg="neutral-100 dark:neutral-900" h-4 w-full rounded-md
+    />
+  </div>
+</template>
+
+<style scoped>
+.progress-shine-animation {
+  animation: progress-shine 2s cubic-bezier(0.35, 0.08, 0.04, 0.99) infinite;
+  will-change: transform, opacity;
+}
+
+@keyframes progress-shine {
+  0% {
+    opacity: 0.4;
+    transform: scale(0, 1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+}
+</style>

package/src/fallback.css

@@ -13,3 +13,7 @@
   --chromatic-chroma-900: calc(var(--chromatic-chroma) * 0.7);
   --chromatic-chroma-950: calc(var(--chromatic-chroma) * 0.5);
 }
+
+.is-interacting {
+  transition-property: none !important;
+}

package/src/index.ts

@@ -1,7 +1,8 @@
 import './fallback.css'
 
-export * from './components/Animations'
-export * from './components/Form'
-export * from './components/Misc'
+export * from './components/animations'
+export * from './components/form'
+export * from './components/layouts'
+export * from './components/misc'
 export * from './composables/use-deferred-mount'
 export * from './composables/use-theme'

package/src/components/Animations/index.ts

@@ -1,3 +0,0 @@
-export { default as BidirectionalTransition } from './BidirectionalTransition.vue'
-export { default as TransitionHorizontal } from './TransitionHorizontal.vue'
-export { default as TransitionVertical } from './TransitionVertical.vue'

package/src/components/Form/Checkbox/index.ts

@@ -1 +0,0 @@
-export { default as Checkbox } from './Checkbox.vue'

package/src/components/Form/Combobox/index.ts

@@ -1 +0,0 @@
-export { default as Combobox } from './Combobox.vue'

package/src/components/Form/Field/index.ts

@@ -1,7 +0,0 @@
-export { default as FieldCheckbox } from './FieldCheckbox.vue'
-export { default as FieldInput } from './FieldInput.vue'
-export { default as FieldKeyValues } from './FieldKeyValues.vue'
-export { default as FieldRange } from './FieldRange.vue'
-export { default as FieldSelect } from './FieldSelect.vue'
-export { default as FieldTextArea } from './FieldTextArea.vue'
-export { default as FieldValues } from './FieldValues.vue'

package/src/components/Form/Input/Input.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  type?: string
-}>()
-
-const modelValue = defineModel<string>({ required: false })
-</script>
-
-<template>
-  <input
-    v-model="modelValue"
-    :type="props.type || 'text'"
-    :class="[
-      'focus:border-primary-300 dark:focus:border-primary-400/50 border-2 border-solid border-neutral-100 dark:border-neutral-900',
-      'transition-all duration-200 ease-in-out',
-      'text-disabled:neutral-400 dark:text-disabled:neutral-600',
-      'cursor-disabled:not-allowed',
-      'w-full rounded-lg px-2 py-1 text-nowrap text-sm outline-none',
-      'shadow-sm',
-      'bg-neutral-50 dark:bg-neutral-950 focus:bg-neutral-50 dark:focus:bg-neutral-900',
-    ]"
-  >
-</template>

package/src/components/Form/Input/index.ts

@@ -1,4 +0,0 @@
-export { default as BasicInputFile } from './BasicInputFile.vue'
-export { default as Input } from './Input.vue'
-export { default as InputFile } from './InputFile.vue'
-export { default as InputKeyValue } from './InputKeyValue.vue'

package/src/components/Form/Radio/index.ts

@@ -1 +0,0 @@
-export { default as Radio } from './Radio.vue'

package/src/components/Form/Range/index.ts

@@ -1,3 +0,0 @@
-export { default as ColorHueRange } from './ColorHueRange.vue'
-export { default as Range } from './Range.vue'
-export { default as RoundRange } from './RoundRange.vue'

package/src/components/Form/Select/index.ts

@@ -1,2 +0,0 @@
-export { default as Option } from './Option.vue'
-export { default as Select } from './Select.vue'

package/src/components/Form/SelectTab/index.ts

@@ -1 +0,0 @@
-export { default as SelectTab } from './SelectTab.vue'

package/src/components/Form/Textarea/index.ts

@@ -1,2 +0,0 @@
-export { default as BasicTextarea } from './Basic.vue'
-export { default as Textarea } from './Textarea.vue'

package/src/components/Form/index.ts

@@ -1,9 +0,0 @@
-export * from './Checkbox'
-export * from './Combobox'
-export * from './Field'
-export * from './Input'
-export * from './Radio'
-export * from './Range'
-export * from './Select'
-export * from './SelectTab'
-export * from './Textarea'

package/src/components/Misc/Button.vue

@@ -1,118 +0,0 @@
-<script setup lang="ts">
-import { BidirectionalTransition } from '@proj-airi/ui'
-import { computed } from 'vue'
-
-// Define button variants for better type safety and maintainability
-type ButtonVariant = 'primary' | 'secondary' | 'secondary-muted' | 'danger' | 'caution' | 'pure'
-
-type ButtonTheme = 'default'
-
-// Define size options for better flexibility
-type ButtonSize = 'sm' | 'md' | 'lg'
-
-interface ButtonProps {
-  toggled?: boolean // Optional toggled state for toggle buttons
-  icon?: string // Icon class name
-  label?: string // Button text label
-  disabled?: boolean // Disabled state
-  loading?: boolean // Loading state
-  variant?: ButtonVariant // Button style variant
-  size?: ButtonSize // Button size variant
-  theme?: ButtonTheme // Button theme
-  block?: boolean // Full width button
-}
-
-const props = withDefaults(defineProps<ButtonProps>(), {
-  toggled: false,
-  variant: 'primary',
-  disabled: false,
-  loading: false,
-  size: 'md',
-  theme: 'default',
-  block: false,
-})
-
-const isDisabled = computed(() => props.disabled || props.loading)
-
-// Extract variant styles for better organization
-const variantClasses: Record<ButtonVariant, Record<ButtonTheme, {
-  default: string
-  nonToggled?: string
-  toggled?: string
-}>> = {
-  'primary': {
-    default: {
-      default: 'bg-primary-500/15 hover:bg-primary-500/20 active:bg-primary-500/30 dark:bg-primary-700/30 dark:hover:bg-primary-700/40 dark:active:bg-primary-700/30 focus:ring-primary-300/60 dark:focus:ring-primary-600/30 border-2 border-solid border-primary-500/5 dark:border-primary-900/40 text-primary-950 dark:text-primary-100',
-    },
-  },
-  'secondary': {
-    default: {
-      default: 'bg-neutral-100/55 hover:bg-neutral-400/20 active:bg-neutral-400/30 dark:bg-neutral-700/60 dark:hover:bg-neutral-700/80 dark:active:bg-neutral-700/60 focus:ring-neutral-300/30 dark:focus:ring-neutral-600/60 dark:focus:ring-neutral-600/30 border-2 border-solid border-neutral-300/30 dark:border-neutral-700/30 text-neutral-950 dark:text-neutral-100',
-    },
-  },
-  'secondary-muted': {
-    default: {
-      default: 'hover:bg-neutral-50/50 active:bg-neutral-50/90 hover:dark:bg-neutral-800/50 active:dark:bg-neutral-800/90 border-2 border-solid border-neutral-100/60 dark:border-neutral-800/30 focus:ring-neutral-300/30 dark:focus:ring-neutral-600/60 dark:focus:ring-neutral-600/30',
-      nonToggled: 'bg-neutral-50/70 dark:bg-neutral-800/70 text-neutral-500 dark:text-neutral-400',
-      toggled: 'bg-white/90 dark:bg-neutral-500/70 ring-neutral-300/30 dark:ring-neutral-600/60 ring-2 dark:ring-neutral-600/30 text-primary-500 dark:text-primary-100',
-    },
-  },
-  'danger': {
-    default: {
-      default: 'bg-red-500/15 hover:bg-red-500/20 active:bg-red-500/30 dark:bg-red-700/30 dark:hover:bg-red-700/40 dark:active:bg-red-700/30 focus:ring-red-300/30 dark:focus:ring-red-600/60 dark:focus:ring-red-600/30 border-2 border-solid border-red-200/30 dark:border-red-900/30 text-red-950 dark:text-red-100',
-    },
-  },
-  'caution': {
-    default: {
-      default: 'bg-amber-400/20 hover:bg-amber-400/25 active:bg-amber-400/35 dark:bg-amber-500/20 dark:hover:bg-amber-500/30 dark:active:bg-amber-500/35 focus:ring-amber-300/40 dark:focus:ring-amber-400/40 border-2 border-solid border-amber-300/40 dark:border-amber-500/40 text-amber-900 dark:text-amber-50',
-    },
-  },
-  'pure': {
-    default: {
-      default: 'bg-white hover:bg-neutral-50 active:bg-neutral-100 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:active:bg-neutral-700 border-2 border-solid border-neutral-100 dark:border-neutral-800 focus:ring-neutral-200/40 dark:focus:ring-neutral-600/40 text-neutral-900 dark:text-neutral-50',
-    },
-  },
-}
-
-// Extract size styles for better organization
-const sizeClasses: Record<ButtonSize, string> = {
-  sm: 'px-3 py-1.5 text-xs',
-  md: 'px-4 py-2 text-sm',
-  lg: 'px-6 py-3 text-base',
-}
-
-// Base classes that are always applied
-const baseClasses = computed(() => [
-  'rounded-lg font-medium outline-none',
-  'transition-all duration-200 ease-in-out',
-  'disabled:cursor-not-allowed disabled:opacity-50',
-  'backdrop-blur-md',
-  props.block ? 'w-full' : '',
-  sizeClasses[props.size],
-  variantClasses[props.variant][props.theme].default,
-  props.toggled ? variantClasses[props.variant][props.theme].toggled || '' : variantClasses[props.variant][props.theme].nonToggled || '',
-  { 'opacity-50 cursor-not-allowed': isDisabled.value },
-  'focus:ring-2',
-])
-</script>
-
-<template>
-  <button
-    :disabled="isDisabled"
-    :class="baseClasses"
-  >
-    <div class="flex flex-row items-center justify-center gap-2">
-      <BidirectionalTransition
-        from-class="opacity-0 mr-0! w-0!"
-        active-class="transition-[width,margin] ease-in-out overflow-hidden transition-100"
-      >
-        <div v-if="loading || icon" class="w-4">
-          <div v-if="loading" class="i-svg-spinners:ring-resize h-4 w-4" />
-          <div v-else-if="icon" class="h-4 w-4" :class="icon" />
-        </div>
-      </BidirectionalTransition>
-      <span v-if="label">{{ label }}</span>
-      <slot v-else />
-    </div>
-  </button>
-</template>

package/src/components/Misc/index.ts

@@ -1,2 +0,0 @@
-export { default as Button } from './Button.vue'
-export { default as DoubleCheckButton } from './DoubleCheckButton.vue'