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

package/src/components/feedback/tooltip/Tooltip.story.vue

@@ -0,0 +1,256 @@
+<script lang="ts">
+import Button from '@/components/actions/button/Button.vue'
+import Tooltip from './Tooltip.vue'
+import type { TooltipProps } from './tooltip.props'
+</script>
+
+<script lang="ts" setup>
+import { reactive } from 'vue'
+
+const state = reactive<TooltipProps>({
+  tip: 'Hello, I am a tooltip!',
+  placement: 'top',
+  color: undefined,
+  open: false,
+  disabled: false,
+  as: 'div',
+})
+</script>
+
+<template>
+  <Story group="components" title="Feedback/Tooltip" auto-props-disabled>
+    <template #default>
+
+      <Variant title="Default">
+        <template #controls>
+          <HstText title="Tip" v-model="state.tip" />
+          <HstSelect title="Placement" v-model="state.placement" :options="['top', 'bottom', 'left', 'right']" />
+          <HstSelect title="Color" v-model="state.color" :options="[undefined, 'neutral', 'primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error']" />
+          <HstSelect title="As" v-model="state.as" :options="['div', 'span', 'button']" />
+          <HstCheckbox title="Open" v-model="state.open" />
+          <HstCheckbox title="Disabled" v-model="state.disabled" />
+        </template>
+
+        <template #source>
+          <textarea v-pre>
+            <Tooltip tip="Hello, I am a tooltip!" placement="top">
+              <Button>Hover me</Button>
+            </Tooltip>
+          </textarea>
+        </template>
+
+        <div class="tooltip-story tooltip-story--center">
+          <Tooltip v-bind="state">
+            <Button>Hover me</Button>
+          </Tooltip>
+        </div>
+      </Variant>
+
+      <Variant title="Placements">
+        <div class="tooltip-story tooltip-story--placements">
+          <div v-for="placement in (['top', 'bottom', 'left', 'right'])" :key="placement" class="tooltip-story--item">
+            <span class="tooltip-story--label">{{ placement }}</span>
+            <Tooltip :placement="placement" :tip="`Tooltip ${placement}`">
+              <Button variant="outline" size="sm">{{ placement }}</Button>
+            </Tooltip>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="Colors">
+        <div class="tooltip-story tooltip-story--placements">
+          <div v-for="color in (['neutral', 'primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error'])" :key="color" class="tooltip-story--item">
+            <Tooltip :color="color" :tip="color">
+              <Button :color="color" size="sm">Hover</Button>
+            </Tooltip>
+            <span class="tooltip-story--label">{{ color }}</span>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="Always open">
+        <template #source>
+          <textarea v-pre>
+            <Tooltip tip="Always visible" :open="true">
+              <Button>Trigger</Button>
+            </Tooltip>
+          </textarea>
+        </template>
+
+        <div class="tooltip-story tooltip-story--center">
+          <Tooltip tip="Always visible" :open="true">
+            <Button>Trigger</Button>
+          </Tooltip>
+        </div>
+      </Variant>
+
+      <Variant title="Disabled">
+        <template #source>
+          <textarea v-pre>
+            <Tooltip tip="You won't see me" :disabled="true">
+              <Button>Hover me — no tooltip</Button>
+            </Tooltip>
+          </textarea>
+        </template>
+
+        <div class="tooltip-story tooltip-story--center">
+          <Tooltip tip="You won't see me" :disabled="true">
+            <Button>Hover me — no tooltip</Button>
+          </Tooltip>
+        </div>
+      </Variant>
+
+      <Variant title="Content slot">
+        <template #source>
+          <textarea v-pre>
+            <Tooltip color="primary">
+              <template #content>
+                <strong>Rich content</strong> with <em>HTML</em>
+              </template>
+              <Button>Hover for rich tooltip</Button>
+            </Tooltip>
+          </textarea>
+        </template>
+
+        <div class="tooltip-story tooltip-story--center">
+          <Tooltip color="primary">
+            <template #content>
+              <strong>Rich content</strong> with <em>HTML</em>
+            </template>
+            <Button>Hover for rich tooltip</Button>
+          </Tooltip>
+        </div>
+      </Variant>
+
+      <Variant title="As prop">
+        <template #source>
+          <textarea v-pre>
+            <!-- Wrap a span instead of a div -->
+            <Tooltip tip="Wrapped in a span" as="span">
+              <Badge color="primary">Hover me</Badge>
+            </Tooltip>
+          </textarea>
+        </template>
+
+        <div class="tooltip-story tooltip-story--placements">
+          <div class="tooltip-story--item">
+            <Tooltip tip="Wrapped in a div" as="div">
+              <Button size="sm">Hover me</Button>
+            </Tooltip>
+            <span class="tooltip-story--label">as="div" (default)</span>
+          </div>
+          <div class="tooltip-story--item">
+            <Tooltip tip="Wrapped in a span" as="span">
+              <Button size="sm">Hover me</Button>
+            </Tooltip>
+            <span class="tooltip-story--label">as="span"</span>
+          </div>
+        </div>
+      </Variant>
+
+    </template>
+  </Story>
+</template>
+
+<style scoped>
+.tooltip-story {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+}
+
+.tooltip-story--center {
+  justify-content: center;
+  padding: 3rem;
+}
+
+.tooltip-story--row {
+  align-items: flex-end;
+}
+
+.tooltip-story--placements {
+  justify-content: center;
+  padding: 3rem;
+  gap: 2rem;
+}
+
+.tooltip-story--item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.tooltip-story--label {
+  font-size: 0.7rem;
+  color: #9ca3af;
+  font-family: monospace;
+}
+</style>
+
+<docs lang="md">
+# Tooltip
+
+## Description
+
+A floating label that appears on hover, anchored to a trigger element.
+Built on the native Popover API with CSS anchor positioning — the tooltip is teleported to `<body />`
+to avoid overflow/clipping issues regardless of the trigger's position in the DOM.
+
+## Props
+
+| Prop        | Type               | Default     | Required | Configurable       | Description                                                                  |
+|-------------|--------------------|-------------|----------|--------------------|------------------------------------------------------------------------------|
+| `tip`       | `string`           | `undefined` | :x:      | :x:                | Text content of the tooltip. Can be overridden by the `content` slot.        |
+| `placement` | `TooltipPlacement` | `'top'`     | :x:      | :white_check_mark: | Placement relative to the anchor. `top` / `bottom` / `left` / `right`.       |
+| `color`     | `TooltipColor`     | `undefined` | :x:      | :white_check_mark: | Color theme based on the DaisyUI palette.                                    |
+| `as`        | `string`           | `'div'`     | :x:      | :white_check_mark: | HTML tag used to render the anchor wrapper. Use `'span'` for inline content. |
+| `open`      | `boolean`          | `false`     | :x:      | :x:                | When `true`, the tooltip is always visible regardless of hover state.        |
+| `disabled`  | `boolean`          | `false`     | :x:      | :x:                | When `true`, the tooltip is never shown.                                     |
+
+> **Configurable** props can be set globally via the Poppy UI plugin (`components.tooltip` option). See [Plugin Configuration](../../../stories/Configuration.story.md) for more information.
+
+## Slots
+
+| Slot      | Description                                                                  |
+|-----------|----------------------------------------------------------------------------- |
+| `default` | The anchor element the tooltip is attached to.                               |
+| `content` | Overrides `tip` with rich HTML content. Rendered inside the tooltip popover. |
+
+## Usage
+
+```vue
+<!-- Basic -->
+<Tooltip tip="Save your changes">
+  <Button color="primary">Save</Button>
+</Tooltip>
+
+<!-- Placement -->
+<Tooltip tip="On the right" placement="right">
+  <Button>Hover me</Button>
+</Tooltip>
+
+<!-- With color -->
+<Tooltip tip="Something went wrong" color="error">
+  <Button color="error">Delete</Button>
+</Tooltip>
+
+<!-- Rich content slot -->
+<Tooltip color="primary">
+  <template #content>
+    <strong>Pro tip</strong> — press <kbd>⌘S</kbd> to save
+  </template>
+  <Button>Hover for tip</Button>
+</Tooltip>
+
+<!-- Inline anchor -->
+<Tooltip tip="User profile" as="span">
+  <Badge color="primary">@john</Badge>
+</Tooltip>
+
+<!-- Always open -->
+<Tooltip tip="Always visible" :open="true">
+  <Button>Trigger</Button>
+</Tooltip>
+```
+</docs>

package/src/components/feedback/tooltip/Tooltip.vue

@@ -0,0 +1,123 @@
+<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 { TOOLTIP_CONFIG } from './tooltip.context'
+import type { TooltipProps } from './tooltip.props'
+import type { TooltipColor, TooltipPlacement } from './tooltip.types'
+
+const tooltipColors: ComponentClass<'tooltip', TooltipColor> = {
+  neutral: 'tooltip-neutral',
+  primary: 'tooltip-primary',
+  secondary: 'tooltip-secondary',
+  accent: 'tooltip-accent',
+  info: 'tooltip-info',
+  success: 'tooltip-success',
+  warning: 'tooltip-warning',
+  error: 'tooltip-error',
+}
+
+const tooltipPlacements: ComponentClass<'tooltip', TooltipPlacement> = {
+  top: 'tooltip-top',
+  bottom: 'tooltip-bottom',
+  left: 'tooltip-left',
+  right: 'tooltip-right',
+}
+</script>
+
+<script setup lang="ts">
+import { onMounted, useId, useTemplateRef } from 'vue'
+
+const props = defineProps<TooltipProps>()
+const config = useComponentConfig(TOOLTIP_CONFIG, props, {
+  as: 'div',
+  placement: 'top',
+})
+
+const id = useId()
+const tooltipId = `tooltip-${id}`
+const anchorName = `--anchor-${id}`
+
+const tooltip = useTemplateRef('tooltip')
+
+onMounted(() => {
+  if (config.value.open && !config.value.disabled) {
+    tooltip.value?.showPopover()
+  }
+})
+</script>
+
+<template>
+  <component
+    :is="config.as"
+    class="tooltip-anchor"
+    @mouseenter="!config.disabled && !config.open && tooltip?.showPopover()"
+    @mouseleave="!config.disabled && !config.open && tooltip?.hidePopover()"
+  >
+    <slot />
+
+    <Teleport to="body">
+      <div
+        v-show="!config.disabled && (config.tip || $slots.content)"
+        ref="tooltip"
+        popover="manual"
+        :id="tooltipId"
+        class="tooltip-popover"
+        :class="[
+          getClass(tooltipColors, config.color),
+          getClass(tooltipPlacements, config.placement),
+          { 'tooltip-open': config.open },
+        ]"
+      >
+        <slot name="content">{{ config.tip }}</slot>
+      </div>
+    </Teleport>
+  </component>
+</template>
+
+<style scoped lang="scss">
+.tooltip-anchor {
+  anchor-name: v-bind(anchorName);
+  display: inline-block;
+}
+
+.tooltip-popover {
+  position: fixed;
+  position-anchor: v-bind(anchorName);
+  margin: 0;
+  padding: 0.25rem 0.5rem;
+  border: none;
+  border-radius: 0.25rem;
+  background: var(--color-base-300);
+  color: var(--color-base-content);
+  font-size: 0.875rem;
+  white-space: nowrap;
+  inset: unset;
+
+  &.tooltip-top {
+    bottom: calc(anchor(top) + 0.5rem);
+    justify-self: anchor-center;
+  }
+  &.tooltip-bottom {
+    top: calc(anchor(bottom) + 0.5rem);
+    justify-self: anchor-center;
+  }
+  &.tooltip-left {
+    right: calc(anchor(left) + 0.5rem);
+    align-self: anchor-center;
+  }
+  &.tooltip-right {
+    left: calc(anchor(right) + 0.5rem);
+    align-self: anchor-center;
+  }
+
+  $tooltip-colors: "neutral", "primary", "secondary", "accent", "info", "success", "warning", "error";
+
+  @each $name in $tooltip-colors {
+    &.tooltip-#{$name} {
+      background: var(--color-#{$name});
+      color: var(--color-#{$name}-content);
+    }
+  }
+}
+</style>

package/src/components/feedback/tooltip/tooltip.context.ts

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

package/src/components/feedback/tooltip/tooltip.props.ts

@@ -0,0 +1,44 @@
+import type { TooltipColor, TooltipPlacement } from './tooltip.types'
+
+export interface TooltipConfigurableProps {
+  /**
+   * Placement of the tooltip relative to the anchor element.
+   *
+   * @default 'top'
+   */
+  placement?: TooltipPlacement
+
+  /**
+   * Color theme of the tooltip based on the DaisyUI palette.
+   */
+  color?: TooltipColor
+
+  /**
+   * HTML tag or component used to render the anchor wrapper.
+   *
+   * @default 'div'
+   */
+  as?: string
+}
+
+export interface TooltipProps extends TooltipConfigurableProps {
+  /**
+   * Text content of the tooltip.
+   * Can be overridden by the `content` slot.
+   */
+  tip?: string
+
+  /**
+   * When `true`, the tooltip is always visible regardless of hover state.
+   *
+   * @default false
+   */
+  open?: boolean
+
+  /**
+   * When `true`, the tooltip is never shown.
+   *
+   * @default false
+   */
+  disabled?: boolean
+}

package/src/components/feedback/tooltip/tooltip.types.ts

@@ -0,0 +1,2 @@
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right'
+export type TooltipColor = 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'

package/src/components/layout/divider/Divider.story.vue

@@ -0,0 +1,217 @@
+<script lang="ts">
+import { reactive } from 'vue'
+import Divider from './Divider.vue'
+import type { DividerProps } from './divider.props'
+import type { DividerColor, DividerPlacement } from './divider.types'
+</script>
+
+<script setup lang="ts">
+const state = reactive<DividerProps>({
+  orientation: 'horizontal',
+  color: undefined,
+  placement: undefined,
+})
+
+const colors = ['neutral', 'primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error'] satisfies DividerColor[]
+const placements = ['start', 'end'] satisfies DividerPlacement[]
+</script>
+
+<template>
+  <Story group="components" title="Layout/Divider" auto-props-disabled>
+    <template #default>
+
+      <Variant title="Default">
+        <template #controls>
+          <HstSelect title="Orientation" v-model="state.orientation" :options="['horizontal', 'vertical']" />
+          <HstSelect title="Color" v-model="state.color" :options="[{ label: '-- default --', value: undefined }, ...colors]" />
+          <HstSelect title="Placement" v-model="state.placement" :options="[{ label: '-- default --', value: undefined }, ...placements]" />
+        </template>
+
+        <template #source>
+          <textarea v-pre>
+            <div class="flex gap-4">
+              <span>Left</span>
+              <Divider />
+              <span>Right</span>
+            </div>
+          </textarea>
+        </template>
+
+        <div class="flex gap-4 p-4">
+          <span>Left</span>
+          <Divider v-bind="state" />
+          <span>Right</span>
+        </div>
+      </Variant>
+
+      <Variant title="Colors">
+        <template #source>
+          <textarea v-pre>
+            <div class="flex flex-col gap-2">
+              <div v-for="color in ['neutral', 'primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error']" :key="color">
+                <Divider :color="color">
+                  <span>{{ color }}</span>
+                </Divider>
+              </div>
+            </div>
+          </textarea>
+        </template>
+
+        <div class="flex flex-col gap-2 p-4">
+          <Divider>
+            <span>default</span>
+          </Divider>
+          <div v-for="color in colors" :key="color" class="flex items-center gap-2">
+            <Divider :color="color">
+              <span class="">{{ color }}</span>
+            </Divider>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="Placement">
+        <template #source>
+          <textarea v-pre>
+            <div class="flex flex-col gap-4">
+              <Divider placement="start">Text</Divider>
+              <Divider>Text</Divider>
+              <Divider placement="end">Text</Divider>
+            </div>
+            <div class="flex h-24">
+              <Divider placement="start" orientation="horizontal">start</Divider>
+              <Divider orientation="horizontal">default</Divider>
+              <Divider placement="end" orientation="horizontal">end</Divider>
+            </div>
+          </textarea>
+        </template>
+
+        <div class="flex flex-col gap-4 p-4">
+          <Divider placement="start" color="primary">start</Divider>
+          <Divider color="primary">default</Divider>
+          <Divider placement="end" color="primary">end</Divider>
+        </div>
+        <div class="flex h-24">
+          <Divider placement="start" color="primary" orientation="horizontal">start</Divider>
+          <Divider color="primary" orientation="horizontal">default</Divider>
+          <Divider placement="end" color="primary" orientation="horizontal">end</Divider>
+        </div>
+      </Variant>
+
+      <Variant title="Orientation">
+        <div class="flex gap-4 p-4">
+          <div class="flex gap-2 items-center">
+            <span>Horizontal</span>
+            <Divider orientation="horizontal" color="primary" />
+            <span>Divider</span>
+          </div>
+          <div class="flex flex-col gap-2 items-center h-24">
+            <span>Vertical</span>
+            <Divider orientation="vertical" color="primary" />
+            <span>Divider</span>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="With text">
+        <template #source>
+          <textarea v-pre>
+            <div class="flex gap-4">
+              <span>Option A</span>
+              <Divider>OR</Divider>
+              <span>Option B</span>
+            </div>
+          </textarea>
+        </template>
+
+        <div class="flex gap-4 p-4">
+          <span>Option A</span>
+          <Divider orientation="horizontal">OR</Divider>
+          <span>Option B</span>
+        </div>
+      </Variant>
+
+      <Variant title="Composition">
+        <template #source>
+          <textarea v-pre>
+            <div class="flex flex-col gap-2">
+              <div class="flex gap-4">
+                <span>Name</span>
+                <Divider orientation="vertical" />
+                <span>Value</span>
+              </div>
+              <Divider color="primary" placement="middle">Summary</Divider>
+              <div class="flex gap-4">
+                <span>Total</span>
+                <Divider orientation="vertical" />
+                <span>100</span>
+              </div>
+            </div>
+          </textarea>
+        </template>
+
+        <div class="flex flex-col gap-2 p-4">
+          <div class="flex gap-4">
+            <span>Name</span>
+            <Divider orientation="vertical" />
+            <span>Value</span>
+          </div>
+          <Divider color="primary">Summary</Divider>
+          <div class="flex gap-4">
+            <span>Total</span>
+            <Divider orientation="vertical" />
+            <span>100</span>
+          </div>
+        </div>
+      </Variant>
+
+    </template>
+  </Story>
+</template>
+
+<docs lang="md">
+# Divider
+
+## Description
+
+A simple line to visually separate content. Built on DaisyUI's `divider` component.
+Supports horizontal and vertical orientations, multiple colors, and text placement.
+
+## Props
+
+| Prop         | Type                 | Default       | Required | Configurable       | Description                                                                                                |
+|--------------|----------------------|---------------|----------|--------------------|------------------------------------------------------------------------------------------------------------|
+| `orientation`| `DividerOrientation` | `'horizontal'`| :x:      | :white_check_mark: | Orientation: `'horizontal'` or `'vertical'`.                                                               |
+| `color`      | `DividerColor`       | `undefined`   | :x:      | :white_check_mark: | Color: `'neutral'`, `'primary'`, `'secondary'`, `'accent'`, `'info'`, `'success'`, `'warning'`, `'error'`. |
+| `placement`  | `DividerPlacement`   | `undefined`   | :x:      | :white_check_mark: | Text placement: `'start'`, `'end'`, `'middle'`, `'none'`.                                                  |
+
+> **Configurable** props can be set globally via the Poppy UI plugin (`components.divider` option). See [Plugin Configuration](../../../stories/Configuration.story.md) for more information.
+
+## Usage
+
+```vue
+<!-- Horizontal divider (default) -->
+<div class="flex gap-4">
+  <span>Left</span>
+  <Divider />
+  <span>Right</span>
+</div>
+
+<!-- Vertical divider -->
+<div class="flex gap-4">
+  <span>Top</span>
+  <Divider orientation="vertical" />
+  <span>Bottom</span>
+</div>
+
+<!-- With color -->
+<Divider color="primary" />
+
+<!-- With text and placement -->
+<Divider placement="middle">OR</Divider>
+
+<!-- All options -->
+<Divider orientation="horizontal" color="success" placement="start">
+  Text
+</Divider>
+```
+</docs>