@meistrari/tela-build 1.0.0

package/components/tela/checkbox/checkbox.stories.ts

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+
+import Checkbox from './checkbox.vue'
+import TelaCheckboxCard from './checkbox-card.vue'
+
+const meta: Meta<typeof Checkbox> = {
+    title: 'Core/Checkbox',
+    component: Checkbox,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A checkbox component built on reka-ui. Supports v-model binding, disabled states, and integrates with forms. Also includes a checkbox card variant for more complex use cases with labels and descriptions.',
+            },
+        },
+    },
+    argTypes: {
+        modelValue: {
+            control: 'boolean',
+            description: 'The checked state (v-model). True when checked, false when unchecked.',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disable the checkbox, preventing user interaction.',
+        },
+        required: {
+            control: 'boolean',
+            description: 'Mark the checkbox as required in forms.',
+        },
+        name: {
+            control: 'text',
+            description: 'Name attribute for form submission.',
+        },
+        value: {
+            control: 'text',
+            description: 'Value attribute for form submission when checked.',
+        },
+    },
+    args: {
+        disabled: false,
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    render: () => ({
+        components: { Checkbox },
+        template: `<Checkbox />`,
+    }),
+}
+
+export const WithLabel: Story = {
+    render: () => ({
+        components: { Checkbox },
+        setup() {
+            const checked = ref(false)
+            return { checked }
+        },
+        template: `
+            <div class="flex items-center gap-2">
+                <Checkbox id="checkbox" v-model="checked" />
+                <label for="checkbox">Make it available to all workspaces</label>
+            </div>
+        `,
+    }),
+}
+
+export const Disabled: Story = {
+    render: () => ({
+        components: { Checkbox },
+        template: `<Checkbox disabled />`,
+    }),
+}
+
+export const WithModelValue: Story = {
+    render: () => ({
+        components: { Checkbox },
+        setup() {
+            const checked = ref(false)
+            return { checked }
+        },
+        template: `
+            <div class="flex items-center gap-2">
+                <Checkbox v-model="checked" />
+                <label>Unchecked by default</label>
+            </div>
+        `,
+    }),
+}
+
+export const Card: Story = {
+    render: () => ({
+        components: { TelaCheckboxCard },
+        template: `
+            <div class="flex flex-col gap-4">
+                <TelaCheckboxCard label="Make available to all workspaces" description="All workspaces will have access to this template." />
+            </div>
+        `,
+    }),
+}

package/components/tela/checkbox/checkbox.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'
+import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'
+import { reactiveOmit } from '@vueuse/core'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<CheckboxRootEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <CheckboxRoot
+        v-bind="forwarded"
+        :class="cn(
+            'grid place-content-center peer w-16px h-16px shrink-0 rounded-5px border-[1px] border-gray-300 bg-white-1000 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-600',
+            'hover:data-[state=unchecked]:bg-gray-100 data-[state=checked]:border-transparent data-[state=checked]:bg-gray-950 hover:data-[state=checked]:bg-gray-700',
+            'disabled:cursor-not-allowed disabled:bg-gray-100 disabled:border-gray-200 disabled:data-[state=checked]:bg-gray-300',
+            props.class,
+        )"
+    >
+        <CheckboxIndicator class="grid place-content-center">
+            <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="shrink-0 stroke-3 stroke-white-1000 w-14px h-11px"
+            >
+                <Motion
+                    as="path"
+                    d="M5 13 L10 18 L20 6"
+                    :initial="{ scale: 0.85, pathLength: 0 }"
+                    :animate="{ scale: 1, pathLength: 1 }"
+                    :transition="{ duration: 0.2, ease: [0.645, 0.045, 0.355, 1] }"
+                />
+            </svg>
+        </CheckboxIndicator>
+    </CheckboxRoot>
+</template>

package/components/tela/collapsible/Collapsible.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'
+import { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<CollapsibleRootProps>()
+const emits = defineEmits<CollapsibleRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+    <CollapsibleRoot v-slot="{ open }" v-bind="forwarded">
+        <slot :open="open" />
+    </CollapsibleRoot>
+</template>

package/components/tela/collapsible/CollapsibleContent.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { CollapsibleContent } from 'radix-vue'
+import type { CollapsibleContentProps } from 'radix-vue'
+
+const props = defineProps<CollapsibleContentProps & { autoscroll?: boolean }>()
+
+const containerEl = ref()
+
+function handleOpenAutoComplete() {
+    if (props.autoscroll) {
+        nextTick(() => {
+            setTimeout(() => {
+                containerEl.value?.scrollIntoView({ behavior: 'smooth' })
+            }, 300)
+        })
+    }
+}
+</script>
+
+<template>
+    <CollapsibleContent
+        v-bind="props"
+        data-collapsible-content
+        class="overflow-hidden collapsible-content"
+        @animation-start="handleOpenAutoComplete"
+    >
+        <div ref="containerEl">
+            <slot />
+        </div>
+    </CollapsibleContent>
+</template>
+
+<style scoped>
+@keyframes slide-down {
+    from {
+        height: 0;
+    }
+    to {
+        height: var(--radix-collapsible-content-height);
+    }
+}
+
+@keyframes slide-up {
+    from {
+        height: var(--radix-collapsible-content-height);
+    }
+    to {
+        height: 0;
+    }
+}
+
+.collapsible-content[data-state='open'] {
+    animation: slide-down 270ms ease;
+}
+
+.collapsible-content[data-state='closed'] {
+    animation: slide-up 270ms ease;
+}
+</style>

package/components/tela/collapsible/CollapsibleTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { CollapsibleTrigger } from 'radix-vue'
+import type { CollapsibleTriggerProps } from 'radix-vue'
+
+const props = defineProps<CollapsibleTriggerProps>()
+</script>
+
+<template>
+    <CollapsibleTrigger v-bind="props">
+        <slot />
+    </CollapsibleTrigger>
+</template>

package/components/tela/collapsible/collapsible.mdx

@@ -0,0 +1,157 @@
+import { Meta, ArgTypes } from '@storybook/blocks';
+
+<Meta title="Utility/Collapsible" />
+
+# TelaCollapsible
+
+A set of composable collapsible components built on reka-ui. Provides full control over collapsible behavior with trigger and content components. Useful for building custom collapsible interfaces, accordions, and expandable sections.
+
+## Components
+
+- `TelaCollapsible` - Root container (or `TelaCollapsibleRoot`)
+- `TelaCollapsibleTrigger` - Trigger button
+- `TelaCollapsibleContent` - Collapsible content
+
+## Props
+
+```typescript
+type CollapsibleProps = {
+  defaultOpen?: boolean
+  open?: boolean
+  disabled?: boolean
+}
+```
+
+## Examples
+
+### Basic Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const isOpen = ref(false)
+</script>
+
+<template>
+  <TelaCollapsible v-model:open="isOpen">
+    <TelaCollapsibleTrigger as-child>
+      <TelaButton>
+        {{ isOpen ? 'Hide' : 'Show' }} Details
+      </TelaButton>
+    </TelaCollapsibleTrigger>
+    <TelaCollapsibleContent>
+      <div class="p-4">
+        Collapsible content goes here
+      </div>
+    </TelaCollapsibleContent>
+  </TelaCollapsible>
+</template>
+```
+
+### Custom Trigger
+
+```vue
+<TelaCollapsible>
+  <TelaCollapsibleTrigger class="flex items-center gap-2 p-2 hover:bg-gray-100 rounded">
+    <TelaIcon name="i-ph-caret-right" class="transition-transform data-[state=open]:rotate-90" />
+    <span>Click to expand</span>
+  </TelaCollapsibleTrigger>
+  <TelaCollapsibleContent>
+    <div class="ml-6 p-4">
+      Content inside collapsible
+    </div>
+  </TelaCollapsibleContent>
+</TelaCollapsible>
+```
+
+### Accordion (Multiple Collapsibles)
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const openItems = ref(['item-1'])
+</script>
+
+<template>
+  <div class="space-y-2">
+    <TelaCollapsible
+      v-for="item in ['item-1', 'item-2', 'item-3']"
+      :key="item"
+      :open="openItems.includes(item)"
+      @update:open="(open) => {
+        if (open) {
+          openItems = [item]
+        } else {
+          openItems = []
+        }
+      }"
+    >
+      <TelaCollapsibleTrigger class="w-full p-4 bg-gray-100 hover:bg-gray-200 rounded">
+        Section {{ item }}
+      </TelaCollapsibleTrigger>
+      <TelaCollapsibleContent>
+        <div class="p-4 border border-t-0 rounded-b">
+          Content for {{ item }}
+        </div>
+      </TelaCollapsibleContent>
+    </TelaCollapsible>
+  </div>
+</template>
+```
+
+### Default Open
+
+```vue
+<TelaCollapsible :default-open="true">
+  <TelaCollapsibleTrigger>
+    Toggle Section
+  </TelaCollapsibleTrigger>
+  <TelaCollapsibleContent>
+    This starts open by default
+  </TelaCollapsibleContent>
+</TelaCollapsible>
+```
+
+### Disabled
+
+```vue
+<TelaCollapsible disabled>
+  <TelaCollapsibleTrigger>
+    Cannot Open
+  </TelaCollapsibleTrigger>
+  <TelaCollapsibleContent>
+    This content is not accessible
+  </TelaCollapsibleContent>
+</TelaCollapsible>
+```
+
+## Features
+
+- **Composable**: Build custom collapsible UIs
+- **Controlled/Uncontrolled**: Use with or without v-model
+- **Default State**: Set initial open/closed state
+- **Disabled Support**: Prevent toggling
+- **Smooth Animations**: Built-in transitions
+- **Accessible**: Proper ARIA attributes
+- **Keyboard Support**: Space/Enter to toggle
+
+## Use Cases
+
+- **Accordions**: Multiple collapsible sections
+- **Details Panels**: Show/hide additional info
+- **Navigation**: Collapsible menu sections
+- **FAQ**: Questions with collapsible answers
+- **Forms**: Collapsible form sections
+- **Filters**: Expandable filter groups
+
+## Accessibility
+
+- Built on reka-ui primitives
+- Proper ARIA attributes (aria-expanded, aria-controls)
+- Keyboard navigation (Space/Enter)
+- Focus management
+- Screen reader support
+- Data attributes for styling states
+

package/components/tela/collapsible-section/collapsible-section.mdx

@@ -0,0 +1,180 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as CollapsibleSectionStories from './collapsible-section.stories.ts';
+
+<Meta of={CollapsibleSectionStories} />
+
+# TelaCollapsibleSection
+
+A collapsible section component that can expand and collapse to show/hide content. Supports different titles for open and closed states, icons, and default open state. Useful for organizing content into expandable sections, accordions, and detail views.
+
+## Examples
+
+### Basic Usage
+
+```vue
+<TelaCollapsibleSection
+  title="Hide Details"
+  title-closed="Show Details"
+  :default-open="true"
+>
+  <p>This content can be collapsed and expanded.</p>
+</TelaCollapsibleSection>
+```
+
+### With Different Titles
+
+```vue
+<TelaCollapsibleSection
+  title="Collapse"
+  title-closed="Expand"
+>
+  <div class="p-4">
+    <p>Content that can be toggled</p>
+  </div>
+</TelaCollapsibleSection>
+```
+
+### With Icon
+
+```vue
+<TelaCollapsibleSection
+  title="Close"
+  title-closed="Open"
+  icon="i-ph-info"
+>
+  <p>Collapsible content with an icon</p>
+</TelaCollapsibleSection>
+```
+
+### Default Closed
+
+```vue
+<TelaCollapsibleSection
+  title="Hide"
+  title-closed="Show More"
+  :default-open="false"
+>
+  <p>This starts collapsed</p>
+</TelaCollapsibleSection>
+```
+
+### FAQ Section
+
+```vue
+<div class="space-y-4">
+  <TelaCollapsibleSection
+    title="Hide Answer"
+    title-closed="What is your return policy?"
+    :default-open="false"
+  >
+    <p class="p-4 bg-gray-50 rounded">
+      We offer a 30-day return policy on all items...
+    </p>
+  </TelaCollapsibleSection>
+
+  <TelaCollapsibleSection
+    title="Hide Answer"
+    title-closed="How long does shipping take?"
+    :default-open="false"
+  >
+    <p class="p-4 bg-gray-50 rounded">
+      Standard shipping takes 5-7 business days...
+    </p>
+  </TelaCollapsibleSection>
+</div>
+```
+
+### Details Panel
+
+```vue
+<TelaCollapsibleSection
+  title="Hide Details"
+  title-closed="Show Full Details"
+  icon="i-ph-info-circle"
+  :default-open="true"
+>
+  <div class="p-4 space-y-3">
+    <div>
+      <strong>Name:</strong> Product Name
+    </div>
+    <div>
+      <strong>SKU:</strong> ABC-123
+    </div>
+    <div>
+      <strong>Price:</strong> $99.99
+    </div>
+    <div>
+      <strong>Description:</strong> Detailed product description...
+    </div>
+  </div>
+</TelaCollapsibleSection>
+```
+
+### Settings Section
+
+```vue
+<TelaCollapsibleSection
+  title="Hide Advanced Settings"
+  title-closed="Show Advanced Settings"
+  :default-open="false"
+>
+  <div class="p-4 space-y-3">
+    <TelaInput label="API Key" type="password" />
+    <TelaInput label="Webhook URL" />
+    <TelaCheckbox label="Enable notifications" />
+  </div>
+</TelaCollapsibleSection>
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+type CollapsibleSectionProps = {
+  title?: string
+  titleClosed?: string
+  icon?: string
+  defaultOpen?: boolean
+}
+```
+
+## Slots
+
+- `default` - Content that can be collapsed/expanded
+
+## Features
+
+- **Smooth Animation**: Content animates when expanding/collapsing
+- **Custom Titles**: Different titles for open and closed states
+- **Icon Support**: Add icons to the trigger button
+- **Default State**: Start open or closed
+- **Keyboard Accessible**: Can be toggled with keyboard
+- **Accessible**: Proper ARIA attributes
+
+## Use Cases
+
+- **FAQ Sections**: Questions with collapsible answers
+- **Details Panels**: Show/hide detailed information
+- **Settings**: Hide advanced options until needed
+- **Accordions**: Stack multiple collapsible sections
+- **Content Organization**: Manage long-form content
+- **Navigation**: Collapsible menu sections
+
+## Best Practices
+
+1. **Clear Titles**: Make it obvious what will expand
+2. **Consistent Pattern**: Use same title pattern across sections
+3. **Default State**: Choose wisely based on importance
+4. **Group Related**: Keep related content together
+5. **Don't Nest Deeply**: Avoid too many nested collapsibles
+6. **Provide Icons**: Visual indicators help understanding
+
+## Accessibility
+
+- Built on reka-ui Collapsible primitives
+- Proper ARIA attributes (aria-expanded, aria-controls)
+- Keyboard navigation (Space/Enter to toggle)
+- Focus management
+- Screen reader support
+- Smooth transitions for reduced motion preferences

package/components/tela/collapsible-section/collapsible-section.stories.ts

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import CollapsibleSection from './collapsible-section.vue'
+
+const meta: Meta<typeof CollapsibleSection> = {
+    title: 'Core/CollapsibleSection',
+    component: CollapsibleSection,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A collapsible section component that can expand and collapse to show/hide content. Supports different titles for open and closed states, icons, and default open state. Useful for organizing content into expandable sections, accordions, and detail views.',
+            },
+        },
+    },
+    argTypes: {
+        title: {
+            control: 'text',
+            description: 'Title text displayed when the section is open.',
+        },
+        titleClosed: {
+            control: 'text',
+            description: 'Title text displayed when the section is closed.',
+        },
+        icon: {
+            control: 'text',
+            description: 'Icon name or class to display in the trigger button.',
+        },
+        defaultOpen: {
+            control: 'boolean',
+            description: 'Whether the section should be open by default when the component mounts.',
+        },
+    },
+    args: {
+        title: 'Close',
+        titleClosed: 'Open',
+        defaultOpen: true,
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    render: args => ({
+        components: { CollapsibleSection },
+        setup() {
+            return { args }
+        },
+        template: `<CollapsibleSection v-bind="args"><p>This is the content inside the collapsible section.</p></CollapsibleSection>`,
+    }),
+}

package/components/tela/collapsible-section/collapsible-section.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+const props = defineProps<{
+    title?: string
+    titleClosed?: string
+    icon?: string
+    defaultOpen?: boolean
+}>()
+
+const emit = defineEmits(['close', 'open'])
+
+const isOpen = ref(props.defaultOpen)
+watch(isOpen, (newVal) => {
+    emit(newVal ? 'open' : 'close')
+})
+
+function close() {
+    isOpen.value = false
+}
+
+defineExpose({
+    close,
+})
+</script>
+
+<template>
+    <TelaCollapsible v-model:open="isOpen">
+        <slot name="trigger" :is-open="isOpen">
+            <TelaCollapsibleTrigger w-full relative flex justify-center focus:outline-none>
+                <button
+                    relative b="0.5px solid gray-300" flex items-center
+                    pr-8px pl-10px py-5px gap-4px rounded-6px
+                    transition ease
+                    justify-between
+                    hover="bg-gray-50"
+                    active="ring-2 ring-gray-200 b-gray-700 bg-#E8E8E9"
+                    shadow="[0px_1px_4px_0px_#677F9408]"
+                >
+                    <span body-12-semibold text-gray-700>
+                        {{ (!isOpen && titleClosed) || title }}
+                    </span>
+
+                    <TelaIcon name="i-ph-caret-down-bold" size="sm" text-gray-700 transition-all :class="isOpen && 'rotate-180'" />
+                </button>
+            </TelaCollapsibleTrigger>
+        </slot>
+
+        <TelaCollapsibleContent>
+            <slot />
+        </TelaCollapsibleContent>
+    </TelaCollapsible>
+</template>