@trendyol/baklava
Version:
Trendyol Baklava Design System
321 lines • 15.6 kB
TypeScript
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