@infinityloop.labs/ui-kit 0.0.11 → 0.0.12

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

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

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

@@ -1,4 +1,5 @@
-import type { ButtonHTMLAttributes, MouseEvent, PropsWithChildren, ReactNode } from 'react';
+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"];

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

@@ -1,9 +1,15 @@
+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 DropdownPropertyType = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+type DropdownListPropertyType = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+    type?: 'default';
+    popoverComponent?: React.ComponentType<{
+        children: React.ReactNode;
+    }>;
     options: DropdownOptionType[];
     value?: string;
     defaultValue?: string;
@@ -18,5 +24,16 @@ type DropdownPropertyType = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange
     disabled?: boolean;
     emptyText?: string;
 };
-export declare const Dropdown: ({ options, value, defaultValue, onValueChange, label, required, isError, errorText, placeholder, isSearchable, searchPlaceholder, disabled, emptyText, id, "aria-invalid": ariaInvalid, className, ...property }: DropdownPropertyType) => import("react/jsx-runtime").JSX.Element;
+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/Flex/index.d.ts

@@ -1,8 +1,9 @@
 import { HTMLAttributes } from 'react';
-import type { JustifyContentType, AlignItemsType } from './lib/types';
-export declare const Flex: import("react").ForwardRefExoticComponent<{
+import { JustifyContentType, AlignItemsType } from './lib/types';
+
+export declare const Flex: import('react').ForwardRefExoticComponent<{
     column?: boolean;
     middle?: boolean;
     'justify-content'?: JustifyContentType;
     'align-items'?: AlignItemsType;
-} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+} & HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -1,4 +1,5 @@
 import { HTMLAttributes } from 'react';
-export declare const Grid: import("react").ForwardRefExoticComponent<{
+
+export declare const Grid: import('react').ForwardRefExoticComponent<{
     column?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+} & HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -1,3 +1,4 @@
+import { TypographyColorType } from '../Typography';
 import * as React from 'react';
 export declare const IMAGE_MASK_OPTIONS: readonly [{
     readonly value: 0;
@@ -13,6 +14,8 @@ export declare const IMAGE_MASK_OPTIONS: readonly [{
     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;
@@ -43,5 +46,8 @@ export type ImagePropertyType = Omit<React.ImgHTMLAttributes<HTMLImageElement>,
     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, alt, style, ...property }: ImagePropertyType) => import("react/jsx-runtime").JSX.Element;
+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,5 +1,7 @@
+import { CalendarPropertyType } from '../Calendar';
+import { CalendarPickerCalendarSlotPropertyType, CalendarPickerControlStatePropertyType, CalendarPickerPopoverSlotPropertyType } from '../shared/calendar-picker';
+import { TypographyType } from '../Typography';
 import * as React from 'react';
-import { type TypographyType } from '../../../components/atoms/Typography';
 export type InputVariantType = 'outline' | 'text';
 type InputSharedPropertyType = {
     className?: string;
@@ -19,6 +21,20 @@ type SingleLineInputPropertyType = InputSharedPropertyType & React.ComponentProp
 type MultiLineInputPropertyType = InputSharedPropertyType & Omit<React.ComponentProps<'textarea'>, 'rows' | 'type'> & {
     isTextarea: true;
 };
-type InputPropertyType = SingleLineInputPropertyType | MultiLineInputPropertyType;
+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,19 +1,38 @@
-import type { ComponentPropsWithoutRef, ElementType, PropsWithChildren } from 'react';
+import { CSSProperties, ComponentPropsWithoutRef, ElementType, PropsWithChildren, ReactElement } from 'react';
+
 declare const paperStyleDictionary: {
     readonly light: "bg-(--card)";
     readonly dark: "bg-(--background)";
-    readonly gradient: "bg-[radial-gradient(120%_120%_at_0%_0%,color-mix(in_oklab,var(--chart-1)_10%,transparent),transparent_55%),linear-gradient(180deg,color-mix(in_oklab,var(--card)_93%,black_7%),var(--card))]";
+    readonly glass: "backdrop-blur-xl bg-opacity-95 bg-(--background)/5";
+    readonly transparent: "bg-transparent";
 };
-type PaperType = keyof typeof paperStyleDictionary;
-type PaperBasePropertyType<T extends ElementType> = {
+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;
+    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;
 };
-type PaperPropertyType<T extends ElementType> = PropsWithChildren<PaperBasePropertyType<T> & Omit<ComponentPropsWithoutRef<T>, 'as' | 'className' | 'children'>>;
+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, children, isColored, isRoundedCornersDisabled, isLoading, ...property }: PaperPropertyType<T>) => import("react/jsx-runtime").JSX.Element;
+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

@@ -1,5 +1,6 @@
-import { type HTMLAttributes } from 'react';
-import { type TypographyColorType } from '../../../components/atoms/Typography';
+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> & {

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

@@ -1,4 +1,5 @@
-import React from 'react';
+import { default as React } from 'react';
+
 type TimerLabelsType = {
     days: React.ReactNode;
     hours: React.ReactNode;

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

@@ -1,4 +1,5 @@
-import React, { type ElementType, type HTMLAttributes } from 'react';
+import { default as React, ElementType, HTMLAttributes } from 'react';
+
 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];

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

@@ -10,3 +10,4 @@ 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

@@ -2,3 +2,4 @@ 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

@@ -1,18 +1,21 @@
+import { ElementType } from 'react';
+import { TypographyColorType, TypographyType } from '../../atoms/Typography';
 import * as React from 'react';
-import type { ElementType } from 'react';
-import { type TypographyColorType, type TypographyType } from '../../../components/atoms/Typography';
 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, typography, element, color, isEditModeDisabled, isLoading, value, defaultValue, placeholder, onValueChange, children, }: EditableTypographyPropertyType) => import("react/jsx-runtime").JSX.Element;
+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

@@ -1,7 +1,7 @@
+import { ImagePropertyType } from '../../../atoms/Image';
+import { TagType } from '../../../atoms/Tag';
+import { TypographyColorType } from '../../../atoms/Typography';
 import * as React from 'react';
-import { type ImagePropertyType } from '../../../../components/atoms/Image';
-import { type TagType } from '../../../../components/atoms/Tag';
-import { type TypographyColorType } from '../../../../components/atoms/Typography';
 export type StoreSlideImageChangePayloadType = {
     file: File;
     objectUrl: string;

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

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

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

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

@@ -1,5 +1,5 @@
+import { StoreSlideTagItemType } from '../../SlideTemplates';
 import * as React from 'react';
-import type { StoreSlideTagItemType } from '../../../../components/molecules/SlideTemplates';
 export type SliderDemoSlideItemType = {
     id: string;
     coverImageSrc: string;
@@ -11,10 +11,14 @@ export type SliderDemoSlideItemType = {
     tagText: string;
 };
 export declare const courseSlideData: SliderDemoSlideItemType[];
-export declare const sliderSlideComponentTypeOptions: readonly ["MediumVerticalSlide", "MediumHorizontalSlide"];
+export declare const sliderSlideComponentTypeOptions: readonly ["MediumVerticalSlide", "MediumHorizontalSlide", "BigHorizontalSlide"];
 export type SliderSlideComponentType = (typeof sliderSlideComponentTypeOptions)[number];
-export declare const mediumVerticalSlideWidthClassName = "w-[460px] min-w-[460px]";
-export declare const mediumHorizontalSlideWidthClassName = "w-[520px] min-w-[520px]";
+export declare const mediumVerticalSlideWidth = 460;
+export declare const mediumHorizontalSlideWidth = 520;
+export declare const bigHorizontalSlideWidth = 620;
+export declare const mediumVerticalSlideWidthStyle: React.CSSProperties;
+export declare const mediumHorizontalSlideWidthStyle: React.CSSProperties;
+export declare const bigHorizontalSlideWidthStyle: React.CSSProperties;
 type TagVariantType = 'no-tags' | 'one-tag' | 'two-tags' | 'two-other-tags';
 export declare const getTagsByVariant: (variant: TagVariantType, slideId: string, baseLabel: string) => {
     tags: StoreSlideTagItemType[];

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

@@ -1,3 +1,4 @@
+export * from './BigHorizontalSlide';
 export * from './MediumHorizontalSlide';
 export * from './MediumVerticalSlide';
 export * from './examples';

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

@@ -1,4 +1,7 @@
 export * from './EditableTypography';
+export * from './Accordion';
 export * from './Slider';
 export * from './Slider/slides';
 export * from './SlideTemplates';
+export * from './MathEquationBlock';
+export * from './CodeBrick';

package/dist/components/templates/TableLight/TableLight.d.ts

@@ -0,0 +1,23 @@
+import { TypographyColorType, TypographyType } from '../../atoms/Typography';
+import * as React from 'react';
+export type TableLightRowType = Record<string, string | number | null | undefined>;
+export type TableLightColumnType = {
+    key: string;
+    header: string;
+    typography?: TypographyType;
+    color?: TypographyColorType;
+    width?: number | string;
+    isEditable?: boolean;
+    placeholder?: string;
+    contentClassName?: string;
+    className?: string;
+};
+export type TableLightPropertyType = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
+    columns: TableLightColumnType[];
+    rows: TableLightRowType[];
+    isEditModeEnabled?: boolean;
+    isEditModeDisabled?: boolean;
+    isInlineEditingLocked?: boolean;
+    onRowsChange?: (rows: TableLightRowType[]) => void;
+};
+export declare const TableLight: ({ columns, rows, className, isEditModeEnabled, isEditModeDisabled, isInlineEditingLocked, onRowsChange, ...property }: TableLightPropertyType) => import("react/jsx-runtime").JSX.Element;

package/dist/components/templates/TableLight/index.d.ts

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

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

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

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

@@ -1,3 +1,3 @@
+export * from './avatar';
 export * from './breadcrumb';
 export * from './breadcrumbs';
-export * from './avatar';

package/dist/components/ui/shadcn-io/color-picker/index.d.ts

@@ -1,8 +1,9 @@
-import Color from 'color';
+import { default as Color } from 'color';
 import { Slider } from 'radix-ui';
-import { type ComponentProps, type HTMLAttributes } from 'react';
-import { Button } from '../../../../components/atoms/Button';
-import { SelectTrigger } from '../../../../components/ui/select';
+import { ComponentProps, HTMLAttributes } from 'react';
+import { Button } from '../../../atoms/Button';
+import { SelectTrigger } from '../../select';
+
 interface ColorPickerContextValue {
     hue: number;
     saturation: number;
@@ -23,7 +24,7 @@ export type ColorPickerProps = HTMLAttributes<HTMLDivElement> & {
 };
 export declare const ColorPicker: ({ value, defaultValue, onChange, className, ...props }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
 export type ColorPickerSelectionProps = HTMLAttributes<HTMLDivElement>;
-export declare const ColorPickerSelection: import("react").MemoExoticComponent<({ className, ...props }: ColorPickerSelectionProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const ColorPickerSelection: import('react').MemoExoticComponent<({ className, ...props }: ColorPickerSelectionProps) => import("react/jsx-runtime").JSX.Element>;
 export type ColorPickerHueProps = ComponentProps<typeof Slider.Root>;
 export declare const ColorPickerHue: ({ className, ...props }: ColorPickerHueProps) => import("react/jsx-runtime").JSX.Element;
 export type ColorPickerAlphaProps = ComponentProps<typeof Slider.Root>;

package/dist/constants/index.d.ts

@@ -1 +1 @@
-export * from "./css";
+export * from './css';

package/dist/index.d.ts

@@ -1,2 +1,3 @@
+
 export * from './components';
 export * from './constants';