@baklavue/composables 1.0.0-preview.1

package/.releaserc.json

@@ -0,0 +1,14 @@
+{
+  "extends": "semantic-release-monorepo",
+  "tagFormat": "@baklavue/composables-v${version}",
+  "branches": ["main", { "name": "preview", "prerelease": true, "channel": "beta" }],
+  "repositoryUrl": "https://github.com/erbilnas/baklavue",
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/changelog",
+    ["@semantic-release/npm", { "npmPublish": true }],
+    "@semantic-release/github",
+    "@semantic-release/git"
+  ]
+}

package/CHANGELOG.md

@@ -0,0 +1,64 @@
+# @baklavue/composables-v1.0.0-preview.1 (2026-02-11)
+
+
+### Bug Fixes
+
+* fix package version ([620618d](https://github.com/erbilnas/baklavue/commit/620618df664022f1b68859aee4b374f6586731bb))
+* fix release ci ([6c22554](https://github.com/erbilnas/baklavue/commit/6c225541b182c4b8692af000e7c13ca6e546599a))
+* fix release ci ([6e23d99](https://github.com/erbilnas/baklavue/commit/6e23d99cac122d033c72d6d98819e0329c92bcdc))
+
+
+### Features
+
+* add accordion and alert components ([10b8155](https://github.com/erbilnas/baklavue/commit/10b81556184432deb2772d3489c24be6115e667c))
+* add info for npm package ([8ffbb9f](https://github.com/erbilnas/baklavue/commit/8ffbb9f81d108d633608ebe8d3854a2f6861475a))
+* add localization guide ([0367e41](https://github.com/erbilnas/baklavue/commit/0367e41741cdffb2dfb7ec631db3cb47b12fe6cc))
+* add new components ([ec926f0](https://github.com/erbilnas/baklavue/commit/ec926f0e9ba11c1a28a97c8afee4829b38ed8539))
+* add theme customizer tool for docs ([70c08cf](https://github.com/erbilnas/baklavue/commit/70c08cf505ff02b1ab6c3e569055b703674bb822))
+* disable npm package-lock for bun ([d91c5ca](https://github.com/erbilnas/baklavue/commit/d91c5ca0d8566aff9c021b1cad431eda86bc2d95))
+* disable npm package-lock for bun ([86fd15e](https://github.com/erbilnas/baklavue/commit/86fd15ed42ded4e198ed22845acdb659cdfde191))
+* initial commit ([d98b3f9](https://github.com/erbilnas/baklavue/commit/d98b3f9e6cc6e8238f197eaa117a050365987b18))
+* seperate publishing packages ([e8092d8](https://github.com/erbilnas/baklavue/commit/e8092d87a6579cf6d2798053cd6150fc4ccd98a8))
+
+# [1.0.0-preview.5](https://github.com/erbilnas/baklavue/compare/v1.0.0-preview.4...v1.0.0-preview.5) (2026-02-09)
+
+
+### Features
+
+* add github pages support ([c76dffa](https://github.com/erbilnas/baklavue/commit/c76dffa8eb32b8293aca7c7e1f5d2ee4139802b0))
+
+# [1.0.0-preview.3](https://github.com/erbilnas/baklavue/compare/v1.0.0-preview.2...v1.0.0-preview.3) (2026-02-09)
+
+
+### Features
+
+* add new components ([22a1506](https://github.com/erbilnas/baklavue/commit/22a150681ad8587c92ad5546fbc256d9275b6d00))
+
+# [1.0.0-preview.2](https://github.com/erbilnas/baklavue/compare/v1.0.0-preview.1...v1.0.0-preview.2) (2026-02-09)
+
+
+### Features
+
+* add accordion, alert and badge components ([b939941](https://github.com/erbilnas/baklavue/commit/b939941e469a29b10ddcc6196f97700951672f97))
+
+# 1.0.0-preview.1 (2026-02-09)
+
+
+### Bug Fixes
+
+* fix known issue of npm@11 ([f73a8fa](https://github.com/erbilnas/baklavue/commit/f73a8fa56191c083545b0f02d0672539a8dfbfab))
+* fix known issue of npm@11 ([6e90aeb](https://github.com/erbilnas/baklavue/commit/6e90aeb37bbd42c9d0e524735ec34481f0c87ecf))
+* fix package version ([620618d](https://github.com/erbilnas/baklavue/commit/620618df664022f1b68859aee4b374f6586731bb))
+* fix release ci ([6c22554](https://github.com/erbilnas/baklavue/commit/6c225541b182c4b8692af000e7c13ca6e546599a))
+* fix release ci ([6e23d99](https://github.com/erbilnas/baklavue/commit/6e23d99cac122d033c72d6d98819e0329c92bcdc))
+
+
+### Features
+
+* add info for npm package ([8ffbb9f](https://github.com/erbilnas/baklavue/commit/8ffbb9f81d108d633608ebe8d3854a2f6861475a))
+* add new feature ([771acd1](https://github.com/erbilnas/baklavue/commit/771acd19bbd730e4110f61d2df06a5f6a958a3a7))
+* disable npm package-lock for bun ([d91c5ca](https://github.com/erbilnas/baklavue/commit/d91c5ca0d8566aff9c021b1cad431eda86bc2d95))
+* disable npm package-lock for bun ([86fd15e](https://github.com/erbilnas/baklavue/commit/86fd15ed42ded4e198ed22845acdb659cdfde191))
+* disable npm package-lock for bun ([ca4503d](https://github.com/erbilnas/baklavue/commit/ca4503d1304cacb6212c6b328426d7c51152f893))
+* increase semantic release version\ ([b510944](https://github.com/erbilnas/baklavue/commit/b510944562238e02fa6ce34c1b10540e11d47f16))
+* initial commit ([d98b3f9](https://github.com/erbilnas/baklavue/commit/d98b3f9e6cc6e8238f197eaa117a050365987b18))

package/README.md

@@ -0,0 +1,276 @@
+# @baklavue/composables
+
+A collection of Vue 3 composables for seamless integration with Baklava UI components. This package provides convenient utilities and hooks to enhance your Vue applications with Baklava's design system.
+
+## 🚀 Features
+
+- **Vue 3 Composition API**: Built with modern Vue 3 composables
+- **TypeScript Support**: Full TypeScript support with proper type definitions
+- **Baklava Integration**: Seamlessly works with Baklava UI components
+- **Lightweight**: Minimal bundle size with no unnecessary dependencies
+- **Tree-shakable**: Only import what you need
+
+## 📦 Installation
+
+```bash
+# Using npm
+npm install @baklavue/composables
+
+# Using yarn
+yarn add @baklavue/composables
+
+# Using pnpm
+pnpm add @baklavue/composables
+
+# Using bun
+bun add @baklavue/composables
+```
+
+## 🔧 Prerequisites
+
+- Vue 3.x
+- TypeScript 5.9.2+ (peer dependency)
+- Baklava UI components installed in your project
+
+## 📚 Available Composables
+
+### `useCsv`
+
+A composable for CSV parsing, creating, and downloading. Uses PapaParse for RFC 4180-compliant handling of quoted fields, commas in values, and edge cases.
+
+#### Basic Usage
+
+```vue
+<script setup lang="ts">
+import { useCsv } from "@baklavue/composables";
+
+const { parse, parseFile, create, download } = useCsv();
+
+// Parse CSV string
+const result = parse("name,age\nAlice,30\nBob,25", { header: true });
+console.log(result.data); // [{ name: "Alice", age: "30" }, ...]
+
+// Parse file (async)
+const handleFileUpload = async (event: Event) => {
+  const file = (event.target as HTMLInputElement).files?.[0];
+  if (file) {
+    const fileResult = await parseFile(file, { header: true });
+    console.log(fileResult.data);
+  }
+};
+
+// Create CSV from array of objects
+const csv = create(
+  [
+    { name: "Alice", age: 30 },
+    { name: "Bob", age: 25 },
+  ]
+);
+
+// Download CSV file
+const exportData = () => {
+  download(
+    [{ name: "Alice", age: 30 }, { name: "Bob", age: 25 }],
+    "export.csv"
+  );
+};
+</script>
+```
+
+#### API Reference
+
+The `useCsv` composable returns an object with the following methods:
+
+##### `parse(csv: string, options?: CsvParseOptions)`
+
+Parses a CSV string and returns `{ data, errors, meta }`. Synchronous.
+
+##### `parseFile(file: File, options?: CsvParseOptions)`
+
+Parses a File or Blob asynchronously. Returns `Promise<ParseResult>`.
+
+##### `create(data: CsvData, options?: CsvCreateOptions)`
+
+Creates a CSV string from an array of objects, array of arrays, or `{ fields, data }` object.
+
+##### `download(data: CsvData, filename?: string, options?: CsvCreateOptions)`
+
+Creates a CSV string and triggers a browser download. Adds UTF-8 BOM for Excel compatibility.
+
+#### Options
+
+**CsvParseOptions:**
+
+- `delimiter` – Delimiter character (default: auto-detect)
+- `header` – If true, first row is header (returns array of objects)
+- `dynamicTyping` – If true, numbers and booleans are converted
+- `skipEmptyLines` – Skip empty lines (`true` or `'greedy'`)
+
+**CsvCreateOptions:**
+
+- `delimiter` – Delimiter character (default: comma)
+- `header` – Include header row (default: true)
+- `columns` – Column order for array of objects
+- `escapeFormulae` – Escape leading `=`, `+`, `-`, `@` to prevent CSV injection
+
+### `useNotification`
+
+A composable for managing Baklava notification system with a simple and intuitive API.
+
+#### Basic Usage
+
+```vue
+<template>
+  <div>
+    <button @click="showSuccess">Show Success</button>
+    <button @click="showError">Show Error</button>
+    <button @click="showWarning">Show Warning</button>
+    <button @click="showInfo">Show Info</button>
+
+    <!-- Required: Add the notification element to your template -->
+    <bl-notification />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useNotification } from "@baklavue/composables";
+
+const { success, error, warning, info } = useNotification();
+
+const showSuccess = () => {
+  success({
+    caption: "Success!",
+    description: "Operation completed successfully.",
+    duration: 5,
+  });
+};
+
+const showError = () => {
+  error({
+    caption: "Error!",
+    description: "Something went wrong. Please try again.",
+    duration: 8,
+  });
+};
+
+const showWarning = () => {
+  warning({
+    caption: "Warning!",
+    description: "Please review your input before proceeding.",
+    duration: 6,
+  });
+};
+
+const showInfo = () => {
+  info({
+    caption: "Information",
+    description: "Here is some useful information for you.",
+    duration: 4,
+  });
+};
+</script>
+```
+
+#### API Reference
+
+The `useNotification` composable returns an object with the following methods:
+
+##### `success(notification: NotificationProps)`
+
+Shows a success notification with green styling.
+
+##### `error(notification: NotificationProps)`
+
+Shows an error notification with red styling.
+
+##### `warning(notification: NotificationProps)`
+
+Shows a warning notification with orange styling.
+
+##### `info(notification: NotificationProps)`
+
+Shows an info notification with blue styling.
+
+#### Notification Props
+
+All notification methods accept a `NotificationProps` object with the following properties:
+
+```typescript
+interface NotificationProps {
+  caption?: string;    // Notification title
+  description: string; // Notification message (required)
+  duration?: number;  // Duration in seconds (optional)
+  permanent?: boolean; // Prevent auto-close
+  // ... other Baklava notification properties
+}
+```
+
+#### Important Notes
+
+- **Required DOM Element**: You must include `<bl-notification>` in your template for notifications to work
+- **Auto-icon**: All notifications automatically include appropriate icons based on their variant
+- **Duration**: If no duration is specified, notifications will use Baklava's default duration
+- **Error Handling**: The composable includes built-in error handling and will warn if the notification element is not found
+
+## 🏗️ Project Structure
+
+```
+packages/composables/
+├── index.ts              # Main export file
+├── csv.ts                # CSV parsing, creating, and download composable
+├── notification.ts       # Notification composable
+├── package.json          # Package configuration
+├── tsconfig.json         # TypeScript configuration
+└── README.md            # This file
+```
+
+## 🔧 Development
+
+### Prerequisites
+
+- [Bun](https://bun.sh) (recommended) or Node.js
+- TypeScript 5.9.2+
+
+### Setup
+
+```bash
+# Install dependencies
+bun install
+
+# Run the package
+bun run index.ts
+```
+
+### TypeScript Configuration
+
+This package uses strict TypeScript configuration with:
+
+- ESNext target and modules
+- Strict type checking
+- Bundler-friendly module resolution
+- Unused variable/parameter detection
+
+## 🤝 Contributing
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Add tests if applicable
+5. Submit a pull request
+
+## 📄 License
+
+This project is part of the Baklavue ecosystem. See the main project for license information.
+
+## 🔗 Related Packages
+
+- `@baklavue/ui` - Baklava UI components for Vue
+- `@trendyol/baklava` - Core Baklava design system
+
+## 📞 Support
+
+For issues and questions:
+
+- Check the [Baklava documentation](https://baklava.trendyol.com/)
+- Open an issue in the project repository
+- Review the examples in the playground directory

package/csv.ts

@@ -0,0 +1,126 @@
+import Papa from "papaparse";
+import type { ParseError, ParseMeta, ParseResult } from "papaparse";
+
+/** Re-exported for consumer use */
+export type { ParseError, ParseMeta };
+
+/**
+ * Options for parsing CSV strings or files.
+ */
+export interface CsvParseOptions {
+  /** Delimiter character. Leave empty to auto-detect. */
+  delimiter?: string;
+  /** If true, first row is treated as header (returns array of objects). */
+  header?: boolean;
+  /** If true, numeric and boolean values are converted to their types. */
+  dynamicTyping?: boolean;
+  /** If true, skip completely empty lines. Use 'greedy' to also skip whitespace-only lines. */
+  skipEmptyLines?: boolean | "greedy";
+}
+
+/**
+ * Options for creating CSV strings or downloading.
+ */
+export interface CsvCreateOptions {
+  /** Delimiter character. Default: comma. */
+  delimiter?: string;
+  /** If false, omit header row. Ignored for array of arrays. Default: true. */
+  header?: boolean;
+  /** Column order for array of objects. Uses object keys if not specified. */
+  columns?: string[];
+  /** If true, escape formulae injection (values starting with =, +, -, @). */
+  escapeFormulae?: boolean;
+}
+
+/** Parse result with data, errors, and meta. Use ParseResult<T> for typed rows. */
+export type { ParseResult };
+
+/** Data accepted by create() and download(): array of objects, array of arrays, or explicit fields+data. */
+export type CsvData =
+  | Record<string, unknown>[]
+  | unknown[][]
+  | { fields: string[]; data: unknown[][] };
+
+/**
+ * Composable for CSV parsing, creating, and downloading.
+ * Uses PapaParse for RFC 4180-compliant handling of quoted fields and edge cases.
+ *
+ * @example
+ * ```ts
+ * const { parse, parseFile, create, download } = useCsv();
+ *
+ * // Parse string
+ * const result = parse('name,age\nAlice,30\nBob,25', { header: true });
+ *
+ * // Parse file (async)
+ * const fileResult = await parseFile(file, { header: true });
+ *
+ * // Create CSV
+ * const csv = create([{ name: 'Alice', age: 30 }, { name: 'Bob', age: 25 }]);
+ *
+ * // Download
+ * download([{ name: 'Alice', age: 30 }], 'export.csv');
+ * ```
+ */
+export const useCsv = () => {
+  const parse = (csv: string, options?: CsvParseOptions): ParseResult<unknown> => {
+    return Papa.parse(csv, {
+      delimiter: options?.delimiter ?? "",
+      header: options?.header ?? false,
+      dynamicTyping: options?.dynamicTyping ?? false,
+      skipEmptyLines: options?.skipEmptyLines ?? false,
+    });
+  };
+
+  const parseFile = (
+    file: File,
+    options?: CsvParseOptions
+  ): Promise<ParseResult<unknown>> => {
+    return new Promise((resolve, reject) => {
+      Papa.parse(file, {
+        delimiter: options?.delimiter ?? "",
+        header: options?.header ?? false,
+        dynamicTyping: options?.dynamicTyping ?? false,
+        skipEmptyLines: options?.skipEmptyLines ?? false,
+        complete: (results: ParseResult<unknown>) => resolve(results),
+        error: (err: Error) => reject(err),
+      });
+    });
+  };
+
+  const create = (data: CsvData, options?: CsvCreateOptions): string => {
+    return Papa.unparse(data as Parameters<typeof Papa.unparse>[0], {
+      delimiter: options?.delimiter ?? ",",
+      header: options?.header ?? true,
+      columns: options?.columns ?? undefined,
+      escapeFormulae: options?.escapeFormulae ?? false,
+    });
+  };
+
+  const download = (
+    data: CsvData,
+    filename = "export.csv",
+    options?: CsvCreateOptions
+  ): void => {
+    if (typeof document === "undefined") return;
+
+    const csv = create(data, options);
+    const BOM = "\uFEFF";
+    const blob = new Blob([BOM + csv], { type: "text/csv;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = filename.endsWith(".csv") ? filename : `${filename}.csv`;
+    link.click();
+
+    URL.revokeObjectURL(url);
+  };
+
+  return {
+    parse,
+    parseFile,
+    create,
+    download,
+  };
+};

package/index.ts

@@ -0,0 +1,26 @@
+export {
+  useCsv,
+  type CsvCreateOptions,
+  type CsvData,
+  type CsvParseOptions,
+  type ParseError,
+  type ParseMeta,
+  type ParseResult,
+} from "./csv";
+export { useNotification } from "./notification";
+export {
+  useScrollToError,
+  type ScrollToErrorOptions,
+  type ScrollToErrorTarget,
+} from "./scrollToError";
+export {
+  useBaklavaTheme,
+  type ApplyThemeOptions,
+  type BaklavaThemeBorderRadius,
+  type BaklavaThemeColors,
+  type BaklavaThemePreset,
+  type BaklavaThemePresetRecord,
+  type BaklavaThemeSize,
+  type BaklavaThemeTypography,
+  type BaklavaThemeZIndex,
+} from "./theme";

package/notification.ts

@@ -0,0 +1,69 @@
+import type { NotificationProps } from "@trendyol/baklava/dist/components/notification/bl-notification";
+import type { NotificationVariant } from "@trendyol/baklava/dist/components/notification/card/bl-notification-card";
+
+interface NotificationElement extends HTMLElement {
+  addNotification: (options: NotificationProps) => void;
+}
+
+interface NotificationOptions extends Omit<NotificationProps, "variant"> {
+  variant: NotificationVariant;
+}
+
+export const useNotification = () => {
+  const getNotificationElement = (): NotificationElement | null => {
+    return document.querySelector(
+      "bl-notification",
+    ) as NotificationElement | null;
+  };
+
+  const createNotification = (options: NotificationOptions): void => {
+    const notificationElement = getNotificationElement();
+
+    if (!notificationElement) {
+      console.warn(
+        "Notification element not found. Make sure <bl-notification> is present in the DOM.",
+      );
+      return;
+    }
+
+    notificationElement.addNotification({
+      ...options,
+      icon: true,
+    });
+  };
+
+  const success = (notification: Omit<NotificationProps, "variant">): void => {
+    createNotification({
+      ...notification,
+      variant: "success",
+    });
+  };
+
+  const error = (notification: Omit<NotificationProps, "variant">): void => {
+    createNotification({
+      ...notification,
+      variant: "error",
+    });
+  };
+
+  const warning = (notification: Omit<NotificationProps, "variant">): void => {
+    createNotification({
+      ...notification,
+      variant: "warning",
+    });
+  };
+
+  const info = (notification: Omit<NotificationProps, "variant">): void => {
+    createNotification({
+      ...notification,
+      variant: "info",
+    });
+  };
+
+  return {
+    success,
+    error,
+    warning,
+    info,
+  };
+};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@baklavue/composables",
+  "version": "1.0.0-preview.1",
+  "description": "Vue 3 composables for Trendyol Baklava Design System",
+  "author": "erbilnas",
+  "license": "MIT",
+  "homepage": "https://github.com/erbilnas/baklavue/tree/main/packages/composables#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/erbilnas/baklavue.git",
+    "directory": "packages/composables"
+  },
+  "bugs": {
+    "url": "https://github.com/erbilnas/baklavue/issues"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "baklava",
+    "trendyol",
+    "design-system",
+    "composables"
+  ],
+  "module": "index.ts",
+  "type": "module",
+  "scripts": {
+    "release": "semantic-release -e semantic-release-monorepo",
+    "release:dry-run": "semantic-release --dry-run -e semantic-release-monorepo"
+  },
+  "devDependencies": {
+    "@trendyol/baklava": "^3.4.2",
+    "@types/bun": "latest",
+    "@types/papaparse": "^5.5.2"
+  },
+  "peerDependencies": {
+    "typescript": "^5.9.2",
+    "vue": ">=3.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "papaparse": "^5.5.3"
+  }
+}

package/scrollToError.ts

@@ -0,0 +1,151 @@
+/**
+ * Focusable element selectors for finding form controls.
+ * Includes native inputs and Baklava custom components.
+ */
+const FOCUSABLE_SELECTORS =
+  "input, select, textarea, button, bl-select, bl-input";
+
+/**
+ * Options for customizing scroll-to-error behavior.
+ */
+export interface ScrollToErrorOptions {
+  /** Scroll behavior. Default: `'smooth'` */
+  scrollBehavior?: ScrollBehavior;
+  /** Vertical scroll position. Default: `'center'` */
+  block?: ScrollLogicalPosition;
+  /** CSS class to apply for highlight effect. Default: `'error-shine'` */
+  shineClass?: string;
+  /** Duration in ms to keep the shine class. Use `0` to disable. Default: `2500` */
+  shineDuration?: number;
+  /** Whether to attempt focusing the first focusable element. Default: `true` */
+  focus?: boolean;
+  /** Delay in ms before focus attempt. Default: `300` */
+  focusDelay?: number;
+}
+
+/** Target that can be resolved to an HTMLElement: selector, element, or object with scrollTarget. */
+export type ScrollToErrorTarget =
+  | string
+  | HTMLElement
+  | { scrollTarget: string };
+
+/**
+ * Resolves the target to an HTMLElement.
+ *
+ * @param target - CSS selector, HTMLElement, or object with scrollTarget
+ * @returns The resolved element or null if not found
+ */
+function resolveTarget(target: ScrollToErrorTarget): HTMLElement | null {
+  if (typeof document === "undefined") return null;
+
+  if (typeof target === "string") {
+    const el = document.querySelector(target);
+    return el instanceof HTMLElement ? el : null;
+  }
+
+  if (target instanceof HTMLElement) {
+    return target;
+  }
+
+  if (target && typeof target === "object" && "scrollTarget" in target) {
+    const selector = target.scrollTarget;
+    if (!selector || typeof selector !== "string") return null;
+    const el = document.querySelector(selector);
+    return el instanceof HTMLElement ? el : null;
+  }
+
+  return null;
+}
+
+/**
+ * Finds the first focusable element within the given element.
+ * Prefers inner input/select/textarea for custom components like bl-select.
+ *
+ * @param element - Container element to search within
+ * @returns The focusable element or null
+ */
+function findFocusable(element: HTMLElement): HTMLElement | null {
+  const focusable = element.querySelector(FOCUSABLE_SELECTORS);
+  if (!(focusable instanceof HTMLElement)) return null;
+
+  // Prefer inner input/select/textarea for custom components
+  const innerInput = focusable.querySelector("input, select, textarea");
+  if (innerInput instanceof HTMLElement) {
+    return innerInput;
+  }
+  return focusable;
+}
+
+/**
+ * Composable for scrolling to an element with validation error.
+ * Scrolls into view, optionally applies a highlight effect, and focuses the first focusable control.
+ *
+ * @example
+ * ```ts
+ * const { scrollToError } = useScrollToError();
+ *
+ * // From validation error object
+ * scrollToError(validationError);
+ *
+ * // Direct selector
+ * scrollToError('[data-field="tags"]');
+ *
+ * // With custom options
+ * scrollToError('[data-field="tags"]', { shineClass: 'my-shine', shineDuration: 1500 });
+ * ```
+ */
+export const useScrollToError = () => {
+  /**
+   * Scrolls to the target element and optionally applies highlight and focus.
+   *
+   * @param target - CSS selector, HTMLElement, or object with scrollTarget (e.g. validation error)
+   * @param options - Optional overrides for scroll, shine, and focus behavior
+   */
+  const scrollToError = (
+    target: ScrollToErrorTarget,
+    options?: ScrollToErrorOptions,
+  ): void => {
+    if (typeof document === "undefined") return;
+
+    const element = resolveTarget(target);
+    if (!element) return;
+
+    const {
+      scrollBehavior = "smooth",
+      block = "center",
+      shineClass = "error-shine",
+      shineDuration = 2500,
+      focus = true,
+      focusDelay = 300,
+    } = options ?? {};
+
+    element.scrollIntoView({ behavior: scrollBehavior, block });
+
+    // Apply shine effect
+    let targetElement: HTMLElement | null = null;
+    const formControl =
+      element.closest(".bl-form-control, [class*='bl-']") || element;
+    targetElement = formControl instanceof HTMLElement ? formControl : element;
+
+    if (targetElement && shineClass && shineDuration > 0) {
+      targetElement.classList.add(shineClass);
+      setTimeout(() => {
+        targetElement?.classList.remove(shineClass);
+      }, shineDuration);
+    }
+
+    // Focus the first focusable element
+    if (focus && element instanceof HTMLElement) {
+      const focusableElement = findFocusable(element);
+      if (focusableElement) {
+        setTimeout(() => {
+          focusableElement.focus();
+        }, focusDelay);
+      }
+    }
+  };
+
+  return {
+    scrollToError,
+  };
+};

package/theme.ts

@@ -0,0 +1,306 @@
+/**
+ * Built-in presets. Use 'vue' to apply Vue.js brand colors.
+ */
+export type BaklavaThemePreset = "vue" | "default";
+
+/**
+ * Custom preset: map of CSS variable names to values.
+ * Use this to pass your own preset or compose with built-in presets.
+ *
+ * @example
+ * ```ts
+ * const myPreset: BaklavaThemePresetRecord = {
+ *   '--bl-color-primary': '#ea4c89',
+ *   '--bl-color-primary-highlight': '#d6427a',
+ * };
+ * applyTheme({ preset: myPreset });
+ * ```
+ */
+export type BaklavaThemePresetRecord = Record<string, string>;
+
+/**
+ * Custom color overrides for Baklava design tokens.
+ * Maps to --bl-color-* CSS variables.
+ */
+export interface BaklavaThemeColors {
+  primary?: string;
+  primaryHighlight?: string;
+  primaryContrast?: string;
+  success?: string;
+  successHighlight?: string;
+  successContrast?: string;
+  danger?: string;
+  dangerHighlight?: string;
+  dangerContrast?: string;
+  warning?: string;
+  warningHighlight?: string;
+  warningContrast?: string;
+  info?: string;
+  infoHighlight?: string;
+  infoContrast?: string;
+  neutralDarkest?: string;
+  neutralDarker?: string;
+  neutralDark?: string;
+  neutralLight?: string;
+  neutralLighter?: string;
+  neutralLightest?: string;
+  neutralFull?: string;
+}
+
+/**
+ * Border radius overrides for Baklava design tokens.
+ * Maps to --bl-border-radius-* CSS variables.
+ */
+export interface BaklavaThemeBorderRadius {
+  xs?: string;
+  s?: string;
+  m?: string;
+  l?: string;
+  pill?: string;
+  circle?: string;
+}
+
+/**
+ * Size and spacing overrides for Baklava design tokens.
+ * Maps to --bl-size-* CSS variables.
+ */
+export interface BaklavaThemeSize {
+  "4xs"?: string;
+  "3xs"?: string;
+  "2xs"?: string;
+  xs?: string;
+  s?: string;
+  m?: string;
+  l?: string;
+  xl?: string;
+  "2xl"?: string;
+  "3xl"?: string;
+  "4xl"?: string;
+  "5xl"?: string;
+  "6xl"?: string;
+}
+
+/**
+ * Typography overrides for Baklava design tokens.
+ * Maps to --bl-font-* CSS variables.
+ */
+export interface BaklavaThemeTypography {
+  fontFamily?: string;
+  fontSize?: Record<string, string>;
+  fontWeight?: Record<string, number>;
+}
+
+/**
+ * Z-index overrides for Baklava design tokens.
+ * Maps to --bl-index-* CSS variables.
+ */
+export interface BaklavaThemeZIndex {
+  deep?: number;
+  base?: number;
+  popover?: number;
+  tooltip?: number;
+  sticky?: number;
+  overlay?: number;
+  dialog?: number;
+  notification?: number;
+}
+
+export interface ApplyThemeOptions {
+  /** Built-in preset name ('vue', 'default') or your own preset object */
+  preset?: BaklavaThemePreset | BaklavaThemePresetRecord;
+  colors?: Partial<BaklavaThemeColors>;
+  borderRadius?: Partial<BaklavaThemeBorderRadius>;
+  size?: Partial<BaklavaThemeSize>;
+  typography?: Partial<BaklavaThemeTypography>;
+  zIndex?: Partial<BaklavaThemeZIndex>;
+}
+
+const VUE_PRESET: Record<string, string> = {
+  "--bl-color-primary": "#41b883",
+  "--bl-color-primary-highlight": "#3aa876",
+  "--bl-color-primary-contrast": "#e7f9ef",
+  "--bl-color-success": "#41b883",
+  "--bl-color-success-highlight": "#3aa876",
+  "--bl-color-success-contrast": "#e7f9ef",
+  "--bl-color-neutral-darker": "#34495e",
+  "--bl-color-neutral-darkest": "#2c3e50",
+};
+
+const BORDER_RADIUS_MAP: Record<keyof BaklavaThemeBorderRadius, string> = {
+  xs: "--bl-border-radius-xs",
+  s: "--bl-border-radius-s",
+  m: "--bl-border-radius-m",
+  l: "--bl-border-radius-l",
+  pill: "--bl-border-radius-pill",
+  circle: "--bl-border-radius-circle",
+};
+
+const SIZE_MAP: Record<keyof BaklavaThemeSize, string> = {
+  "4xs": "--bl-size-4xs",
+  "3xs": "--bl-size-3xs",
+  "2xs": "--bl-size-2xs",
+  xs: "--bl-size-xs",
+  s: "--bl-size-s",
+  m: "--bl-size-m",
+  l: "--bl-size-l",
+  xl: "--bl-size-xl",
+  "2xl": "--bl-size-2xl",
+  "3xl": "--bl-size-3xl",
+  "4xl": "--bl-size-4xl",
+  "5xl": "--bl-size-5xl",
+  "6xl": "--bl-size-6xl",
+};
+
+const Z_INDEX_MAP: Record<keyof BaklavaThemeZIndex, string> = {
+  deep: "--bl-index-deep",
+  base: "--bl-index-base",
+  popover: "--bl-index-popover",
+  tooltip: "--bl-index-tooltip",
+  sticky: "--bl-index-sticky",
+  overlay: "--bl-index-overlay",
+  dialog: "--bl-index-dialog",
+  notification: "--bl-index-notification",
+};
+
+function buildCssVariables(options: ApplyThemeOptions = {}): string {
+  const vars: Record<string, string> = {};
+  const { preset, colors, borderRadius, size, typography, zIndex } = options;
+
+  if (preset) {
+    if (typeof preset === "string") {
+      if (preset === "vue") Object.assign(vars, VUE_PRESET);
+    } else {
+      Object.assign(vars, preset);
+    }
+  }
+
+  if (colors) {
+    const colorMap: Record<keyof BaklavaThemeColors, string> = {
+      primary: "--bl-color-primary",
+      primaryHighlight: "--bl-color-primary-highlight",
+      primaryContrast: "--bl-color-primary-contrast",
+      success: "--bl-color-success",
+      successHighlight: "--bl-color-success-highlight",
+      successContrast: "--bl-color-success-contrast",
+      danger: "--bl-color-danger",
+      dangerHighlight: "--bl-color-danger-highlight",
+      dangerContrast: "--bl-color-danger-contrast",
+      warning: "--bl-color-warning",
+      warningHighlight: "--bl-color-warning-highlight",
+      warningContrast: "--bl-color-warning-contrast",
+      info: "--bl-color-info",
+      infoHighlight: "--bl-color-info-highlight",
+      infoContrast: "--bl-color-info-contrast",
+      neutralDarkest: "--bl-color-neutral-darkest",
+      neutralDarker: "--bl-color-neutral-darker",
+      neutralDark: "--bl-color-neutral-dark",
+      neutralLight: "--bl-color-neutral-light",
+      neutralLighter: "--bl-color-neutral-lighter",
+      neutralLightest: "--bl-color-neutral-lightest",
+      neutralFull: "--bl-color-neutral-full",
+    };
+
+    for (const [key, value] of Object.entries(colors)) {
+      if (value && key in colorMap) {
+        vars[colorMap[key as keyof BaklavaThemeColors]] = value;
+      }
+    }
+  }
+
+  if (borderRadius) {
+    for (const [key, value] of Object.entries(borderRadius)) {
+      if (value && key in BORDER_RADIUS_MAP) {
+        vars[BORDER_RADIUS_MAP[key as keyof BaklavaThemeBorderRadius]] = value;
+      }
+    }
+  }
+
+  if (size) {
+    for (const [key, value] of Object.entries(size)) {
+      if (value && key in SIZE_MAP) {
+        vars[SIZE_MAP[key as keyof BaklavaThemeSize]] = value;
+      }
+    }
+  }
+
+  if (typography) {
+    if (typography.fontFamily) vars["--bl-font-family"] = typography.fontFamily;
+    if (typography.fontSize) {
+      for (const [key, value] of Object.entries(typography.fontSize)) {
+        if (value) vars[`--bl-font-size-${key}`] = value;
+      }
+    }
+    if (typography.fontWeight) {
+      for (const [key, value] of Object.entries(typography.fontWeight)) {
+        if (value != null) vars[`--bl-font-weight-${key}`] = String(value);
+      }
+    }
+  }
+
+  if (zIndex) {
+    for (const [key, value] of Object.entries(zIndex)) {
+      if (value != null && key in Z_INDEX_MAP) {
+        vars[Z_INDEX_MAP[key as keyof BaklavaThemeZIndex]] = String(value);
+      }
+    }
+  }
+
+  const rules = Object.entries(vars)
+    .map(([prop, val]) => `  ${prop}: ${val};`)
+    .join("\n");
+
+  return rules ? `:root {\n${rules}\n}` : "";
+}
+
+const STYLE_ID = "baklavue-theme-overrides";
+
+/**
+ * Composable to overwrite Baklava design system colors.
+ * Use the 'vue' preset, pass your own preset object, or override specific colors.
+ *
+ * @example
+ * ```ts
+ * import { useBaklavaTheme } from '@baklavue/composables'
+ *
+ * // Vue preset
+ * useBaklavaTheme().applyTheme({ preset: 'vue' })
+ *
+ * // Custom preset
+ * useBaklavaTheme().applyTheme({
+ *   preset: {
+ *     '--bl-color-primary': '#ea4c89',
+ *     '--bl-color-primary-highlight': '#d6427a',
+ *   }
+ * })
+ *
+ * // Custom colors
+ * useBaklavaTheme().applyTheme({
+ *   colors: { primary: '#41B883', primaryHighlight: '#3aa876' }
+ * })
+ * ```
+ */
+export const useBaklavaTheme = () => {
+  const applyTheme = (options: ApplyThemeOptions = {}): void => {
+    if (typeof document === "undefined") return;
+
+    const css = buildCssVariables(options);
+
+    if (!css) return;
+
+    let styleEl = document.getElementById(STYLE_ID) as HTMLStyleElement | null;
+
+    if (!styleEl) {
+      styleEl = document.createElement("style");
+      styleEl.id = STYLE_ID;
+      document.head.appendChild(styleEl);
+    }
+
+    styleEl.textContent = css;
+    // Move to end of head so we override any lazy-loaded styles (e.g. from VitePress route chunks)
+    document.head.appendChild(styleEl);
+  };
+
+  return {
+    applyTheme,
+  };
+};

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    // Enable latest features
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitAny": true
+  }
+}