@personizely/ui 0.0.42

package/src/components/ui/select/Select.vue

@@ -0,0 +1,120 @@
+<template>
+  <SelectRoot v-bind="forwarded"
+    v-model="modelValue"
+    @change.stop
+  >
+    <SelectTrigger :class="cn((multiple && Array.isArray(modelValue) && modelValue.length === 0) || !modelValue ? 'text-muted-foreground' : '', props.class)">
+      <SelectValue :placeholder="placeholder">
+        <slot v-if="multiple && Array.isArray(modelValue) && (modelValue.length || $slots.label)" name="label" v-bind="{ options: selectedOptions }">
+          {{ selectedOptionsLabel || modelValue!.length + ' selected' }}
+        </slot>
+        <slot v-else-if="!multiple && (modelValue || $slots.label)" name="label" v-bind="{ option: selectedOption }">
+          {{ selectedOptionLabel || modelValue }}
+        </slot>
+      </SelectValue>
+    </SelectTrigger>
+    <SelectPortal :disabled="disablePortal" :to="opts.portalTo">
+      <SelectContent :body-lock="false">
+        <SelectItem
+          v-for="(option, index) in preparedOptions"
+          :key="option[keys.id] || index"
+          :value="option[keys.value]"
+          :disabled="option[keys.disabled] || disabled"
+        >
+          <slot name="option" v-bind="{ option }">
+            {{ option[keys.label] || option }}
+          </slot>
+        </SelectItem>
+      </SelectContent>
+    </SelectPortal>
+  </SelectRoot>
+</template>
+
+<script setup lang="ts">
+import {
+  SelectRoot,
+  SelectPortal,
+  type SelectRootEmits,
+  type SelectRootProps
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+import { type CustomOption, type Keys, type Option, prepareOptions } from '@/utils/options'
+import SelectContent from './SelectContent.vue'
+import SelectTrigger from './SelectTrigger.vue'
+import SelectValue from './SelectValue.vue'
+import SelectItem from './SelectItem.vue'
+import { cn } from '@/utils/tailwind'
+import { useDelegatedProps } from '@/composables/delegated-props'
+import { useForwardPropsEmits } from '@/composables/forward-props-emits'
+import { useEmitAsProps } from '@/composables/emits-as-props'
+import { getOptions } from '@/options-provider'
+
+const modelValue = defineModel<SelectRootProps['modelValue']>()
+
+const props = withDefaults(defineProps<Omit<SelectRootProps, 'modelValue'> & {
+  class?: HTMLAttributes['class']
+  placeholder?: string
+  disablePortal?: boolean
+  keys?: Keys
+  options: string[] | Option[] | CustomOption[] | { [key:string]: string }
+}>(), {
+  disablePortal: false,
+  placeholder: 'Select a value...',
+  keys: () => ({
+    id: 'id',
+    label: 'label',
+    help: 'help',
+    value: 'value',
+    disabled: 'disabled'
+  })
+})
+const emits = defineEmits<Omit<SelectRootEmits, 'update:modelValue'>>()
+
+const delegatedProps = useDelegatedProps(props, ['class', 'placeholder', 'keys', 'options', 'disablePortal', 'modelValue'])
+const delegatedEmits = useEmitAsProps(emits, ['update:modelValue'])
+const forwarded = useForwardPropsEmits(delegatedProps, delegatedEmits)
+const opts = getOptions()
+
+defineSlots<{
+  'label'(props: { option: CustomOption | undefined | null } | { options: Array<Option | CustomOption> }): any
+  'option'(props: { option: Option | CustomOption }): any
+}>()
+
+const selectedOption = computed(() => {
+  if (modelValue.value) {
+    return preparedOptions.value.find((o) => {
+      return o[props.keys.value] === modelValue.value
+    })
+  }
+
+  return null
+})
+
+const selectedOptions = computed(() => {
+  if (Array.isArray(modelValue.value)) {
+    return preparedOptions.value.filter((o) => {
+      return (<Array<unknown>>modelValue.value).includes(o[props.keys.value])
+    })
+  }
+
+  return []
+})
+
+const selectedOptionLabel = computed(() => {
+  if (selectedOption.value) {
+    return selectedOption.value[props.keys.label]
+  }
+
+  return null
+})
+
+const selectedOptionsLabel = computed(() => {
+  if (selectedOptions.value) {
+    return selectedOptions.value.map(o => o[props.keys.label]).join(', ')
+  }
+
+  return null
+})
+
+const preparedOptions = computed(() => prepareOptions(props.options, props.keys))
+</script>

package/src/components/ui/select/SelectContent.vue

@@ -0,0 +1,45 @@
+<template>
+  <SelectContent
+    v-bind="{ ...forwarded, ...$attrs }"
+    :class="cn(
+      'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      position === 'popper'
+        && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+      props.class,
+    )
+    "
+  >
+    <SelectViewport :class="cn('p-1', position === 'popper' && 'h-(--reka-select-trigger-height) w-full min-w-(--reka-select-trigger-width)')">
+      <slot />
+    </SelectViewport>
+  </SelectContent>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  SelectContent,
+  type SelectContentEmits,
+  type SelectContentProps,
+  SelectViewport,
+  useForwardPropsEmits
+} from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const props = withDefaults(defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {
+  position: 'popper'
+})
+const emits = defineEmits<SelectContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>

package/src/components/ui/select/SelectGroup.vue

@@ -0,0 +1,19 @@
+<template>
+  <SelectGroup :class="cn('p-1 w-full', props.class)" v-bind="delegatedProps">
+    <slot />
+  </SelectGroup>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectGroup, type SelectGroupProps } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>

package/src/components/ui/select/SelectItem.vue

@@ -0,0 +1,43 @@
+<template>
+  <SelectItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 aria-selected:font-medium',
+        props.class,
+      )
+    "
+  >
+    <SelectItemText>
+      <slot />
+    </SelectItemText>
+    <SelectItemIndicator as-child>
+      <span class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+        <Check class="h-4 w-4" />
+      </span>
+    </SelectItemIndicator>
+  </SelectItem>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  useForwardProps,
+  type SelectItemProps
+} from 'reka-ui'
+import { Check } from 'lucide-vue-next'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>

package/src/components/ui/select/SelectLabel.vue

@@ -0,0 +1,13 @@
+<template>
+  <SelectLabel :class="cn('py-1.5 pl-2 pr-8 text-sm font-medium', props.class)">
+    <slot />
+  </SelectLabel>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { SelectLabel, type SelectLabelProps } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
+</script>

package/src/components/ui/select/SelectSeparator.vue

@@ -0,0 +1,17 @@
+<template>
+  <SelectSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectSeparator, type SelectSeparatorProps } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>

package/src/components/ui/select/SelectTrigger.vue

@@ -0,0 +1,31 @@
+<template>
+  <SelectTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex gap-1.5 text-left h-8 w-full items-center justify-between rounded-md border border-input bg-background px-2 py-1 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:break-all',
+      props.class,
+    )"
+  >
+    <slot />
+    <SelectIcon as-child>
+      <ChevronDown class="w-4 h-4 min-w-4 opacity-50" />
+    </SelectIcon>
+  </SelectTrigger>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'
+import { ChevronDown } from 'lucide-vue-next'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>

package/src/components/ui/select/SelectValue.vue

@@ -0,0 +1,11 @@
+<template>
+  <SelectValue v-bind="props">
+    <slot v-if="$slots.default" />
+  </SelectValue>
+</template>
+
+<script setup lang="ts">
+import { SelectValue, type SelectValueProps } from 'reka-ui'
+
+const props = defineProps<SelectValueProps>()
+</script>

package/src/components/ui/select/index.ts

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

package/src/components/ui/slider/Slider.vue

@@ -0,0 +1,100 @@
+<template>
+  <SliderRoot
+    v-bind="forwarded"
+    v-model="value"
+    :class="cn(
+      'relative flex touch-none select-none data-disabled:opacity-50',
+      (orientation === 'horizontal' ? 'w-full h-2 items-center' : 'h-full w-2 justify-center'),
+      props.class,
+    )"
+  >
+    <SliderTrack
+      class="relative grow overflow-hidden rounded-full bg-secondary"
+      :class="orientation === 'horizontal' ? 'h-2 w-full' : 'h-full w-2'"
+    >
+      <SliderRange
+        class="absolute bg-primary"
+        :class="orientation === 'horizontal' ? 'h-full' : 'w-full'"
+      />
+    </SliderTrack>
+    <SliderThumb
+      v-for="(thumbValue, index) in value ? value : []"
+      :key="index"
+      class="flex h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-disabled:pointer-events-none"
+      :class="orientation === 'horizontal' ? 'justify-center' : 'items-center'"
+      @focus="onFocus({ index, value: thumbValue }, $event)"
+      @blur="onBlur({ value: thumbValue }, $event)"
+    >
+      <div
+        v-if="showMarker && (visibleMarker === index)"
+        class="absolute z-1 bg-primary rounded-sm px-1.5 py-1 shadow-sm text-xs text-primary-foreground min-w-6 text-center"
+        :class="orientation === 'horizontal' ? 'bottom-6' : 'left-6'"
+      >
+        <slot name="marker" v-bind="{ value: thumbValue }">
+          {{ thumbValue }}
+        </slot>
+      </div>
+    </SliderThumb>
+  </SliderRoot>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed, ref } from 'vue'
+import {
+  SliderRange,
+  SliderRoot,
+  SliderThumb,
+  SliderTrack,
+  type SliderRootProps,
+  type SliderRootEmits
+} from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+import { useDelegatedProps } from '@/composables/delegated-props'
+import { useEmitAsProps } from '@/composables/emits-as-props'
+import { useForwardPropsEmits } from '@/composables/forward-props-emits'
+
+const props = withDefaults(defineProps<Omit<SliderRootProps, 'modelValue'> & {
+  class?: HTMLAttributes['class']
+  showMarker?: boolean
+  modelValue: number | number[]
+}>(), {
+  min: 0,
+  max: 100,
+  step: 10,
+  orientation: 'horizontal',
+  showMarker: false
+})
+
+const emits = defineEmits<Omit<SliderRootEmits, 'update:modelValue'> & {
+  focus: [payload: number, event: FocusEvent]
+  blur: [payload: number, event: FocusEvent]
+  dragstart: [payload: number]
+  dragend: [payload: number]
+  'update:modelValue': [value: number | number[]]
+}>()
+
+const delegatedProps = useDelegatedProps(props, ['class', 'showMarker', 'modelValue'])
+const delegatedEmits = useEmitAsProps(emits, ['update:modelValue', 'focus', 'blur', 'dragstart', 'dragend'])
+const forwarded = useForwardPropsEmits(delegatedProps, delegatedEmits)
+
+const visibleMarker = ref<number | null>(null)
+
+const value = computed({
+  get () {
+    return Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue]
+  },
+  set (value) {
+    emits('update:modelValue', value ? (value.length === 2 ? value : value[0]) : value)
+  }
+})
+
+const onFocus = ({ index, value }: { index: number, value: number }, e: FocusEvent) => {
+  emits('focus', value, e)
+  visibleMarker.value = index
+}
+
+const onBlur = ({ value }: { value: number }, e: FocusEvent) => {
+  emits('blur', value, e)
+  visibleMarker.value = null
+}
+</script>

package/src/components/ui/slider/index.ts

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

package/src/components/ui/switch/Switch.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="flex items-center gap-x-2">
+    <SwitchBase
+      :id="id"
+      v-model="modelValue"
+      :disabled="disabled"
+      :required="required"
+      :name="name"
+      :value="value"
+      @blur="$emit('blur', $event)"
+      @focus="$emit('focus', $event)"
+    />
+    <Label v-if="label || $slots.default" :for="id">
+      <slot>{{ label }}</slot>
+    </Label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Label } from '@/components/ui/label'
+import SwitchBase from './SwitchBase.vue'
+import { useId } from 'reka-ui'
+import type { Events } from 'vue'
+
+const modelValue = defineModel<boolean>()
+withDefaults(defineProps<{
+  name?: string
+  id?: string
+  label?: string
+  value?: string
+  required?: boolean
+  disabled?: boolean
+}>(), {
+  id: () => useId()
+})
+defineEmits<{
+  focus: [event: Events['onFocus']]
+  blur: [event: Events['onBlur']]
+}>()
+</script>

package/src/components/ui/switch/SwitchBase.vue

@@ -0,0 +1,36 @@
+<template>
+  <SwitchRoot
+    v-bind="forwarded"
+    :class="cn(
+      'peer inline-flex h-5 w-8 shrink-0 cursor-pointer items-center rounded-full p-1 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      props.class,
+    )"
+  >
+    <SwitchThumb
+      :class="cn('pointer-events-none block h-3.5 w-3.5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-2.5 data-[state=unchecked]:translate-x-0')"
+    />
+  </SwitchRoot>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  SwitchRoot,
+  SwitchThumb,
+  type SwitchRootEmits,
+  type SwitchRootProps,
+  useForwardPropsEmits
+} from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<SwitchRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>

package/src/components/ui/switch/index.ts

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

package/src/components/ui/tabs/Tabs.vue

@@ -0,0 +1,63 @@
+<template>
+  <TabsRoot v-bind="forwarded" :class="cn(tabsVariants({ orientation }), props.class)">
+    <TabsList :class="cn(tabsListVariants({ orientation }), 'rounded-md bg-muted p-1 text-muted-foreground')">
+      <template v-for="tab in getTabs($slots.default ? $slots.default() : [])">
+        <Tooltip v-if="tab.props?.tooltip" :key="'tooltip-' + tab.props?.value">
+          <template #trigger>
+            <TabsTrigger :value="tab.props?.value" :disabled="tab.props?.disabled">
+              <template v-if="tab.props?.title">
+                {{ tab.props?.title }}
+              </template>
+              <Icon v-else-if="tab.props?.icon" :icon="tab.props.icon" />
+            </TabsTrigger>
+          </template>
+          {{ tab.props?.tooltip }}
+        </Tooltip>
+        <TabsTrigger
+          v-else
+          :key="tab.props?.value"
+          :value="tab.props?.value"
+          :disabled="tab.props?.disabled"
+        >
+          <template v-if="tab.props?.title">
+            {{ tab.props?.title }}
+          </template>
+          <Icon v-else-if="tab.props?.icon" :icon="tab.props.icon" />
+        </TabsTrigger>
+      </template>
+    </TabsList>
+    <slot />
+  </TabsRoot>
+</template>
+
+<script setup lang="ts">
+import { TabsRoot, useForwardPropsEmits, TabsList } from 'reka-ui'
+import type { TabsRootEmits, TabsRootProps } from 'reka-ui'
+import TabsTrigger from './TabsTrigger.vue'
+import { Icon } from '@/components/ui/icon'
+import { Tooltip } from '@/components/ui/tooltip'
+import { cn } from '@/utils/tailwind'
+import { tabsVariants, tabsListVariants } from '@/components/ui/tabs/index'
+import type { HTMLAttributes, VNode } from 'vue'
+const props = defineProps<TabsRootProps & {
+  class?: HTMLAttributes['class']
+}>()
+const emits = defineEmits<TabsRootEmits>()
+
+const isFragment = (vNode: VNode) => vNode.type === Symbol.for('v-fgt')
+
+const getTabs = (nodes: VNode[]) => {
+  const tabs = [] as VNode[]
+  nodes.forEach((node) => {
+    if (isFragment(node) && node.children) {
+      tabs.push(...getTabs(node.children as VNode[]))
+    } else {
+      tabs.push(node)
+    }
+  })
+
+  return tabs
+}
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>

package/src/components/ui/tabs/TabsContent.vue

@@ -0,0 +1,26 @@
+<template>
+  <TabsContent
+    :class="cn('data-[orientation=horizontal]:mt-4 data-[orientation=vertical]:ml-4 rounded-sm ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TabsContent, type TabsContentProps } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+defineOptions({
+  inheritAttrs: false
+})
+</script>

package/src/components/ui/tabs/TabsTrigger.vue

@@ -0,0 +1,27 @@
+<template>
+  <TabsTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'inline-flex items-center whitespace-nowrap rounded-sm px-3 text-xs font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsTrigger>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>

package/src/components/ui/tabs/index.ts

@@ -0,0 +1,28 @@
+import { cva } from 'class-variance-authority'
+
+export { default as Tabs } from './Tabs.vue'
+export { default as TabsContent } from './TabsContent.vue'
+
+export const tabsVariants = cva('', {
+  variants: {
+    orientation: {
+      vertical: 'flex',
+      horizontal: ''
+    }
+  },
+  defaultVariants: {
+    orientation: 'horizontal'
+  }
+})
+
+export const tabsListVariants = cva('*:h-8', {
+  variants: {
+    orientation: {
+      vertical: 'flex flex-col items-start *:w-full',
+      horizontal: 'grid auto-cols-[1fr] grid-flow-col h-10 inline-grid items-center justify-center *:justify-center'
+    }
+  },
+  defaultVariants: {
+    orientation: 'horizontal'
+  }
+})

package/src/components/ui/textarea/Textarea.vue

@@ -0,0 +1,13 @@
+<template>
+  <textarea v-model="modelValue" :class="cn('flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)" />
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/tailwind'
+
+const modelValue = defineModel<string | undefined | null>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>

package/src/components/ui/textarea/index.ts

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