@meistrari/tela-build 1.0.0

package/components/tela/side-sheet/side-sheet.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import {
+    DialogClose,
+    DialogContent,
+    DialogOverlay,
+    DialogPortal,
+    DialogRoot,
+} from 'radix-vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+defineProps<{
+    overlayClass?: string
+    title?: string
+}>()
+
+const emit = defineEmits<{
+    close: []
+}>()
+
+const open = defineModel<boolean>()
+
+watch(open, (value) => {
+    if (!value)
+        emit('close')
+})
+</script>
+
+<template>
+    <DialogRoot v-model:open="open">
+        <DialogPortal>
+            <DialogOverlay class="DialogOverlay" :class="overlayClass" bg="gray-700/70" z-600>
+                <DialogContent
+                    :class="`DialogContent ${$attrs?.class}`"
+                    z-101
+                    flex="~ col"
+                    class="h-100dvh"
+                    bg-white
+                    p-24px
+                    v-bind="$attrs"
+                >
+                    <DialogClose as-child>
+                        <TelaIconButton absolute right-24px top-24px icon="i-ph-x" size="sm" color="secondary" outline-none />
+                    </DialogClose>
+
+                    <div v-if="title" body-16-semibold>
+                        {{ title }}
+                    </div>
+
+                    <div mt-16px flex-1>
+                        <slot />
+                    </div>
+
+                    <div
+                        v-if="$slots.footer"
+                        @click.stop
+                    >
+                        <slot name="footer" />
+                    </div>
+                </DialogContent>
+            </DialogOverlay>
+        </DialogPortal>
+    </DialogRoot>
+</template>
+
+<style lang="css" scoped>
+.DialogOverlay {
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms ease-in;
+  backdrop-filter: blur(4px);
+}
+
+.DialogContent {
+  box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+  position: fixed;
+  width: 400px;
+  bottom: 0;
+  right: 0;
+  animation: contentShow 250ms ease-out;
+}
+
+.DialogContent:focus {
+  outline: none;
+}
+
+@keyframes overlayShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes contentShow {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0px);
+  }
+}
+</style>

package/components/tela/skeleton/skeleton.mdx

@@ -0,0 +1,165 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as SkeletonStories from './skeleton.stories.ts';
+
+<Meta of={SkeletonStories} />
+
+# TelaSkeleton
+
+A skeleton loading component that displays placeholder content while data is loading. Provides a shimmer effect to indicate loading state. Useful for improving perceived performance by showing content structure before actual data loads.
+
+## Examples
+
+### Basic Usage
+
+```vue
+<TelaSkeleton style="width: 300px; height: 40px;" />
+```
+
+### Text Lines
+
+```vue
+<div class="flex flex-col gap-2">
+  <TelaSkeleton style="width: 100%; height: 16px;" />
+  <TelaSkeleton style="width: 90%; height: 16px;" />
+  <TelaSkeleton style="width: 95%; height: 16px;" />
+</div>
+```
+
+### Avatar
+
+```vue
+<TelaSkeleton class="w-12 h-12 rounded-full" />
+```
+
+### Card Loading
+
+```vue
+<div class="border border-gray-200 rounded-lg p-4">
+  <div class="flex items-center gap-4">
+    <TelaSkeleton class="w-12 h-12 rounded-full" />
+    <div class="flex-1 flex flex-col gap-2">
+      <TelaSkeleton style="width: 60%; height: 16px;" />
+      <TelaSkeleton style="width: 40%; height: 14px;" />
+    </div>
+  </div>
+  <TelaSkeleton class="mt-4" style="width: 100%; height: 100px;" />
+</div>
+```
+
+### Table Loading
+
+```vue
+<div class="flex flex-col gap-2">
+  <TelaSkeleton style="width: 100%; height: 40px;" />
+  <TelaSkeleton style="width: 100%; height: 40px;" />
+  <TelaSkeleton style="width: 100%; height: 40px;" />
+  <TelaSkeleton style="width: 100%; height: 40px;" />
+</div>
+```
+
+### Button
+
+```vue
+<TelaSkeleton class="rounded-lg" style="width: 100px; height: 36px;" />
+```
+
+### Custom Shapes
+
+```vue
+<!-- Rectangle -->
+<TelaSkeleton class="rounded-lg" style="width: 200px; height: 120px;" />
+
+<!-- Circle -->
+<TelaSkeleton class="rounded-full" style="width: 80px; height: 80px;" />
+
+<!-- Pill -->
+<TelaSkeleton class="rounded-full" style="width: 120px; height: 32px;" />
+```
+
+### Form Loading
+
+```vue
+<div class="flex flex-col gap-4">
+  <div>
+    <TelaSkeleton class="mb-2" style="width: 80px; height: 14px;" />
+    <TelaSkeleton class="rounded-lg" style="width: 100%; height: 40px;" />
+  </div>
+  <div>
+    <TelaSkeleton class="mb-2" style="width: 100px; height: 14px;" />
+    <TelaSkeleton class="rounded-lg" style="width: 100%; height: 40px;" />
+  </div>
+  <TelaSkeleton class="rounded-lg" style="width: 120px; height: 36px;" />
+</div>
+```
+
+### With Conditional Rendering
+
+```vue
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const isLoading = ref(true)
+const data = ref(null)
+
+onMounted(async () => {
+  data.value = await fetchData()
+  isLoading.value = false
+})
+</script>
+
+<template>
+  <div v-if="isLoading" class="flex flex-col gap-2">
+    <TelaSkeleton style="width: 100%; height: 20px;" />
+    <TelaSkeleton style="width: 90%; height: 20px;" />
+  </div>
+  <div v-else>
+    <h2>{{ data.title }}</h2>
+    <p>{{ data.content }}</p>
+  </div>
+</template>
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+type SkeletonProps = {
+  class?: string
+  style?: CSSProperties
+}
+```
+
+## Features
+
+- **Shimmer Effect**: Animated pulse/shimmer effect
+- **Flexible Sizing**: Control with inline styles or classes
+- **Custom Shapes**: Round, square, or custom shapes
+- **Responsive**: Works with responsive utilities
+- **Lightweight**: Minimal performance impact
+- **Composable**: Build complex loading states
+
+## Use Cases
+
+- **Text Loading**: Placeholder for titles and paragraphs
+- **Images**: Placeholder for images and avatars
+- **Cards**: Loading state for card components
+- **Tables**: Placeholder rows in tables
+- **Forms**: Loading state for form fields
+- **Lists**: Placeholder items in lists
+- **Profile Headers**: Combined avatar and text placeholders
+
+## Best Practices
+
+1. **Match Content Structure**: Skeleton should match the shape and layout of actual content
+2. **Use Appropriate Sizes**: Match skeleton dimensions to loaded content
+3. **Keep it Simple**: Don't over-complicate skeleton UI
+4. **Show Progress**: Use skeletons for perceived performance
+5. **Timeout**: Consider showing different UI if loading takes too long
+
+## Accessibility
+
+- Purely decorative loading indicator
+- Should be hidden from screen readers (aria-hidden)
+- Provide loading announcements separately
+- Replace with actual content when loaded

package/components/tela/skeleton/skeleton.stories.ts

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Skeleton from './skeleton.vue'
+
+const meta: Meta<typeof Skeleton> = {
+    title: 'Core/Skeleton',
+    component: Skeleton,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A skeleton loading component that displays placeholder content while data is loading. Provides a shimmer effect to indicate loading state. Useful for improving perceived performance by showing content structure before actual data loads.',
+            },
+        },
+    },
+    argTypes: {
+        class: {
+            control: 'text',
+            description: 'Custom CSS classes to apply to the skeleton element.',
+        },
+        style: {
+            control: 'object',
+            description: 'Inline styles to apply to the skeleton element.',
+        },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof Skeleton>
+
+export const Default: Story = {
+    render: () => ({
+        components: { Skeleton },
+        template: `<Skeleton style="width: 300px; height: 40px; border-radius: 8px;" />`,
+    }),
+}

package/components/tela/skeleton/skeleton.vue

@@ -0,0 +1,45 @@
+<script>
+export default {
+    name: 'Skeleton',
+}
+</script>
+
+<template>
+    <div class="skeleton-wrapper">
+        <div class="skeleton-animation" />
+    </div>
+</template>
+
+<style scoped>
+.skeleton-wrapper {
+    position: relative;
+    overflow: hidden;
+    border-radius: 4px;
+}
+
+.skeleton-animation {
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+    background: var(--Grey-Grey60, #EFF1F3);
+    animation: skeleton-pulse 1.1s infinite linear;
+}
+
+@keyframes skeleton-pulse {
+    0% {
+        background: var(--Grey-Grey60, #EFF1F3);
+    }
+    22.73% { /* 250ms / 1100ms total */
+        background: var(--Grey-Grey60, #EFF1F3);
+    }
+    50% {
+        background: var(--Grey-Grey20, #FAFBFB);
+    }
+    77.27% { /* back to lighter for 300ms */
+        background: var(--Grey-Grey20, #FAFBFB);
+    }
+    100% {
+        background: var(--Grey-Grey60, #EFF1F3);
+    }
+}
+</style>

package/components/tela/skeleton-icon.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineProps<{
+    icon: string
+}>()
+</script>
+
+<template>
+    <TelaStatus
+        :icon="icon"
+        only-icon
+        status="empty"
+        animate-pulse
+        class="text-gray-400 bg-gray-200 align-center justify-center !rounded-[5px] !w-[20px] !h-[20px] !p-[4px] ![&>div]:w-[10px] ![&>div]:h-[10px] ![&>div]:font-580"
+    />
+    <div flex-item w-full>
+        <TelaSkeleton
+            v-for="width in ['100%', '50%']"
+            :key="width"
+            bg-gray-200
+            :style="{ width }"
+            h-6px m-2 rounded-4px
+        />
+    </div>
+</template>

package/components/tela/span.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineProps<{
+    label: string
+    icon?: string
+    iconSize?: string
+}>()
+</script>
+
+<template>
+    <span
+        rounded-7px flex="~" items-center
+        body-12-medium
+        gap-4px
+        pl-5px pr-5px py-4px
+        bg-white
+        text-gray-500
+        border-1
+        cursor-default
+    >
+        <slot />
+        <TelaIcon v-if="icon" :name="icon" :size="iconSize ?? 'md'" />
+        <span>{{ label }}</span>
+    </span>
+</template>

package/components/tela/star-button.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../utils/component-utils'
+
+const props = defineProps<{
+    modelValue: boolean
+    size?: 'xs' | 'sm' | 'md'
+    class?: HTMLAttributes['class']
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [boolean]
+}>()
+
+const shouldExplode = ref(false)
+
+watch(() => props.modelValue, (newValue, oldValue) => {
+    if (newValue && !oldValue) {
+        shouldExplode.value = true
+
+        setTimeout(() => {
+            shouldExplode.value = false
+        }, 600)
+    }
+})
+</script>
+
+<template>
+    <div relative inline-flex>
+        <TelaIconButton
+            :icon="modelValue ? 'i-ph-star-fill' : 'i-ph-star-light'"
+            color="secondary"
+            :size="size"
+            :class="cn(props.class)"
+            :icon-class="cn('relative z-1', modelValue ? 'text-amber-400!' : 'text-neutral-400!')"
+            @click.stop.prevent="emit('update:modelValue', !modelValue)"
+        />
+        <div v-if="shouldExplode" absolute pointer-events-none z-0 class="top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+            <span v-for="i in 8" :key="i" class="particle" :style="{ '--index': i }" />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.particle {
+    position: absolute;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: radial-gradient(circle, #F2C351 0%, #E8A341 100%);
+    animation: explode 0.6s ease-out forwards;
+    --angle: calc(var(--index) * 45deg);
+    --distance: 20px;
+}
+
+@keyframes explode {
+    0% {
+        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(1);
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.8;
+    }
+    100% {
+        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--distance)) scale(0);
+        opacity: 0;
+    }
+}
+</style>

package/components/tela/status/status-lean.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineProps<{
+    status: TelaStatusValue
+    icon?: string
+}>()
+
+const classes = {
+    empty: 'bg-gray-50 text-gray-500',
+    neutral: 'bg-#F0F0F1 text-#9A9DA1',
+    warning: 'bg-#FFF2DB text-yellow-700',
+    error: 'bg-#FFDBDB text-red-900',
+    success: 'bg-#DBFFEE text-emerald-600',
+}
+</script>
+
+<template>
+    <div class="flex items-center space-x-2">
+        <div
+            v-if="icon"
+            class="flex items-center justify-center p-1 rounded-5px"
+            h-20px w-20px
+            :class="classes[status]"
+        >
+            <TelaIcon :name="icon" class="w-[10px]! h-[10px]!" />
+        </div>
+        <span :class="`text-xs font-medium ${classes[status].split(' ')[1]}`">
+            <slot />
+        </span>
+    </div>
+</template>

package/components/tela/status/status.mdx

@@ -0,0 +1,187 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as StatusStories from './status.stories.ts';
+
+<Meta of={StatusStories} />
+
+# TelaStatus
+
+A status component that displays different workflow and task statuses with appropriate icons, colors, and labels. Supports multiple status types including pending, running, completed, error, and review states. Features smooth animations and automatic width transitions for a polished user experience.
+
+## Examples
+
+### Default Status
+
+<Canvas of={StatusStories.Default} />
+
+### All Available Variants
+
+<Canvas of={StatusStories.AllVariants} />
+
+### Animated Transitions
+
+<Canvas of={StatusStories.AnimatedTransitions} />
+
+### Basic Usage
+
+```vue
+<TelaStatus variant="running" />
+<TelaStatus variant="completed" />
+<TelaStatus variant="error" />
+```
+
+### With Custom Label
+
+```vue
+<TelaStatus variant="running" label="Processing your request..." />
+<TelaStatus variant="completed" label="Successfully uploaded" />
+<TelaStatus variant="error" label="Upload failed" />
+```
+
+### In Workflows
+
+```vue
+<div class="flex flex-col gap-2">
+  <TelaStatus variant="pending-run" />
+  <TelaStatus variant="running" />
+  <TelaStatus variant="completed" />
+</div>
+```
+
+### In Tables
+
+```vue
+<table>
+  <tr>
+    <td>Task 1</td>
+    <td><TelaStatus variant="completed" /></td>
+  </tr>
+  <tr>
+    <td>Task 2</td>
+    <td><TelaStatus variant="running" /></td>
+  </tr>
+  <tr>
+    <td>Task 3</td>
+    <td><TelaStatus variant="pending-run" /></td>
+  </tr>
+</table>
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+type Variant =
+  | 'pending-run' | 'preparing-run' | 'waiting' | 'on-hold' | 'queued'
+  | 'validation-error' | 'running' | 'executing' | 'processing' | 'verifying'
+  | 'initializing' | 'waiting-user' | 'awaiting-approval' | 'paused'
+  | 'stopped' | 'suspended' | 'running-issues' | 'warning' | 'low-coverage' | 'medium-coverage' | 'completed' | 'success'
+  | 'error' | 'failed' | 'cancelled' | 'archived' | 'reported' | 'expired'
+  | 'pending-review' | 'reviewing' | 'reviewed' | 'approved'
+  | 'approved-changes' | 'reproved' | 'partially-completed'
+
+type StatusProps = {
+  variant?: Variant
+  label?: string
+}
+```
+
+## Variant Categories
+
+### Pending States (Gray)
+- **pending-run**: Task is pending execution
+- **preparing-run**: Preparing to start
+- **waiting**: Waiting in queue
+- **on-hold**: Temporarily on hold
+- **queued**: Queued for processing
+
+### Active/Running States (Neutral with spinner)
+- **running**: Currently executing
+- **executing**: Active execution
+- **processing**: Processing data
+- **verifying**: Verifying results
+- **initializing**: Starting up
+
+### Waiting for Input (Sky Blue)
+- **waiting-user**: Waiting for user action
+- **awaiting-approval**: Needs approval
+
+### Paused States (Gray)
+- **paused**: Temporarily paused
+- **stopped**: Stopped execution
+- **suspended**: Suspended state
+
+### Warning States (Amber)
+- **running-issues**: Running but with issues
+- **warning**: Warning
+- **low-coverage**: Low coverage
+- **medium-coverage**: Medium coverage
+- **validation-error**: Validation failed
+
+### Success States (Green)
+- **completed**: Successfully completed
+- **success**: Success state
+- **approved**: Approved
+- **approved-changes**: Approved with changes
+
+### Review States (Sky Blue)
+- **pending-review**: Awaiting review
+- **reviewing**: Currently under review
+- **reviewed**: Review completed
+
+### Error States (Red)
+- **error**: Error occurred
+- **failed**: Failed execution
+- **validation-error**: Validation error
+- **reproved**: Rejected/reproved
+
+### Inactive States (Gray)
+- **cancelled**: Cancelled by user
+- **archived**: Archived
+- **reported**: Reported
+- **expired**: Expired
+- **partially-completed**: Partially done
+
+## Features
+
+- **35+ Status Variants**: Comprehensive status types for different workflows
+- **Animated Icons**: Smooth icon transitions using Framer Motion
+- **Automatic Width Transitions**: Content animates smoothly between states
+- **Custom Labels**: Override default labels with custom text
+- **Color-Coded**: Intuitive color schemes for each status category
+- **Compact Design**: Small footprint for inline use
+- **Spring Animations**: Natural, spring-based motion for status changes
+
+## Animation
+
+The component uses Framer Motion for smooth animations:
+- **Icon Transitions**: Icons fade and slide vertically when status changes
+- **Width Adjustments**: Container width adapts smoothly to label length
+- **Spring Physics**: Natural, bouncy motion with 0.3s duration
+
+## Use Cases
+
+- **Workflow Status**: Display task execution states in workflows
+- **Task Management**: Show task progress and completion
+- **Process Monitoring**: Indicate system process states
+- **Review Workflows**: Track review and approval states
+- **Form Submissions**: Display form processing states
+- **API Operations**: Show request status (pending, loading, success, error)
+- **Job Queues**: Display job execution states
+- **Document Status**: Track document lifecycle states
+
+## Accessibility
+
+- Clear visual indicators with icons and colors
+- Text labels provide context
+- Color is not the sole indicator (icons included)
+- Smooth animations respect user preferences
+- Semantic HTML structure
+
+## Styling
+
+Each variant includes:
+- **Background Color**: Contextual background matching the state
+- **Text Color**: High-contrast text for readability
+- **Icon**: Unique icon representing the state
+- **Icon Color**: Coordinated with overall color scheme