@infinityloop.labs/ui-kit 0.0.9 → 0.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/components/atoms/Breadcrumbs/index.d.ts +1 -0
  2. package/dist/components/atoms/Button/index.d.ts +20 -10
  3. package/dist/components/atoms/Dropdown/index.d.ts +22 -0
  4. package/dist/components/atoms/Flex/index.d.ts +3 -4
  5. package/dist/components/atoms/Grid/index.d.ts +2 -3
  6. package/dist/components/atoms/Image/index.d.ts +47 -0
  7. package/dist/components/atoms/Input/index.d.ts +22 -1
  8. package/dist/components/atoms/Paper/index.d.ts +17 -3
  9. package/dist/components/atoms/Tag/index.d.ts +15 -0
  10. package/dist/components/atoms/Timer/index.d.ts +19 -0
  11. package/dist/components/atoms/Toggle/index.d.ts +9 -0
  12. package/dist/components/atoms/Typography/index.d.ts +16 -6
  13. package/dist/components/atoms/index.d.ts +6 -0
  14. package/dist/components/index.d.ts +2 -0
  15. package/dist/components/molecules/EditableTypography/index.d.ts +18 -0
  16. package/dist/components/molecules/SlideTemplates/StoreSlide/index.d.ts +46 -0
  17. package/dist/components/molecules/SlideTemplates/index.d.ts +1 -0
  18. package/dist/components/molecules/Slider/index.d.ts +18 -0
  19. package/dist/components/molecules/Slider/slides/MediumHorizontalSlide.d.ts +10 -0
  20. package/dist/components/molecules/Slider/slides/MediumVerticalSlide.d.ts +3 -0
  21. package/dist/components/molecules/Slider/slides/examples.d.ts +31 -0
  22. package/dist/components/molecules/Slider/slides/index.d.ts +3 -0
  23. package/dist/components/molecules/index.d.ts +4 -0
  24. package/dist/components/ui/breadcrumbs.d.ts +18 -0
  25. package/dist/components/ui/index.d.ts +1 -0
  26. package/dist/components/ui/select.d.ts +15 -0
  27. package/dist/components/ui/shadcn-io/color-picker/index.d.ts +37 -0
  28. package/dist/constants/css.d.ts +4 -0
  29. package/dist/constants/index.d.ts +1 -0
  30. package/dist/index.d.ts +1 -1
  31. package/dist/index.es.js +13186 -1352
  32. package/dist/index.umd.js +79 -12
  33. package/dist/lib/utils.d.ts +1 -2
  34. package/dist/style.css +1 -1
  35. package/package.json +15 -4
@@ -0,0 +1 @@
1
+ export { Breadcrumbs, type BreadcrumbsItemObjectType, type BreadcrumbsItemType, } from '../../../components/ui/breadcrumbs';
@@ -1,10 +1,20 @@
1
- import { VariantProps } from 'class-variance-authority';
2
- import * as React from 'react';
3
- declare const buttonVariants: (props?: ({
4
- variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
5
- size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
6
- } & import('class-variance-authority/types').ClassProp) | undefined) => string;
7
- declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
8
- asChild?: boolean;
9
- }): import("react/jsx-runtime").JSX.Element;
10
- export { Button, buttonVariants };
1
+ import type { ButtonHTMLAttributes, MouseEvent, PropsWithChildren, ReactNode } from 'react';
2
+ type ButtonAnimationType = 'default' | 'active' | 'loading';
3
+ type ButtonSizeType = 's' | 'm' | 'l' | 'icon-s' | 'icon-m' | 'icon-l' | 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg' | 'icon-circle';
4
+ export declare const BUTTON_VARIANT_OPTIONS: readonly ["filled", "outline", "text"];
5
+ export type ButtonVariantType = (typeof BUTTON_VARIANT_OPTIONS)[number];
6
+ export declare const BUTTON_COLOR_OPTIONS: readonly ["primary", "secondary", "accent", "muted", "constructive", "cautionary", "destructive", "chart-1", "chart-2", "chart-3", "chart-4", "chart-5"];
7
+ export type ButtonColorType = (typeof BUTTON_COLOR_OPTIONS)[number];
8
+ type ButtonPropertyType = PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement> & {
9
+ icon?: ReactNode;
10
+ leftIcon?: ReactNode;
11
+ rightIcon?: ReactNode;
12
+ onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
13
+ animation?: ButtonAnimationType;
14
+ isLoading?: boolean;
15
+ color?: ButtonColorType;
16
+ variant?: ButtonVariantType;
17
+ size?: ButtonSizeType;
18
+ }>;
19
+ export declare const Button: ({ icon, leftIcon, rightIcon, onClick, animation, isLoading, color, variant, size, className, children, style, ...property }: ButtonPropertyType) => import("react/jsx-runtime").JSX.Element;
20
+ export {};
@@ -0,0 +1,22 @@
1
+ import * as React from 'react';
2
+ export type DropdownOptionType = {
3
+ value: string;
4
+ label: string;
5
+ };
6
+ type DropdownPropertyType = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
7
+ options: DropdownOptionType[];
8
+ value?: string;
9
+ defaultValue?: string;
10
+ onValueChange?: (value: string) => void;
11
+ label?: React.ReactNode;
12
+ required?: boolean;
13
+ isError?: boolean;
14
+ errorText?: React.ReactNode;
15
+ placeholder?: string;
16
+ isSearchable?: boolean;
17
+ searchPlaceholder?: string;
18
+ disabled?: boolean;
19
+ emptyText?: string;
20
+ };
21
+ 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;
22
+ export {};
@@ -1,9 +1,8 @@
1
1
  import { HTMLAttributes } from 'react';
2
- import { JustifyContentType, AlignItemsType } from './lib/types';
3
-
4
- export declare const Flex: import('react').ForwardRefExoticComponent<{
2
+ import type { JustifyContentType, AlignItemsType } from './lib/types';
3
+ export declare const Flex: import("react").ForwardRefExoticComponent<{
5
4
  column?: boolean;
6
5
  middle?: boolean;
7
6
  'justify-content'?: JustifyContentType;
8
7
  'align-items'?: AlignItemsType;
9
- } & HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
8
+ } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
@@ -1,5 +1,4 @@
1
1
  import { HTMLAttributes } from 'react';
2
-
3
- export declare const Grid: import('react').ForwardRefExoticComponent<{
2
+ export declare const Grid: import("react").ForwardRefExoticComponent<{
4
3
  column?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
5
- } & HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
4
+ } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,47 @@
1
+ import * as React from 'react';
2
+ export declare const IMAGE_MASK_OPTIONS: readonly [{
3
+ readonly value: 0;
4
+ readonly label: "No Mask";
5
+ }, {
6
+ readonly value: 1;
7
+ readonly label: "Octagon Crop";
8
+ }, {
9
+ readonly value: 2;
10
+ readonly label: "Circle Crop";
11
+ }, {
12
+ readonly value: 3;
13
+ readonly label: "Square Crop";
14
+ }];
15
+ export type ImageMaskType = (typeof IMAGE_MASK_OPTIONS)[number]['value'];
16
+ export type ImageMaskPositionValueType = {
17
+ x: number;
18
+ y: number;
19
+ };
20
+ export type ImageCropPositionValueType = {
21
+ x: number;
22
+ y: number;
23
+ };
24
+ export declare const getImageMaskUrlByType: (maskType: number) => string | undefined;
25
+ export type ImagePropertyType = Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'className'> & {
26
+ className?: string;
27
+ isLoading?: boolean;
28
+ maskType?: ImageMaskType;
29
+ isEditModeDisabled?: boolean;
30
+ imagePosition?: string;
31
+ isSquareCrop?: boolean;
32
+ cropX?: number;
33
+ cropY?: number;
34
+ cropPositionValue?: ImageCropPositionValueType;
35
+ defaultCropPositionValue?: ImageCropPositionValueType;
36
+ onCropPositionChange?: (value: ImageCropPositionValueType) => void;
37
+ maskSize?: string;
38
+ maskPositionValue?: ImageMaskPositionValueType;
39
+ maskFillColor?: string;
40
+ maskStrokeColor?: string;
41
+ maskStrokeWidth?: number;
42
+ isTopShadeVisible?: boolean;
43
+ topShadeColor?: string;
44
+ isBottomShadeVisible?: boolean;
45
+ bottomShadeColor?: string;
46
+ };
47
+ 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;
@@ -1,3 +1,24 @@
1
1
  import * as React from 'react';
2
- declare function Input({ className, type, ...props }: React.ComponentProps<'input'>): import("react/jsx-runtime").JSX.Element;
2
+ import { type TypographyType } from '../../../components/atoms/Typography';
3
+ export type InputVariantType = 'outline' | 'text';
4
+ type InputSharedPropertyType = {
5
+ className?: string;
6
+ variant?: InputVariantType;
7
+ typography?: TypographyType;
8
+ isTextarea?: boolean;
9
+ isResizableX?: boolean;
10
+ isResizableY?: boolean;
11
+ textareaRowsCount?: number;
12
+ isError?: boolean;
13
+ label?: React.ReactNode;
14
+ errorText?: React.ReactNode;
15
+ };
16
+ type SingleLineInputPropertyType = InputSharedPropertyType & React.ComponentProps<'input'> & {
17
+ isTextarea?: false;
18
+ };
19
+ type MultiLineInputPropertyType = InputSharedPropertyType & Omit<React.ComponentProps<'textarea'>, 'rows' | 'type'> & {
20
+ isTextarea: true;
21
+ };
22
+ type InputPropertyType = SingleLineInputPropertyType | MultiLineInputPropertyType;
23
+ declare function Input(property: InputPropertyType): import("react/jsx-runtime").JSX.Element;
3
24
  export { Input };
@@ -1,5 +1,19 @@
1
- export type PaperPropertyType = {
1
+ import type { ComponentPropsWithoutRef, ElementType, PropsWithChildren } from 'react';
2
+ declare const paperStyleDictionary: {
3
+ readonly light: "bg-(--card)";
4
+ readonly dark: "bg-(--background)";
5
+ 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))]";
6
+ };
7
+ type PaperType = keyof typeof paperStyleDictionary;
8
+ type PaperBasePropertyType<T extends ElementType> = {
9
+ as?: T;
10
+ type?: PaperType;
2
11
  className?: string;
3
- color?: 'white' | 'gray';
12
+ isColored?: boolean;
13
+ isRoundedCornersDisabled?: boolean;
14
+ isLoading?: boolean;
4
15
  };
5
- export declare const Paper: FC<PaperPropertyType>;
16
+ type PaperPropertyType<T extends ElementType> = PropsWithChildren<PaperBasePropertyType<T> & Omit<ComponentPropsWithoutRef<T>, 'as' | 'className' | 'children'>>;
17
+ declare const defaultElement = "div";
18
+ 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;
19
+ export {};
@@ -0,0 +1,15 @@
1
+ import { type HTMLAttributes } from 'react';
2
+ import { type TypographyColorType } from '../../../components/atoms/Typography';
3
+ export declare const TAG_TYPE_OPTIONS: readonly ["default", "time"];
4
+ export type TagType = (typeof TAG_TYPE_OPTIONS)[number];
5
+ export type TagPropertyType = HTMLAttributes<HTMLSpanElement> & {
6
+ label: string;
7
+ type?: TagType;
8
+ color?: TypographyColorType;
9
+ textColor?: TypographyColorType;
10
+ isLoading?: boolean;
11
+ isEditModeEnabled?: boolean;
12
+ isEditModeDisabled?: boolean;
13
+ onLabelChange?: (value: string) => void;
14
+ };
15
+ export declare const Tag: ({ label, type, color, textColor, className, isLoading, isEditModeEnabled, isEditModeDisabled, onLabelChange, ...property }: TagPropertyType) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,19 @@
1
+ import React from 'react';
2
+ type TimerLabelsType = {
3
+ days: React.ReactNode;
4
+ hours: React.ReactNode;
5
+ minutes: React.ReactNode;
6
+ seconds: React.ReactNode;
7
+ };
8
+ export type TimerPropertyType = {
9
+ targetDate: Date | number | string;
10
+ className?: string;
11
+ itemClassName?: string;
12
+ labels?: Partial<TimerLabelsType>;
13
+ onComplete?: () => void;
14
+ };
15
+ export declare const Timer: {
16
+ ({ targetDate, className, itemClassName, labels, onComplete, }: TimerPropertyType): import("react/jsx-runtime").JSX.Element;
17
+ displayName: string;
18
+ };
19
+ export {};
@@ -0,0 +1,9 @@
1
+ import * as React from 'react';
2
+ type TogglePropertyType = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'className'> & {
3
+ className?: string;
4
+ leftLabel?: React.ReactNode;
5
+ rightLabel?: React.ReactNode;
6
+ labelClassName?: string;
7
+ };
8
+ export declare const Toggle: ({ className, leftLabel, rightLabel, labelClassName, id, disabled, ...property }: TogglePropertyType) => import("react/jsx-runtime").JSX.Element;
9
+ export {};
@@ -1,11 +1,21 @@
1
- import { FC, AnchorHTMLAttributes } from 'react';
2
-
3
- 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';
4
- type ElementType = 'a' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
1
+ import React, { type ElementType, type HTMLAttributes } from 'react';
2
+ export type TypographyType = 'Heading' | 'SectionHeader' | 'CompactHeader' | 'Action' | 'Subheader' | 'Body' | 'BodySmall' | 'Caption' | 'CompactCaption';
3
+ 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"];
4
+ export type TypographyColorType = (typeof TYPOGRAPHY_COLOR_OPTIONS)[number];
5
+ export declare const TYPOGRAPHY_OPTIONS: TypographyType[];
6
+ export declare const getTypographyClassName: (typography: TypographyType) => string;
7
+ export declare const getDefaultElementTagByTypography: (typography: TypographyType) => "h1" | "h4" | "h5" | "p" | "span";
8
+ export declare const getDefaultColorByTypography: (typography: TypographyType) => "foreground" | "muted-foreground";
9
+ export declare const getPlaceholderTypographyClassName: (typography: TypographyType) => string;
5
10
  type OwnPropertyType = {
6
11
  typography: TypographyType;
7
12
  element?: ElementType;
13
+ color?: TypographyColorType;
8
14
  className?: string;
9
- } & AnchorHTMLAttributes<HTMLAnchorElement>;
10
- export declare const Typography: FC<OwnPropertyType>;
15
+ isLoading?: boolean;
16
+ } & HTMLAttributes<HTMLElement>;
17
+ export declare const Typography: {
18
+ ({ typography, element, color, style, className: clsname, isLoading, children, ...props }: OwnPropertyType): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
19
+ displayName: string;
20
+ };
11
21
  export {};
@@ -2,5 +2,11 @@ export * from './Flex';
2
2
  export * from './Grid';
3
3
  export * from './Typography';
4
4
  export * from './Paper';
5
+ export * from './Breadcrumbs';
5
6
  export * from './Button';
6
7
  export * from './Input';
8
+ export * from './Dropdown';
9
+ export * from './Toggle';
10
+ export * from './Image';
11
+ export * from './Timer';
12
+ export * from './Tag';
@@ -1,2 +1,4 @@
1
1
  export * from './atoms';
2
+ export * from './molecules';
2
3
  export * from './ui';
4
+ export * from './ui/shadcn-io/color-picker';
@@ -0,0 +1,18 @@
1
+ import * as React from 'react';
2
+ import type { ElementType } from 'react';
3
+ import { type TypographyColorType, type TypographyType } from '../../../components/atoms/Typography';
4
+ type EditableTypographyPropertyType = {
5
+ className?: string;
6
+ typography?: TypographyType;
7
+ element?: ElementType;
8
+ color?: TypographyColorType;
9
+ isEditModeDisabled?: boolean;
10
+ isLoading?: boolean;
11
+ value?: string;
12
+ defaultValue?: string;
13
+ placeholder?: string;
14
+ onValueChange?: (value: string) => void;
15
+ children?: React.ReactNode;
16
+ };
17
+ export declare const EditableTypography: ({ className, typography, element, color, isEditModeDisabled, isLoading, value, defaultValue, placeholder, onValueChange, children, }: EditableTypographyPropertyType) => import("react/jsx-runtime").JSX.Element;
18
+ export {};
@@ -0,0 +1,46 @@
1
+ import * as React from 'react';
2
+ import { type ImagePropertyType } from '../../../../components/atoms/Image';
3
+ import { type TagType } from '../../../../components/atoms/Tag';
4
+ import { type TypographyColorType } from '../../../../components/atoms/Typography';
5
+ export type StoreSlideImageChangePayloadType = {
6
+ file: File;
7
+ objectUrl: string;
8
+ };
9
+ export type StoreSlideTagItemType = {
10
+ id: string;
11
+ label: string;
12
+ type?: TagType;
13
+ position?: 'top-left' | 'bottom-right';
14
+ color?: TypographyColorType;
15
+ textColor?: TypographyColorType;
16
+ isLoading?: boolean;
17
+ onClick?: (id: string) => void;
18
+ onLabelChange?: (id: string, value: string) => void;
19
+ };
20
+ export type StoreSlidePropertyType = Omit<React.HTMLAttributes<HTMLElement>, 'title'> & {
21
+ isSetModeEnabled?: boolean;
22
+ isEditModeEnabled?: boolean;
23
+ isEditModeDisabled?: boolean;
24
+ setModelEnabled?: boolean;
25
+ coverImageSrc: string;
26
+ coverImageAlt?: string;
27
+ isImageLoading?: boolean;
28
+ imageProps?: Omit<ImagePropertyType, 'src' | 'alt' | 'className'>;
29
+ imageAccept?: string;
30
+ onImageChange?: (payload: StoreSlideImageChangePayloadType) => void;
31
+ brandName: React.ReactNode;
32
+ brandIcon?: React.ReactNode;
33
+ heading: React.ReactNode;
34
+ accentText?: React.ReactNode;
35
+ description?: React.ReactNode;
36
+ priceText: React.ReactNode;
37
+ tagText?: string;
38
+ tagType?: TagType;
39
+ tagColor?: TypographyColorType;
40
+ tagTextColor?: TypographyColorType;
41
+ tags?: StoreSlideTagItemType[];
42
+ onTagClick?: (id: string) => void;
43
+ onTagLabelChange?: (id: string, value: string) => void;
44
+ badgeText?: React.ReactNode;
45
+ };
46
+ 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;
@@ -0,0 +1 @@
1
+ export * from './StoreSlide';
@@ -0,0 +1,18 @@
1
+ import * as React from 'react';
2
+ type SliderPropertyType = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
3
+ slides: React.ReactNode[];
4
+ slidesPerView?: number | 'auto';
5
+ spaceBetween?: number;
6
+ isLoopEnabled?: boolean;
7
+ isPaginationVisible?: boolean;
8
+ isNavigationVisible?: boolean;
9
+ isNavigationEnabled?: boolean;
10
+ isArrowsVisible?: boolean;
11
+ isMousewheelEnabled?: boolean;
12
+ isKeyboardEnabled?: boolean;
13
+ isGrabCursorVisible?: boolean;
14
+ isFreeScrollEnabled?: boolean;
15
+ onSlideChange?: (activeSlideIndex: number) => void;
16
+ };
17
+ 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;
18
+ export {};
@@ -0,0 +1,10 @@
1
+ export type MediumHorizontalSlidePropertyType = {
2
+ coverImageSrc: string;
3
+ brandName: string;
4
+ heading: string;
5
+ viewsText: string;
6
+ tagText?: string;
7
+ isEditModeEnabled?: boolean;
8
+ isEditModeDisabled?: boolean;
9
+ };
10
+ export declare const MediumHorizontalSlide: ({ coverImageSrc, brandName, heading, viewsText, tagText, isEditModeEnabled, isEditModeDisabled, }: MediumHorizontalSlidePropertyType) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,3 @@
1
+ import { type StoreSlidePropertyType } from '../../../../components/molecules/SlideTemplates';
2
+ export type MediumVerticalSlidePropertyType = StoreSlidePropertyType;
3
+ export declare const MediumVerticalSlide: (property: MediumVerticalSlidePropertyType) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,31 @@
1
+ import * as React from 'react';
2
+ import type { StoreSlideTagItemType } from '../../../../components/molecules/SlideTemplates';
3
+ export type SliderDemoSlideItemType = {
4
+ id: string;
5
+ coverImageSrc: string;
6
+ brandName: string;
7
+ heading: string;
8
+ accentText: string;
9
+ description: string;
10
+ priceText: string;
11
+ tagText: string;
12
+ };
13
+ export declare const courseSlideData: SliderDemoSlideItemType[];
14
+ export declare const sliderSlideComponentTypeOptions: readonly ["MediumVerticalSlide", "MediumHorizontalSlide"];
15
+ export type SliderSlideComponentType = (typeof sliderSlideComponentTypeOptions)[number];
16
+ export declare const mediumVerticalSlideWidthClassName = "w-[460px] min-w-[460px]";
17
+ export declare const mediumHorizontalSlideWidthClassName = "w-[520px] min-w-[520px]";
18
+ type TagVariantType = 'no-tags' | 'one-tag' | 'two-tags' | 'two-other-tags';
19
+ export declare const getTagsByVariant: (variant: TagVariantType, slideId: string, baseLabel: string) => {
20
+ tags: StoreSlideTagItemType[];
21
+ tagText?: string;
22
+ };
23
+ export type BuildSliderSlidesPropertyType = {
24
+ componentType: SliderSlideComponentType;
25
+ isEditModeEnabled?: boolean;
26
+ isEditModeDisabled?: boolean;
27
+ onTagClick?: (id: string) => void;
28
+ onTagLabelChange?: (id: string, value: string) => void;
29
+ };
30
+ export declare const buildSliderSlides: ({ componentType, isEditModeEnabled, isEditModeDisabled, onTagClick, onTagLabelChange, }: BuildSliderSlidesPropertyType) => React.ReactNode[];
31
+ export {};
@@ -0,0 +1,3 @@
1
+ export * from './MediumHorizontalSlide';
2
+ export * from './MediumVerticalSlide';
3
+ export * from './examples';
@@ -0,0 +1,4 @@
1
+ export * from './EditableTypography';
2
+ export * from './Slider';
3
+ export * from './Slider/slides';
4
+ export * from './SlideTemplates';
@@ -0,0 +1,18 @@
1
+ import * as React from 'react';
2
+ export type BreadcrumbsItemObjectType = {
3
+ key?: React.Key;
4
+ label?: React.ReactNode;
5
+ href?: string;
6
+ onClick?: React.ComponentProps<'a'>['onClick'];
7
+ isCurrent?: boolean;
8
+ component?: React.ReactElement;
9
+ };
10
+ export type BreadcrumbsItemType = BreadcrumbsItemObjectType | React.ReactElement;
11
+ type BreadcrumbsPropertyType = React.ComponentProps<'nav'> & {
12
+ items: BreadcrumbsItemType[];
13
+ maxItems?: number;
14
+ separator?: React.ReactNode;
15
+ listClassName?: string;
16
+ };
17
+ export declare const Breadcrumbs: ({ items, maxItems, separator, listClassName, ...props }: BreadcrumbsPropertyType) => import("react/jsx-runtime").JSX.Element;
18
+ export {};
@@ -1,2 +1,3 @@
1
1
  export * from './breadcrumb';
2
+ export * from './breadcrumbs';
2
3
  export * from './avatar';
@@ -0,0 +1,15 @@
1
+ import * as React from "react";
2
+ import * as SelectPrimitive from "@radix-ui/react-select";
3
+ declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
4
+ declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
5
+ declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): import("react/jsx-runtime").JSX.Element;
6
+ declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
7
+ size?: "sm" | "default";
8
+ }): import("react/jsx-runtime").JSX.Element;
9
+ declare function SelectContent({ className, children, position, align, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
10
+ declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): import("react/jsx-runtime").JSX.Element;
11
+ declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
12
+ declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
13
+ declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): import("react/jsx-runtime").JSX.Element;
14
+ declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>): import("react/jsx-runtime").JSX.Element;
15
+ export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };
@@ -0,0 +1,37 @@
1
+ import Color from 'color';
2
+ import { Slider } from 'radix-ui';
3
+ import { type ComponentProps, type HTMLAttributes } from 'react';
4
+ import { Button } from '../../../../components/atoms/Button';
5
+ import { SelectTrigger } from '../../../../components/ui/select';
6
+ interface ColorPickerContextValue {
7
+ hue: number;
8
+ saturation: number;
9
+ lightness: number;
10
+ alpha: number;
11
+ mode: string;
12
+ setHue: (hue: number) => void;
13
+ setSaturation: (saturation: number) => void;
14
+ setLightness: (lightness: number) => void;
15
+ setAlpha: (alpha: number) => void;
16
+ setMode: (mode: string) => void;
17
+ }
18
+ export declare const useColorPicker: () => ColorPickerContextValue;
19
+ export type ColorPickerProps = HTMLAttributes<HTMLDivElement> & {
20
+ value?: Parameters<typeof Color>[0];
21
+ defaultValue?: Parameters<typeof Color>[0];
22
+ onChange?: (value: Parameters<typeof Color.rgb>[0]) => void;
23
+ };
24
+ export declare const ColorPicker: ({ value, defaultValue, onChange, className, ...props }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
25
+ export type ColorPickerSelectionProps = HTMLAttributes<HTMLDivElement>;
26
+ export declare const ColorPickerSelection: import("react").MemoExoticComponent<({ className, ...props }: ColorPickerSelectionProps) => import("react/jsx-runtime").JSX.Element>;
27
+ export type ColorPickerHueProps = ComponentProps<typeof Slider.Root>;
28
+ export declare const ColorPickerHue: ({ className, ...props }: ColorPickerHueProps) => import("react/jsx-runtime").JSX.Element;
29
+ export type ColorPickerAlphaProps = ComponentProps<typeof Slider.Root>;
30
+ export declare const ColorPickerAlpha: ({ className, ...props }: ColorPickerAlphaProps) => import("react/jsx-runtime").JSX.Element;
31
+ export type ColorPickerEyeDropperProps = ComponentProps<typeof Button>;
32
+ export declare const ColorPickerEyeDropper: ({ className, ...props }: ColorPickerEyeDropperProps) => import("react/jsx-runtime").JSX.Element;
33
+ export type ColorPickerOutputProps = ComponentProps<typeof SelectTrigger>;
34
+ export declare const ColorPickerOutput: ({ className, ...props }: ColorPickerOutputProps) => import("react/jsx-runtime").JSX.Element;
35
+ export type ColorPickerFormatProps = HTMLAttributes<HTMLDivElement>;
36
+ export declare const ColorPickerFormat: ({ className, ...props }: ColorPickerFormatProps) => import("react/jsx-runtime").JSX.Element | null;
37
+ export {};
@@ -0,0 +1,4 @@
1
+ export declare const HIDDEN_BY_SCROLL_CLASS = "opacity-0 pointer-events-none";
2
+ export declare const FAST_TRANSITION_CLASS = "transition-all duration-300";
3
+ export declare const GLASS_CLASS = "backdrop-blur-xl bg-opacity-95";
4
+ export declare const GLASS_SURFACE_CLASS = "bg-(--card)/95 border border-(--border) backdrop-blur-xl";
@@ -0,0 +1 @@
1
+ export * from "./css";
package/dist/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
-
2
1
  export * from './components';
2
+ export * from './constants';