@baklavue/ui 1.0.0-preview.2

package/.releaserc.json

@@ -0,0 +1,14 @@
+{
+  "extends": "semantic-release-monorepo",
+  "tagFormat": "@baklavue/ui-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,40 @@
+# [@baklavue/ui-v1.0.0-preview.2](https://github.com/erbilnas/baklavue/compare/@baklavue/ui-v1.0.0-preview.1...@baklavue/ui-v1.0.0-preview.2) (2026-02-11)
+
+
+### Features
+
+* add theme customizer tool for docs ([70c08cf](https://github.com/erbilnas/baklavue/commit/70c08cf505ff02b1ab6c3e569055b703674bb822))
+
+# @baklavue/ui-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 accordion, alert and badge components ([b939941](https://github.com/erbilnas/baklavue/commit/b939941e469a29b10ddcc6196f97700951672f97))
+* add github pages support ([c76dffa](https://github.com/erbilnas/baklavue/commit/c76dffa8eb32b8293aca7c7e1f5d2ee4139802b0))
+* add info for npm package ([8ffbb9f](https://github.com/erbilnas/baklavue/commit/8ffbb9f81d108d633608ebe8d3854a2f6861475a))
+* add new components ([f977070](https://github.com/erbilnas/baklavue/commit/f977070bc1634941a5566f079922410838e1e257))
+* add new components ([fa3b4d1](https://github.com/erbilnas/baklavue/commit/fa3b4d1586f7e5b15194d182931e5bc89fd2f1dd))
+* add new components ([ec926f0](https://github.com/erbilnas/baklavue/commit/ec926f0e9ba11c1a28a97c8afee4829b38ed8539))
+* add new components ([5d3d7e2](https://github.com/erbilnas/baklavue/commit/5d3d7e2e5a040cb57bd964db2cee2178bb574a82))
+* add new components ([22a1506](https://github.com/erbilnas/baklavue/commit/22a150681ad8587c92ad5546fbc256d9275b6d00))
+* 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))
+* remove playground to develop new docs ([043d89c](https://github.com/erbilnas/baklavue/commit/043d89c7944c8b2acff3bb21c571691f21c99162))
+* seperate publishing packages ([e8092d8](https://github.com/erbilnas/baklavue/commit/e8092d87a6579cf6d2798053cd6150fc4ccd98a8))
+
+# [1.0.0-preview.4](https://github.com/erbilnas/baklavue/compare/v1.0.0-preview.3...v1.0.0-preview.4) (2026-02-09)
+
+
+### Features
+
+* remove playground to develop new docs ([043d89c](https://github.com/erbilnas/baklavue/commit/043d89c7944c8b2acff3bb21c571691f21c99162))

package/README.md

@@ -0,0 +1,15 @@
+# ui
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run index.ts
+```
+
+This project was created using `bun init` in bun v1.1.34. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.

package/index.ts

@@ -0,0 +1 @@
+export * from "./src";

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@baklavue/ui",
+  "version": "1.0.0-preview.2",
+  "description": "Vue 3 UI kit for Trendyol Baklava Design System",
+  "author": "erbilnas",
+  "license": "MIT",
+  "homepage": "https://github.com/erbilnas/baklavue/tree/main/packages/ui#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/erbilnas/baklavue.git",
+    "directory": "packages/ui"
+  },
+  "bugs": {
+    "url": "https://github.com/erbilnas/baklavue/issues"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "baklava",
+    "trendyol",
+    "design-system",
+    "components",
+    "ui"
+  ],
+  "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": {
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "typescript": "^5.9.2"
+  },
+  "dependencies": {
+    "@trendyol/baklava": "^3.4.2",
+    "@trendyol/baklava-icons": "^1.1.0",
+    "vue": "^3.5.21"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/accordion/Accordion.vue

@@ -0,0 +1,206 @@
+<script setup lang="ts">
+/**
+ * Accordion Component
+ *
+ * A Vue UI kit component for Baklava's `bl-accordion` and `bl-accordion-group` web components.
+ * Can be used as either a single accordion or as a group container for multiple accordions.
+ *
+ * @component
+ * @example
+ * ```vue
+ * <!-- Single accordion -->
+ * <template>
+ *   <Accordion :open="isOpen" @toggle="isOpen = $event" caption="Section Title">
+ *     <p>Accordion content goes here</p>
+ *   </Accordion>
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- Accordion group - only one open at a time -->
+ * <template>
+ *   <Accordion :multiple="false" :items="items">
+ *     <template #item="{ item }">
+ *       <p>{{ item.answer }}</p>
+ *     </template>
+ *   </Accordion>
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- Accordion group - multiple can be open -->
+ * <template>
+ *   <Accordion :multiple="true" :items="sections">
+ *     <template #item="{ item }">
+ *       <p>{{ item.description }}</p>
+ *     </template>
+ *   </Accordion>
+ * </template>
+ * ```
+ */
+import { computed, onMounted, ref, watch } from "vue";
+import { loadBaklavaResources } from "../utils/loadBaklavaResources";
+import type { AccordionProps } from "./accordion.types";
+
+/**
+ * Component props with default values.
+ */
+const props = withDefaults(defineProps<AccordionProps>(), {
+  open: false,
+  caption: undefined,
+  icon: undefined,
+  disabled: false,
+  animationDuration: 250,
+  multiple: undefined,
+});
+
+/**
+ * Component events.
+ */
+const emit = defineEmits<{
+  /**
+   * Emitted when the accordion is toggled (opened or closed).
+   * Only used when component is in single accordion mode.
+   *
+   * @param {boolean} open - The new open state of the accordion.
+   */
+  toggle: [open: boolean];
+}>();
+
+/**
+ * Reference to the underlying web component element.
+ */
+const accordionRef = ref<HTMLElement | null>(null);
+
+/**
+ * Determines if the component should act as a group container.
+ * When `multiple` prop is provided and `items` is defined, it acts as a group.
+ */
+const isGroupMode = computed(
+  () => props.multiple !== undefined && Array.isArray(props.items),
+);
+
+/**
+ * Watches for changes to the `open` prop and syncs with the web component.
+ * Only applies when in single accordion mode.
+ *
+ * When the prop changes, it calls the appropriate expand/collapse method
+ * on the underlying web component.
+ */
+watch(
+  () => props.open,
+  (newValue) => {
+    if (!isGroupMode.value && accordionRef.value) {
+      const blAccordion = accordionRef.value as any;
+      if (newValue && !blAccordion.open) {
+        blAccordion.expand();
+      } else if (!newValue && blAccordion.open) {
+        blAccordion.collapse();
+      }
+    }
+  },
+  { immediate: true },
+);
+
+/**
+ * Handles the toggle event from the underlying web component.
+ * Only used when component is in single accordion mode.
+ *
+ * @param {CustomEvent<boolean>} event - The toggle event from bl-accordion.
+ */
+const handleToggle = (event: CustomEvent<boolean>): void => {
+  if (!isGroupMode.value) {
+    const isOpen = event.detail;
+    emit("toggle", isOpen);
+  }
+};
+
+/**
+ * Lifecycle hook: Component mounted.
+ *
+ * Loads Baklava resources and syncs the initial open state with the web component
+ * (only when in single accordion mode).
+ */
+onMounted(() => {
+  loadBaklavaResources();
+
+  // Sync initial state (only for single accordion mode)
+  if (!isGroupMode.value && accordionRef.value) {
+    const blAccordion = accordionRef.value as any;
+    if (props.open && !blAccordion.open) {
+      blAccordion.expand();
+    } else if (!props.open && blAccordion.open) {
+      blAccordion.collapse();
+    }
+  }
+});
+
+/**
+ * Exposed methods for programmatic control of the accordion.
+ * Only available when component is in single accordion mode.
+ */
+defineExpose({
+  /**
+   * Expands the accordion programmatically.
+   *
+   * @public
+   */
+  expand: (): void => {
+    if (!isGroupMode.value && accordionRef.value) {
+      (accordionRef.value as any).expand();
+    }
+  },
+
+  /**
+   * Collapses the accordion programmatically.
+   *
+   * @public
+   */
+  collapse: (): void => {
+    if (!isGroupMode.value && accordionRef.value) {
+      (accordionRef.value as any).collapse();
+    }
+  },
+});
+</script>
+
+<template>
+  <!-- Group mode: render as bl-accordion-group -->
+  <!-- Render bl-accordion for each item in props.items. Content via #item slot. -->
+  <bl-accordion-group
+    v-if="isGroupMode"
+    :multiple="props.multiple === true ? true : undefined"
+  >
+    <bl-accordion
+      v-for="(item, index) in props.items"
+      :key="index"
+      v-bind="{
+        open: item.open === true ? true : undefined,
+        caption: item.caption,
+        icon: item.icon,
+        disabled: item.disabled === true ? true : undefined,
+        animationDuration: item.animationDuration,
+      }"
+    >
+      <slot name="item" :item="item" :index="index" />
+    </bl-accordion>
+  </bl-accordion-group>
+
+  <!-- Single accordion mode: render as bl-accordion -->
+  <bl-accordion
+    v-else
+    ref="accordionRef"
+    v-bind="{
+      open: props.open === true ? true : undefined,
+      caption: props.caption,
+      icon: props.icon,
+      disabled: props.disabled === true ? true : undefined,
+      animationDuration: props.animationDuration,
+    }"
+    @bl-toggle="handleToggle"
+  >
+    <slot />
+  </bl-accordion>
+</template>

package/src/accordion/accordion.types.ts

@@ -0,0 +1,109 @@
+import type { BaklavaIcon } from "@trendyol/baklava-icons";
+
+/**
+ * Properties for a single accordion item when used in group mode.
+ *
+ * @interface AccordionItem
+ */
+export interface AccordionItem {
+  /**
+   * Whether the accordion is open/expanded.
+   *
+   * @default false
+   */
+  open?: boolean;
+
+  /**
+   * The caption text displayed in the accordion header.
+   */
+  caption?: string;
+
+  /**
+   * Icon configuration for the accordion header.
+   * Can be a boolean to show/hide default icon, or a specific BaklavaIcon.
+   */
+  icon?: boolean | BaklavaIcon;
+
+  /**
+   * Whether the accordion is disabled.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Duration of the expand/collapse animation in milliseconds.
+   *
+   * @default 250
+   */
+  animationDuration?: number;
+
+  /**
+   * Additional custom data for use in the #item scoped slot.
+   * Content is provided via the #item slot, not via a property.
+   */
+  [key: string]: unknown;
+}
+
+/**
+ * Props for the Accordion component.
+ *
+ * When `multiple` prop is provided, the component acts as an accordion group container.
+ * Otherwise, it acts as a single accordion.
+ *
+ * @interface AccordionProps
+ */
+export interface AccordionProps {
+  /**
+   * Whether the accordion is open/expanded.
+   * Only used when component is in single accordion mode.
+   *
+   * @default false
+   */
+  open?: boolean;
+
+  /**
+   * The caption text displayed in the accordion header.
+   * Only used when component is in single accordion mode.
+   */
+  caption?: string;
+
+  /**
+   * Icon configuration for the accordion header.
+   * Can be a boolean to show/hide default icon, or a specific BaklavaIcon.
+   * Only used when component is in single accordion mode.
+   */
+  icon?: boolean | BaklavaIcon;
+
+  /**
+   * Whether the accordion is disabled.
+   * Only used when component is in single accordion mode.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Duration of the expand/collapse animation in milliseconds.
+   * Only used when component is in single accordion mode.
+   *
+   * @default 250
+   */
+  animationDuration?: number;
+
+  /**
+   * Allow multiple accordions to be open at once.
+   * When this prop is provided, the component acts as an accordion group container.
+   * When not provided, the component acts as a single accordion.
+   *
+   * @default false (when used as group)
+   */
+  multiple?: boolean;
+
+  /**
+   * Array of accordion items to render when in group mode.
+   * Each item will be rendered as a bl-accordion element.
+   * Only used when component is in group mode.
+   */
+  items?: AccordionItem[];
+}

package/src/accordion/index.ts

@@ -0,0 +1,3 @@
+// Component exports must use the "Bv-" prefix
+export { default as BvAccordion } from "./Accordion.vue";
+export type { AccordionProps, AccordionItem } from "./accordion.types";

package/src/alert/Alert.vue

@@ -0,0 +1,199 @@
+<script setup lang="ts">
+/**
+ * Alert Component
+ *
+ * A Vue UI kit component for Baklava's `bl-alert` web component.
+ * Displays contextual feedback messages with variants (info, success, warning, danger).
+ *
+ * @component
+ * @example
+ * ```vue
+ * <!-- Basic alert -->
+ * <template>
+ *   <BvAlert variant="info" description="This is an informational message" />
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- Closable alert with controlled state -->
+ * <template>
+ *   <BvAlert
+ *     variant="warning"
+ *     caption="Warning"
+ *     closable
+ *     :closed="isClosed"
+ *     @close="isClosed = true"
+ *   >
+ *     <p>You can close this alert.</p>
+ *   </BvAlert>
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- Programmatic control via ref -->
+ * <template>
+ *   <BvAlert ref="alertRef" variant="success" closable>
+ *     <p>Content</p>
+ *   </BvAlert>
+ *   <button @click="alertRef?.close()">Close</button>
+ * </template>
+ * ```
+ */
+import { nextTick, onMounted, ref, watch } from "vue";
+import { loadBaklavaResources } from "../utils/loadBaklavaResources";
+import type { AlertProps, BlAlertElement } from "./alert.types";
+
+/**
+ * Component props with default values.
+ */
+const props = withDefaults(defineProps<AlertProps>(), {
+  variant: "info",
+  description: undefined,
+  icon: undefined,
+  closable: false,
+  caption: undefined,
+  closed: false,
+});
+
+const emit = defineEmits<{
+  /**
+   * Emitted when the close button is clicked (only when closable is true).
+   */
+  close: [];
+}>();
+
+/**
+ * Reference to the underlying bl-alert element.
+ */
+const alertRef = ref<HTMLElement | null>(null);
+
+/**
+ * Safely casts an HTMLElement to BlAlertElement.
+ *
+ * @param el - The element to cast.
+ * @returns The element typed as BlAlertElement, or null.
+ */
+function asBlAlert(el: HTMLElement | null): BlAlertElement | null {
+  return el as BlAlertElement | null;
+}
+
+/**
+ * Waits for the bl-alert custom element to be defined.
+ * Used when Baklava script loads asynchronously.
+ */
+async function waitForBlAlert(): Promise<void> {
+  if (!customElements.get("bl-alert")) {
+    await customElements.whenDefined("bl-alert");
+  }
+}
+
+/**
+ * Syncs the `closed` prop state with the underlying bl-alert web component.
+ * Calls open() or close() on the element when prop and element state differ.
+ *
+ * @param el - The bl-alert element to sync.
+ */
+function syncWithBlAlert(el: HTMLElement): void {
+  const blAlert = asBlAlert(el);
+  if (!blAlert || typeof blAlert.close !== "function" || typeof blAlert.open !== "function") {
+    return;
+  }
+  if (props.closed && !blAlert.closed) {
+    blAlert.close();
+  } else if (!props.closed && blAlert.closed) {
+    blAlert.open();
+  }
+}
+
+/**
+ * Calls open or close on the bl-alert element when available.
+ *
+ * @param method - The method to call ("open" or "close").
+ */
+function callBlAlertMethod(method: "open" | "close"): void {
+  const el = asBlAlert(alertRef.value);
+  if (el && typeof el[method] === "function") {
+    el[method]!();
+  }
+}
+
+/**
+ * Watches for changes to the closed prop and syncs with the web component.
+ */
+watch(
+  () => props.closed,
+  () => {
+    if (alertRef.value) {
+      syncWithBlAlert(alertRef.value);
+    }
+  },
+);
+
+/**
+ * Handles the bl-close event from the underlying web component.
+ * Forwards it to the component's emit.
+ */
+function handleClose(): void {
+  emit("close");
+}
+
+/**
+ * Lifecycle hook: Component mounted.
+ *
+ * Loads Baklava resources, waits for bl-alert to be defined,
+ * then syncs the initial closed state with the web component.
+ */
+onMounted(async () => {
+  loadBaklavaResources();
+
+  await nextTick();
+  await waitForBlAlert();
+
+  if (alertRef.value) {
+    syncWithBlAlert(alertRef.value);
+  }
+});
+
+/**
+ * Exposed methods for programmatic control of the alert.
+ */
+defineExpose({
+  /**
+   * Opens the alert programmatically.
+   *
+   * @public
+   */
+  open: async (): Promise<void> => {
+    await nextTick();
+    callBlAlertMethod("open");
+  },
+
+  /**
+   * Closes the alert programmatically.
+   *
+   * @public
+   */
+  close: async (): Promise<void> => {
+    await nextTick();
+    callBlAlertMethod("close");
+  },
+});
+</script>
+
+<template>
+  <bl-alert
+    ref="alertRef"
+    v-bind="{
+      ...props,
+      closable: props.closable === true ? true : undefined,
+      closed: props.closed,
+    }"
+    @bl-close="handleClose"
+  >
+    <slot v-if="$slots['caption']" name="caption" />
+    <slot v-if="$slots['default']" />
+    <slot v-if="$slots['action']" name="action" />
+  </bl-alert>
+</template>

package/src/alert/alert.types.ts

@@ -0,0 +1,58 @@
+import type { BaklavaIcon } from "@trendyol/baklava-icons";
+import type { AlertVariant } from "@trendyol/baklava/dist/components/alert/bl-alert";
+
+/**
+ * Interface for the bl-alert custom element.
+ * Extends HTMLElement with Baklava Alert API.
+ *
+ * @interface BlAlertElement
+ */
+export interface BlAlertElement extends HTMLElement {
+  closed?: boolean;
+  open?: () => void;
+  close?: () => void;
+}
+
+/**
+ * Props for the Alert component.
+ * Wraps Baklava's bl-alert web component.
+ *
+ * @interface AlertProps
+ */
+export interface AlertProps {
+  /**
+   * Alert variant (success, danger, info, warning).
+   *
+   * @default "info"
+   */
+  variant?: AlertVariant;
+
+  /**
+   * Alert description text.
+   */
+  description?: string;
+
+  /**
+   * Icon configuration: boolean to show/hide default icon, or a specific BaklavaIcon.
+   */
+  icon?: boolean | BaklavaIcon;
+
+  /**
+   * Whether to show the close button.
+   *
+   * @default false
+   */
+  closable?: boolean;
+
+  /**
+   * Alert caption text.
+   */
+  caption?: string;
+
+  /**
+   * Whether the alert is closed/collapsed.
+   *
+   * @default false
+   */
+  closed?: boolean;
+}

package/src/alert/index.ts

@@ -0,0 +1,2 @@
+export { default as BvAlert } from "./Alert.vue";
+export type { AlertProps, BlAlertElement } from "./alert.types";