@trendyol/baklava/dist/baklava-react.d.ts

Trendyol Baklava Design System

import type BlAlertType from "./components/alert/bl-alert";
import type BlBadgeType from "./components/badge/bl-badge";
import type BlButtonType from "./components/button/bl-button";
import type BlCheckboxGroupType from "./components/checkbox-group/bl-checkbox-group";
import type BlCheckboxType from "./components/checkbox-group/checkbox/bl-checkbox";
import type BlDialogType from "./components/dialog/bl-dialog";
import type BlDrawerType from "./components/drawer/bl-drawer";
import type BlDropdownType from "./components/dropdown/bl-dropdown";
import type BlDropdownGroupType from "./components/dropdown/group/bl-dropdown-group";
import type BlDropdownItemType from "./components/dropdown/item/bl-dropdown-item";
import type BlIconType from "./components/icon/bl-icon";
import type BlInputType from "./components/input/bl-input";
import type BlPaginationType from "./components/pagination/bl-pagination";
import type BlPopoverType from "./components/popover/bl-popover";
import type BlProgressIndicatorType from "./components/progress-indicator/bl-progress-indicator";
import type BlRadioGroupType from "./components/radio-group/bl-radio-group";
import type BlRadioType from "./components/radio-group/radio/bl-radio";
import { ISelectOption } from "./components/select/bl-select";
import type BlSelectType from "./components/select/bl-select";
import type BlSelectOptionType from "./components/select/option/bl-select-option";
import type BlSwitchType from "./components/switch/bl-switch";
import type BlTabGroupType from "./components/tab-group/bl-tab-group";
import type BlTabPanelType from "./components/tab-group/tab-panel/bl-tab-panel";
import type BlTabType from "./components/tab-group/tab/bl-tab";
import type BlTextareaType from "./components/textarea/bl-textarea";
import type BlTooltipType from "./components/tooltip/bl-tooltip";
import { type EventName } from "@lit-labs/react";
import React from "react";
export declare type BlAlertClose = CustomEvent<boolean>;
export declare type BlButtonClick = CustomEvent<string>;
export declare type BlCheckboxGroupCheckboxGroupChange = CustomEvent<string[]>;
export declare type BlDialogDialogOpen = CustomEvent<object>;
export declare type BlDialogDialogRequestClose = CustomEvent<{
    source: "close-button" | "keyboard" | "backdrop";
}>;
export declare type BlDialogDialogClose = CustomEvent<object>;
export declare type BlDrawerDrawerOpen = CustomEvent<string>;
export declare type BlDrawerDrawerClose = CustomEvent<string>;
export declare type BlDropdownDropdownOpen = CustomEvent<string>;
export declare type BlDropdownDropdownClose = CustomEvent<string>;
export declare type BlIconLoad = CustomEvent<string>;
export declare type BlIconError = CustomEvent<string>;
export declare type BlInputChange = CustomEvent<string>;
export declare type BlInputInput = CustomEvent<string>;
export declare type BlInputInvalid = CustomEvent<ValidityState>;
export declare type BlPaginationChange = CustomEvent<{
    selectedPage: number;
    prevPage: number;
    itemsPerPage: number;
}>;
export declare type BlPopoverPopoverShow = CustomEvent<string>;
export declare type BlPopoverPopoverHide = CustomEvent<string>;
export declare type BlRadioGroupRadioChange = CustomEvent<string>;
export declare type BlSelectSelect = CustomEvent<ISelectOption[]>;
export declare type BlSwitchSwitchToggle = CustomEvent<boolean>;
export declare type BlTextareaInput = CustomEvent<string>;
export declare type BlTextareaChange = CustomEvent<string>;
export declare type BlTextareaInvalid = CustomEvent<ValidityState>;
export declare type BlTooltipTooltipShow = CustomEvent<string>;
export declare type BlTooltipTooltipHide = CustomEvent<string>;
export declare type BlCheckboxCheckboxChange = CustomEvent<boolean>;
export declare type BlCheckboxFocus = CustomEvent<string>;
export declare type BlCheckboxBlur = CustomEvent<string>;
export declare type BlDropdownItemDropdownItemClick = CustomEvent<string>;
export declare type BlRadioChecked = CustomEvent<string>;
export declare type BlRadioFocus = CustomEvent<string>;
export declare type BlRadioBlur = CustomEvent<string>;
export declare type BlSelectOptionSelectOption = CustomEvent<string | null>;
export declare type BlSelectOptionFocus = CustomEvent<string | null>;
export declare type BlSelectOptionBlur = CustomEvent<string | null>;
export declare type BlTabTabSelected = CustomEvent<string>;
export declare type BlAlert = BlAlertType;
export declare type BlBadge = BlBadgeType;
export declare type BlButton = BlButtonType;
export declare type BlCheckboxGroup = BlCheckboxGroupType;
export declare type BlDialog = BlDialogType;
export declare type BlDrawer = BlDrawerType;
export declare type BlDropdown = BlDropdownType;
export declare type BlIcon = BlIconType;
export declare type BlInput = BlInputType;
export declare type BlPagination = BlPaginationType;
export declare type BlPopover = BlPopoverType;
export declare type BlProgressIndicator = BlProgressIndicatorType;
export declare type BlRadioGroup = BlRadioGroupType;
export declare type BlSelect = BlSelectType;
export declare type BlSwitch = BlSwitchType;
export declare type BlTabGroup = BlTabGroupType;
export declare type BlTextarea = BlTextareaType;
export declare type BlTooltip = BlTooltipType;
export declare type BlCheckbox = BlCheckboxType;
export declare type BlDropdownGroup = BlDropdownGroupType;
export declare type BlDropdownItem = BlDropdownItemType;
export declare type BlRadio = BlRadioType;
export declare type BlSelectOption = BlSelectOptionType;
export declare type BlTab = BlTabType;
export declare type BlTabPanel = BlTabPanelType;
/**
 * @tag bl-alert
 * @summary Baklava Alert component
 */
export declare const BlAlert: React.LazyExoticComponent<import("@lit-labs/react").ReactWebComponent<BlAlertType, {
    onBlClose: EventName<BlAlertClose>;
}>>;
/**
 * @tag bl-badge
 * @summary Baklava Badge component
 *
 * @cssproperty [--bl-badge-bg-color=--bl-color-primary-contrast] Sets the background color of badge
 * @cssproperty [--bl-badge-color=--bl-color-primary] Sets the color of badge
 */
export declare const BlBadge: React.LazyExoticComponent<import("@lit-labs/react").ReactWebComponent<BlBadgeType, {}>>;
/**
 * @tag bl-button
 * @summary Baklava Button component
 *
 * @cssproperty [--bl-button-display=inline-block] Sets the display property of button
 * @cssproperty [--bl-button-justify=center] Sets the justify-content property of button
 *
 */
export declare const BlButton: React.LazyExoticComponent<import("@lit-labs/react").ReactWebComponent<BlButtonType, {
    onBlClick: EventName<BlButtonClick>;
}>>;
/**
 * @tag bl-checkbox-group
 * @summary Baklava Button component
 *
 * @cssproperty [--bl-checkbox-direction=row] Can be used for showing checkbox options as columns instead of rows. Options are `row` or `column`
 */
export declare const BlCheckboxGroup: React.LazyExoticComponent<import("@lit-labs/react").ReactWebComponent<BlCheckboxGroupType, {
    onBlCheckboxGroupChange: EventName<BlCheckboxGroupCheckboxGroupChange>;
}>>;
/**
 * @tag bl-dialog
 * @summary Baklava Dialog component
 */
export declare const BlDialog: React.LazyExoticComponent<import("@lit-labs/react").ReactWebComponent<BlDialogType, {
    onBlDialogOpen: EventName<BlDialogDialogOpen>;
    onBlDialogRequestClose: EventName<BlDialogDialogRequestClose>;
    onBlDialogClose: EventName<BlDialogDialogClose>;
}>>;
/**
 * @tag bl-drawer
 * @summary Baklava Drawer component
 *
 * @cssproperty [--bl-drawer-animation-duration=250ms] Drawer slide in animation duration
 */
export declare const BlDrawer: React.LazyExoticComponent<import("@lit-labs/react").ReactWebComponent<BlDrawerType, {
    onBlDrawerOpen: EventName<BlDrawerDrawerOpen>;
    onBlDrawerClose: EventName<BlDrawerDrawerClose>;
}>>;
/**
 * @tag bl-dropdown
 * @summary Baklava Dropdown component
 */
export declare const BlDropdown: React.LazyExoticComponent<import("@lit-labs/react").ReactWebComponent<BlDropdownType, {
    onBlDropdownOpen: EventName<BlDropdownDropdownOpen>;
    onBlDropdownClose: EventName<BlDropdownDropdownClose>;
}>>;
/**
 * @tag bl-icon
 * @summary Baklava Icon component
 *
 * @cssproperty [font-size] Setting size of icon. Default is current font size in DOM place
 * @cssproperty [color=currentColor] Setting color of icon
 */
export declare const BlIcon: React.LazyExoticComponent<import("@lit-labs/react").ReactWebComponent<BlIconType, {
    onBlLoad: EventName<BlIconLoad>;
    onBlError: EventName<BlIconError>;
}>>;
/**
 * @tag bl-input
 * @summary Baklava Input component
 *
 * @cssproperty [--bl-input-padding-start] Sets the padding start
 * @cssproperty [--bl-input-padding-end] Sets the padding end
 */
export declare const BlInput: React.LazyExoticComponent<import("@lit-labs/react").ReactWebComponent<BlInputType, {
    onBlChange: EventName<BlInputChange>;
    onBlInput: EventName<BlInputInput>;
    onBlInvalid: EventName<BlInputInvalid>;
}>>;
/**
 * @tag bl-pagination
 * @summary Baklava Pagination component
 */
export declare const BlPagination: React.LazyExoticComponent<import("@lit-labs/react").ReactWebComponent<BlPaginationType, {
    onBlChange: EventName<BlPaginationChange>;
}>>;
/**
 * @tag bl-popover
 * @summary Baklava Popover component
 *
 * @cssproperty [--bl-popover-arrow-display=none] - Sets the display of popovers arrow. Set as `block` to make arrow visible.
 * @cssproperty [--bl-popover-background-color=--bl-color-neutral-full] - Sets the background color of popover.
 * @cssproperty [--bl-popover-border-color=--bl-color-primary-highlight] - Sets the border color of popover.
 * @cssproperty [--bl-popover-border-size=1px] - Sets the border size of popover. You can set it to `0px` to not have a border (if you use a custom background color). Always use with a length unit.
 * @cssproperty [--bl-popover-padding=--bl-size-m] - Sets the padding of popover.
 * @cssproperty [--bl-popover-border-radius=--bl-size-3xs] - Sets the border radius of popover.
 * @cssproperty [--bl-popover-max-width=100vw] - Sets the maximum width of the popover (including border and padding).
 * @cssproperty [--bl-popover-position=fixed] - Sets the position of popover. You can set it to `absolute` if parent element is a fixed positioned element like drawer or dialog.
 */
export declare const BlPopover: React.LazyExoticComponent<import("@lit-labs/react").ReactWebComponent<BlPopoverType, {
    onBlPopoverShow: EventName<BlPopoverPopoverShow>;
    onBlPopoverHide: EventName<BlPopoverPopoverHide>;
}>>;
/**
 * @tag bl-progress-indicator
 * @summary Baklava Progress Indicator component
 *
 * @cssproperty [--bl-progress-indicator-transition-duration=.2s] Duration of the transition of progress bar
 * @property {max} [max=100]
 * @property {number} [value=0]
 */
export declare const BlProgressIndicator: React.LazyExoticComponent<import("@lit-labs/react").ReactWebComponent<BlProgressIndicatorType, {}>>;
/**
 * @tag bl-radio-group
 * @summary Baklava Button component
 *
 * @cssproperty [--bl-radio-direction=row] Can be used for showing radio options as columns instead of rows. Options are `row` or `column`
 * @cssproperty [--bl-radio-group-cross-axis-item-alignment=normal] Can be used for aligning radio items on cross axis. Acts same with align-item
 * @cssproperty [--bl-radio-group-cross-axis-content-alignment=normal] Can be used for aligning radio group content on cross axis. Acts same with align-content
 * @cssproperty [--bl-radio-group-main-axis-content-alignment=normal] Can be used for aligning radio group content on main axis. Acts same with justify-content
 */
export declare const BlRadioGroup: React.LazyExoticComponent<import("@lit-labs/react").ReactWebComponent<BlRadioGroupType, {
    onBlRadioChange: EventName<BlRadioGroupRadioChange>;
}>>;
/**
 * @tag bl-select
 * @summary Baklava Select component
 *
 * @cssproperty [--bl-popover-position=fixed] Sets the positioning strategy of select popover. You can set it as `absolute` if you need to show popover relative to its trigger element.
 */
export declare const BlSelect: React.LazyExoticComponent<import("@lit-labs/react").ReactWebComponent<BlSelectType<string>, {
    onBlSelect: EventName<BlSelectSelect>;
}>>;
/**
 * @tag bl-switch
 * @summary Baklava Switch component
 *
 * @cssproperty [--bl-switch-color-on=--bl-color-primary] Set the checked color
 * @cssproperty [--bl-switch-color-off=--bl-color-neutral-lighter] Set the unchecked color
 * @cssproperty [--bl-switch-animation-duration=300ms] Set the animation duration of switch toggle
 */
export declare const BlSwitch: React.LazyExoticComponent<import("@lit-labs/react").ReactWebComponent<BlSwitchType, {
    onBlSwitchToggle: EventName<BlSwitchSwitchToggle>;
}>>;
/**
 * @tag bl-tab-group
 * @summary Baklava Tab group component
 */
export declare const BlTabGroup: React.LazyExoticComponent<import("@lit-labs/react").ReactWebComponent<BlTabGroupType, {}>>;
/**
 * @tag bl-textarea
 * @summary Baklava Textarea component
 */
export declare const BlTextarea: React.LazyExoticComponent<import("@lit-labs/react").ReactWebComponent<BlTextareaType, {
    onBlInput: EventName<BlTextareaInput>;
    onBlChange: EventName<BlTextareaChange>;
    onBlInvalid: EventName<BlTextareaInvalid>;
}>>;
/**
 * @tag bl-tooltip
 * @summary Baklava Tooltip component
 * @dependency bl-popover
 *
 * @cssproperty [--bl-tooltip-trigger-display=inline-flex] Set the display of the tooltip trigger.
 */
export declare const BlTooltip: React.LazyExoticComponent<import("@lit-labs/react").ReactWebComponent<BlTooltipType, {
    onBlTooltipShow: EventName<BlTooltipTooltipShow>;
    onBlTooltipHide: EventName<BlTooltipTooltipHide>;
}>>;
/**
 * @tag bl-checkbox
 * @summary Baklava Checkbox component
 */
export declare const BlCheckbox: React.LazyExoticComponent<import("@lit-labs/react").ReactWebComponent<BlCheckboxType, {
    onBlCheckboxChange: EventName<BlCheckboxCheckboxChange>;
    onBlFocus: EventName<BlCheckboxFocus>;
    onBlBlur: EventName<BlCheckboxBlur>;
}>>;
/**
 * @tag bl-dropdown-group
 * @summary Baklava Dropdown Group component
 */
export declare const BlDropdownGroup: React.LazyExoticComponent<import("@lit-labs/react").ReactWebComponent<BlDropdownGroupType, {}>>;
/**
 * @tag bl-dropdown-item
 * @summary Baklava Dropdown Item component
 */
export declare const BlDropdownItem: React.LazyExoticComponent<import("@lit-labs/react").ReactWebComponent<BlDropdownItemType, {
    onBlDropdownItemClick: EventName<BlDropdownItemDropdownItemClick>;
}>>;
/**
 * @tag bl-radio
 * @summary Baklava Radio Option component
 *
 * @cssprop [--bl-radio-align-items=center] Align items of radio option
 */
export declare const BlRadio: React.LazyExoticComponent<import("@lit-labs/react").ReactWebComponent<BlRadioType, {
    onBlChecked: EventName<BlRadioChecked>;
    onBlFocus: EventName<BlRadioFocus>;
    onBlBlur: EventName<BlRadioBlur>;
}>>;
export declare const BlSelectOption: React.LazyExoticComponent<import("@lit-labs/react").ReactWebComponent<BlSelectOptionType<string>, {
    onBlSelectOption: EventName<BlSelectOptionSelectOption>;
    onBlFocus: EventName<BlSelectOptionFocus>;
    onBlBlur: EventName<BlSelectOptionBlur>;
}>>;
/**
 * @tag bl-tab
 * @summary Baklava Tab component
 */
export declare const BlTab: React.LazyExoticComponent<import("@lit-labs/react").ReactWebComponent<BlTabType, {
    onBlTabSelected: EventName<BlTabTabSelected>;
}>>;
/**
 * @tag bl-tab-panel
 * @summary Baklava Tab panel component
 */
export declare const BlTabPanel: React.LazyExoticComponent<import("@lit-labs/react").ReactWebComponent<BlTabPanelType, {}>>;
//# sourceMappingURL=baklava-react.d.ts.map