@baklavue/mcp 1.0.0

package/dist/docs/composables/timer.md

@@ -0,0 +1,78 @@
+# useIntervalFn / useTimeoutFn
+
+Pausable interval and cancellable timeout. Useful for polling, countdown timers, and delayed execution.
+
+## Basic Usage
+
+### useIntervalFn
+
+Returns an object with `pause`, `resume`, and `isActive`. Useful for polling and auto-refresh.
+
+```vue
+<script setup>
+import { onMounted } from "vue";
+import { useIntervalFn } from "@baklavue/composables";
+
+const { pause, resume, isActive } = useIntervalFn(() => {
+  fetchLatestData();
+}, 5000);
+
+// Pause when tab is hidden
+onMounted(() => {
+  document.addEventListener("visibilitychange", () => {
+    document.hidden ? pause() : resume();
+  });
+});
+</script>
+```
+
+### useTimeoutFn
+
+Returns an object with `run`, `cancel`, and `isPending`. Useful for delayed execution.
+
+```vue
+<script setup>
+import { useNotification } from "@baklavue/composables";
+import { useTimeoutFn } from "@baklavue/composables";
+
+const { success } = useNotification();
+const { run } = useTimeoutFn(() => {
+  success({ description: "Saved!" });
+}, 2000);
+
+const handleSave = async () => {
+  await saveData();
+  run();
+};
+</script>
+```
+
+## API
+
+### useIntervalFn
+
+```typescript
+useIntervalFn(
+  callback: () => void,
+  interval: number,
+  options?: { immediate?: boolean }
+): { pause: () => void; resume: () => void; isActive: Ref<boolean> }
+```
+
+- `callback` — Function to execute on each tick
+- `interval` — Interval in milliseconds
+- `options.immediate` — Run callback on start. Default: true
+- Returns `{ pause, resume, isActive }`
+
+### useTimeoutFn
+
+```typescript
+useTimeoutFn(
+  callback: () => void,
+  delay: number
+): { run: () => void; cancel: () => void; isPending: Ref<boolean> }
+```
+
+- `callback` — Function to execute after delay
+- `delay` — Delay in milliseconds
+- Returns `{ run, cancel, isPending }`

package/dist/docs/composables/toggle.md

@@ -0,0 +1,55 @@
+# useToggle
+
+A composable for a simple boolean toggle. Lighter than `useDisclosure` when you only need a toggle without open/close semantics. Use `useDisclosure` for Dialog, Drawer, Dropdown.
+
+## Basic Usage
+
+```vue
+<template>
+  <button @click="toggle">{{ value ? "Hide" : "Show" }}</button>
+</template>
+
+<script setup>
+import { useToggle } from "@baklavue/composables";
+
+const [value, toggle] = useToggle(false);
+</script>
+```
+
+## Set Explicitly
+
+```vue
+<script setup>
+import { useToggle } from "@baklavue/composables";
+
+const [darkMode, setDarkMode] = useToggle(true);
+
+setDarkMode(false); // set explicitly
+setDarkMode(true);
+</script>
+```
+
+## API
+
+### Arguments
+
+| Argument | Type | Default | Description |
+| --- | --- | --- | --- |
+| `initial` | `boolean` | `false` | Initial boolean value |
+
+### Return Value
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `[0]` | `Ref<boolean>` | The boolean value |
+| `[1]` | `(value?: boolean) => void` | Toggle function. Call with no args to flip, or with a boolean to set |
+
+## TypeScript Support
+
+```typescript
+import { useToggle } from "@baklavue/composables";
+
+const [value, toggle] = useToggle(false);
+toggle(); // flips
+toggle(true); // sets to true
+```

package/dist/docs/guide/contributing.md

@@ -0,0 +1,364 @@
+# Contributing
+
+Thank you for your interest in contributing to BaklaVue! This guide covers the development setup, workflow, conventions, and how to add new components and composables.
+
+## Table of Contents
+
+- [Development Setup](#development-setup)
+- [Development Workflow](#development-workflow)
+- [Adding New Components](#adding-new-components)
+- [Adding New Composables](#adding-new-composables)
+- [Documentation](#documentation)
+- [Code Style](#code-style)
+- [Testing](#testing)
+- [Release Process](#release-process)
+- [Getting Help](#getting-help)
+
+## Development Setup
+
+### Prerequisites
+
+- **Bun** (recommended) or **Node.js 20.8.1+** — The project uses Bun for package management
+- **Git** — For version control
+- **Code editor** — VS Code recommended; the project uses TypeScript and Vue
+
+### Clone and Install
+
+```bash
+# Clone the repository
+git clone https://github.com/erbilnas/baklavue.git
+cd baklavue
+
+# Install dependencies (uses Bun workspaces)
+bun install
+```
+
+### Project Structure
+
+```
+baklavue/
+├── packages/
+│   ├── ui/                    # @baklavue/ui — Vue UI components
+│   │   ├── src/
+│   │   │   ├── accordion/      # One folder per component
+│   │   │   ├── button/
+│   │   │   ├── input/
+│   │   │   ├── ...
+│   │   │   ├── utils/          # Shared utilities (e.g. loadBaklavaResources)
+│   │   │   └── index.ts        # Main exports
+│   │   ├── package.json
+│   │   └── tsconfig.json
+│   │
+│   └── composables/            # @baklavue/composables
+│       ├── theme.ts
+│       ├── notification.ts
+│       ├── file.ts
+│       ├── scrollToError.ts
+│       ├── index.ts
+│       └── package.json
+│
+├── docs/                      # VitePress documentation site
+│   ├── .vitepress/
+│   ├── components/             # Component docs
+│   ├── composables/           # Composable docs
+│   ├── guide/                 # Getting started, installation, contributing
+│   ├── tokens/                # Design token docs
+│   └── package.json
+│
+├── scripts/
+│   └── commit.sh              # Conventional commit helper
+├── .github/workflows/         # CI (release, deploy docs)
+├── package.json               # Root workspace config
+└── tsconfig.json
+```
+
+### Run the Documentation Site
+
+The docs site doubles as a development playground. Run it to test components live:
+
+```bash
+bun run docs:dev
+```
+
+This starts the VitePress dev server (typically at `http://localhost:5173`). Components are loaded from the workspace packages, so changes in `packages/ui` or `packages/composables` are reflected immediately with hot reload.
+
+## Development Workflow
+
+### 1. Create a Branch
+
+Create a feature or fix branch from `main`:
+
+```bash
+git checkout main
+git pull origin main
+git checkout -b feat/your-feature-name
+# or
+git checkout -b fix/issue-description
+```
+
+Branch naming conventions:
+
+- `feat/` — New features
+- `fix/` — Bug fixes
+- `docs/` — Documentation only
+- `refactor/` — Code refactoring
+
+### 2. Make Changes
+
+- Follow existing code style and patterns
+- Add TypeScript types for all new code
+- Update documentation when adding or changing components or composables
+- Ensure Baklava resources are loaded (either via component mount or manually)
+
+### 3. Verify the Build
+
+Build the docs site to ensure everything compiles:
+
+```bash
+bun run docs:build
+```
+
+If the build succeeds, TypeScript and Vue components are compiling correctly.
+
+### 4. Test in the Docs Site
+
+```bash
+bun run docs:dev
+```
+
+Open the docs, navigate to relevant component or composable pages, and verify behavior and styling.
+
+### 5. Commit Changes
+
+Use [Conventional Commits](https://www.conventionalcommits.org/):
+
+```
+<type>[optional scope]: <description>
+
+[optional body]
+
+[optional footer(s)]
+```
+
+**Types:**
+
+| Type | Purpose | Release impact |
+| ---- | ------- | -------------- |
+| `feat` | New feature | Minor |
+| `fix` | Bug fix | Patch |
+| `docs` | Documentation only | — |
+| `style` | Formatting, whitespace | — |
+| `refactor` | Code change, no behavior change | — |
+| `perf` | Performance improvement | Patch |
+| `test` | Tests | — |
+| `chore` | Build, tooling | — |
+
+**Examples:**
+
+```bash
+git commit -m "feat: add new button variant"
+git commit -m "fix(ui): resolve button alignment issue"
+git commit -m "docs: update installation guide"
+git commit -m "feat(composables): add useNotification hook"
+```
+
+**Optional:** Use the commit helper script:
+
+```bash
+./scripts/commit.sh feat add new button variant
+./scripts/commit.sh fix ui resolve alignment issue
+```
+
+### 6. Push and Create a Pull Request
+
+```bash
+git push origin feat/your-feature-name
+```
+
+Then open a pull request on GitHub. Provide:
+
+- A clear title and description
+- What changed and why
+- Any screenshots or examples for UI changes
+
+## Adding New Components
+
+### Component Structure
+
+Each component lives in its own directory under `packages/ui/src/`:
+
+```
+packages/ui/src/my-component/
+├── MyComponent.vue      # Vue component
+├── my-component.types.ts # TypeScript interfaces
+└── index.ts             # Exports (must use Bv prefix)
+```
+
+### Step-by-Step: Create a New Component
+
+#### 1. Create the directory and files
+
+```bash
+mkdir -p packages/ui/src/my-component
+touch packages/ui/src/my-component/MyComponent.vue
+touch packages/ui/src/my-component/my-component.types.ts
+touch packages/ui/src/my-component/index.ts
+```
+
+#### 2. Define types in `my-component.types.ts`
+
+```typescript
+export interface MyComponentProps {
+  label?: string;
+  disabled?: boolean;
+  // ... other props matching the Baklava web component
+}
+```
+
+#### 3. Implement the component in `MyComponent.vue`
+
+```vue
+<script setup lang="ts">
+import { onMounted } from "vue";
+import { loadBaklavaResources } from "../utils/loadBaklavaResources";
+import type { MyComponentProps } from "./my-component.types";
+
+const props = withDefaults(defineProps<MyComponentProps>(), {
+  // default values
+});
+
+const emit = defineEmits<{
+  change: [value: string];
+}>();
+
+onMounted(() => {
+  loadBaklavaResources();
+});
+</script>
+
+<template>
+  <bl-my-component
+    v-bind="props"
+    @bl-change="emit('change', $event.detail)"
+  >
+    <slot />
+  </bl-my-component>
+</template>
+```
+
+#### 4. Export from `index.ts` (with Bv prefix)
+
+```typescript
+export { default as BvMyComponent } from "./MyComponent.vue";
+export type { MyComponentProps } from "./my-component.types";
+```
+
+#### 5. Register in `packages/ui/src/index.ts`
+
+```typescript
+export * from "./my-component";
+```
+
+### Component Guidelines
+
+- **Bv prefix:** All components must be exported with the `Bv` prefix (e.g. `BvButton`, `BvInput`).
+- **Wrap Baklava web components:** Use the corresponding `bl-*` custom element; do not reimplement from scratch.
+- **Load resources:** Call `loadBaklavaResources()` in `onMounted` so scripts and styles are available.
+- **TypeScript:** Provide prop and event types in a `.types.ts` file.
+- **Composition API:** Use Vue 3 Composition API with `<script setup>`.
+- **Events:** Map Baklava events (e.g. `bl-click`) to Vue emits (e.g. `click`).
+- **v-model:** Support `v-model` where appropriate (e.g. input value, checkbox checked).
+- **JSDoc:** Add JSDoc for non-obvious props and complex logic.
+
+### Checking Baklava Component API
+
+Consult the [Baklava Design System](https://baklava.design) and the [@trendyol/baklava](https://www.npmjs.com/package/@trendyol/baklava) package to see:
+
+- Available `bl-*` elements and their attributes
+- Events (typically prefixed with `bl-`)
+- Slots and structure
+
+## Adding New Composables
+
+### Structure
+
+1. Create the file in `packages/composables/`:
+
+```typescript
+// packages/composables/myComposable.ts
+export const useMyComposable = () => {
+  // composable logic
+  return {
+    doSomething: () => {},
+    state: ref(0),
+  };
+};
+```
+
+2. Export from `packages/composables/index.ts`:
+
+```typescript
+export { useMyComposable } from "./myComposable";
+```
+
+### Guidelines
+
+- Use Vue 3 Composition API patterns
+- Export named functions (e.g. `useMyComposable`)
+- Provide TypeScript types for arguments and return values
+- Add JSDoc for public API
+
+## Documentation
+
+When adding or modifying components or composables:
+
+1. **Component docs:** Add or update `docs/components/<component>.md`.
+2. **Composable docs:** Add or update `docs/composables/<composable>.md`.
+3. **Include:**
+   - Description and usage
+   - Code examples (with `<script setup>` and `<template>`)
+   - Props, events, and slots tables
+   - TypeScript usage examples where relevant
+
+4. **Sidebar:** Update `docs/.vitepress/config.ts` if adding new pages.
+
+5. **Demo components:** For complex demos, add Vue components in `docs/.vitepress/theme/components/` and register them in the theme.
+
+## Code Style
+
+- **TypeScript:** Use TypeScript for all new code; avoid `any` where possible.
+- **Composition API:** Prefer `<script setup>` and Composition API.
+- **Naming:** Use clear, descriptive names for variables and functions.
+- **Comments:** Document complex logic; keep comments up to date.
+- **Single-purpose:** Keep components and composables focused.
+
+## Testing
+
+- **Manual testing:** Use the docs site (`bun run docs:dev`) to verify components.
+- **Build:** Ensure `bun run docs:build` completes successfully.
+- **Baklava resources:** Confirm components render correctly and styles load.
+- **Different scenarios:** Test with various props, slots, and edge cases.
+
+## Release Process
+
+BaklaVue uses [Semantic Release](https://semantic-release.gitbook.io/) for versioning:
+
+- Commits follow [Conventional Commits](https://www.conventionalcommits.org/)
+- Pushing to `main` triggers the release workflow
+- Versions are derived from commit types (`feat` → minor, `fix` → patch)
+- Changelogs are generated from commit messages
+
+See the [Release Guide](/release/guide) for:
+
+- Commit message format
+- Breaking changes (`!` suffix)
+- Manual release and dry-run
+- Package-specific releases
+
+## Getting Help
+
+- **Issues:** Open an issue on [GitHub](https://github.com/erbilnas/baklavue/issues)
+- **Documentation:** Check the [docs](/guide/getting-started) and [API Reference](/api/)
+- **Examples:** Review existing components in `packages/ui/src/` for patterns
+
+Thank you for contributing to BaklaVue!

package/dist/docs/guide/design-tokens.md

@@ -0,0 +1,29 @@
+# Design Tokens
+
+BaklaVue uses the [Baklava Design System](https://baklava.design) tokens. You can customize them via `useBaklavaTheme().applyTheme()` for a consistent, branded look.
+
+## Token Categories
+
+| Category | Description | Docs |
+| -------- | ----------- | ---- |
+| [Colors](/tokens/colors) | Primary, semantic, and neutral colors | [Colors →](/tokens/colors) |
+| [Border Radius](/tokens/border-radius) | Corner roundness for components | [Border Radius →](/tokens/border-radius) |
+| [Size & Spacing](/tokens/size-spacing) | Sizes and spacing scale | [Size & Spacing →](/tokens/size-spacing) |
+| [Typography](/tokens/typography) | Font family, size, and weight | [Typography →](/tokens/typography) |
+| [Z-Index](/tokens/z-index) | Layering for overlays and dialogs | [Z-Index →](/tokens/z-index) |
+
+## Quick Example
+
+```vue
+<script setup>
+import { useBaklavaTheme } from "@baklavue/composables";
+
+useBaklavaTheme().applyTheme({
+  preset: "vue",
+  borderRadius: { m: "0.5rem" },
+  typography: { fontFamily: "'Inter', sans-serif" },
+});
+</script>
+```
+
+See [useBaklavaTheme](/composables/theme) for the full API.

package/dist/docs/guide/getting-started.md

@@ -0,0 +1,181 @@
+# Getting Started
+
+::: tip Disclaimer
+BaklaVue builds on [@trendyol/baklava](https://www.npmjs.com/package/@trendyol/baklava) v3.4.2. Not all Baklava components and features are yet available in BaklaVue. Check the [components list](/components/) for what's supported. Contributions welcome.
+:::
+
+BaklaVue is a Vue 3 UI kit that brings the [Trendyol Baklava Design System](https://baklava.design) to Vue applications. It provides Vue-native wrappers around Baklava's web components, offering full TypeScript support, Vue 3 Composition API patterns, and composables for common use cases.
+
+This guide walks you through setting up BaklaVue in a new or existing Vue 3 project and building your first components.
+
+## What is BaklaVue?
+
+BaklaVue consists of two packages:
+
+| Package | Purpose |
+| ------- | ------- |
+| `@baklavue/ui` | Vue components that wrap Baklava web components (`bl-*` custom elements) |
+| `@baklavue/composables` | Vue composables for theming, notifications, CSV parsing, form validation, and more |
+
+Each UI component loads Baklava resources (script and styles) when mounted, so you don't need to manually include them in your app. Components use the `Bv` prefix (e.g. `BvButton`, `BvInput`) to avoid naming conflicts and follow a consistent convention.
+
+## Prerequisites
+
+Before installing BaklaVue, ensure your project meets these requirements:
+
+- **Vue 3.0+** — BaklaVue targets Vue 3 and uses the Composition API
+- **Node.js 18+** or **Bun** — For package installation and builds
+- **TypeScript 5.9.2+** (recommended) — Full type definitions are provided
+- **Vite** or **Nuxt 3** — Officially supported; Vue CLI works with additional configuration
+
+## Installation
+
+Install both packages with your preferred package manager:
+
+```bash
+# Using npm
+npm install @baklavue/ui @baklavue/composables
+
+# Using yarn
+yarn add @baklavue/ui @baklavue/composables
+
+# Using pnpm
+pnpm add @baklavue/ui @baklavue/composables
+
+# Using bun
+bun add @baklavue/ui @baklavue/composables
+```
+
+For detailed installation steps, framework-specific setup, and troubleshooting, see the [Installation Guide](/guide/installation).
+
+## Basic Usage
+
+### 1. Import and Use Components
+
+Components are imported individually. Use the `Bv` prefix when importing:
+
+```vue
+<template>
+  <div>
+    <BvButton variant="primary" @click="handleClick">Click me</BvButton>
+  </div>
+</template>
+
+<script setup>
+import { BvButton } from "@baklavue/ui";
+
+const handleClick = () => {
+  console.log("Button clicked!");
+};
+</script>
+```
+
+All components follow the same pattern: import from `@baklavue/ui` and use the `Bv` prefix in templates.
+
+### 2. Use Composables
+
+Composables provide reusable logic that works seamlessly with BaklaVue components. For example, `useNotification` controls the notification toast:
+
+```vue
+<template>
+  <div>
+    <BvButton @click="showNotification">Show Notification</BvButton>
+    <BvNotification />
+  </div>
+</template>
+
+<script setup>
+import { BvButton, BvNotification } from "@baklavue/ui";
+import { useNotification } from "@baklavue/composables";
+
+const { success } = useNotification();
+
+const showNotification = () => {
+  success({
+    caption: "Success!",
+    description: "Operation completed successfully",
+  });
+};
+</script>
+```
+
+The `<BvNotification />` component must be present in your app layout for notifications to appear. See [useNotification](/composables/notification) for the full API.
+
+### 3. Customize Theme (Optional)
+
+Use `useBaklavaTheme` to apply design tokens and brand colors. Built-in presets include `vue` (Vue.js brand colors) and `default`:
+
+```vue
+<script setup>
+import { useBaklavaTheme } from "@baklavue/composables";
+
+// Apply Vue.js brand preset
+useBaklavaTheme().applyTheme({ preset: "vue" });
+</script>
+```
+
+You can also override specific tokens:
+
+```vue
+<script setup>
+import { useBaklavaTheme } from "@baklavue/composables";
+
+useBaklavaTheme().applyTheme({
+  preset: "vue",
+  borderRadius: { m: "0.5rem" },
+  typography: { fontFamily: "'Inter', sans-serif" },
+});
+</script>
+```
+
+See [useBaklavaTheme](/composables/theme) and [Design Tokens](/guide/design-tokens) for customization options.
+
+## Loading Baklava Resources
+
+BaklaVue components automatically load Baklava JavaScript and CSS when they mount. In most cases, you don't need to do anything.
+
+If you need to load resources manually (e.g. before any component mounts, or in a non-Vue context), call `loadBaklavaResources`:
+
+```vue
+<script setup>
+import { onMounted } from "vue";
+import { loadBaklavaResources } from "@baklavue/ui";
+
+onMounted(() => {
+  loadBaklavaResources();
+});
+</script>
+```
+
+## TypeScript Support
+
+BaklaVue is written in TypeScript and ships with full type definitions. Import types for props and composables:
+
+```typescript
+import type { ButtonProps, InputProps } from "@baklavue/ui";
+
+const buttonProps: ButtonProps = {
+  variant: "primary",
+  size: "medium",
+  disabled: false,
+};
+```
+
+Types are exported from `@baklavue/ui` and `@baklavue/composables`. Check the [API Reference](/api/) for available types.
+
+## Component Naming Convention
+
+All UI components use the `Bv` prefix:
+
+- `BvButton`, `BvInput`, `BvCheckbox`, `BvSelect`, etc.
+- `BvDialog`, `BvDrawer`, `BvDropdown`, etc.
+
+This convention helps avoid conflicts with native HTML elements and other libraries.
+
+## Next Steps
+
+- **[Components](/components/)** — Browse all available components with examples
+- **[Composables](/composables/)** — Explore composables for notifications, theming, CSV, and more
+- **[Design Tokens](/guide/design-tokens)** — Customize colors, typography, spacing, and more
+- **[API Reference](/api/)** — Full API documentation
+- **[Contributing](/guide/contributing)** — Help improve BaklaVue