@weing-dev/ui-kit-primitive 0.0.1 → 0.0.2

package/dist/components/Form/Dropdown/Dropdown.colors.d.ts

@@ -0,0 +1,114 @@
+declare const useDropdownColors: () => {
+    outlined: {
+        inactive: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+            iconColor: string;
+        };
+        focused: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+            iconColor: string;
+        };
+        selected: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+            iconColor: string;
+        };
+        disabled: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+            iconColor: string;
+        };
+        error: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+            iconColor: string;
+        };
+    };
+    contained: {
+        inactive: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+            iconColor: string;
+        };
+        focused: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+            iconColor: string;
+        };
+        selected: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+            iconColor: string;
+        };
+        disabled: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+            iconColor: string;
+        };
+        error: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+            iconColor: string;
+        };
+    };
+    text: {
+        inactive: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+            iconColor: string;
+        };
+        focused: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+            iconColor: string;
+        };
+        selected: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+            iconColor: string;
+        };
+        disabled: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+            iconColor: string;
+        };
+        error: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+            iconColor: string;
+        };
+    };
+};
+export default useDropdownColors;

package/dist/components/Form/Dropdown/Dropdown.context.d.ts

@@ -0,0 +1,47 @@
+import { default as React } from 'react';
+type DropdownContextType = {
+    /** value,  */
+    value: string | string[];
+    /** searchable */
+    searchable?: boolean;
+    /** placeholder */
+    placeholder?: string;
+    /** searchText */
+    searchText?: string;
+    /** open */
+    open?: boolean;
+    /** options */
+    options?: {
+        value: string;
+        label: string;
+    }[];
+    /** id */
+    id?: string;
+    /** disabled */
+    disabled?: boolean;
+    /** error */
+    error?: boolean;
+    /** accentType */
+    accentType?: "in" | "out" | "all";
+    /** referenceState */
+    referenceState?: [
+        HTMLElement | null,
+        React.Dispatch<React.SetStateAction<HTMLElement | null>>
+    ];
+    /** popperState */
+    popperState?: [
+        HTMLUListElement | null,
+        React.Dispatch<React.SetStateAction<HTMLUListElement | null>>
+    ];
+    /** onChange */
+    onChange: (value: string | string[]) => void;
+    /** handleTriggerClick */
+    handleTriggerClick?: () => void;
+};
+export declare const initialState: DropdownContextType;
+export declare const DropdownContext: React.Context<DropdownContextType>;
+export type DropdownProviderProps = React.PropsWithChildren<Partial<Omit<DropdownContextType, "open" | "referenceState" | "popperState">> & {
+    className?: string;
+    onSearchChange?: (searchText: string) => void;
+}>;
+export {};

package/dist/components/Form/Dropdown/Dropdown.d.ts

@@ -0,0 +1,59 @@
+import { default as React } from 'react';
+import { DropdownProviderProps } from './Dropdown.context';
+import { Icon } from '../../../components/Icon/Icon';
+type AsProps = {
+    isEmpty: boolean;
+    placeholder?: string;
+    selectedValue: string;
+    open?: boolean;
+    options?: {
+        value: string;
+        label: string;
+    }[];
+    variant?: "outlined" | "contained" | "text";
+    size?: "small" | "medium" | "large";
+    colorStyle: React.CSSProperties;
+    iconColorStyle: (position: "left" | "right") => React.CSSProperties;
+    handleTriggerClick?: () => void;
+};
+type TriggerProps = React.PropsWithChildren<{
+    as?: (props: AsProps) => React.ReactNode;
+    className?: string;
+    variant?: "outlined" | "contained" | "text";
+    size?: "small" | "medium" | "large";
+    leftIcon?: React.ComponentProps<typeof Icon> | null;
+    rightIcon?: React.ComponentProps<typeof Icon> | null;
+}>;
+declare const Trigger: (props: TriggerProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
+type MenuRenderProps = {
+    open: boolean;
+    id?: string;
+    variant?: "shadow" | "line";
+    size?: "small" | "medium";
+    handleTriggerClick?: () => void;
+};
+type MenuProps = {
+    className?: string;
+    variant?: "shadow" | "line";
+    size?: "small" | "medium";
+    children?: React.ReactNode | ((props: MenuRenderProps) => React.ReactNode);
+    boundaryPadding?: number;
+};
+declare const Menu: (props: MenuProps) => import("react/jsx-runtime").JSX.Element | null;
+type ItemProps = React.PropsWithChildren<{
+    className?: string;
+    value: string;
+    label?: string;
+    variant?: "shadow" | "line";
+    size?: "small" | "medium";
+}>;
+declare const Item: (props: ItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const Root: (props: DropdownProviderProps) => import("react/jsx-runtime").JSX.Element;
+interface IDropdown {
+    Trigger: typeof Trigger;
+    Menu: typeof Menu;
+    Item: typeof Item;
+    Root: typeof Root;
+}
+declare const _default: IDropdown;
+export default _default;

package/dist/components/Form/OTPInput/OTPInput.context.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+type OTPInputContextType = {
+    otp: string[];
+    inputRefs?: React.RefObject<HTMLInputElement[]>;
+    handleChange: (index: number, event: React.ChangeEvent<HTMLInputElement>) => void;
+    handleKeyDown: (index: number, event: React.KeyboardEvent<HTMLInputElement>) => void;
+};
+export declare const OTPInputContext: React.Context<OTPInputContextType>;
+export type OTPInputProviderProps = React.PropsWithChildren<{
+    length: number;
+    onChange: (otp: string) => void;
+    value?: string;
+    name?: string;
+}>;
+export declare const OTPInputProvider: (props: OTPInputProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Form/OTPInput/OTPInput.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { OTPInputProviderProps } from './OTPInput.context';
+interface InputProps {
+    index?: number;
+    className?: string;
+}
+type RootProps = OTPInputProviderProps & {
+    className?: string;
+    input?: React.ReactNode;
+};
+declare const _default: {
+    Root: (props: RootProps) => import("react/jsx-runtime").JSX.Element;
+    Input: ({ index, className }: InputProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default _default;

package/dist/components/Form/Radio/Radio.colors.d.ts

@@ -0,0 +1,33 @@
+declare const useRadioColors: () => {
+    selected: {
+        backgroundColor: string;
+        color: string;
+        borderColor: "#00a76f";
+        hover: {
+            backgroundColor: string;
+            color: string;
+            borderColor: "#007867";
+        };
+        disabled: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+        };
+    };
+    unselected: {
+        backgroundColor: string;
+        color: string;
+        borderColor: string;
+        hover: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+        };
+        disabled: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+        };
+    };
+};
+export default useRadioColors;

package/dist/components/Form/Radio/Radio.context.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+type InputStatus = "error" | "warning" | "success" | undefined;
+type RadioContextType = {
+    /** input value */
+    value?: string;
+    /** checked */
+    checked: boolean;
+    /** onChange */
+    onChange?: (...args: any) => void;
+    /** name */
+    name?: string;
+    /** Disabled */
+    disabled?: boolean;
+    /** readOnly */
+    readOnly?: boolean;
+    /** status */
+    status?: InputStatus;
+    /** ID */
+    id: string;
+};
+export declare const initialState: RadioContextType;
+export declare const RadioContext: React.Context<RadioContextType>;
+export type RadioProviderProps = React.PropsWithChildren<Partial<Omit<RadioContextType, "">>> & {
+    className?: string;
+};
+export {};

package/dist/components/Form/Radio/Radio.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+import { RadioProviderProps } from './Radio.context';
+import { default as HelperTextComponent } from '../../HelperText/HelperText';
+type AsProps = {
+    checked: boolean;
+    value?: string;
+    className?: string;
+    id?: string;
+};
+type TriggerProps = React.PropsWithChildren<{
+    as?: (props: AsProps) => React.ReactNode;
+    className?: string;
+    checkedClassName?: string;
+}>;
+declare const Trigger: (props: TriggerProps) => import("react/jsx-runtime").JSX.Element;
+declare const HelperText: (props: React.ComponentProps<typeof HelperTextComponent>) => import("react/jsx-runtime").JSX.Element;
+type LabelProps = React.PropsWithChildren<{
+    className?: string;
+    checkedColor?: string;
+}>;
+declare const Label: (props: LabelProps) => import("react/jsx-runtime").JSX.Element;
+declare const Root: (props: RadioProviderProps) => import("react/jsx-runtime").JSX.Element;
+interface IRadioInput {
+    Root: typeof Root;
+    Trigger: typeof Trigger;
+    Label: typeof Label;
+    HelperText: typeof HelperText;
+}
+declare const _default: IRadioInput;
+export default _default;

package/dist/components/Form/Switch/Switch.colors.d.ts

@@ -0,0 +1,33 @@
+declare const useSwitchColors: () => {
+    selected: {
+        backgroundColor: "#00a76f";
+        color: string;
+        borderColor: string;
+        hover: {
+            backgroundColor: "#007867";
+            color: string;
+            borderColor: string;
+        };
+        disabled: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+        };
+    };
+    unselected: {
+        backgroundColor: string;
+        color: string;
+        borderColor: string;
+        hover: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+        };
+        disabled: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+        };
+    };
+};
+export default useSwitchColors;

package/dist/components/Form/Switch/Switch.context.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+type SwitchStatus = "error" | "warning" | "success" | undefined;
+type SwitchContextType = {
+    /** input value */
+    value?: boolean;
+    /** onChange */
+    onChange?: (...args: any) => void;
+    /** name */
+    name?: string;
+    /** Disabled */
+    disabled?: boolean;
+    /** readOnly */
+    readOnly?: boolean;
+    /** status */
+    status?: SwitchStatus;
+    /** size */
+    size?: "small" | "medium" | "large";
+};
+export declare const SwitchContext: React.Context<SwitchContextType>;
+export type SwitchProviderProps = React.PropsWithChildren<Partial<Omit<SwitchContextType, "">>> & {
+    className?: string;
+};
+export declare const SwitchProvider: React.FC<SwitchProviderProps>;
+export {};

package/dist/components/Form/Switch/Switch.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { SwitchProviderProps } from './Switch.context';
+type AsProps = {
+    checked?: boolean;
+    value?: boolean;
+    className?: string;
+    id?: string;
+};
+type TriggerProps = React.PropsWithChildren<{
+    as?: (props: AsProps) => React.ReactNode;
+    className?: string;
+    wrapperClassName?: string;
+    bulletClassName?: string;
+}>;
+declare const Trigger: (props: TriggerProps) => import("react/jsx-runtime").JSX.Element;
+type LabelProps = React.PropsWithChildren<{
+    className?: string;
+    checkedColor?: string;
+}>;
+declare const Label: (props: LabelProps) => import("react/jsx-runtime").JSX.Element;
+declare const Root: (props: SwitchProviderProps) => import("react/jsx-runtime").JSX.Element;
+interface ISwitch {
+    Root: typeof Root;
+    Label: typeof Label;
+    Trigger: typeof Trigger;
+}
+declare const _default: ISwitch;
+export default _default;

package/dist/components/Form/TextArea/TextArea.colors.d.ts

@@ -0,0 +1,67 @@
+declare const useTextAreaColors: () => {
+    outlined: {
+        inactive: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+        };
+        focused: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+        };
+        readOnly: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+        };
+        disabled: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+        };
+        error: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+        };
+    };
+    contained: {
+        inactive: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+        };
+        focused: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+        };
+        readOnly: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+        };
+        disabled: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+        };
+        error: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+        };
+    };
+};
+export default useTextAreaColors;

package/dist/components/Form/TextArea/TextArea.context.d.ts

@@ -0,0 +1,45 @@
+import { default as React } from 'react';
+type Variant = "contained" | "outlined";
+type InputStatus = "error" | "warning" | "success" | undefined;
+type TextAreaContextType = {
+    /** value */
+    value: string;
+    /** onChange */
+    onChange: (...args: any) => void;
+    /** placeholder */
+    placeholder: string;
+    /** rows */
+    rows: number;
+    /** disabled */
+    disabled: boolean;
+    /** variant */
+    variant: Variant;
+    /** readOnly */
+    readOnly: boolean;
+    /** name */
+    name: string;
+    /** focused */
+    focused: boolean;
+    /** onFocus */
+    onFocus?: (...args: any) => void;
+    /** onBlur */
+    onBlur?: (...args: any) => void;
+    /** status */
+    status?: InputStatus;
+    /** focused color */
+    focusedColor?: string;
+    /** input Ref */
+    _inputRef?: React.RefObject<HTMLTextAreaElement | null>;
+    /** maxLength */
+    maxLength?: number;
+    /** maxRow */
+    maxRows?: number;
+    /** accentType */
+    accentType?: "in" | "out" | "all";
+};
+export declare const TextAreaContext: React.Context<TextAreaContextType>;
+export type TextAreaProviderProps = React.PropsWithChildren<Partial<TextAreaContextType>> & {
+    className?: string;
+};
+export declare const TextAreaProvider: React.FC<TextAreaProviderProps>;
+export {};

package/dist/components/Form/TextArea/TextArea.d.ts

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+import { default as HelperTextComponent } from '../../HelperText/HelperText';
+import { TextAreaProviderProps } from './TextArea.context';
+type TextCountProps = React.PropsWithChildren<{
+    className?: string;
+}>;
+declare const TextCount: (props: TextCountProps) => import("react/jsx-runtime").JSX.Element;
+type EraseProps = React.PropsWithChildren<{
+    className?: string;
+}>;
+declare const Erase: (props: EraseProps) => import("react/jsx-runtime").JSX.Element;
+declare const HelperText: (props: React.ComponentProps<typeof HelperTextComponent>) => import("react/jsx-runtime").JSX.Element;
+type InputProps = React.PropsWithChildren<React.HTMLProps<HTMLTextAreaElement>> & {
+    wrapperClassName?: string;
+    placeholderColor?: string;
+    focusedColor?: string;
+    containedBackgroundColor?: string;
+    disabledColor?: string;
+    maxRows?: number;
+};
+declare const Input: (props: InputProps) => import("react/jsx-runtime").JSX.Element;
+type LabelProps = React.PropsWithChildren<{
+    className?: string;
+    focusedColor?: string;
+}>;
+declare const Label: (props: LabelProps) => import("react/jsx-runtime").JSX.Element;
+declare const Root: (props: TextAreaProviderProps) => import("react/jsx-runtime").JSX.Element;
+interface ITextArea {
+    Root: typeof Root;
+    Label: typeof Label;
+    HelperText: typeof HelperText;
+    Erase: typeof Erase;
+    Input: typeof Input;
+    TextCount: typeof TextCount;
+}
+declare const _default: ITextArea;
+export default _default;

package/dist/components/Form/TextInput/TextInput.colors.d.ts

@@ -0,0 +1,67 @@
+declare const useTextInputColors: () => {
+    outlined: {
+        inactive: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+        };
+        focused: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+        };
+        readOnly: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+        };
+        disabled: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+        };
+        error: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+        };
+    };
+    contained: {
+        inactive: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+        };
+        focused: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+        };
+        readOnly: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+        };
+        disabled: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+        };
+        error: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+        };
+    };
+};
+export default useTextInputColors;