@baklavue/mcp 1.0.0

package/dist/docs/components/file-upload.md

@@ -0,0 +1,248 @@
+# File Upload
+
+A custom file upload component with drag-and-drop zone, click-to-browse, file list with remove, validation (size/type), and optional preview. Uses Baklava design tokens for consistent styling.
+
+## Basic Usage
+
+Use `v-model` to bind the selected file(s). Single file mode by default.
+
+<div class="component-demo">
+
+<FileUploadBasicDemo />
+
+</div>
+
+```vue
+<template>
+  <BvFileUpload
+    v-model="file"
+    label="Upload document"
+    help-text="Single file, any type"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvFileUpload } from "@baklavue/ui";
+
+const file = ref(null);
+</script>
+```
+
+## Multiple Files
+
+Set `multiple` to allow selecting multiple files.
+
+<div class="component-demo">
+
+<FileUploadMultipleDemo />
+
+</div>
+
+```vue
+<template>
+  <BvFileUpload
+    v-model="files"
+    multiple
+    label="Upload multiple files"
+    help-text="Drag and drop or click to browse"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvFileUpload } from "@baklavue/ui";
+
+const files = ref([]);
+</script>
+```
+
+## Validation
+
+Use `accept`, `maxSize`, `minSize`, and `maxFiles` for validation. Listen to the `invalid` event to display custom error messages.
+
+<div class="component-demo">
+
+<FileUploadValidationDemo />
+
+</div>
+
+```vue
+<template>
+  <BvFileUpload
+    v-model="files"
+    multiple
+    accept="image/*"
+    :max-size="500 * 1024"
+    :max-files="3"
+    label="Images only (max 500 KB, 3 files)"
+    :invalid-text="invalidText"
+    @invalid="handleInvalid"
+    @change="handleChange"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvFileUpload } from "@baklavue/ui";
+import type { FileUploadInvalidEntry } from "@baklavue/ui";
+
+const files = ref([]);
+const invalidText = ref("");
+const MAX_SIZE = 500 * 1024; // 500 KB
+
+const handleInvalid = (entries: FileUploadInvalidEntry[]) => {
+  const reasons = entries.map((e) => {
+    if (e.reason === "type") return `${e.file.name}: invalid type`;
+    if (e.reason === "size") return `${e.file.name}: max ${MAX_SIZE / 1024} KB`;
+    return `${e.file.name}: max 3 files`;
+  });
+  invalidText.value = reasons.join(". ");
+};
+
+const handleChange = () => {
+  invalidText.value = "";
+};
+</script>
+```
+
+## Preview
+
+Enable `showPreview` to display image thumbnails for uploaded image files.
+
+<div class="component-demo">
+
+<FileUploadPreviewDemo />
+
+</div>
+
+```vue
+<template>
+  <BvFileUpload
+    v-model="files"
+    multiple
+    accept="image/*"
+    show-preview
+    label="Upload images with preview"
+    help-text="Accepts images only"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvFileUpload } from "@baklavue/ui";
+
+const files = ref([]);
+</script>
+```
+
+## Disabled
+
+Use the `disabled` prop to prevent user interaction.
+
+<div class="component-demo">
+
+<FileUploadDisabledDemo />
+
+</div>
+
+```vue
+<template>
+  <BvFileUpload
+    v-model="file"
+    label="Disabled"
+    disabled
+    help-text="Upload is disabled"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvFileUpload } from "@baklavue/ui";
+
+const file = ref(null);
+</script>
+```
+
+## Custom Hint Slot
+
+Use the `#hint` slot to customize the text displayed in the drop zone.
+
+<div class="component-demo">
+
+<FileUploadSlotDemo />
+
+</div>
+
+```vue
+<template>
+  <BvFileUpload v-model="file" label="Upload with custom hint">
+    <template #hint>
+      Drop your file here or <strong>click to browse</strong>
+    </template>
+  </BvFileUpload>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvFileUpload } from "@baklavue/ui";
+
+const file = ref(null);
+</script>
+```
+
+## Props
+
+| Prop          | Type                             | Default     | Description                                                |
+| ------------- | -------------------------------- | ----------- | ---------------------------------------------------------- |
+| `modelValue`  | `File \| File[] \| null`         | `undefined` | Bound files (v-model)                                      |
+| `multiple`    | `boolean`                        | `false`     | Allow multiple files                                       |
+| `accept`      | `string`                         | `undefined` | Accepted MIME types or extensions (e.g. `image/*`, `.pdf`) |
+| `maxSize`     | `number`                         | `undefined` | Max file size in bytes                                     |
+| `minSize`     | `number`                         | `undefined` | Min file size in bytes                                     |
+| `maxFiles`    | `number`                         | `undefined` | Max file count when multiple                               |
+| `disabled`    | `boolean`                        | `false`     | Disabled state                                             |
+| `label`       | `string`                         | `undefined` | Label for the upload area                                  |
+| `helpText`    | `string`                         | `undefined` | Helper text below the area                                 |
+| `invalidText` | `string`                         | `undefined` | Error message when validation fails                        |
+| `showPreview` | `boolean`                        | `false`     | Show image previews for image files                        |
+| `size`        | `"small" \| "medium" \| "large"` | `"medium"`  | Drop zone size                                             |
+
+## Events
+
+| Event               | Payload                    | Description                          |
+| ------------------- | -------------------------- | ------------------------------------ |
+| `update:modelValue` | `File \| File[] \| null`   | Emitted when files change (v-model)  |
+| `invalid`           | `FileUploadInvalidEntry[]` | Emitted when validation fails        |
+| `change`            | `File[]`                   | Emitted when files are added/removed |
+
+## Slots
+
+| Slot   | Description                                       |
+| ------ | ------------------------------------------------- |
+| `hint` | Custom hint text (like "Drag and drop or browse") |
+
+## Types
+
+```typescript
+import type {
+  FileUploadProps,
+  FileUploadInvalidEntry,
+  FileUploadInvalidReason,
+} from "@baklavue/ui";
+
+interface FileUploadInvalidEntry {
+  file: File;
+  reason: "type" | "size" | "count";
+}
+```
+
+## Usage Notes
+
+- **Drag and drop**: The drop zone supports both click-to-browse and drag-and-drop. The `accept` attribute filters the native file picker; drag-and-drop files are validated in JavaScript.
+
+- **Validation**: Client-side validation is for UX only. Always validate file types and sizes on the server.
+
+- **Preview**: When `showPreview` is true, object URLs are created for image files. These are automatically revoked when files are removed or the component unmounts.
+
+- **Accessibility**: The drop zone is keyboard-accessible via the hidden file input. Use a proper label for screen readers.

package/dist/docs/components/icon.md

@@ -0,0 +1,142 @@
+# Icon
+
+A Vue UI kit component for Baklava's `bl-icon` component for displaying icons. The Icon component provides icon display with support for name, size, color, and custom slot content. Size and color are applied via CSS (`font-size`, `color`) as per Baklava's API.
+
+## Basic Usage
+
+Use the `name` prop to display a Baklava icon. Available icon names come from the Baklava icons set.
+
+<div class="component-demo">
+
+<IconBasicDemo />
+
+</div>
+
+```vue
+<template>
+  <div style="display: flex; gap: 1rem;">
+    <BvIcon name="home" />
+    <BvIcon name="settings" />
+    <BvIcon name="info" />
+    <BvIcon name="user" />
+  </div>
+</template>
+
+<script setup>
+import { BvIcon } from "@baklavue/ui";
+</script>
+```
+
+## Size
+
+Use the `size` prop to control the icon size. Accepts any valid CSS value (e.g. `"24px"`, `"1.5rem"`). Maps to the `font-size` CSS property on the underlying bl-icon.
+
+<div class="component-demo">
+
+<IconSizeDemo />
+
+</div>
+
+```vue
+<template>
+  <div style="display: flex; gap: 1rem; align-items: center;">
+    <BvIcon name="home" size="16px" />
+    <BvIcon name="home" size="24px" />
+    <BvIcon name="home" size="32px" />
+    <BvIcon name="home" size="48px" />
+  </div>
+</template>
+
+<script setup>
+import { BvIcon } from "@baklavue/ui";
+</script>
+```
+
+## Color
+
+Use the `color` prop to set the icon color. Accepts any valid CSS color value (e.g. `"#0066cc"`, `"red"`, `"currentColor"`). Maps to the `color` CSS property on the underlying bl-icon.
+
+<div class="component-demo">
+
+<IconColorDemo />
+
+</div>
+
+```vue
+<template>
+  <div style="display: flex; gap: 1rem; align-items: center;">
+    <BvIcon name="info" color="#0066cc" />
+    <BvIcon name="info" color="#16a34a" />
+    <BvIcon name="info" color="#dc2626" />
+    <BvIcon name="info" color="#7c3aed" />
+  </div>
+</template>
+
+<script setup>
+import { BvIcon } from "@baklavue/ui";
+</script>
+```
+
+## Custom Slot
+
+Use the default slot to provide custom SVG content instead of a named icon. When using the slot, the `name` prop is optional.
+
+```vue
+<template>
+  <BvIcon>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
+    </svg>
+  </BvIcon>
+</template>
+
+<script setup>
+import { BvIcon } from "@baklavue/ui";
+</script>
+```
+
+## Props
+
+| Prop   | Type          | Default     | Description                                                                 |
+| ------ | ------------- | ----------- | --------------------------------------------------------------------------- |
+| `name` | `BaklavaIcon` | `undefined` | Icon name from Baklava icons set. Optional when using default slot.          |
+| `size` | `string`      | `undefined` | Icon size as CSS value (e.g. `"24px"`, `"1.5rem"`). Maps to `font-size`.     |
+| `color` | `string`      | `undefined` | Icon color as CSS value (e.g. `"#0066cc"`). Maps to `color`. Default inherits. |
+
+## Events
+
+| Event   | Payload | Description                                              |
+| ------- | ------- | -------------------------------------------------------- |
+| `load`  | `string`| Emitted when the SVG icon has loaded (from `bl-load`).   |
+| `error` | `string`| Emitted when the SVG icon failed to load (from `bl-error`).|
+
+## Slots
+
+| Slot      | Props | Description                                                       |
+| --------- | ----- | ----------------------------------------------------------------- |
+| `default` | -     | Custom SVG content. When provided, can be used instead of `name`. |
+
+## Types
+
+```typescript
+import type { IconProps } from "@baklavue/ui";
+
+interface IconProps {
+  /** Icon name from Baklava icons set */
+  name?: BaklavaIcon;
+  /** Icon size as CSS value (e.g. "24px", "1.5rem") */
+  size?: string;
+  /** Icon color as CSS value (e.g. "#0066cc", "red") */
+  color?: string;
+}
+```
+
+## Usage Notes
+
+- **Icon names**: Use valid Baklava icon names from the `@trendyol/baklava-icons` package. See [Baklava documentation](https://baklava.trendyol.com) for the full icon list.
+
+- **Size and color**: These props are applied via inline styles to the underlying `bl-icon`. When omitted, the icon inherits `font-size` and `color` from its parent.
+
+- **Accessibility**: When using icons for decorative purposes, ensure they are not announced by screen readers. For meaningful icons, provide appropriate `aria-label` or surround with descriptive text.
+
+- **Styling**: The component uses Baklava's default styling. Custom styling can be applied through CSS variables or by wrapping the icon in a styled container.

package/dist/docs/components/image.md

@@ -0,0 +1,161 @@
+# Image
+
+Performance-focused image component with lazy loading, skeleton placeholder, and error handling. Prevents CLS (Cumulative Layout Shift) by reserving space with width/height.
+
+## Basic Usage
+
+<div class="component-demo">
+
+<ImageBasicDemo />
+
+</div>
+
+```vue
+<template>
+  <BvImage
+    src="/photo.jpg"
+    alt="Photo description"
+    width="200px"
+    height="120px"
+  />
+</template>
+
+<script setup>
+import { BvImage } from "@baklavue/ui";
+</script>
+```
+
+## Lazy Loading with Placeholder
+
+Images use `loading="lazy"` by default. When `placeholder="skeleton"`, a skeleton loader is shown until the image loads.
+
+<div class="component-demo">
+
+<ImageLazyDemo />
+
+</div>
+
+```vue
+<template>
+  <BvImage
+    src="/photo.jpg"
+    alt="Photo"
+    width="200px"
+    height="120px"
+    loading="lazy"
+    placeholder="skeleton"
+  />
+</template>
+
+<script setup>
+import { BvImage } from "@baklavue/ui";
+</script>
+```
+
+## Responsive Images
+
+Use `srcset` and `sizes` for responsive image delivery.
+
+```vue
+<template>
+  <BvImage
+    src="/photo-800.jpg"
+    srcset="/photo-400.jpg 400w, /photo-800.jpg 800w, /photo-1200.jpg 1200w"
+    sizes="(max-width: 600px) 100vw, 50vw"
+    alt="Responsive photo"
+    width="100%"
+    height="auto"
+  />
+</template>
+
+<script setup>
+import { BvImage } from "@baklavue/ui";
+</script>
+```
+
+## Error Fallback
+
+Provide a `fallback` slot when the image fails to load. Without it, a default gray placeholder is shown.
+
+```vue
+<template>
+  <BvImage
+    src="/broken-url.jpg"
+    alt="Broken image"
+    width="200px"
+    height="120px"
+    @error="handleError"
+  >
+    <template #fallback>
+      <div style="padding: 1rem; text-align: center; color: #666;">
+        Failed to load image
+      </div>
+    </template>
+  </BvImage>
+</template>
+
+<script setup>
+import { BvImage } from "@baklavue/ui";
+
+function handleError() {
+  console.error("Image failed to load");
+}
+</script>
+```
+
+## Props
+
+| Prop          | Type                 | Default     | Description                                    |
+| ------------- | -------------------- | ----------- | ---------------------------------------------- |
+| `src`         | `string`             | required    | Image URL                                      |
+| `alt`         | `string`             | required    | Accessible description                         |
+| `width`       | `string`             | `"100%"`    | CSS width (recommended to prevent CLS)          |
+| `height`      | `string`             | `"auto"`    | CSS height                                     |
+| `loading`     | `"lazy" \| "eager"`  | `"lazy"`    | Native loading behavior                        |
+| `placeholder` | `"skeleton" \| "none"` | `"skeleton"` | Placeholder while loading                    |
+| `objectFit`   | `string`             | `"cover"`   | CSS object-fit                                 |
+| `srcset`      | `string`             | -           | Responsive image sources                       |
+| `sizes`       | `string`             | -           | Sizes attribute for srcset                     |
+
+## Events
+
+| Event   | Payload  | Description                          |
+| ------- | -------- | ------------------------------------ |
+| `load`  | `Event`  | Emitted when the image has loaded    |
+| `error` | `Event`  | Emitted when the image fails to load |
+
+## Slots
+
+| Slot          | Description                                  |
+| ------------- | -------------------------------------------- |
+| `placeholder` | Custom placeholder (overrides skeleton)       |
+| `fallback`    | Content when image fails to load              |
+
+## Types
+
+```typescript
+import type { ImageProps, ImageLoading, ImagePlaceholder } from "@baklavue/ui";
+
+type ImageLoading = "lazy" | "eager";
+type ImagePlaceholder = "skeleton" | "none";
+
+interface ImageProps {
+  src: string;
+  alt: string;
+  width?: string;
+  height?: string;
+  loading?: ImageLoading;
+  placeholder?: ImagePlaceholder;
+  objectFit?: string;
+  srcset?: string;
+  sizes?: string;
+}
+```
+
+## Usage Notes
+
+- **CLS prevention**: Always provide `width` and `height` (or at least width with aspect-ratio) to avoid layout shift when images load.
+
+- **Lazy loading**: Uses native `loading="lazy"` for deferred loading of offscreen images. No extra dependencies.
+
+- **Placeholder**: The skeleton uses the same design tokens as `BvSkeleton` for consistent styling.

package/dist/docs/components/index.md

@@ -0,0 +1,151 @@
+# Components
+
+BaklaVue provides a comprehensive Vue 3 UI kit that brings the [Baklava Design System](https://baklava.design) to your Vue applications. Every component is **fully typed**, **composable**, and built with Vue 3 best practices—giving you a native, delightful development experience.
+
+::: tip Why BaklaVue?
+Each component wraps Baklava's battle-tested web components under the hood, so you get enterprise-grade accessibility, theming, and design consistency—with Vue-native APIs like `v-model`, slots, and reactive props.
+:::
+
+## Overview
+
+| Category | Count | Purpose |
+| -------- | ----- | ------- |
+| Form | 9 | Inputs, selects, buttons, toggles, file upload, and date picking |
+| Feedback | 7 | Alerts, badges, chips, tags, notifications, spinners, and skeleton loaders |
+| Layout | 7 | Dialogs, drawers, dropdowns, tooltips, accordions, tabs, steppers |
+| Navigation | 4 | Links, pagination, split buttons, scroll-to-top |
+| Data | 3 | Tables, icons, and images |
+
+**31 components** in total—ready to build beautiful, consistent interfaces.
+
+---
+
+## Form Components
+
+Build forms and collect user input with purpose-built components. All form components support `v-model`, validation states, and full TypeScript inference.
+
+| Component | Description |
+| --------- | ----------- |
+| [**Button**](/components/button) | Primary, secondary, tertiary variants • Multiple kinds (default, neutral, success, danger) • Sizes, icons, loading state |
+| [**Input**](/components/input) | Text input with label, help text, validation • Types: text, email, password, number • Loading and disabled states |
+| [**Checkbox**](/components/checkbox) | Single and grouped checkboxes • Indeterminate state • Custom slots and preferences |
+| [**Radio**](/components/radio) | Radio button groups with full v-model support |
+| [**Switch**](/components/switch) | Toggle switch for boolean settings • Multiple sizes |
+| [**Select**](/components/select) | Single and multi-select dropdowns • Options via props or slots |
+| [**Textarea**](/components/textarea) | Multi-line text input with validation |
+| [**File Upload**](/components/file-upload) | Drag-and-drop file upload with validation, preview, and file list |
+| [**Datepicker**](/components/datepicker) | Date selection with calendar popover |
+
+---
+
+## Feedback Components
+
+Communicate status, guide users, and show progress. These components help you build clear, responsive feedback patterns.
+
+| Component | Description |
+| --------- | ----------- |
+| [**Alert**](/components/alert) | Inline alerts for success, warning, error, info • Closable and programmatic control |
+| [**Badge**](/components/badge) | Compact status indicators (e.g. counts, labels) |
+| [**Banner**](/components/banner) | Full-width top-of-page banner for announcements • Closable with localStorage persistence |
+| [**Chip**](/components/chip) | Notification badge on icons/avatars • Position, colors, sizes, standalone mode |
+| [**Tag**](/components/tag) | Labels with optional close button • Selectable and customizable icons |
+| [**Notification**](/components/notification) | Toast-style notifications • Use composable `useNotification` for programmatic control |
+| [**Skeleton**](/components/skeleton) | Animated placeholder for content loading • Text, rectangle, circle variants |
+| [**Spinner**](/components/spinner) | Loading spinner with size and variant options |
+
+---
+
+## Layout Components
+
+Structure your UI with overlays, panels, and navigation patterns. Full control over open/close behavior and animations.
+
+| Component | Description |
+| --------- | ----------- |
+| [**Dialog**](/components/dialog) | Modal dialogs with header, footer, caption • Programmatic open/close |
+| [**Drawer**](/components/drawer) | Side drawer for navigation or forms • Left/right placement |
+| [**Dropdown**](/components/dropdown) | Dropdown menus with items, groups, and slots |
+| [**Tooltip**](/components/tooltip) | Contextual tooltips with placement control |
+| [**Accordion**](/components/accordion) | Collapsible sections • Single or multiple open |
+| [**Tab**](/components/tab) | Tab navigation with slot-based panels |
+| [**Stepper**](/components/stepper) | Step indicator for wizards and multi-step flows |
+
+---
+
+## Navigation Components
+
+Help users move through your app and trigger actions.
+
+| Component | Description |
+| --------- | ----------- |
+| [**Link**](/components/link) | Internal and external links • Standalone and inline variants |
+| [**Pagination**](/components/pagination) | Page navigation with jumper and select controls |
+| [**ScrollToTop**](/components/scroll-to-top) | Floating button to scroll back to top • Configurable threshold and position |
+| [**Split Button**](/components/split-button) | Primary action with secondary dropdown options |
+
+---
+
+## Data Display
+
+Render data and assets with consistent styling.
+
+| Component | Description |
+| --------- | ----------- |
+| [**Table**](/components/table) | Data tables with sorting, pagination, loading states • Custom cell slots |
+| [**Icon**](/components/icon) | Icon component with size and color props |
+| [**Image**](/components/image) | Performance-focused image with lazy loading, skeleton placeholder, and error fallback |
+
+---
+
+## Quick Start
+
+### Import and Use
+
+Import components individually (recommended for tree-shaking):
+
+```vue
+<template>
+  <div class="form-example">
+    <BvInput v-model="email" label="Email" type="email" />
+    <BvButton variant="primary" @click="handleSubmit">Submit</BvButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { BvButton, BvInput } from "@baklavue/ui";
+
+const email = ref("");
+
+const handleSubmit = () => {
+  console.log("Submitted:", email.value);
+};
+</script>
+```
+
+Or import everything:
+
+```typescript
+import * as BaklaVue from "@baklavue/ui";
+```
+
+### TypeScript
+
+All components ship with full type definitions. Use inferred props or import types:
+
+```typescript
+import type { ButtonProps } from "@baklavue/ui";
+
+const props: ButtonProps = {
+  variant: "primary",
+  size: "medium",
+};
+```
+
+---
+
+## Next Steps
+
+- [**Browse components**](/components/button) — Each component has examples, API docs, and live demos
+- [**API Reference**](/api/) — Full programmatic API
+- [**Getting Started**](/guide/getting-started) — Project setup and configuration
+- [**Design Tokens**](/guide/design-tokens) — Customize colors, spacing, typography