@proj-airi/ui 0.9.0-rc.1 → 0.9.0

package/package.json

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

package/src/components/form/select/select.vue

@@ -40,6 +40,7 @@ const props = withDefaults(defineProps<{
   contentWidth?: string | number
   shape?: 'rounded' | 'default'
   variant?: 'blurry' | 'default'
+  class?: string | string[]
 }>(), {
   placeholder: 'Select an option',
   disabled: false,
@@ -112,6 +113,7 @@ function toCssSize(value?: string | number): string | undefined {
     <SelectTrigger
       :class="[
         'group',
+        ...Array.isArray(props.class) ? props.class : [props.class],
         'w-full inline-flex items-center justify-between border px-3 leading-none h-9 gap-[5px] outline-none',
         props.shape === 'rounded' ? 'rounded-full' : 'rounded-lg',
         'text-sm text-neutral-700 dark:text-neutral-200 data-[placeholder]:text-neutral-400 dark:data-[placeholder]:text-neutral-500',

package/src/components/misc/button.vue

@@ -30,6 +30,7 @@ const props = withDefaults(defineProps<ButtonProps>(), {
   disabled: false,
   loading: false,
   size: 'md',
+  shape: 'pill',
   theme: 'default',
   block: false,
 })
@@ -45,7 +46,7 @@ const variantClasses: Record<ButtonVariant, Record<ButtonTheme, {
   'primary': {
     default: {
       default: [
-        'rounded-xl',
+        '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',
@@ -58,7 +59,7 @@ const variantClasses: Record<ButtonVariant, Record<ButtonTheme, {
   'secondary': {
     default: {
       default: [
-        'rounded-xl',
+        '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',
@@ -71,7 +72,7 @@ const variantClasses: Record<ButtonVariant, Record<ButtonTheme, {
   'secondary-muted': {
     default: {
       default: [
-        'rounded-xl',
+        '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',
@@ -84,7 +85,7 @@ const variantClasses: Record<ButtonVariant, Record<ButtonTheme, {
   'danger': {
     default: {
       default: [
-        'rounded-xl',
+        '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',
@@ -96,7 +97,7 @@ const variantClasses: Record<ButtonVariant, Record<ButtonTheme, {
   'caution': {
     default: {
       default: [
-        'rounded-xl',
+        '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',
@@ -151,7 +152,7 @@ const baseClasses = computed(() => {
   const theme = variant[props.theme] || variant.default
 
   return [
-    'rounded-lg font-medium outline-none',
+    'font-medium outline-none',
     'transition-all duration-200 ease-in-out',
     'disabled:cursor-not-allowed disabled:opacity-50',
     'backdrop-blur-md',