@proj-airi/ui 0.8.0-alpha.6 → 0.8.0-beta.1

package/package.json

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

package/src/components/Misc/Button.vue

@@ -0,0 +1,118 @@
+<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'
+
+type ButtonTheme
+  = | 'default'
+// | 'dimmed'
+// | 'lightened'
+
+// 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, {
+  default: {
+    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',
+    },
+  },
+}
+
+// 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

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

package/src/index.ts

@@ -2,5 +2,6 @@ import './fallback.css'
 
 export * from './components/Animations'
 export * from './components/Form'
+export * from './components/Misc'
 export * from './composables/use-deferred-mount'
 export * from './composables/use-theme'