UNPKG

@trendyol/baklava

Version:

Trendyol Baklava Design System

321 lines 15.6 kB
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