@mexi/uikit 0.0.1

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

@@ -0,0 +1,145 @@
+/// <reference types="react" />
+export declare type ColumnType<T> = {
+    name: string;
+    label?: string;
+    hidden?: boolean;
+    sort?: ((a: RowType<T>, b: RowType<T>) => number) | undefined;
+    render?: ({ value, row }: {
+        value: any;
+        row: T;
+    }) => React.ReactNode;
+    headerRender?: HeaderRenderType;
+};
+export declare type ColumnStateType<T> = {
+    name: string;
+    label: string;
+    hidden: boolean;
+    sort?: ((a: RowType<T>, b: RowType<T>) => number) | undefined;
+    sorted: {
+        on: boolean;
+        asc?: boolean;
+    };
+    headerRender?: HeaderRenderType;
+};
+export declare type HeaderRenderType = ({ label }: {
+    label: React.ReactNode;
+}) => React.ReactNode;
+export declare type HeaderType<T> = {
+    name: string;
+    label?: string;
+    hidden?: boolean;
+    sorted: {
+        on: boolean;
+        asc?: boolean;
+    };
+    sort?: ((a: RowType<T>, b: RowType<T>) => number) | undefined;
+    render: () => React.ReactNode;
+};
+export declare type DataType = {
+    [key: string]: any;
+};
+export declare type ColumnByNamesType<T> = {
+    [key: string]: ColumnType<T>;
+};
+export declare type RenderFunctionType<T> = ({ value, row }: RenderFunctionArgsType<T>) => React.ReactNode | undefined;
+declare type RenderFunctionArgsType<T> = {
+    value: any;
+    row: T;
+};
+export declare type ColumnByNameType<T> = Omit<Required<ColumnType<T>>, "name" | "sort">;
+export interface RowType<T extends DataType> {
+    id: number;
+    cells: CellType[];
+    hidden?: boolean;
+    selected?: boolean;
+    original: T;
+}
+export declare type CellType = {
+    value: any;
+    render: () => React.ReactNode;
+};
+export interface UseTableTypeParams<T extends DataType> {
+    columns: ColumnType<T>[];
+    data: T[];
+    options?: {
+        sortable?: boolean;
+        selectable?: boolean;
+        filter?: (row: RowType<T>[]) => RowType<T>[];
+        filterOn?: boolean;
+    };
+}
+export interface UseTablePropsType<T> {
+    columns: ColumnType<T>[];
+    data: T[];
+    options?: {
+        sortable?: boolean;
+        selectable?: boolean;
+        filter?: (row: RowType<T>[]) => RowType<T>[];
+    };
+}
+export interface UseTableOptionsType<T> {
+    sortable?: boolean;
+    selectable?: boolean;
+    pagination?: boolean;
+    sortColumn?: string;
+    filter?: (row: RowType<T>[]) => RowType<T>[];
+}
+export interface UseTableReturnType<T> {
+    headers: HeaderType<T>[];
+    originalRows: RowType<T>[];
+    rows: RowType<T>[];
+    selectedRows: RowType<T>[];
+    dispatch: React.Dispatch<TableAction<T>>;
+    toggleSort: (columnName: string, isAscOverride?: boolean) => void;
+    selectRow: (id: number) => void;
+    toggleAll: () => void;
+    setSearchString: (searchString: string) => void;
+    toggleAllState: boolean;
+    pagination: PaginatorType;
+}
+declare type PaginatorType = {
+    nextPage: () => void;
+    prevPage: () => void;
+    page: number;
+    perPage: number;
+    canNext: boolean;
+    canPrev: boolean;
+};
+export declare type TableState<T extends DataType> = {
+    columnsByName: ColumnByNamesType<T>;
+    columns: ColumnStateType<T>[];
+    rows: RowType<T>[];
+    originalRows: RowType<T>[];
+    selectedRows: RowType<T>[];
+    filterOn: boolean;
+    sortColumn: string | null | undefined;
+    toggleAllState: boolean;
+    pagination: PaginatorType;
+    paginationEnabled: boolean;
+};
+export declare type TableAction<T extends DataType> = {
+    type: "TOGGLE_SORT";
+    columnName: string;
+    isAscOverride?: boolean;
+} | {
+    type: "SELECT_ROW";
+    rowId: number;
+} | {
+    type: "GLOBAL_FILTER";
+    filter: (row: RowType<T>[]) => RowType<T>[];
+} | {
+    type: "SEARCH_STRING";
+    searchString: string;
+} | {
+    type: "GLOBAL_FILTER_OFF";
+} | {
+    type: "SET_ROWS";
+    data: RowType<T>[];
+} | {
+    type: "NEXT_PAGE";
+} | {
+    type: "PREV_PAGE";
+} | {
+    type: "TOGGLE_ALL";
+};
+export {};

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

@@ -0,0 +1,2 @@
+export declare const byTextAscending: <T>(getTextProperty: (object: T) => string) => (objectA: T, objectB: T) => number;
+export declare const byTextDescending: <T>(getTextProperty: (object: T) => string) => (objectA: T, objectB: T) => number;

package/dist/components/Tag/StyledTag.d.ts

@@ -0,0 +1,8 @@
+import { DefaultTheme } from "styled-components";
+import { TagProps } from "./types";
+interface ThemedProps extends TagProps {
+    theme: DefaultTheme;
+}
+export declare const StyledTag: import("styled-components").StyledComponent<"div", DefaultTheme, ThemedProps, never>;
+declare const _default: null;
+export default _default;

package/dist/components/Tag/Tag.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TagProps } from "./types";
+declare const Tag: React.FC<TagProps>;
+export default Tag;

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

@@ -0,0 +1,2 @@
+export { default as Tag } from "./Tag";
+export type { TagProps, Variant as TagVariant, Scale as TagScale } from "./types";

package/dist/components/Tag/theme.d.ts

@@ -0,0 +1,38 @@
+export declare const scaleVariants: {
+    md: {
+        height: string;
+        padding: string;
+        fontSize: string;
+    };
+    sm: {
+        height: string;
+        padding: string;
+        fontSize: string;
+    };
+};
+export declare const styleVariants: {
+    primary: {
+        backgroundColor: string;
+    };
+    secondary: {
+        backgroundColor: string;
+    };
+    success: {
+        backgroundColor: string;
+    };
+    textDisabled: {
+        backgroundColor: string;
+    };
+    textSubtle: {
+        backgroundColor: string;
+    };
+    binance: {
+        backgroundColor: string;
+    };
+    failure: {
+        backgroundColor: string;
+    };
+    warning: {
+        backgroundColor: string;
+    };
+};

package/dist/components/Tag/types.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from "react";
+import { SpaceProps, TypographyProps } from "styled-system";
+export declare const variants: {
+    readonly PRIMARY: "primary";
+    readonly SECONDARY: "secondary";
+    readonly SUCCESS: "success";
+    readonly TEXTDISABLED: "textDisabled";
+    readonly TEXTSUBTLE: "textSubtle";
+    readonly BINANCE: "binance";
+    readonly FAILURE: "failure";
+    readonly WARNING: "warning";
+};
+export declare const scales: {
+    readonly MD: "md";
+    readonly SM: "sm";
+};
+export declare type Scale = typeof scales[keyof typeof scales];
+export declare type Variant = typeof variants[keyof typeof variants];
+export interface TagProps extends SpaceProps, TypographyProps {
+    variant?: Variant;
+    scale?: Scale;
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+    outline?: boolean;
+    textTransform?: "uppercase" | "lowercase" | "capitalize";
+}

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,4 @@
+import { DefaultTheme } from "styled-components";
+import { TextProps } from "./types";
+declare const Text: import("styled-components").StyledComponent<"div", DefaultTheme, TextProps, never>;
+export default Text;

package/dist/components/Text/TooltipText.d.ts

@@ -0,0 +1,2 @@
+declare const TooltipText: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("./types").TextProps, never>;
+export default TooltipText;

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

@@ -0,0 +1,3 @@
+export { default as Text } from "./Text";
+export { default as TooltipText } from "./TooltipText";
+export type { TextProps } from "./types";

package/dist/components/Text/types.d.ts

@@ -0,0 +1,9 @@
+import { LayoutProps, SpaceProps, TypographyProps } from "styled-system";
+export interface TextProps extends SpaceProps, TypographyProps, LayoutProps {
+    color?: string;
+    fontSize?: string;
+    bold?: boolean;
+    small?: boolean;
+    ellipsis?: boolean;
+    textTransform?: "uppercase" | "lowercase" | "capitalize";
+}

package/dist/components/ThemeSwitcher/ThemeSwitcher.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface Props {
+    isDark: boolean;
+    toggleTheme: (isDark: boolean) => void;
+}
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;

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

@@ -0,0 +1,2 @@
+export { default as ThemeSwitcher } from "./ThemeSwitcher";
+export type { Props as ThemeSwitcherProps } from "./ThemeSwitcher";

package/dist/components/Timeline/InfoTooltip.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { BoxProps } from "../Box";
+declare type InfoTooltip = {
+    text: string;
+    iconColor?: string;
+} & BoxProps;
+declare const InfoTooltip: React.FC<InfoTooltip>;
+export default InfoTooltip;

package/dist/components/Timeline/Timeline.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TimelineProps } from "./types";
+declare const Timeline: React.FC<TimelineProps>;
+export default Timeline;

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

@@ -0,0 +1,2 @@
+export { default as Timeline } from "./Timeline";
+export type { EventStatus } from "./types";

package/dist/components/Timeline/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const TimelineContainer: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const TimelineEvent: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
+    $useDark: boolean;
+}, never>;

package/dist/components/Timeline/types.d.ts

@@ -0,0 +1,11 @@
+export declare type EventStatus = "past" | "live" | "upcoming";
+export declare type Event = {
+    status: EventStatus;
+    text: string;
+    altText?: string;
+    infoText?: string;
+};
+export declare type TimelineProps = {
+    events: Event[];
+    useDark?: boolean;
+};

package/dist/components/Toggle/StyledToggle.d.ts

@@ -0,0 +1,5 @@
+import { HandleProps, InputProps, StyleToggleProps } from "./types";
+export declare const Handle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, HandleProps, never>;
+export declare const Input: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, InputProps, never>;
+declare const StyledToggle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyleToggleProps, never>;
+export default StyledToggle;

package/dist/components/Toggle/Toggle.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ToggleProps } from "./types";
+declare const Toggle: React.FC<ToggleProps>;
+export default Toggle;

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

@@ -0,0 +1,2 @@
+export { default as Toggle } from "./Toggle";
+export type { ToggleProps, Scales as ToggleScales } from "./types";

package/dist/components/Toggle/theme.d.ts

@@ -0,0 +1,5 @@
+export declare type ToggleTheme = {
+    handleBackground: string;
+};
+export declare const light: ToggleTheme;
+export declare const dark: ToggleTheme;

package/dist/components/Toggle/types.d.ts

@@ -0,0 +1,38 @@
+import { InputHTMLAttributes, ReactNode } from "react";
+import { Colors } from "../../theme";
+export declare const scales: {
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+};
+export declare type Scales = typeof scales[keyof typeof scales];
+export interface ToggleProps extends InputHTMLAttributes<HTMLInputElement> {
+    scale?: Scales;
+    checked?: boolean;
+    checkedColor?: keyof Colors;
+    defaultColor?: keyof Colors;
+    startIcon?: (isActive?: boolean) => ReactNode;
+    endIcon?: (isActive?: boolean) => ReactNode;
+}
+export interface HandleProps {
+    scale: Scales;
+}
+export interface InputProps {
+    scale: Scales;
+}
+export interface StyleToggleProps {
+    $checked: boolean;
+    $checkedColor: keyof Colors;
+    $defaultColor: keyof Colors;
+    scale: Scales;
+}
+export declare const scaleKeys: {
+    readonly handleHeight: "handleHeight";
+    readonly handleWidth: "handleWidth";
+    readonly handleLeft: "handleLeft";
+    readonly handleTop: "handleTop";
+    readonly checkedLeft: "checkedLeft";
+    readonly toggleHeight: "toggleHeight";
+    readonly toggleWidth: "toggleWidth";
+};
+export declare type ScaleKeys = typeof scaleKeys[keyof typeof scaleKeys];

package/dist/components/Tooltip/theme.d.ts

@@ -0,0 +1,3 @@
+import { TooltipTheme } from "./types";
+export declare const light: TooltipTheme;
+export declare const dark: TooltipTheme;

package/dist/components/Tooltip/types.d.ts

@@ -0,0 +1,5 @@
+export declare type TooltipTheme = {
+    background: string;
+    text: string;
+    boxShadow: string;
+};

package/dist/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export { default as useMatchBreakpoints } from "./useMatchBreakpoints";
+export { default as useParticleBurst } from "./useParticleBurst";
+export { default as useKonamiCheatCode } from "./useKonamiCheatCode";
+export * from "./useTooltip";

package/dist/hooks/useKonamiCheatCode.d.ts

@@ -0,0 +1,2 @@
+declare const useKonamiCheatCode: (matchedCodeHandler: () => void) => void;
+export default useKonamiCheatCode;

package/dist/hooks/useMatchBreakpoints.d.ts

@@ -0,0 +1,10 @@
+declare type State = {
+    [key: string]: boolean;
+};
+declare type BreakpointChecks = {
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+} & State;
+declare const useMatchBreakpoints: () => BreakpointChecks;
+export default useMatchBreakpoints;

package/dist/hooks/useParticleBurst.d.ts

@@ -0,0 +1,20 @@
+declare type ParticleOptions = {
+    size?: number;
+    distance?: number;
+};
+declare type Options = {
+    imgSrc: string;
+    selector?: string;
+    numberOfParticles?: number;
+    debounceDuration?: number;
+    disableWhen?: () => boolean;
+    particleOptions?: ParticleOptions;
+};
+/**
+ * @see https://css-tricks.com/playing-with-particles-using-the-web-animations-api/
+ */
+declare const useParticleBurst: (options: Options) => {
+    initialize: () => void;
+    teardown: () => void;
+};
+export default useParticleBurst;

package/dist/hooks/useTooltip/StyledTooltip.d.ts

@@ -0,0 +1,2 @@
+export declare const Arrow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTooltip: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/hooks/useTooltip/index.d.ts

@@ -0,0 +1,3 @@
+export { default as useTooltip } from "./useTooltip";
+export type { TooltipRefs, TriggerType, TooltipOptions } from "./types";
+export type { Placement } from "@popperjs/core";

package/dist/hooks/useTooltip/types.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { Placement, Padding } from "@popperjs/core";
+export interface TooltipRefs {
+    targetRef: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+    tooltip: React.ReactNode;
+    tooltipVisible: boolean;
+}
+export interface TooltipOptions {
+    placement?: Placement;
+    trigger?: TriggerType;
+    arrowPadding?: Padding;
+    tooltipPadding?: Padding;
+    tooltipOffset?: [number, number];
+}
+export declare type TriggerType = "click" | "hover" | "focus";

package/dist/hooks/useTooltip/useTooltip.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TooltipOptions, TooltipRefs } from "./types";
+declare const useTooltip: (content: React.ReactNode, options: TooltipOptions) => TooltipRefs;
+export default useTooltip;