@proj-airi/ui 0.8.0-beta.4 → 0.8.0-beta.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@proj-airi/ui",
   "type": "module",
-  "version": "0.8.0-beta.4",
+  "version": "0.8.0-beta.6",
   "description": "A collection of UI components that used by Project AIRI",
   "author": {
     "name": "Moeru AI Project AIRI Team",

package/src/components/Form/Select/Option.vue

@@ -14,8 +14,7 @@ const hide = inject('hide') as () => void
 <template>
   <div
     v-bind="{ ...$attrs, class: null, style: null }"
-    class="cursor-pointer rounded px-2 py-1 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-800"
-    line-clamp-1 overflow-hidden text-ellipsis whitespace-pre-wrap text="xs sm:sm" transition-colors duration-150 ease-in-out will-change-background-color will-change-color
+    class="line-clamp-1 cursor-pointer overflow-hidden text-ellipsis whitespace-pre-wrap rounded px-2 py-1 text-xs text-neutral-700 transition-colors duration-150 ease-in-out will-change-background-color will-change-color hover:bg-neutral-100 sm:text-sm dark:text-neutral-200 dark:hover:bg-neutral-800"
     :class="{ 'bg-neutral-100 dark:bg-neutral-800': props.active }"
     @click="() => {
       selectOption(props.value)

package/src/components/Form/SelectTab/SelectTab.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { RadioGroupItem, RadioGroupRoot } from 'reka-ui'
+import { computed } from 'vue'
+
+interface SelectTabOption {
+  label: string
+  value: string | number
+  description?: string
+  icon?: string
+}
+
+const props = withDefaults(defineProps<{
+  options: SelectTabOption[]
+  disabled?: boolean
+  readonly?: boolean
+  size?: 'sm' | 'md'
+}>(), {
+  disabled: false,
+  readonly: false,
+  size: 'md',
+})
+
+const modelValue = defineModel<string | number>({ required: true })
+
+const activeIndex = computed(() => props.options.findIndex(option => option.value === modelValue.value))
+const itemCount = computed(() => props.options.length || 1)
+const isDisabled = computed(() => props.disabled || props.readonly)
+
+const sizeClasses = computed(() =>
+  props.size === 'sm'
+    ? ['py-2', 'px-3', 'text-xs', 'rounded-md']
+    : ['py-2.5', 'px-3.5', 'text-sm', 'rounded-md'],
+)
+
+const rootStyle = computed(() => ({
+  '--select-tab-count': String(itemCount.value),
+  '--select-tab-active-index': String(Math.max(activeIndex.value, 0)),
+  '--select-tab-padding': props.size === 'sm' ? '0px' : '0px',
+  '--select-tab-gap': '0.25rem',
+  '--select-tab-indicator-opacity': activeIndex.value === -1 ? '0' : '1',
+}))
+</script>
+
+<template>
+  <RadioGroupRoot
+    v-model="modelValue"
+    :disabled="isDisabled"
+    :aria-readonly="props.readonly"
+    :class="[
+      'select-tab',
+      'relative', 'flex', 'w-full', 'items-stretch', 'rounded-xl',
+      'overflow-hidden',
+      'bg-white-400/6', 'dark:bg-neutral-900/70',
+      'transition-[border-color,box-shadow,opacity]', 'duration-200', 'ease-out', 'border-2',
+      'border-neutral-100', 'dark:border-neutral-800',
+      isDisabled ? ['cursor-not-allowed', 'opacity-60'] : ['shadow-[0_14px_50px_-32px_rgba(0,0,0,0.55)]', 'backdrop-blur-sm'],
+      // before
+      'before:bg-primary-300/50', 'dark:before:bg-primary-400/50',
+      'before:rounded-md', 'sm:before:rounded-lg',
+      'before:absolute', 'before:z-0', 'before:content-empty',
+      'before:transition-[left,width,opacity,background-color]', 'before:duration-200', 'before:ease',
+      'before:pointer-events-none',
+      'before:opacity-$select-tab-indicator-opacity',
+      'before:top-$select-tab-padding',
+    ]"
+    :style="[
+      rootStyle,
+      { padding: 'var(--select-tab-padding)', gap: 'var(--select-tab-gap)' },
+    ]"
+  >
+    <RadioGroupItem
+      v-for="option in props.options"
+      :key="option.value"
+      :value="option.value"
+      :disabled="isDisabled"
+      :aria-label="option.label"
+      :class="[
+        'select-tab__item',
+        'relative', 'z-1',
+        'flex', 'flex-1', 'items-center', 'justify-center', 'gap-2',
+        'text-center', 'text-neutral-700', 'dark:text-neutral-200', 'font-medium',
+        'transition-[color,background-color,border-color,transform]', 'duration-200', 'ease-out',
+        'focus-visible:border-none', 'focus-visible:outline-none',
+        sizeClasses,
+        isDisabled ? 'pointer-events-none' : 'cursor-pointer',
+        // checked
+        'data-[state=checked]:text-primary-950', 'dark:data-[state=checked]:text-primary-50',
+        // unchecked
+        'data-[state=unchecked]:hover:bg-primary-300/20', 'dark:data-[state=unchecked]:hover:bg-primary-400/20', 'data-[state=unchecked]:rounded-lg',
+      ]"
+    >
+      <span v-if="option.icon" :class="['size-4 shrink-0 text-current', option.icon]" />
+      <span :class="['truncate']">
+        {{ option.label }}
+      </span>
+    </RadioGroupItem>
+  </RadioGroupRoot>
+</template>
+
+<style scoped>
+.select-tab {
+  position: relative;
+  isolation: isolate;
+}
+
+.select-tab::before {
+  left:
+    calc(
+      (100% + var(--select-tab-gap))
+      / var(--select-tab-count)
+      * var(--select-tab-active-index)
+      + var(--select-tab-padding)
+    );
+  width:
+    calc(
+      (100% + var(--select-tab-gap))
+      / var(--select-tab-count)
+      - var(--select-tab-gap)
+    );
+  height: calc(100% - var(--select-tab-padding) * 2);
+}
+</style>

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

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

package/src/components/Form/index.ts

@@ -5,4 +5,5 @@ export * from './Input'
 export * from './Radio'
 export * from './Range'
 export * from './Select'
+export * from './SelectTab'
 export * from './Textarea'

package/src/components/Misc/Button.vue

@@ -3,12 +3,9 @@ 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'
+type ButtonVariant = 'primary' | 'secondary' | 'secondary-muted' | 'danger' | 'caution' | 'pure'
 
-type ButtonTheme
-  = | 'default'
-// | 'dimmed'
-// | 'lightened'
+type ButtonTheme = 'default'
 
 // Define size options for better flexibility
 type ButtonSize = 'sm' | 'md' | 'lg'
@@ -38,13 +35,11 @@ const props = withDefaults(defineProps<ButtonProps>(), {
 const isDisabled = computed(() => props.disabled || props.loading)
 
 // Extract variant styles for better organization
-const variantClasses: Record<ButtonVariant, {
-  default: {
-    default: string
-    nonToggled?: string
-    toggled?: string
-  }
-}> = {
+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',
@@ -72,6 +67,11 @@ const variantClasses: Record<ButtonVariant, {
       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

package/src/components/Misc/DoubleCheckButton.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+import Button from './Button.vue'
+
+type ButtonVariant = 'primary' | 'secondary' | 'secondary-muted' | 'danger' | 'caution'
+type ButtonSize = 'sm' | 'md' | 'lg'
+
+const props = withDefaults(defineProps<{
+  variant?: ButtonVariant
+  cancelVariant?: ButtonVariant
+  size?: ButtonSize
+  block?: boolean
+  disabled?: boolean
+  loading?: boolean
+}>(), {
+  variant: 'danger',
+  cancelVariant: 'secondary',
+  size: 'md',
+  block: false,
+  disabled: false,
+  loading: false,
+})
+
+const emit = defineEmits<{
+  (event: 'confirm'): void
+  (event: 'cancel'): void
+}>()
+
+const slots = defineSlots<{
+  'default': (props: Record<string, unknown>) => unknown
+  'confirm': (props: Record<string, unknown>) => unknown
+  'cancel': (props: Record<string, unknown>) => unknown
+  'cancel-botton-icon': (props: Record<string, unknown>) => unknown
+}>()
+
+const confirming = ref(false)
+
+const wrapperClasses = computed(() => [
+  'inline-flex flex-col gap-2',
+  props.block ? 'w-full' : '',
+])
+
+watch(() => props.disabled, (disabled) => {
+  if (disabled)
+    confirming.value = false
+})
+
+function handlePrimaryClick() {
+  if (!confirming.value) {
+    confirming.value = true
+    return
+  }
+
+  emit('confirm')
+  confirming.value = false
+}
+
+function handleCancel() {
+  confirming.value = false
+  emit('cancel')
+}
+</script>
+
+<template>
+  <div :class="wrapperClasses">
+    <div class="flex flex-wrap items-center gap-2">
+      <Transition name="double-check-slide">
+        <Button
+          v-if="confirming"
+          key="cancel"
+          :variant="cancelVariant"
+          :size="size"
+          :block="block"
+          class="whitespace-nowrap"
+          @click="handleCancel"
+        >
+          <div class="flex items-center gap-2">
+            <slot
+              v-if="slots['cancel-botton-icon']"
+              name="cancel-botton-icon"
+            />
+            <span><slot name="cancel">Cancel</slot></span>
+          </div>
+        </Button>
+      </Transition>
+
+      <Button
+        :variant="variant"
+        :size="size"
+        :block="block"
+        :disabled="disabled"
+        :loading="loading"
+        :class="[
+          'double-check-primary whitespace-nowrap',
+          'transition-width duration-150 ease-in-out',
+          confirming ? 'double-check-primary--confirming' : 'double-check-primary--default',
+        ]"
+        @click="handlePrimaryClick"
+      >
+        <span v-if="!confirming">
+          <slot />
+        </span>
+        <span v-else>
+          <slot name="confirm">
+            <slot />
+          </slot>
+        </span>
+      </Button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.double-check-slide-enter-active,
+.double-check-slide-leave-active {
+  transition: opacity 160ms ease, transform 160ms ease;
+}
+
+.double-check-slide-enter-from,
+.double-check-slide-leave-to {
+  opacity: 0;
+  transform: translateX(-10px);
+}
+
+.double-check-primary {
+  transition: min-width 180ms ease, padding 180ms ease;
+}
+
+.double-check-primary--default {
+  min-width: 7rem;
+}
+
+.double-check-primary--confirming {
+  min-width: 9rem;
+}
+</style>

package/src/components/Misc/index.ts

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