@meistrari/tela-build 1.47.3 → 1.48.0

package/components/tela/button/button.vue

@@ -33,16 +33,16 @@ const sizeStyle = computed(() => (({
 
 const variantStyle = computed(() => (({
     'primary': fold`
-        bg-gray-900 text-white
-        hover:bg-gray-800
-        active:bg-gray-700
+        bg-neutral-900 text-white
+        hover:bg-neutral-800
+        active:bg-neutral-700
         focus-visible:ring-0.5px focus-visible:ring-cyan-600
     `,
     'secondary': fold`
-        bg-white text-gray-900 border border-0.5px
+        bg-white text-neutral-900 border border-0.5px
       [box-shadow:0_1px_6px_0_rgba(103,127,148,0.05)]
-        hover:bg-subtle hover:border-gray-300
-        active:bg-muted active:border-gray-400/60
+        hover:bg-subtle hover:border-strong
+        active:bg-muted active:border-neutral-400/60
         focus-visible:ring-0.5px focus-visible:ring-cyan-600
     `,
     'ghost': fold`

package/components/tela/card/card.mdx

@@ -14,16 +14,18 @@ A surface container component used to group related content with consistent visu
 
 Always use the `size` prop to control card padding — it maps directly to the standardized values. Never apply padding manually to `<TelaCard>` or its inner elements.
 
+Only `xs` and `sm` are available. Both share `rounded-12px`.
+
 | `size` | Applied classes | Use for |
 |--------|------------------|---------|
-| `md` *(default)* | `p-32px sm:p-48px rounded-24px` | Standard and large cards |
-| `sm` | `p-24px rounded-12px` | Small cards, inner containers |
+| `xs` | `p-20px` | Compact cards, dense inner containers |
+| `sm` *(default)* | `p-24px` | Standard cards |
 
 ```vue
-<!-- Correct — use size prop -->
-<TelaCard size="md">...</TelaCard>
+<!-- Correct — use xs or sm -->
+<TelaCard size="xs">...</TelaCard>
 <TelaCard size="sm">...</TelaCard>
-<TelaCard>...</TelaCard> <!-- md is the default -->
+<TelaCard>...</TelaCard> <!-- sm is the default -->
 
 <!-- Incorrect — never apply padding manually -->
 <TelaCard class="p-20px">...</TelaCard>
@@ -43,10 +45,10 @@ Always use the `size` prop to control card padding — it maps directly to the s
 </TelaCard>
 ```
 
-### Minor / Inner Card
+### Compact / Inner Card
 
 ```vue
-<TelaCard size="sm">
+<TelaCard size="xs">
   <span class="body-12-medium text-secondary">Compact content</span>
 </TelaCard>
 ```
@@ -85,7 +87,7 @@ Cards in grids must use `h-full` for consistent heights.
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `size` | `'sm' \| 'md'` | `'md'` | `md` = `p-32px sm:p-48px rounded-24px`, `sm` = `p-24px rounded-12px` |
+| `size` | `'xs' \| 'sm'` | `'sm'` | `xs` = `p-20px`, `sm` = `p-24px`. Both use `rounded-12px` |
 
 ## Slots
 

package/components/tela/card/card.stories.ts

@@ -8,15 +8,15 @@ const meta: Meta<typeof Card> = {
         layout: 'centered',
         docs: {
             description: {
-                component: 'A surface container that groups related content with consistent visual boundaries. Use the `size` prop to control padding — `md` for standard cards, `sm` for minor or inner containers.',
+                component: 'A surface container that groups related content with consistent visual boundaries. Use the `size` prop to control padding — `sm` for standard cards, `xs` for compact or inner containers.',
             },
         },
     },
     argTypes: {
         size: {
             control: 'select',
-            options: ['md', 'sm'],
-            description: '`md` applies standard card padding. `sm` applies minor/inner container padding.',
+            options: ['xs', 'sm'],
+            description: '`sm` applies standard card padding. `xs` applies compact/inner container padding.',
         },
     },
 }
@@ -41,7 +41,7 @@ export const Default: Story = {
         `,
     }),
     args: {
-        size: 'md',
+        size: 'sm',
     },
 }
 
@@ -49,10 +49,10 @@ export const Standard: Story = {
     render: () => ({
         components: { Card },
         template: `
-            <Card size="md">
+            <Card size="sm">
                 <div style="display: flex; flex-direction: column; gap: 8px; min-width: 280px;">
                     <p class="heading-h4-semibold text-contrast">Standard Card</p>
-                    <p class="body-14-regular text-secondary">Used for large, standard, and medium cards.</p>
+                    <p class="body-14-regular text-secondary">Used for standard content surfaces.</p>
                 </div>
             </Card>
         `,
@@ -60,7 +60,7 @@ export const Standard: Story = {
     parameters: {
         docs: {
             description: {
-                story: 'Default size (`md`). Use for primary content surfaces.',
+                story: 'Default size (`sm`). Use for primary content surfaces.',
             },
         },
     },
@@ -70,10 +70,10 @@ export const Minor: Story = {
     render: () => ({
         components: { Card },
         template: `
-            <Card size="sm">
+            <Card size="xs">
                 <div style="display: flex; flex-direction: column; gap: 8px; min-width: 240px;">
-                    <p class="heading-h5-semibold text-contrast">Minor Card</p>
-                    <p class="body-12-regular text-secondary">Used for small cards and inner containers.</p>
+                    <p class="heading-h5-semibold text-contrast">Compact Card</p>
+                    <p class="body-12-regular text-secondary">Used for compact cards and inner containers.</p>
                 </div>
             </Card>
         `,
@@ -81,7 +81,7 @@ export const Minor: Story = {
     parameters: {
         docs: {
             description: {
-                story: 'Small size (`sm`). Use for compact cards or nested inner containers.',
+                story: 'Compact size (`xs`). Use for compact cards or nested inner containers.',
             },
         },
     },
@@ -92,18 +92,18 @@ export const SizeComparison: Story = {
         components: { Card },
         template: `
             <div style="display: flex; gap: 16px; align-items: flex-start;">
-                <Card size="md">
+                <Card size="sm">
                     <div style="display: flex; flex-direction: column; gap: 6px; min-width: 200px;">
-                        <p class="body-12-medium text-secondary">size="md"</p>
+                        <p class="body-12-medium text-secondary">size="sm"</p>
                         <p class="heading-h4-semibold text-contrast">Standard</p>
-                        <p class="body-14-regular text-tertiary">p-32px sm:p-48px padding</p>
+                        <p class="body-14-regular text-tertiary">p-24px padding</p>
                     </div>
                 </Card>
-                <Card size="sm">
+                <Card size="xs">
                     <div style="display: flex; flex-direction: column; gap: 6px; min-width: 200px;">
-                        <p class="body-12-medium text-secondary">size="sm"</p>
-                        <p class="heading-h4-semibold text-contrast">Minor</p>
-                        <p class="body-14-regular text-tertiary">p-24px padding</p>
+                        <p class="body-12-medium text-secondary">size="xs"</p>
+                        <p class="heading-h4-semibold text-contrast">Compact</p>
+                        <p class="body-14-regular text-tertiary">p-20px padding</p>
                     </div>
                 </Card>
             </div>
@@ -136,7 +136,7 @@ export const Grid: Story = {
         layout: 'padded',
         docs: {
             description: {
-                story: 'Cards used in a grid layout. No padding override needed — `size="md"` is the default.',
+                story: 'Cards used in a grid layout. No padding override needed — `size="sm"` is the default.',
             },
         },
     },

package/components/tela/card/card.vue

@@ -1,21 +1,23 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 
-const props = withDefaults(defineProps<{
-    size?: 'sm' | 'md'
+const props = withDefaults(defineProps <{
+    size?: 'xs' | 'sm'
     class?: HTMLAttributes['class']
     /** @deprecated Use `class` instead */
     contentPadding?: HTMLAttributes['class']
     /** @deprecated Use `class` instead */
     borderRadius?: HTMLAttributes['class']
 }>(), {
-    size: 'md',
+    size: 'sm',
 })
 
 const sizeStyles = computed(() => (({
+    xs: { padding: 'p-20px' },
     sm: { padding: 'p-24px' },
+    /** @deprecated: Use 'xs' or 'sm' instead */
     md: { padding: 'p-32px' },
-}) as Record<string, { padding: string }>)[props.size ?? 'md'] ?? { padding: '' })
+}) as Record<string, { padding: string }>)[props.size ?? 'sm'] ?? { padding: '' })
 
 const paddingClass = computed(() => props.contentPadding ?? sizeStyles.value.padding)
 const rootEl = ref<HTMLElement | null>(null)
@@ -26,7 +28,7 @@ defineExpose({
 </script>
 
 <template>
-    <div ref="rootEl" :class="cn('rounded-16px bg border-0.5px border', paddingClass, props.class)">
+    <div ref="rootEl" :class="cn('rounded-12px bg border-0.5px border', paddingClass, props.class)">
         <slot />
     </div>
 </template>

package/components/tela/chart/chart-bar.vue

@@ -8,7 +8,7 @@ const props = withDefaults(defineProps<{
 }>(), {
     height: '12px',
     gap: '2px',
-    duration: 1000,
+    duration: 400,
 })
 
 const animatedFilled = ref(0)
@@ -52,7 +52,7 @@ watch(() => props.filled, (newValue) => {
             :style="{ height }"
             w-1px
             rounded-1px
-            :bg="bar.isFilled ? '#5DC16B' : '#DFE3E7'"
+            :bg="bar.isFilled ? 'green-500' : 'neutral-200'"
         />
     </div>
 </template>

package/components/tela/create-card/create-card.mdx

@@ -0,0 +1,84 @@
+# TelaCreateCard
+
+A fixed-size entry point card for creating something new from files. Click it to open the native file picker, or drag files directly onto it. It emits a `change` event with the native input event so the parent owns the upload logic.
+
+## Rules
+
+- **Always** handle the `change` event — the component only surfaces files, it does not upload them.
+- The card has a **fixed footprint** (`w-221px h-128px`). Lay it out in a grid or flex row alongside other cards; do not stretch it.
+- Use it as the **first cell** in a list of existing items (the "add new" affordance), not as a standalone hero.
+- Set `multiple={false}` when the flow only accepts a single file.
+- Pass `name` when the input participates in a native `<form>` submission.
+- Use `disabled` while an upload is in flight — it blocks both click and drag-and-drop.
+
+## Examples
+
+### Default
+
+```vue
+<TelaCreateCard @change="handleChange" />
+```
+
+```ts
+function handleChange(event: Event) {
+  const input = event.target as HTMLInputElement
+  const files = input.files
+  // upload files...
+}
+```
+
+### Custom Labels
+
+```vue
+<TelaCreateCard
+  title="Upload dataset"
+  description="Drop a CSV or"
+  browse-label="choose a file"
+  :multiple="false"
+  @change="handleChange"
+/>
+```
+
+### Without Browse Label
+
+```vue
+<!-- Empty browse-label hides the underlined call-to-action -->
+<TelaCreateCard
+  title="New canvas"
+  description="Drag files here"
+  browse-label=""
+  @change="handleChange"
+/>
+```
+
+### Disabled (e.g. while uploading)
+
+```vue
+<TelaCreateCard :disabled="isUploading" @change="handleChange" />
+```
+
+### In a Grid
+
+```vue
+<div class="grid grid-cols-3 gap-4">
+  <TelaCreateCard @change="handleChange" />
+  <TelaCard v-for="item in items" :key="item.id" h-full>...</TelaCard>
+</div>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string` | `'New analysis'` | Heading shown inside the card |
+| `description` | `string` | `'Drag files or'` | Leading helper text before the browse label |
+| `browseLabel` | `string` | `'browse your computer'` | Underlined call-to-action appended after the description. Empty string hides it |
+| `multiple` | `boolean` | `true` | Whether the file input accepts multiple files |
+| `name` | `string` | — | `name` attribute forwarded to the underlying file input |
+| `disabled` | `boolean` | `false` | Disables clicking and drag-and-drop, and dims the card |
+
+## Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `change` | `Event` | Native input change event, fired on file selection and on drop. Read files from `(event.target as HTMLInputElement).files` |

package/components/tela/create-card/create-card.stories.ts

@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import CreateCard from './create-card.vue'
+
+const meta: Meta<typeof CreateCard> = {
+    title: 'Core/CreateCard',
+    component: CreateCard,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A fixed-size entry point card for creating something new from files. Click to open the file picker, or drag files onto it. Emits `change` with the native input event.',
+            },
+        },
+    },
+    argTypes: {
+        title: {
+            control: 'text',
+            description: 'Heading shown inside the card.',
+        },
+        description: {
+            control: 'text',
+            description: 'Leading helper text before the browse label.',
+        },
+        browseLabel: {
+            control: 'text',
+            description: 'Underlined call-to-action appended after the description.',
+        },
+        multiple: {
+            control: 'boolean',
+            description: 'Whether the file input accepts multiple files.',
+        },
+        name: {
+            control: 'text',
+            description: 'Name attribute forwarded to the underlying file input.',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disables clicking and drag-and-drop.',
+        },
+    },
+    args: {
+        onChange: (event: Event) => {
+            const input = event.target as HTMLInputElement
+            // eslint-disable-next-line no-console
+            console.log('change', input.files)
+        },
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    render: args => ({
+        components: { CreateCard },
+        setup() {
+            return { args }
+        },
+        template: '<CreateCard v-bind="args" @change="args.onChange" />',
+    }),
+    args: {
+        title: 'New analysis',
+        description: 'Drag files or',
+        browseLabel: 'browse your computer',
+        multiple: true,
+    },
+}
+
+export const Disabled: Story = {
+    render: args => ({
+        components: { CreateCard },
+        setup() {
+            return { args }
+        },
+        template: '<CreateCard v-bind="args" @change="args.onChange" />',
+    }),
+    args: {
+        disabled: true,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Disabled state — clicking and drag-and-drop are inert and the card is dimmed.',
+            },
+        },
+    },
+}
+
+export const CustomLabels: Story = {
+    render: args => ({
+        components: { CreateCard },
+        setup() {
+            return { args }
+        },
+        template: '<CreateCard v-bind="args" @change="args.onChange" />',
+    }),
+    args: {
+        title: 'Upload dataset',
+        description: 'Drop a CSV or',
+        browseLabel: 'choose a file',
+        multiple: false,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Custom title, description, and browse label. Set `multiple: false` to accept a single file.',
+            },
+        },
+    },
+}
+
+export const NoBrowseLabel: Story = {
+    render: args => ({
+        components: { CreateCard },
+        setup() {
+            return { args }
+        },
+        template: '<CreateCard v-bind="args" @change="args.onChange" />',
+    }),
+    args: {
+        title: 'New canvas',
+        description: 'Drag files here',
+        browseLabel: '',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Omitting `browseLabel` (empty string) hides the underlined call-to-action.',
+            },
+        },
+    },
+}

package/components/tela/create-card/create-card.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    disabled?: boolean
+    title?: string
+    description?: string
+    browseLabel?: string
+    multiple?: boolean
+    name?: string
+}>(), {
+    title: 'New analysis',
+    description: 'Drag files or',
+    browseLabel: 'browse your computer',
+    multiple: true,
+})
+
+const emit = defineEmits<{
+    (e: 'change', event: Event): void
+}>()
+
+const fileInputRef = ref<HTMLInputElement | null>(null)
+
+const dragDepth = ref(0)
+const isDragging = computed(() => dragDepth.value > 0)
+
+function openFilePicker() {
+    if (props.disabled)
+        return
+
+    fileInputRef.value?.click()
+}
+
+function handleFileChange(event: Event) {
+    emit('change', event)
+}
+
+function onDragEnter() {
+    if (props.disabled)
+        return
+
+    dragDepth.value++
+}
+
+function onDragLeave() {
+    if (props.disabled)
+        return
+
+    dragDepth.value = Math.max(0, dragDepth.value - 1)
+}
+
+function onDrop(event: DragEvent) {
+    dragDepth.value = 0
+
+    if (props.disabled)
+        return
+
+    const files = event.dataTransfer?.files
+
+    if (files?.length && fileInputRef.value) {
+        const dataTransfer = new DataTransfer()
+        const droppedFiles = props.multiple ? Array.from(files) : Array.from(files).slice(0, 1)
+
+        for (const file of droppedFiles)
+            dataTransfer.items.add(file)
+
+        fileInputRef.value.files = dataTransfer.files
+        fileInputRef.value.dispatchEvent(new Event('change', { bubbles: true }))
+    }
+}
+</script>
+
+<template>
+    <button
+        type="button"
+        :disabled="disabled"
+        relative w-221px h-128px rounded-12px p-20px
+        bg border-0.5px border
+        flex="~ col" items-start justify-end text-start
+        hover:bg-subtle hover:border-strong active:bg-muted disabled:opacity-50 disabled:cursor-not-allowed
+        :class="isDragging ? 'border-dashed border-neutral-400 bg-subtle' : 'active:border-neutral-400/60'"
+        @click="openFilePicker"
+        @dragenter.prevent="onDragEnter"
+        @dragover.prevent
+        @dragleave.prevent="onDragLeave"
+        @drop.prevent="onDrop"
+    >
+        <TelaIcon name="i-ph-plus" size="20px" color="icon" absolute top-16px right-16px />
+        <div flex="~ col" items-start justify-end gap-4px>
+            <h5 heading-h5-semibold text-primary>
+                {{ title }}
+            </h5>
+            <div leading-none>
+                <span body-12-regular text-secondary>
+                    {{ description }}
+                </span>
+                <span v-if="browseLabel" block body-12-regular leading-none text-secondary underline underline-offset-3>{{ browseLabel }}</span>
+            </div>
+        </div>
+    </button>
+
+    <input
+        ref="fileInputRef"
+        type="file"
+        :multiple="multiple"
+        :name="name"
+        hidden
+        @change="handleFileChange"
+    >
+</template>

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

@@ -48,7 +48,7 @@ defineEmits<{
             name="i-ph-caret-down-bold"
             size="12px"
             color="icon-secondary"
-            class="shrink-0 transition-all ease-out duration-120 group-data-[active]:rotate-180"
+            class="shrink-0 transition-all ease-out duration-150 group-data-[active]:rotate-180"
         />
     </button>
 </template>

package/components/tela/home/home-body.vue

@@ -0,0 +1,5 @@
+<template>
+    <div flex="~ col" gap-46px>
+        <slot />
+    </div>
+</template>

package/components/tela/home/home-content.vue

@@ -0,0 +1,5 @@
+<template>
+    <main flex="~ col" w-full max-w-1600px mx-auto px-48px py-32px gap-24px>
+        <slot />
+    </main>
+</template>

package/components/tela/home/home-section.vue

@@ -0,0 +1,5 @@
+<template>
+    <section flex="~ col" gap-24px>
+        <slot />
+    </section>
+</template>

package/components/tela/home/home-title.vue

@@ -0,0 +1,5 @@
+<template>
+    <h1 heading-h4-semibold text-primary>
+        <slot />
+    </h1>
+</template>

package/components/tela/home/home-toolbar.vue

@@ -0,0 +1,10 @@
+<template>
+    <div flex items-center justify-between gap-12px flex-wrap>
+        <div flex items-center gap-8px flex-wrap>
+            <slot />
+        </div>
+        <div v-if="$slots.actions" flex items-center gap-8px flex-wrap>
+            <slot name="actions" />
+        </div>
+    </div>
+</template>