@baklavue/ui 1.0.0-preview.2

package/src/radio/radio.types.ts

@@ -0,0 +1,95 @@
+/**
+ * Properties for a single radio item when used in group mode.
+ *
+ * @interface RadioItem
+ */
+export interface RadioItem {
+  /**
+   * The value of the radio (used for v-model in group mode).
+   */
+  value: string | number;
+
+  /**
+   * The label text displayed next to the radio.
+   */
+  label?: string;
+
+  /**
+   * Whether the radio is disabled.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * The name attribute for the radio group.
+   */
+  name?: string;
+
+  /**
+   * Additional custom data for use in the #item scoped slot.
+   */
+  [key: string]: unknown;
+}
+
+/**
+ * Props for the Radio component.
+ *
+ * When `items` prop is provided, the component acts as a radio group container.
+ * Otherwise, it acts as a single radio option.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
+ */
+export interface RadioProps {
+  /**
+   * Selected value (single mode or group mode).
+   * Use v-model for two-way binding.
+   * - Single mode: used with value prop for comparison
+   * - Group mode: the selected item's value
+   */
+  modelValue?: string | number;
+
+  /**
+   * This radio option's value. Used for v-model comparison and form submission.
+   * Only used when component is in single radio mode.
+   */
+  value?: string | number;
+
+  /**
+   * Name attribute for the radio group. All radios in the same group must share the same name.
+   * Only used when component is in single radio mode.
+   */
+  name?: string;
+
+  /**
+   * Label text displayed next to the radio. Can be overridden by the default slot.
+   * Only used when component is in single radio mode.
+   */
+  label?: string;
+
+  /**
+   * Boolean to explicitly control checked state.
+   * When provided, overrides modelValue === value logic.
+   * Only used when component is in single radio mode.
+   */
+  checked?: boolean;
+
+  /**
+   * Whether the radio is disabled.
+   * Only used when component is in single radio mode.
+   */
+  disabled?: boolean;
+
+  /**
+   * Whether the radio group is required (for form validation).
+   * Used in group mode on bl-radio-group.
+   */
+  required?: boolean;
+
+  /**
+   * Array of radio items to render when in group mode.
+   * Each item will be rendered as a bl-radio element inside bl-radio-group.
+   * Only used when component is in group mode.
+   */
+  items?: RadioItem[];
+}

package/src/select/Select.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+/**
+ * Select Component
+ *
+ * A Vue UI kit component for Baklava's `bl-select` web component with v-model support.
+ * Supports both slot-based options and the `options` prop for programmatic rendering.
+ *
+ * @component
+ * @example
+ * ```vue
+ * <!-- Basic single select with slot -->
+ * <template>
+ *   <BvSelect v-model="selected" label="Choose an option">
+ *     <bl-select-option value="a">Option A</bl-select-option>
+ *     <bl-select-option value="b">Option B</bl-select-option>
+ *   </BvSelect>
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- Options array -->
+ * <template>
+ *   <BvSelect v-model="country" label="Country" :options="countries" />
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <!-- Multiple select -->
+ * <template>
+ *   <BvSelect v-model="selected" label="Select multiple" :multiple="true" :options="items" />
+ * </template>
+ * ```
+ */
+import { computed, onMounted } from "vue";
+import { loadBaklavaResources } from "../utils/loadBaklavaResources";
+import type { SelectProps } from "./select.types";
+
+/**
+ * Component props with default values.
+ */
+const props = withDefaults(defineProps<SelectProps>(), {
+  modelValue: undefined,
+  options: undefined,
+  label: undefined,
+  placeholder: undefined,
+  name: undefined,
+  required: undefined,
+  disabled: undefined,
+  multiple: undefined,
+  size: undefined,
+  clearable: undefined,
+  helpText: undefined,
+  customInvalidText: undefined,
+  searchBar: undefined,
+  searchBarPlaceholder: undefined,
+});
+
+/**
+ * Component events.
+ */
+const emit = defineEmits<{
+  /**
+   * Emitted when the selection changes. Use with v-model.
+   *
+   * @param {string | string[] | null} value - The selected value(s). Array when multiple.
+   */
+  "update:modelValue": [value: string | string[] | null];
+  /**
+   * Emitted when selection changes (bl-change event).
+   *
+   * @param {CustomEvent} event - The native bl-change event from bl-select.
+   */
+  change: [event: CustomEvent];
+  /**
+   * Emitted on input (bl-input event).
+   *
+   * @param {CustomEvent} event - The native bl-input event from bl-select.
+   */
+  input: [event: CustomEvent];
+}>();
+
+/**
+ * Handles the bl-change event from the underlying bl-select component.
+ * Syncs v-model and forwards the change event.
+ * The bl-select element (event.target) exposes a .value property for the selected value.
+ *
+ * @param {CustomEvent} event - The bl-change event from bl-select.
+ */
+const handleChange = (event: CustomEvent) => {
+  emit("change", event);
+  const target = event.target as HTMLSelectElement & {
+    value?: string | string[] | null;
+  };
+  emit("update:modelValue", target?.value ?? null);
+};
+
+/**
+ * Lifecycle hook: Component mounted.
+ *
+ * Loads Baklava resources when the component is mounted.
+ */
+/**
+ * Props to pass to bl-select. Excludes modelValue (we use :value) and options
+ * (we render bl-select-option children from options in the template).
+ */
+const selectProps = computed(() => {
+  const { modelValue: _, options: __, ...rest } = props;
+  return {
+    ...rest,
+    disabled: rest.disabled === true ? true : undefined,
+    multiple: rest.multiple === true ? true : undefined,
+    "help-text": rest.helpText ?? undefined,
+    "invalid-text": rest.customInvalidText ?? undefined,
+    "search-bar": rest.searchBar === true ? true : undefined,
+    "search-bar-placeholder": rest.searchBarPlaceholder ?? undefined,
+  };
+});
+
+onMounted(() => {
+  loadBaklavaResources();
+});
+</script>
+
+<template>
+  <bl-select
+    v-bind="selectProps"
+    :value="props.modelValue"
+    @bl-change="handleChange"
+    @bl-input="emit('input', $event)"
+  >
+    <!-- Render options from options prop when provided -->
+    <template v-if="options">
+      <bl-select-option
+        v-for="option in options"
+        :key="option.value"
+        :value="option.value"
+        :disabled="option.disabled"
+      >
+        {{ option.label }}
+      </bl-select-option>
+    </template>
+    <!-- Default slot for custom bl-select-option children -->
+    <slot />
+  </bl-select>
+</template>

package/src/select/index.ts

@@ -0,0 +1,2 @@
+export { default as BvSelect } from "./Select.vue";
+export type { SelectProps, SelectOption, SelectSize } from "./select.types";

package/src/select/select.types.ts

@@ -0,0 +1,53 @@
+/**
+ * Size variants for the Select component.
+ * @see {@link https://baklavastyle.trendyol.com/components/select | Baklava Select}
+ */
+export type SelectSize = "small" | "medium" | "large";
+
+/**
+ * Option shape for the Select component's `options` prop.
+ * Each option can have a value, display label, and optional disabled state.
+ */
+export interface SelectOption {
+  /** The value submitted with the form or bound via v-model */
+  value: string;
+  /** The label displayed to the user */
+  label: string;
+  /** Whether the option is disabled */
+  disabled?: boolean;
+}
+
+/**
+ * Props for the Select Vue UI kit component.
+ * Wraps Baklava's `bl-select` web component with v-model support.
+ */
+export interface SelectProps {
+  /** Selected value(s) - use with v-model. Single value or array when multiple. */
+  modelValue?: string | string[] | null;
+  /** Array of options for programmatic option rendering. Alternative to default slot. */
+  options?: SelectOption[];
+  /** Label displayed above or as placeholder for the select */
+  label?: string;
+  /** Placeholder text when no value is selected */
+  placeholder?: string;
+  /** Select name attribute for form submission */
+  name?: string;
+  /** Whether the select is required (shows error state when empty) */
+  required?: boolean;
+  /** Whether the select is disabled */
+  disabled?: boolean;
+  /** Whether multiple options can be selected */
+  multiple?: boolean;
+  /** Size of the select: small, medium, or large */
+  size?: SelectSize;
+  /** Whether the selected value can be cleared */
+  clearable?: boolean;
+  /** Help text displayed below the select */
+  helpText?: string;
+  /** Custom error message for validation */
+  customInvalidText?: string;
+  /** Enable search/filter for options in the dropdown */
+  searchBar?: boolean;
+  /** Placeholder text for the search input */
+  searchBarPlaceholder?: string;
+}

package/src/spinner/Spinner.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+/**
+ * Spinner Component
+ *
+ * A Vue UI kit component for Baklava's `bl-spinner` web component for loading indicators.
+ * Displays an animated spinner with configurable size and variant.
+ *
+ * @component
+ * @example
+ * ```vue
+ * <template>
+ *   <BvSpinner />
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <BvSpinner size="large" label="Loading..." />
+ * </template>
+ * ```
+ */
+import { computed, onMounted } from "vue";
+import { loadBaklavaResources } from "../utils/loadBaklavaResources";
+import type { SpinnerProps } from "./spinner.types";
+
+/**
+ * Component props with default values.
+ */
+const props = withDefaults(defineProps<SpinnerProps>(), {
+  size: undefined,
+  variant: undefined,
+  label: undefined,
+});
+
+/** Props to pass to bl-spinner (excludes label, which is used for aria-label) */
+const spinnerProps = computed(() => {
+  const { label: _, ...rest } = props;
+  return rest;
+});
+
+onMounted(() => {
+  loadBaklavaResources();
+});
+</script>
+
+<template>
+  <bl-spinner v-bind="spinnerProps" :aria-label="label" />
+</template>

package/src/spinner/index.ts

@@ -0,0 +1,2 @@
+export { default as BvSpinner } from "./Spinner.vue";
+export type { SpinnerProps } from "./spinner.types";

package/src/spinner/spinner.types.ts

@@ -0,0 +1,11 @@
+/**
+ * Props for the Spinner component.
+ */
+export interface SpinnerProps {
+  /** Spinner size (e.g. CSS variable or length like var(--bl-font-size-m)) */
+  size?: string;
+  /** Spinner variant/style */
+  variant?: string;
+  /** Accessible label for screen readers */
+  label?: string;
+}

package/src/split-button/SplitButton.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+/**
+ * SplitButton Component
+ *
+ * A Vue UI kit component for Baklava's `bl-split-button` web component.
+ * A button with a primary action and a dropdown for secondary actions.
+ * Dropdown content is provided via the `dropdown-content` slot.
+ *
+ * @component
+ * @example
+ * ```vue
+ * <template>
+ *   <BvSplitButton label="Actions" @click="handleClick">
+ *     <template #dropdown-content>
+ *       <bl-dropdown-item>Action 1</bl-dropdown-item>
+ *       <bl-dropdown-item>Action 2</bl-dropdown-item>
+ *     </template>
+ *   </BvSplitButton>
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <BvSplitButton label="Save" icon="check" variant="primary" @click="save" />
+ * </template>
+ * ```
+ */
+import { onMounted } from "vue";
+import { loadBaklavaResources } from "../utils/loadBaklavaResources";
+import type { SplitButtonProps } from "./split-button.types";
+
+const props = defineProps<SplitButtonProps>();
+
+/**
+ * Component events.
+ */
+const emit = defineEmits<{
+  /**
+   * Emitted when the main button is clicked.
+   *
+   * @param {CustomEvent} event - The native click event from bl-split-button.
+   */
+  click: [event: CustomEvent];
+  /**
+   * Emitted when the dropdown button is clicked.
+   *
+   * @param {CustomEvent} event - The native dropdown-click event from bl-split-button.
+   */
+  "dropdown-click": [event: CustomEvent];
+}>();
+
+onMounted(() => {
+  loadBaklavaResources();
+});
+</script>
+
+<template>
+  <bl-split-button
+    v-bind="{
+      variant: props.variant,
+      size: props.size,
+      disabled: props.disabled === true ? true : undefined,
+      loading: props.loading === true ? true : undefined,
+      label: props.label,
+      icon: props.icon,
+    }"
+    @bl-click="emit('click', $event)"
+    @bl-dropdown-click="emit('dropdown-click', $event)"
+  >
+    <slot v-if="$slots['dropdown-content']" name="dropdown-content" />
+  </bl-split-button>
+</template>

package/src/split-button/index.ts

@@ -0,0 +1,2 @@
+export { default as BvSplitButton } from "./SplitButton.vue";
+export type { SplitButtonProps } from "./split-button.types";

package/src/split-button/split-button.types.ts

@@ -0,0 +1,19 @@
+import type { BaklavaIcon } from "@trendyol/baklava-icons";
+
+/**
+ * Props for the SplitButton component.
+ */
+export interface SplitButtonProps {
+  /** Button variant (primary, secondary) */
+  variant?: string;
+  /** Button size (small, medium, large) */
+  size?: string;
+  /** Whether the main button is disabled */
+  disabled?: boolean;
+  /** Loading state of the main button */
+  loading?: boolean;
+  /** Button label */
+  label?: string;
+  /** Icon name for the main button */
+  icon?: BaklavaIcon;
+}

package/src/stepper/Stepper.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+/**
+ * Stepper Component
+ *
+ * A Vue UI kit component for Baklava's `bl-stepper` web component for step indicators.
+ * Displays progress through a sequence of steps. Use the `steps` prop for declarative
+ * configuration or the default slot for custom step content.
+ *
+ * @component
+ * @example
+ * ```vue
+ * <template>
+ *   <BvStepper v-model:current-step="currentStep" :steps="steps" />
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <BvStepper :steps="['Step 1', 'Step 2', 'Step 3']" />
+ * </template>
+ * ```
+ */
+import { onMounted } from "vue";
+import { loadBaklavaResources } from "../utils/loadBaklavaResources";
+import type { StepperProps, StepperStep } from "./stepper.types";
+
+/**
+ * Component props with default values.
+ */
+const props = withDefaults(defineProps<StepperProps>(), {
+  currentStep: undefined,
+  steps: undefined,
+  orientation: undefined,
+  showLabels: undefined,
+});
+
+/**
+ * Component events.
+ */
+const emit = defineEmits<{
+  /**
+   * Emitted when the current step changes (for v-model:currentStep).
+   *
+   * @param {number} step - The new current step index.
+   */
+  "update:currentStep": [step: number];
+  /**
+   * Emitted when the user selects a different step.
+   *
+   * @param {CustomEvent} event - The native bl-stepper-change event from bl-stepper.
+   */
+  "step-change": [event: CustomEvent];
+}>();
+
+/**
+ * Returns the variant for a step based on its index and the current step.
+ */
+const getStepVariant = (index: number): "default" | "active" | "success" | "error" => {
+  const current = props.currentStep ?? 0;
+  const step = props.steps?.[index];
+  if (step?.error) return "error";
+  if (index < current) return "success";
+  if (index === current) return "active";
+  return "default";
+};
+
+/**
+ * Handles the bl-stepper-change event from the underlying web component.
+ */
+const handleStepChange = (event: CustomEvent<{ activeStep: number; totalSteps: number }>) => {
+  emit("step-change", event);
+  const step = event.detail?.activeStep;
+  if (step !== undefined) emit("update:currentStep", step);
+};
+
+onMounted(() => {
+  loadBaklavaResources();
+});
+</script>
+
+<template>
+  <bl-stepper
+    :direction="orientation ?? 'horizontal'"
+    @bl-stepper-change="handleStepChange"
+  >
+    <template v-if="steps">
+      <bl-stepper-item
+        v-for="(step, index) in steps"
+        :key="index"
+        :id="`step-${index}`"
+        :title="showLabels !== false ? step.label : ''"
+        :description="showLabels !== false && step.description ? step.description : ''"
+        :variant="getStepVariant(index)"
+        :disabled="step.disabled"
+      />
+    </template>
+    <slot />
+  </bl-stepper>
+</template>

package/src/stepper/index.ts

@@ -0,0 +1,2 @@
+export { default as BvStepper } from "./Stepper.vue";
+export type { StepperProps, StepperStep } from "./stepper.types";

package/src/stepper/stepper.types.ts

@@ -0,0 +1,29 @@
+/**
+ * Configuration for a single step in the stepper.
+ */
+export interface StepperStep {
+  /** Step label */
+  label: string;
+  /** Optional step description */
+  description?: string;
+  /** Whether the step is completed */
+  completed?: boolean;
+  /** Whether the step has an error state */
+  error?: boolean;
+  /** Whether the step is disabled */
+  disabled?: boolean;
+}
+
+/**
+ * Props for the Stepper component.
+ */
+export interface StepperProps {
+  /** Current step index (0-based). Use with v-model:currentStep */
+  currentStep?: number;
+  /** Array of step configurations */
+  steps?: StepperStep[];
+  /** Layout direction (horizontal, vertical) */
+  orientation?: string;
+  /** Whether to show step labels */
+  showLabels?: boolean;
+}

package/src/switch/Switch.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+/**
+ * Switch Component
+ *
+ * A Vue UI kit component for Baklava's `bl-switch` web component with v-model support.
+ * A toggle switch for boolean states. Supports v-model:checked for two-way binding.
+ *
+ * @component
+ * @example
+ * ```vue
+ * <template>
+ *   <BvSwitch v-model:checked="enabled" label="Enable notifications" />
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <BvSwitch :checked="isOn" @change="handleChange" />
+ * </template>
+ * ```
+ */
+import { onMounted } from "vue";
+import { loadBaklavaResources } from "../utils/loadBaklavaResources";
+import type { SwitchProps } from "./switch.types";
+
+/**
+ * Component props with default values.
+ */
+const props = withDefaults(defineProps<SwitchProps>(), {
+  checked: undefined,
+  disabled: undefined,
+  label: undefined,
+  size: undefined,
+});
+
+/**
+ * Component events.
+ */
+const emit = defineEmits<{
+  /**
+   * Emitted when the checked state changes (for v-model:checked).
+   *
+   * @param {boolean} checked - The new checked state.
+   */
+  "update:checked": [checked: boolean];
+  /**
+   * Emitted when the user toggles the switch.
+   *
+   * @param {CustomEvent} event - The native change event from bl-switch.
+   */
+  change: [event: CustomEvent];
+  /**
+   * Emitted on user input (mirrors native input event).
+   *
+   * @param {CustomEvent} event - The native input event from bl-switch.
+   */
+  input: [event: CustomEvent];
+}>();
+
+onMounted(() => {
+  loadBaklavaResources();
+});
+</script>
+
+<template>
+  <bl-switch
+    v-bind="{
+      ...props,
+      checked: props.checked === true ? true : props.checked === false ? false : undefined,
+      disabled: props.disabled === true ? true : undefined,
+    }"
+    @bl-switch-toggle="
+      emit('change', $event);
+      emit('update:checked', $event.detail);
+    "
+  >
+    <slot>{{ label }}</slot>
+  </bl-switch>
+</template>

package/src/switch/index.ts

@@ -0,0 +1,2 @@
+export { default as BvSwitch } from "./Switch.vue";
+export type { SwitchProps } from "./switch.types";

package/src/switch/switch.types.ts

@@ -0,0 +1,13 @@
+/**
+ * Props for the Switch component.
+ */
+export interface SwitchProps {
+  /** Checked state. Use with v-model:checked */
+  checked?: boolean;
+  /** Whether the switch is disabled */
+  disabled?: boolean;
+  /** Label for the switch */
+  label?: string;
+  /** Switch size (small, medium, large) */
+  size?: string;
+}