@meistrari/tela-build 1.0.0

package/components/tela/disclaimer/disclaimer.mdx

@@ -0,0 +1,238 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as DisclaimerStories from './disclaimer.stories.ts';
+
+<Meta of={DisclaimerStories} />
+
+# TelaDisclaimer
+
+A disclaimer component that displays important notices, warnings, or information to users. Supports auto-hide functionality, custom icons, close buttons, and visibility control. Useful for displaying temporary notices, privacy information, or important alerts that need user attention.
+
+## Examples
+
+### With Auto-Hide
+
+<Canvas of={DisclaimerStories.WithAutoHideDemo} />
+
+### Without Auto-Hide
+
+<Canvas of={DisclaimerStories.WithoutAutoHide} />
+
+### Without Close Button
+
+<Canvas of={DisclaimerStories.WithoutCloseButton} />
+
+### Different Icons
+
+<Canvas of={DisclaimerStories.DifferentIcons} />
+
+### Interactive with Control
+
+<Canvas of={DisclaimerStories.InteractiveWithCloseHandling} />
+
+### Basic Usage
+
+```vue
+<TelaDisclaimer
+  icon="i-ph-info"
+  title="Important Notice"
+  description="Please read this important information."
+  @close="handleClose"
+/>
+```
+
+### With Auto-Hide Code
+
+```vue
+<TelaDisclaimer
+  title="This will auto-hide in 5 seconds"
+  description="Watch this disappear automatically"
+  :auto-hide-delay="5000"
+  @close="onClose"
+/>
+```
+
+### Without Auto-Hide Code
+
+```vue
+<TelaDisclaimer
+  title="Persistent Notice"
+  description="This will not auto-hide"
+  :auto-hide="false"
+  icon="i-ph-warning"
+/>
+```
+
+### Without Close Button Code
+
+```vue
+<TelaDisclaimer
+  title="No Close Button"
+  description="Auto-hide only"
+  :show-close-button="false"
+  :auto-hide-delay="3000"
+/>
+```
+
+### Different Icons Code
+
+```vue
+<!-- Info -->
+<TelaDisclaimer
+  icon="i-ph-info"
+  title="Information"
+  description="Helpful information for users"
+/>
+
+<!-- Warning -->
+<TelaDisclaimer
+  icon="i-ph-warning"
+  title="Warning"
+  description="Please be aware of this"
+/>
+
+<!-- Clock -->
+<TelaDisclaimer
+  icon="i-ph-clock-countdown"
+  title="Time-sensitive"
+  description="Content expires in 24 hours"
+/>
+
+<!-- Shield -->
+<TelaDisclaimer
+  icon="i-ph-shield-check"
+  title="Privacy Protected"
+  description="Your data is automatically deleted"
+/>
+```
+
+### Privacy Notice
+
+```vue
+<TelaDisclaimer
+  icon="i-ph-lock"
+  title="Privacy Notice"
+  description="All data is encrypted and automatically deleted after 24 hours for your privacy."
+  :auto-hide="false"
+/>
+```
+
+### Expiration Notice
+
+```vue
+<TelaDisclaimer
+  icon="i-ph-clock-countdown"
+  title="Content Expires"
+  description="This content will be automatically deleted in 24 hours."
+  :auto-hide-delay="86400000"
+  @close="onExpire"
+/>
+<!-- 24 hours = 86400000 milliseconds -->
+```
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const isVisible = ref(true)
+
+const handleClose = () => {
+  console.log('Disclaimer closed')
+  // Handle close event
+}
+
+const showAgain = () => {
+  isVisible.value = true
+}
+</script>
+
+<template>
+  <div>
+    <TelaDisclaimer
+      v-if="isVisible"
+      title="Controlled Notice"
+      description="This disclaimer's visibility is controlled externally"
+      :visible="isVisible"
+      @close="handleClose"
+    />
+    <button v-else @click="showAgain">
+      Show Again
+    </button>
+  </div>
+</template>
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+type DisclaimerProps = {
+  icon?: string
+  title?: string
+  description?: string
+  autoHide?: boolean
+  autoHideDelay?: number
+  showCloseButton?: boolean
+  visible?: boolean
+}
+```
+
+## Events
+
+- `close` - Emitted when disclaimer is closed (via button or auto-hide)
+
+## Features
+
+- **Auto-Hide**: Automatically hide after delay
+- **Close Button**: Optional close button
+- **Custom Icons**: Use any icon
+- **Custom Text**: Title and description
+- **Visibility Control**: Control visibility externally
+- **Event Handling**: React to close events
+- **Flexible Layout**: Responsive design
+
+## Auto-Hide Delays
+
+Common delay durations:
+- 3 seconds: 3000ms - Quick notices
+- 5 seconds: 5000ms - Standard notices
+- 10 seconds: 10000ms - Important notices
+- 30 seconds: 30000ms - Critical notices
+- 24 hours: 86400000ms - Expiration notices
+
+## Icon Types
+
+Common use cases:
+- **i-ph-info**: General information
+- **i-ph-warning**: Warnings
+- **i-ph-clock-countdown**: Time-sensitive content
+- **i-ph-shield-check**: Privacy/security
+- **i-ph-lock**: Data protection
+- **i-ph-trash**: Auto-deletion
+
+## Use Cases
+
+- **Privacy Notices**: Inform about data handling
+- **Expiration Warnings**: Notify about content expiration
+- **Terms Updates**: Alert about policy changes
+- **Cookie Consent**: GDPR compliance
+- **Beta Features**: Warn about experimental features
+- **Maintenance**: Notify about scheduled maintenance
+
+## Best Practices
+
+1. **Be Clear**: Use concise, understandable language
+2. **Set Appropriate Delays**: Match delay to importance
+3. **Provide Close Option**: Let users dismiss notices
+4. **Use Meaningful Icons**: Icons should match the message
+5. **Don't Overuse**: Too many disclaimers are ignored
+6. **Respect User Choice**: Remember if user closed it
+
+## Accessibility
+
+- Semantic HTML structure
+- ARIA role for alert/status
+- Keyboard accessible close button
+- Screen reader announcements
+- Focus management
+- Sufficient color contrast

package/components/tela/disclaimer/disclaimer.stories.ts

@@ -0,0 +1,196 @@
+import type { Meta, StoryObj } from '@storybook-vue/vue3'
+import { ref } from 'vue'
+
+import Disclaimer from './disclaimer.vue'
+
+const meta = {
+    title: 'Core/Disclaimer',
+    component: Disclaimer,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A disclaimer component that displays important notices, warnings, or information to users. Supports auto-hide functionality, custom icons, close buttons, and visibility control. Useful for displaying temporary notices, privacy information, or important alerts that need user attention.',
+            },
+        },
+    },
+    argTypes: {
+        icon: {
+            control: 'text',
+            description: 'Icon name to display (e.g., i-ph-clock, i-ph-info)',
+        },
+        title: {
+            control: 'text',
+            description: 'Bold title text',
+        },
+        description: {
+            control: 'text',
+            description: 'Description text',
+        },
+        autoHide: {
+            control: 'boolean',
+            description: 'Enable auto-hide functionality',
+        },
+        autoHideDelay: {
+            control: 'number',
+            description: 'Delay in milliseconds before auto-hiding',
+        },
+        showCloseButton: {
+            control: 'boolean',
+            description: 'Show the close button',
+        },
+    },
+    args: {
+        icon: 'i-ph-clock-countdown',
+        title: 'Content expires every 24 hours',
+        description: 'After this period, all files and tasks are automatically deleted for privacy compliance.',
+        autoHide: true,
+        autoHideDelay: 86400000,
+        showCloseButton: true,
+    },
+} satisfies Meta<typeof Disclaimer>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    render: args => ({
+        components: { Disclaimer },
+        setup() {
+            return { args }
+        },
+        template: `<Disclaimer v-bind="args" @close="console.log('Disclaimer closed')" />`,
+    }),
+}
+
+export const WithAutoHideDemo: Story = {
+    args: {
+        title: 'This will auto-hide in 5 seconds',
+        description: 'Watch this disclaimer disappear automatically after the timeout.',
+        autoHideDelay: 5000,
+    },
+    render: args => ({
+        components: { Disclaimer },
+        setup() {
+            return { args }
+        },
+        template: `<Disclaimer v-bind="args" @close="console.log('Auto-hide triggered')" />`,
+    }),
+}
+
+export const WithoutAutoHide: Story = {
+    args: {
+        title: 'Persistent Disclaimer',
+        description: 'This disclaimer will not auto-hide and must be closed manually.',
+        autoHide: false,
+        icon: 'i-ph-info',
+    },
+    render: args => ({
+        components: { Disclaimer },
+        setup() {
+            return { args }
+        },
+        template: `
+          <div style="padding: 40px;">
+            <Disclaimer v-bind="args" @close="console.log('Manually closed')" />
+          </div>`,
+    }),
+}
+
+export const WithoutCloseButton: Story = {
+    args: {
+        title: 'No Close Button',
+        description: 'This disclaimer has no close button and will auto-hide after the delay.',
+        showCloseButton: false,
+        icon: 'i-ph-warning',
+    },
+    render: args => ({
+        components: { Disclaimer },
+        setup() {
+            return { args }
+        },
+        template: `
+          <div style="padding: 40px;">
+            <Disclaimer v-bind="args" @close="console.log('Auto-hide only')" />
+          </div>`,
+    }),
+}
+
+export const DifferentIcons: Story = {
+    render: () => ({
+        components: { Disclaimer },
+        template: `
+          <div style="padding: 40px; display: flex; flex-direction: column; gap: 16px;">
+            <Disclaimer 
+              icon="i-ph-clock-countdown"
+              title="Time-sensitive content"
+              description="This content expires after 24 hours."
+              :auto-hide="false"
+            />
+            <Disclaimer 
+              icon="i-ph-info"
+              title="Information"
+              description="Important information for users."
+              :auto-hide="false"
+            />
+            <Disclaimer 
+              icon="i-ph-warning"
+              title="Warning"
+              description="Please be aware of this important notice."
+              :auto-hide="false"
+            />
+            <Disclaimer 
+              icon="i-ph-shield-check"
+              title="Privacy Protected"
+              description="Your data is automatically deleted for privacy."
+              :auto-hide="false"
+            />
+          </div>`,
+    }),
+}
+
+export const InteractiveWithCloseHandling: Story = {
+    render: () => ({
+        components: { Disclaimer },
+        setup() {
+            const disclaimerVisible = ref(true)
+            const closeCount = ref(0)
+
+            const handleClose = () => {
+                closeCount.value++
+                console.warn(`Disclaimer closed ${closeCount.value} time(s)`)
+            }
+
+            const reset = () => {
+                disclaimerVisible.value = false
+                setTimeout(() => {
+                    disclaimerVisible.value = true
+                }, 100)
+            }
+
+            return { disclaimerVisible, closeCount, handleClose, reset }
+        },
+        template: `
+          <div style="padding: 40px;">
+            <div style="margin-bottom: 20px;">
+              <button 
+                @click="reset" 
+                style="padding: 8px 16px; background: #333; color: white; border: none; border-radius: 6px; cursor: pointer;"
+              >
+                Reset Disclaimer
+              </button>
+              <span style="margin-left: 16px; color: #666;">
+                Close count: {{ closeCount }}
+              </span>
+            </div>
+            <Disclaimer 
+              :visible="disclaimerVisible"
+              title="Interactive Disclaimer with External Control"
+              description="This disclaimer's visibility is controlled externally via the visible prop."
+              :auto-hide-delay="10000"
+              @close="handleClose"
+            />
+          </div>`,
+    }),
+}

package/components/tela/disclaimer/disclaimer.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+
+interface Props {
+    icon?: string
+    iconStyle?: string
+    title?: string
+    description?: string
+    autoHide?: boolean
+    autoHideDelay?: number // in milliseconds
+    showCloseButton?: boolean
+    visible?: Ref<boolean>
+    backgroundColor?: string
+    actionUrl?: string
+    actionText?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    icon: 'i-ph-clock-countdown',
+    iconStyle: 'color: var(--gray-600, #767E86);',
+    autoHide: false,
+    autoHideDelay: 0,
+    showCloseButton: true,
+    backgroundColor: 'bg-gray-100',
+})
+
+const emit = defineEmits<{
+    close: []
+}>()
+
+// Use provided ref or create a local one
+const localVisible = ref(true)
+const isVisible = computed(() => props.visible ?? localVisible)
+
+function handleClose() {
+    isVisible.value.value = false
+    emit('close')
+}
+
+function handleAction() {
+    if (props.actionUrl) {
+        window.open(props.actionUrl, '_blank')
+    }
+}
+
+onMounted(() => {
+    if (props.autoHide && props.autoHideDelay > 0) {
+        setTimeout(() => {
+            if (isVisible.value.value) {
+                handleClose()
+            }
+        }, props.autoHideDelay)
+    }
+})
+</script>
+
+<template>
+    <Transition name="disclaimer-fade">
+        <div
+            v-if="isVisible.value"
+            flex items-center gap-12px
+            p-12px rounded-10px shadow-subtle
+            transition ease-in-out relative
+            :class="backgroundColor"
+        >
+            <TelaIcon
+                v-if="icon"
+                :name="icon"
+                size="20px"
+                flex-shrink-0
+                :style="iconStyle"
+            />
+
+            <div flex-1 flex items-center gap-4px>
+                <span text-gray-700 font-semibold text-14px leading-20px>
+                    {{ title }}
+                </span>
+                <span text-gray-600 text-14px leading-20px>
+                    {{ description }}
+                </span>
+            </div>
+
+            <TelaButton
+                v-if="actionUrl && actionText"
+                variant="ghost"
+                class="h-20px"
+                @click="handleAction"
+            >
+                {{ actionText }}
+            </TelaButton>
+
+            <button
+                v-if="showCloseButton"
+                p-0
+                m-0 border-none bg-transparent cursor-pointer flex
+                items-center justify-center hover:opacity-70
+                outline-none focus:ring-1 focus:ring-cyan-600 rounded-4px
+                transition-opacity @click="handleClose"
+            >
+                <TelaIcon
+                    name="i-ph-x"
+                    size="20px"
+                    text-gray-600
+                />
+            </button>
+        </div>
+    </Transition>
+</template>
+
+<style scoped>
+.disclaimer-fade-enter-active,
+.disclaimer-fade-leave-active {
+    transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.disclaimer-fade-enter-from {
+    opacity: 0;
+    transform: translateY(-8px);
+}
+
+.disclaimer-fade-leave-to {
+    opacity: 0;
+    transform: translateY(-8px);
+}
+</style>

package/components/tela/dropdown-menu/DropdownMenu.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { VisuallyHidden } from 'radix-vue'
+import DropdownMenuRoot from './DropdownMenuRoot.vue'
+import DropdownMenuContent from './DropdownMenuContent.vue'
+import DropdownMenuGroup from './DropdownMenuGroup.vue'
+import DropdownMenuItem from './DropdownMenuItem.vue'
+import DropdownMenuLabel from './DropdownMenuLabel.vue'
+import DropdownMenuTrigger from './DropdownMenuTrigger.vue'
+import type { TooltipProps } from '../tooltip/tooltip.vue'
+
+const props = withDefaults(defineProps<{
+    items: {
+        label: string
+        icon?: string
+        iconSide?: 'left' | 'right'
+        group?: string
+        color?: 'positive' | 'caution' | 'negative'
+        click: () => void
+        disabled?: boolean
+        checkbox?: {
+            modelValue: boolean
+            onChange: (value: boolean) => void
+        }
+        tooltip?: string | TooltipProps
+    }[]
+    sideOffset?: number
+    allowSearch?: boolean
+    searchPlaceholder?: string
+    shouldBeModal?: boolean
+    contentClass?: string
+    align?: 'start' | 'end' | 'center'
+}>(), {
+    align: 'start',
+    iconSide: 'left',
+})
+
+defineEmits(['click'])
+
+const search = ref('')
+const searchInputEl = ref<HTMLInputElement>()
+const isStorybook = Boolean(import.meta.env.STORYBOOK)
+
+const filteredItems = computed(() => search.value ? props.items.filter(item => item.label.toLowerCase().includes(search.value.toLowerCase())) : props.items)
+const groups = computed(() => filteredItems.value.reduce((acc, item) => {
+    if (item.group) {
+        acc[item.group] = [...(acc[item.group] || []), item]
+    }
+    else {
+        acc.__default = [...(acc.__default || []), item]
+    }
+    return acc
+}, {} as Record<string, typeof props.items[number][]>))
+
+function onToggle(open: boolean) {
+    if (!open)
+        return
+
+    setTimeout(() => {
+        if (searchInputEl.value) {
+            searchInputEl.value.focus()
+        }
+    }, 50)
+}
+</script>
+
+<template>
+    <div data-allow-mismatch @click.stop>
+        <DropdownMenuRoot :modal="shouldBeModal" :default-open="isStorybook" @update:open="onToggle">
+            <DropdownMenuTrigger as-child class="data-[state=open]:bg-gray-100">
+                <slot />
+                <VisuallyHidden v-if="isStorybook" as-child>
+                    <button />
+                </VisuallyHidden>
+            </DropdownMenuTrigger>
+
+            <DropdownMenuContent
+                :align="align"
+                :side-offset="sideOffset"
+                :class="cn('min-w-128px! z-605!', contentClass)"
+            >
+                <div v-if="allowSearch" flex="~" items-center px-8px py-6px>
+                    <TelaIcon name="i-ph-magnifying-glass-bold" text-gray-800 mr-6px />
+                    <input
+                        ref="searchInputEl" v-model="search"
+                        :placeholder="searchPlaceholder ?? 'Search'"
+                        body-14-regular text-gray-900
+                        class="placeholder:text-13px! placeholder:text-gray-400 focus-visible:outline-none"
+                    >
+                </div>
+
+                <div v-if="filteredItems.length === 0" flex="~" items-center justify-center py-12px>
+                    <TelaIcon name="i-ph-info-bold" text-gray-400 size="sm" mr-8px />
+                    <span body-12-regular text-gray-400>
+                        No results
+                    </span>
+                </div>
+
+                <template v-else>
+                    <DropdownMenuGroup v-for="(group, groupName) in groups" :key="groupName">
+                        <DropdownMenuLabel v-if="groupName !== '__default'" body-12-semibold text-gray-600>
+                            {{ groupName }}
+                        </DropdownMenuLabel>
+                        <DropdownMenuItem
+                            v-for="item in group"
+                            :key="item.label"
+                            :disabled="item.disabled"
+                            :icon="item.icon"
+                            :icon-side="item.iconSide"
+                            :color="item.color"
+                            :checkbox="item.checkbox"
+                            :tooltip="item.tooltip"
+                            @click="item.click"
+                        >
+                            <span>{{ item.label }}</span>
+                        </DropdownMenuItem>
+                    </DropdownMenuGroup>
+                </template>
+            </DropdownMenuContent>
+        </DropdownMenuRoot>
+    </div>
+</template>