@baklavue/ui 1.0.0-preview.2 → 1.0.0-preview.4

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# [@baklavue/ui-v1.0.0-preview.4](https://github.com/erbilnas/baklavue/compare/@baklavue/ui-v1.0.0-preview.3...@baklavue/ui-v1.0.0-preview.4) (2026-02-11)
+
+
+### Features
+
+* add file upload component ([7aa41b1](https://github.com/erbilnas/baklavue/commit/7aa41b1766c72572be97c84bddc2ca5dccac9be8))
+* add image component ([609eefe](https://github.com/erbilnas/baklavue/commit/609eefe9a4a9f74fc19c7e2a8aa2ab0d7529686f))
+
+# [@baklavue/ui-v1.0.0-preview.3](https://github.com/erbilnas/baklavue/compare/@baklavue/ui-v1.0.0-preview.2...@baklavue/ui-v1.0.0-preview.3) (2026-02-11)
+
+
+### Features
+
+* add new components ([b3c535e](https://github.com/erbilnas/baklavue/commit/b3c535e010e1e43b9b04365df2205b69a0777695))
+* add new composables ([49105ea](https://github.com/erbilnas/baklavue/commit/49105eaa106f1a5b888f9e3f9638ed9776b3d55b))
+
 # [@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)
 
 

package/README.md

@@ -1,15 +1,77 @@
-# ui
+# @baklavue/ui
 
-To install dependencies:
+Vue 3 UI kit for [Trendyol Baklava](https://github.com/Trendyol/baklava) design system. Vue-friendly wrappers with full `v-model` support, slots, and TypeScript.
+
+## Installation
 
 ```bash
-bun install
+# bun
+bun add @baklavue/ui
+
+# npm
+npm install @baklavue/ui
+
+# pnpm
+pnpm add @baklavue/ui
+
+# yarn
+yarn add @baklavue/ui
 ```
 
-To run:
+Requires Vue 3 and TypeScript 5.9+ (peer dependencies).
 
-```bash
-bun run index.ts
+## Setup
+
+Components load Baklava styles and scripts automatically when mounted. For explicit loading (e.g. before any component mounts), call `loadBaklavaResources()` in `main.ts`:
+
+```ts
+import { loadBaklavaResources } from "@baklavue/ui";
+
+loadBaklavaResources(); // optional
+```
+
+## Usage
+
+```vue
+<template>
+  <BvButton variant="primary" @click="handleClick">Click me</BvButton>
+  <BvInput v-model="email" label="Email" placeholder="Enter your email" />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { BvButton, BvInput } from "@baklavue/ui";
+
+const email = ref("");
+
+const handleClick = () => {
+  console.log("Email:", email.value);
+};
+</script>
 ```
 
-This project was created using `bun init` in bun v1.1.34. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.
+## Components
+
+All components use the `Bv-` prefix and support TypeScript, `v-model`, Vue events, reactive props, and slots.
+
+| Category   | Components                                                                 |
+| ---------- | -------------------------------------------------------------------------- |
+| **Form**   | BvButton, BvInput, BvCheckbox, BvRadio, BvSwitch, BvSelect, BvTextarea, BvDatepicker |
+| **Feedback** | BvAlert, BvBadge, BvTag, BvNotification, BvSpinner                         |
+| **Layout** | BvDialog, BvDrawer, BvDropdown, BvTooltip, BvAccordion, BvTab, BvStepper    |
+| **Navigation** | BvLink, BvPagination, BvSplitButton                                         |
+| **Data**   | BvTable, BvIcon                                                             |
+
+## Requirements
+
+- **Vue 3.0+** — Composition API
+- **TypeScript 5.9.2+** (peer dependency)
+
+## Documentation
+
+- [Full docs](https://erbilnas.github.io/baklavue/) — Guide and examples
+- [Components](https://erbilnas.github.io/baklavue/components/) — Component reference
+
+## License
+
+[MIT](LICENSE)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baklavue/ui",
-  "version": "1.0.0-preview.2",
+  "version": "1.0.0-preview.4",
   "description": "Vue 3 UI kit for Trendyol Baklava Design System",
   "author": "erbilnas",
   "license": "MIT",

package/src/file-upload/FileUpload.vue

@@ -0,0 +1,440 @@
+<script setup lang="ts">
+/**
+ * FileUpload Component
+ *
+ * A custom file upload component with drag-and-drop zone, click-to-browse,
+ * file list with remove, validation (size/type), and optional preview.
+ *
+ * @component
+ * @example
+ * ```vue
+ * <!-- Basic usage -->
+ * <template>
+ *   <BvFileUpload v-model="file" label="Upload document" />
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- Multiple with validation -->
+ * <template>
+ *   <BvFileUpload
+ *     v-model="files"
+ *     multiple
+ *     accept="image/*"
+ *     :max-size="1024 * 1024"
+ *     @invalid="handleInvalid"
+ *   />
+ * </template>
+ * ```
+ */
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import BvIcon from "../icon/Icon.vue";
+import BvTag from "../tag/Tag.vue";
+import { loadBaklavaResources } from "../utils/loadBaklavaResources";
+import type {
+  FileUploadInvalidEntry,
+  FileUploadProps,
+} from "./file-upload.types";
+
+const props = withDefaults(defineProps<FileUploadProps>(), {
+  modelValue: undefined,
+  multiple: false,
+  accept: undefined,
+  maxSize: undefined,
+  minSize: undefined,
+  maxFiles: undefined,
+  disabled: false,
+  label: undefined,
+  helpText: undefined,
+  invalidText: undefined,
+  showPreview: false,
+  size: "medium",
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: File | File[] | null];
+  invalid: [entries: FileUploadInvalidEntry[]];
+  change: [files: File[]];
+}>();
+
+const inputRef = ref<HTMLInputElement | null>(null);
+const isDragging = ref(false);
+const previewUrls = ref<Map<File, string>>(new Map());
+
+/** Normalize modelValue to File[] */
+const filesList = computed<File[]>(() => {
+  const v = props.modelValue;
+  if (!v) return [];
+  return Array.isArray(v) ? [...v] : [v];
+});
+
+/** Check if file passes accept filter */
+function matchesAccept(file: File): boolean {
+  if (!props.accept) return true;
+  const rules = props.accept.split(",").map((r) => r.trim());
+  const ext = file.name.split(".").pop()?.toLowerCase() ?? "";
+
+  for (const rule of rules) {
+    if (rule.startsWith(".")) {
+      if (ext === rule.slice(1).toLowerCase()) return true;
+    } else {
+      const mime = file.type;
+      if (rule.endsWith("/*")) {
+        const base = rule.slice(0, -1);
+        if (mime.startsWith(base)) return true;
+      } else if (mime === rule) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+/** Validate files and return invalid entries */
+function validateFiles(
+  incoming: File[],
+  existingCount: number,
+): FileUploadInvalidEntry[] {
+  const invalid: FileUploadInvalidEntry[] = [];
+  const maxFiles = props.maxFiles ?? Infinity;
+  let validAdded = 0;
+
+  for (const file of incoming) {
+    if (!matchesAccept(file)) {
+      invalid.push({ file, reason: "type" });
+      continue;
+    }
+    if (props.maxSize !== undefined && file.size > props.maxSize) {
+      invalid.push({ file, reason: "size" });
+      continue;
+    }
+    if (props.minSize !== undefined && file.size < props.minSize) {
+      invalid.push({ file, reason: "size" });
+      continue;
+    }
+    if (props.multiple && existingCount + validAdded >= maxFiles) {
+      invalid.push({ file, reason: "count" });
+      continue;
+    }
+    validAdded++;
+  }
+
+  return invalid;
+}
+
+/** Process and emit validated files */
+function processFiles(newFiles: File[]) {
+  const valid: File[] = [];
+  const invalid = validateFiles(newFiles, filesList.value.length);
+
+  for (const f of newFiles) {
+    const entry = invalid.find((e) => e.file === f);
+    if (!entry) valid.push(f);
+  }
+
+  if (invalid.length > 0) {
+    emit("invalid", invalid);
+  }
+
+  if (valid.length > 0) {
+    const combined = props.multiple
+      ? [...filesList.value, ...valid]
+      : [valid[0]];
+    const out = props.multiple ? combined : combined[0];
+    emit("update:modelValue", out);
+    emit("change", combined);
+  }
+}
+
+function handleInputChange(e: Event) {
+  const input = e.target as HTMLInputElement;
+  const files = input.files ? Array.from(input.files) : [];
+  processFiles(files);
+  input.value = "";
+}
+
+function handleDrop(e: DragEvent) {
+  e.preventDefault();
+  isDragging.value = false;
+  if (props.disabled) return;
+  const files = e.dataTransfer?.files ? Array.from(e.dataTransfer.files) : [];
+  processFiles(files);
+}
+
+function handleDragOver(e: DragEvent) {
+  e.preventDefault();
+  e.stopPropagation();
+  if (props.disabled) return;
+  isDragging.value = true;
+}
+
+function handleDragLeave() {
+  isDragging.value = false;
+}
+
+function openFilePicker() {
+  if (props.disabled) return;
+  inputRef.value?.click();
+}
+
+function removeFile(index: number) {
+  const list = [...filesList.value];
+  const removed = list[index];
+  list.splice(index, 1);
+  if (props.showPreview && removed && removed.type.startsWith("image/")) {
+    const url = previewUrls.value.get(removed);
+    if (url) URL.revokeObjectURL(url);
+    previewUrls.value.delete(removed);
+  }
+  const out = props.multiple ? list : (list[0] ?? null);
+  emit("update:modelValue", out);
+  emit("change", list);
+}
+
+function getPreviewUrl(file: File): string {
+  if (!file.type.startsWith("image/")) return "";
+  let url = previewUrls.value.get(file);
+  if (!url) {
+    url = URL.createObjectURL(file);
+    previewUrls.value.set(file, url);
+  }
+  return url;
+}
+
+watch(
+  filesList,
+  (files) => {
+    const toRevoke = new Set(previewUrls.value.keys());
+    for (const f of files) {
+      toRevoke.delete(f);
+    }
+    for (const f of toRevoke) {
+      const url = previewUrls.value.get(f);
+      if (url) URL.revokeObjectURL(url);
+      previewUrls.value.delete(f);
+    }
+  },
+  { deep: true },
+);
+
+onMounted(() => {
+  loadBaklavaResources();
+});
+
+onBeforeUnmount(() => {
+  for (const url of previewUrls.value.values()) {
+    URL.revokeObjectURL(url);
+  }
+  previewUrls.value.clear();
+});
+
+const zoneSizeClass = computed(() => `file-upload-zone--${props.size}`);
+const hasError = computed(() => !!props.invalidText);
+</script>
+
+<template>
+  <div class="file-upload">
+    <label v-if="label" class="file-upload-label">{{ label }}</label>
+
+    <div
+      class="file-upload-zone"
+      :class="[
+        zoneSizeClass,
+        {
+          'file-upload-zone--dragging': isDragging,
+          'file-upload-zone--disabled': disabled,
+          'file-upload-zone--invalid': hasError,
+        },
+      ]"
+      @click="openFilePicker"
+      @drop="handleDrop"
+      @dragover="handleDragOver"
+      @dragleave="handleDragLeave"
+    >
+      <input
+        ref="inputRef"
+        type="file"
+        class="file-upload-input"
+        :accept="accept"
+        :multiple="multiple"
+        :disabled="disabled"
+        @change="handleInputChange"
+      />
+      <div class="file-upload-content">
+        <BvIcon name="upload" size="24px" class="file-upload-icon" />
+        <span class="file-upload-text">
+          <slot name="hint"> </slot>
+        </span>
+      </div>
+    </div>
+
+    <p v-if="helpText && !hasError" class="file-upload-help">{{ helpText }}</p>
+    <p v-if="invalidText" class="file-upload-invalid">{{ invalidText }}</p>
+
+    <div v-if="filesList.length > 0" class="file-upload-list">
+      <div
+        v-for="(file, index) in filesList"
+        :key="`${file.name}-${file.size}-${index}`"
+        class="file-upload-item"
+      >
+        <div
+          v-if="showPreview && file.type.startsWith('image/')"
+          class="file-upload-preview"
+        >
+          <img
+            :src="getPreviewUrl(file)"
+            :alt="file.name"
+            class="file-upload-thumb"
+          />
+        </div>
+        <BvTag
+          closable
+          size="small"
+          class="file-upload-tag"
+          @close="removeFile(index)"
+        >
+          {{ file.name }} ({{ (file.size / 1024).toFixed(1) }} KB)
+        </BvTag>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.file-upload {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bl-spacing-2, 0.5rem);
+}
+
+.file-upload-label {
+  font: var(--bl-font-body-2-medium, 0.875rem 500);
+  color: var(--bl-color-neutral-darker, #374151);
+}
+
+.file-upload-zone {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px dashed var(--bl-color-neutral-light, #e5e7eb);
+  border-radius: var(--bl-radius-m, 8px);
+  background: var(--bl-color-neutral-background, #f9fafb);
+  cursor: pointer;
+  transition:
+    border-color 0.2s,
+    background 0.2s;
+}
+
+.file-upload-zone:hover:not(.file-upload-zone--disabled) {
+  border-color: var(--bl-color-primary, #ff6000);
+  background: var(--bl-color-primary-background, #fff5f0);
+}
+
+.file-upload-zone--dragging {
+  border-color: var(--bl-color-primary, #ff6000);
+  background: var(--bl-color-primary-background, #fff5f0);
+}
+
+.file-upload-zone--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.file-upload-zone--invalid {
+  border-color: var(--bl-color-danger, #dc2626);
+}
+
+.file-upload-zone--small {
+  min-height: 80px;
+  padding: var(--bl-spacing-3, 0.75rem);
+}
+
+.file-upload-zone--medium {
+  min-height: 120px;
+  padding: var(--bl-spacing-4, 1rem);
+}
+
+.file-upload-zone--large {
+  min-height: 160px;
+  padding: var(--bl-spacing-5, 1.25rem);
+}
+
+.file-upload-input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.file-upload-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--bl-spacing-2, 0.5rem);
+}
+
+.file-upload-icon {
+  color: var(--bl-color-neutral-subtle, #9ca3af);
+}
+
+.file-upload-text {
+  font: var(--bl-font-body-2-regular, 0.875rem 400);
+  color: var(--bl-color-neutral-subtle, #6b7280);
+}
+
+.file-upload-browse {
+  color: var(--bl-color-primary, #ff6000);
+  text-decoration: underline;
+}
+
+.file-upload-help,
+.file-upload-invalid {
+  font: var(--bl-font-body-3-regular, 0.75rem 400);
+  margin: 0;
+}
+
+.file-upload-help {
+  color: var(--bl-color-neutral-subtle, #6b7280);
+}
+
+.file-upload-invalid {
+  color: var(--bl-color-danger, #dc2626);
+}
+
+.file-upload-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bl-spacing-2, 0.5rem);
+}
+
+.file-upload-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--bl-spacing-1, 0.25rem);
+}
+
+.file-upload-preview {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--bl-radius-s, 4px);
+  overflow: hidden;
+  background: var(--bl-color-neutral-light, #e5e7eb);
+}
+
+.file-upload-thumb {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.file-upload-tag {
+  max-width: 240px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

package/src/file-upload/file-upload.types.ts

@@ -0,0 +1,89 @@
+/**
+ * File upload size.
+ */
+export type FileUploadSize = "small" | "medium" | "large";
+
+/**
+ * Validation failure reason.
+ */
+export type FileUploadInvalidReason = "type" | "size" | "count";
+
+/**
+ * Invalid file entry emitted on validation failure.
+ */
+export interface FileUploadInvalidEntry {
+  file: File;
+  reason: FileUploadInvalidReason;
+}
+
+/**
+ * Props for the FileUpload component.
+ *
+ * A custom file upload component with drag-and-drop, validation,
+ * file list with remove, and optional preview.
+ *
+ * @interface FileUploadProps
+ */
+export interface FileUploadProps {
+  /**
+   * Bound files (v-model). Single file or array when multiple.
+   */
+  modelValue?: File | File[] | null;
+
+  /**
+   * Allow multiple files.
+   */
+  multiple?: boolean;
+
+  /**
+   * Accepted MIME types or extensions (e.g. `image/*`, `.pdf`, `application/pdf`).
+   */
+  accept?: string;
+
+  /**
+   * Maximum file size in bytes.
+   */
+  maxSize?: number;
+
+  /**
+   * Minimum file size in bytes.
+   */
+  minSize?: number;
+
+  /**
+   * Maximum number of files when multiple is true.
+   */
+  maxFiles?: number;
+
+  /**
+   * Disabled state.
+   */
+  disabled?: boolean;
+
+  /**
+   * Label for the upload area.
+   */
+  label?: string;
+
+  /**
+   * Helper text below the upload area.
+   */
+  helpText?: string;
+
+  /**
+   * Error message when validation fails.
+   */
+  invalidText?: string;
+
+  /**
+   * Show image previews for image files.
+   */
+  showPreview?: boolean;
+
+  /**
+   * Drop zone size (small, medium, large).
+   *
+   * @default "medium"
+   */
+  size?: FileUploadSize;
+}

package/src/file-upload/index.ts

@@ -0,0 +1,7 @@
+export { default as BvFileUpload } from "./FileUpload.vue";
+export type {
+  FileUploadProps,
+  FileUploadSize,
+  FileUploadInvalidReason,
+  FileUploadInvalidEntry,
+} from "./file-upload.types";

package/src/image/Image.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+/**
+ * Image Component
+ *
+ * Performance-focused image wrapper with lazy loading,
+ * skeleton placeholder, and error handling.
+ *
+ * @component
+ * @example
+ * ```vue
+ * <template>
+ *   <BvImage src="/photo.jpg" alt="Photo" width="200px" height="120px" />
+ * </template>
+ * ```
+ */
+import { ref, computed, onMounted } from "vue";
+import { loadBaklavaResources } from "../utils/loadBaklavaResources";
+import BvSkeleton from "../skeleton/Skeleton.vue";
+import type { ImageProps } from "./image.types";
+
+const props = withDefaults(defineProps<ImageProps>(), {
+  loading: "lazy",
+  placeholder: "skeleton",
+  objectFit: "cover",
+});
+
+const emit = defineEmits<{
+  load: [event: Event];
+  error: [event: Event];
+}>();
+
+const isLoading = ref(true);
+const hasError = ref(false);
+
+const showPlaceholder = computed(
+  () => isLoading.value && props.placeholder === "skeleton" && !hasError.value,
+);
+
+const showImage = computed(() => !hasError.value);
+
+const wrapperStyle = computed(() => ({
+  width: props.width ?? "100%",
+  height: props.height ?? "auto",
+  aspectRatio: !props.height && props.width ? "16 / 9" : undefined,
+}));
+
+function onLoad(event: Event) {
+  isLoading.value = false;
+  emit("load", event);
+}
+
+function onError(event: Event) {
+  isLoading.value = false;
+  hasError.value = true;
+  emit("error", event);
+}
+
+onMounted(() => {
+  loadBaklavaResources();
+});
+</script>
+
+<template>
+  <div class="image-wrapper" :style="wrapperStyle">
+    <!-- Placeholder (skeleton or custom slot) -->
+    <div v-if="showPlaceholder" class="image-placeholder">
+      <slot name="placeholder">
+        <BvSkeleton
+          class="image-skeleton"
+          width="100%"
+          height="100%"
+          variant="rectangle"
+        />
+      </slot>
+    </div>
+
+    <!-- Loaded image -->
+    <img
+      v-show="showImage"
+      :src="src"
+      :alt="alt"
+      :loading="loading"
+      :srcset="srcset"
+      :sizes="sizes"
+      class="image-img"
+      :style="{ objectFit }"
+      @load="onLoad"
+      @error="onError"
+    />
+
+    <!-- Error fallback -->
+    <div v-if="hasError" class="image-fallback">
+      <slot name="fallback">
+        <div class="image-fallback-default" role="img" :aria-label="alt">
+          Failed to load image
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.image-wrapper {
+  position: relative;
+  overflow: hidden;
+  display: block;
+}
+
+.image-placeholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-skeleton {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.image-img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  vertical-align: middle;
+}
+
+.image-fallback {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-fallback-default {
+  background: var(--bl-color-neutral-light, #e5e7eb);
+  color: var(--bl-color-neutral-darker, #6b7280);
+  font-size: 0.875rem;
+  padding: 1rem;
+  text-align: center;
+}
+</style>

package/src/image/image.types.ts

@@ -0,0 +1,57 @@
+/** Native image loading behavior */
+export type ImageLoading = "lazy" | "eager";
+
+/** Placeholder type while image loads */
+export type ImagePlaceholder = "skeleton" | "none";
+
+export interface ImageProps {
+  /**
+   * Image URL (required).
+   */
+  src: string;
+
+  /**
+   * Accessible description (required).
+   */
+  alt: string;
+
+  /**
+   * CSS width (e.g. "200px", "100%").
+   * Recommended to prevent CLS.
+   */
+  width?: string;
+
+  /**
+   * CSS height (e.g. "120px", "auto").
+   * Recommended to prevent CLS.
+   */
+  height?: string;
+
+  /**
+   * Native loading behavior.
+   * @default "lazy"
+   */
+  loading?: ImageLoading;
+
+  /**
+   * Placeholder when lazy and not yet loaded.
+   * @default "skeleton"
+   */
+  placeholder?: ImagePlaceholder;
+
+  /**
+   * CSS object-fit.
+   * @default "cover"
+   */
+  objectFit?: string;
+
+  /**
+   * Responsive image sources (srcset attribute).
+   */
+  srcset?: string;
+
+  /**
+   * Sizes attribute for srcset.
+   */
+  sizes?: string;
+}

package/src/image/index.ts

@@ -0,0 +1,3 @@
+// Component exports must use the "Bv-" prefix
+export { default as BvImage } from "./Image.vue";
+export type { ImageProps, ImageLoading, ImagePlaceholder } from "./image.types";

package/src/index.ts

@@ -17,13 +17,17 @@ export * from "./datepicker";
 export * from "./dialog";
 export * from "./drawer";
 export * from "./dropdown";
+export * from "./file-upload";
 export * from "./icon";
+export * from "./image";
 export * from "./input";
 export * from "./link";
 export * from "./notification";
 export * from "./pagination";
 export * from "./radio";
+export * from "./scroll-to-top";
 export * from "./select";
+export * from "./skeleton";
 export * from "./spinner";
 export * from "./split-button";
 export * from "./stepper";

package/src/scroll-to-top/ScrollToTop.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+/**
+ * ScrollToTop Component
+ *
+ * A floating button that appears when the user scrolls past a threshold.
+ * Clicking it scrolls smoothly to the top of the page.
+ *
+ * @component
+ * @example
+ * ```vue
+ * <template>
+ *   <BvScrollToTop />
+ * </template>
+ * ```
+ */
+import { onMounted, onUnmounted, ref } from "vue";
+import BvButton from "../button/Button.vue";
+import { loadBaklavaResources } from "../utils/loadBaklavaResources";
+import type { ScrollToTopProps } from "./scroll-to-top.types";
+
+const props = withDefaults(defineProps<ScrollToTopProps>(), {
+  threshold: 300,
+  position: "bottom-right",
+  label: "Scroll to top",
+  size: "medium",
+  variant: "primary",
+});
+
+const emit = defineEmits<{
+  click: [];
+}>();
+
+const isVisible = ref(false);
+let rafId: number | null = null;
+
+const checkVisibility = () => {
+  isVisible.value = window.scrollY > props.threshold;
+};
+
+const handleScroll = () => {
+  if (rafId !== null) return;
+  rafId = requestAnimationFrame(() => {
+    checkVisibility();
+    rafId = null;
+  });
+};
+
+const scrollToTop = () => {
+  window.scrollTo({ top: 0, behavior: "smooth" });
+  emit("click");
+};
+
+const positionClasses: Record<
+  NonNullable<ScrollToTopProps["position"]>,
+  string
+> = {
+  "bottom-right": "scroll-to-top--bottom-right",
+  "bottom-left": "scroll-to-top--bottom-left",
+  "top-right": "scroll-to-top--top-right",
+  "top-left": "scroll-to-top--top-left",
+};
+
+onMounted(() => {
+  loadBaklavaResources();
+  checkVisibility();
+  window.addEventListener("scroll", handleScroll, { passive: true });
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", handleScroll);
+  if (rafId !== null) cancelAnimationFrame(rafId);
+});
+</script>
+
+<template>
+  <Transition name="scroll-to-top-fade">
+    <div
+      v-show="isVisible"
+      :class="['scroll-to-top', positionClasses[position]]"
+      role="complementary"
+      aria-label="Scroll to top"
+    >
+      <BvButton
+        :variant="variant"
+        :size="size"
+        :label="label"
+        icon="arrow_up"
+        @click="scrollToTop"
+      >
+        <template #default></template>
+      </BvButton>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.scroll-to-top {
+  position: fixed;
+  z-index: 1000;
+}
+
+.scroll-to-top--bottom-right {
+  bottom: 1.5rem;
+  right: 1.5rem;
+}
+
+.scroll-to-top--bottom-left {
+  bottom: 1.5rem;
+  left: 1.5rem;
+}
+
+.scroll-to-top--top-right {
+  top: 1.5rem;
+  right: 1.5rem;
+}
+
+.scroll-to-top--top-left {
+  top: 1.5rem;
+  left: 1.5rem;
+}
+
+.scroll-to-top-fade-enter-active,
+.scroll-to-top-fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.scroll-to-top-fade-enter-from,
+.scroll-to-top-fade-leave-to {
+  opacity: 0;
+}
+</style>

package/src/scroll-to-top/index.ts

@@ -0,0 +1,2 @@
+export { default as BvScrollToTop } from "./ScrollToTop.vue";
+export type { ScrollToTopProps, ScrollToTopPosition } from "./scroll-to-top.types";

package/src/scroll-to-top/scroll-to-top.types.ts

@@ -0,0 +1,42 @@
+import type { ButtonSize, ButtonVariant } from "@trendyol/baklava/dist/components/button/bl-button";
+
+/**
+ * Position of the scroll-to-top button.
+ */
+export type ScrollToTopPosition =
+  | "bottom-right"
+  | "bottom-left"
+  | "top-right"
+  | "top-left";
+
+export interface ScrollToTopProps {
+  /**
+   * Scroll threshold in pixels. Button becomes visible when user scrolls past this.
+   * @default 300
+   */
+  threshold?: number;
+
+  /**
+   * Fixed position of the button.
+   * @default "bottom-right"
+   */
+  position?: ScrollToTopPosition;
+
+  /**
+   * Accessible label for screen readers.
+   * @default "Scroll to top"
+   */
+  label?: string;
+
+  /**
+   * Button size.
+   * @default "medium"
+   */
+  size?: ButtonSize;
+
+  /**
+   * Button variant.
+   * @default "primary"
+   */
+  variant?: ButtonVariant;
+}

package/src/skeleton/Skeleton.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+/**
+ * Skeleton Component
+ *
+ * Animated placeholder for content loading states.
+ * Displays a shimmer effect with configurable variants.
+ *
+ * @component
+ * @example
+ * ```vue
+ * <template>
+ *   <BvSkeleton />
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <BvSkeleton variant="text" :count="3" />
+ * </template>
+ * ```
+ */
+import { computed, onMounted } from "vue";
+import { loadBaklavaResources } from "../utils/loadBaklavaResources";
+import type { SkeletonProps } from "./skeleton.types";
+
+const props = withDefaults(defineProps<SkeletonProps>(), {
+  variant: "rectangle",
+  width: undefined,
+  height: undefined,
+  count: 1,
+});
+
+const effectiveWidth = computed(() => {
+  if (props.width) return props.width;
+  if (props.variant === "circle") return "40px";
+  return "100%";
+});
+
+const effectiveHeight = computed(() => {
+  if (props.height) return props.height;
+  if (props.variant === "circle") return "40px";
+  return "1rem";
+});
+
+
+onMounted(() => {
+  loadBaklavaResources();
+});
+</script>
+
+<template>
+  <div
+    class="skeleton-wrapper"
+    :class="`skeleton-wrapper--${props.variant}`"
+    role="status"
+    aria-label="Loading"
+  >
+    <div
+      v-for="n in count"
+      :key="n"
+      class="skeleton"
+      :class="['skeleton--' + props.variant]"
+      :style="{
+        width: effectiveWidth,
+        height: effectiveHeight,
+      }"
+    />
+  </div>
+</template>
+
+<style scoped>
+.skeleton-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.skeleton {
+  background: var(--bl-color-neutral-light, #e5e7eb);
+  border-radius: var(--bl-border-radius-s, 0.25rem);
+  position: relative;
+  overflow: hidden;
+}
+
+.skeleton::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.4) 50%,
+    transparent 100%
+  );
+  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+}
+
+.skeleton--circle {
+  border-radius: var(--bl-border-radius-circle, 50%);
+}
+
+.skeleton--text {
+  height: 1rem;
+}
+
+@keyframes skeleton-shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+</style>

package/src/skeleton/index.ts

@@ -0,0 +1,2 @@
+export { default as BvSkeleton } from "./Skeleton.vue";
+export type { SkeletonProps, SkeletonVariant } from "./skeleton.types";

package/src/skeleton/skeleton.types.ts

@@ -0,0 +1,33 @@
+/**
+ * Skeleton shape variant.
+ */
+export type SkeletonVariant = "text" | "rectangle" | "circle";
+
+export interface SkeletonProps {
+  /**
+   * Shape variant of the skeleton.
+   * - text: Line shape for text placeholders
+   * - rectangle: Default block shape
+   * - circle: Circular shape for avatars
+   * @default "rectangle"
+   */
+  variant?: SkeletonVariant;
+
+  /**
+   * Width as CSS value (e.g. "100%", "200px", "5rem").
+   * @default "100%" for text/rectangle, "40px" for circle
+   */
+  width?: string;
+
+  /**
+   * Height as CSS value (e.g. "1rem", "20px").
+   * @default "1rem" for text, "1rem" for rectangle, "40px" for circle
+   */
+  height?: string;
+
+  /**
+   * Number of skeleton elements to render (for text lines).
+   * @default 1
+   */
+  count?: number;
+}