@meistrari/tela-build 1.52.0 → 1.52.2

package/components/tela/button/button.vue

@@ -25,40 +25,50 @@ const resolvedVariant = computed(() =>
     || 'primary',
 )
 
+const slots = useSlots()
+
+const hasLeadingIcon = computed(() => !!((props.loading && props.leading) || slots.leading || (props.icon && props.leading)))
+const hasTrailingIcon = computed(() => !!((props.loading && !props.leading) || slots.trailing || (props.icon && !props.leading)))
+
 const sizeStyle = computed(() => (({
-    sm: 'text-12px leading-16px font-580 tracking-normal px-10px py-4px rounded-9px',
-    md: 'text-14px leading-18px font-580 -tracking-0.15px px-12px py-7px rounded-11px [&>svg]:text-10px',
-    lg: 'text-16px leading-20px font-580 -tracking-0.15px px-16px py-10px rounded-13px [&>svg]:text-12px',
+    sm: '[--padding-x:10px] text-[12px] leading-[16px] tracking-normal py-[4px] rounded-[9px]',
+    md: '[--padding-x:12px] text-[14px] leading-[18px] -tracking-[0.15px] py-[7px] rounded-[11px]',
+    lg: '[--padding-x:16px] text-[16px] leading-[20px] -tracking-[0.15px] py-[10px] rounded-[13px]',
 }) as Record<ButtonSize, string>)[resolvedSize.value] ?? '')
 
+const paddingStyle = computed(() => [
+    hasLeadingIcon.value ? 'pl-[calc(var(--padding-x)_-_2px)]' : 'pl-[var(--padding-x)]',
+    hasTrailingIcon.value ? 'pr-[calc(var(--padding-x)_-_2px)]' : 'pr-[var(--padding-x)]',
+].join(' '))
+
 const variantStyle = computed(() => (({
     'primary': fold`
-        bg-neutral-900 text-white
-        hover:bg-neutral-800
-        active:bg-neutral-700
+        bg-btn-primary text-inverse
+        hover:bg-btn-primary-hover
+        active:bg-btn-primary-active
         focus-visible:ring-0.5px focus-visible:ring-cyan-600
     `,
     'secondary': fold`
-        bg-white text-neutral-900 border border-0.5px
+        bg-btn-secondary text-contrast border border-0.5px
       [box-shadow:0_1px_6px_0_rgba(103,127,148,0.05)]
-        hover:bg-subtle hover:border-strong
-        active:bg-muted active:border-neutral-400/60
+        hover:bg-btn-secondary-hover hover:border-strong
+        active:bg-btn-secondary-active active:border-neutral-400/60
         focus-visible:ring-0.5px focus-visible:ring-cyan-600
     `,
     'ghost': fold`
-        bg-transparent text-gray-900
-        hover:bg-gray-100
+        bg-btn-ghost text-contrast
+        hover:bg-btn-ghost-hover
         focus-visible:ring-0.5px focus-visible:ring-cyan-600
     `,
     'disabled': fold`
-        bg-gray-100 text-gray-400 !cursor-not-allowed
+        bg-btn-disabled text-tertiary !cursor-not-allowed
     `,
     'loading': fold`
-        bg-gray-200 text-gray-600
+        bg-btn-loading text-neutral-600
     `,
     'danger': fold`
-        bg-red-100 text-red-500
-        hover:bg-red-100/80
+        bg-btn-danger text-red-500
+        hover:bg-btn-danger-hover
         focus:outline-red-600
     `,
     'ghost-danger': fold`
@@ -67,14 +77,26 @@ const variantStyle = computed(() => (({
         focus:outline-red-600
     `,
     'dark': fold`
-        bg-white/4 text-white border-0.5px border-white/16
-        hover:bg-white/8 active:bg-white/10
+        bg-btn-dark text-white border-0.5px border-white/16
+        hover:bg-btn-dark-hover active:bg-btn-dark-active
         focus-visible:ring-0.5px focus-visible:ring-cyan-600
     `,
 }) as Record<ButtonVariant | 'disabled' | 'loading', string>)[resolvedVariant.value] ?? '')
 
+const iconColorStyle = computed(() => (({
+    'primary': 'icon-inverse',
+    'secondary': 'icon-secondary',
+    'ghost': 'icon-secondary',
+    'disabled': 'icon-subtle',
+    'loading': 'icon-tertiary',
+    'danger': 'red-500',
+    'ghost-danger': 'red-700',
+    'dark': 'icon-subtle',
+}) as Record<ButtonVariant | 'disabled' | 'loading', string>)[resolvedVariant.value] ?? '')
+
 const resolvedStyle = computed(() => [
     sizeStyle.value,
+    paddingStyle.value,
     variantStyle.value,
 ].join(' '))
 
@@ -100,19 +122,20 @@ const iconSize = computed(() => {
     <component
         :is="tag"
         :to="to"
-        :class="resolvedStyle" ease-out duration-40 flex items-center justify-center gap-6px
+        :class="cn(
+            'box-border font-540 select-none flex items-center justify-center gap-6px ease-out duration-40',
+            disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+            resolvedStyle,
+        )"
         :disabled="disabled"
-        :cursor="disabled ? 'not-allowed' : 'pointer'"
         :target="target"
-        border-box
-        select-none
     >
-        <TelaIconSpinner v-if="loading && leading" animate-spin />
+        <TelaIconSpinner v-if="loading && leading" class="animate-spin" />
         <slot v-else-if="$slots.leading" name="leading" />
-        <TelaIcon v-else-if="icon && leading" :name="icon" :size="iconSize" min-h-14px min-w-14px />
+        <TelaIcon v-else-if="icon && leading" :name="icon" :size="iconSize" :color="iconColorStyle" class="min-h-14px min-w-14px" />
         <slot />
-        <TelaIconSpinner v-if="loading && !leading" animate-spin ml-0.5 />
+        <TelaIconSpinner v-if="loading && !leading" class="animate-spin min-h-14px min-w-14px" />
         <slot v-else-if="$slots.trailing" name="trailing" />
-        <TelaIcon v-else-if="icon && !leading" :name="icon" :size="iconSize" />
+        <TelaIcon v-else-if="icon && !leading" :name="icon" :size="iconSize" :color="iconColorStyle" class="min-h-14px min-w-14px" />
     </component>
 </template>

package/components/tela/combobox/combobox-group.vue

@@ -15,7 +15,7 @@ const delegatedProps = reactiveOmit(props, 'class')
 <template>
     <ComboboxGroup
         v-bind="delegatedProps"
-        :class="cn('overflow-hidden py-4px px-4px', props.class)"
+        :class="cn('overflow-hidden p-[4px]', props.class)"
     >
         <slot />
     </ComboboxGroup>

package/components/tela/combobox/combobox-indicator.vue

@@ -13,7 +13,7 @@ const delegatedProps = reactiveOmit(props, 'class')
 <template>
     <ComboboxItemIndicator
         v-bind="delegatedProps"
-        :class="cn('text-gray-500', props.class)"
+        :class="cn('text-icon-secondary', props.class)"
     >
         <slot />
     </ComboboxItemIndicator>

package/components/tela/combobox/combobox-input.vue

@@ -8,6 +8,8 @@ import {
 } from 'reka-ui'
 import type { ComboboxInputEmits, ComboboxInputProps } from 'reka-ui'
 
+defineOptions({ inheritAttrs: false })
+
 const props = defineProps<ComboboxInputProps & {
     class?: HTMLAttributes['class']
 }>()
@@ -20,10 +22,18 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-    <ComboboxInput
-        v-bind="forwarded"
-        :class="cn('flex h-10 w-full bg border-b-[0.5px] border-border rounded-xl px-3 py-1 body-14-regular text-primary transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-tertiary focus-visible:bg focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50', props.class)"
-    >
-        <slot />
-    </ComboboxInput>
+    <div class="relative">
+        <span class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center pl-[13px]">
+            <TelaIcon name="i-ph-magnifying-glass-bold" size="12px" class="text-tertiary" />
+        </span>
+        <ComboboxInput
+            v-bind="{ ...forwarded, ...$attrs }"
+            :class="cn('flex h-[36px] w-full bg border-b-[0.5px] border-border pl-32px pr-3  body-14-regular text-primary transition-colors placeholder:text-tertiary focus-visible:bg focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50', $slots.deleteSearchValue && 'pr-30px', props.class)"
+        >
+            <slot />
+        </ComboboxInput>
+        <div v-if="$slots.deleteSearchValue" class="absolute inset-y-0 end-0 flex items-center justify-center px-2.5">
+            <slot name="deleteSearchValue" />
+        </div>
+    </div>
 </template>

package/components/tela/combobox/combobox-item.vue

@@ -19,7 +19,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
     <ComboboxItem
         v-bind="forwarded"
-        :class="cn('relative flex cursor-pointer gap-2 select-none justify-between items-center rounded-lg px-2 py-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)"
+        :class="cn('relative flex cursor-pointer gap-2 select-none justify-between items-center rounded-[12px] pl-[10px] pr-[8px] py-[7px] body-14-medium outline-none data-[highlighted]:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)"
     >
         <slot />
     </ComboboxItem>

package/components/tela/combobox/combobox-label.vue

@@ -15,7 +15,7 @@ const forwarded = useForwardProps(delegatedProps)
 <template>
     <ComboboxLabel
         v-bind="forwarded"
-        :class="cn('px-2 py-1 body-12-semibold text-secondary', props.class)"
+        :class="cn('py-[4px] pl-[10px] body-12-semibold text-secondary', props.class)"
     >
         <slot />
     </ComboboxLabel>

package/components/tela/combobox/combobox-list.vue

@@ -28,20 +28,10 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-    <template v-if="props.disablePortal">
+    <ComboboxPortal :disabled="props.disablePortal">
         <ComboboxContent
             v-bind="forwarded"
-            :class="cn('ComboboxContent z-[9999] shadow-lg outline-none rounded-xl bg-white-1000 border-[0.5px] border-gray-200 pointer-events-auto', props.class)"
-        >
-            <ComboboxViewport>
-                <slot />
-            </ComboboxViewport>
-        </ComboboxContent>
-    </template>
-    <ComboboxPortal v-else>
-        <ComboboxContent
-            v-bind="forwarded"
-            :class="cn('ComboboxContent z-[9999] shadow-lg outline-none rounded-xl bg-white-1000 border-[0.5px] border-gray-200 pointer-events-auto', props.class)"
+            :class="cn('ComboboxContent z-[9999] [box-shadow:0_4px_16px_0_rgba(85,91,98,0.14)] overflow-hidden outline-none rounded-[16px] bg border-0.5px border pointer-events-auto', props.class)"
         >
             <ComboboxViewport>
                 <slot />

package/components/tela/combobox/combobox-module-selector.vue

@@ -263,24 +263,14 @@ watch(innerValue, (value) => {
             @pointer-down-outside="closeOnOutsideClick ? undefined : $event.preventDefault()"
             @escape-key-down="closeOnEscape ? undefined : $event.preventDefault()"
         >
-            <div class="relative">
-                <span class="absolute inset-y-0 start-0 flex items-center justify-center px-2.5">
-                    <TelaIcon name="i-ph-magnifying-glass" size="12px" class="text-gray-400" />
-                </span>
-                <ComboboxInput
-                    v-model="search" class="pl-7 rounded-b-none"
-                    :placeholder="t('models.labels.search')"
-                />
-                <div v-if="search.length > 0" class="absolute inset-y-0 end-0 flex items-center justify-center px-2.5">
-                    <button class="flex items-center justify-center" @click="handleDeleteSearchValue">
-                        <TelaIcon name="i-ph-x-circle" size="16px" class="text-gray-400" />
-                    </button>
-                </div>
-            </div>
+            <ComboboxInput
+                v-model="search"
+                :placeholder="t('models.labels.search')"
+            />
             <Tabs v-model="selectedTab" :default-value="selectedTab">
                 <TabsList class="sticky z-10 top-0 shrink-0 flex gap-2 w-full">
                     <TabsIndicator />
-                    <TabsTrigger v-for="tab in tabs" :key="tab.tab" :value="tab.tab">
+                    <TabsTrigger v-for="tab in tabs" :key="tab.tab" :value="tab.tab" size="sm">
                         {{ tab.label }}
                     </TabsTrigger>
                 </TabsList>
@@ -315,7 +305,7 @@ watch(innerValue, (value) => {
                         </TelaButton>
                     </ComboboxEmpty>
                     <template v-for="group in groupedOptions" :key="group.heading">
-                        <ComboboxGroup :heading="group.heading" class="py-2">
+                        <ComboboxGroup :heading="group.heading">
                             <ComboboxLabel v-if="!search.trim()" class="py-0 tracking-normal">
                                 {{ group.heading }}
                             </ComboboxLabel>

package/components/tela/combobox/combobox-trigger.vue

@@ -1,12 +1,30 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
 import { ComboboxTrigger } from 'reka-ui'
 import type { ComboboxTriggerProps } from 'reka-ui'
 
-const props = defineProps<ComboboxTriggerProps>()
+const props = defineProps<ComboboxTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
 </script>
 
 <template>
-    <ComboboxTrigger v-bind="props">
+    <ComboboxTrigger
+        v-bind="delegatedProps"
+        :class="cn(
+            'group select-none flex items-center justify-between body-14-semibold gap-3 rounded-10px pl-11px pr-10px py-7px bg-white border-0.5px border transition hover:border-strong hover:bg-subtle',
+            'data-[state=open]:text-secondary data-[state=open]:border-strong data-[state=open]:bg-subtle',
+            '[box-shadow:0_1px_6px_0_rgba(103,127,148,0.05)]',
+            props.class,
+        )"
+    >
         <slot />
+        <TelaIcon
+            name="i-ph-caret-down-bold"
+            size="15px"
+            color="icon-secondary"
+            class="shrink-0 transition-transform ease-out duration-150 group-data-[state=open]:rotate-180"
+        />
     </ComboboxTrigger>
 </template>

package/components/tela/combobox/combobox.stories.ts

@@ -93,7 +93,7 @@ const meta: Meta<typeof Combobox> = {
 
 export default meta
 
-export const Default: StoryObj<{ options: Array<{ value: string; label: string }> }> = {
+export const Default: StoryObj<{ options: Array<{ value: string, label: string }> }> = {
     render: args => ({
         components: { ComboboxRoot, ComboboxAnchor, ComboboxTrigger, TelaIcon, TelaButton, ComboboxInput, ComboboxList, ComboboxEmpty, ComboboxGroup, ComboboxItem, ComboboxItemIndicator, ComboboxLabel },
         setup() {
@@ -105,14 +105,14 @@ export const Default: StoryObj<{ options: Array<{ value: string; label: string }
                     return selectedValue.value
                 }
 
-                return args.options.find((option: any) => option.value === selectedValue.value)
+                return args.options.find(option => option.value === selectedValue.value)
             })
 
             const filteredOptions = computed(() => {
                 if (!search.value.trim()) {
                     return args.options
                 }
-                return args.options.filter((option: any) =>
+                return args.options.filter(option =>
                     option.label.toLowerCase().includes(search.value.toLowerCase()),
                 )
             })