@yourbestsoft/studio-screen-ui-kit 0.0.1

package/dist/components/card/Card.d.ts

@@ -0,0 +1,17 @@
+import { ComponentPropsWithoutRef } from 'react';
+export type CardProps = ComponentPropsWithoutRef<'div'>;
+export declare const CardRoot: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export type CardContentProps = CardProps & {
+    ignoreHeader?: boolean;
+};
+export declare const CardContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ignoreHeader?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CardHeader: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Card: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Content: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ignoreHeader?: boolean;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};

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

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

package/dist/components/color-button/ColorButton.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from 'react';
+interface ColorButtonProps extends HTMLAttributes<HTMLButtonElement> {
+    color: string;
+    disabled?: boolean;
+    selected?: boolean;
+    hotkey?: string;
+    size?: 'small' | 'medium' | 'large';
+}
+export declare const ColorButton: (props: ColorButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/color-button/index.d.ts

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

package/dist/components/color-picker/ColorPicker.d.ts

@@ -0,0 +1,9 @@
+import { ActiveColor, ColorItem, ShadesIndex } from './types';
+interface Props {
+    selectedColor?: ActiveColor;
+    colors: ColorItem[];
+    selectedShadeIndex?: ShadesIndex;
+    changeColor?: (color: ColorItem) => void;
+}
+export declare const ColorPicker: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/color-picker/colors.d.ts

@@ -0,0 +1,2 @@
+import { ColorItem } from './types';
+export declare const defaultColors: ColorItem[];

package/dist/components/color-picker/hooks/usePalette.d.ts

@@ -0,0 +1,18 @@
+import { ActiveColor, ColorItem, ShadesIndex } from '../types';
+interface Props {
+    selectedShadeIndex: ShadesIndex;
+    selectedColor?: ActiveColor;
+    colors: ColorItem[];
+}
+export declare const usePalette: ({ colors, selectedColor, selectedShadeIndex, }: Props) => {
+    activeColor: ActiveColor;
+    activeShade: 3 | 1 | 5 | 2 | 4;
+    palette: {
+        color: string;
+        name?: string;
+        hotkey?: string;
+    }[];
+    setActiveColorHandler: (color: ColorItem, index?: number) => void;
+    setActiveShade: import("react").Dispatch<import("react").SetStateAction<3 | 1 | 5 | 2 | 4>>;
+};
+export {};

package/dist/components/color-picker/hooks/usePaletteControls.d.ts

@@ -0,0 +1,8 @@
+import { ColorItem, ShadesIndex } from '../types';
+interface Props {
+    palette: ColorItem[];
+    setActiveShade: (shade: ShadesIndex) => void;
+    setActiveColorHandler: (color: ColorItem, index?: number) => void;
+}
+export declare const usePaletteControls: (props: Props) => void;
+export {};

package/dist/components/color-picker/index.d.ts

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

package/dist/components/color-picker/parts/hex-input/HexInput.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes, ReactNode } from 'react';
+type Props = {
+    color: string;
+    onChange: (color: string) => void;
+    placeholder?: string;
+    children?: ReactNode;
+} & Omit<HTMLAttributes<HTMLInputElement>, 'onChange'>;
+export declare const HexInput: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/color-picker/parts/palette/Palette.d.ts

@@ -0,0 +1,8 @@
+import { ActiveColor, ColorItem } from '../../types';
+interface PaletteProps {
+    palette: ColorItem[];
+    activeColor: ActiveColor;
+    setActiveColorHandler: (color: ColorItem, index: number) => void;
+}
+export declare const Palette: ({ activeColor, palette, setActiveColorHandler, }: PaletteProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/color-picker/parts/shadow-list/ShadesList.d.ts

@@ -0,0 +1,9 @@
+import { ActiveColor, ColorItem, ShadesIndex } from '../../types';
+interface ShadesListProps {
+    activeShade: ShadesIndex;
+    activeColor: ActiveColor;
+    colors: ColorItem[];
+    setActiveShade: (shade: ShadesIndex) => void;
+}
+export declare const ShadesList: ({ activeColor, activeShade, colors, setActiveShade, }: ShadesListProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/color-picker/types.d.ts

@@ -0,0 +1,9 @@
+export interface ColorItem {
+    name?: string;
+    color: string;
+    hotkey?: string;
+}
+export interface ActiveColor extends ColorItem {
+    index: number;
+}
+export type ShadesIndex = 1 | 2 | 3 | 4 | 5;

package/dist/components/dialog/Dialog.d.ts

@@ -0,0 +1,34 @@
+import React, { ReactNode, ElementType } from 'react';
+interface RootProps {
+    children: React.ReactNode;
+    isOpen?: boolean;
+    onStateChange?: (isOpen: boolean) => void;
+}
+interface TriggerProps<T extends ElementType = 'button'> {
+    as?: T;
+    children: ReactNode;
+}
+interface ContentProps {
+    children: ReactNode;
+    className?: string;
+    closeOnBackdropClick?: boolean;
+}
+interface CloseProps<T extends ElementType = 'button'> {
+    as?: T;
+    children?: ReactNode;
+}
+interface TitleProps {
+    children: ReactNode;
+    className?: string;
+}
+interface SeparatorProps {
+}
+export declare const Dialog: {
+    Close: <T extends ElementType = "button">({ as, children, ...props }: CloseProps<T> & React.ComponentPropsWithoutRef<T>) => import("react/jsx-runtime").JSX.Element;
+    Content: React.ForwardRefExoticComponent<ContentProps & React.RefAttributes<HTMLDialogElement>>;
+    Root: ({ children, isOpen: externalIsOpen, onStateChange, }: RootProps) => import("react/jsx-runtime").JSX.Element;
+    Separator: ({}: SeparatorProps) => import("react/jsx-runtime").JSX.Element;
+    Title: ({ children, className }: TitleProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: <T extends ElementType = "button">({ as, children, ...props }: TriggerProps<T> & React.ComponentPropsWithoutRef<T>) => import("react/jsx-runtime").JSX.Element;
+};
+export {};

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

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

package/dist/components/drop-down/DropDown.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+interface RootProps {
+    children: ReactNode;
+    defaultVisible?: boolean;
+    closeOnOutsideClick?: boolean;
+    closeOnEsc?: boolean;
+}
+interface TriggerProps {
+    children: ReactNode;
+}
+interface ContentProps {
+    children: ReactNode;
+    horizontal?: 'left' | 'center' | 'right';
+    vertical?: 'top' | 'bottom';
+    className?: string;
+    fixedPosition?: boolean;
+}
+export declare const DropDown: {
+    Content: ({ children, className, fixedPosition, horizontal, vertical, }: ContentProps) => import("react/jsx-runtime").JSX.Element | null;
+    Root: ({ children, closeOnEsc, closeOnOutsideClick, defaultVisible, }: RootProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ children }: TriggerProps) => import("react/jsx-runtime").JSX.Element;
+};
+export {};

package/dist/components/drop-down/index.d.ts

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

package/dist/components/icon-button/IconButton.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes, ReactNode } from 'react';
+interface IconButtonProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'className'> {
+    className?: string;
+    variants?: 'primary' | 'secondary' | 'transparent';
+    icon: ReactNode;
+    selected?: boolean;
+    disabled?: boolean;
+}
+export declare const IconButton: (props: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/icon-button/index.d.ts

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

package/dist/components/index.d.ts

@@ -0,0 +1,19 @@
+export * from './button';
+export * from './buttons-group';
+export * from './card';
+export * from './color-button';
+export * from './color-picker';
+export * from './dialog';
+export * from './drop-down';
+export * from './icon-button';
+export * from './pagination';
+export * from './select';
+export * from './shortcut';
+export * from './sidebar';
+export * from './slider';
+export * from './switcher-buttons';
+export * from './table';
+export * from './text-field';
+export * from './theme-switcher';
+export * from './toggle-switch';
+export * from './toolbar';

package/dist/components/pagination/Pagination.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    siblingCount?: number;
+    boundaryCount?: number;
+};
+export declare const Pagination: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

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

package/dist/components/pagination/utils/getPagesArray.d.ts

@@ -0,0 +1,6 @@
+export declare function getPagesArray({ boundaryCount, currentPage, siblingCount, totalPages, }: {
+    currentPage: number;
+    totalPages: number;
+    boundaryCount: number;
+    siblingCount: number;
+}): Array<number | '...'>;

package/dist/components/pagination/utils/getPagesArray.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/select/Select.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+export interface SelectItem {
+    value: string;
+    label: string;
+    imageUrl?: string;
+}
+interface SelectProps {
+    value: string;
+    title?: string;
+    options: SelectItem[];
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'top' | 'left' | 'right' | 'bottom';
+    slot_left?: ReactNode;
+    slot_right?: ReactNode;
+    style?: string;
+    selectedId?: string;
+    onSelect?: (value: string) => void;
+    fullWidth?: boolean;
+}
+export declare const Select: ({ fullWidth, onSelect, options, position, selectedId, slot_left, slot_right, style, title, value, }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

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

package/dist/components/shortcut/Shortcut.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+interface GroupProps {
+    className?: string;
+    title?: string;
+    children: ReactNode;
+}
+interface ListProps {
+    className?: string;
+    children: ReactNode;
+}
+type Keys = string[];
+interface ItemProps {
+    className?: string;
+    description: string;
+    keysVariants: Keys[];
+}
+export declare const Shortcut: {
+    Group: (props: GroupProps) => import("react/jsx-runtime").JSX.Element;
+    Item: (props: ItemProps) => import("react/jsx-runtime").JSX.Element;
+    List: (props: ListProps) => import("react/jsx-runtime").JSX.Element;
+};
+export {};

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

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

package/dist/components/sidebar/Sidebar.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+type SidebarContextProps = {
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+};
+export declare const SidebarContext: import("react").Context<SidebarContextProps | undefined>;
+export declare const useSidebarContext: () => SidebarContextProps;
+type SidebarRootProps = {
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    children: ReactNode;
+};
+type SidebarTriggerProps = {
+    children: ReactNode;
+};
+type SidebarContentProps = {
+    position?: 'left' | 'right' | 'bottom' | 'top';
+    children: ReactNode;
+    className?: string;
+    closeOnOutsideClick?: boolean;
+};
+type SidebarCloseProps = {
+    children: ReactNode;
+};
+export declare const Sidebar: {
+    Close: ({ children }: SidebarCloseProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ children, className, closeOnOutsideClick, position, }: SidebarContentProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ children, isOpen, setIsOpen }: SidebarRootProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ children }: SidebarTriggerProps) => import("react/jsx-runtime").JSX.Element;
+};
+export {};

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

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

package/dist/components/slider/Slider.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    min?: number;
+    max?: number;
+    step?: number;
+    initialValue?: number;
+    onChange?: (value: number) => void;
+}
+export declare const Slider: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default Slider;

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

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

package/dist/components/switcher-buttons/SwitcherButtons.d.ts

@@ -0,0 +1,17 @@
+import React, { ElementType, ReactNode } from 'react';
+interface ComponentValues {
+    value: string;
+    [key: string]: any;
+}
+interface SwitcherProps {
+    componentValues: ComponentValues[];
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    selectedValue?: string;
+    component: ElementType;
+    containerProps?: React.HTMLAttributes<HTMLDivElement>;
+    slot?: ReactNode;
+    className?: string;
+}
+export declare const SwitcherButtons: React.ForwardRefExoticComponent<SwitcherProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/switcher-buttons/index.d.ts

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

package/dist/components/table/Table.d.ts

@@ -0,0 +1,33 @@
+import { MouseEventHandler, ReactNode } from 'react';
+interface Props {
+    children: ReactNode;
+    className?: string;
+}
+interface RootProps extends Props {
+}
+interface CaptionProps extends Props {
+}
+interface HeaderProps extends Props {
+}
+interface RowProps extends Props {
+    onClick?: MouseEventHandler<HTMLTableRowElement> | undefined;
+}
+interface HeadProps extends Props {
+}
+interface BodyProps extends Props {
+}
+interface CellProps extends Props {
+}
+interface FooterProps extends Props {
+}
+export declare const Table: (({ children, className }: RootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Body: ({ children, className }: BodyProps) => import("react/jsx-runtime").JSX.Element;
+    Caption: ({ children, className }: CaptionProps) => import("react/jsx-runtime").JSX.Element;
+    Cell: ({ children, className }: CellProps) => import("react/jsx-runtime").JSX.Element;
+    Footer: ({ children, className }: FooterProps) => import("react/jsx-runtime").JSX.Element;
+    Head: ({ children, className }: HeadProps) => import("react/jsx-runtime").JSX.Element;
+    Header: ({ children, className }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ children, className }: RootProps) => import("react/jsx-runtime").JSX.Element;
+    Row: ({ children, className, onClick }: RowProps) => import("react/jsx-runtime").JSX.Element;
+};
+export {};

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

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

package/dist/components/text-field/index.d.ts

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

package/dist/components/text-field/text-field.d.ts

@@ -0,0 +1,33 @@
+import { ForwardedRef, ReactNode } from 'react';
+type SharedProps = {
+    className?: string;
+    disabled?: boolean;
+    error?: string;
+    label?: string;
+    onBlur?: () => void;
+    onChange: (value: string) => void;
+    onFocus?: () => void;
+    placeholder?: string;
+    required?: boolean;
+    value: string;
+};
+export type TextFieldProps = (SharedProps & {
+    as?: 'input';
+    inputType?: 'password' | 'search' | 'text';
+}) | (SharedProps & {
+    as: 'textarea';
+});
+export type TextFieldComponent = {
+    (props: Extract<TextFieldProps, {
+        as: 'textarea';
+    }> & {
+        ref?: ForwardedRef<HTMLTextAreaElement>;
+    }): ReactNode;
+    (props: Extract<TextFieldProps, {
+        as?: 'input';
+    }> & {
+        ref?: ForwardedRef<HTMLInputElement>;
+    }): ReactNode;
+};
+export declare const TextField: TextFieldComponent;
+export {};

package/dist/components/theme-switcher/ThemeSwitcher.d.ts

@@ -0,0 +1 @@
+export declare const ThemeSwitcher: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/theme-switcher/index.d.ts

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

package/dist/components/toggle-switch/ToggleSwitch.d.ts

@@ -0,0 +1,14 @@
+import { HTMLAttributes, ReactNode } from 'react';
+type Value = string | number | readonly string[] | undefined;
+interface OptionI extends HTMLAttributes<HTMLButtonElement> {
+    value: Value;
+    leftSlot?: ReactNode;
+    rightSlot?: ReactNode;
+    icon?: ReactNode;
+}
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    options: OptionI[];
+    defaultValue?: Value;
+}
+export declare const ToggleSwitch: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/toggle-switch/index.d.ts

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

package/dist/components/toolbar/Toolbar.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+interface RootProps {
+    children: ReactNode;
+    direction?: 'horizontal' | 'vertical';
+    className?: string;
+}
+interface SeparatorProps {
+}
+export declare const Toolbar: {
+    Root: (props: RootProps) => import("react/jsx-runtime").JSX.Element;
+    Separator: ({}: SeparatorProps) => import("react/jsx-runtime").JSX.Element;
+};
+export {};

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

@@ -0,0 +1,2 @@
+export * from './Toolbar';
+export * from './tool-icon-button';

package/dist/components/toolbar/tool-icon-button/ToolIconButton.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+export type ToolbarSlot = 'icon' | 'keybinding';
+export type ToolbarClasses = {
+    [P in ToolbarSlot]?: string;
+};
+interface Props {
+    title?: string;
+    icon: ReactNode;
+    keybinding?: string;
+    aria_label?: string;
+    aria_keyshortcuts?: string;
+    classes?: ToolbarClasses;
+    name?: string;
+    id?: string;
+    isActive?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+export declare const ToolIconButton: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/toolbar/tool-icon-button/index.d.ts

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

package/dist/features/card-collection/CardCollection.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+type Item = {
+    image: {
+        url: string;
+        name: string;
+    };
+    headerAction?: ReactNode;
+    footerSection?: ReactNode;
+};
+type Props = {
+    className?: string;
+    items: Item[];
+};
+export declare const CardCollection: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/card-collection/index.d.ts

@@ -0,0 +1 @@
+export * from './card-collection.module.scss';

package/dist/features/index.d.ts

@@ -0,0 +1,3 @@
+export * from './card-collection';
+export * from './save-modal';
+export * from './theme-provider';

package/dist/features/save-modal/SaveModal.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+interface Props {
+    trigger: ReactNode;
+}
+export declare const SaveModal: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/save-modal/index.d.ts

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

package/dist/features/theme-provider/ThemeProvider.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export type Theme = 'light' | 'dark';
+export type ThemeValue = Theme | 'system';
+interface ThemeContextType {
+    theme: ThemeValue;
+    setTheme: (theme: ThemeValue) => void;
+}
+export declare const ThemeProvider: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useTheme: () => ThemeContextType;
+export {};

package/dist/features/theme-provider/index.d.ts

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

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useSelect';
+export * from './useKeyboardControls';

package/dist/hooks/useKeyboardControls.d.ts

@@ -0,0 +1,3 @@
+type KeyHandler = (event: KeyboardEvent) => void;
+export declare const useKeyboardControls: (handlers: KeyHandler[]) => void;
+export {};

package/dist/hooks/useSelect.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SelectItem } from '../components';
+interface UseSelectProps {
+    options: SelectItem[];
+    onSelect?: (value: string) => void;
+    selectedId?: string;
+}
+export declare const useSelect: ({ onSelect, options, selectedId, }: UseSelectProps) => {
+    handleChange: (item: SelectItem) => void;
+    handleKeyDown: (event: React.KeyboardEvent) => void;
+    handleOutsideClick: () => void;
+    highlightedIndex: number | null;
+    isOpen: boolean;
+    selectedItem: SelectItem | null;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+export {};