@proj-airi/ui 0.8.0 → 0.8.1-beta.10

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/Combobox.vue

@@ -1,130 +0,0 @@
-<script setup lang="ts" generic="T extends AcceptableValue">
-import type { AcceptableValue } from 'reka-ui'
-
-import {
-  ComboboxAnchor,
-  ComboboxContent,
-  ComboboxEmpty,
-  ComboboxGroup,
-  ComboboxInput,
-  ComboboxItem,
-  ComboboxItemIndicator,
-  ComboboxLabel,
-  ComboboxRoot,
-  ComboboxSeparator,
-  ComboboxTrigger,
-  ComboboxViewport,
-} from 'reka-ui'
-
-const props = defineProps<{
-  options: { groupLabel: string, children?: { label: string, value: T }[] }[]
-  placeholder?: string
-}>()
-
-const modelValue = defineModel<T>({ required: false })
-
-function toDisplayValue(value: T): string {
-  const option = props.options.flatMap(group => group.children).find(option => option?.value === value)
-  return option ? option.label : props.placeholder || ''
-}
-</script>
-
-<template>
-  <ComboboxRoot v-model="modelValue" :class="['relative', 'w-full']">
-    <ComboboxAnchor
-      :class="[
-        'w-full inline-flex items-center justify-between rounded-xl border px-3 leading-none h-10 gap-[5px] outline-none',
-        'text-sm text-neutral-700 dark:text-neutral-200 data-[placeholder]:text-neutral-200',
-        'bg-white dark:bg-neutral-900 disabled:bg-neutral-100 hover:bg-neutral-50 dark:disabled:bg-neutral-900 dark:hover:bg-neutral-700',
-        'border-neutral-200 dark:border-neutral-800 border-solid border-2 focus:border-primary-300 dark:focus:border-primary-400/50',
-        'shadow-sm focus:shadow-[0_0_0_2px] focus:shadow-black',
-        'transition-colors duration-200 ease-in-out',
-      ]"
-    >
-      <ComboboxInput
-        :class="[
-          '!bg-transparent outline-none h-full selection:bg-grass5 placeholder-stone-400 w-full',
-          'text-neutral-700 dark:text-neutral-200',
-          'transition-colors duration-200 ease-in-out',
-        ]"
-        :placeholder="props.placeholder"
-        :display-value="(val) => toDisplayValue(val)"
-      />
-      <ComboboxTrigger>
-        <div
-          i-solar:alt-arrow-down-linear
-          :class="[
-            'h-4 w-4',
-            'text-neutral-700 dark:text-neutral-200',
-            'transition-colors duration-200 ease-in-out',
-          ]"
-        />
-      </ComboboxTrigger>
-    </ComboboxAnchor>
-
-    <ComboboxContent
-      :avoid-collisions="true"
-      :class="[
-        'absolute z-10 w-full mt-1 min-w-[160px] overflow-hidden rounded-xl shadow-sm border will-change-[opacity,transform] max-h-50dvh',
-        'data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade',
-        'bg-white dark:bg-neutral-900',
-        'border-neutral-200 dark:border-neutral-800 border-solid border-2 focus:border-neutral-300 dark:focus:border-neutral-600',
-      ]"
-    >
-      <ComboboxViewport class="p-[2px]">
-        <ComboboxEmpty
-          :class="[
-            'font-medium py-2 px-2',
-            'text-xs text-neutral-700 dark:text-neutral-200',
-            'transition-colors duration-200 ease-in-out',
-          ]"
-        />
-
-        <template
-          v-for="(group, index) in options"
-          :key="group.groupLabel"
-        >
-          <ComboboxGroup :class="['overflow-x-hidden']">
-            <ComboboxSeparator
-              v-if="index !== 0"
-              :class="['m-[5px]', 'h-[1px]', 'bg-neutral-400']"
-            />
-
-            <ComboboxLabel
-              :class="[
-                'px-[25px] text-xs leading-[25px]',
-                'text-neutral-500 dark:text-neutral-400',
-                'transition-colors duration-200 ease-in-out',
-              ]"
-            >
-              {{ group.groupLabel }}
-            </ComboboxLabel>
-
-            <ComboboxItem
-              v-for="option in group.children"
-              :key="option.label"
-              :text-value="option.label"
-              :value="option.value"
-              :class="[
-                'leading-none rounded-lg flex items-center h-8 pr-[0.5rem] pl-[1.5rem] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none',
-                'data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-800',
-                'text-sm text-neutral-700 dark:text-neutral-200 data-[disabled]:text-neutral-400 dark:data-[disabled]:text-neutral-600 data-[highlighted]:text-grass1',
-                'transition-colors duration-200 ease-in-out',
-                'cursor-pointer',
-              ]"
-            >
-              <ComboboxItemIndicator
-                :class="['absolute', 'left-0', 'w-[25px]', 'inline-flex', 'items-center', 'justify-center', 'opacity-30']"
-              >
-                <div i-solar:alt-arrow-right-outline />
-              </ComboboxItemIndicator>
-              <span :class="['line-clamp-1', 'overflow-hidden', 'text-ellipsis', 'whitespace-nowrap']">
-                {{ option.label }}
-              </span>
-            </ComboboxItem>
-          </ComboboxGroup>
-        </template>
-      </ComboboxViewport>
-    </ComboboxContent>
-  </ComboboxRoot>
-</template>

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'