@infinityloop.labs/ui-kit 0.0.10 → 0.0.12

package/dist/components/atoms/Breadcrumbs/index.d.ts

@@ -0,0 +1 @@
+export { Breadcrumbs, type BreadcrumbsItemObjectType, type BreadcrumbsItemType, } from '../../ui/breadcrumbs';

package/dist/components/atoms/Button/index.d.ts

@@ -1,10 +1,21 @@
-import { VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-declare const buttonVariants: (props?: ({
-    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-export { Button, buttonVariants };
+import { ButtonHTMLAttributes, MouseEvent, PropsWithChildren, ReactNode } from 'react';
+
+type ButtonAnimationType = 'default' | 'active' | 'loading';
+type ButtonSizeType = 's' | 'm' | 'l' | 'icon-s' | 'icon-m' | 'icon-l' | 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg' | 'icon-circle';
+export declare const BUTTON_VARIANT_OPTIONS: readonly ["filled", "outline", "text"];
+export type ButtonVariantType = (typeof BUTTON_VARIANT_OPTIONS)[number];
+export declare const BUTTON_COLOR_OPTIONS: readonly ["primary", "secondary", "accent", "muted", "constructive", "cautionary", "destructive", "chart-1", "chart-2", "chart-3", "chart-4", "chart-5"];
+export type ButtonColorType = (typeof BUTTON_COLOR_OPTIONS)[number];
+type ButtonPropertyType = PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement> & {
+    icon?: ReactNode;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    animation?: ButtonAnimationType;
+    isLoading?: boolean;
+    color?: ButtonColorType;
+    variant?: ButtonVariantType;
+    size?: ButtonSizeType;
+}>;
+export declare const Button: ({ icon, leftIcon, rightIcon, onClick, animation, isLoading, color, variant, size, className, children, style, ...property }: ButtonPropertyType) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/atoms/Calendar/index.d.ts

@@ -0,0 +1,19 @@
+import { DayPicker } from 'react-day-picker';
+import { CalendarPickerSelectionScopeType } from '../shared/calendar-picker';
+import * as React from 'react';
+type DayPickerPropertyType = React.ComponentProps<typeof DayPicker>;
+type CalendarModeType = 'single' | 'range' | 'ranged';
+export type CalendarPropertyType = Omit<DayPickerPropertyType, 'mode'> & {
+    mode?: CalendarModeType;
+    selectionScope?: CalendarPickerSelectionScopeType;
+    selected?: any;
+    onSelect?: (...args: any[]) => void;
+    isLoading?: boolean;
+    value?: unknown;
+    onChange?: (...args: any[]) => void;
+};
+export declare const Calendar: {
+    ({ className, classNames, isLoading, showOutsideDays, fixedWeeks, value, onChange, month, onMonthChange, onDayClick, mode, selectionScope, ...props }: CalendarPropertyType): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/atoms/Dropdown/index.d.ts

@@ -0,0 +1,39 @@
+import { CalendarPropertyType } from '../Calendar';
+import { CalendarPickerCalendarSlotPropertyType, CalendarPickerControlStatePropertyType, CalendarPickerPopoverSlotPropertyType } from '../shared/calendar-picker';
+import * as React from 'react';
+export type DropdownOptionType = {
+    value: string;
+    label: string;
+};
+type DropdownListPropertyType = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+    type?: 'default';
+    popoverComponent?: React.ComponentType<{
+        children: React.ReactNode;
+    }>;
+    options: DropdownOptionType[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    label?: React.ReactNode;
+    required?: boolean;
+    isError?: boolean;
+    errorText?: React.ReactNode;
+    placeholder?: string;
+    isSearchable?: boolean;
+    searchPlaceholder?: string;
+    disabled?: boolean;
+    emptyText?: string;
+};
+export type DropdownCalendarPropertyType = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & Omit<CalendarPropertyType, 'mode' | 'value' | 'onChange' | 'selected' | 'onSelect'> & CalendarPickerControlStatePropertyType & CalendarPickerPopoverSlotPropertyType & CalendarPickerCalendarSlotPropertyType<CalendarPropertyType> & {
+    label?: React.ReactNode;
+    isRequired?: boolean;
+    isError?: boolean;
+    errorText?: React.ReactNode;
+    triggerClassName?: string;
+};
+export type DropdownPropertyType = DropdownListPropertyType | (DropdownCalendarPropertyType & {
+    type: 'calendar';
+});
+export declare const Dropdown: (property: DropdownPropertyType) => import("react/jsx-runtime").JSX.Element;
+export declare const DropdownCalendar: ({ className, triggerClassName, label, isRequired, isError, errorText, placeholder, mode, selectionScope, value, defaultValue, onChange, isOpen, isOpenByDefault, onIsOpenChange, disabled, isLoading, popoverComponent: PopoverComponent, calendarComponent: CalendarComponent, numberOfMonths, ...calendarProperty }: DropdownCalendarPropertyType) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/atoms/Image/index.d.ts

@@ -0,0 +1,53 @@
+import { TypographyColorType } from '../Typography';
+import * as React from 'react';
+export declare const IMAGE_MASK_OPTIONS: readonly [{
+    readonly value: 0;
+    readonly label: "No Mask";
+}, {
+    readonly value: 1;
+    readonly label: "Octagon Crop";
+}, {
+    readonly value: 2;
+    readonly label: "Circle Crop";
+}, {
+    readonly value: 3;
+    readonly label: "Square Crop";
+}];
+export type ImageMaskType = (typeof IMAGE_MASK_OPTIONS)[number]['value'];
+export declare const IMAGE_SIDE_SHADE_SIDE_OPTIONS: readonly ["left", "right"];
+export type ImageSideShadeSideType = (typeof IMAGE_SIDE_SHADE_SIDE_OPTIONS)[number];
+export type ImageMaskPositionValueType = {
+    x: number;
+    y: number;
+};
+export type ImageCropPositionValueType = {
+    x: number;
+    y: number;
+};
+export declare const getImageMaskUrlByType: (maskType: number) => string | undefined;
+export type ImagePropertyType = Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'className'> & {
+    className?: string;
+    isLoading?: boolean;
+    maskType?: ImageMaskType;
+    isEditModeDisabled?: boolean;
+    imagePosition?: string;
+    isSquareCrop?: boolean;
+    cropX?: number;
+    cropY?: number;
+    cropPositionValue?: ImageCropPositionValueType;
+    defaultCropPositionValue?: ImageCropPositionValueType;
+    onCropPositionChange?: (value: ImageCropPositionValueType) => void;
+    maskSize?: string;
+    maskPositionValue?: ImageMaskPositionValueType;
+    maskFillColor?: string;
+    maskStrokeColor?: string;
+    maskStrokeWidth?: number;
+    isTopShadeVisible?: boolean;
+    topShadeColor?: string;
+    isBottomShadeVisible?: boolean;
+    bottomShadeColor?: string;
+    isSideShadeVisible?: boolean;
+    sideShadeSide?: ImageSideShadeSideType;
+    sideShadeColorToken?: TypographyColorType;
+};
+export declare const Image: ({ className, isLoading, maskType, isEditModeDisabled, imagePosition, isSquareCrop, cropX, cropY, cropPositionValue, defaultCropPositionValue, onCropPositionChange, maskSize, maskPositionValue, maskFillColor, maskStrokeColor, maskStrokeWidth, isTopShadeVisible, topShadeColor, isBottomShadeVisible, bottomShadeColor, isSideShadeVisible, sideShadeSide, sideShadeColorToken, alt, style, ...property }: ImagePropertyType) => import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/Input/index.d.ts

@@ -1,3 +1,40 @@
+import { CalendarPropertyType } from '../Calendar';
+import { CalendarPickerCalendarSlotPropertyType, CalendarPickerControlStatePropertyType, CalendarPickerPopoverSlotPropertyType } from '../shared/calendar-picker';
+import { TypographyType } from '../Typography';
 import * as React from 'react';
-declare function Input({ className, type, ...props }: React.ComponentProps<'input'>): import("react/jsx-runtime").JSX.Element;
+export type InputVariantType = 'outline' | 'text';
+type InputSharedPropertyType = {
+    className?: string;
+    variant?: InputVariantType;
+    typography?: TypographyType;
+    isTextarea?: boolean;
+    isResizableX?: boolean;
+    isResizableY?: boolean;
+    textareaRowsCount?: number;
+    isError?: boolean;
+    label?: React.ReactNode;
+    errorText?: React.ReactNode;
+};
+type SingleLineInputPropertyType = InputSharedPropertyType & React.ComponentProps<'input'> & {
+    isTextarea?: false;
+};
+type MultiLineInputPropertyType = InputSharedPropertyType & Omit<React.ComponentProps<'textarea'>, 'rows' | 'type'> & {
+    isTextarea: true;
+};
+type CalendarInputModePropertyType = InputCalendarPropertyType & {
+    type: 'calendar';
+    isTextarea?: false;
+};
+type InputPropertyType = SingleLineInputPropertyType | MultiLineInputPropertyType | CalendarInputModePropertyType;
+export type InputCalendarPropertyType = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & Omit<CalendarPropertyType, 'mode' | 'value' | 'onChange' | 'selected' | 'onSelect'> & CalendarPickerControlStatePropertyType & CalendarPickerPopoverSlotPropertyType & CalendarPickerCalendarSlotPropertyType<CalendarPropertyType> & {
+    label?: React.ReactNode;
+    isRequired?: boolean;
+    isError?: boolean;
+    errorText?: React.ReactNode;
+    inputClassName?: string;
+    name?: string;
+    id?: string;
+};
+declare function Input(property: InputPropertyType): import("react/jsx-runtime").JSX.Element;
+export declare const InputCalendar: ({ className, inputClassName, label, isRequired, isError, errorText, placeholder, mode, selectionScope, value, defaultValue, onChange, isOpen, isOpenByDefault, onIsOpenChange, disabled, isLoading, popoverComponent: PopoverComponent, calendarComponent: CalendarComponent, numberOfMonths, name, id, ...calendarProperty }: InputCalendarPropertyType) => import("react/jsx-runtime").JSX.Element;
 export { Input };

package/dist/components/atoms/Paper/index.d.ts

@@ -1,5 +1,38 @@
-export type PaperPropertyType = {
+import { CSSProperties, ComponentPropsWithoutRef, ElementType, PropsWithChildren, ReactElement } from 'react';
+
+declare const paperStyleDictionary: {
+    readonly light: "bg-(--card)";
+    readonly dark: "bg-(--background)";
+    readonly glass: "backdrop-blur-xl bg-opacity-95 bg-(--background)/5";
+    readonly transparent: "bg-transparent";
+};
+export type PaperType = keyof typeof paperStyleDictionary;
+export declare const PAPER_RADIUS_CLASS_OPTIONS: readonly ["rounded-none", "rounded-sm", "rounded-md", "rounded-lg", "rounded-xl", "rounded-2xl", "rounded-3xl", "rounded-full", "rounded-(--radius)"];
+export type PaperRadiusClassType = (typeof PAPER_RADIUS_CLASS_OPTIONS)[number];
+export declare const PAPER_PATTERN_COLOR_OPTIONS: readonly ["chart-1", "chart-2", "chart-3", "chart-4", "chart-5"];
+export type PaperPatternColorType = (typeof PAPER_PATTERN_COLOR_OPTIONS)[number];
+export type PaperBasePropertyType<T extends ElementType> = {
+    as?: T;
+    type?: PaperType;
     className?: string;
-    color?: 'white' | 'gray';
+    style?: CSSProperties;
+    isColored?: boolean;
+    isGradientEnabled?: boolean;
+    isBorderDisabled?: boolean;
+    isPaddingDisabled?: boolean;
+    radiusClassName?: PaperRadiusClassType;
+    isRoundedCornersDisabled?: boolean;
+    isLoading?: boolean;
+    patternIconComponent?: ElementType | ReactElement;
+    patternIconFile?: string;
+    patternColor?: PaperPatternColorType;
+    patternAngle?: number;
+    patternSize?: number | string;
+    patternGap?: number;
+    patternOpacity?: number;
+    isPatternFixed?: boolean;
 };
-export declare const Paper: FC<PaperPropertyType>;
+export type PaperPropertyType<T extends ElementType = 'div'> = PropsWithChildren<PaperBasePropertyType<T> & Omit<ComponentPropsWithoutRef<T>, 'as' | 'className' | 'children' | 'style'>>;
+declare const defaultElement = "div";
+export declare const Paper: <T extends ElementType = typeof defaultElement>({ as, type, className, style, children, isColored, isGradientEnabled, isBorderDisabled, isPaddingDisabled, radiusClassName, isRoundedCornersDisabled, isLoading, patternIconComponent, patternIconFile, patternColor, patternAngle, patternSize, patternGap, patternOpacity, isPatternFixed, ...property }: PaperPropertyType<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/atoms/Tag/index.d.ts

@@ -0,0 +1,16 @@
+import { HTMLAttributes } from 'react';
+import { TypographyColorType } from '../Typography';
+
+export declare const TAG_TYPE_OPTIONS: readonly ["default", "time"];
+export type TagType = (typeof TAG_TYPE_OPTIONS)[number];
+export type TagPropertyType = HTMLAttributes<HTMLSpanElement> & {
+    label: string;
+    type?: TagType;
+    color?: TypographyColorType;
+    textColor?: TypographyColorType;
+    isLoading?: boolean;
+    isEditModeEnabled?: boolean;
+    isEditModeDisabled?: boolean;
+    onLabelChange?: (value: string) => void;
+};
+export declare const Tag: ({ label, type, color, textColor, className, isLoading, isEditModeEnabled, isEditModeDisabled, onLabelChange, ...property }: TagPropertyType) => import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/Timer/index.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+
+type TimerLabelsType = {
+    days: React.ReactNode;
+    hours: React.ReactNode;
+    minutes: React.ReactNode;
+    seconds: React.ReactNode;
+};
+export type TimerPropertyType = {
+    targetDate: Date | number | string;
+    className?: string;
+    itemClassName?: string;
+    labels?: Partial<TimerLabelsType>;
+    onComplete?: () => void;
+};
+export declare const Timer: {
+    ({ targetDate, className, itemClassName, labels, onComplete, }: TimerPropertyType): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/atoms/Toggle/index.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+type TogglePropertyType = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'className'> & {
+    className?: string;
+    leftLabel?: React.ReactNode;
+    rightLabel?: React.ReactNode;
+    labelClassName?: string;
+};
+export declare const Toggle: ({ className, leftLabel, rightLabel, labelClassName, id, disabled, ...property }: TogglePropertyType) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/atoms/Typography/index.d.ts

@@ -1,11 +1,22 @@
-import { FC, AnchorHTMLAttributes } from 'react';
+import { default as React, ElementType, HTMLAttributes } from 'react';
 
-export type TypographyType = 'H1SemiBold' | 'H2SemiBold' | 'H3Medium' | 'H3SemiBold' | 'H4SemiBold' | 'MRegular' | 'MMedium' | 'MSemiBold' | 'SRegular' | 'SMedium' | 'SSemiBold' | 'XSMedium' | 'MonoMRegular' | 'MonoSRegular' | 'Heading32' | 'Heading24' | 'Heading20' | 'Heading16' | 'Heading14' | 'Heading12' | 'SemiBold52' | 'SemiBold48' | 'SemiBold40' | 'SemiBold32' | 'SemiBold24' | 'SemiBold20' | 'SemiBold16' | 'SemiBold14' | 'Regular24' | 'Regular20' | 'Regular16' | 'Regular14' | 'Regular12' | 'Mono16';
-type ElementType = 'a' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
+export type TypographyType = 'Heading' | 'SectionHeader' | 'CompactHeader' | 'Action' | 'Subheader' | 'Body' | 'BodySmall' | 'Caption' | 'CompactCaption';
+export declare const TYPOGRAPHY_COLOR_OPTIONS: readonly ["background", "foreground", "card", "card-foreground", "popover", "popover-foreground", "muted-foreground", "muted", "primary", "primary-foreground", "secondary", "secondary-foreground", "accent", "accent-foreground", "destructive", "constructive", "constructive-foreground", "cautionary", "cautionary-foreground", "border", "input", "ring", "chart-1", "chart-2", "chart-3", "chart-4", "chart-5"];
+export type TypographyColorType = (typeof TYPOGRAPHY_COLOR_OPTIONS)[number];
+export declare const TYPOGRAPHY_OPTIONS: TypographyType[];
+export declare const getTypographyClassName: (typography: TypographyType) => string;
+export declare const getDefaultElementTagByTypography: (typography: TypographyType) => "h1" | "h4" | "h5" | "p" | "span";
+export declare const getDefaultColorByTypography: (typography: TypographyType) => "foreground" | "muted-foreground";
+export declare const getPlaceholderTypographyClassName: (typography: TypographyType) => string;
 type OwnPropertyType = {
     typography: TypographyType;
     element?: ElementType;
+    color?: TypographyColorType;
     className?: string;
-} & AnchorHTMLAttributes<HTMLAnchorElement>;
-export declare const Typography: FC<OwnPropertyType>;
+    isLoading?: boolean;
+} & HTMLAttributes<HTMLElement>;
+export declare const Typography: {
+    ({ typography, element, color, style, className: clsname, isLoading, children, ...props }: OwnPropertyType): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+};
 export {};

package/dist/components/atoms/index.d.ts

@@ -2,5 +2,12 @@ export * from './Flex';
 export * from './Grid';
 export * from './Typography';
 export * from './Paper';
+export * from './Breadcrumbs';
 export * from './Button';
 export * from './Input';
+export * from './Dropdown';
+export * from './Toggle';
+export * from './Image';
+export * from './Timer';
+export * from './Tag';
+export * from './Calendar';

package/dist/components/atoms/shared/calendar-picker.d.ts

@@ -0,0 +1,42 @@
+import { DateRange } from 'react-day-picker';
+import * as React from 'react';
+export type CalendarPickerModeType = 'single' | 'range' | 'ranged';
+export type CalendarPickerSelectionScopeType = 'date' | 'month' | 'monthYear';
+export type CalendarSelectionType = Date | DateRange | undefined;
+export type CalendarPickerControlStatePropertyType = {
+    mode?: CalendarPickerModeType;
+    selectionScope?: CalendarPickerSelectionScopeType;
+    value?: CalendarSelectionType;
+    defaultValue?: CalendarSelectionType;
+    onChange?: (value: CalendarSelectionType) => void;
+    placeholder?: string;
+    isOpen?: boolean;
+    isOpenByDefault?: boolean;
+    onIsOpenChange?: (isOpen: boolean) => void;
+    disabled?: boolean;
+    isLoading?: boolean;
+};
+export type CalendarPickerCalendarSlotPropertyType<CalendarComponentPropertyType> = {
+    calendarComponent?: React.ComponentType<CalendarComponentPropertyType>;
+};
+export type CalendarPickerPopoverSlotPropertyType = {
+    popoverComponent?: React.ComponentType<{
+        children: React.ReactNode;
+    }>;
+};
+export declare const isDateRangeValue: (value: CalendarSelectionType) => value is DateRange;
+export declare const normalizeCalendarPickerMode: (mode: CalendarPickerModeType) => "single" | "range";
+export declare const formatCalendarValue: ({ mode, selectionScope, value, placeholder, }: {
+    mode: CalendarPickerModeType;
+    selectionScope?: CalendarPickerSelectionScopeType;
+    value: CalendarSelectionType;
+    placeholder: string;
+}) => string;
+export declare const usePickerOpenState: <PropertyType extends {
+    isOpen?: boolean;
+    isOpenByDefault?: boolean;
+}>(property: PropertyType, onIsOpenChange?: (isOpen: boolean) => void) => {
+    isOpen: boolean;
+    setIsOpen: (nextIsOpen: boolean) => void;
+};
+export declare const useOutsideDismiss: (rootReference: React.RefObject<HTMLElement | null>, isOpen: boolean, onDismiss: () => void) => void;

package/dist/components/index.d.ts

@@ -1,3 +1,5 @@
 export * from './atoms';
+export * from './molecules';
 export * from './ui';
 export * from './ui/shadcn-io/color-picker';
+export * from './templates';

package/dist/components/molecules/Accordion/index.d.ts

@@ -0,0 +1,27 @@
+import { TypographyColorType, TypographyType } from '../../atoms/Typography';
+import * as React from 'react';
+export declare const ACCORDION_PAPER_TYPE_OPTIONS: readonly ["dark", "light", "glass", "transparent"];
+export type AccordionPaperType = (typeof ACCORDION_PAPER_TYPE_OPTIONS)[number];
+export type AccordionPropertyType = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {
+    title?: React.ReactNode;
+    content?: React.ReactNode;
+    isOpen?: boolean;
+    isOpenByDefault?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    isToggleDisabled?: boolean;
+    isLoading?: boolean;
+    isEditModeEnabled?: boolean;
+    isEditModeDisabled?: boolean;
+    onTitleChange?: (value: string) => void;
+    onContentChange?: (value: string) => void;
+    titleTypography?: TypographyType;
+    contentTypography?: TypographyType;
+    titleColor?: TypographyColorType;
+    contentColor?: TypographyColorType;
+    titlePlaceholder?: string;
+    contentPlaceholder?: string;
+    paperType?: AccordionPaperType;
+    isPaperColored?: boolean;
+    isRoundedCornersDisabled?: boolean;
+};
+export declare const Accordion: ({ className, title, content, children, isOpen, isOpenByDefault, onOpenChange, isToggleDisabled, isLoading, isEditModeEnabled, isEditModeDisabled, onTitleChange, onContentChange, titleTypography, contentTypography, titleColor, contentColor, titlePlaceholder, contentPlaceholder, paperType, isPaperColored, isRoundedCornersDisabled, ...property }: AccordionPropertyType) => import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/CodeBrick/index.d.ts

@@ -0,0 +1,80 @@
+import { FC } from 'react';
+import { PaperPropertyType } from '../../atoms/Paper';
+import { TypographyColorType } from '../../atoms/Typography';
+
+type CodeBrickBadSmellType = {
+    pattern: string;
+    message: string;
+};
+export type CodeBrickHintStatusType = 'success' | 'warn' | 'error';
+export type CodeBrickHintType = {
+    id: string;
+    value: string;
+    status: CodeBrickHintStatusType;
+};
+type CodeBrickHintStatusColorsType = {
+    success: TypographyColorType;
+    warn: TypographyColorType;
+    error: TypographyColorType;
+};
+type CodeBrickCommonPropertyType = {
+    title?: string;
+    onTitleChange?: (value: string) => void;
+    subtitle?: string;
+    onSubtitleChange?: (value: string) => void;
+    hintsLabel?: string;
+    onHintsLabelChange?: (value: string) => void;
+    bufferLabel?: string;
+    onBufferLabelChange?: (value: string) => void;
+    bufferHelperText?: string;
+    onBufferHelperTextChange?: (value: string) => void;
+    hints?: ReadonlyArray<string | CodeBrickHintType>;
+    hintStatusColors?: Partial<CodeBrickHintStatusColorsType>;
+    onHintsChange?: (hints: CodeBrickHintType[]) => void;
+    onHintValueChange?: (index: number, value: string) => void;
+    onHintStatusChange?: (index: number, status: CodeBrickHintStatusType) => void;
+    onHintAdd?: (hint: CodeBrickHintType, nextHints: CodeBrickHintType[]) => void;
+    onHintRemove?: (index: number, removedHint: CodeBrickHintType, nextHints: CodeBrickHintType[]) => void;
+    activeHintIndex?: number;
+    onActiveHintIndexChange?: (index: number) => void;
+    initialCode?: string;
+    language?: string;
+    isEditMode?: boolean;
+    isEditModeDisabled?: boolean;
+    badSmells?: ReadonlyArray<CodeBrickBadSmellType>;
+};
+type CodeBrickPlaygroundPropertyType = CodeBrickCommonPropertyType;
+export type CodeBrickSnippetType = {
+    id: string;
+    code: string;
+    language: string;
+};
+type CodeBrickNormalizedSnippetType = {
+    code: string;
+    language: string;
+};
+export type CodeBrickDraftPropertyType = CodeBrickCommonPropertyType & {
+    codeSnippets: CodeBrickSnippetType[];
+    activeSnippetId: string;
+    normalizedCodeSnippets: CodeBrickNormalizedSnippetType[];
+    activeSnippet?: CodeBrickSnippetType;
+    languagePlaceholder?: string;
+    snippetPlaceholder?: string;
+    actionButtonLabel?: string;
+    isCodeBlockLoading?: boolean;
+    isUpdateCodeBlockLoading?: boolean;
+    isEditMode?: boolean;
+    isEditModeDisabled?: boolean;
+    onAddCodeSnippetTabHandler: VoidFunction;
+    onRemoveCodeSnippetTabHandler: (snippetId: string) => void;
+    onSelectCodeSnippetTabHandler: (snippetId: string) => void;
+    onChangeCodeSnippetValueHandler: (value: string) => void;
+    onChangeCodeSnippetLanguageHandler: (value: string) => void;
+    onCreateCodeBlockHandler?: VoidFunction;
+    onUpdateCodeBlockHandler?: VoidFunction;
+};
+type CodeBrickVariantPropertyType = CodeBrickPlaygroundPropertyType | CodeBrickDraftPropertyType;
+export type CodeBrickPropertyType = CodeBrickVariantPropertyType & Omit<PaperPropertyType<'div'>, 'children'>;
+export declare const Code: FC<CodeBrickPropertyType>;
+export declare const CodeBrick: FC<CodeBrickPropertyType>;
+export {};

package/dist/components/molecules/CodeBrick/lib/highlight.d.ts

@@ -0,0 +1,2 @@
+export declare const resolveHighlightLanguage: (language?: string) => string | undefined;
+export declare const highlightCodeToHtml: (code: string, language?: string) => string;

package/dist/components/molecules/EditableTypography/index.d.ts

@@ -0,0 +1,21 @@
+import { ElementType } from 'react';
+import { TypographyColorType, TypographyType } from '../../atoms/Typography';
+import * as React from 'react';
+type EditableTypographyPropertyType = {
+    className?: string;
+    contentClassName?: string;
+    typography?: TypographyType;
+    element?: ElementType;
+    color?: TypographyColorType;
+    isEditModeDisabled?: boolean;
+    isEditModeOn?: boolean;
+    isLoading?: boolean;
+    value?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    onValueChange?: (value: string) => void;
+    onEditModeChange?: (isEditModeOn: boolean) => void;
+    children?: React.ReactNode;
+};
+export declare const EditableTypography: ({ className, contentClassName, typography, element, color, isEditModeDisabled, isEditModeOn, isLoading, value, defaultValue, placeholder, onValueChange, onEditModeChange, children, }: EditableTypographyPropertyType) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/molecules/MathEquationBlock/index.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { PaperPropertyType } from '../../atoms/Paper';
+
+export type MathEquationBlockPropertyType = {
+    title: string;
+    value: string;
+    isEditMode: boolean;
+    isSubmitting?: boolean;
+    actionLabel?: string;
+    onChangeTitle?: (value: string) => void;
+    onChangeValue?: (value: string) => void;
+    onSubmit?: VoidFunction;
+} & Omit<PaperPropertyType<'div'>, 'children'>;
+export declare const MathEquationBlock: FC<MathEquationBlockPropertyType>;

package/dist/components/molecules/SlideTemplates/StoreSlide/index.d.ts

@@ -0,0 +1,46 @@
+import { ImagePropertyType } from '../../../atoms/Image';
+import { TagType } from '../../../atoms/Tag';
+import { TypographyColorType } from '../../../atoms/Typography';
+import * as React from 'react';
+export type StoreSlideImageChangePayloadType = {
+    file: File;
+    objectUrl: string;
+};
+export type StoreSlideTagItemType = {
+    id: string;
+    label: string;
+    type?: TagType;
+    position?: 'top-left' | 'bottom-right';
+    color?: TypographyColorType;
+    textColor?: TypographyColorType;
+    isLoading?: boolean;
+    onClick?: (id: string) => void;
+    onLabelChange?: (id: string, value: string) => void;
+};
+export type StoreSlidePropertyType = Omit<React.HTMLAttributes<HTMLElement>, 'title'> & {
+    isSetModeEnabled?: boolean;
+    isEditModeEnabled?: boolean;
+    isEditModeDisabled?: boolean;
+    setModelEnabled?: boolean;
+    coverImageSrc: string;
+    coverImageAlt?: string;
+    isImageLoading?: boolean;
+    imageProps?: Omit<ImagePropertyType, 'src' | 'alt' | 'className'>;
+    imageAccept?: string;
+    onImageChange?: (payload: StoreSlideImageChangePayloadType) => void;
+    brandName: React.ReactNode;
+    brandIcon?: React.ReactNode;
+    heading: React.ReactNode;
+    accentText?: React.ReactNode;
+    description?: React.ReactNode;
+    priceText: React.ReactNode;
+    tagText?: string;
+    tagType?: TagType;
+    tagColor?: TypographyColorType;
+    tagTextColor?: TypographyColorType;
+    tags?: StoreSlideTagItemType[];
+    onTagClick?: (id: string) => void;
+    onTagLabelChange?: (id: string, value: string) => void;
+    badgeText?: React.ReactNode;
+};
+export declare const StoreSlide: ({ className, isSetModeEnabled, isEditModeEnabled, isEditModeDisabled, setModelEnabled, coverImageSrc, coverImageAlt, isImageLoading, imageProps, imageAccept, onImageChange, brandName, brandIcon, heading, accentText, description, priceText, tagText, tagType, tagColor, tagTextColor, tags, onTagClick, onTagLabelChange, badgeText, ...property }: StoreSlidePropertyType) => import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/SlideTemplates/index.d.ts

@@ -0,0 +1 @@
+export * from './StoreSlide';

package/dist/components/molecules/Slider/index.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+export type SliderPropertyType = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
+    slides?: React.ReactNode[];
+    children?: React.ReactNode;
+    slidesPerView?: number | 'auto';
+    spaceBetween?: number;
+    isLoopEnabled?: boolean;
+    isPaginationVisible?: boolean;
+    isNavigationVisible?: boolean;
+    isNavigationEnabled?: boolean;
+    isArrowsVisible?: boolean;
+    isMousewheelEnabled?: boolean;
+    isKeyboardEnabled?: boolean;
+    isGrabCursorVisible?: boolean;
+    isFreeScrollEnabled?: boolean;
+    activeSlideIndex?: number;
+    onSlideChange?: (activeSlideIndex: number) => void;
+};
+export declare const Slider: ({ slides, children, className, slidesPerView, spaceBetween, isLoopEnabled, isPaginationVisible, isNavigationVisible, isNavigationEnabled, isArrowsVisible, isMousewheelEnabled, isKeyboardEnabled, isGrabCursorVisible, isFreeScrollEnabled, activeSlideIndex, onSlideChange, style, ...property }: SliderPropertyType) => import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/Slider/slides/BigHorizontalSlide.d.ts

@@ -0,0 +1,15 @@
+import { StoreSlideTagItemType } from '../../SlideTemplates';
+
+export type BigHorizontalSlidePropertyType = {
+    coverImageSrc: string;
+    brandName: string;
+    heading: string;
+    description: string;
+    tagText?: string;
+    tags?: StoreSlideTagItemType[];
+    isEditModeEnabled?: boolean;
+    isEditModeDisabled?: boolean;
+    onTagClick?: (id: string) => void;
+    onTagLabelChange?: (id: string, value: string) => void;
+};
+export declare const BigHorizontalSlide: ({ coverImageSrc, brandName, heading, description, tagText, tags, isEditModeEnabled, isEditModeDisabled, onTagClick, onTagLabelChange, }: BigHorizontalSlidePropertyType) => import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/Slider/slides/MediumHorizontalSlide.d.ts

@@ -0,0 +1,10 @@
+export type MediumHorizontalSlidePropertyType = {
+    coverImageSrc: string;
+    brandName: string;
+    heading: string;
+    viewsText: string;
+    tagText?: string;
+    isEditModeEnabled?: boolean;
+    isEditModeDisabled?: boolean;
+};
+export declare const MediumHorizontalSlide: ({ coverImageSrc, brandName, heading, viewsText, tagText, isEditModeEnabled, isEditModeDisabled, }: MediumHorizontalSlidePropertyType) => import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/Slider/slides/MediumVerticalSlide.d.ts

@@ -0,0 +1,4 @@
+import { StoreSlidePropertyType } from '../../SlideTemplates';
+
+export type MediumVerticalSlidePropertyType = StoreSlidePropertyType;
+export declare const MediumVerticalSlide: (property: MediumVerticalSlidePropertyType) => import("react/jsx-runtime").JSX.Element;