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

package/src/components/display/list/ListItem.vue

@@ -0,0 +1,53 @@
+<script lang="ts">
+import { computed, useSlots } from 'vue'
+import { RouterLink } from 'vue-router'
+import type { ListItemProps } from './list-item.props'
+</script>
+
+<script setup lang="ts">
+const props = defineProps<ListItemProps>()
+
+const tag = computed(() => props.to ? props.to === '#' ? 'a' : RouterLink : 'li')
+const attr = computed(() => {
+  if (tag.value === 'a') {
+    return {
+      href: props.to
+    }
+  }
+  if (tag.value === 'li') {
+    return {}
+  }
+  return {
+    to: props.to
+  }
+})
+
+const slots = useSlots()
+const hasContent = computed(() => !!props.title || !!props.description || !!slots.title || !!slots.description)
+</script>
+
+<template>
+  <component
+    :is="tag"
+    class="list-row"
+    v-bind="attr"
+  >
+    <slot name="prefix" />
+
+    <div v-if="hasContent" class="list-col-grow">
+      <slot name="title">
+        <div>{{ title }}</div>
+      </slot>
+      <slot name="description">
+        <div class="text-xs uppercase font-semibold opacity-60">{{ description }}</div>
+      </slot>
+    </div>
+    <slot v-else />
+
+    <div v-if="$slots.details" class="list-col-wrap text-xs opacity-60">
+      <slot name="details" />
+    </div>
+
+    <slot name="actions" />
+  </component>
+</template>

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

@@ -0,0 +1,19 @@
+import type { RouteLocationRaw } from 'vue-router'
+
+export interface ListItemProps {
+  /**
+   * If provided, the component renders as a `RouterLink`.
+   * Accepts a string path or a route location object.
+   */
+  to?: RouteLocationRaw
+
+  /**
+   * Title text for the list item. Can also be passed via #title slot.
+   */
+  title?: string
+
+  /**
+   * Description text for the list item. Can also be passed via #description slot.
+   */
+  description?: string
+}

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

@@ -0,0 +1,7 @@
+export interface ListProps {
+  /**
+   * Optional title to display at the top of the list.
+   * Can also be passed via the #title slot.
+   */
+  title?: string
+}

package/src/components/display/public.ts

@@ -0,0 +1,20 @@
+export { default as Accordion } from './accordion/Accordion.vue'
+export { default as AccordionItem } from './accordion/AccordionItem.vue'
+export { default as Avatar } from './avatar/Avatar.vue'
+export { default as Badge } from './badge/Badge.vue'
+export { default as Card } from './card/Card.vue'
+export { default as CardActions } from './card/CardActions.vue'
+export { default as CardBody } from './card/CardBody.vue'
+export { default as CardTitle } from './card/CardTitle.vue'
+export { default as Carousel } from './carousel/Carousel.vue'
+export { default as Chat } from './chat/Chat.vue'
+export { default as Countdown } from './countdown/Countdown.vue'
+export { default as Diff } from './diff/Diff.vue'
+export { default as Hover3d } from './hover-3d/Hover3d.vue'
+export { default as HoverGallery } from './hover-gallery/HoverGallery.vue'
+export { default as Kbd } from './kbd/Kbd.vue'
+export { default as List } from './list/List.vue'
+export { default as ListItem } from './list/ListItem.vue'
+export { default as Stat } from './stat/Stat.vue'
+export { default as Stats } from './stat/Stats.vue'
+export { default as Status } from './status/Status.vue'

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

@@ -0,0 +1,40 @@
+// Accordion
+export type { AccordionProps } from './accordion/accordion.props'
+export type { AccordionItemProps } from './accordion/accordion-item.props'
+export * from './accordion/accordion-item.types'
+// Avatar
+export type { AvatarProps } from './avatar/avatar.props'
+export * from './avatar/avatar.types'
+// Badge
+export type { BadgeProps } from './badge/badge.props'
+export * from './badge/badge.types'
+// Card
+export type { CardProps } from './card/card.props'
+export * from './card/card.types'
+export type { CardActionsProps } from './card/card-actions.props'
+export * from './card/card-actions.types'
+// Carousel
+export type { CarouselProps } from './carousel/carousel.props'
+export * from './carousel/carousel.types'
+// Chat
+export type { ChatProps } from './chat/chat.props'
+export * from './chat/chat.types'
+// Countdown
+export type { CountdownProps } from './countdown/countdown.props'
+export * from './countdown/countdown.types'
+// Hover3d
+export type { Hover3dProps } from './hover-3d/hover-3d.props'
+// Kbd
+export type { KbdProps } from './kbd/kbd.props'
+export * from './kbd/kbd.types'
+// List
+export type { ListItemProps } from './list/list-item.props'
+// Stat
+export type { StatConfigurableProps, StatProps } from './stat/stat.props'
+export * from './stat/stat.types'
+// Stats
+export type { StatsConfigurableProps, StatsProps } from './stat/stats.props'
+export * from './stat/stats.types'
+// Status
+export type { StatusProps } from './status/status.props'
+export * from './status/status.types'

package/src/components/display/stat/Stat.story.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import Stat from './Stat.vue'
+import Stats from './Stats.vue'
+</script>
+
+<template>
+  <Story group="components" title="Display/Stat" auto-props-disabled>
+    <template #default>
+      <Variant title="Default" id="default">
+        <Stats>
+          <Stat title="Total Page Views" value="89,400" desc="21% more than last month" />
+        </Stats>
+      </Variant>
+
+      <Variant title="With Icon" id="with-icon">
+        <Stats>
+          <Stat>
+            <template #figure>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                class="inline-block h-8 w-8 stroke-current text-primary"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+                />
+              </svg>
+            </template>
+            <template #title>Total Likes</template>
+            <template #value>25.6K</template>
+            <template #desc>21% more than last month</template>
+          </Stat>
+        </Stats>
+      </Variant>
+
+      <Variant title="Centered" id="centered">
+        <Stats>
+          <Stat align="center" title="Downloads" value="31K" desc="Jan 1st - Feb 1st" />
+        </Stats>
+      </Variant>
+
+      <Variant title="Multiple Horizontal" id="multiple-horizontal">
+        <Stats>
+          <Stat title="Downloads" value="31K" desc="Jan 1st - Feb 1st" />
+          <Stat title="New Users" value="4,200" desc="↗︎ 400 (22%)" />
+          <Stat title="New Registers" value="1,200" desc="↘︎ 90 (14%)" />
+        </Stats>
+      </Variant>
+
+      <Variant title="Vertical" id="vertical">
+        <Stats direction="vertical">
+          <Stat title="Downloads" value="31K" desc="Jan 1st - Feb 1st" />
+          <Stat title="New Users" value="4,200" desc="↗︎ 400 (22%)" />
+          <Stat title="New Registers" value="1,200" desc="↘︎ 90 (14%)" />
+        </Stats>
+      </Variant>
+
+      <Variant title="With Actions" id="with-actions">
+        <Stats>
+          <Stat title="Account balance" value="$89,400">
+            <template #actions>
+              <button class="btn btn-xs btn-success">Add funds</button>
+            </template>
+          </Stat>
+        </Stats>
+      </Variant>
+
+      <Variant title="Responsive" id="responsive">
+        <Stats direction="vertical" class="lg:stats-horizontal">
+          <Stat title="Downloads" value="31K" desc="Jan 1st - Feb 1st" />
+          <Stat title="New Users" value="4,200" desc="↗︎ 400 (22%)" />
+          <Stat title="New Registers" value="1,200" desc="↘︎ 90 (14%)" />
+        </Stats>
+      </Variant>
+    </template>
+  </Story>
+</template>
+
+<docs lang="md">
+# Stat
+
+## Description
+
+A component used to display key metrics, statistics, or numerical data with optional titles, descriptions, icons, and actions.
+
+## API
+
+<details>
+<summary>Stats</summary>
+
+### Props
+
+| Prop        | Type             | Default        | Required | Configurable       | Description                    |
+|-------------|------------------|----------------|----------|--------------------|--------------------------------|
+| `direction` | `StatsDirection` | `'horizontal'` | :x:      | :white_check_mark: | Direction of the stats layout. |
+
+> **Configurable** props can be set globally via the Poppy UI plugin (`components.stats` option). See [Plugin Configuration](../../../stories/Configuration.story.md) for more information.
+
+### Slots (Stats)
+
+| Slot      | Bindings | Description                     |
+|-----------|----------|---------------------------------|
+| `default` | -        | Contains `<Stat />` components. |
+
+</details>
+
+<details>
+<summary>Stat</summary>
+
+### Props
+
+| Prop           | Type               | Default     | Required | Configurable       | Description                             |
+|----------------|--------------------|-------------|----------|--------------------|-----------------------------------------|
+| `title`        | `string`           | `undefined` | :x:      | :x:                | Title of the stat.                      |
+| `value`        | `string \| number` | `undefined` | :x:      | :x:                | Value displayed in the stat.            |
+| `desc`         | `string`           | `undefined` | :x:      | :x:                | Description text for the stat.          |
+| `align`        | `StatAlign`        | `undefined` | :x:      | :white_check_mark: | Alignment of the stat content.          |
+| `titleClass`   | `string`           | `undefined` | :x:      | :white_check_mark: | Custom class for the title.             |
+| `valueClass`   | `string`           | `undefined` | :x:      | :white_check_mark: | Custom class for the value.             |
+| `descClass`    | `string`           | `undefined` | :x:      | :white_check_mark: | Custom class for the description.       |
+| `figureClass`  | `string`           | `undefined` | :x:      | :white_check_mark: | Custom class for the figure container.  |
+| `actionsClass` | `string`           | `undefined` | :x:      | :white_check_mark: | Custom class for the actions container. |
+
+### Slots
+
+| Slot      | Bindings | Description                          |
+|-----------| -------- |--------------------------------------|
+| `default` | -        | Default content of the stat.         |
+| `figure`  | -        | Icon or figure displayed at the top. |
+| `title`   | -        | Custom title content.                |
+| `value`   | -        | Custom value content.                |
+| `desc`    | -        | Custom description content.          |
+| `actions` | -        | Actions container (e.g., buttons).   |
+
+</details>
+
+## Usage
+
+```vue
+<!-- Basic -->
+<Stats>
+  <Stat title="Total Page Views" value="89,400" desc="21% more than last month" />
+</Stats>
+
+<!-- With icon -->
+<Stats>
+  <Stat>
+    <template #figure>
+      <Icon name="heart" />
+    </template>
+    <template #title>Total Likes</template>
+    <template #value>25.6K</template>
+    <template #desc>21% more than last month</template>
+  </Stat>
+</Stats>
+
+<!-- Centered -->
+<Stats>
+  <Stat align="center" title="Downloads" value="31K" desc="Jan 1st - Feb 1st" />
+</Stats>
+
+<!-- With actions -->
+<Stats>
+  <Stat title="Account balance" value="$89,400">
+    <template #actions>
+      <button class="btn btn-xs">Add funds</button>
+    </template>
+  </Stat>
+</Stats>
+
+<!-- Vertical layout -->
+<Stats direction="vertical">
+  <Stat title="Downloads" value="31K" />
+  <Stat title="New Users" value="4,200" />
+</Stats>
+```
+</docs>

package/src/components/display/stat/Stat.vue

@@ -0,0 +1,43 @@
+<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 { STAT_CONFIG } from './stat.context'
+import type { StatProps } from './stat.props'
+import type { StatAlign } from './stat.types'
+
+const statAligns: ComponentClass<'place-items', StatAlign> = {
+  start: 'place-items-start',
+  center: 'place-items-center',
+  end: 'place-items-end',
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<StatProps>()
+const config = useComponentConfig(STAT_CONFIG, props, {})
+</script>
+
+<template>
+  <div
+    class="stat"
+    :class="getClass(statAligns, config.align)"
+  >
+    <div v-if="$slots.figure" class="stat-figure" :class="figureClass">
+      <slot name="figure" />
+    </div>
+    <div v-if="title || $slots.title" class="stat-title" :class="titleClass">
+      <slot name="title">{{ title }}</slot>
+    </div>
+    <div v-if="value !== undefined || $slots.value" class="stat-value" :class="valueClass">
+      <slot name="value">{{ value }}</slot>
+    </div>
+    <div v-if="desc || $slots.desc" class="stat-desc" :class="descClass">
+      <slot name="desc">{{ desc }}</slot>
+    </div>
+    <div v-if="$slots.actions" class="stat-actions" :class="actionsClass">
+      <slot name="actions" />
+    </div>
+    <slot />
+  </div>
+</template>

package/src/components/display/stat/Stats.vue

@@ -0,0 +1,29 @@
+<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 { STATS_CONFIG } from './stats.context'
+import type { StatsProps } from './stats.props'
+import type { StatsDirection } from './stats.types'
+
+const statsDirections: ComponentClass<'stats', StatsDirection> = {
+  horizontal: 'stats-horizontal',
+  vertical: 'stats-vertical',
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<StatsProps>()
+const config = useComponentConfig(STATS_CONFIG, props, {
+  direction: 'horizontal',
+})
+</script>
+
+<template>
+  <div
+    class="stats"
+    :class="getClass(statsDirections, config.direction)"
+  >
+    <slot />
+  </div>
+</template>

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

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

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

@@ -0,0 +1,50 @@
+import type { StatAlign } from './stat.types'
+
+export interface StatConfigurableProps {
+  /**
+   * Alignment of the stat content.
+   */
+  align?: StatAlign
+
+  /**
+   * Custom class for the title.
+   */
+  titleClass?: string
+
+  /**
+   * Custom class for the value.
+   */
+  valueClass?: string
+
+  /**
+   * Custom class for the description.
+   */
+  descClass?: string
+
+  /**
+   * Custom class for the figure container.
+   */
+  figureClass?: string
+
+  /**
+   * Custom class for the actions container.
+   */
+  actionsClass?: string
+}
+
+export interface StatProps extends StatConfigurableProps {
+  /**
+   * Title of the stat.
+   */
+  title?: string
+
+  /**
+   * Value displayed in the stat.
+   */
+  value?: string | number
+
+  /**
+   * Description text for the stat.
+   */
+  desc?: string
+}

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

@@ -0,0 +1 @@
+export type StatAlign = 'start' | 'center' | 'end'

package/src/components/display/stat/stats.context.ts

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

package/src/components/display/stat/stats.props.ts

@@ -0,0 +1,11 @@
+import type { StatsDirection } from './stats.types'
+
+export interface StatsConfigurableProps {
+  /**
+   * Direction of the stats container.
+   * @default 'horizontal'
+   */
+  direction?: StatsDirection
+}
+
+export interface StatsProps extends StatsConfigurableProps {}

package/src/components/display/stat/stats.types.ts

@@ -0,0 +1 @@
+export type StatsDirection = 'horizontal' | 'vertical'

package/src/components/display/status/Status.story.vue

@@ -0,0 +1,195 @@
+<script lang="ts">
+import { reactive } from 'vue'
+import Status from './Status.vue'
+import type { StatusProps } from './status.props'
+</script>
+
+<script setup lang="ts">
+const state = reactive<StatusProps>({
+  color: undefined,
+  size: 'md',
+  animation: undefined,
+  label: 'status',
+})
+</script>
+
+<template>
+  <Story group="components" title="Display/Status" auto-props-disabled>
+    <template #default>
+
+      <Variant title="Default">
+        <template #controls>
+          <HstSelect title="Color"     v-model="state.color"     :options="[{ label: '-- default --', value: undefined }, 'neutral', 'primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error']" />
+          <HstSelect title="Size"      v-model="state.size"      :options="['xs', 'sm', 'md', 'lg', 'xl']" />
+          <HstSelect title="Animation" v-model="state.animation" :options="[{ label: '-- default --', value: undefined }, 'ping', 'bounce']" />
+        </template>
+
+        <template #source>
+          <textarea v-pre>
+            <Status color="success" size="md" />
+          </textarea>
+        </template>
+
+        <Status v-bind="state" />
+      </Variant>
+
+      <Variant title="Colors">
+        <div class="status-story status-story--row">
+          <div v-for="color in (['neutral', 'primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error'])" :key="color" class="status-story--item">
+            <Status :color="color" />
+            <span class="status-story--label">{{ color }}</span>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="Sizes">
+        <div class="status-story status-story--row" style="align-items: flex-end;">
+          <div v-for="size in (['xs', 'sm', 'md', 'lg', 'xl'])" :key="size" class="status-story--item">
+            <Status color="primary" :size="size" />
+            <span class="status-story--label">{{ size }}</span>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="Animations">
+        <template #source>
+          <textarea v-pre>
+            <!-- Ping -->
+            <Status color="error" animation="ping" />
+
+            <!-- Bounce -->
+            <Status color="info" animation="bounce" />
+          </textarea>
+        </template>
+
+        <div class="status-story status-story--col">
+          <div class="status-story--item-group">
+            <span class="status-story--label">ping</span>
+            <div class="status-story status-story--row">
+              <div v-for="color in (['neutral', 'primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error'])" :key="color" class="status-story--item">
+                <Status :color="color" animation="ping" />
+                <span class="status-story--label">{{ color }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="status-story--item-group">
+            <span class="status-story--label">bounce</span>
+            <div class="status-story status-story--row">
+              <div v-for="color in (['neutral', 'primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error'])" :key="color" class="status-story--item">
+                <Status :color="color" animation="bounce" />
+                <span class="status-story--label">{{ color }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="Composition">
+        <div class="status-story status-story--col">
+          <div class="status-story--item-row">
+            <Status color="error" animation="ping" />
+            <span class="text-sm">Server is down</span>
+          </div>
+          <div class="status-story--item-row">
+            <Status color="success" />
+            <span class="text-sm">All systems operational</span>
+          </div>
+          <div class="status-story--item-row">
+            <Status color="warning" animation="ping" />
+            <span class="text-sm">Degraded performance</span>
+          </div>
+          <div class="status-story--item-row">
+            <Status color="info" animation="bounce" size="sm" />
+            <span class="text-sm">Unread messages</span>
+          </div>
+          <div class="status-story--item-row">
+            <Status color="neutral" />
+            <span class="text-sm">Unknown</span>
+          </div>
+        </div>
+      </Variant>
+
+    </template>
+  </Story>
+</template>
+
+<style scoped>
+.status-story {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.status-story--row {
+  align-items: center;
+}
+
+.status-story--col {
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.status-story--item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.status-story--item-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.status-story--item-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.status-story--label {
+  font-size: 0.7rem;
+  color: #9ca3af;
+  font-family: monospace;
+}
+</style>
+
+<docs lang="md">
+# Status
+
+## Description
+
+A small visual indicator used to represent the current state of an element — online, offline, error, etc.
+Built on DaisyUI's `status` class system. Supports colors, sizes, and animations for active states.
+
+## Props
+
+| Prop        | Type              | Default     | Required | Configurable       | Description                                                                        |
+|-------------|-------------------|-------------|----------|--------------------|------------------------------------------------------------------------------------|
+| `color`     | `StatusColor`     | `undefined` | :x:      | :white_check_mark: | Color theme based on the DaisyUI palette.                                          |
+| `size`      | `StatusSize`      | `'md'`      | :x:      | :white_check_mark: | Size of the indicator. `xs` / `sm` / `md` / `lg` / `xl`.                           |
+| `animation` | `StatusAnimation` | `undefined` | :x:      | :white_check_mark: | `'ping'` renders two overlapping elements for urgency. `'bounce'` draws attention. |
+| `label`     | `string`          | `undefined` | :x:      | :x:                | Accessible label set as `aria-label` on the root element.                          |
+
+> **Configurable** props can be set globally via the Poppy UI plugin (`components.status` option). See [Plugin Configuration](../../../stories/Configuration.story.md) for more information.
+
+## Usage
+
+```vue
+<!-- Basic -->
+<Status color="success" />
+
+<!-- Ping animation -->
+<Status color="error" animation="ping" />
+
+<!-- Bounce animation -->
+<Status color="info" animation="bounce" />
+
+<!-- Inline with text -->
+<div class="flex items-center gap-2">
+  <Status color="success" size="sm" />
+  <span>Online</span>
+</div>
+```
+</docs>