@meistrari/tela-build 1.0.0

package/components/tela/segment-toggle.stories.ts

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref, watch } from 'vue'
+
+import SegmentToggle from './segment-toggle.vue'
+
+const meta: Meta<typeof SegmentToggle> = {
+    title: 'Core/SegmentToggle',
+    component: SegmentToggle,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A segment toggle component that displays multiple options as connected segments. Only one option can be selected at a time. Supports v-model binding, different sizes, and disabled states. Useful for mutually exclusive option selection with a modern segmented control interface.',
+            },
+        },
+    },
+    argTypes: {
+        modelValue: {
+            control: 'text',
+            description: 'The currently selected option value (v-model).',
+        },
+        options: {
+            control: 'object',
+            description: 'Array of toggle options. Each option should have a `value` and `label` property.',
+        },
+        size: {
+            control: 'select',
+            options: ['small', 'medium'],
+            description: 'Size of the segment toggle. Controls height and padding.',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disable the entire segment toggle, preventing user interaction.',
+        },
+        class: {
+            control: 'text',
+            description: 'Custom CSS classes to apply to the segment toggle container.',
+        },
+    },
+    args: {
+        options: [
+            { label: 'Left', value: 'left' },
+            { label: 'Center', value: 'center' },
+            { label: 'Right', value: 'right' },
+        ],
+        modelValue: 'left',
+        size: 'medium',
+        disabled: false,
+    },
+    render: (args) => {
+        return {
+            components: { SegmentToggle },
+            setup() {
+                const value = ref<string>(args.modelValue || '')
+
+                watch(
+                    () => args.modelValue,
+                    (val) => {
+                        value.value = val || ''
+                    },
+                )
+
+                return { args, value }
+            },
+            template: `
+                <div style="padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 16px;">
+                    <SegmentToggle
+                        v-model="value"
+                        :options="args.options"
+                        :size="args.size"
+                        :disabled="args.disabled"
+                        :class="args.class"
+                    />
+                    <div style="font-family: monospace; font-size: 12px;">Selected: {{ value }}</div>
+                </div>
+            `,
+        }
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const Small: Story = {
+    args: {
+        size: 'small',
+    },
+}
+
+export const Disabled: Story = {
+    args: {
+        disabled: true,
+    },
+}
+
+export const TwoOptions: Story = {
+    args: {
+        options: [
+            { label: 'On', value: 'on' },
+            { label: 'Off', value: 'off' },
+        ],
+        modelValue: 'on',
+    },
+}
+
+export const PreselectedMiddle: Story = {
+    args: {
+        modelValue: 'center',
+    },
+}

package/components/tela/segment-toggle.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+interface Option {
+    label: string
+    value: string
+}
+
+const props = withDefaults(defineProps<{
+    modelValue: string
+    options: Option[]
+    class?: string
+    buttonsClass?: string
+    size?: 'small' | 'medium'
+    disabled?: boolean
+}>(), {
+    size: 'medium',
+})
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: string): void
+}>()
+
+const uniqueId = `segment-toggle-${Math.random().toString(36)}`
+
+function selectTab(value: string) {
+    emit('update:modelValue', value)
+}
+</script>
+
+<template>
+    <div
+        rounded-full flex items-center gap-2px select-none p-2px min-w-68px bg-gray-100
+        :class="[
+            props.size === 'small' ? 'min-h-24px' : 'min-h-28px',
+            props.disabled && 'opacity-50 pointer-events-none cursor-not-allowed',
+            props.class,
+        ]"
+    >
+        <button
+            v-for="option in options"
+            :key="option.value"
+            type="button"
+            relative body-12-semibold rounded-full transition-all duration-200 flex items-center justify-center
+            :class="[
+                props.size === 'small' ? 'h-24px px-12px min-w-50px' : 'h-28px px-24px min-w-115px',
+                props.buttonsClass,
+            ]"
+            :disabled="props.disabled"
+            @click="selectTab(option.value)"
+        >
+            <span relative z-10 :class="modelValue === option.value ? 'text-gray-900' : 'text-gray-700'">{{ option.label }}</span>
+            <AnimatePresence mode="wait" :initial="false">
+                <Motion
+                    v-if="modelValue === option.value"
+                    aria-hidden="true"
+                    :layout-id="`${uniqueId}-active-tab`"
+                    absolute inset-0 bg-white shadow-tab rounded-inherit size-full
+                    class="z-0"
+                    :initial="{ opacity: 0 }"
+                    :animate="{ opacity: 1 }"
+                    :exit="{ opacity: 0 }"
+                    :transition="{ duration: 0.3, type: 'spring', bounce: 0 }"
+                />
+            </AnimatePresence>
+        </button>
+    </div>
+</template>

package/components/tela/select-menu/select-menu-content.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import {
+    SelectContent,
+    SelectViewport,
+    useForwardPropsEmits,
+    SelectPortal,
+
+} from 'reka-ui'
+import type { SelectContentEmits, SelectContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+
+import SelectMenuDownButton from './select-menu-down-button.vue'
+import SelectMenuUpButton from './select-menu-up-button.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = withDefaults(
+    defineProps<SelectContentProps & { class?: HTMLAttributes['class'], enablePortal?: boolean }>(),
+    {
+        position: 'popper',
+        enablePortal: false,
+    },
+)
+const emits = defineEmits<SelectContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <SelectPortal v-if="enablePortal">
+        <SelectContent
+            v-bind="{ ...forwarded, ...$attrs }"
+            :class="cn(
+                'SelectContent relative z-999 max-h-96 overflow-hidden rounded-[10px] border-[0.5px] border-gray-300 bg-white-1000',
+                props.class,
+            )"
+            :side-offset="4"
+            shadow="0 4px 16px 0 rgba(85, 91, 98, 0.14)"
+            avoid-collisions
+        >
+            <SelectMenuUpButton />
+            <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')">
+                <slot />
+            </SelectViewport>
+            <SelectMenuDownButton />
+        </SelectContent>
+    </SelectPortal>
+    <SelectContent
+        v-else
+        v-bind="{ ...forwarded, ...$attrs }"
+        :class="cn(
+            'SelectContent relative z-999 max-h-96 overflow-hidden rounded-[10px] border-[0.5px] border-gray-300 bg-white-1000',
+            props.class,
+        )"
+        :side-offset="4"
+        shadow="0 4px 16px 0 rgba(85, 91, 98, 0.14)"
+        avoid-collisions
+    >
+        <SelectMenuUpButton />
+        <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')">
+            <slot />
+        </SelectViewport>
+        <SelectMenuDownButton />
+    </SelectContent>
+</template>
+
+<style>
+.SelectContent {
+  transform-origin: var(--reka-select-content-transform-origin);
+
+  &[data-state="open"] {
+     animation: slideDownAndFade 0.12s ease-out;
+  }
+
+  &[data-state="closed"] {
+     animation: slideUpAndFade 0.12s ease-out;
+  }
+}
+
+@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: scale(0.97);
+    }
+}
+</style>

package/components/tela/select-menu/select-menu-down-button.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { SelectScrollDownButton, useForwardProps } from 'reka-ui'
+import type { SelectScrollDownButtonProps } from 'reka-ui'
+
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <SelectScrollDownButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+        <slot>
+            <TelaIcon name="i-ph-caret-down" text="16px" color="gray-400" />
+        </slot>
+    </SelectScrollDownButton>
+</template>

package/components/tela/select-menu/select-menu-group.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { SelectGroupProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { SelectGroup } from 'reka-ui'
+
+const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+    <SelectGroup :class="cn('w-full', props.class)" v-bind="delegatedProps">
+        <slot />
+    </SelectGroup>
+</template>

package/components/tela/select-menu/select-menu-item.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { SelectItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import {
+    SelectItem,
+    SelectItemIndicator,
+    SelectItemText,
+    useForwardProps,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <SelectItem
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'relative flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-[12px] px-[12px] py-[7px] text-body-14-medium font-460 outline-none focus:bg-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+                props.class,
+            )
+        "
+    >
+        <SelectItemText>
+            <slot />
+        </SelectItemText>
+
+        <span class="relative flex h-3.5 w-3.5 items-center justify-center">
+            <SelectItemIndicator>
+                <TelaIcon name="i-ph-check" size="14px" color="gray-500" />
+            </SelectItemIndicator>
+        </span>
+    </SelectItem>
+</template>

package/components/tela/select-menu/select-menu-root.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { SelectRoot, useForwardPropsEmits } from 'reka-ui'
+import type { SelectRootProps, SelectRootEmits } from 'reka-ui'
+
+const props = defineProps<SelectRootProps>()
+const emits = defineEmits<SelectRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+    <SelectRoot v-bind="forwarded">
+        <slot />
+    </SelectRoot>
+</template>

package/components/tela/select-menu/select-menu-trigger.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { SelectTriggerProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { SelectIcon, SelectTrigger, useForwardProps } from 'reka-ui'
+
+const props = withDefaults(
+    defineProps<SelectTriggerProps & { triggerIconSize?: string, class?: HTMLAttributes['class'] }>(),
+    {
+        triggerIconSize: '12px',
+    },
+)
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <SelectTrigger
+        v-bind="forwardedProps"
+        :class="cn(
+            'group flex h-32px w-full items-center gap-[12px] justify-between rounded-[10px] border-[0.5px] border-gray-300 bg-white-1000 pl-[12px] pr-[10px] py-[7px] text-body-14-semibold font-520 select-none text-start',
+            'data-[placeholder]:text-gray-900 data-[state=open]:text-gray-500 hover:bg-gray-100 data-[state=open]:bg-gray-100 focus-visible:outline-none [&>span]:truncate',
+            'focus-visible:ring-[0.5px] focus-visible:ring-cyan-600 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:border-gray-200 disabled:text-gray-400',
+            props.class,
+        )"
+    >
+        <slot />
+        <SelectIcon as-child>
+            <TelaIcon name="i-ph-caret-down" :size="props.triggerIconSize" color="gray-500" class="shrink-0 transition-all ease-out duration-150 group-data-[state=open]:rotate-180" />
+        </SelectIcon>
+    </SelectTrigger>
+</template>

package/components/tela/select-menu/select-menu-up-button.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { SelectScrollUpButton, useForwardProps } from 'reka-ui'
+import type { SelectScrollUpButtonProps } from 'reka-ui'
+
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <SelectScrollUpButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+        <slot>
+            <TelaIcon name="i-ph-caret-up" text="16px" color="gray-400" />
+        </slot>
+    </SelectScrollUpButton>
+</template>

package/components/tela/select-menu/select-menu-value.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { SelectValueProps } from 'reka-ui'
+import { SelectValue } from 'reka-ui'
+
+const props = defineProps<SelectValueProps>()
+</script>
+
+<template>
+    <SelectValue v-bind="props">
+        <slot />
+    </SelectValue>
+</template>

package/components/tela/select-menu/select-menu.mdx

@@ -0,0 +1,221 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as SelectMenuStories from './select-menu.stories.ts';
+
+<Meta of={SelectMenuStories} />
+
+# TelaSelectMenu
+
+A flexible select menu component built on reka-ui. Allows users to select a single option from a dropdown list. Supports icons, descriptions, tooltips, grouping, and custom styling.
+
+## Examples
+
+### Basic Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref('')
+const options = [
+  { value: 'option1', label: 'Option 1' },
+  { value: 'option2', label: 'Option 2' },
+  { value: 'option3', label: 'Option 3' }
+]
+</script>
+
+<template>
+  <TelaSelectMenu
+    v-model="selected"
+    :options="options"
+    placeholder="Select an option"
+  />
+</template>
+```
+
+### With Icons
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref('')
+const options = [
+  { value: 'user', label: 'User', icon: 'i-ph-user' },
+  { value: 'settings', label: 'Settings', icon: 'i-ph-gear' },
+  { value: 'notifications', label: 'Notifications', icon: 'i-ph-bell' }
+]
+</script>
+
+<template>
+  <TelaSelectMenu
+    v-model="selected"
+    :options="options"
+  />
+</template>
+```
+
+### With Descriptions
+
+```vue
+<TelaSelectMenu
+  v-model="selected"
+  :options="[
+    {
+      value: 'basic',
+      label: 'Basic Plan',
+      description: 'For individuals'
+    },
+    {
+      value: 'pro',
+      label: 'Pro Plan',
+      description: 'For small teams'
+    },
+    {
+      value: 'enterprise',
+      label: 'Enterprise',
+      description: 'For large organizations'
+    }
+  ]"
+/>
+```
+
+### With External Icons
+
+```vue
+<TelaSelectMenu
+  v-model="framework"
+  :options="[
+    {
+      value: 'vue',
+      label: 'Vue.js',
+      externalIconSrc: 'https://vuejs.org/logo.svg'
+    },
+    {
+      value: 'react',
+      label: 'React',
+      externalIconSrc: 'https://react.dev/logo.svg'
+    }
+  ]"
+/>
+```
+
+### Custom Trigger
+
+```vue
+<TelaSelectMenu v-model="selected" :options="options">
+  <template #trigger="{ currentOption }">
+    <button class="custom-trigger">
+      {{ currentOption?.label || 'Select' }}
+    </button>
+  </template>
+</TelaSelectMenu>
+```
+
+### Custom Styling
+
+```vue
+<TelaSelectMenu
+  v-model="selected"
+  :options="options"
+  trigger-class="w-300px"
+  content-class="max-h-400px"
+  item-class="py-3"
+/>
+```
+
+### With Icon Background
+
+```vue
+<TelaSelectMenu
+  v-model="selected"
+  :options="options"
+  :icon-with-background="{
+    size: 'md',
+    backgroundClass: 'bg-blue-100'
+  }"
+/>
+```
+
+### Disabled State
+
+```vue
+<TelaSelectMenu
+  v-model="selected"
+  :options="options"
+  disabled
+/>
+```
+
+## Props
+
+<ArgTypes of={SelectMenuStories} />
+
+```typescript
+type SelectMenuOption = {
+  value: string
+  label: string
+  description?: string
+  icon?: string | Component
+  externalIconSrc?: string
+  group?: string
+  tooltipContent?: Component
+}
+
+type SelectMenuProps = {
+  modelValue?: string
+  options: SelectMenuOption[]
+  triggerClass?: string
+  contentClass?: string
+  groupClass?: string
+  itemClass?: string
+  placeholder?: string
+  triggerIconSize?: string
+  disabled?: boolean
+  iconWithBackground?: {
+    size: 'xs' | 'sm' | 'md'
+    backgroundClass: string
+  }
+  enablePortal?: boolean
+}
+```
+
+## Slots
+
+- `trigger` - Custom trigger button (receives `currentOption` as slot prop)
+
+## Components
+
+The SelectMenu system consists of these sub-components:
+- `TelaSelectMenuRoot` - Root container component
+- `TelaSelectMenuTrigger` - Trigger button
+- `TelaSelectMenuValue` - Value display
+- `TelaSelectMenuContent` - Dropdown content container
+- `TelaSelectMenuGroup` - Group container for items
+- `TelaSelectMenuItem` - Individual selectable item
+
+## Features
+
+- **Single Selection**: Choose one option from a list
+- **Icons Support**: Use icon names or external image sources
+- **Descriptions**: Add helpful context to options
+- **Tooltips**: Show additional information on hover
+- **Grouping**: Organize options into groups
+- **Custom Styling**: Granular control over all parts
+- **Portal Rendering**: Control dropdown positioning
+- **Keyboard Navigation**: Full keyboard support
+- **Accessible**: Built on reka-ui with proper ARIA attributes
+
+## Events
+
+- `update:modelValue` - Emitted when selection changes with new value
+- `select` - Emitted when an option is selected with the value
+- `blur` - Emitted when select loses focus
+- `focus` - Emitted when select gains focus
+
+## Accessibility
+
+- Built on reka-ui primitives
+- Proper ARIA attributes
+- Keyboard navigation (Arrow keys, Enter, Escape)
+- Focus management
+- Screen reader friendly