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

package/src/components/data/checkbox/Checkbox.story.vue

@@ -0,0 +1,206 @@
+<script lang="ts">
+import Form from '@/components/data/form/Form.vue'
+import FormField from '@/components/data/form-field/FormField.vue'
+import { reactive, ref } from 'vue'
+import { createI18n } from 'vue-i18n'
+import Checkbox from './Checkbox.vue'
+import type { CheckboxProps } from './checkbox.props'
+</script>
+
+<script setup lang="ts">
+const model = ref<boolean>(false)
+
+const state = reactive<CheckboxProps>({
+  size: 'md',
+  indeterminate: false,
+})
+
+const formData = ref<Record<string, unknown>>({ agree: false })
+</script>
+
+<template>
+  <Story group="components" title="Data/Checkbox" auto-props-disabled :setup-app="({ app }) => {
+    app.use(createI18n({}))
+  }">
+
+    <Variant title="Default" id="default">
+      <template #controls>
+        <HstSelect
+          v-model="state.color"
+          title="color"
+          :options="[undefined, 'neutral', 'primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error']"
+        />
+        <HstSelect
+          v-model="state.size"
+          title="size"
+          :options="['xs', 'sm', 'md', 'lg', 'xl']"
+        />
+        <HstCheckbox v-model="(state.indeterminate as boolean)" title="indeterminate" />
+        <HstCheckbox v-model="(state.disabled as boolean)" title="disabled" />
+        <HstCheckbox v-model="(state.readonly as boolean)" title="readonly" />
+        <HstCheckbox v-model="(state.required as boolean)" title="required" />
+        <HstText v-model="state.description" title="description" />
+        <HstText v-model="state.hint" title="hint" />
+      </template>
+
+      <Checkbox v-model="model" v-bind="state" />
+    </Variant>
+
+    <Variant title="Colors" id="colors">
+      <div class="flex flex-wrap gap-4 p-4">
+        <Checkbox v-model="model" color="neutral" />
+        <Checkbox v-model="model" color="primary" />
+        <Checkbox v-model="model" color="secondary" />
+        <Checkbox v-model="model" color="accent" />
+        <Checkbox v-model="model" color="info" />
+        <Checkbox v-model="model" color="success" />
+        <Checkbox v-model="model" color="warning" />
+        <Checkbox v-model="model" color="error" />
+      </div>
+    </Variant>
+
+    <Variant title="Sizes" id="sizes">
+      <div class="flex items-center gap-4 p-4">
+        <Checkbox v-model="model" size="xs" />
+        <Checkbox v-model="model" size="sm" />
+        <Checkbox v-model="model" size="md" />
+        <Checkbox v-model="model" size="lg" />
+        <Checkbox v-model="model" size="xl" />
+      </div>
+    </Variant>
+
+    <Variant title="Indeterminate" id="indeterminate">
+      <Checkbox v-model="model" indeterminate />
+    </Variant>
+
+    <Variant title="Disabled" id="disabled">
+      <div class="flex gap-4">
+        <Checkbox v-model="model" disabled />
+        <Checkbox :model-value="true" disabled />
+      </div>
+    </Variant>
+
+    <Variant title="Readonly" id="readonly">
+      <div class="flex gap-4">
+        <Checkbox v-model="model" readonly />
+        <Checkbox :model-value="true" readonly description="Cannot be toggled" />
+      </div>
+    </Variant>
+
+    <Variant title="With Description" id="with-description">
+      <div class="flex flex-col gap-3">
+        <Checkbox v-model="model" description="Enable notifications for new messages" />
+        <Checkbox v-model="model" color="primary" description="Subscribe to the newsletter" />
+      </div>
+    </Variant>
+
+    <Variant title="With Hint" id="with-hint">
+      <div class="flex flex-col gap-3">
+        <Checkbox
+          v-model="model"
+          description="Enable two-factor authentication"
+          hint="Adds an extra layer of security to your account"
+        />
+        <Checkbox
+          v-model="model"
+          color="primary"
+          description="Subscribe to the newsletter"
+          hint="You can unsubscribe at any time"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Required" id="required">
+      <Checkbox v-model="model" description="I accept the terms and conditions" required />
+    </Variant>
+
+    <Variant title="Inside FormField" id="inside-form-field">
+      <Form v-model="formData">
+        <FormField name="agree" label="Terms & conditions">
+          <Checkbox required description="I agree to the terms and conditions" />
+        </FormField>
+      </Form>
+    </Variant>
+
+  </Story>
+</template>
+
+<docs lang="md">
+# Checkbox
+
+## Description
+
+Checkbox component built on the DaisyUI `checkbox` element.
+Works standalone with `v-model` or inside `<FormField />` for full form integration (validation, required indicator).
+
+## API
+
+### v-model
+
+| Name         | Type      | Modifiers | Description          |
+|--------------|-----------|-----------|----------------------|
+| `modelValue` | `boolean` | -         | Bound checked state. |
+
+### Props
+
+| Prop            | Type            | Default     | Configurable       | Description                                                      |
+|-----------------|-----------------|-------------|--------------------|--------------------------------------------------------------------|
+| `color`         | `CheckboxColor` | `undefined` | :white_check_mark: | Color variant.                                                   |
+| `size`          | `CheckboxSize`  | `'md'`      | :white_check_mark: | Size.                                                            |
+| `indeterminate` | `boolean`       | `false`     | :x:                | Renders the indeterminate visual state.                          |
+| `description`   | `string`        | `undefined` | :x:                | Primary label text displayed to the right of the checkbox.       |
+| `hint`          | `string`        | `undefined` | :x:                | Secondary hint text displayed below the description.             |
+| `disabled`      | `boolean`       | `undefined` | :x:                | Native disabled.                                                 |
+| `readonly`      | `boolean`       | `undefined` | :x:                | Prevents toggling without disabling the visual state.            |
+| `required`      | `boolean`       | `undefined` | :x:                | Native required. Displays `"*"` next to the description.         |
+
+### Expose
+
+| Name    | Type                   | Description                                    |
+|---------|------------------------|------------------------------------------------|
+| `$el`   | `HTMLInputElement ref` | Ref to the underlying `<input />` DOM element. |
+| `focus` | `() => void`           | Programmatically focuses the checkbox.         |
+
+### Events
+
+| Event     | Payload | Description                                                                             |
+|-----------|---------|-----------------------------------------------------------------------------------------|
+| `@change` | `Event` | Emitted when the checked state changes (native change event).                           |
+| `@blur`   | `Event` | Emitted when the checkbox loses focus. Triggers validation when inside `<FormField />`. |
+
+### Slots
+
+| Slot          | Bindings | Description                                                    |
+|---------------|----------|----------------------------------------------------------------|
+| `description` | -        | Primary label text displayed to the right of the checkbox.     |
+| `hint`        | -        | Secondary hint text displayed below the description.           |
+
+> **Configurable** props can be set globally via the Poppy UI plugin (`components.checkbox` option). See [Plugin Configuration](../../../stories/Configuration.story.md) for more information.
+
+## Usage
+```vue
+<!-- Standalone -->
+<Checkbox v-model="accepted" color="primary" />
+
+<!-- With description -->
+<Checkbox v-model="accepted" description="Subscribe to the newsletter" />
+
+<!-- With description and hint -->
+<Checkbox
+  v-model="enabled"
+  description="Enable two-factor authentication"
+  hint="Adds an extra layer of security"
+/>
+
+<!-- Required -->
+<Checkbox v-model="agreed" description="I accept the terms" required />
+
+<!-- Indeterminate -->
+<Checkbox v-model="partialSelection" indeterminate />
+
+<!-- Inside FormField -->
+<FormField name="agree" label="Terms & conditions">
+  <Checkbox required description="I agree to the terms and conditions" />
+</FormField>
+```
+</docs>

package/src/components/data/checkbox/Checkbox.vue

@@ -0,0 +1,139 @@
+<script lang="ts">
+import { useComponentConfig } from '@/composables/use-component-config'
+import { useFormField } from '@/composables/use-form-field'
+import type { ComponentClass } from '@/types/utils.type'
+import { getClass } from '@/utils/build-class.util'
+import { computed, useSlots, useTemplateRef, watchEffect } from 'vue'
+import { CHECKBOX_CONFIG } from './checkbox.context'
+import type { CheckboxProps } from './checkbox.props'
+import type { CheckboxColor, CheckboxSize } from './checkbox.types'
+
+const colors: ComponentClass<'checkbox', CheckboxColor> = {
+  neutral: 'checkbox-neutral',
+  primary: 'checkbox-primary',
+  secondary: 'checkbox-secondary',
+  accent: 'checkbox-accent',
+  info: 'checkbox-info',
+  success: 'checkbox-success',
+  warning: 'checkbox-warning',
+  error: 'checkbox-error',
+}
+
+const sizes: ComponentClass<'checkbox', CheckboxSize> = {
+  xs: 'checkbox-xs',
+  sm: 'checkbox-sm',
+  md: 'checkbox-md',
+  lg: 'checkbox-lg',
+  xl: 'checkbox-xl',
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<CheckboxProps>()
+const model = defineModel<boolean>()
+const config = useComponentConfig(CHECKBOX_CONFIG, props, { size: 'md' })
+
+const inputEl = useTemplateRef('inputEl')
+const slots = useSlots()
+
+// ── Indeterminate — must be set imperatively on the DOM node ─────────────────
+
+watchEffect(() => {
+  if (inputEl.value) {
+    inputEl.value.indeterminate = !!props.indeterminate
+  }
+})
+
+// ── Form field ───────────────────────────────────────────────────────────────
+
+const { field, fieldValue, onBlur, clearError } = useFormField<boolean>({
+  required: computed(() => !!props.required),
+  inputEl,
+})
+
+// ── Value resolution ─────────────────────────────────────────────────────────
+
+const resolvedValue = computed(() =>
+  field ? fieldValue.value : model.value,
+)
+
+function handleChange(event: Event): void {
+  if (props.readonly) {
+    event.preventDefault()
+    return
+  }
+  const checked = (event.target as HTMLInputElement).checked
+  model.value = checked
+  field?.setValue(checked)
+  field?.setDirty(true)
+  clearError()
+}
+
+// ── Error / description ──────────────────────────────────────────────────────
+
+const hasError = computed(() => !!field?.error.value)
+const hasDescription = computed(() => !!(props.description || slots.description))
+const hasHint = computed(() => !!(props.hint || slots.hint))
+const hasLabel = computed(() => hasDescription.value || hasHint.value)
+
+defineExpose({
+  $el: inputEl,
+  focus: () => inputEl.value?.focus(),
+})
+</script>
+
+<template>
+  <!-- Checkbox with description / hint label to the right -->
+  <label
+    v-if="hasLabel"
+    class="flex cursor-pointer items-start gap-2"
+    :class="{ 'opacity-60 pointer-events-none': disabled || readonly }"
+  >
+    <input
+      ref="inputEl"
+      type="checkbox"
+      class="checkbox mt-0.5"
+      :class="[
+        getClass(colors, config.color),
+        getClass(sizes, config.size),
+        { 'checkbox-error': hasError },
+        { validator: required },
+      ]"
+      :checked="resolvedValue"
+      :disabled="disabled"
+      :required="required"
+      :aria-invalid="hasError || undefined"
+      @change="handleChange"
+      @blur="onBlur"
+    />
+    <span class="flex flex-col gap-0.5">
+      <span v-if="hasDescription" class="label-text leading-snug">
+        <slot name="description">{{ description }}</slot>
+        <span v-if="required" class="text-error ml-0.5" aria-hidden="true">*</span>
+      </span>
+      <span v-if="hasHint" class="label-text text-xs text-base-content/60 leading-snug">
+        <slot name="hint">{{ hint }}</slot>
+      </span>
+    </span>
+  </label>
+
+  <!-- Bare checkbox — no label -->
+  <input
+    v-else
+    ref="inputEl"
+    type="checkbox"
+    class="checkbox"
+    :class="[
+      getClass(colors, config.color),
+      getClass(sizes, config.size),
+      { 'checkbox-error': hasError },
+      { validator: required },
+    ]"
+    :checked="resolvedValue"
+    :disabled="disabled"
+    :required="required"
+    :aria-invalid="hasError || undefined"
+    @change="handleChange"
+    @blur="onBlur"
+  />
+</template>

package/src/components/data/checkbox/checkbox.context.ts

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

package/src/components/data/checkbox/checkbox.props.ts

@@ -0,0 +1,42 @@
+import type { InputHTMLAttributes } from 'vue'
+import type { CheckboxColor, CheckboxSize } from './checkbox.types'
+export interface CheckboxConfigurableProps {
+  /**
+   * Color of the checkbox.
+   */
+  color?: CheckboxColor
+  /**
+   * Size of the checkbox.
+   *
+   * @default 'md'
+   */
+  size?: CheckboxSize
+}
+interface NativeCheckbox {
+  /** Disables the checkbox. */
+  disabled?: InputHTMLAttributes['disabled']
+  /** Marks the field as required — signals FormField to display "*". */
+  required?: InputHTMLAttributes['required']
+}
+export interface CheckboxProps extends CheckboxConfigurableProps, NativeCheckbox {
+  /**
+   * Renders the checkbox in an indeterminate visual state.
+   *
+   * @default false
+   */
+  indeterminate?: boolean
+  /**
+   * Primary label text displayed to the right of the checkbox.
+   * Use the `#description` slot for richer content.
+   */
+  description?: string
+  /**
+   * Secondary hint text displayed below the description label.
+   * Use the `#hint` slot for richer content.
+   */
+  hint?: string
+  /**
+   * Makes the checkbox read-only (prevents toggling).
+   */
+  readonly?: boolean
+}

package/src/components/data/checkbox/checkbox.types.ts

@@ -0,0 +1,5 @@
+import type { ComponentSize } from '@/types/size.type'
+
+export type CheckboxColor = 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
+
+export type CheckboxSize = ComponentSize

package/src/components/data/field-set/FieldSet.story.vue

@@ -0,0 +1,163 @@
+<script lang="ts">
+import Form from '@/components/data/form/Form.vue'
+import FormField from '@/components/data/form-field/FormField.vue'
+import Input from '@/components/data/input/Input.vue'
+import Textarea from '@/components/data/textarea/Textarea.vue'
+import { reactive, ref } from 'vue'
+import { createI18n } from 'vue-i18n'
+import FieldSet from './FieldSet.vue'
+import type { FieldSetProps } from './field-set.props'
+</script>
+
+<script setup lang="ts">
+const state = reactive<FieldSetProps>({
+  bordered: false,
+  background: false,
+})
+
+const formData = ref<Record<string, unknown>>({ name: '', bio: '' })
+</script>
+
+<template>
+  <Story group="components" title="Data/FieldSet" auto-props-disabled :setup-app="({ app }) => {
+    app.use(createI18n({}))
+  }">
+
+    <Variant title="Default" id="default">
+      <template #controls>
+        <HstText v-model="state.legend" title="legend" />
+        <HstCheckbox v-model="(state.bordered as boolean)" title="bordered" />
+        <HstCheckbox v-model="(state.background as boolean)" title="background" />
+      </template>
+
+      <FieldSet v-bind="state" legend="Personal info">
+        <p class="text-sm text-base-content/60">Fieldset content goes here.</p>
+      </FieldSet>
+    </Variant>
+
+    <Variant title="Bordered" id="bordered">
+      <FieldSet legend="Address" bordered>
+        <p class="text-sm">Street, city, country…</p>
+      </FieldSet>
+    </Variant>
+
+    <Variant title="Background" id="background">
+      <FieldSet legend="Preferences" background>
+        <p class="text-sm">Content on a tinted background.</p>
+      </FieldSet>
+    </Variant>
+
+    <Variant title="Bordered + Background" id="bordered-background">
+      <FieldSet legend="Settings" bordered background>
+        <p class="text-sm">Both styles combined.</p>
+      </FieldSet>
+    </Variant>
+
+    <Variant title="No Legend" id="no-legend">
+      <FieldSet bordered>
+        <p class="text-sm">A fieldset without a legend, just a border.</p>
+      </FieldSet>
+    </Variant>
+
+    <Variant title="Header / Footer slots" id="header-footer-slots">
+      <FieldSet legend="Advanced" bordered>
+        <template #header>
+          <p class="text-xs text-base-content/50 mb-2">
+            These settings affect all users in your organisation.
+          </p>
+        </template>
+        <p class="text-sm">Main content.</p>
+        <template #footer>
+          <p class="text-xs text-base-content/50 mt-2">
+            Changes take effect immediately.
+          </p>
+        </template>
+      </FieldSet>
+    </Variant>
+
+    <Variant title="Custom Legend slot" id="custom-legend-slot">
+      <FieldSet bordered>
+        <template #legend>
+          <span class="flex items-center gap-1">
+            🔒 <span>Security</span>
+          </span>
+        </template>
+        <p class="text-sm">Custom legend content via slot.</p>
+      </FieldSet>
+    </Variant>
+
+    <Variant title="Inside Form" id="inside-form">
+      <Form v-model="formData">
+        <FieldSet legend="Profile" bordered class="flex flex-col gap-3">
+          <FormField name="name" label="Name">
+            <Input placeholder="Your name" />
+          </FormField>
+          <FormField name="bio" label="Bio" hint="Short description about yourself">
+            <Textarea placeholder="I am…" :rows="3" />
+          </FormField>
+        </FieldSet>
+      </Form>
+    </Variant>
+
+  </Story>
+</template>
+
+<docs lang="md">
+# FieldSet
+
+## Description
+
+Semantic `<fieldset />` wrapper with a legend and layout slots.
+Designed to visually group related fields inside a `<Form />`.
+Supports optional border, background, and header/footer slots for introductory and summary content.
+
+## API
+
+### Props
+
+| Prop         | Type      | Default     | Description                                   |
+|--------------|-----------|-------------|-----------------------------------------------|
+| `legend`     | `string`  | `undefined` | Text displayed as the fieldset legend.        |
+| `bordered`   | `boolean` | `false`     | Adds a visible border around the fieldset.    |
+| `background` | `boolean` | `false`     | Adds a `base-200` background to the fieldset. |
+
+### Slots
+
+| Slot       | Bindings | Description                                               |
+|------------|----------|-----------------------------------------------------------|
+| `legend`   | -        | Custom legend content (replaces the `legend` prop text).  |
+| `header`   | -        | Content rendered above the default slot.                  |
+| `default`  | -        | Main fieldset content (form fields, text, etc.).          |
+| `footer`   | -        | Content rendered below the default slot.                  |
+
+## Usage
+```vue
+<!-- Simple -->
+<FieldSet legend="Personal info" bordered>
+  <FormField name="name" label="Name">
+    <Input />
+  </FormField>
+</FieldSet>
+
+<!-- With header and footer -->
+<FieldSet legend="Advanced" bordered>
+  <template #header>
+    <p class="text-xs text-base-content/50">These settings affect all users.</p>
+  </template>
+  <FormField name="timeout" label="Session timeout">
+    <Input type="number" />
+  </FormField>
+  <template #footer>
+    <p class="text-xs text-base-content/50">Changes are applied immediately.</p>
+  </template>
+</FieldSet>
+
+<!-- Custom legend slot -->
+<FieldSet bordered>
+  <template #legend>
+    🔒 Security
+  </template>
+  …
+</FieldSet>
+```
+</docs>

package/src/components/data/field-set/FieldSet.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { FieldSetProps } from './field-set.props'
+
+defineProps<FieldSetProps>()
+</script>
+
+<template>
+  <fieldset
+    class="fieldset w-full"
+    :class="[
+      bordered && 'border border-base-300 rounded-box p-4',
+      background && 'bg-base-200',
+    ]"
+  >
+    <legend v-if="legend || $slots.legend" class="fieldset-legend">
+      <slot name="legend">{{ legend }}</slot>
+    </legend>
+    <slot name="header" />
+    <slot />
+    <slot name="footer" />
+  </fieldset>
+</template>

package/src/components/data/field-set/field-set.props.ts

@@ -0,0 +1,21 @@
+export interface FieldSetProps {
+  /**
+   * Legend text displayed as the fieldset title.
+   * Use the `#legend` slot for richer content.
+   */
+  legend?: string
+
+  /**
+   * Adds a visible border around the fieldset.
+   *
+   * @default false
+   */
+  bordered?: boolean
+
+  /**
+   * Adds a background fill (`base-200`) to the fieldset.
+   *
+   * @default false
+   */
+  background?: boolean
+}