@meistrari/tela-build 1.0.0

package/components/tela/kbd/kbd.mdx

@@ -0,0 +1,238 @@
+import { Meta, ArgTypes } from '@storybook/blocks';
+
+<Meta title="Utility/Kbd" />
+
+# TelaKbd
+
+A keyboard key component for displaying keyboard shortcuts or hotkeys. Styled to look like physical keyboard keys. Useful for documentation, help text, and keyboard shortcut displays.
+
+## Props
+
+```typescript
+type KbdProps = {
+  class?: string
+}
+```
+
+## Examples
+
+### Basic Usage
+
+```vue
+<p>
+  Press <TelaKbd>Enter</TelaKbd> to submit
+</p>
+```
+
+### Keyboard Shortcuts
+
+```vue
+<div class="space-y-2">
+  <div>
+    <TelaKbd>Ctrl</TelaKbd> + <TelaKbd>C</TelaKbd> - Copy
+  </div>
+  <div>
+    <TelaKbd>Ctrl</TelaKbd> + <TelaKbd>V</TelaKbd> - Paste
+  </div>
+  <div>
+    <TelaKbd>Ctrl</TelaKbd> + <TelaKbd>Z</TelaKbd> - Undo
+  </div>
+</div>
+```
+
+### Common Keys
+
+```vue
+<div class="flex flex-wrap gap-2">
+  <TelaKbd>Enter</TelaKbd>
+  <TelaKbd>Esc</TelaKbd>
+  <TelaKbd>Tab</TelaKbd>
+  <TelaKbd>Space</TelaKbd>
+  <TelaKbd>Shift</TelaKbd>
+  <TelaKbd>Ctrl</TelaKbd>
+  <TelaKbd>Alt</TelaKbd>
+  <TelaKbd>⌘</TelaKbd>
+</div>
+```
+
+### Arrow Keys
+
+```vue
+<div class="flex gap-2">
+  <TelaKbd>↑</TelaKbd>
+  <TelaKbd>↓</TelaKbd>
+  <TelaKbd>←</TelaKbd>
+  <TelaKbd>→</TelaKbd>
+</div>
+```
+
+### Function Keys
+
+```vue
+<div class="flex gap-2">
+  <TelaKbd>F1</TelaKbd>
+  <TelaKbd>F2</TelaKbd>
+  <TelaKbd>F3</TelaKbd>
+  <TelaKbd>F4</TelaKbd>
+  <TelaKbd>F5</TelaKbd>
+</div>
+```
+
+### In Help Text
+
+```vue
+<div class="space-y-3">
+  <div class="flex items-center justify-between">
+    <span>Save document</span>
+    <div>
+      <TelaKbd>⌘</TelaKbd> + <TelaKbd>S</TelaKbd>
+    </div>
+  </div>
+  
+  <div class="flex items-center justify-between">
+    <span>Open file</span>
+    <div>
+      <TelaKbd>⌘</TelaKbd> + <TelaKbd>O</TelaKbd>
+    </div>
+  </div>
+  
+  <div class="flex items-center justify-between">
+    <span>Search</span>
+    <div>
+      <TelaKbd>⌘</TelaKbd> + <TelaKbd>F</TelaKbd>
+    </div>
+  </div>
+</div>
+```
+
+### Combination Shortcuts
+
+```vue
+<p>
+  Press <TelaKbd>Ctrl</TelaKbd> + <TelaKbd>Shift</TelaKbd> + <TelaKbd>P</TelaKbd> to open command palette
+</p>
+```
+
+### Platform-Specific
+
+```vue
+<script setup>
+const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0
+const cmdKey = isMac ? '⌘' : 'Ctrl'
+</script>
+
+<template>
+  <p>
+    Press <TelaKbd>{{ cmdKey }}</TelaKbd> + <TelaKbd>C</TelaKbd> to copy
+  </p>
+</template>
+```
+
+### In Tooltips
+
+```vue
+<TelaTooltip>
+  <TelaButton>Save</TelaButton>
+  <template #content>
+    Save <TelaKbd>⌘</TelaKbd><TelaKbd>S</TelaKbd>
+  </template>
+</TelaTooltip>
+```
+
+### Keyboard Shortcut Guide
+
+```vue
+<div class="p-6 bg-white rounded shadow">
+  <h3 class="text-lg font-semibold mb-4">Keyboard Shortcuts</h3>
+  
+  <div class="space-y-3">
+    <div class="flex items-center justify-between py-2 border-b">
+      <span>Save</span>
+      <div class="flex gap-1">
+        <TelaKbd>Ctrl</TelaKbd>
+        <span>+</span>
+        <TelaKbd>S</TelaKbd>
+      </div>
+    </div>
+    
+    <div class="flex items-center justify-between py-2 border-b">
+      <span>Undo</span>
+      <div class="flex gap-1">
+        <TelaKbd>Ctrl</TelaKbd>
+        <span>+</span>
+        <TelaKbd>Z</TelaKbd>
+      </div>
+    </div>
+    
+    <div class="flex items-center justify-between py-2 border-b">
+      <span>Redo</span>
+      <div class="flex gap-1">
+        <TelaKbd>Ctrl</TelaKbd>
+        <span>+</span>
+        <TelaKbd>Shift</TelaKbd>
+        <span>+</span>
+        <TelaKbd>Z</TelaKbd>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+## Common Key Names
+
+### Modifier Keys
+- `Ctrl` - Control key
+- `Shift` - Shift key
+- `Alt` - Alt key
+- `⌘` or `Cmd` - Command key (Mac)
+- `⌥` or `Option` - Option key (Mac)
+
+### Special Keys
+- `Enter` or `Return`
+- `Esc` or `Escape`
+- `Tab`
+- `Space` or `Spacebar`
+- `Backspace`
+- `Delete` or `Del`
+
+### Arrow Keys
+- `↑` - Up
+- `↓` - Down
+- `←` - Left
+- `→` - Right
+
+### Function Keys
+- `F1` through `F12`
+
+## Features
+
+- **Styled Keys**: Looks like physical keyboard keys
+- **Inline Display**: Works inline with text
+- **Custom Styling**: Accepts custom classes
+- **Semantic**: Uses `<kbd>` HTML element
+- **Accessible**: Screen reader friendly
+
+## Use Cases
+
+- **Documentation**: Show keyboard shortcuts
+- **Help Text**: Explain keyboard controls
+- **Tooltips**: Display shortcuts in tooltips
+- **Command Palettes**: Show available shortcuts
+- **Tutorials**: Teach keyboard navigation
+- **Game Controls**: Display game controls
+
+## Best Practices
+
+1. **Use Actual Keys**: Show the real key names
+2. **Platform Awareness**: Show correct keys for platform
+3. **Combine with +**: Use + between multiple keys
+4. **Be Consistent**: Use same format throughout app
+5. **Provide Context**: Explain what the shortcut does
+
+## Accessibility
+
+- Uses semantic `<kbd>` element
+- Screen readers announce as keyboard input
+- Clear visual distinction from normal text
+- Sufficient color contrast
+

package/components/tela/kbd/kbd.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+defineProps<{
+    icon?: string
+}>()
+</script>
+
+<template>
+    <span
+        text="12px #3F4650"
+        bg="gray-200"
+        rounded-6px
+        :class="icon ? 'w-20px h-20px' : 'px-4px'"
+        h-16px flex items-center justify-center
+    >
+        <TelaIcon v-if="icon" :name="icon" class="h-14px! w-14px!" />
+        <slot v-else />
+    </span>
+</template>

package/components/tela/label/label.mdx

@@ -0,0 +1,121 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as LabelStories from './label.stories.ts';
+
+<Meta of={LabelStories} />
+
+# TelaLabel
+
+A simple, accessible label component for form inputs and other interactive elements. Provides consistent styling and supports disabled states through group and peer variants.
+
+## Examples
+
+### Default
+
+<Canvas of={LabelStories.Default} />
+
+### Basic Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const email = ref('')
+</script>
+
+<template>
+  <div>
+    <TelaLabel for="email">Email Address</TelaLabel>
+    <input id="email" v-model="email" type="email" />
+  </div>
+</template>
+```
+
+### With Input Field
+
+```vue
+<template>
+  <div>
+    <TelaLabel for="username">Username</TelaLabel>
+    <TelaInput id="username" v-model="username" placeholder="Enter username" />
+  </div>
+</template>
+```
+
+### With Custom Styling
+
+```vue
+<template>
+  <TelaLabel class="text-blue-600 text-lg" for="custom">
+    Custom Styled Label
+  </TelaLabel>
+</template>
+```
+
+### Disabled State (with group)
+
+```vue
+<template>
+  <div class="group" data-disabled="true">
+    <TelaLabel for="disabled-input">Disabled Field</TelaLabel>
+    <input id="disabled-input" disabled />
+  </div>
+</template>
+```
+
+### With Peer Disabled
+
+```vue
+<template>
+  <div>
+    <input id="peer-disabled" class="peer" disabled />
+    <TelaLabel for="peer-disabled">This label will be disabled</TelaLabel>
+  </div>
+</template>
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+type LabelProps = {
+  for?: string
+  class?: string
+  // Additional LabelProps from reka-ui
+}
+```
+
+## Features
+
+- **Accessible**: Proper label-input association with `for` attribute
+- **Consistent Styling**: Uses heading-h5-semibold typography and primary text color
+- **Disabled States**: Automatically handles disabled styling via group and peer selectors
+- **Customizable**: Supports custom classes for flexible styling
+- **Slot-based Content**: Use default slot for label content
+- **Framework Integration**: Built on top of reka-ui Label primitive
+
+## Styling
+
+The component includes built-in styles:
+- **Typography**: `heading-h5-semibold` font style
+- **Color**: `text-primary` for consistent theming
+- **Select**: `select-none` prevents text selection
+- **Disabled**: Automatically reduces opacity to 50% when disabled
+- **Pointer Events**: Disables pointer events when disabled
+
+## Accessibility
+
+- Uses semantic `<label>` element via reka-ui
+- Proper association with form controls via `for` attribute
+- Disabled state properly conveyed with reduced opacity
+- Non-selectable text prevents accidental selection
+- Cursor states managed for disabled inputs
+
+## Best Practices
+
+1. **Always associate with inputs**: Use the `for` attribute to link labels with their inputs
+2. **Use descriptive text**: Labels should clearly describe the associated input
+3. **Group with inputs**: Place labels logically with their form controls
+4. **Handle disabled states**: Use group or peer patterns for consistent disabled styling
+5. **Custom classes**: Add custom classes for specific design needs while maintaining base styles
+

package/components/tela/label/label.stories.ts

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import TelaLabel from './label.vue'
+
+const meta: Meta<typeof TelaLabel> = {
+    title: 'Core/Label',
+    component: TelaLabel,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A simple, accessible label component for form inputs and other interactive elements. Provides consistent styling and supports disabled states through group and peer variants.',
+            },
+        },
+    },
+    argTypes: {
+        for: {
+            control: 'text',
+            description: 'The ID of the form element the label is associated with. Used for accessibility.',
+        },
+        class: {
+            control: 'text',
+            description: 'Custom CSS classes to apply to the label element.',
+        },
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    render: () => ({
+        components: { TelaLabel },
+        template: '<TelaLabel>Label</TelaLabel>',
+    }),
+}

package/components/tela/label/label.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { Label } from 'reka-ui'
+import { reactiveOmit } from '@vueuse/core'
+import type { LabelProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+    <Label
+        data-slot="label"
+        v-bind="delegatedProps"
+        :class="
+            cn(
+                'w-fit heading-h5-semibold text-primary select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </Label>
+</template>

package/components/tela/link-decoration/link-decoration.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const props = defineProps<{
+    class?: string
+    href?: string
+}>()
+</script>
+
+<template>
+    <a
+        v-if="props.href"
+        :href="props.href"
+        :class="cn('text-gray-900 underline underline-offset-3px', props.class)"
+    >
+        <slot />
+    </a>
+    <span v-else :class="cn('text-gray-900 underline underline-offset-3px', props.class)">
+        <slot />
+    </span>
+</template>

package/components/tela/live-label.vue

@@ -0,0 +1,32 @@
+<template>
+    <div flex="~" rounded-6px items-center w-52px h-24px px-8px py-4px bg="gray-100">
+        <span body-12-semibold text="emerald-600" mr-4px>
+            Live
+        </span>
+        <div relative w-12px h-12px>
+            <div
+                w-12px h-12px absolute rounded-full bg="positive" flex items-center justify-center opacity-20
+                class="blink top-1/2 translate-y--1/2 left-1/2 translate-x--1/2"
+            />
+            <div
+                w-6px absolute h-6px rounded-full bg="positive"
+                class="top-1/2 translate-y--1/2 left-1/2 translate-x--1/2"
+            />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.blink {
+    animation: blink 0.8s linear infinite;
+}
+
+@keyframes blink {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 0.3;
+    }
+}
+</style>

package/components/tela/long-press-button.vue

@@ -0,0 +1,98 @@
+<!--
+    This a long pressable button, that fills a progress
+    fill until the action is executed
+-->
+<script lang="ts" setup>
+// Roz approves this ↓
+import type { ButtonProps } from '../tela/button/button.vue'
+
+const props = defineProps<ButtonProps & {
+    duration: number
+}>()
+const emit = defineEmits(['success'])
+
+const element = ref<HTMLElement>()
+const progress = ref(0)
+onLongPress(element, () => {
+    if (props.loading)
+        return
+
+    emit('success')
+    setTimeout(() => {
+        progress.value = 0
+    }, 100)
+}, { delay: props.duration, modifiers: { stop: true } })
+
+function onMouseDown(e: Event) {
+    if (props.loading)
+        return
+
+    progress.value = 100
+    e.preventDefault()
+}
+
+function onMouseUp(e: Event) {
+    if (props.loading)
+        return
+
+    progress.value = 0
+    e.preventDefault()
+}
+
+const transitionStyle = computed(() => {
+    return {
+        'transition-duration': `${progress.value ? props.duration : 200}ms`,
+        'transition-timing-function': 'cubic-bezier(0,-0.04, 0.28, 0.94)',
+    }
+})
+
+const buttonProps = computed(() => {
+    const { duration, ...resolvedProps } = props
+    return resolvedProps as ButtonProps
+})
+</script>
+
+<template>
+    <TelaButton
+        ref="element"
+        :style="{
+            ...transitionStyle,
+        }"
+        relative
+        z-2
+        overflow-hidden
+        v-bind="buttonProps"
+        rounded
+        @mousedown.stop="onMouseDown"
+        @mouseup.stop="onMouseUp"
+        @mouseleave.stop="onMouseUp"
+        @touchstart.stop.passive="onMouseDown"
+        @touchend.stop="onMouseUp"
+    >
+        <div
+            absolute top-0 bottom-0 left-0 transition-all
+            class="bg-#CCF0DF"
+            :style="{
+                width: `${loading ? 100 : progress}%`,
+                ...transitionStyle,
+            }"
+        />
+
+        <template #leading>
+            <TelaIcon v-if="loading" name="i-ph-circle-notch" relative z-1 animate-spin />
+            <TelaIcon v-else-if="icon" :name="icon" relative z-1 />
+        </template>
+
+        <span v-if="$slots.default" relative z-1 body-12-semibold text="gray-900" tracking-tight>
+            <slot />
+        </span>
+    </TelaButton>
+</template>
+
+<style scoped>
+button {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+}
+</style>../../../application

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

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import type { MenubarContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import {
+    MenubarContent,
+    MenubarPortal,
+    useForwardProps,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+    defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),
+    {
+        align: 'start',
+        alignOffset: 0,
+        sideOffset: 8,
+    },
+)
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <MenubarPortal>
+        <MenubarContent
+            v-bind="forwardedProps"
+            :class="
+                cn(
+                    'MenubarContent z-50 min-w-60 overflow-hidden rounded-2xl border-[0.5px] border-gray-300 bg-white-1000 p-1 shadow-sm',
+                    props.class,
+                )
+            "
+        >
+            <slot />
+        </MenubarContent>
+    </MenubarPortal>
+</template>
+
+<style>
+.MenubarContent {
+  transform-origin: var(--reka-menubar-content-transform-origin);
+
+  &[data-state="open"] {
+     animation: slideDownAndFade 0.12s ease-out forwards;
+  }
+
+  &[data-state="closed"] {
+     animation: slideUpAndFade 0.12s ease-out forwards;
+     animation-delay: 0s;
+  }
+}
+
+@keyframes slideDownAndFade {
+    from {
+        opacity: 0;
+        transform: translateY(2px) scale(0.97);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes slideUpAndFade {
+    from {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+    to {
+        opacity: 0;
+        transform: translateY(-2px) scale(0.97);
+    }
+}
+</style>

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

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { MenubarItemEmits, MenubarItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import {
+    MenubarItem,
+
+    useForwardPropsEmits,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const emits = defineEmits<MenubarItemEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <MenubarItem
+        v-bind="forwarded"
+        :class="cn(
+            'relative flex cursor-pointer select-none items-center rounded-xl px-3 py-1.5 text-body-14-medium font-460 outline-none focus:bg-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-40',
+            inset && 'pl-8',
+            props.class,
+        )"
+    >
+        <slot />
+    </MenubarItem>
+</template>