@sk-web-gui/core 2.3.0 → 2.4.0

package/dist/types/core/src/units.d.ts

@@ -0,0 +1,251 @@
+declare const _units: {
+    spacing: {
+        '0': string;
+        '2': string;
+        '4': string;
+        '6': string;
+        '8': string;
+        '10': string;
+        '12': string;
+        '14': string;
+        '16': string;
+        '18': string;
+        '20': string;
+        '24': string;
+        '32': string;
+        '40': string;
+        '48': string;
+        '56': string;
+        '64': string;
+        '72': string;
+        '80': string;
+    };
+    fontSizes: {
+        'display-1': (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        'display-1-lg': (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        'display-1-md': (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        'display-1-sm': (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        'display-2': (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        'display-2-lg': (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        'display-2-md': (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        'display-2-sm': (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        'display-3': (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        'display-3-lg': (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        'display-3-md': (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        'display-3-sm': (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        h1: (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        'h1-lg': (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        'h1-md': (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        'h1-sm': (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        h2: (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        'h2-lg': (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        'h2-md': (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        'h2-sm': (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        h3: (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        'h3-lg': (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        'h3-md': (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        'h3-sm': (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        h4: (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        'h4-lg': (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        'h4-md': (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        'h4-sm': (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        'label-large': (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        'label-medium': (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        'label-small': (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        'input-large': (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        'input-medium': (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        'input-small': (string | {
+            lineHeight: string;
+            fontWeight: number;
+        })[];
+        lead: string[];
+        base: string[];
+        large: string[];
+        small: string[];
+    };
+    lineHeights: {
+        'display-1': string;
+        'display-1-lg': string;
+        'display-1-md': string;
+        'display-1-sm': string;
+        'display-2': string;
+        'display-2-lg': string;
+        'display-2-md': string;
+        'display-2-sm': string;
+        'display-3': string;
+        'display-3-lg': string;
+        'display-3-md': string;
+        'display-3-sm': string;
+        h1: string;
+        'h1-lg': string;
+        'h1-md': string;
+        'h1-sm': string;
+        h2: string;
+        'h2-lg': string;
+        'h2-md': string;
+        'h2-sm': string;
+        h3: string;
+        'h3-lg': string;
+        'h3-md': string;
+        'h3-sm': string;
+        h4: string;
+        'h4-lg': string;
+        'h4-md': string;
+        'h4-sm': string;
+        'label-large': string;
+        'label-medium': string;
+        'label-small': string;
+        'input-large': string;
+        'input-medium': string;
+        'input-small': string;
+        lead: string;
+        base: string;
+        large: string;
+        small: string;
+    };
+    radius: {
+        DEFAULT: string;
+        full: string;
+        none: string;
+        circular: string;
+        'circular-lg': string;
+        'circular-md': string;
+        'circular-sm': string;
+        button: string;
+        'button-lg': string;
+        'button-md': string;
+        'button-sm': string;
+        cards: string;
+        'cards-lg': string;
+        'cards-md': string;
+        'cards-sm': string;
+        utility: string;
+        'utility-lg': string;
+        'utility-md': string;
+        'utility-sm': string;
+        groups: string;
+        'groups-lg': string;
+        'groups-md': string;
+        'groups-sm': string;
+        '0': string;
+        '2': string;
+        '4': string;
+        '6': string;
+        '8': string;
+        '10': string;
+        '12': string;
+        '14': string;
+        '16': string;
+        '18': string;
+        '20': string;
+        '24': string;
+        '32': string;
+        '40': string;
+        '48': string;
+        '56': string;
+        '64': string;
+        '72': string;
+        '80': string;
+    };
+};
+declare const units: typeof _units;
+export { units };

package/dist/types/core/src/with-opacity.d.ts

@@ -0,0 +1,4 @@
+declare const withOpacity: (variableName: string) => ({ opacityValue }: {
+    opacityValue: string;
+}) => string;
+export default withOpacity;

package/dist/types/divider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './src';
+export type * from './src';

package/dist/types/divider/src/divider-section.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { DefaultProps } from '@sk-web-gui/utils';
+import { DividerProps } from './divider';
+export interface DividerSectionProps extends DividerProps, DefaultProps {
+    /**
+     * @default md
+     */
+    size?: 'sm' | 'md' | 'lg';
+    children: string | React.ReactElement;
+}
+export declare const DividerSection: React.ForwardRefExoticComponent<Omit<DividerSectionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default DividerSection;

package/dist/types/divider/src/divider.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { DefaultProps } from '@sk-web-gui/utils';
+export interface DividerProps extends DefaultProps, React.ComponentPropsWithRef<'hr'> {
+    orientation?: 'horizontal' | 'vertical';
+    strong?: boolean;
+}
+export declare const Divider: React.ForwardRefExoticComponent<Omit<DividerProps, "ref"> & React.RefAttributes<HTMLHRElement>>;
+export default Divider;

package/dist/types/divider/src/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Divider as InternalDivider, DividerProps as InternalDividerProps } from './divider';
+import { DividerSection } from './divider-section';
+interface DividerProps extends React.ForwardRefExoticComponent<InternalDividerProps> {
+    Component: typeof InternalDivider;
+    Section: typeof DividerSection;
+}
+export declare const Divider: DividerProps;
+export type { DividerProps };
+export default Divider;

package/dist/types/divider/src/styles.d.ts

@@ -0,0 +1 @@
+export declare const useDividerClass: (args?: any) => string;

package/dist/types/divider/stories/divider-section.stories.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { DividerProps } from '../src';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, Omit<import("../src/divider-section").DividerSectionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+export declare const Template: {
+    (args: React.ComponentProps<DividerProps['Section']>): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};

package/dist/types/divider/stories/divider.stories.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { DividerProps } from '../src/divider';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, Omit<DividerProps, "ref"> & React.RefAttributes<HTMLHRElement>>;
+export default _default;
+export declare const Template: {
+    (args: DividerProps): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};

package/dist/types/filter/index.d.ts

@@ -0,0 +1,2 @@
+export * from './src';
+export type * from './src';

package/dist/types/filter/src/filter-item.d.ts

@@ -0,0 +1,7 @@
+import { CheckboxProps } from '@sk-web-gui/forms';
+import { DefaultProps } from '@sk-web-gui/utils';
+import React from 'react';
+export interface FilterItemProps extends DefaultProps, React.ComponentProps<CheckboxProps['Component']> {
+}
+export declare const FilterItem: React.ForwardRefExoticComponent<Omit<FilterItemProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default FilterItem;

package/dist/types/filter/src/filter-label.d.ts

@@ -0,0 +1,7 @@
+import { DefaultProps } from '@sk-web-gui/utils';
+import React from 'react';
+export interface FilterLabelProps extends DefaultProps, Omit<React.ComponentPropsWithRef<'legend'>, 'color' | 'children' | 'onClick'> {
+    children: JSX.Element | string;
+}
+export declare const FilterLabel: React.ForwardRefExoticComponent<Omit<FilterLabelProps, "ref"> & React.RefAttributes<HTMLLegendElement>>;
+export default FilterLabel;

package/dist/types/filter/src/filter.d.ts

@@ -0,0 +1,6 @@
+import { DefaultProps } from '@sk-web-gui/utils';
+import React from 'react';
+export interface FilterRootProps extends DefaultProps, React.ComponentPropsWithRef<'fieldset'> {
+}
+export declare const FilterRoot: React.ForwardRefExoticComponent<Omit<FilterRootProps, "ref"> & React.RefAttributes<HTMLFieldSetElement>>;
+export default FilterRoot;

package/dist/types/filter/src/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { FilterRootProps, FilterRoot } from './filter';
+import { FilterItem } from './filter-item';
+import { FilterLabel } from './filter-label';
+interface FilterProps extends React.ForwardRefExoticComponent<FilterRootProps> {
+    Component: typeof FilterRoot;
+    Label: typeof FilterLabel;
+    Item: typeof FilterItem;
+}
+export declare const Filter: FilterProps;
+export type { FilterProps };
+export default Filter;

package/dist/types/filter/stories/filter.stories.d.ts

@@ -0,0 +1,7 @@
+import { FilterProps } from '../src';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("@storybook/types").Args>;
+export default _default;
+export declare const Template: {
+    (props: FilterProps): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};

package/dist/types/forms/index.d.ts

@@ -0,0 +1,2 @@
+export * from './src';
+export type * from './src';

package/dist/types/forms/src/checkbox/checkbox-group.d.ts

@@ -0,0 +1,46 @@
+import { DefaultProps } from '@sk-web-gui/utils';
+import React from 'react';
+import { CheckboxItemProps } from './checkbox';
+export interface CheckboxGroupProps extends DefaultProps {
+    /**
+     * The id of the checkbox group.
+     */
+    id?: CheckboxItemProps['id'];
+    /**
+     * The name of the checkbox group. This prop is passed to each checbox
+     */
+    name?: CheckboxItemProps['name'];
+    /**
+     * The content of the checkbox group. Must be the `Checkbox` component
+     */
+    children?: React.ReactNode;
+    /**
+     * The initial value of the checkbox group
+     */
+    defaultValue?: Array<CheckboxItemProps['value']>;
+    /**
+     * The value of the checkbox group
+     */
+    value?: Array<CheckboxItemProps['value']>;
+    /**
+     * The callback fired when any children Checkbox is checked or unchecked
+     */
+    onChange?: (value: Array<CheckboxItemProps['value']>) => void;
+    /**
+     * If `true`, the checkboxes will aligned horizontally.
+     * @default column
+     */
+    direction?: 'row' | 'column';
+    size?: CheckboxItemProps['size'];
+    color?: CheckboxItemProps['color'];
+}
+interface UseCheckboxGroupData {
+    handleChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    size?: CheckboxItemProps['size'];
+    color?: CheckboxItemProps['color'];
+    name?: CheckboxItemProps['name'];
+    value?: Array<CheckboxItemProps['value']>;
+}
+export declare const useCheckboxGroup: () => UseCheckboxGroupData;
+export declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLUListElement>>;
+export {};

package/dist/types/forms/src/checkbox/checkbox.d.ts

@@ -0,0 +1,39 @@
+import { DefaultProps } from '@sk-web-gui/utils';
+import React from 'react';
+export interface CheckboxItemProps<T = HTMLInputElement> extends DefaultProps, Omit<React.ComponentPropsWithRef<'input'>, 'size'> {
+    invalid?: boolean;
+    readOnly?: React.InputHTMLAttributes<T>['readOnly'];
+    indeterminate?: boolean;
+    /**
+     * If true, the checkbox will be initially checked.
+     */
+    defaultChecked?: boolean;
+    /**
+     * If true, the checkbox will be checked.
+     * You'll need to pass `onChange` to update it's value (since it's now controlled)
+     */
+    checked?: boolean;
+    /** Set the checkbox color
+     * @default primary
+     */
+    color?: string;
+    /** Size of the checkbox
+     * @default md
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * The children is the label to be displayed to the right of the checkbox.
+     */
+    children?: React.ReactNode;
+    /**
+     * The callback invoked when the checked state of the `Checkbox` changes..
+     */
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Position the label text (children) left or right of the checkbox. Defaults to right.
+     * @default right
+     */
+    labelPosition?: 'left' | 'right';
+}
+export declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxItemProps<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default Checkbox;

package/dist/types/forms/src/checkbox/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CheckboxItemProps, Checkbox as InternalCheckbox } from './checkbox';
+import { CheckboxGroup } from './checkbox-group';
+interface CheckboxProps extends React.ForwardRefExoticComponent<CheckboxItemProps> {
+    Component: typeof InternalCheckbox;
+    Group: typeof CheckboxGroup;
+}
+export declare const Checkbox: CheckboxProps;
+export type { CheckboxProps };
+export default Checkbox;

package/dist/types/forms/src/checkbox/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const useCheckboxLabelClass: (args?: any) => string;
+export declare const useCheckboxClass: (args?: any) => string;

package/dist/types/forms/src/combobox/combobox-context.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+export interface UseComboboxProps {
+    multiple?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * @default primary
+     */
+    variant?: 'primary' | 'tertiary';
+    /**
+     * Automatic filter options by value and label (children)
+     * @default true
+     */
+    autofilter?: boolean;
+}
+interface UseComboboxData extends UseComboboxProps {
+    active: number;
+    setActive: React.Dispatch<React.SetStateAction<number>>;
+    total: number;
+    next: () => void;
+    prev: () => void;
+    setTotal: (total: number) => void;
+    select: (value: string) => void;
+    remove: (value: string) => void;
+    close: () => void;
+    addLabel: (label: string, value: string) => void;
+    labels: Record<string, string>;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    setValue: (value: string[]) => void;
+    getValue: () => string;
+    id: string;
+    listId: string;
+    name: string;
+    value: string[];
+    searchValue: string;
+    setSearchValue: React.Dispatch<React.SetStateAction<string>>;
+    focusInput: () => void;
+    inputRef: React.Ref<HTMLInputElement | null | undefined> | null;
+}
+export declare const ComboboxContext: React.Context<UseComboboxData>;
+export declare const useCombobox: () => UseComboboxData;
+export {};

package/dist/types/forms/src/combobox/combobox-input.d.ts

@@ -0,0 +1,44 @@
+import { CustomOnChangeEvent } from '@sk-web-gui/utils';
+import React from 'react';
+import { UseComboboxProps } from './combobox-context';
+interface InputCompProps extends React.InputHTMLAttributes<HTMLInputElement> {
+}
+export interface ComboboxInputProps extends UseComboboxProps, Omit<React.ComponentPropsWithRef<'input'>, 'size' | 'onChange' | 'onSelect'> {
+    /**
+     * ChangeEvent list
+     */
+    onChange?: (event: CustomOnChangeEvent) => void;
+    /**
+     * ChangeEvent list
+     */
+    onSelect?: (event: CustomOnChangeEvent) => void;
+    /**
+     * ChangeEvent list
+     */
+    onChangeSearch?: (event: CustomOnChangeEvent<string>) => void;
+    /**
+     * Selected value
+     */
+    value?: string | string[];
+    /**
+     * Sets initial value
+     */
+    defaultValue?: string | string[];
+    /**
+     * Search input value
+     */
+    searchValue?: string;
+    /**
+     * Placeholder when search is active
+     */
+    searchPlaceholder?: string;
+    /**
+     * @default primary
+     */
+    variant?: 'primary' | 'tertiary';
+    disabled?: boolean;
+    invalid?: boolean;
+    InputComp?: React.ReactElement<InputCompProps>;
+}
+export declare const ComboboxInput: React.ForwardRefExoticComponent<Omit<ComboboxInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default ComboboxInput;

package/dist/types/forms/src/combobox/combobox-list.d.ts

@@ -0,0 +1,8 @@
+import { DefaultProps } from '@sk-web-gui/utils';
+import React from 'react';
+export interface ComboboxListProps extends DefaultProps, React.ComponentPropsWithRef<'fieldset'> {
+    multiple?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    value?: string | string[];
+}
+export declare const ComboboxList: React.ForwardRefExoticComponent<Omit<ComboboxListProps, "ref"> & React.RefAttributes<HTMLFieldSetElement>>;

package/dist/types/forms/src/combobox/combobox-option.d.ts

@@ -0,0 +1,11 @@
+import { DefaultProps } from '@sk-web-gui/utils';
+import React from 'react';
+export interface ComboboxOptionProps extends DefaultProps, Omit<React.ComponentPropsWithRef<'input'>, 'onClick'> {
+    value: string;
+    checked?: boolean;
+    children: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    index?: number;
+}
+export declare const ComboboxOption: React.ForwardRefExoticComponent<Omit<ComboboxOptionProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/types/forms/src/combobox/combobox.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { UseComboboxProps } from './combobox-context';
+export interface ComboboxBaseProps extends UseComboboxProps, Omit<React.ComponentPropsWithRef<'input'>, 'size'> {
+}
+export declare const ComboboxBase: React.ForwardRefExoticComponent<Omit<ComboboxBaseProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default ComboboxBase;

package/dist/types/forms/src/combobox/index.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { ComboboxBase, ComboboxBaseProps } from './combobox';
+import { ComboboxInput } from './combobox-input';
+import { ComboboxList } from './combobox-list';
+import { ComboboxOption } from './combobox-option';
+interface ComboboxProps extends React.ForwardRefExoticComponent<ComboboxBaseProps> {
+    Component: typeof ComboboxBase;
+    Input: typeof ComboboxInput;
+    List: typeof ComboboxList;
+    Option: typeof ComboboxOption;
+}
+declare const Combobox: ComboboxProps;
+export { Combobox };
+export type { ComboboxProps };
+export default Combobox;

package/dist/types/forms/src/combobox/styles.d.ts

@@ -0,0 +1 @@
+export declare const useComboboxStyles: (args?: any) => string;

package/dist/types/forms/src/date-picker/date-picker.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { InputProps } from '../input/input';
+export interface DatePickerProps extends Omit<InputProps, 'type' | 'as'> {
+    type?: 'date' | 'time' | 'datetime-local';
+}
+export declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default DatePicker;

package/dist/types/forms/src/date-picker/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { DatePicker, DatePickerProps } from './date-picker';
+export { DatePicker };
+export type { DatePickerProps };
+declare const _default: {
+    DatePicker: import("react").ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+};
+export default _default;