@poppy-ui/vue 0.5.6 → 0.5.7-beta.0

package/src/components/display/countdown/Countdown.vue

@@ -0,0 +1,111 @@
+<script lang="ts">
+import { computed, onUnmounted, ref, watch } from 'vue'
+import type { CountdownProps } from './countdown.props'
+import type { CountdownDelta, CountdownTarget } from './countdown.types'
+
+/**
+ * Converts any supported CountdownTarget to a Unix timestamp in ms.
+ */
+function toTimestamp(to: CountdownTarget): number {
+  // Native Date
+  if (to instanceof Date) return to.getTime()
+
+  // String or number
+  if (typeof to === 'string' || typeof to === 'number') return new Date(to).getTime()
+
+  // Temporal API (feature detection via duck typing)
+  if (typeof to === 'object' && to !== null) {
+    // Temporal.Instant — has epochMilliseconds
+    if ('epochMilliseconds' in to) return (to as Temporal.Instant).epochMilliseconds
+
+    // Temporal.ZonedDateTime — has epochMilliseconds
+    if ('epochMilliseconds' in to && 'timeZoneId' in to) return (to as Temporal.ZonedDateTime).epochMilliseconds
+
+    // Temporal.PlainDateTime — no timezone, convert via Temporal.Now.timeZoneId
+    if ('toZonedDateTime' in to) {
+      const zdt = (to as Temporal.PlainDateTime).toZonedDateTime(
+        typeof Temporal !== 'undefined' ? Temporal.Now.timeZoneId() : 'UTC',
+      )
+      return zdt.epochMilliseconds
+    }
+  }
+
+  return Number.NaN
+}
+
+function getDelta(targetMs: number): CountdownDelta {
+  const diff = Math.max(0, targetMs - Date.now())
+  return {
+    days: Math.floor(diff / 1000 / 60 / 60 / 24),
+    hours: Math.floor(diff / 1000 / 60 / 60) % 24,
+    minutes: Math.floor(diff / 1000 / 60) % 60,
+    seconds: Math.floor(diff / 1000) % 60,
+    done: diff === 0,
+  }
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<CountdownProps>()
+
+const digits = computed(() => props.digits ?? 2)
+
+const emit = defineEmits<{
+  /**
+   * Emitted once when the countdown reaches zero.
+   */
+  end: []
+}>()
+
+const targetMs = computed(() => toTimestamp(props.to))
+const delta = ref<CountdownDelta>(getDelta(targetMs.value))
+
+let interval: ReturnType<typeof setInterval> | undefined
+
+function stop() {
+  if (interval !== undefined) {
+    clearInterval(interval)
+    interval = undefined
+  }
+}
+
+function start() {
+  stop()
+  interval = setInterval(() => {
+    delta.value = getDelta(targetMs.value)
+    if (delta.value.done) {
+      stop()
+      emit('end')
+    }
+  }, 500)
+}
+
+watch(targetMs, () => {
+  delta.value = getDelta(targetMs.value)
+  start()
+}, { immediate: true })
+
+onUnmounted(stop)
+
+defineExpose({ delta })
+</script>
+
+<template>
+  <slot
+    :days="delta.days"
+    :hours="delta.hours"
+    :minutes="delta.minutes"
+    :seconds="delta.seconds"
+    :done="delta.done"
+    :digits="digits"
+  >
+    <!-- Default render: hh:mm:ss -->
+    <span class="countdown font-mono text-2xl">
+      <span :style="{ '--value': delta.hours, '--digits': digits }" :aria-label="String(delta.hours)">{{ delta.hours }}</span>
+      :
+      <span :style="{ '--value': delta.minutes, '--digits': digits }" :aria-label="String(delta.minutes)">{{ delta.minutes }}</span>
+      :
+      <span :style="{ '--value': delta.seconds, '--digits': digits }" :aria-label="String(delta.seconds)">{{ delta.seconds }}</span>
+    </span>
+  </slot>
+</template>

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

@@ -0,0 +1,24 @@
+import type { CountdownTarget } from './countdown.types'
+
+export interface CountdownProps {
+  /**
+   * Target date/time to count down to.
+   *
+   * Accepts:
+   * - `Date` — native JS Date object
+   * - `string` — ISO 8601 string (e.g. `'2026-12-31T23:59:59'`)
+   * - `number` — Unix timestamp in milliseconds
+   * - `Temporal.Instant` — TC39 Temporal API
+   * - `Temporal.ZonedDateTime` — TC39 Temporal API
+   * - `Temporal.PlainDateTime` — TC39 Temporal API (assumed local timezone)
+   */
+  to: CountdownTarget
+
+  /**
+   * Minimum number of digits displayed per value.
+   * `2` forces `05` instead of `5`.
+   *
+   * @default 2
+   */
+  digits?: 1 | 2 | 3
+}

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

@@ -0,0 +1,24 @@
+/**
+ * Supported input types for the countdown target date.
+ * - `Date`: native JS Date object
+ * - `string`: ISO 8601 string (e.g. `'2026-12-31T23:59:59'`)
+ * - `number`: Unix timestamp in milliseconds
+ * - Temporal types: `Temporal.Instant`, `Temporal.ZonedDateTime`, `Temporal.PlainDateTime`
+ *   (TC39 Temporal API — available natively in modern browsers or via `@js-temporal/polyfill`)
+ */
+export type CountdownTarget = Date | string | number | object
+
+export type CountdownDelta = {
+  days: number
+  hours: number
+  minutes: number
+  seconds: number
+  done: boolean
+}
+
+export type CountdownEmits = {
+  /**
+   * Emitted once when the countdown reaches zero.
+   */
+  end: []
+}

package/src/components/display/diff/Diff.story.vue

@@ -0,0 +1,118 @@
+<script lang="ts">
+import Diff from './Diff.vue'
+</script>
+
+<script setup lang="ts">
+const IMG   = 'https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a.webp'
+const IMG_B = 'https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a-blur.webp'
+</script>
+
+<template>
+  <Story group="components" title="Display/Diff" auto-props-disabled>
+    <template #default>
+
+      <Variant title="Images">
+        <template #source>
+          <textarea v-pre>
+            <Diff class="aspect-16/9">
+              <template #item-1>
+                <img alt="original" src="..." />
+              </template>
+              <template #item-2>
+                <img alt="modified" src="..." />
+              </template>
+            </Diff>
+          </textarea>
+        </template>
+
+        <Diff class="aspect-16/9 w-full max-w-2xl">
+          <template #item-1>
+            <img :src="IMG" alt="original" />
+          </template>
+          <template #item-2>
+            <img :src="IMG_B" alt="blurred" />
+          </template>
+        </Diff>
+      </Variant>
+
+      <Variant title="Text">
+        <template #source>
+          <textarea v-pre>
+            <Diff class="aspect-16/9">
+              <template #item-1>
+                <div class="bg-primary text-primary-content grid place-content-center text-9xl font-black">
+                  POPPY
+                </div>
+              </template>
+              <template #item-2>
+                <div class="bg-base-200 grid place-content-center text-9xl font-black">
+                  POPPY
+                </div>
+              </template>
+            </Diff>
+          </textarea>
+        </template>
+
+        <Diff class="aspect-16/9 w-full max-w-2xl">
+          <template #item-1>
+            <div class="bg-primary text-primary-content grid place-content-center text-9xl font-black h-full">
+              POPPY
+            </div>
+          </template>
+          <template #item-2>
+            <div class="bg-base-200 grid place-content-center text-9xl font-black h-full">
+              POPPY
+            </div>
+          </template>
+        </Diff>
+      </Variant>
+
+    </template>
+  </Story>
+</template>
+
+<docs lang="md">
+# Diff
+
+## Description
+
+A side-by-side comparison component with a draggable resizer.
+Built on DaisyUI's `diff` class system. Works with any content — images, text, UI components.
+
+## Slots
+
+| Slot     | Description                         |
+|----------|-------------------------------------|
+| `item-1` | Left/front content (`diff-item-1`). |
+| `item-2` | Right/back content (`diff-item-2`). |
+
+The resizer handle is rendered automatically.
+
+## Usage
+
+```vue
+<!-- Images -->
+<Diff class="aspect-16/9">
+  <template #item-1>
+    <img src="original.jpg" alt="original" />
+  </template>
+  <template #item-2>
+    <img src="modified.jpg" alt="modified" />
+  </template>
+</Diff>
+
+<!-- Text -->
+<Diff class="aspect-16/9">
+  <template #item-1>
+    <div class="bg-primary text-primary-content grid place-content-center text-9xl font-black h-full">
+      Before
+    </div>
+  </template>
+  <template #item-2>
+    <div class="bg-base-200 grid place-content-center text-9xl font-black h-full">
+      After
+    </div>
+  </template>
+</Diff>
+```
+</docs>

package/src/components/display/diff/Diff.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts"></script>
+
+<template>
+  <figure class="diff" tabindex="0">
+    <div class="diff-item-1" role="img" tabindex="0">
+      <slot name="item-1"></slot>
+    </div>
+    <div class="diff-item-2" role="img">
+      <slot name="item-2"></slot>
+    </div>
+    <div class="diff-resizer"></div>
+  </figure>
+</template>

package/src/components/display/hover-3d/Hover3d.story.vue

@@ -0,0 +1,154 @@
+<script lang="ts">
+import Card from '@/components/display/card/Card.vue'
+import CardBody from '@/components/display/card/CardBody.vue'
+import Hover3d from './Hover3d.vue'
+</script>
+
+<script setup lang="ts">
+const IMG_CARD = 'https://img.daisyui.com/images/stock/creditcard.webp'
+const IMG_1 = 'https://img.daisyui.com/images/stock/card-1.webp'
+const IMG_2 = 'https://img.daisyui.com/images/stock/card-2.webp'
+const IMG_3 = 'https://img.daisyui.com/images/stock/card-3.webp'
+</script>
+
+<template>
+  <Story group="components" title="Display/Hover3d" auto-props-disabled>
+    <template #default>
+
+      <Variant title="Image">
+        <template #source>
+          <textarea v-pre>
+            <Hover3d>
+              <figure class="max-w-100 rounded-2xl">
+                <img src="..." alt="3D card" />
+              </figure>
+            </Hover3d>
+          </textarea>
+        </template>
+
+        <Hover3d class="my-12 mx-2">
+          <figure class="max-w-xs rounded-2xl overflow-hidden">
+            <img :src="IMG_CARD" alt="Credit card" />
+          </figure>
+        </Hover3d>
+      </Variant>
+
+      <Variant title="Card with RouterLink (to)">
+        <template #source>
+          <textarea v-pre>
+            <Hover3d class="cursor-pointer my-12 mx-2">
+              <Card class="w-80 bg-black text-white">
+                <CardBody>
+                  <div class="flex justify-between mb-10">
+                    <div class="font-bold">BANK OF LATVERIA</div>
+                    <div class="text-5xl opacity-10">❁</div>
+                  </div>
+                  <div class="text-lg mb-4 opacity-40">0210 8820 1150 0222</div>
+                  <div class="flex justify-between">
+                    <div>
+                      <div class="text-xs opacity-20">CARD HOLDER</div>
+                      <div>VICTOR VON D.</div>
+                    </div>
+                    <div>
+                      <div class="text-xs opacity-20">EXPIRES</div>
+                      <div>29/08</div>
+                    </div>
+                  </div>
+                </CardBody>
+              </Card>
+            </Hover3d>
+          </textarea>
+        </template>
+
+        <div class="hover3d-story hover3d-story--row">
+          <Hover3d to="#" class="cursor-pointer my-12 mx-2">
+            <Card class="w-96 bg-black text-white bg-[radial-gradient(circle_at_bottom_left,#ffffff04_35%,transparent_36%),radial-gradient(circle_at_top_right,#ffffff04_35%,transparent_36%)] bg-size-[4.95em_4.95em]">
+              <CardBody>
+                <div class="flex justify-between mb-10">
+                  <div class="font-bold">BANK OF LATVERIA</div>
+                  <div class="text-5xl opacity-10">❁</div>
+                </div>
+                <div class="text-lg mb-4 opacity-40">0210 8820 1150 0222</div>
+                <div class="flex justify-between">
+                  <div>
+                    <div class="text-xs opacity-20">CARD HOLDER</div>
+                    <div>VICTOR VON D.</div>
+                  </div>
+                  <div>
+                    <div class="text-xs opacity-20">EXPIRES</div>
+                    <div>29/08</div>
+                  </div>
+                </div>
+              </CardBody>
+            </Card>
+          </Hover3d>
+        </div>
+      </Variant>
+
+      <Variant title="Image gallery">
+        <div class="hover3d-story hover3d-story--row">
+          <Hover3d v-for="(src, i) in [IMG_1, IMG_2, IMG_3]" :key="i" class="my-12 mx-2">
+            <figure class="w-48 rounded-2xl overflow-hidden">
+              <img :src="src" alt="Gallery image" />
+            </figure>
+          </Hover3d>
+        </div>
+      </Variant>
+
+    </template>
+  </Story>
+</template>
+
+<style scoped>
+.hover3d-story {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.hover3d-story--row {
+  align-items: center;
+}
+</style>
+
+<docs lang="md">
+# Hover3d
+
+## Description
+
+A wrapper that adds a 3D tilt effect on hover. Built on DaisyUI's `hover-3d` class system.
+The effect works by placing 8 invisible hover zones over the content — these are injected automatically.
+
+> Only use non-interactive content inside `Hover3d`. If you want the whole card to be clickable,
+> use the `to` prop to render as a `RouterLink` instead of putting interactive elements inside.
+
+## Props
+
+| Prop | Type               | Default     | Required | Configurable | Description                                                                               |
+|------|--------------------|-------------|----------|--------------|-------------------------------------------------------------------------------------------|
+| `to` | `RouteLocationRaw` | `undefined` | :x:      | :x:          | If provided, renders as a `RouterLink`. Accepts a string path or a route location object. |
+
+## Slots
+
+| Slot      | Description                        |
+|-----------|------------------------------------|
+| `default` | Content to apply the 3D effect to. |
+
+## Usage
+
+```vue
+<!-- Basic image -->
+<Hover3d>
+  <figure class="max-w-xs rounded-2xl overflow-hidden">
+    <img src="..." alt="3D card" />
+  </figure>
+</Hover3d>
+
+<!-- Clickable card via RouterLink -->
+<Hover3d :to="{ name: 'product', params: { id: 1 } }" class="cursor-pointer">
+  <Card class="w-80">
+    <CardBody>...</CardBody>
+  </Card>
+</Hover3d>
+```
+</docs>

package/src/components/display/hover-3d/Hover3d.vue

@@ -0,0 +1,37 @@
+<script lang="ts">
+import { computed } from 'vue'
+import { RouterLink } from 'vue-router'
+import type { Hover3dProps } from './hover-3d.props'
+</script>
+
+<script setup lang="ts">
+const props = defineProps<Hover3dProps>()
+
+const tag = computed(() => props.to ?
+  props.to === '#' 
+    ? 'a'
+    : RouterLink 
+  : 'div')
+
+const attr = computed(() => {
+  if (tag.value === 'a') {
+    return {
+      href: props.to
+    }
+  }
+  if (tag.value === 'div') {
+    return {}
+  }
+  return {
+    to: props.to
+  }
+})
+</script>
+
+<template>
+  <component :is="tag" class="hover-3d" v-bind="attr">
+    <slot />
+    <!-- 8 empty divs required for the 3D zone detection -->
+    <div v-for="i in 8" :key="i" />
+  </component>
+</template>

package/src/components/display/hover-3d/hover-3d.props.ts

@@ -0,0 +1,9 @@
+import type { RouteLocationRaw } from 'vue-router'
+
+export interface Hover3dProps {
+  /**
+   * If provided, the component renders as a `RouterLink`.
+   * Accepts a string path or a route location object.
+   */
+  to?: RouteLocationRaw
+}

package/src/components/display/hover-gallery/HoverGallery.story.vue

@@ -0,0 +1,121 @@
+<script lang="ts">
+import Card from '@/components/display/card/Card.vue'
+import CardBody from '@/components/display/card/CardBody.vue'
+import CardTitle from '@/components/display/card/CardTitle.vue'
+import HoverGallery from './HoverGallery.vue'
+</script>
+
+<script setup lang="ts">
+const IMG_HAT_1 = 'https://img.daisyui.com/images/stock/daisyui-hat-1.webp'
+const IMG_HAT_2 = 'https://img.daisyui.com/images/stock/daisyui-hat-2.webp'
+const IMG_HAT_3 = 'https://img.daisyui.com/images/stock/daisyui-hat-3.webp'
+const IMG_HAT_4 = 'https://img.daisyui.com/images/stock/daisyui-hat-4.webp'
+</script>
+
+<template>
+  <Story group="components" title="Display/HoverGallery" auto-props-disabled>
+    <template #default>
+
+      <Variant title="Basic">
+        <template #source>
+          <textarea v-pre>
+            <HoverGallery class="max-w-60">
+              <img src="..." />
+              <img src="..." />
+              <img src="..." />
+              <img src="..." />
+            </HoverGallery>
+          </textarea>
+        </template>
+
+        <HoverGallery class="max-w-60">
+          <img :src="IMG_HAT_1" alt="Hat 1" />
+          <img :src="IMG_HAT_2" alt="Hat 2" />
+          <img :src="IMG_HAT_3" alt="Hat 3" />
+          <img :src="IMG_HAT_4" alt="Hat 4" />
+        </HoverGallery>
+      </Variant>
+
+      <Variant title="In a card">
+        <template #source>
+          <textarea v-pre>
+            <Card class="bg-base-200 max-w-60 shadow">
+              <HoverGallery>
+                <img src="..." />
+                <img src="..." />
+                <img src="..." />
+                <img src="..." />
+              </HoverGallery>
+              <CardBody>
+                <CardTitle class="flex justify-between">
+                  Product Name
+                  <span class="font-normal">$25</span>
+                </CardTitle>
+                <p>Product description</p>
+              </CardBody>
+            </Card>
+          </textarea>
+        </template>
+
+        <Card class="bg-base-200 max-w-60 shadow">
+          <HoverGallery>
+            <img :src="IMG_HAT_1" alt="Hat 1" />
+            <img :src="IMG_HAT_2" alt="Hat 2" />
+            <img :src="IMG_HAT_3" alt="Hat 3" />
+            <img :src="IMG_HAT_4" alt="Hat 4" />
+          </HoverGallery>
+          <CardBody>
+            <CardTitle class="flex justify-between">
+              daisyUI Hat
+              <span class="font-normal">$25</span>
+            </CardTitle>
+            <p>High Quality classic cap hat with stitch logo</p>
+          </CardBody>
+        </Card>
+      </Variant>
+
+    </template>
+  </Story>
+</template>
+
+<docs lang="md">
+# HoverGallery
+
+## Description
+
+A container that creates a hover gallery effect. The first image is visible by default, and hovering horizontally reveals other images. Built on DaisyUI's `hover-gallery` class. Always renders as a `<figure />` element.
+
+> Hover Gallery can include up to 10 images.
+
+## Slots
+
+| Slot      | Description                             |
+|-----------|-----------------------------------------|
+| `default` | Images to display in the hover gallery. |
+
+## Usage
+
+```vue
+<!-- Basic usage -->
+<HoverGallery class="max-w-60">
+  <img src="image-1.webp" alt="Image 1" />
+  <img src="image-2.webp" alt="Image 2" />
+  <img src="image-3.webp" alt="Image 3" />
+  <img src="image-4.webp" alt="Image 4" />
+</HoverGallery>
+
+<!-- In a card -->
+<Card class="bg-base-200 max-w-60 shadow">
+  <HoverGallery>
+    <img src="..." />
+    <img src="..." />
+    <img src="..." />
+  </HoverGallery>
+  <CardBody>
+    <CardTitle>Product Name</CardTitle>
+    <p>Product description</p>
+  </CardBody>
+</Card>
+
+```
+</docs>

package/src/components/display/hover-gallery/HoverGallery.vue

@@ -0,0 +1,5 @@
+<template>
+  <figure class="hover-gallery">
+    <slot />
+  </figure>
+</template>