@baklavue/mcp 1.0.0

package/dist/docs/components/select.md

@@ -0,0 +1,239 @@
+# Select
+
+A Vue UI kit component for Baklava's `bl-select` component with v-model support. Supports both slot-based options (using `bl-select-option` children) and the `options` prop for programmatic rendering. Single and multiple selection modes are supported.
+
+## Basic Usage
+
+Use `v-model` for two-way binding. Provide options via the default slot using `bl-select-option` elements.
+
+<div class="component-demo">
+
+<SelectBasicDemo />
+
+</div>
+
+```vue
+<template>
+  <BvSelect v-model="selected" label="Choose an option">
+    <bl-select-option value="option1">Option 1</bl-select-option>
+    <bl-select-option value="option2">Option 2</bl-select-option>
+    <bl-select-option value="option3">Option 3</bl-select-option>
+  </BvSelect>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvSelect } from "@baklavue/ui";
+
+const selected = ref("option1");
+</script>
+```
+
+## With Options Array
+
+Use the `options` prop for programmatic option rendering. Each option has `value`, `label`, and optional `disabled`.
+
+<div class="component-demo">
+
+<SelectOptionsDemo />
+
+</div>
+
+```vue
+<template>
+  <BvSelect v-model="selected" label="Country" :options="countries" placeholder="Select a country" />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvSelect } from "@baklavue/ui";
+
+const selected = ref("");
+const countries = [
+  { value: "us", label: "United States" },
+  { value: "uk", label: "United Kingdom" },
+  { value: "tr", label: "Turkey" },
+];
+</script>
+```
+
+## Multiple Select
+
+Enable multiple selection with the `multiple` prop. The `modelValue` becomes an array of selected values.
+
+<div class="component-demo">
+
+<SelectMultipleDemo />
+
+</div>
+
+```vue
+<template>
+  <BvSelect
+    v-model="selected"
+    label="Frameworks"
+    :options="items"
+    :multiple="true"
+    placeholder="Select multiple"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvSelect } from "@baklavue/ui";
+
+const selected = ref([]);
+const items = [
+  { value: "react", label: "React" },
+  { value: "vue", label: "Vue" },
+  { value: "svelte", label: "Svelte" },
+  { value: "angular", label: "Angular" },
+];
+</script>
+```
+
+## Disabled State
+
+Disable the select to prevent user interaction.
+
+<div class="component-demo">
+
+<SelectDisabledDemo />
+
+</div>
+
+```vue
+<template>
+  <BvSelect v-model="selected" label="Disabled Select" :options="options" :disabled="true" />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvSelect } from "@baklavue/ui";
+
+const selected = ref("option1");
+const options = [
+  { value: "option1", label: "Option 1" },
+  { value: "option2", label: "Option 2" },
+  { value: "option3", label: "Option 3" },
+];
+</script>
+```
+
+## Sizes
+
+Use the `size` prop to change the select height: `small`, `medium`, or `large`.
+
+<div class="component-demo">
+
+<SelectSizesDemo />
+
+</div>
+
+```vue
+<template>
+  <div style="display: flex; flex-direction: column; gap: 1rem; max-width: 300px;">
+    <BvSelect v-model="small" size="small" label="Small" :options="options" placeholder="Select" />
+    <BvSelect v-model="medium" size="medium" label="Medium" :options="options" placeholder="Select" />
+    <BvSelect v-model="large" size="large" label="Large" :options="options" placeholder="Select" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvSelect } from "@baklavue/ui";
+
+const small = ref("");
+const medium = ref("");
+const large = ref("");
+const options = [
+  { value: "a", label: "Option A" },
+  { value: "b", label: "Option B" },
+  { value: "c", label: "Option C" },
+];
+</script>
+```
+
+## Props
+
+| Prop                 | Type                    | Default     | Description                                                      |
+| -------------------- | ----------------------- | ----------- | ---------------------------------------------------------------- |
+| `modelValue`         | `string \| string[] \| null` | `undefined` | Selected value(s). Use with v-model. Array when `multiple` is true. |
+| `options`            | `SelectOption[]`        | `undefined` | Array of options for programmatic rendering                      |
+| `label`              | `string`                | `undefined` | Label displayed above or as placeholder                           |
+| `placeholder`       | `string`                | `undefined` | Placeholder text when no value is selected                       |
+| `name`               | `string`                | `undefined` | Select name attribute for form submission                        |
+| `required`          | `boolean`               | `undefined` | Whether the select is required (shows error state when empty)    |
+| `disabled`          | `boolean`               | `undefined` | Whether the select is disabled                                   |
+| `multiple`          | `boolean`               | `undefined` | Whether multiple options can be selected                         |
+| `size`               | `SelectSize`            | `undefined` | Size: `small`, `medium`, or `large`                              |
+| `clearable`         | `boolean`               | `undefined` | Whether the selected value can be cleared                        |
+| `helpText`          | `string`                | `undefined` | Help text displayed below the select                             |
+| `customInvalidText` | `string`                | `undefined` | Custom error message for validation                              |
+| `searchBar`         | `boolean`               | `undefined` | Enable search/filter for options in the dropdown                 |
+| `searchBarPlaceholder` | `string`              | `undefined` | Placeholder text for the search input                            |
+
+### SelectOption Interface
+
+When using the `options` prop, each item should follow the `SelectOption` interface:
+
+| Property   | Type      | Default     | Description                    |
+| ---------- | --------- | ----------- | ------------------------------ |
+| `value`    | `string`  | required    | The value submitted or bound   |
+| `label`    | `string`  | required    | The label displayed to the user |
+| `disabled` | `boolean` | `undefined` | Whether the option is disabled |
+
+## Events
+
+| Event               | Payload                      | Description                                              |
+| ------------------- | ---------------------------- | -------------------------------------------------------- |
+| `update:modelValue` | `string \| string[] \| null` | Emitted when selection changes. Use with v-model.        |
+| `change`            | `CustomEvent`                | Emitted when selection changes (bl-change event)        |
+| `input`             | `CustomEvent`                | Emitted on input (bl-input event)                        |
+
+## Slots
+
+| Slot      | Props | Description                                                              |
+| --------- | ----- | ------------------------------------------------------------------------ |
+| `default` | -     | Custom `bl-select-option` elements. Alternative to the `options` prop.    |
+
+## Types
+
+```typescript
+import type { SelectProps, SelectOption, SelectSize } from "@baklavue/ui";
+
+type SelectSize = "small" | "medium" | "large";
+
+interface SelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+interface SelectProps {
+  modelValue?: string | string[] | null;
+  options?: SelectOption[];
+  label?: string;
+  placeholder?: string;
+  name?: string;
+  required?: boolean;
+  disabled?: boolean;
+  multiple?: boolean;
+  size?: SelectSize;
+  clearable?: boolean;
+  helpText?: string;
+  customInvalidText?: string;
+  searchBar?: boolean;
+  searchBarPlaceholder?: string;
+}
+```
+
+## Usage Notes
+
+- **Options vs Slot**: Use the `options` prop for data-driven option lists, or the default slot with `bl-select-option` elements when you need full control over markup.
+
+- **v-model**: The component uses `modelValue` for single select and emits `string | null`. With `multiple`, `modelValue` is `string[]`.
+
+- **Baklava Alignment**: The component wraps Baklava's `bl-select` and passes through supported props. Attributes like `help-text`, `search-bar`, etc. are mapped from camelCase props.
+
+- **Accessibility**: The component follows Baklava's accessibility guidelines and includes proper ARIA attributes for screen readers.

package/dist/docs/components/skeleton.md

@@ -0,0 +1,79 @@
+# Skeleton
+
+Animated placeholder for content loading states. Displays a shimmer effect with configurable variants.
+
+## Basic Usage
+
+<div class="component-demo">
+
+<SkeletonBasicDemo />
+
+</div>
+
+```vue
+<template>
+  <BvSkeleton />
+  <BvSkeleton variant="text" :count="3" />
+</template>
+
+<script setup>
+import { BvSkeleton } from "@baklavue/ui";
+</script>
+```
+
+## Variants
+
+Use the `variant` prop for different placeholder shapes: rectangle (default), text lines, or circle (for avatars).
+
+<div class="component-demo">
+
+<SkeletonVariantsDemo />
+
+</div>
+
+```vue
+<template>
+  <!-- Rectangle (default) -->
+  <BvSkeleton width="200px" height="120px" />
+
+  <!-- Text lines -->
+  <BvSkeleton variant="text" :count="3" />
+
+  <!-- Circle for avatar -->
+  <BvSkeleton variant="circle" />
+</template>
+
+<script setup>
+import { BvSkeleton } from "@baklavue/ui";
+</script>
+```
+
+## Props
+
+| Prop      | Type             | Default      | Description                                    |
+| --------- | ---------------- | ------------ | ---------------------------------------------- |
+| `variant` | `SkeletonVariant` | `"rectangle"` | Shape: text, rectangle, circle                 |
+| `width`   | `string`         | varies       | Width as CSS value (100% for text/rect, 40px for circle) |
+| `height`  | `string`         | varies       | Height as CSS value (1rem default)            |
+| `count`   | `number`         | `1`          | Number of skeleton elements (for text lines)   |
+
+## Types
+
+```typescript
+import type { SkeletonProps, SkeletonVariant } from "@baklavue/ui";
+
+type SkeletonVariant = "text" | "rectangle" | "circle";
+
+interface SkeletonProps {
+  variant?: SkeletonVariant;
+  width?: string;
+  height?: string;
+  count?: number;
+}
+```
+
+## Usage Notes
+
+- **Design tokens**: The skeleton uses `--bl-color-neutral-light` and `--bl-border-radius-s` for consistent styling with the Baklava design system.
+- **Accessibility**: The component has `role="status"` and `aria-label="Loading"` for screen readers.
+- **Content patterns**: Use text variant for paragraph placeholders, rectangle for cards/images, and circle for avatars and profile pictures.

package/dist/docs/components/spinner.md

@@ -0,0 +1,93 @@
+# Spinner
+
+A Vue UI kit component for Baklava's `bl-spinner` web component for loading indicators. Use the Spinner component to show loading states during async operations.
+
+## Basic Usage
+
+<div class="component-demo">
+
+<SpinnerBasicDemo />
+
+</div>
+
+```vue
+<template>
+  <div style="display: flex; align-items: center; gap: 1rem;">
+    <BvSpinner />
+    <span>Loading...</span>
+  </div>
+</template>
+
+<script setup>
+import { BvSpinner } from "@baklavue/ui";
+</script>
+```
+
+## Sizes
+
+Control the spinner size using the `size` prop. Use CSS variables for consistent sizing.
+
+<div class="component-demo">
+
+<SpinnerSizesDemo />
+
+</div>
+
+```vue
+<template>
+  <div style="display: flex; align-items: center; gap: 2rem;">
+    <BvSpinner size="var(--bl-font-size-s)" />
+    <BvSpinner size="var(--bl-font-size-m)" />
+    <BvSpinner size="var(--bl-font-size-l)" />
+  </div>
+</template>
+
+<script setup>
+import { BvSpinner } from "@baklavue/ui";
+</script>
+```
+
+## With Label
+
+Add a `label` for accessibility. The label is exposed to screen readers via `aria-label`.
+
+<div class="component-demo">
+
+<SpinnerVariantsDemo />
+
+</div>
+
+```vue
+<template>
+  <BvSpinner label="Loading content..." />
+</template>
+
+<script setup>
+import { BvSpinner } from "@baklavue/ui";
+</script>
+```
+
+## Props
+
+| Prop      | Type     | Default     | Description                                 |
+| --------- | -------- | ----------- | ------------------------------------------- |
+| `size`    | `string` | `undefined` | Spinner size (e.g. CSS variable or length)  |
+| `variant` | `string` | `undefined` | Spinner variant/style                       |
+| `label`   | `string` | `undefined` | Accessible label for screen readers         |
+
+## Types
+
+```typescript
+import type { SpinnerProps } from "@baklavue/ui";
+
+interface SpinnerProps {
+  size?: string;
+  variant?: string;
+  label?: string;
+}
+```
+
+## Usage Notes
+
+- **Accessibility**: Provide a `label` when the spinner is the primary indicator of loading state so screen readers can announce it. The label is set as `aria-label` on the spinner element.
+- **Sizing**: Use Baklava CSS variables (`--bl-font-size-s`, `--bl-font-size-m`, `--bl-font-size-l`) for consistent sizing with the design system.

package/dist/docs/components/split-button.md

@@ -0,0 +1,165 @@
+# Split Button
+
+A Vue UI kit component for Baklava's `bl-split-button` web component for buttons with a primary action and a dropdown for secondary actions. Dropdown content is provided via the `dropdown-content` slot.
+
+## Basic Usage
+
+<div class="component-demo">
+
+<SplitButtonBasicDemo />
+
+</div>
+
+```vue
+<template>
+  <BvSplitButton label="Actions" @click="handleClick">
+    <template #dropdown-content>
+      <bl-dropdown-item>Action 1</bl-dropdown-item>
+      <bl-dropdown-item>Action 2</bl-dropdown-item>
+      <bl-dropdown-item>Action 3</bl-dropdown-item>
+    </template>
+  </BvSplitButton>
+</template>
+
+<script setup>
+import { BvSplitButton } from "@baklavue/ui";
+
+const handleClick = () => {
+  console.log("Main button clicked");
+};
+</script>
+```
+
+## With Icon
+
+Add an icon to the main button using the `icon` prop.
+
+<div class="component-demo">
+
+<SplitButtonWithIconDemo />
+
+</div>
+
+```vue
+<template>
+  <BvSplitButton
+    label="Save"
+    icon="check"
+    variant="primary"
+    @click="handleSave"
+  >
+    <template #dropdown-content>
+      <bl-dropdown-item>Save as draft</bl-dropdown-item>
+      <bl-dropdown-item>Save and publish</bl-dropdown-item>
+    </template>
+  </BvSplitButton>
+</template>
+
+<script setup>
+import { BvSplitButton } from "@baklavue/ui";
+
+const handleSave = () => {
+  console.log("Save clicked");
+};
+</script>
+```
+
+## With Dropdown Content
+
+Use the `#dropdown-content` slot to provide custom dropdown items. Each item should be a `bl-dropdown-item` element.
+
+<div class="component-demo">
+
+<SplitButtonDropdownDemo />
+
+</div>
+
+```vue
+<template>
+  <BvSplitButton label="More options" @click="handleMainClick">
+    <template #dropdown-content>
+      <bl-dropdown-item>Edit</bl-dropdown-item>
+      <bl-dropdown-item>Duplicate</bl-dropdown-item>
+      <bl-dropdown-item>Delete</bl-dropdown-item>
+    </template>
+  </BvSplitButton>
+</template>
+
+<script setup>
+import { BvSplitButton } from "@baklavue/ui";
+
+const handleMainClick = () => {
+  console.log("Main button clicked");
+};
+</script>
+```
+
+## Loading State
+
+Use the `loading` prop to show a loading indicator on the main button.
+
+```vue
+<template>
+  <BvSplitButton label="Saving..." :loading="isLoading" @click="save" />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvSplitButton } from "@baklavue/ui";
+
+const isLoading = ref(false);
+
+const save = async () => {
+  isLoading.value = true;
+  await doSave();
+  isLoading.value = false;
+};
+</script>
+```
+
+## Props
+
+| Prop       | Type           | Default     | Description                          |
+| ---------- | -------------- | ----------- | ------------------------------------ |
+| `label`    | `string`       | `undefined` | Button label                         |
+| `variant`  | `string`       | `undefined` | Button variant (`primary`, `secondary`) |
+| `size`     | `string`       | `undefined` | Button size (`small`, `medium`, `large`) |
+| `disabled` | `boolean`      | `undefined` | Whether the main button is disabled  |
+| `loading`  | `boolean`      | `undefined` | Loading state of the main button    |
+| `icon`     | `BaklavaIcon` | `undefined` | Icon name for the main button       |
+
+## Events
+
+| Event               | Payload       | Description                          |
+| ------------------- | ------------- | ------------------------------------ |
+| `click`             | `CustomEvent` | Emitted when the main button is clicked |
+| `dropdown-click`    | `CustomEvent` | Emitted when the dropdown button is clicked |
+
+## Slots
+
+| Slot               | Description                                   |
+| ------------------ | --------------------------------------------- |
+| `default`          | Main button content (falls back to `label`)   |
+| `dropdown-content` | Content for the dropdown (e.g. bl-dropdown-item elements) |
+
+## Types
+
+```typescript
+import type { SplitButtonProps } from "@baklavue/ui";
+import type { BaklavaIcon } from "@trendyol/baklava-icons";
+
+interface SplitButtonProps {
+  variant?: string;
+  size?: string;
+  disabled?: boolean;
+  loading?: boolean;
+  label?: string;
+  icon?: BaklavaIcon;
+}
+```
+
+## Usage Notes
+
+- **Dropdown content**: Dropdown items must be `bl-dropdown-item` elements. Place them in the `#dropdown-content` slot.
+- **No options prop**: The Split Button does not accept an `options` array; use the slot for dropdown content.
+- **Accessibility**: The component follows Baklava's accessibility guidelines. Ensure dropdown items have clear, actionable labels.