@baklavue/mcp 1.0.0

package/dist/docs/components/input.md

@@ -0,0 +1,407 @@
+# Input
+
+A Vue UI kit component for Baklava's `bl-input` component with full v-model support and TypeScript types. Supports text, email, password, number, date, time, and other input types with validation, help text, loading state, and icons.
+
+## Basic Usage
+
+Use `v-model` for two-way binding. Set `label` and `placeholder` for accessibility and UX.
+
+<div class="component-demo">
+
+<InputBasicDemo />
+
+</div>
+
+```vue
+<template>
+  <BvInput v-model="value" label="Email" placeholder="Enter your email" />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvInput } from "@baklavue/ui";
+
+const value = ref("");
+</script>
+```
+
+## Input Types
+
+The Input component supports all standard HTML input types: text, email, password, number, date, time, and more.
+
+<div class="component-demo">
+
+<InputTypesDemo />
+
+</div>
+
+```vue
+<template>
+  <BvInput v-model="text" type="text" label="Text" />
+  <BvInput v-model="email" type="email" label="Email" />
+  <BvInput v-model="password" type="password" label="Password" />
+  <BvInput v-model="number" type="number" label="Number" />
+  <BvInput v-model="date" type="date" label="Date" />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvInput } from "@baklavue/ui";
+
+const text = ref("");
+const email = ref("");
+const password = ref("");
+const number = ref(0);
+const date = ref("");
+</script>
+```
+
+## Validation
+
+Use the `required` prop and native validation attributes (`minlength`, `maxlength`, `pattern`, etc.). Listen to the `invalid` event to handle validation failures and display custom error messages via the `invalid-text` prop.
+
+<div class="component-demo">
+
+<InputValidationDemo />
+
+</div>
+
+```vue
+<template>
+  <BvInput
+    v-model="email"
+    type="email"
+    label="Email"
+    required
+    :invalid-text="emailError"
+    @invalid="handleInvalid"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvInput } from "@baklavue/ui";
+
+const email = ref("");
+const emailError = ref("");
+
+const handleInvalid = (validity: ValidityState) => {
+  if (validity.typeMismatch) {
+    emailError.value = "Please enter a valid email address";
+  } else if (validity.valueMissing) {
+    emailError.value = "Email is required";
+  }
+};
+</script>
+```
+
+## Help Text
+
+Use the `help-text` prop to display helper text below the input.
+
+<div class="component-demo">
+
+<InputHelpTextDemo />
+
+</div>
+
+```vue
+<template>
+  <BvInput
+    v-model="password"
+    type="password"
+    label="Password"
+    help-text="Must be at least 8 characters"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvInput } from "@baklavue/ui";
+
+const password = ref("");
+</script>
+```
+
+## Loading State
+
+Use the `loading` prop to show a loading indicator while the input is processing (e.g. search-as-you-type).
+
+<div class="component-demo">
+
+<InputLoadingDemo />
+
+</div>
+
+```vue
+<template>
+  <BvInput
+    v-model="search"
+    label="Search"
+    :loading="isSearching"
+    placeholder="Type to search..."
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvInput } from "@baklavue/ui";
+
+const search = ref("");
+const isSearching = ref(true);
+</script>
+```
+
+## Disabled and Readonly
+
+Disable or set the input to readonly to prevent user interaction.
+
+<div class="component-demo">
+
+<InputDisabledReadonlyDemo />
+
+</div>
+
+```vue
+<template>
+  <BvInput v-model="value" label="Disabled" disabled />
+  <BvInput v-model="value" label="Readonly" readonly />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvInput } from "@baklavue/ui";
+
+const value = ref("Read-only value");
+</script>
+```
+
+## Sizes
+
+Use the `size` prop to control the input height. Options: `small`, `medium` (default), `large`.
+
+<div class="component-demo">
+
+<InputSizesDemo />
+
+</div>
+
+```vue
+<template>
+  <BvInput v-model="small" size="small" label="Small" />
+  <BvInput v-model="medium" size="medium" label="Medium" />
+  <BvInput v-model="large" size="large" label="Large" />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvInput } from "@baklavue/ui";
+
+const small = ref("");
+const medium = ref("");
+const large = ref("");
+</script>
+```
+
+## With Icon
+
+Add an icon to the input using the `icon` prop. Use any Baklava icon name.
+
+<div class="component-demo">
+
+<InputWithIconDemo />
+
+</div>
+
+```vue
+<template>
+  <BvInput v-model="search" label="Search" icon="search" />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvInput } from "@baklavue/ui";
+
+const search = ref("");
+</script>
+```
+
+## Complete Example: Form with Validation
+
+A complete form using multiple inputs with validation, help text, and error handling.
+
+<div class="component-demo">
+
+<InputFormValidationDemo />
+
+</div>
+
+```vue
+<template>
+  <form @submit.prevent="handleSubmit">
+    <BvInput
+      v-model="form.email"
+      type="email"
+      label="Email"
+      required
+      :invalid-text="errors.email"
+      @invalid="handleEmailInvalid"
+    />
+    <BvInput
+      v-model="form.password"
+      type="password"
+      label="Password"
+      required
+      :minlength="8"
+      :invalid-text="errors.password"
+      help-text="Must be at least 8 characters"
+      @invalid="handlePasswordInvalid"
+    />
+    <BvButton type="submit">Submit</BvButton>
+  </form>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvInput, BvButton } from "@baklavue/ui";
+
+const form = ref({
+  email: "",
+  password: "",
+});
+
+const errors = ref({
+  email: "",
+  password: "",
+});
+
+const handleEmailInvalid = (validity: ValidityState) => {
+  if (validity.typeMismatch) {
+    errors.value.email = "Please enter a valid email";
+  } else if (validity.valueMissing) {
+    errors.value.email = "Email is required";
+  }
+};
+
+const handlePasswordInvalid = (validity: ValidityState) => {
+  if (validity.tooShort) {
+    errors.value.password = "Password must be at least 8 characters";
+  } else if (validity.valueMissing) {
+    errors.value.password = "Password is required";
+  }
+};
+
+const handleSubmit = () => {
+  console.log("Form submitted:", form.value);
+};
+</script>
+```
+
+## Props
+
+| Prop           | Type                       | Default     | Description                                            |
+| -------------- | -------------------------- | ----------- | ------------------------------------------------------ |
+| `modelValue`   | `string \| number \| null` | `undefined` | Input value (v-model)                                  |
+| `name`         | `string`                   | `undefined` | Input name attribute                                   |
+| `type`         | `InputType`                | `'text'`    | Input type (text, email, password, number, date, etc.) |
+| `label`        | `string`                   | `undefined` | Input label                                            |
+| `placeholder`  | `string`                   | `undefined` | Placeholder text                                       |
+| `required`     | `boolean`                  | `undefined` | Required field                                         |
+| `minlength`    | `number`                   | `undefined` | Minimum length                                         |
+| `maxlength`    | `number`                   | `undefined` | Maximum length                                         |
+| `min`          | `number \| string`         | `undefined` | Minimum value                                          |
+| `max`          | `number \| string`         | `undefined` | Maximum value                                          |
+| `pattern`      | `string`                   | `undefined` | Validation pattern                                     |
+| `step`         | `number`                   | `undefined` | Step value for number inputs                           |
+| `autocomplete` | `string`                   | `undefined` | Autocomplete attribute                                 |
+| `inputmode`    | `InputMode`                | `undefined` | Input mode hint                                        |
+| `autofocus`    | `boolean`                  | `undefined` | Autofocus attribute                                    |
+| `icon`         | `BaklavaIcon`              | `undefined` | Icon name                                              |
+| `size`         | `InputSize`                | `'medium'`  | Input size (small, medium, large)                      |
+| `disabled`     | `boolean`                  | `undefined` | Disabled state                                         |
+| `readonly`     | `boolean`                  | `undefined` | Readonly state                                         |
+| `labelFixed`   | `boolean`                  | `true`      | Fixed label position                                   |
+| `invalidText`  | `string`                   | `undefined` | Error message text                                     |
+| `helpText`     | `string`                   | `undefined` | Help text below input                                  |
+| `loading`      | `boolean`                  | `undefined` | Loading state                                          |
+| `suffixText`   | `string`                   | `undefined` | Suffix text in icon slot                               |
+
+## Events
+
+| Event               | Payload                    | Description                   |
+| ------------------- | -------------------------- | ----------------------------- |
+| `update:modelValue` | `string \| number \| null` | Emitted when value changes    |
+| `invalid`           | `ValidityState`            | Emitted when validation fails |
+| `focus`             | `FocusEvent`               | Emitted on focus              |
+| `blur`              | `FocusEvent`               | Emitted on blur               |
+
+## Slots
+
+| Slot   | Description                                 |
+| ------ | ------------------------------------------- |
+| `icon` | Custom icon content (overrides `icon` prop) |
+
+## Types
+
+```typescript
+import type { InputProps } from "@baklavue/ui";
+
+interface InputProps {
+  modelValue?: string | number | null;
+  name?: string;
+  type?:
+    | "text"
+    | "email"
+    | "password"
+    | "number"
+    | "date"
+    | "time"
+    | "datetime-local"
+    | "month"
+    | "week"
+    | "url"
+    | "tel"
+    | "search";
+  label?: string;
+  placeholder?: string;
+  required?: boolean;
+  minlength?: number;
+  maxlength?: number;
+  min?: number | string;
+  max?: number | string;
+  pattern?: string;
+  step?: number;
+  autocomplete?: string;
+  inputmode?:
+    | "none"
+    | "text"
+    | "decimal"
+    | "numeric"
+    | "tel"
+    | "search"
+    | "email"
+    | "url";
+  autofocus?: boolean;
+  icon?: string;
+  size?: "small" | "medium" | "large";
+  disabled?: boolean;
+  readonly?: boolean;
+  labelFixed?: boolean;
+  invalidText?: string;
+  helpText?: string;
+  loading?: boolean;
+  suffixText?: string;
+}
+```
+
+## Usage Notes
+
+- **Two-way binding**: Use `v-model` to bind the input value. The component emits `update:modelValue` when the value changes.
+
+- **Validation flow**: Listen to the `invalid` event to handle validation failures. Set `invalid-text` reactively based on the `ValidityState` to display custom error messages.
+
+- **Date/time picker**: For inputs with `type="date"`, `type="time"`, or `type="datetime-local"`, clicking the input triggers the native date/time picker.
+
+- **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/link.md

@@ -0,0 +1,249 @@
+# Link
+
+A Vue UI kit component for Baklava's `bl-link` component for navigation links. Supports inline (text within content) and standalone (button-like) variants with full TypeScript support.
+
+## Basic Usage
+
+<div class="component-demo">
+
+<LinkBasicDemo />
+
+</div>
+
+```vue
+<template>
+  <BvLink href="/about">About</BvLink>
+</template>
+
+<script setup>
+import { BvLink } from "@baklavue/ui";
+</script>
+```
+
+## Variants
+
+The Link component supports two variants: `inline` (default) for text within content, and `standalone` for button-like links.
+
+### Inline Variant
+
+Use the inline variant for links within paragraphs or other text content.
+
+<div class="component-demo">
+
+<LinkInlineDemo />
+
+</div>
+
+```vue
+<template>
+  <p>
+    Visit our <BvLink href="/docs">documentation</BvLink> for more information.
+  </p>
+</template>
+
+<script setup>
+import { BvLink } from "@baklavue/ui";
+</script>
+```
+
+### Standalone Variant
+
+Use the standalone variant for prominent, button-like links.
+
+<div class="component-demo">
+
+<LinkStandaloneDemo />
+
+</div>
+
+```vue
+<template>
+  <BvLink href="/signup" variant="standalone">Sign up</BvLink>
+</template>
+
+<script setup>
+import { BvLink } from "@baklavue/ui";
+</script>
+```
+
+## Sizes
+
+When using the standalone variant, the `size` prop controls the link size. Accepts `"small"`, `"medium"` (default), or `"large"`.
+
+<div class="component-demo" style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap">
+
+<LinkSizesDemo />
+
+</div>
+
+```vue
+<template>
+  <BvLink href="/" variant="standalone" size="small">Small</BvLink>
+  <BvLink href="/" variant="standalone" size="medium">Medium</BvLink>
+  <BvLink href="/" variant="standalone" size="large">Large</BvLink>
+</template>
+
+<script setup>
+import { BvLink } from "@baklavue/ui";
+</script>
+```
+
+## Kind
+
+When using the standalone variant, the `kind` prop controls the link style. Accepts `"primary"` (default) or `"neutral"`.
+
+<div class="component-demo" style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap">
+
+<BvLink href="/" variant="standalone" kind="primary">Primary</BvLink>
+<BvLink href="/" variant="standalone" kind="neutral">Neutral</BvLink>
+
+</div>
+
+```vue
+<template>
+  <BvLink href="/" variant="standalone" kind="primary">Primary</BvLink>
+  <BvLink href="/" variant="standalone" kind="neutral">Neutral</BvLink>
+</template>
+
+<script setup>
+import { BvLink } from "@baklavue/ui";
+</script>
+```
+
+## With Icon
+
+Add an icon to the link using the `#icon` slot. The icon slot is typically used with the standalone variant.
+
+<div class="component-demo">
+
+<LinkWithIconDemo />
+
+</div>
+
+```vue
+<template>
+  <BvLink href="/settings" variant="standalone">
+    <template #icon><BvIcon name="settings" /></template>
+    Settings
+  </BvLink>
+</template>
+
+<script setup>
+import { BvLink, BvIcon } from "@baklavue/ui";
+</script>
+```
+
+## Disabled State
+
+Disable a link to prevent user interaction.
+
+<div class="component-demo">
+
+<LinkDisabledDemo />
+
+</div>
+
+```vue
+<template>
+  <BvLink href="/disabled" :disabled="true">Disabled link</BvLink>
+</template>
+
+<script setup>
+import { BvLink } from "@baklavue/ui";
+</script>
+```
+
+## External Links
+
+Use the `target` and `rel` props for external links. Set `target="_blank"` to open in a new tab and `rel="noopener noreferrer"` for security.
+
+<div class="component-demo">
+
+<LinkExternalDemo />
+
+</div>
+
+```vue
+<template>
+  <BvLink
+    href="https://github.com/erbilnas/baklavue"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    Open GitHub
+  </BvLink>
+</template>
+
+<script setup>
+import { BvLink } from "@baklavue/ui";
+</script>
+```
+
+## Props
+
+| Prop             | Type        | Default     | Description                                                            |
+| ---------------- | ----------- | ----------- | ---------------------------------------------------------------------- |
+| `href`           | `string`    | `undefined` | URL that the hyperlink points to                                       |
+| `target`         | `string`    | `undefined` | Where to display the linked URL (e.g. `"_self"`, `"_blank"`)         |
+| `disabled`       | `boolean`   | `undefined` | Whether the link is disabled                                           |
+| `variant`        | `LinkVariant` | `undefined` | Link variant - `"inline"` or `"standalone"`                           |
+| `size`           | `LinkSize`  | `undefined` | Link size - only applies to standalone variant                         |
+| `kind`           | `LinkKind`  | `undefined` | Link kind - only applies to standalone variant                        |
+| `ariaLabel`      | `string`    | `undefined` | Aria label for accessibility                                           |
+| `rel`            | `string`    | `undefined` | Relationship (e.g. `"noopener noreferrer"` for external links)         |
+| `hreflang`       | `string`    | `undefined` | Language of the linked document                                        |
+| `type`           | `string`    | `undefined` | MIME type of the linked document                                       |
+| `referrerPolicy` | `string`    | `undefined` | Referrer policy for the link                                           |
+| `download`       | `string`    | `undefined` | Whether to download the resource instead of navigating                 |
+| `ping`           | `string`    | `undefined` | Ping URLs to be notified when following the link                      |
+
+## Events
+
+| Event   | Payload      | Description                    |
+| ------- | ------------ | ------------------------------ |
+| `click` | `CustomEvent` | Emitted when the link is clicked |
+
+## Slots
+
+| Slot      | Props | Description                                  |
+| --------- | ----- | -------------------------------------------- |
+| `default` | -     | Link text content                            |
+| `icon`    | -     | Custom icon for non-standalone variants       |
+
+## Types
+
+```typescript
+import type { LinkProps, LinkVariant, LinkSize, LinkKind } from "@baklavue/ui";
+
+type LinkVariant = "inline" | "standalone";
+type LinkSize = "small" | "medium" | "large";
+type LinkKind = "primary" | "neutral";
+
+interface LinkProps {
+  href?: string;
+  target?: string;
+  disabled?: boolean;
+  variant?: LinkVariant;
+  size?: LinkSize;
+  kind?: LinkKind;
+  ariaLabel?: string;
+  rel?: string;
+  hreflang?: string;
+  type?: string;
+  referrerPolicy?: string;
+  download?: string;
+  ping?: string;
+}
+```
+
+## Usage Notes
+
+- **Inline vs Standalone**: Use `inline` (default) for links within text content. Use `standalone` for prominent, button-like links that stand alone.
+
+- **Size and Kind**: The `size` and `kind` props only apply when `variant="standalone"`.
+
+- **External Links**: When using `target="_blank"`, always add `rel="noopener noreferrer"` for security.
+
+- **Accessibility**: Use the `ariaLabel` prop when the link text alone does not provide sufficient context for screen readers.
+
+- **Styling**: The component uses Baklava's default styling. Custom styling can be applied through CSS variables: `--bl-link-color`, `--bl-link-hover-color`, `--bl-link-active-color`.