@poppy-ui/vue 0.0.0-dev.36.93ba5b2

package/src/components/display/accordion/AccordionItem.vue

@@ -0,0 +1,111 @@
+<script lang="ts">
+import { useComponentConfig } from '@/composables/use-component-config'
+import { ChevronDownIcon, PlusIcon } from '@lucide/vue'
+import { computed, inject } from 'vue'
+import { ACCORDION_CONTEXT_KEY } from './accordion.context'
+import { ACCORDION_ITEM_CONFIG } from './accordion-item.context'
+import type { AccordionItemProps } from './accordion-item.props'
+</script>
+
+<script setup lang="ts">
+
+const props = defineProps<AccordionItemProps>()
+const config = useComponentConfig(ACCORDION_ITEM_CONFIG, props, {
+  icon: 'arrow',
+})
+
+const emit = defineEmits<{
+  open: []
+  close: []
+  toggle: [isOpen: boolean]
+}>()
+
+const ctx = inject(ACCORDION_CONTEXT_KEY, null)
+const isOpen = computed(() => ctx?.isOpen(props.name) ?? false)
+
+function toggle() {
+  ctx?.toggle(props.name)
+  const next = !isOpen.value
+
+  emit('toggle', next)
+  next ? emit('open') : emit('close')
+}
+
+function open() {
+  if (!isOpen.value) {
+    toggle()
+  }
+}
+
+function close() {
+  if (isOpen.value) {
+    toggle()
+  }
+}
+
+function requestFrame(callback: FrameRequestCallback) {
+  requestAnimationFrame(callback)
+}
+
+defineExpose({
+  open,
+  close,
+  toggle,
+  isOpen,
+})
+</script>
+
+<template>
+  <div class="rounded-box border border-base-content/10 overflow-hidden">
+
+    <!-- Header -->
+    <div
+      class="flex items-center justify-between gap-3 px-4 py-3 cursor-pointer select-none bg-base-200 hover:bg-base-300 transition-colors"
+      @click="toggle"
+    >
+      <div class="flex-1 min-w-0">
+        <slot name="title" :is-open="isOpen" />
+      </div>
+
+      <!-- Icon slot with fallback -->
+      <slot name="icon" :is-open="isOpen">
+        <PlusIcon
+          v-if="config.icon === 'plus'"
+          class="size-4 opacity-50 transition-transform shrink-0"
+          :class="isOpen && 'rotate-45'"
+        />
+        <ChevronDownIcon
+          v-else
+          class="size-4 opacity-50 transition-transform shrink-0"
+          :class="isOpen && 'rotate-180'"
+        />
+      </slot>
+    </div>
+
+    <!-- Content -->
+    <Transition
+      name="accordion"
+      @enter="(el: any) => { el.style.maxHeight = el.scrollHeight + 'px' }"
+      @after-enter="(el: any) => { el.style.maxHeight = 'none' }"
+      @leave="(el: any) => { el.style.maxHeight = el.scrollHeight + 'px'; requestFrame(() => el.style.maxHeight = '0') }"
+    >
+      <div v-if="isOpen" class="px-4 py-3 bg-base-100">
+        <slot :is-open="isOpen" />
+      </div>
+    </Transition>
+
+  </div>
+</template>
+
+<style scoped>
+.accordion-enter-active,
+.accordion-leave-active {
+  transition: max-height 0.2s ease, opacity 0.2s ease;
+  overflow: hidden;
+}
+.accordion-enter-from,
+.accordion-leave-to {
+  max-height: 0 !important;
+  opacity: 0;
+}
+</style>

package/src/components/display/accordion/accordion-item.context.ts

@@ -0,0 +1,3 @@
+import { createComponentConfigKey } from '@/config/symbol'
+
+export const ACCORDION_ITEM_CONFIG = createComponentConfigKey('accordionItem')

package/src/components/display/accordion/accordion-item.props.ts

@@ -0,0 +1,20 @@
+import type { AccordionItemIcon } from './accordion-item.types'
+
+export interface AccordionItemConfigurableProps {
+  /**
+   * Icon displayed in the header to indicate the open/close state.
+   * - `'arrow'`: A chevron that rotates 180° when open.
+   * - `'plus'`: A plus sign that rotates 45° (becoming a cross) when open.
+   *
+   * @default 'arrow'
+   */
+  icon?: AccordionItemIcon
+}
+
+export interface AccordionItemProps extends AccordionItemConfigurableProps {
+  /**
+   * Unique identifier for this item within the parent `Accordion`.
+   * Used to track open/close state.
+   */
+  name: string
+}

package/src/components/display/accordion/accordion-item.types.ts

@@ -0,0 +1 @@
+export type AccordionItemIcon = 'arrow' | 'plus'

package/src/components/display/accordion/accordion.context.ts

@@ -0,0 +1,10 @@
+import type { InjectionKey, Ref } from 'vue'
+
+export type AccordionContext<M extends boolean = false> = {
+  multiple: M
+  modelValue: Ref<M extends true ? string[] : string | null>
+  toggle: (name: string) => void
+  isOpen: (name: string) => boolean
+}
+
+export const ACCORDION_CONTEXT_KEY = Symbol('accordion') as InjectionKey<AccordionContext<any>>

package/src/components/display/accordion/accordion.props.ts

@@ -0,0 +1,16 @@
+export interface AccordionProps<M extends boolean = false> {
+  /**
+   * When `true`, multiple items can be open at the same time.
+   *
+   * @default false
+   */
+  multiple?: M & boolean
+
+  /**
+   * Item name(s) open on first render (uncontrolled).
+   * Accepts a string in single mode, an array in multiple mode.
+   */
+  defaultOpen?: M extends true ? string[] : string
+
+  modelValue?: M extends true ? string[] : string | null
+}

package/src/components/display/avatar/Avatar.story.vue

@@ -0,0 +1,341 @@
+<script lang="ts">
+import { reactive } from 'vue'
+import Avatar from './Avatar.vue'
+import type { AvatarProps } from './avatar.props'
+
+const IMGS = [
+  'https://picsum.photos/seed/av1/192/192',
+  'https://picsum.photos/seed/av2/192/192',
+  'https://picsum.photos/seed/av3/192/192',
+  'https://picsum.photos/seed/av4/192/192',
+]
+</script>
+
+<script setup lang="ts">
+const state = reactive<AvatarProps>({
+  size: 'md',
+  shape: 'rounded-full',
+  presence: undefined,
+  placeholder: false,
+})
+</script>
+
+<template>
+  <Story group="components" title="Display/Avatar" auto-props-disabled>
+    <template #default>
+
+      <Variant title="Default">
+        <template #controls>
+          <HstSelect title="Size"     v-model="state.size"     :options="['xs', 'sm', 'md', 'lg', 'xl']" />
+          <HstSelect title="Shape"    v-model="state.shape"    :options="['rounded', 'rounded-full', 'rounded-xl', 'rounded-none']" />
+          <HstSelect title="Presence" v-model="state.presence" :options="[{ label: '-- default --', value: undefined }, 'online', 'offline']" />
+          <HstCheckbox title="Placeholder" v-model="(state.placeholder as boolean)" />
+        </template>
+
+        <template #source>
+          <textarea v-pre>
+            <Avatar size="md" shape="rounded-full">
+              <img src="..." alt="Avatar" />
+            </Avatar>
+          </textarea>
+        </template>
+
+        <Avatar v-bind="state">
+          <img v-if="!state.placeholder" :src="IMGS[0]" alt="Avatar" />
+          <span v-else class="text-xl">JD</span>
+        </Avatar>
+      </Variant>
+
+      <Variant title="Sizes">
+        <template #source>
+          <textarea v-pre>
+            <Avatar size="xs" shape="rounded-full">
+              <img src="..." alt="Avatar" />
+            </Avatar>
+            <Avatar size="sm" shape="rounded-full">
+              <img src="..." alt="Avatar" />
+            </Avatar>
+            <Avatar size="md" shape="rounded-full">
+              <img src="..." alt="Avatar" />
+            </Avatar>
+            <Avatar size="lg" shape="rounded-full">
+              <img src="..." alt="Avatar" />
+            </Avatar>
+            <Avatar size="xl" shape="rounded-full">
+              <img src="..." alt="Avatar" />
+            </Avatar>
+          </textarea>
+        </template>
+
+        <div class="avatar-story avatar-story--row" style="align-items: flex-end;">
+          <div v-for="size in (['xs', 'sm', 'md', 'lg', 'xl'])" :key="size" class="avatar-story--item">
+            <Avatar :size="size" shape="rounded-full">
+              <img :src="IMGS[0]" alt="Avatar" />
+            </Avatar>
+            <span class="avatar-story--label">{{ size }}</span>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="Shapes">
+        <div class="avatar-story avatar-story--row">
+          <div v-for="shape in (['rounded-none', 'rounded', 'rounded-xl', 'rounded-full'])" :key="shape" class="avatar-story--item">
+            <Avatar size="md" :shape="shape">
+              <img :src="IMGS[1]" alt="Avatar" />
+            </Avatar>
+            <span class="avatar-story--label">{{ shape }}</span>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="Presence">
+        <template #source>
+          <textarea v-pre>
+            <Avatar size="md" shape="rounded-full" presence="online">
+              <img src="..." alt="Avatar" />
+            </Avatar>
+            <Avatar size="md" shape="rounded-full" presence="offline">
+              <img src="..." alt="Avatar" />
+            </Avatar>
+          </textarea>
+        </template>
+
+        <div class="avatar-story avatar-story--row">
+          <div class="avatar-story--item">
+            <span class="avatar-story--label">online</span>
+            <Avatar size="md" shape="rounded-full" presence="online">
+              <img :src="IMGS[0]" alt="Avatar" />
+            </Avatar>
+          </div>
+          <div class="avatar-story--item">
+            <span class="avatar-story--label">offline</span>
+            <Avatar size="md" shape="rounded-full" presence="offline">
+              <img :src="IMGS[1]" alt="Avatar" />
+            </Avatar>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="Placeholder">
+        <template #source>
+          <textarea v-pre>
+            <Avatar size="md" shape="rounded-full" :placeholder="true">
+              <div class="bg-neutral text-neutral-content w-full h-full flex items-center justify-center">
+                <span>JD</span>
+              </div>
+            </Avatar>
+          </textarea>
+        </template>
+
+        <div class="avatar-story avatar-story--row" style="align-items: flex-end;">
+          <div v-for="size in (['xs', 'sm', 'md', 'lg', 'xl'])" :key="size" class="avatar-story--item">
+            <Avatar :size="size" shape="rounded-full" :placeholder="true">
+              <div class="bg-neutral text-neutral-content w-full h-full flex items-center justify-center">
+                <span>JD</span>
+              </div>
+            </Avatar>
+            <span class="avatar-story--label">{{ size }}</span>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="Group">
+        <template #source>
+          <textarea v-pre>
+            <Avatar :group="true">
+              <Avatar size="sm" shape="rounded-full">
+                <img src="..." alt="Avatar" />
+              </Avatar>
+              <Avatar size="sm" shape="rounded-full">
+                <img src="..." alt="Avatar" />
+              </Avatar>
+            </Avatar>
+          </textarea>
+        </template>
+
+        <div class="avatar-story avatar-story--col">
+          <div class="avatar-story--item-col">
+            <span class="avatar-story--label">basic group</span>
+            <Avatar :group="true">
+              <Avatar v-for="(src, i) in IMGS" :key="i" size="sm" shape="rounded-full">
+                <img :src="src" alt="Avatar" />
+              </Avatar>
+            </Avatar>
+          </div>
+
+          <div class="avatar-story--item-col">
+            <span class="avatar-story--label">group with counter</span>
+            <Avatar :group="true">
+              <Avatar v-for="(src, i) in IMGS.slice(0, 3)" :key="i" size="sm" shape="rounded-full">
+                <img :src="src" alt="Avatar" />
+              </Avatar>
+              <Avatar size="sm" shape="rounded-full" :placeholder="true">
+                <div class="bg-neutral text-neutral-content w-full h-full flex items-center justify-center">
+                  <span class="text-xs">+99</span>
+                </div>
+              </Avatar>
+            </Avatar>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="With ring">
+        <template #source>
+          <textarea v-pre>
+            <Avatar size="md" shape="rounded-full">
+              <div class="ring-primary ring-offset-base-100 w-full h-full rounded-full ring-2 ring-offset-2">
+                <img src="..." alt="Avatar" />
+              </div>
+            </Avatar>
+          </textarea>
+        </template>
+
+        <Avatar size="lg" shape="rounded-full">
+          <div class="ring-primary ring-offset-base-100 w-full h-full rounded-full ring-2 ring-offset-2 overflow-hidden">
+            <img :src="IMGS[2]" alt="Avatar" />
+          </div>
+        </Avatar>
+      </Variant>
+
+      <Variant title="With mask">
+        <template #source>
+          <textarea v-pre>
+            <!-- Once the Mask component is available: -->
+            <Avatar size="lg">
+              <Mask shape="squircle">
+                <img src="..." alt="Avatar" />
+              </Mask>
+            </Avatar>
+
+            <!-- In the meantime, use Tailwind classes directly: -->
+            <Avatar size="lg">
+              <div class="mask mask-squircle w-full h-full">
+                <img src="..." alt="Avatar" />
+              </div>
+            </Avatar>
+          </textarea>
+        </template>
+
+        <div class="avatar-story avatar-story--row">
+          <div v-for="mask in (['mask-squircle', 'mask-heart', 'mask-hexagon-2'])" :key="mask" class="avatar-story--item">
+            <Avatar size="lg">
+              <div :class="`mask ${mask} w-full h-full overflow-hidden`">
+                <img :src="IMGS[0]" alt="Avatar" />
+              </div>
+            </Avatar>
+            <span class="avatar-story--label">{{ mask }}</span>
+          </div>
+        </div>
+      </Variant>
+
+    </template>
+  </Story>
+</template>
+
+<style scoped>
+.avatar-story {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.avatar-story--row {
+  align-items: center;
+}
+
+.avatar-story--col {
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.avatar-story--item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.avatar-story--item-col {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.avatar-story--label {
+  font-size: 0.7rem;
+  color: #9ca3af;
+  font-family: monospace;
+}
+</style>
+
+<docs lang="md">
+# Avatar
+
+## Description
+
+A wrapper component to display user or entity representations.
+Built on DaisyUI's `avatar` class system. `Avatar` is a pure wrapper — the content (image, initials, etc.)
+is fully controlled via the `default` slot, making it compatible with any future `Mask` component.
+
+## API
+
+### Props
+
+| Prop          | Type            | Default         | Required | Configurable       | Description                                                                                                |
+|---------------|-----------------|-----------------|----------|--------------------|------------------------------------------------------------------------------------------------------------|
+| `size`        | `AvatarSize`    | `undefined`     | :x:      | :white_check_mark: | Size of the inner container. `xs` → `w-8` / `sm` → `w-16` / `md` → `w-20` / `lg` → `w-24` / `xl` → `w-32`. |
+| `shape`       | `AvatarShape`   | `'rounded-full'`| :x:      | :white_check_mark: | Shape of the inner container. `rounded` / `rounded-xl` / `rounded-full` / `rounded-none`.                  |
+| `presence`    | `AvatarPresence`| `undefined`     | :x:      | :white_check_mark: | Shows a presence dot. `'online'` (green) / `'offline'` (gray).                                             |
+| `placeholder` | `boolean`       | `false`         | :x:      | :x:                | Adds `avatar-placeholder`. Use with text initials instead of an image.                                     |
+| `group`       | `boolean`       | `false`         | :x:      | :x:                | Renders as `avatar-group` to stack multiple avatars with overlap.                                          |
+
+> **Configurable** props can be set globally via the Poppy UI plugin (`components.avatar` option). See [Plugin Configuration](../../../stories/Configuration.story.md) for more information.
+
+### Slots
+
+| Slot      | Bindings | Description                                                        |
+|-----------|----------|--------------------------------------------------------------------|
+| `default` | -        | Avatar content. In group mode, expects nested `Avatar` components. |
+
+## Usage
+
+```vue
+<!-- Basic image -->
+<Avatar size="md" shape="rounded-full">
+  <img src="..." alt="John Doe" />
+</Avatar>
+
+<!-- With presence indicator -->
+<Avatar size="md" shape="rounded-full" presence="online">
+  <img src="..." alt="John Doe" />
+</Avatar>
+
+<!-- Placeholder with initials -->
+<Avatar size="md" shape="rounded-full" :placeholder="true">
+  <div class="bg-neutral text-neutral-content w-full h-full flex items-center justify-center">
+    <span>JD</span>
+  </div>
+</Avatar>
+
+<!-- Group -->
+<Avatar group>
+  <Avatar size="sm" shape="rounded-full">
+    <img src="..." alt="User 1" />
+  </Avatar>
+  <Avatar size="sm" shape="rounded-full">
+    <img src="..." alt="User 2" />
+  </Avatar>
+  <Avatar size="sm" shape="rounded-full" :placeholder="true">
+    <div class="bg-neutral text-neutral-content w-full h-full flex items-center justify-center">
+      <span class="text-xs">+5</span>
+    </div>
+  </Avatar>
+</Avatar>
+
+<Avatar size="lg">
+  <Mask shape="squircle">
+    <img src="..." alt="Avatar" />
+  </Mask>
+</Avatar>
+```
+</docs>

package/src/components/display/avatar/Avatar.vue

@@ -0,0 +1,57 @@
+<script lang="ts">
+import { useComponentConfig } from '@/composables/use-component-config'
+import type { ComponentClass } from '@/types/utils.type'
+import { getClass } from '@/utils/build-class.util'
+import { AVATAR_CONFIG } from './avatar.context'
+import type { AvatarProps } from './avatar.props'
+import type { AvatarPresence, AvatarSize } from './avatar.types'
+
+const avatarSizes: Record<AvatarSize, `w-${number}`> = {
+  xs: 'w-8',
+  sm: 'w-16',
+  md: 'w-20',
+  lg: 'w-24',
+  xl: 'w-32',
+}
+
+const avatarPresences: ComponentClass<'avatar', AvatarPresence> = {
+  online: 'avatar-online',
+  offline: 'avatar-offline',
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<AvatarProps>()
+const config = useComponentConfig(AVATAR_CONFIG, props, {
+  shape: 'rounded-full',
+})
+</script>
+
+<template>
+  <!-- Group mode -->
+  <div
+    v-if="group"
+    class="avatar-group -space-x-6"
+  >
+    <slot />
+  </div>
+
+  <!-- Avatar mode -->
+  <div
+    v-else
+    class="avatar"
+    :class="[
+      getClass(avatarPresences, config.presence),
+      placeholder && 'avatar-placeholder',
+    ]"
+  >
+    <div
+      :class="[
+        getClass(avatarSizes, config.size),
+        config.shape,
+      ]"
+    >
+      <slot />
+    </div>
+  </div>
+</template>

package/src/components/display/avatar/avatar.context.ts

@@ -0,0 +1,3 @@
+import { createComponentConfigKey } from '@/config/symbol'
+
+export const AVATAR_CONFIG = createComponentConfigKey('avatar')

package/src/components/display/avatar/avatar.props.ts

@@ -0,0 +1,44 @@
+import type { AvatarPresence, AvatarShape, AvatarSize } from './avatar.types'
+export interface AvatarConfigurableProps {
+  /**
+   * Size of the avatar. Mapped to Tailwind `w-*` utilities.
+   * - `xs` → `w-8`
+   * - `sm` → `w-16`
+   * - `md` → `w-20`
+   * - `lg` → `w-24`
+   * - `xl` → `w-32`
+   */
+  size?: AvatarSize
+  /**
+   * Shape of the avatar image container.
+   * - `'rounded'`: Slightly rounded corners.
+   * - `'rounded-xl'`: Rounded with larger radius.
+   * - `'rounded-full'`: Fully circular.
+   * - `'rounded-none'`: No rounding (square).
+   *
+   * @default 'rounded-full'
+   */
+  shape?: AvatarShape
+  /**
+   * Shows a presence indicator dot.
+   * - `'online'`: Green dot.
+   * - `'offline'`: Gray dot.
+   */
+  presence?: AvatarPresence
+}
+export interface AvatarProps extends AvatarConfigurableProps {
+  /**
+   * When `true`, renders as an `avatar-group` container
+   * to stack multiple avatars with overlap.
+   *
+   * @default false
+   */
+  group?: boolean
+  /**
+   * When `true`, adds the `avatar-placeholder` modifier.
+   * Use with text initials instead of an image.
+   *
+   * @default false
+   */
+  placeholder?: boolean
+}

package/src/components/display/avatar/avatar.types.ts

@@ -0,0 +1,5 @@
+import type { ComponentSize } from '@/types/size.type'
+
+export type AvatarSize = ComponentSize
+export type AvatarShape = 'rounded' | 'rounded-full' | 'rounded-xl' | 'rounded-none'
+export type AvatarPresence = 'online' | 'offline'