@baklavue/mcp 1.0.0

package/dist/docs/components/chip.md

@@ -0,0 +1,199 @@
+# Chip
+
+An indicator of a numeric value or a state. Wraps another element and displays a badge positioned at a corner.
+
+## Basic
+
+Wrap a button or icon with a Chip to display a notification count or label.
+
+<div class="component-demo">
+
+<ChipBasicDemo />
+
+</div>
+
+```vue
+<template>
+  <BvChip :text="5">
+    <BvButton kind="neutral" variant="tertiary" icon="mail" />
+  </BvChip>
+</template>
+
+<script setup>
+import { BvButton, BvChip } from "@baklavue/ui";
+</script>
+```
+
+## Colors
+
+Use the `color` prop to change the chip color.
+
+<div class="component-demo" style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: center">
+
+<ChipColorsDemo />
+
+</div>
+
+```vue
+<template>
+  <BvChip color="primary" :text="5">...</BvChip>
+  <BvChip color="success" :text="3">...</BvChip>
+  <BvChip color="danger" :text="12">...</BvChip>
+  <BvChip color="warning" :text="!">...</BvChip>
+  <BvChip color="info" :text="2">...</BvChip>
+  <BvChip color="neutral" :text="9">...</BvChip>
+</template>
+```
+
+## Sizes
+
+Use the `size` prop to change the chip size.
+
+<div class="component-demo">
+
+<ChipSizesDemo />
+
+</div>
+
+```vue
+<template>
+  <BvChip size="xs" :text="1">...</BvChip>
+  <BvChip size="sm" :text="5">...</BvChip>
+  <BvChip size="md" :text="12">...</BvChip>
+  <BvChip size="lg" :text="99">...</BvChip>
+</template>
+```
+
+## Position
+
+Use the `position` prop to change where the chip appears relative to the wrapped element.
+
+<div class="component-demo">
+
+<ChipPositionDemo />
+
+</div>
+
+```vue
+<template>
+  <BvChip position="top-right" :text="5">...</BvChip>
+  <BvChip position="bottom-right" :text="5">...</BvChip>
+  <BvChip position="top-left" :text="5">...</BvChip>
+  <BvChip position="bottom-left" :text="5">...</BvChip>
+</template>
+```
+
+## Inset
+
+Use the `inset` prop to keep the chip inside rounded elements like avatars.
+
+<div class="component-demo">
+
+<ChipInsetDemo />
+
+</div>
+
+```vue
+<template>
+  <BvChip :text="5" inset color="primary">
+    <div
+      class="avatar"
+      style="width: 40px; height: 40px; border-radius: 50%; ..."
+    />
+  </BvChip>
+</template>
+```
+
+## Standalone
+
+Use the `standalone` prop to display the chip inline without wrapping any content.
+
+<div class="component-demo">
+
+<ChipStandaloneDemo />
+
+</div>
+
+```vue
+<template>
+  <BvChip standalone :text="5" />
+  <BvChip standalone text="New" color="success" />
+  <BvChip standalone text="99+" color="danger" size="lg" />
+</template>
+
+<script setup>
+import { BvChip } from "@baklavue/ui";
+</script>
+```
+
+## Control Visibility
+
+Use the `show` prop to control when the chip is visible.
+
+<div class="component-demo">
+
+<ChipShowDemo />
+
+</div>
+
+```vue
+<template>
+  <BvChip :text="5" :show="show">
+    <BvButton kind="neutral" variant="tertiary" icon="mail" />
+  </BvChip>
+  <BvButton @click="show = !show">{{ show ? "Hide" : "Show" }} chip</BvButton>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvButton, BvChip } from "@baklavue/ui";
+
+const show = ref(true);
+</script>
+```
+
+## Props
+
+| Prop         | Type               | Default       | Description                                                      |
+| ------------ | ------------------ | ------------- | ---------------------------------------------------------------- |
+| `text`       | `string \| number` | -             | Text or number displayed inside the chip                         |
+| `color`      | `ChipColor`        | `'primary'`   | Color variant (primary, success, danger, warning, info, neutral) |
+| `size`       | `ChipSize`         | `'md'`        | Size variant (xs, sm, md, lg)                                    |
+| `position`   | `ChipPosition`     | `'top-right'` | Position (top-right, bottom-right, top-left, bottom-left)        |
+| `inset`      | `boolean`          | `false`       | Keep chip inside rounded elements                                |
+| `standalone` | `boolean`          | `false`       | Render inline without wrapping content                           |
+| `show`       | `boolean`          | `true`        | When false, hide the chip                                        |
+
+## Slots
+
+| Slot      | Description                   |
+| --------- | ----------------------------- |
+| `default` | Wrapped element (e.g. button) |
+| `content` | Override chip content         |
+
+## Types
+
+```typescript
+import type {
+  ChipProps,
+  ChipColor,
+  ChipSize,
+  ChipPosition,
+} from "@baklavue/ui";
+
+const props: ChipProps = {
+  text: 5,
+  color: "primary",
+  size: "md",
+  position: "top-right",
+  inset: false,
+  standalone: false,
+  show: true,
+};
+```
+
+## Usage Notes
+
+- **Notification counts**: Use the chip to show unread counts on mail, notification, or message icons.
+- **Status indicators**: Use with avatars to show online/offline status.
+- **Standalone badges**: Use `standalone` for inline badges in inputs, selects, or command palettes.

package/dist/docs/components/datepicker.md

@@ -0,0 +1,243 @@
+# Datepicker
+
+A Vue UI kit component for Baklava's `bl-datepicker` component with v-model support for date selection. The Datepicker provides a calendar picker input with options for min/max date constraints, placeholder text, and standard form states.
+
+## Basic Usage
+
+Use v-model for two-way binding of the selected date.
+
+<div class="component-demo">
+
+<DatepickerDemo variant="basic" />
+
+</div>
+
+```vue
+<template>
+  <BvDatepicker v-model="date" label="Select date" />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvDatepicker } from "@baklavue/ui";
+
+const date = ref("");
+</script>
+```
+
+## With Placeholder
+
+Add a placeholder to guide users when no date is selected.
+
+<div class="component-demo">
+
+<DatepickerDemo variant="placeholder" />
+
+</div>
+
+```vue
+<template>
+  <BvDatepicker v-model="date" label="Appointment" placeholder="Pick a date" />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvDatepicker } from "@baklavue/ui";
+
+const date = ref("");
+</script>
+```
+
+## Disabled State
+
+Disable the datepicker to prevent user interaction.
+
+<div class="component-demo">
+
+<DatepickerDemo variant="disabled" />
+
+</div>
+
+```vue
+<template>
+  <BvDatepicker v-model="date" label="Disabled datepicker" :disabled="true" />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvDatepicker } from "@baklavue/ui";
+
+const date = ref("");
+</script>
+```
+
+## Required State
+
+Mark the datepicker as required for form validation.
+
+<div class="component-demo">
+
+<DatepickerDemo variant="required" />
+
+</div>
+
+```vue
+<template>
+  <BvDatepicker v-model="date" label="Required date" :required="true" />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvDatepicker } from "@baklavue/ui";
+
+const date = ref("");
+</script>
+```
+
+## Min/Max Dates
+
+Restrict selectable dates using the `min` and `max` props. Dates should be provided as ISO date strings (YYYY-MM-DD).
+
+<div class="component-demo">
+
+<DatepickerDemo variant="minmax" />
+
+</div>
+
+```vue
+<template>
+  <BvDatepicker
+    v-model="date"
+    label="Date range"
+    placeholder="Select within range"
+    :min="minDate"
+    :max="maxDate"
+  />
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import { BvDatepicker } from "@baklavue/ui";
+
+const date = ref("");
+// Example: restrict to current month
+const now = new Date();
+const minDate = computed(
+  () =>
+    `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-01`,
+);
+const maxDate = computed(
+  () =>
+    `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(
+      new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate(),
+    ).padStart(2, "0")}`,
+);
+</script>
+```
+
+## Multiple Dates
+
+Select multiple dates by setting `type="multiple"`.
+
+<div class="component-demo">
+
+<DatepickerDemo variant="multiple" />
+
+</div>
+
+```vue
+<template>
+  <BvDatepicker v-model="dates" type="multiple" label="Select dates" />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvDatepicker } from "@baklavue/ui";
+
+const dates = ref<string[]>([]);
+</script>
+```
+
+## Date Range
+
+Select a date range by setting `type="range"`.
+
+<div class="component-demo">
+
+<DatepickerDemo variant="range" />
+
+</div>
+
+```vue
+<template>
+  <BvDatepicker v-model="range" type="range" label="Select range" />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvDatepicker } from "@baklavue/ui";
+
+const range = (ref < [string, string]) | (null > null);
+</script>
+```
+
+## Props
+
+| Prop          | Type                                             | Default     | Description                       |
+| ------------- | ------------------------------------------------ | ----------- | --------------------------------- |
+| `modelValue`  | `string \| string[] \| [string, string] \| null` | `undefined` | Selected date(s) (v-model)        |
+| `type`        | `"single" \| "multiple" \| "range"`              | `"single"`  | Selection mode                    |
+| `label`       | `string`                                         | `undefined` | Datepicker label                  |
+| `placeholder` | `string`                                         | `undefined` | Placeholder text                  |
+| `disabled`    | `boolean`                                        | `undefined` | Disabled state                    |
+| `min`         | `string`                                         | `undefined` | Minimum selectable date           |
+| `max`         | `string`                                         | `undefined` | Maximum selectable date           |
+| `required`    | `boolean`                                        | `undefined` | Required field                    |
+| `size`        | `InputSize`                                      | `undefined` | Input size (small, medium, large) |
+| `labelFixed`  | `boolean`                                        | `undefined` | Makes the label fixed positioned  |
+| `helpText`    | `string`                                         | `undefined` | Help text below the input         |
+
+## Events
+
+| Event               | Payload                                          | Description                                           |
+| ------------------- | ------------------------------------------------ | ----------------------------------------------------- |
+| `update:modelValue` | `string \| string[] \| [string, string] \| null` | Emitted when date(s) change                           |
+| `change`            | `CustomEvent<Date[]>`                            | Emitted when selection changes (bl-datepicker-change) |
+
+## Slots
+
+| Slot      | Props | Description                              |
+| --------- | ----- | ---------------------------------------- |
+| `default` | -     | Optional content passed to bl-datepicker |
+
+## Types
+
+```typescript
+import type { DatepickerProps, DatepickerType } from "@baklavue/ui";
+
+type DatepickerType = "single" | "multiple" | "range";
+
+interface DatepickerProps {
+  modelValue?: string | string[] | [string, string] | null;
+  type?: DatepickerType;
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  min?: string;
+  max?: string;
+  required?: boolean;
+  size?: InputSize;
+  labelFixed?: boolean;
+  helpText?: string;
+}
+```
+
+## Usage Notes
+
+- **v-model Binding**: Use v-model for two-way binding. For `type="single"`, value is `string | null`. For `type="multiple"`, value is `string[]`. For `type="range"`, value is `[string, string] | null`.
+
+- **Date Format**: The `min`, `max`, and `modelValue` use ISO date strings (YYYY-MM-DD).
+
+- **Accessibility**: The component follows Baklava's accessibility guidelines and includes proper ARIA attributes for screen readers.
+
+- **Styling**: The component uses Baklava's default styling. Custom styling can be applied through CSS variables or by overriding the component styles.

package/dist/docs/components/dialog.md

@@ -0,0 +1,224 @@
+# Dialog
+
+A Vue UI kit component for Baklava's `bl-dialog` component for modal dialogs. The Dialog component provides a modal overlay for confirmations, forms, and important content with support for header and footer slots, controllable visibility, and programmatic open/close.
+
+## Basic Usage
+
+Use `v-model:open` for two-way binding. Trigger the dialog with a button.
+
+<div class="component-demo">
+
+<DialogBasicDemo />
+
+</div>
+
+```vue
+<template>
+  <div>
+    <BvButton @click="showDialog = true">Open Dialog</BvButton>
+    <BvDialog v-model:open="showDialog">
+      <template #header>
+        <span>Dialog Title</span>
+      </template>
+      <p>Dialog content goes here.</p>
+    </BvDialog>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvDialog, BvButton } from "@baklavue/ui";
+
+const showDialog = ref(false);
+</script>
+```
+
+## Caption
+
+Use the `caption` prop for a simple text title instead of the header slot. This maps to Baklava's `bl-dialog` caption attribute.
+
+<div class="component-demo">
+
+<DialogCaptionDemo />
+
+</div>
+
+```vue
+<template>
+  <div>
+    <BvButton @click="showDialog = true">Open Dialog</BvButton>
+    <BvDialog v-model:open="showDialog" caption="Simple Title">
+      <p>Use the caption prop for a simple text title instead of the header slot.</p>
+    </BvDialog>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvDialog, BvButton } from "@baklavue/ui";
+
+const showDialog = ref(false);
+</script>
+```
+
+## With Header and Footer
+
+Use the `header` and `footer` slots to add a title and action buttons (e.g. Cancel, Confirm).
+
+<div class="component-demo">
+
+<DialogHeaderFooterDemo />
+
+</div>
+
+```vue
+<template>
+  <div>
+    <BvButton @click="showDialog = true">Open Dialog</BvButton>
+    <BvDialog v-model:open="showDialog">
+      <template #header>
+        <span>Confirm Action</span>
+      </template>
+      <p>Are you sure you want to proceed? This action cannot be undone.</p>
+      <template #footer>
+        <div style="display: flex; gap: 0.5rem; justify-content: flex-end;">
+          <BvButton variant="tertiary" @click="showDialog = false">Cancel</BvButton>
+          <BvButton variant="primary" @click="showDialog = false">Confirm</BvButton>
+        </div>
+      </template>
+    </BvDialog>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvDialog, BvButton } from "@baklavue/ui";
+
+const showDialog = ref(false);
+</script>
+```
+
+## Closable and Backdrop
+
+Control whether the dialog can be closed via the close button (`closable`) and whether clicking the backdrop closes it (`backdrop`). When `closable` is `true`, a close button is shown in the header. When `backdrop` is `true`, the dialog closes when clicking outside.
+
+<div class="component-demo">
+
+<DialogClosableDemo />
+
+</div>
+
+```vue
+<template>
+  <BvDialog v-model:open="showDialog" :closable="true">
+    <template #header>
+      <span>Closable Dialog</span>
+    </template>
+    <p>This dialog has a close button.</p>
+  </BvDialog>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvDialog } from "@baklavue/ui";
+
+const showDialog = ref(false);
+</script>
+```
+
+## Size
+
+Use the `size` prop to control the dialog width. Accepts values supported by the underlying `bl-dialog` (e.g. `"small"`, `"medium"`, `"large"` or custom CSS values).
+
+## Programmatic Control
+
+Access dialog methods programmatically using template refs. Call `open()` to show the dialog and `close()` to hide it.
+
+<div class="component-demo">
+
+<DialogProgrammaticDemo />
+
+</div>
+
+```vue
+<template>
+  <div>
+    <div style="margin-bottom: 1rem; display: flex; gap: 0.5rem;">
+      <BvButton @click="dialogRef?.open()">Open</BvButton>
+      <BvButton @click="dialogRef?.close()">Close</BvButton>
+    </div>
+    <BvDialog ref="dialogRef">
+      <template #header>
+        <span>Programmatically Controlled</span>
+      </template>
+      <p>This dialog can be opened and closed via button clicks or programmatically.</p>
+    </BvDialog>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvDialog, BvButton } from "@baklavue/ui";
+
+const dialogRef = ref();
+</script>
+```
+
+## Props
+
+| Prop       | Type      | Default     | Description                                                    |
+| ---------- | --------- | ----------- | -------------------------------------------------------------- |
+| `open`     | `boolean` | `false`     | Whether the dialog is visible (use with `v-model:open`)        |
+| `caption`  | `string`  | `undefined` | Optional dialog title. Maps to bl-dialog's caption attribute  |
+| `closable` | `boolean` | `undefined` | Whether to show the close button in the header                 |
+| `backdrop` | `boolean` | `undefined` | Whether clicking the backdrop closes the dialog                |
+| `size`     | `string`  | `undefined` | Dialog width (e.g. `"small"`, `"medium"`, `"large"` or custom) |
+
+## Events
+
+| Event           | Payload   | Description                                                      |
+| --------------- | --------- | ---------------------------------------------------------------- |
+| `update:open`   | `boolean` | Emitted when visibility changes. Use for two-way binding.        |
+| `open`          | -         | Emitted when the dialog is opened                                |
+| `close`         | -         | Emitted when the dialog is closed                                |
+
+## Methods
+
+You can access these methods via template refs:
+
+| Method   | Description                           |
+| -------- | ------------------------------------- |
+| `open()` | Opens the dialog programmatically     |
+| `close()`| Closes the dialog programmatically    |
+
+## Slots
+
+| Slot      | Props | Description                           |
+| --------- | ----- | ------------------------------------- |
+| `header`  | -     | Content for the dialog header/title   |
+| `default`| -     | Main dialog content                   |
+| `footer` | -     | Content for the dialog footer         |
+
+## Types
+
+```typescript
+import type { DialogProps } from "@baklavue/ui";
+
+interface DialogProps {
+  open?: boolean;
+  caption?: string;
+  closable?: boolean;
+  backdrop?: boolean;
+  size?: string;
+}
+```
+
+## Usage Notes
+
+- **Two-way binding**: Use `v-model:open` to control visibility. Alternatively, use a template ref and call `open()` / `close()`.
+
+- **Caption vs header slot**: Use the `caption` prop for a simple text title. Use the `#header` slot for custom header content (icons, rich markup, etc.).
+
+- **Accessibility**: The component follows Baklava's accessibility guidelines. The underlying `bl-dialog` uses the native HTML `<dialog>` element (or a polyfill) for proper focus management and ARIA attributes.
+
+- **Styling**: The component uses Baklava's default styling. Custom styling can be applied through CSS variables such as `--bl-dialog-width` and `--bl-dialog-caption-line-clamp`.