@meistrari/tela-build 1.26.0 → 1.27.0

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

@@ -22,7 +22,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <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',
+            '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-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-40',
             inset && 'pl-8',
             props.class,
         )"

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

@@ -17,7 +17,7 @@ const forwardedProps = useForwardProps(delegatedProps)
         v-bind="forwardedProps"
         :class="
             cn(
-                'flex items-center gap-2 cursor-pointer select-none px-2 py-1.5 text-sm font-medium outline-none rounded-lg hover:bg-gray-200 data-[state=open]:bg-gray-200',
+                'flex items-center gap-2 cursor-pointer select-none px-2 py-1.5 text-sm font-medium outline-none rounded-lg hover:bg-lowered data-[state=open]:bg-lowered',
                 props.class,
             )
         "

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

@@ -0,0 +1,10 @@
+<template>
+    <div
+        flex flex-col h-full overflow-y-auto no-scrollbar
+        class="[mask-image:linear-gradient(to_bottom,transparent,black_20px,black_calc(100%_-_20px),transparent)]"
+    >
+        <nav flex flex-col items-center gap-14px h-full px-10px pt-12px mb-48px>
+            <slot />
+        </nav>
+    </div>
+</template>

package/components/tela/sidebar/sidebar-footer.vue

@@ -0,0 +1,5 @@
+<template>
+    <footer flex flex-col items-center justify-center gap-22px pb-24px>
+        <slot />
+    </footer>
+</template>

package/components/tela/sidebar/sidebar-header.vue

@@ -0,0 +1,5 @@
+<template>
+    <header sticky top-0 z-10 flex flex-col items-center justify-center gap-24px pt-24px pb-12px>
+        <slot />
+    </header>
+</template>

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

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { NuxtLink } from '#components'
+
+const props = defineProps<{
+    icon: string
+    label: string
+    to?: string
+    onClick?: () => void
+    isActive: boolean
+}>()
+
+const iconName = computed(() => props.isActive ? `${props.icon}-fill` : props.icon)
+</script>
+
+<template>
+    <component
+        :is="to ? NuxtLink : 'button'"
+        :to="to"
+        :type="!to ? 'button' : undefined"
+        class="group"
+        flex="~ col" items-center justify-center gap-2px outline-none
+        :data-active="isActive"
+        v-bind="!to && onClick ? { onClick } : {}"
+    >
+        <div relative size-40px flex items-center justify-center rounded-10px>
+            <TelaIcon
+                :name="iconName"
+                size="20px"
+                relative z-1
+                :color="isActive ? 'icon' : 'icon-tertiary duration-150 ease-out group-hover:icon group-focus-within:icon'"
+            />
+            <div
+                :class="cn(
+                    'absolute inset-0 size-full rounded-[14px] z-0 border-[0.5px] border-transparent',
+                    isActive ? 'bg-neutral-200 group-focus-within:border-strong' : 'bg scale-10 opacity-0 duration-150 ease-out origin-center group-hover:border-strong group-hover:scale-100 group-hover:opacity-100 group-focus-within:border-strong group-focus-within:scale-100 group-focus-within:opacity-100',
+                )"
+            />
+        </div>
+        <p
+            :class="cn(
+                'text-[11px] leading-[12px] -tracking-0.2px',
+                isActive ? 'text-primary font-550' : 'font-460 text-tertiary duration-150 ease-out group-hover:text-primary group-focus-within:text-primary',
+            )"
+        >
+            {{ label }}
+        </p>
+    </component>
+</template>

package/components/tela/sidebar/sidebar-logo.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { NuxtLink } from '#components'
+
+defineProps<{
+    src?: string
+    alt: string
+    to?: string
+}>()
+</script>
+
+<template>
+    <component
+        :is="to ? NuxtLink : 'div'"
+        :to="to"
+        class="rounded-12px overflow-hidden outline-none focus-within:ring-0.5px focus-within:ring-border-strong"
+    >
+        <img v-if="src" :src="src" :alt="alt" w-40px h-40px object-cover>
+        <TelaInitials v-else-if="alt" size="md" :word="alt" />
+        <div v-else w-40px h-40px bg-black />
+    </component>
+</template>

package/components/tela/sidebar/sidebar-user.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+defineProps<{
+    image?: string
+    name: string
+    email: string
+    actions: {
+        label: string
+        icon: string
+        color: 'positive' | 'caution' | 'negative'
+        onClick: () => void
+    }[]
+}>()
+</script>
+
+<template>
+    <TelaDropdownMenuRoot>
+        <TelaDropdownMenuTrigger as-child>
+            <button
+                :class="cn('group', image ? 'ring-transparent focus-within:ring-border-strong' : 'ring-border-strong focus-within:ring-border-accent')"
+                rounded-full overflow-hidden ring-0.5px
+            >
+                <img v-if="image" :src="image" :alt="name" w-32px h-32px object-cover>
+                <div v-else w-32px h-32px bg />
+            </button>
+        </TelaDropdownMenuTrigger>
+        <TelaDropdownMenuContent align="start" side="top" class="min-w-200px!">
+            <div px-12px py-8px>
+                <h5 heading-h5-semibold text-primary mb-2px>
+                    {{ name }}
+                </h5>
+                <p body-12-regular text-secondary>
+                    {{ email }}
+                </p>
+            </div>
+            <TelaDropdownMenuSeparator />
+            <TelaDropdownMenuItem
+                v-for="action in actions"
+                :key="action.label"
+                :icon="action.icon"
+                :color="action.color"
+                @click="action.onClick"
+            >
+                {{ action.label }}
+            </TelaDropdownMenuItem>
+        </TelaDropdownMenuContent>
+    </TelaDropdownMenuRoot>
+</template>

package/components/tela/sidebar/sidebar.mdx

@@ -0,0 +1,175 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as SidebarStories from './sidebar.stories.ts';
+
+<Meta of={SidebarStories} />
+
+# TelaSidebar
+
+A composable sidebar navigation system built from focused sub-components. Fixed 80px wide and full-height, designed for icon-based navigation with labels.
+
+## Examples
+
+### Full Sidebar
+
+```vue
+<TelaSidebar>
+    <TelaSidebarHeader>
+        <TelaSidebarLogo src="/tela-logo-black.svg" alt="Tela Logo" />
+    </TelaSidebarHeader>
+
+    <TelaSidebarContent>
+        <TelaSidebarItem
+            v-for="item in items"
+            :key="item.label"
+            :icon="item.icon"
+            :label="item.label"
+            :to="item.path"
+            :is-active="isItemActive(item)"
+            :on-click="item.onClick"
+        />
+    </TelaSidebarContent>
+
+    <TelaSidebarFooter>
+        <TelaSidebarItem
+            icon="i-ph-bell"
+            label="Activity"
+            :is-active="route.path === '/activity'"
+        />
+        <TelaSidebarUser
+            :image="user.image"
+            :name="user.name"
+            :email="user.email"
+            :actions="[
+                { label: 'Logout', icon: 'i-ph-sign-out', color: 'negative', onClick: handleLogout },
+            ]"
+        />
+    </TelaSidebarFooter>
+</TelaSidebar>
+```
+
+<Canvas of={SidebarStories.Default} />
+
+### Activity Active
+
+<Canvas of={SidebarStories.ActivityActive} />
+
+### No Active Item
+
+<Canvas of={SidebarStories.NoActiveItem} />
+
+### Individual Item States
+
+<Canvas of={SidebarStories.SingleItem} />
+
+## Components
+
+### `<TelaSidebar>`
+
+Root wrapper. Renders as an `<aside>` with fixed 80px width, full height, and a right border. Place `TelaSidebarHeader`, `TelaSidebarContent`, and `TelaSidebarFooter` as direct children.
+
+### `<TelaSidebarHeader>`
+
+Top section of the sidebar. Stacks children vertically with 24px gap and vertical padding. Use for logos or workspace switchers.
+
+### `<TelaSidebarLogo>`
+
+Displays a logo or fallback inside the header. When `src` is provided, renders an image. When only `alt` is provided, falls back to `TelaInitials`. If neither is set, renders a placeholder div.
+
+```typescript
+interface TelaSidebarLogoProps {
+    src?: string  // Image source URL or path — when provided, renders an <img>
+    alt: string   // Accessible alt text — used as the word for TelaInitials fallback
+    to?: string   // Optional link — wraps the content in a NuxtLink when provided
+}
+```
+
+### `<TelaSidebarContent>`
+
+Middle section that grows to fill available space. Scrollable with hidden scrollbar and a fade mask at the top and bottom edges for a smooth overflow effect. Place nav items directly as children — they stack vertically with 14px gap.
+
+### `<TelaSidebarItem>`
+
+An individual navigation item with an icon and label. Renders as a `NuxtLink` when `to` is provided, otherwise as a `<button>`.
+
+```typescript
+interface TelaSidebarItemProps {
+    icon: string          // Iconify class (e.g. "i-ph-house")
+    label: string         // Text label shown below the icon
+    isActive: boolean     // Highlights the item as the current route
+    to?: string           // Route path — renders as a link
+    onClick?: () => void  // Click handler when not using `to`
+}
+```
+
+<ArgTypes of={SidebarStories} />
+
+### `<TelaSidebarFooter>`
+
+Bottom section of the sidebar. Always contains `TelaSidebarUser` for account controls. Optionally add secondary `TelaSidebarItem` actions (e.g. activity, notifications) above it.
+
+Default — user only:
+
+```vue
+<TelaSidebarFooter>
+    <TelaSidebarUser
+        :avatar-url="user.avatarUrl"
+        :username="user.name"
+        :email="user.email"
+        :options="[
+            { label: 'Logout', icon: 'i-ph-sign-out', color: 'negative', onClick: handleLogout },
+        ]"
+    />
+</TelaSidebarFooter>
+```
+
+With secondary actions:
+
+```vue
+<TelaSidebarFooter>
+    <TelaSidebarItem
+        icon="i-ph-bell"
+        label="Activity"
+        :is-active="route.path === '/activity'"
+        to="/activity"
+    />
+    <TelaSidebarUser
+        :avatar-url="user.avatarUrl"
+        :username="user.name"
+        :email="user.email"
+        :options="[
+            { label: 'Logout', icon: 'i-ph-sign-out', color: 'negative', onClick: handleLogout },
+        ]"
+    />
+</TelaSidebarFooter>
+```
+
+### `<TelaSidebarUser>`
+
+User account button in the footer. Clicking opens a dropdown menu with the user's name, email, and configurable action items.
+
+```typescript
+interface TelaSidebarUserProps {
+    image?: string  // Optional — falls back to a placeholder if not provided
+    name: string
+    email: string
+    actions: {
+        label: string
+        icon: string
+        color: 'positive' | 'caution' | 'negative'
+        onClick: () => void
+    }[]
+}
+```
+
+Example:
+
+```vue
+<TelaSidebarUser
+    image="https://example.com/avatar.jpg"
+    name="Jane Doe"
+    email="jane@example.com"
+    :actions="[
+        { label: 'Logout', icon: 'i-ph-sign-out', color: 'negative', onClick: handleLogout },
+    ]"
+/>
+```

package/components/tela/sidebar/sidebar.stories.ts

@@ -0,0 +1,190 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import TelaSidebar from './sidebar.vue'
+import TelaSidebarHeader from './sidebar-header.vue'
+import TelaSidebarContent from './sidebar-content.vue'
+import TelaSidebarLogo from './sidebar-logo.vue'
+import TelaSidebarItem from './sidebar-item.vue'
+import TelaSidebarFooter from './sidebar-footer.vue'
+import TelaSidebarUser from './sidebar-user.vue'
+
+const meta: Meta<typeof TelaSidebar> = {
+    title: 'Patterns/Sidebar',
+    component: TelaSidebar,
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            description: {
+                component: 'A composable sidebar navigation system built from focused sub-components. Fixed 80px wide and full-height, designed for icon-based navigation with labels. Compose `TelaSidebarHeader`, `TelaSidebarContent`, and `TelaSidebarFooter` inside the root `TelaSidebar` to build the full layout.',
+            },
+        },
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof TelaSidebar>
+
+const navItems = [
+    { icon: 'i-ph-house', label: 'Home', path: '/' },
+    { icon: 'i-ph-graph', label: 'Workflows', path: '/workflows' },
+    { icon: 'i-ph-database', label: 'Data', path: '/data' },
+    { icon: 'i-ph-gear', label: 'Settings', path: '/settings' },
+]
+
+const userActions = [
+    { label: 'Logout', icon: 'i-ph-sign-out', color: 'negative' as const, onClick: () => {} },
+]
+
+const components = {
+    TelaSidebar,
+    TelaSidebarHeader,
+    TelaSidebarLogo,
+    TelaSidebarContent,
+    TelaSidebarItem,
+    TelaSidebarFooter,
+    TelaSidebarUser,
+}
+
+export const Default: Story = {
+    render: () => ({
+        components,
+        setup() {
+            const items = navItems
+            const activePath = '/workflows'
+            const isItemActive = (item: { path: string }) => activePath === item.path
+            return { items, isItemActive, userActions }
+        },
+        template: `
+            <TelaSidebar>
+                <TelaSidebarHeader>
+                    <TelaSidebarLogo src="/tela-logo-black.svg" alt="Tela Logo" />
+                </TelaSidebarHeader>
+
+                <TelaSidebarContent>
+                    <TelaSidebarItem
+                        v-for="item in items"
+                        :key="item.label"
+                        :icon="item.icon"
+                        :label="item.label"
+                        :to="item.path"
+                        :is-active="isItemActive(item)"
+                    />
+                    <TelaSidebarItem
+                        icon="i-ph-bell"
+                        label="Activity"
+                        :is-active="false"
+                    />
+                </TelaSidebarContent>
+
+                <TelaSidebarFooter>
+                    <TelaSidebarUser
+                        name="Username"
+                        email="user@example.com"
+                        :actions="userActions"
+                    />
+                </TelaSidebarFooter>
+            </TelaSidebar>
+        `,
+    }),
+}
+
+export const NoActiveItem: Story = {
+    render: () => ({
+        components,
+        setup() {
+            return { items: navItems, userActions }
+        },
+        template: `
+            <TelaSidebar>
+                <TelaSidebarHeader>
+                    <TelaSidebarLogo src="/tela-logo-black.svg" alt="Tela Logo" />
+                </TelaSidebarHeader>
+
+                <TelaSidebarContent>
+                    <TelaSidebarItem
+                        v-for="item in items"
+                        :key="item.label"
+                        :icon="item.icon"
+                        :label="item.label"
+                        :to="item.path"
+                        :is-active="false"
+                    />
+                    <TelaSidebarItem
+                        icon="i-ph-bell"
+                        label="Activity"
+                        :is-active="false"
+                    />
+                </TelaSidebarContent>
+
+                <TelaSidebarFooter>
+                    <TelaSidebarUser
+                        name="Username"
+                        email="user@example.com"
+                        :actions="userActions"
+                    />
+                </TelaSidebarFooter>
+            </TelaSidebar>
+        `,
+    }),
+}
+
+export const ActivityActive: Story = {
+    render: () => ({
+        components,
+        setup() {
+            return { items: navItems, userActions }
+        },
+        template: `
+            <TelaSidebar>
+                <TelaSidebarHeader>
+                    <TelaSidebarLogo src="/tela-logo-black.svg" alt="Tela Logo" />
+                </TelaSidebarHeader>
+
+                <TelaSidebarContent>
+                    <TelaSidebarItem
+                        v-for="item in items"
+                        :key="item.label"
+                        :icon="item.icon"
+                        :label="item.label"
+                        :to="item.path"
+                        :is-active="false"
+                    />
+                    <TelaSidebarItem
+                        icon="i-ph-bell"
+                        label="Activity"
+                        :is-active="true"
+                    />
+                </TelaSidebarContent>
+
+                <TelaSidebarFooter>
+                    <TelaSidebarUser
+                        name="Username"
+                        email="user@example.com"
+                        :actions="userActions"
+                    />
+                </TelaSidebarFooter>
+            </TelaSidebar>
+        `,
+    }),
+}
+
+export const SingleItem: Story = {
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                story: 'Individual `TelaSidebarItem` in active and inactive states.',
+            },
+        },
+    },
+    render: () => ({
+        components: { TelaSidebarItem },
+        template: `
+            <div style="display: flex; gap: 24px; align-items: center;">
+                <TelaSidebarItem icon="i-ph-house" label="Home" :is-active="false" />
+                <TelaSidebarItem icon="i-ph-graph" label="Workflows" :is-active="true" />
+                <TelaSidebarItem icon="i-ph-bell" label="Activity" :is-active="false" />
+            </div>
+        `,
+    }),
+}

package/components/tela/sidebar/sidebar.vue

@@ -0,0 +1,5 @@
+<template>
+    <aside flex flex-col items-center w-80px h-screen bg border-r-0.5px border>
+        <slot />
+    </aside>
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meistrari/tela-build",
-  "version": "1.26.0",
+  "version": "1.27.0",
   "type": "module",
   "files": [
     "app.config.ts",

package/unocss.config.ts

@@ -1,8 +1,19 @@
 import transformerDirectives from '@unocss/transformer-directives'
 import { defineConfig, toEscapedSelector } from 'unocss'
+import type { Extractor } from 'unocss'
 import { DT } from './utils/design-tokens'
 
+/* Enables fill variants for Phosphor icons used as a dynamic suffix (e.g. `${icon}-fill`)
+* in components, which UnoCSS can't detect through static scanning */
+const phosphorFillExtractor: Extractor = {
+    name: 'phosphor-fill-icons',
+    extract: ({ code }) => new Set(
+        [...code.matchAll(/['"`](i-ph-[\w-]+)['"`]/g)].map(([, icon]) => `${icon}-fill`),
+    ),
+}
+
 export default defineConfig({
+    extractors: [phosphorFillExtractor],
     theme: {
         ...DT,
         animation: {