@meistrari/tela-build 1.0.0

package/components/tela/button/button.mdx

@@ -0,0 +1,155 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as ButtonStories from './button.stories.ts';
+
+<Meta of={ButtonStories} />
+
+# TelaButton
+
+A versatile button component with multiple variants, sizes, and states. Supports icons, loading states, and can function as a link when provided with a `to` prop. Built for consistent UI interactions across the application.
+
+## Examples
+
+### All Sizes
+
+<Canvas of={ButtonStories.Sizes} />
+
+### With Icon
+
+<Canvas of={ButtonStories.WithIcon} />
+
+### Loading State
+
+<Canvas of={ButtonStories.Loading} />
+
+### As a Link
+
+<Canvas of={ButtonStories.LinkButton} />
+
+### All Variants
+
+<Canvas of={ButtonStories.Variants} />
+
+### Disabled State
+
+<Canvas of={ButtonStories.Disabled} />
+
+### All Combinations
+
+<Canvas of={ButtonStories.AllCombinations} />
+
+### Basic Usage
+
+```vue
+<TelaButton variant="primary" size="md">
+  Click me
+</TelaButton>
+```
+
+### With Icon Code
+
+```vue
+<TelaButton icon="i-ph-plus" leading variant="primary">
+  Add Item
+</TelaButton>
+
+<TelaButton icon="i-ph-trash" variant="danger">
+  Delete
+</TelaButton>
+```
+
+### Loading State Code
+
+```vue
+<TelaButton loading variant="primary">
+  Saving...
+</TelaButton>
+
+<TelaButton loading leading variant="secondary">
+  Processing
+</TelaButton>
+```
+
+### As a Link Code
+
+```vue
+<TelaButton to="/home" variant="secondary">
+  Go to Home
+</TelaButton>
+
+<TelaButton to="https://example.com" target="_blank" variant="ghost">
+  External Link
+</TelaButton>
+```
+
+### Using Slots
+
+```vue
+<TelaButton variant="primary">
+  <template #leading>
+    <TelaIcon name="i-ph-check" />
+  </template>
+  Confirm
+</TelaButton>
+
+<TelaButton variant="secondary">
+  Save
+  <template #trailing>
+    <TelaIcon name="i-ph-arrow-right" />
+  </template>
+</TelaButton>
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+type ButtonSize = 'sm' | 'md' | 'lg'
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'success' | 'danger'
+
+type ButtonProps = {
+  size?: ButtonSize
+  variant?: ButtonVariant
+  icon?: string
+  loading?: boolean
+  leading?: boolean
+  disabled?: boolean
+  to?: string
+  target?: '_blank' | null
+}
+```
+
+## Slots
+
+The Button component supports three slots:
+
+- `default` - Main button content/text
+- `leading` - Content before the main text (e.g., icons)
+- `trailing` - Content after the main text (e.g., icons, badges)
+
+## Features
+
+- **Multiple Variants**: Primary, secondary, ghost, success, and danger styles
+- **Flexible Sizing**: Small, medium, and large sizes
+- **Icon Support**: Leading or trailing icons with automatic sizing
+- **Loading State**: Built-in loading spinner with automatic disable
+- **Link Functionality**: Renders as NuxtLink when `to` prop is provided
+- **Disabled State**: Proper disabled styling and interaction prevention
+- **Customizable**: Accepts custom classes for extended styling
+
+## Styling
+
+The button uses dynamic computed styles based on size and variant:
+
+- **Primary**: Dark background with white text, hover and focus states
+- **Secondary**: White background with border, subtle hover effects
+- **Ghost**: Transparent background, minimal styling
+- **Danger**: Red-themed for destructive actions
+- **Disabled**: Grayed out, cursor not-allowed
+
+## Accessibility
+
+- Proper button semantics with `<button>` element
+- Disabled state prevents interaction
+- Focus visible styles for keyboard navigation
+- Semantic link when using `to` prop

package/components/tela/button/button.stories.ts

@@ -0,0 +1,202 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Button from './button.vue'
+
+const meta: Meta<typeof Button> = {
+    title: 'Core/Button',
+    component: Button,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A versatile button component with multiple variants, sizes, and states. Supports icons, loading states, and can function as a link when provided with a `to` prop. Built for consistent UI interactions across the application.',
+            },
+        },
+    },
+    argTypes: {
+        size: {
+            control: 'select',
+            options: ['xs', 'sm', 'md', 'lg'],
+            description: 'Size of the button. Controls padding, font size, and icon size.',
+        },
+        variant: {
+            control: 'select',
+            options: ['primary', 'secondary', 'ghost', 'success', 'danger'],
+            description: 'Visual style variant of the button. Primary is the default emphasized style, secondary is outlined, ghost is minimal, success is for positive actions, and danger is for destructive actions.',
+        },
+        icon: {
+            control: 'text',
+            description: 'Icon class or name to display in the button. Use icon names like "i-ph-plus" or similar iconify classes.',
+        },
+        loading: {
+            control: 'boolean',
+            description: 'Show loading spinner and disable button interaction while loading.',
+        },
+        leading: {
+            control: 'boolean',
+            description: 'Place icon before the text content. If false, icon appears after text.',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disable the button, preventing user interaction and applying disabled styling.',
+        },
+        to: {
+            control: 'text',
+            description: 'URL or route path to navigate to when the button is clicked. When provided, the button renders as a NuxtLink instead of a button element.',
+        },
+        target: {
+            control: 'text',
+            description: 'Target attribute for links. Use "_blank" to open in a new tab. Only applicable when `to` prop is provided.',
+        },
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Button>
+
+export const Default: Story = {
+    render: args => ({
+        components: { Button },
+        setup() {
+            return { args }
+        },
+        template: `<Button v-bind="args">Button</Button>`,
+    }),
+    args: {
+        size: 'md',
+        variant: 'primary',
+    },
+}
+
+export const Loading: Story = {
+    render: args => ({
+        components: { Button },
+        setup() {
+            return { args }
+        },
+        template: `<Button v-bind="args">Loading</Button>`,
+    }),
+    args: {
+        loading: true,
+        size: 'md',
+        variant: 'primary',
+    },
+}
+
+export const Disabled: Story = {
+    render: args => ({
+        components: { Button },
+        setup() {
+            return { args }
+        },
+        template: `<Button v-bind="args">Disabled</Button>`,
+    }),
+    args: {
+        disabled: true,
+        size: 'md',
+        variant: 'primary',
+    },
+}
+
+export const WithIcon: Story = {
+    render: args => ({
+        components: { Button },
+        setup() {
+            return { args }
+        },
+        template: `<Button v-bind="args">With Icon</Button>`,
+    }),
+    args: {
+        icon: 'i-ph-plus',
+        leading: true,
+        size: 'md',
+        variant: 'primary',
+    },
+}
+
+export const LinkButton: Story = {
+    render: args => ({
+        components: { Button },
+        setup() {
+            return { args }
+        },
+        template: `<Button v-bind="args">Go to Home</Button>`,
+    }),
+    args: {
+        to: '/home',
+        size: 'md',
+        variant: 'secondary',
+    },
+}
+
+export const Sizes: Story = {
+    render: () => ({
+        components: { Button },
+        template: `
+            <div style="display: flex; gap: 10px; align-items: center;">
+                <Button size="sm" variant="primary">SM</Button>
+                <Button size="md" variant="primary">MD</Button>
+                <Button size="lg" variant="primary">LG</Button>
+            </div>
+        `,
+    }),
+}
+
+export const Variants: Story = {
+    render: () => ({
+        components: { Button },
+        template: `
+            <div style="display: flex; gap: 10px; flex-wrap: wrap; align-items: center;">
+                <Button variant="primary">Primary</Button>
+                <Button variant="secondary">Secondary</Button>
+                <Button variant="ghost">Ghost</Button>
+                <Button variant="danger">Danger</Button>
+            </div>
+        `,
+    }),
+}
+
+export const AllCombinations: Story = {
+    render: () => ({
+        components: { Button },
+        template: `
+            <div style="display: flex; flex-direction: column; gap: 20px;">
+                <div>
+                    <h3>Sizes</h3>
+                    <div style="display: flex; gap: 10px; align-items: center;">
+                        <Button size="sm" variant="primary">SM</Button>
+                        <Button size="md" variant="primary">MD</Button>
+                        <Button size="lg" variant="primary">LG</Button>
+                    </div>
+                </div>
+                <div>
+                    <h3>Variants</h3>
+                    <div style="display: flex; gap: 10px; flex-wrap: wrap;  align-items: center;">
+                        <Button variant="primary">Primary</Button>
+                        <Button variant="secondary">Secondary</Button>
+                        <Button variant="ghost">Ghost</Button>
+                        <Button variant="danger">Danger</Button>
+                    </div>
+                </div>
+                <div>
+                    <h3>States</h3>
+                    <div style="display: flex; gap: 10px; align-items: center;">
+                        <Button disabled variant="primary">Disabled</Button>
+                        <Button loading variant="primary">Loading</Button>
+                    </div>
+                </div>
+                <div>
+                    <h3>With Icons</h3>
+                    <div style="display: flex; gap: 10px; align-items: center;">
+                        <Button icon="i-ph-plus-bold" leading variant="primary">Add</Button>
+                        <Button icon="i-ph-trash-bold" variant="danger">Delete</Button>
+                    </div>
+                </div>
+                <div>
+                    <h3>Link Button</h3>
+                    <Button to="/home" variant="secondary">Go to Home</Button>
+                </div>
+            </div>
+        `,
+    }),
+}

package/components/tela/button/button.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { NuxtLink } from '#components'
+
+export type ButtonSize = 'sm' | 'md' | 'lg'
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'success' | 'danger'
+
+export type ButtonProps = {
+    size?: ButtonSize
+    variant?: ButtonVariant
+    icon?: string
+    loading?: boolean
+    leading?: boolean
+    disabled?: boolean
+    to?: string
+    target?: '_blank' | null;
+}
+
+const props = defineProps<ButtonProps>()
+
+const resolvedSize = computed(() => props.size || 'md')
+const resolvedVariant = computed(() =>
+    (props.disabled && 'disabled')
+    || (props.loading && 'loading')
+    || props.variant
+    || 'primary',
+)
+
+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',
+}) as Record<ButtonSize, string>)[resolvedSize.value] ?? '')
+
+const variantStyle = computed(() => (({
+    primary: fold`
+        bg-gray-900 text-white
+        hover:bg-gray-800
+        active:bg-gray-700
+        focus-visible:ring-0.5px focus-visible:ring-cyan-600
+    `,
+    secondary: fold`
+        bg-white text-gray-900 border-gray-300 border-0.5px
+        hover:bg-gray-50 hover:border-gray-300 hover:shadow-subtle
+        active:bg-gray-100 active:border-gray-400/60
+        focus-visible:ring-0.5px focus-visible:ring-cyan-600
+    `,
+    ghost: fold`
+        bg-transparent text-gray-900
+        hover:bg-gray-100
+        focus-visible:ring-0.5px focus-visible:ring-cyan-600
+    `,
+    disabled: fold`
+        bg-gray-100 text-gray-400 !cursor-not-allowed
+    `,
+    loading: fold`
+        bg-gray-200 text-gray-600
+    `,
+    danger: fold`
+        bg-red-100 text-red-500
+        hover:bg-red-100/80
+        focus:outline-red-600
+    `,
+}) as Record<ButtonVariant | 'disabled' | 'loading', string>)[resolvedVariant.value] ?? '')
+
+const resolvedStyle = computed(() => [
+    sizeStyle.value,
+    variantStyle.value,
+].join(' '))
+
+const tag = computed(() => props.to ? NuxtLink : 'button')
+
+const iconSize = computed(() => {
+    switch (sizeStyle.value) {
+        case 'xs':
+            return '11px'
+        case 'sm':
+            return '11px'
+        case 'md':
+            return '13px'
+        case 'lg':
+            return '13px'
+        default:
+            return '13px'
+    }
+})
+</script>
+
+<template>
+    <component
+        :is="tag"
+        :to="to"
+        :class="resolvedStyle" transition ease-in-out duration-80 flex items-center justify-center gap-6px
+        :disabled="disabled"
+        :cursor="disabled ? 'not-allowed' : 'pointer'"
+        :target="target"
+        border-box
+        select-none
+    >
+        <TelaIconSpinner v-if="loading && leading" 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 />
+        <slot />
+        <TelaIconSpinner v-if="loading && !leading" animate-spin ml-0.5 />
+        <slot v-else-if="$slots.trailing" name="trailing" />
+        <TelaIcon v-else-if="icon && !leading" :name="icon" :size="iconSize" />
+    </component>
+</template>

package/components/tela/card.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { defineProps, ref } from 'vue'
+
+defineProps<{
+    contentPadding?: string;
+    borderRadius?: string;
+}>()
+
+const rootEl = ref<HTMLElement | null>(null)
+
+defineExpose({
+    el: rootEl,
+})
+</script>
+
+<template>
+    <div
+        ref="rootEl"
+        bg-white
+        :class="borderRadius ? `rounded-${borderRadius}` : 'rounded-16px'"
+        b=".5 gray-200"
+    >
+        <div :class="contentPadding ?? 'p-32px'">
+            <slot />
+        </div>
+        <div v-if="$slots.footer" p-19px b="t-1 #EBEBEB">
+            <slot name="footer" />
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    total: number
+    filled: number
+    height?: string
+    gap?: string
+    duration?: number
+}>(), {
+    height: '12px',
+    gap: '2px',
+    duration: 1000,
+})
+
+const animatedFilled = ref(0)
+
+const bars = computed(() => {
+    return Array.from({ length: props.total }, (_, index) => ({
+        index,
+        isFilled: index < animatedFilled.value,
+    }))
+})
+
+watch(() => props.filled, (newValue) => {
+    const startValue = animatedFilled.value
+    const startTime = Date.now()
+    const animate = () => {
+        const elapsed = Date.now() - startTime
+        const progress = Math.min(elapsed / props.duration, 1)
+
+        const easeOutQuad = (t: number) => t * (2 - t)
+        const easedProgress = easeOutQuad(progress)
+
+        animatedFilled.value = Math.floor(startValue + (newValue - startValue) * easedProgress)
+
+        if (progress < 1) {
+            requestAnimationFrame(animate)
+        }
+        else {
+            animatedFilled.value = newValue
+        }
+    }
+
+    animate()
+}, { immediate: true })
+</script>
+
+<template>
+    <div flex="~" :style="{ gap }" items-center>
+        <div
+            v-for="bar in bars"
+            :key="bar.index"
+            :style="{ height }"
+            w-1px
+            rounded-1px
+            :bg="bar.isFilled ? '#5DC16B' : '#DFE3E7'"
+        />
+    </div>
+</template>