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

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

@@ -0,0 +1,25 @@
+import type { LoadingColor, LoadingSize, LoadingVariant } from './loading.types'
+
+export interface LoadingConfigurableProps {
+  /**
+   * Visual style of the loading indicator.
+   *
+   * @default 'spinner'
+   */
+  variant?: LoadingVariant
+
+  /**
+   * Size of the loading indicator.
+   *
+   * @default 'md'
+   */
+  size?: LoadingSize
+
+  /**
+   * Color of the loading indicator based on the DaisyUI palette.
+   * Applied as a Tailwind `text-*` utility class.
+   */
+  color?: LoadingColor
+}
+
+export interface LoadingProps extends LoadingConfigurableProps {}

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

@@ -0,0 +1,5 @@
+import type { ComponentSize } from '@/types/size.type'
+
+export type LoadingVariant = 'spinner' | 'dots' | 'ring' | 'ball' | 'bars' | 'infinity'
+export type LoadingSize = ComponentSize
+export type LoadingColor = 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error'

package/src/components/feedback/progress/Progress.story.vue

@@ -0,0 +1,96 @@
+<script lang="ts">
+import { reactive } from 'vue'
+import Progress from './Progress.vue'
+import type { ProgressProps } from './progress.props'
+</script>
+
+<script setup lang="ts">
+const state = reactive<ProgressProps>({
+  value: 40,
+  max: 100,
+  color: undefined,
+  indeterminate: false,
+})
+</script>
+
+<template>
+  <Story group="components" title="Feedback/Progress" auto-props-disabled>
+
+    <Variant title="Default">
+      <template #controls>
+        <HstSelect
+          v-model="state.color"
+          title="Color"
+          :options="[
+            { label: '-- default --', value: undefined },
+            'neutral', 'primary', 'secondary', 'accent',
+            'info', 'success', 'warning', 'error',
+          ]"
+        />
+        <HstSlider v-model="state.value" title="Value" :min="0" :max="100" />
+        <HstCheckbox v-model="(state.indeterminate as boolean)" title="Indeterminate" />
+      </template>
+      <Progress v-bind="state" class="w-56" />
+    </Variant>
+
+    <Variant title="Colors">
+      <div class="flex flex-col gap-2">
+        <Progress color="neutral" :value="70" class="w-56" />
+        <Progress color="primary" :value="70" class="w-56" />
+        <Progress color="secondary" :value="70" class="w-56" />
+        <Progress color="accent" :value="70" class="w-56" />
+        <Progress color="info" :value="70" class="w-56" />
+        <Progress color="success" :value="70" class="w-56" />
+        <Progress color="warning" :value="70" class="w-56" />
+        <Progress color="error" :value="70" class="w-56" />
+      </div>
+    </Variant>
+
+    <Variant title="Values">
+      <div class="flex flex-col gap-2">
+        <Progress color="primary" :value="0" class="w-56" />
+        <Progress color="primary" :value="25" class="w-56" />
+        <Progress color="primary" :value="50" class="w-56" />
+        <Progress color="primary" :value="75" class="w-56" />
+        <Progress color="primary" :value="100" class="w-56" />
+      </div>
+    </Variant>
+
+    <Variant title="Indeterminate">
+      <div class="flex flex-col gap-2">
+        <Progress class="w-56" />
+        <Progress color="primary" indeterminate class="w-56" />
+        <Progress color="success" indeterminate class="w-56" />
+      </div>
+    </Variant>
+
+  </Story>
+</template>
+
+<docs lang="md">
+# Progress
+
+## Description
+Progress bar used to show the completion of a task or the passing of time.
+Omitting `value` or setting `indeterminate` renders an animated indeterminate state.
+
+## Props
+| Prop            | Type            | Default     | Required | Configurable       | Description                                                          |
+|-----------------|-----------------|-------------|----------|--------------------|----------------------------------------------------------------------|
+| `color`         | `ProgressColor` | `undefined` | :x:      | :white_check_mark: | Color of the progress bar                                            |
+| `value`         | `number`        | `undefined` | :x:      | :x:                | Current value. Omit for indeterminate state                          |
+| `max`           | `number`        | `100`       | :x:      | :white_check_mark: | Maximum value                                                        |
+| `indeterminate` | `boolean`       | `false`     | :x:      | :x:                | Forces indeterminate (animated) state, takes precedence over `value` |
+
+## Usage
+```vue
+<!-- Determinate -->
+<Progress color="primary" :value="40" :max="100" />
+
+<!-- Indeterminate -->
+<Progress color="primary" indeterminate />
+
+<!-- Indeterminate (no value) -->
+<Progress color="primary" />
+```
+</docs>

package/src/components/feedback/progress/Progress.vue

@@ -0,0 +1,36 @@
+<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 { computed } from 'vue'
+import { PROGRESS_CONFIG } from './progress.context'
+import type { ProgressProps } from './progress.props'
+import type { ProgressColor } from './progress.types'
+
+const colors: ComponentClass<'progress', ProgressColor> = {
+  neutral: 'progress-neutral',
+  primary: 'progress-primary',
+  secondary: 'progress-secondary',
+  accent: 'progress-accent',
+  info: 'progress-info',
+  success: 'progress-success',
+  warning: 'progress-warning',
+  error: 'progress-error',
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<ProgressProps>()
+const config = useComponentConfig(PROGRESS_CONFIG, props, { max: 100 })
+
+const isIndeterminate = computed(() => props.indeterminate || props.value === undefined)
+</script>
+
+<template>
+  <progress
+    class="progress"
+    :class="getClass(colors, config.color)"
+    :value="isIndeterminate ? undefined : props.value"
+    :max="isIndeterminate ? undefined : config.max"
+  />
+</template>

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

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

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

@@ -0,0 +1,27 @@
+import type { ProgressColor } from './progress.types'
+export interface ProgressConfigurableProps {
+  /**
+   * Color of the progress bar.
+   */
+  color?: ProgressColor
+}
+export interface ProgressProps extends ProgressConfigurableProps {
+  /**
+   * Current value of the progress bar.
+   * Omit or set to `undefined` for indeterminate state.
+   */
+  value?: number
+  /**
+   * Maximum value of the progress bar.
+   *
+   * @default 100
+   */
+  max?: number
+  /**
+   * When true, renders the progress bar in an indeterminate (animated) state.
+   * Takes precedence over `value`.
+   *
+   * @default false
+   */
+  indeterminate?: boolean
+}

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

@@ -0,0 +1 @@
+export type ProgressColor = 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'

package/src/components/feedback/public.ts

@@ -0,0 +1,5 @@
+export { default as Alert } from './alert/Alert.vue'
+export { default as Loading } from './loading/Loading.vue'
+export { default as Progress } from './progress/Progress.vue'
+export { default as Toast } from './toast/Toast.vue'
+export { default as Tooltip } from './tooltip/Tooltip.vue'

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

@@ -0,0 +1,18 @@
+// Alert
+export type { AlertProps } from './alert/alert.props'
+export * from './alert/alert.types'
+// Loading
+export type { LoadingProps } from './loading/loading.props'
+export * from './loading/loading.types'
+// Progress
+export type { ProgressProps } from './progress/progress.props'
+export * from './progress/progress.types'
+// Radial Progress
+export type { RadialProgressProps } from './radial-progress/radial-progress.props'
+export * from './radial-progress/radial-progress.types'
+// Toast
+export type { ToastProps } from './toast/toast.props'
+export * from './toast/toast.types'
+// Tooltip
+export type { TooltipProps } from './tooltip/tooltip.props'
+export * from './tooltip/tooltip.types'

package/src/components/feedback/radial-progress/RadialProgress.story.vue

@@ -0,0 +1,118 @@
+<script lang="ts">
+import { reactive } from 'vue'
+import RadialProgress from './RadialProgress.vue'
+import type { RadialProgressProps } from './radial-progress.props'
+</script>
+
+<script setup lang="ts">
+const state = reactive<RadialProgressProps>({
+  value: 70,
+  color: undefined,
+  size: undefined,
+  thickness: undefined,
+})
+</script>
+
+<template>
+  <Story group="components" title="Feedback/RadialProgress" auto-props-disabled>
+
+    <Variant title="Default">
+      <template #controls>
+        <HstSelect
+          v-model="state.color"
+          title="Color"
+          :options="[
+            { label: '-- default --', value: undefined },
+            'neutral', 'primary', 'secondary', 'accent',
+            'info', 'success', 'warning', 'error',
+          ]"
+        />
+        <HstSlider v-model="state.value" title="Value" :min="0" :max="100" />
+      </template>
+      <div class="bg-base-100 p-4 rounded-lg">
+        <RadialProgress v-bind="state" />
+      </div>
+    </Variant>
+
+    <Variant title="Colors">
+      <div class="flex flex-wrap gap-4 bg-base-100 p-4 rounded-lg">
+        <RadialProgress color="neutral" :value="70" />
+        <RadialProgress color="primary" :value="70" />
+        <RadialProgress color="secondary" :value="70" />
+        <RadialProgress color="accent" :value="70" />
+        <RadialProgress color="info" :value="70" />
+        <RadialProgress color="success" :value="70" />
+        <RadialProgress color="warning" :value="70" />
+        <RadialProgress color="error" :value="70" />
+      </div>
+    </Variant>
+
+    <Variant title="Different values">
+      <div class="flex flex-wrap gap-4 bg-base-100 p-4 rounded-lg">
+        <RadialProgress color="primary" :value="0" />
+        <RadialProgress color="primary" :value="25" />
+        <RadialProgress color="primary" :value="50" />
+        <RadialProgress color="primary" :value="75" />
+        <RadialProgress color="primary" :value="100" />
+      </div>
+    </Variant>
+
+    <Variant title="Custom size and thickness">
+      <div class="flex flex-wrap gap-4 bg-base-100 p-4 rounded-lg">
+        <RadialProgress color="primary" :value="70" size="8rem" thickness="2px" />
+        <RadialProgress color="primary" :value="70" size="8rem" thickness="1rem" />
+        <RadialProgress color="primary" :value="70" size="12rem" thickness="4px" />
+      </div>
+    </Variant>
+
+    <Variant title="Custom slot content">
+      <div class="flex flex-wrap gap-4 bg-base-100 p-4 rounded-lg">
+        <RadialProgress color="primary" :value="70">
+          <span class="text-xs font-bold">70%</span>
+        </RadialProgress>
+        <RadialProgress color="success" :value="100">
+          ✓
+        </RadialProgress>
+        <RadialProgress color="warning" :value="30">
+          Low
+        </RadialProgress>
+      </div>
+    </Variant>
+
+  </Story>
+</template>
+
+<docs lang="md">
+# RadialProgress
+
+## Description
+Radial progress bar used to show the completion of a task or the passing of time.
+Renders as a `<div role="progressbar" />` for cross-browser compatibility (Firefox doesn't support pseudo-elements inside `<progress />`).
+
+## Props
+| Prop        | Type                  | Default     | Required | Configurable       | Description                                        |
+|-------------|-----------------------|-------------|----------|--------------------|----------------------------------------------------|
+| `value`     | `number`              | `0`         | :x:      | :x:                | Current value (0–100)                              |
+| `color`     | `RadialProgressColor` | `undefined` | :x:      | :white_check_mark: | Color of the progress arc (`text-{color}`)         |
+| `size`      | `string`              | `'5rem'`    | :x:      | :white_check_mark: | Size of the circle (any CSS value, e.g. `'8rem'`)  |
+| `thickness` | `string`              | `'10%'`     | :x:      | :white_check_mark: | Thickness of the arc (any CSS value, e.g. `'2px'`) |
+
+## Slots
+| Slot      | Description                                             |
+|-----------|---------------------------------------------------------|
+| `default` | Content displayed at the center. Defaults to `{value}%` |
+
+## Usage
+```vue
+<!-- Default -->
+<RadialProgress color="primary" :value="70" />
+
+<!-- Custom size & thickness -->
+<RadialProgress color="success" :value="40" size="8rem" thickness="4px" />
+
+<!-- Custom center content -->
+<RadialProgress color="warning" :value="30">
+  Low
+</RadialProgress>
+```
+</docs>

package/src/components/feedback/radial-progress/RadialProgress.vue

@@ -0,0 +1,46 @@
+<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 { computed } from 'vue'
+import { RADIAL_PROGRESS_CONFIG } from './radial-progress.context'
+import type { RadialProgressProps } from './radial-progress.props'
+import type { RadialProgressColor } from './radial-progress.types'
+
+const colors: ComponentClass<'text', RadialProgressColor> = {
+  neutral: 'text-neutral',
+  primary: 'text-primary',
+  secondary: 'text-secondary',
+  accent: 'text-accent',
+  info: 'text-info',
+  success: 'text-success',
+  warning: 'text-warning',
+  error: 'text-error',
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<RadialProgressProps>()
+const config = useComponentConfig(RADIAL_PROGRESS_CONFIG, props, {
+  value: 0,
+  size: '5rem',
+})
+
+const cssVars = computed(() => ({
+  '--value': config.value.value,
+  ...(config.value.size && { '--size': config.value.size }),
+  ...(config.value.thickness && { '--thickness': config.value.thickness }),
+}))
+</script>
+
+<template>
+  <div
+    class="radial-progress"
+    :class="getClass(colors, config.color)"
+    :style="cssVars"
+    :aria-valuenow="config.value"
+    role="progressbar"
+  >
+    <slot>{{ config.value }}%</slot>
+  </div>
+</template>

package/src/components/feedback/radial-progress/radial-progress.context.ts

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

package/src/components/feedback/radial-progress/radial-progress.props.ts

@@ -0,0 +1,35 @@
+import type { RadialProgressColor } from './radial-progress.types'
+
+export interface RadialProgressConfigurableProps {
+  /**
+   * Color of the radial progress arc.
+   * Applied as a `text-{color}` Tailwind class.
+   */
+  color?: RadialProgressColor
+
+  /**
+   * Size of the radial progress circle.
+   * Accepts any valid CSS size value.
+   *
+   * @default '5rem'
+   */
+  size?: string
+
+  /**
+   * Thickness of the progress arc.
+   * Accepts any valid CSS size value. Defaults to 10% of `size`.
+   *
+   * @example '2px'
+   * @example '1rem'
+   */
+  thickness?: string
+}
+
+export interface RadialProgressProps extends RadialProgressConfigurableProps {
+  /**
+   * Current value of the radial progress (0–100).
+   *
+   * @default 0
+   */
+  value?: number
+}

package/src/components/feedback/radial-progress/radial-progress.types.ts

@@ -0,0 +1,9 @@
+export type RadialProgressColor =
+  | 'neutral'
+  | 'primary'
+  | 'secondary'
+  | 'accent'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'error'