@byyuurin/ui 0.0.4 → 0.0.5

package/dist/runtime/components/Popover.vue

@@ -35,7 +35,7 @@ import { defu } from 'defu'
 import { useForwardPropsEmits } from 'reka-ui'
 import { HoverCard, Popover } from 'reka-ui/namespaced'
 import { computed, toRef } from 'vue'
-import { useTheme } from '../composables'
+import { useTheme } from '../composables/useTheme'
 
 const props = withDefaults(defineProps<PopoverProps>(), {
   mode: 'click',

package/dist/runtime/components/RadioGroup.vue

@@ -70,7 +70,7 @@ type NormalizeItem<T> = { id: string } & (
 import { reactivePick } from '@vueuse/core'
 import { Label, RadioGroupIndicator, RadioGroupItem, RadioGroupRoot, useForwardPropsEmits } from 'reka-ui'
 import { computed, useId } from 'vue'
-import { useTheme } from '../composables'
+import { useTheme } from '../composables/useTheme'
 import { get } from '../utils'
 
 const props = withDefaults(defineProps<RadioGroupProps<T>>(), {

package/dist/runtime/components/ScrollArea.vue

@@ -11,7 +11,7 @@ export interface ScrollAreaProps extends ComponentAttrs<typeof scrollArea>, Pick
 import { reactivePick } from '@vueuse/core'
 import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from 'reka-ui'
 import { computed, ref } from 'vue'
-import { useTheme } from '../composables'
+import { useTheme } from '../composables/useTheme'
 
 const props = withDefaults(defineProps<ScrollAreaProps>(), {})
 const rootRef = ref<InstanceType<typeof ScrollAreaRoot>>()

package/dist/runtime/components/Select.vue

@@ -105,7 +105,8 @@ import { reactivePick } from '@vueuse/core'
 import { defu } from 'defu'
 import { SelectArrow, SelectContent, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectPortal, SelectRoot, SelectSeparator, SelectTrigger, SelectViewport, useForwardPropsEmits } from 'reka-ui'
 import { computed, toRef } from 'vue'
-import { useComponentIcons, useTheme } from '../composables'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import { useTheme } from '../composables/useTheme'
 import { compare, get } from '../utils'
 
 const props = withDefaults(defineProps<SelectProps<T, I, V, M>>(), {

package/dist/runtime/components/Slider.vue

@@ -0,0 +1,97 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { SliderRootProps } from 'reka-ui'
+import type { slider } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+type SliderVariants = VariantProps<typeof slider>
+
+export interface SliderProps extends ComponentAttrs<typeof slider>, Pick<SliderRootProps, 'as' | 'name' | 'disabled' | 'inverted' | 'min' | 'max' | 'step' | 'minStepsBetweenThumbs'> {
+  modelValue?: number | number[]
+  size?: SliderVariants['size']
+  /**
+   * The orientation of the slider.
+   * @default 'horizontal'
+   */
+  orientation?: SliderVariants['orientation']
+  /** The value of the slider when initially rendered. Use when you do not need to control the state of the slider. */
+  defaultValue?: number | number[]
+}
+
+export interface SliderEmits {
+  (event: 'update:modelValue', payload: number | number[]): void
+  (event: 'change', payload: Event): void
+}
+</script>
+
+<script setup lang="ts">
+import { reactivePick } from '@vueuse/core'
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { useTheme } from '../composables/useTheme'
+
+const props = withDefaults(defineProps<SliderProps>(), {
+  size: 'md',
+  orientation: 'horizontal',
+  step: 1,
+  max: 100,
+})
+
+const emit = defineEmits<SliderEmits>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'orientation', 'min', 'max', 'step', 'minStepsBetweenThumbs', 'inverted'), emit)
+
+const modelValue = defineModel<number | number[]>()
+
+const defaultSliderValue = computed(() => {
+  if (typeof props.defaultValue === 'number')
+    return [props.defaultValue]
+
+  return props.defaultValue
+})
+
+const sliderValue = computed({
+  get() {
+    if (typeof modelValue.value === 'number')
+      return [modelValue.value]
+
+    return modelValue.value ?? defaultSliderValue.value
+  },
+  set(value) {
+    modelValue.value = value?.length === 1 ? value[0] : value
+  },
+})
+
+const thumbsCount = computed(() => sliderValue.value?.length ?? 1)
+
+const { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.slider)
+  return styler(props)
+})
+
+function onChange(value: any) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emit('change', event)
+}
+</script>
+
+<template>
+  <SliderRoot
+    v-bind="rootProps"
+    v-model="sliderValue"
+    :name="props.name"
+    :disabled="props.disabled"
+    :class="style.root({ class: [props.class, props.ui?.root] })"
+    :default-value="defaultSliderValue"
+    :data-steps="thumbsCount"
+    @value-commit="onChange"
+  >
+    <SliderTrack :class="style.track({ class: props.ui?.track })">
+      <SliderRange :class="style.range({ class: props.ui?.range })" />
+    </SliderTrack>
+
+    <SliderThumb v-for="count in thumbsCount" :key="count" :class="style.thumb({ class: props.ui?.thumb })" />
+  </SliderRoot>
+</template>

package/dist/runtime/components/Switch.vue

@@ -38,7 +38,7 @@ export interface SwitchSlots {
 import { reactivePick } from '@vueuse/core'
 import { Label, Primitive, SwitchRoot, SwitchThumb, useForwardProps } from 'reka-ui'
 import { computed, useId } from 'vue'
-import { useTheme } from '../composables'
+import { useTheme } from '../composables/useTheme'
 
 const props = withDefaults(defineProps<SwitchProps>(), {
   size: 'md',

package/dist/runtime/components/Tabs.vue

@@ -52,7 +52,7 @@ export type TabsSlots<T extends { slot?: string }> = {
 import { reactivePick } from '@vueuse/core'
 import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, useForwardPropsEmits } from 'reka-ui'
 import { computed } from 'vue'
-import { useTheme } from '../composables'
+import { useTheme } from '../composables/useTheme'
 import { get } from '../utils'
 
 const props = withDefaults(defineProps<TabsProps<T>>(), {

package/dist/runtime/components/Textarea.vue

@@ -42,7 +42,7 @@ export interface TextareaSlots {
 <script setup lang="ts">
 import { Primitive } from 'reka-ui'
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
-import { useTheme } from '../composables'
+import { useTheme } from '../composables/useTheme'
 
 defineOptions({
   inheritAttrs: false,
@@ -165,8 +165,7 @@ onMounted(() => {
       @blur="onBlur"
       @change="onChange"
       @focus="autoResize"
-    >
-    </textarea>
+    ></textarea>
 
     <slot></slot>
   </Primitive>

package/dist/runtime/components/Toast.vue

@@ -35,7 +35,7 @@ export interface ToastSlots {
 import { reactivePick, useElementBounding } from '@vueuse/core'
 import { ToastAction, ToastClose, ToastDescription, ToastRoot, ToastTitle, useForwardPropsEmits } from 'reka-ui'
 import { computed, ref } from 'vue'
-import { useTheme } from '../composables'
+import { useTheme } from '../composables/useTheme'
 import Button from './Button.vue'
 
 const props = withDefaults(defineProps<ToastProps>(), {

package/dist/runtime/components/Toaster.vue

@@ -30,7 +30,8 @@ export interface ToasterSlots {
 import { reactivePick } from '@vueuse/core'
 import { ToastPortal, ToastProvider, ToastViewport, useForwardProps } from 'reka-ui'
 import { computed, ref } from 'vue'
-import { useTheme, useToast } from '../composables'
+import { useTheme } from '../composables/useTheme'
+import { useToast } from '../composables/useToast'
 import { omit } from '../utils'
 import Toast from './Toast.vue'
 

package/dist/runtime/components/Tooltip.vue

@@ -24,7 +24,7 @@ import { reactivePick } from '@vueuse/core'
 import { defu } from 'defu'
 import { TooltipArrow, TooltipContent, TooltipPortal, TooltipRoot, TooltipTrigger, useForwardPropsEmits } from 'reka-ui'
 import { computed, toRef } from 'vue'
-import { useTheme } from '../composables'
+import { useTheme } from '../composables/useTheme'
 
 const props = withDefaults(defineProps<TooltipProps>(), {
   portal: true,

package/dist/runtime/theme/accordion.mjs

@@ -1,25 +1,28 @@
 import { ct } from "@byyuurin/ui-kit";
-export default ct({
-  slots: {
-    root: "w-full color-ui-cb",
-    item: "border-b last:border-b-0",
-    header: "flex",
-    trigger: "group flex-1 flex items-center gap-2 font-medium text-sm py-4 focus-visible:outline-ui-fill min-w-0",
-    content: [
-      "overflow-hidden focus:outline-none",
-      "data-[state=open]:animate-[accordion-down_200ms_ease-out]",
-      "data-[state=closed]:animate-[accordion-up_200ms_ease-out]"
-    ],
-    body: "text-sm pb-4 color-ui-cb/80",
-    icon: "shrink-0 size-5",
-    trailingIcon: "shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200",
-    label: "text-start break-words"
-  },
-  variants: {
-    disabled: {
-      true: {
-        trigger: "cursor-not-allowed opacity-50"
+export default ct(
+  /* @unocss-include */
+  {
+    slots: {
+      root: "w-full color-ui-cb",
+      item: "border-b last:border-b-0",
+      header: "flex",
+      trigger: "group flex-1 flex items-center gap-2 font-medium text-sm py-4 outline-none focus-visible:outline-ui-cb/80 min-w-0",
+      content: [
+        "overflow-hidden focus:outline-none",
+        "data-[state=open]:animate-[accordion-down_200ms_ease-out]",
+        "data-[state=closed]:animate-[accordion-up_200ms_ease-out]"
+      ],
+      body: "text-sm pb-4 color-ui-cb/80",
+      icon: "shrink-0 size-5",
+      trailingIcon: "shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200",
+      label: "text-start break-words"
+    },
+    variants: {
+      disabled: {
+        true: {
+          trigger: "cursor-not-allowed opacity-50"
+        }
       }
     }
   }
-});
+);

package/dist/runtime/theme/alert.d.ts

@@ -0,0 +1,85 @@
+declare const _default: {
+    base: undefined;
+    slots: {
+        root: string;
+        wrapper: string;
+        title: string;
+        description: string;
+        icon: string;
+        actions: string;
+        close: string;
+    };
+    variants: {
+        variant: {
+            solid: {
+                root: string;
+                close: string;
+            };
+            outline: {
+                root: string;
+            };
+            soft: {
+                root: string;
+            };
+            'soft-outline': {
+                root: string;
+            };
+        };
+        orientation: {
+            horizontal: {
+                root: string;
+                actions: string;
+            };
+            vertical: {
+                root: string;
+                actions: string;
+            };
+        };
+        title: {
+            true: {
+                description: string;
+            };
+        };
+    };
+    compoundVariants: import("@byyuurin/ui-kit/index").CVCompoundVariants<{
+        variant: {
+            solid: {
+                root: string;
+                close: string;
+            };
+            outline: {
+                root: string;
+            };
+            soft: {
+                root: string;
+            };
+            'soft-outline': {
+                root: string;
+            };
+        };
+        orientation: {
+            horizontal: {
+                root: string;
+                actions: string;
+            };
+            vertical: {
+                root: string;
+                actions: string;
+            };
+        };
+        title: {
+            true: {
+                description: string;
+            };
+        };
+    }, {
+        root: string;
+        wrapper: string;
+        title: string;
+        description: string;
+        icon: string;
+        actions: string;
+        close: string;
+    }, undefined>;
+};
+export default _default;

package/dist/runtime/theme/alert.mjs

@@ -0,0 +1,47 @@
+import { ct } from "@byyuurin/ui-kit";
+export default ct(
+  /* @unocss-include */
+  {
+    slots: {
+      root: "relative overflow-hidden w-full rounded-ui-box p-4 flex gap-2.5",
+      wrapper: "min-w-0 flex-1 flex flex-col",
+      title: "text-xl font-medium",
+      description: "opacity-80",
+      icon: "shrink-0 size-1.5em",
+      actions: "flex flex-wrap gap-1.5 shrink-0",
+      close: "p-0"
+    },
+    variants: {
+      variant: {
+        "solid": {
+          root: "color-ui-c1 bg-ui-fill",
+          close: "ui-base-inverted"
+        },
+        "outline": {
+          root: "color-ui-content bg-ui-c1 ring ring-inset ring-ui-fill"
+        },
+        "soft": {
+          root: "color-ui-content bg-ui-fill/10"
+        },
+        "soft-outline": {
+          root: "color-ui-content bg-ui-fill/10 ring ring-inset ring-ui-fill/40"
+        }
+      },
+      orientation: {
+        horizontal: {
+          root: "items-center",
+          actions: "items-center"
+        },
+        vertical: {
+          root: "items-start",
+          actions: "items-start mt-2.5"
+        }
+      },
+      title: {
+        true: {
+          description: "mt-1"
+        }
+      }
+    }
+  }
+);

package/dist/runtime/theme/app.mjs

@@ -1,4 +1,5 @@
 export default {
+  /* @unocss-include */
   icons: {
     close: "i-mdi-close-thick",
     loading: "i-mdi-loading",

package/dist/runtime/theme/badge.d.ts

@@ -0,0 +1,79 @@
+declare const _default: {
+    base: undefined;
+    slots: {
+        root: string;
+        base: string[];
+    };
+    variants: {
+        size: {
+            xs: {
+                root: string;
+            };
+            sm: {
+                root: string;
+            };
+            md: {
+                root: string;
+            };
+            lg: {
+                root: string;
+            };
+            xl: {
+                root: string;
+            };
+        };
+        position: {
+            'top-right': {
+                base: string;
+            };
+            'bottom-right': {
+                base: string;
+            };
+            'top-left': {
+                base: string;
+            };
+            'bottom-left': {
+                base: string;
+            };
+        };
+        show: {
+            true: {
+                base: string;
+            };
+        };
+        inset: {
+            true: "";
+        };
+        standalone: {
+            false: {
+                base: string;
+            };
+        };
+    };
+    compoundVariants: ({
+        position: "top-right";
+        inset: false;
+        class: {
+            base: string;
+        };
+    } | {
+        position: "bottom-right";
+        inset: false;
+        class: {
+            base: string;
+        };
+    } | {
+        position: "top-left";
+        inset: false;
+        class: {
+            base: string;
+        };
+    } | {
+        position: "bottom-left";
+        inset: false;
+        class: {
+            base: string;
+        };
+    })[];
+};
+export default _default;

package/dist/runtime/theme/badge.mjs

@@ -0,0 +1,89 @@
+import { ct } from "@byyuurin/ui-kit";
+export default ct(
+  /* @unocss-include */
+  {
+    slots: {
+      root: "relative inline-flex items-center justify-center shrink-0",
+      base: [
+        "inline-block rounded-full ring ring-ui-c1 flex items-center justify-center color-ui-c1 font-medium whitespace-nowrap",
+        "h-1.2em min-w-1.2em p-0.2em text-0.8em bg-ui-fill"
+      ]
+    },
+    variants: {
+      size: {
+        xs: {
+          root: "text-xs"
+        },
+        sm: {
+          root: "text-sm"
+        },
+        md: {
+          root: "text-base"
+        },
+        lg: {
+          root: "text-lg"
+        },
+        xl: {
+          root: "text-xl"
+        }
+      },
+      position: {
+        "top-right": {
+          base: "top-0 right-0"
+        },
+        "bottom-right": {
+          base: "bottom-0 right-0"
+        },
+        "top-left": {
+          base: "top-0 left-0"
+        },
+        "bottom-left": {
+          base: "bottom-0 left-0"
+        }
+      },
+      show: {
+        true: {
+          base: "animate-[scale-in_200ms_ease-out]"
+        }
+      },
+      inset: {
+        true: ""
+      },
+      standalone: {
+        false: {
+          base: "absolute"
+        }
+      }
+    },
+    compoundVariants: [
+      {
+        position: "top-right",
+        inset: false,
+        class: {
+          base: "-translate-y-1/2 translate-x-1/2 transform"
+        }
+      },
+      {
+        position: "bottom-right",
+        inset: false,
+        class: {
+          base: "translate-y-1/2 translate-x-1/2 transform"
+        }
+      },
+      {
+        position: "top-left",
+        inset: false,
+        class: {
+          base: "-translate-y-1/2 -translate-x-1/2 transform"
+        }
+      },
+      {
+        position: "bottom-left",
+        inset: false,
+        class: {
+          base: "translate-y-1/2 -translate-x-1/2 transform"
+        }
+      }
+    ]
+  }
+);

package/dist/runtime/theme/button.d.ts

@@ -17,6 +17,9 @@ declare const _default: {
             soft: {
                 base: string[];
             };
+            'soft-outline': {
+                base: string[];
+            };
             ghost: {
                 base: string[];
             };
@@ -108,7 +111,7 @@ declare const _default: {
         suffix?: undefined;
     } | {
         active: true;
-        variant: "soft";
+        variant: ("soft" | "soft-outline")[];
         class: {
             base: string;
             label?: undefined;