@meistrari/tela-build 1.34.0 → 1.35.0

package/components/tela/button/button.vue

@@ -27,8 +27,8 @@ const resolvedVariant = computed(() =>
 
 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.01em px-12px py-7px rounded-11px [&>svg]:text-10px',
-    lg: 'text-16px leading-20px font-580 -tracking-0.01em px-16px py-10px rounded-13px [&>svg]:text-12px',
+    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',
 }) as Record<ButtonSize, string>)[resolvedSize.value] ?? '')
 
 const variantStyle = computed(() => (({

package/components/tela/checkbox/checkbox.vue

@@ -22,7 +22,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
             props.class,
         )"
     >
-        <CheckboxIndicator class="grid place-content-center">
+        <CheckboxIndicator force-mount class="grid place-content-center">
             <svg
                 viewBox="0 0 24 24"
                 fill="none"
@@ -30,14 +30,24 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
                 stroke-linejoin="round"
                 class="shrink-0 stroke-3 stroke-white-1000 w-14px h-11px"
             >
-                <Motion
-                    as="path"
+                <path
+                    data-show-icon="true"
                     d="M5 13 L10 18 L20 6"
-                    :initial="{ scale: 0.85, pathLength: 0 }"
-                    :animate="{ scale: 1, pathLength: 1 }"
-                    :transition="{ duration: 0.2, ease: [0.645, 0.045, 0.355, 1] }"
+                    pathLength="1"
                 />
             </svg>
         </CheckboxIndicator>
     </CheckboxRoot>
 </template>
+
+<style scoped>
+[data-show-icon="true"] {
+    stroke-dasharray: 1;
+    stroke-dashoffset: 1;
+    transition: stroke-dashoffset 200ms cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+[data-state="checked"] [data-show-icon="true"] {
+    stroke-dashoffset: 0;
+}
+</style>

package/components/tela/input/input.mdx

@@ -145,8 +145,6 @@ const value = ref('')
 <ArgTypes />
 
 ```typescript
-type InputSize = 'sm' | 'md'
-
 type InputProps = {
   id?: string
   modelValue?: string | number
@@ -154,7 +152,6 @@ type InputProps = {
   placeholder?: string
   hideLabel?: boolean
   disabled?: boolean
-  size?: InputSize
   error?: string | false
   showClearButton?: boolean
   tabindex?: number
@@ -184,11 +181,6 @@ type InputProps = {
 - **Two-way Binding**: Full v-model support
 - **Textarea Mode**: Multi-line input support
 
-## Sizes
-
-- **sm**: Small input with compact padding
-- **md**: Medium input (default) with comfortable spacing
-
 ## Accessibility
 
 - Proper label-input association with `for` and `id` attributes

package/components/tela/input/input.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 
 import { fn } from '@storybook/test'
 
-import Input from './tela-input.vue'
+import Input from './input.vue'
 
 const meta: Meta<typeof Input> = {
     title: 'Core/Input',
@@ -40,11 +40,6 @@ const meta: Meta<typeof Input> = {
             control: 'boolean',
             description: 'Disable the input, preventing user interaction.',
         },
-        size: {
-            control: 'select',
-            options: ['sm', 'md'],
-            description: 'Size of the input field. Controls height and padding.',
-        },
         error: {
             control: 'text',
             description: 'Error message to display below the input. Set to false to hide error state.',

package/components/tela/input/{tela-input.vue → input.vue}

@@ -8,7 +8,6 @@ const props = defineProps<{
     placeholder?: string
     hideLabel?: boolean
     disabled?: boolean
-    size?: 'sm' | 'md'
     error?: string | false
     showClearButton?: boolean
     tabindex?: number
@@ -31,7 +30,6 @@ const emit = defineEmits<{
 
 const isTextarea = computed(() => props.type === 'textarea')
 const attributes = computed(() => ({
-    size: isTextarea.value ? 'md' : undefined,
     type: isTextarea.value ? undefined : props.type,
     modelValue: props.modelValue,
     value: props.modelValue,
@@ -128,7 +126,6 @@ defineExpose({
             rounded-10px bg-white
             class="focus-within-border-strong focus-within-ring-2 focus-within-ring-gray-100 [box-shadow:0_1px_4px_0_rgba(103,127,148,0.03)]"
             :class="[
-                size === 'sm' && 'py-7px !px-12px',
                 disabled && '!bg-gray-50 cursor-not-allowed color-gray-600',
                 $attrs.class,
                 error && '!border-red-900 !text-red-900 !bg-[#FFDBDB66]',

package/components/tela/reasoning/tool-use-display/tool-use-display.vue

@@ -249,9 +249,9 @@ function getIconName() {
                                     </div>
                                 </div>
                             </div>
-                            <div flex="~ col" gap-6px>
+                            <div v-if="toolResult?.output || isRunning" flex="~ col" gap-6px>
                                 <span body-12-regular text-gray-700 class="@2xl:body-14-regular">{{ $t('workflow.result') }}</span>
-                                <div v-if="toolResult" bg border-0.5px border-gray-200 rounded-10px pl-10px py-2>
+                                <div v-if="toolResult?.output" bg border-0.5px border-gray-200 rounded-10px pl-10px py-2>
                                     <TelaScrollArea class="flex flex-col max-h-300px">
                                         <div max-h-300px pr-4>
                                             <code block body-12-regular class="@2xl:body-14-regular">
@@ -264,6 +264,7 @@ function getIconName() {
                                     <TelaSkeleton w-full h-30px rounded-none bg-gray-200 />
                                 </div>
                             </div>
+                            <slot name="footer" />
                         </div>
                     </div>
                 </TelaCollapsibleContent>

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

@@ -43,10 +43,8 @@ const rootAttrs = computed(() => {
             />
             <div
                 :class="cn(
-                    'absolute inset-0 size-full rounded-[14px] z-0 border-[0.5px] border-transparent duration-150 ease-out origin-center group-disabled:scale-0',
-                    'group-data-[active=false]:bg group-data-[active=false]:scale-10 group-data-[active=false]:opacity-0',
-                    'group-data-[active=true]:bg-neutral-200 group-focus-visible:border-strong group-[[data-active=false]:hover]:border-strong group-hover:scale-100 group-hover:opacity-100',
-                    'group-focus-visible:border-strong group-focus-visible:scale-100 group-focus-visible:opacity-100',
+                    'absolute inset-0 size-full rounded-[14px] z-0 border-[0.5px] border-transparent',
+                    isActive ? 'bg-neutral-200 group-focus-visible:border-strong' : 'bg scale-10 opacity-0 duration-150 ease-out origin-center group-hover:border-strong group-hover:scale-100 group-hover:opacity-100 group-focus-visible:border-strong group-focus-visible:scale-100 group-focus-visible:opacity-100',
                 )"
             />
         </div>

package/composables/optimistic-async-data/stories/optimistic-async-data-action-demo.vue

@@ -286,7 +286,6 @@ setAction(someAction.id, { meta: { updated: true } })`
                             <div flex gap-2>
                                 <TelaInput
                                     v-model="editingName"
-                                    size="sm"
                                     flex-1
                                     :disabled="isItemPending(item.id)"
                                     @keydown.enter="saveEditing(item.id)"

package/composables/optimistic-async-data/stories/optimistic-async-data-shared-state-demo.vue

@@ -4,7 +4,7 @@ import { useOptimisticAsyncData } from '..'
 import { useOptimisticAsyncState } from '../useOptimisticAsyncState'
 import OptimisticAsyncProvider from '../optimistic-async-provider.vue'
 import TelaButton from '../../../components/tela/button/button.vue'
-import TelaInput from '../../../components/tela/input/tela-input.vue'
+import TelaInput from '../../../components/tela/input/input.vue'
 
 /**
  * SHARED STATE DEMO (with OptimisticAsyncProvider)
@@ -204,13 +204,11 @@ const EditorComponent = defineComponent({
                     v-model="editName"
                     label="Name"
                     :placeholder="data.name"
-                    size="sm"
                 />
                 <TelaInput
                     v-model="editEmail"
                     label="Email"
                     :placeholder="data.email"
-                    size="sm"
                 />
                 <TelaButton
                     variant="primary"

package/lib/doc-generator.ts

@@ -235,7 +235,7 @@ async function globAsync(pattern: string, options: any): Promise<string[]> {
 export function generateTagName(fileName: string): string {
     // Convert file name to PascalCase tag name
     // Components in tela/ directory should preserve the Tela prefix
-    // e.g., tela-input -> TelaInput, button -> TelaButton
+    // e.g., input -> TelaInput, button -> TelaButton
 
     let tagName: string
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meistrari/tela-build",
-  "version": "1.34.0",
+  "version": "1.35.0",
   "type": "module",
   "files": [
     "app.config.ts",