@sk-web-gui/core 3.4.0 → 3.4.2

package/dist/types/theme/src/create-memo-class.d.ts

@@ -0,0 +1 @@
+export declare function createMemoClass(func: (props: any) => string): (args?: any) => string;

package/dist/types/theme/src/create-theme-vars/calc.d.ts

@@ -0,0 +1,19 @@
+export type Operand = string | number | {
+    reference: string;
+};
+interface CalcChain {
+    add: (...operands: Array<Operand>) => CalcChain;
+    subtract: (...operands: Array<Operand>) => CalcChain;
+    multiply: (...operands: Array<Operand>) => CalcChain;
+    divide: (...operands: Array<Operand>) => CalcChain;
+    negate: () => CalcChain;
+    toString: () => string;
+}
+export declare const calc: ((x: Operand) => CalcChain) & {
+    add: (...operands: Array<Operand>) => string;
+    subtract: (...operands: Array<Operand>) => string;
+    multiply: (...operands: Array<Operand>) => string;
+    divide: (...operands: Array<Operand>) => string;
+    negate: (x: Operand) => string;
+};
+export {};

package/dist/types/theme/src/create-theme-vars/create-theme-vars.d.ts

@@ -0,0 +1,9 @@
+import { Dict } from '@sk-web-gui/utils';
+export interface CreateThemeVarsOptions {
+    cssVarPrefix?: string;
+}
+export interface ThemeVars {
+    cssVars: Dict;
+    cssMap: Dict;
+}
+export declare function createThemeVars(target: Dict, options: CreateThemeVarsOptions): ThemeVars;

package/dist/types/theme/src/create-theme-vars/css-var.d.ts

@@ -0,0 +1,7 @@
+export declare function addPrefix(value: string, prefix?: string): string;
+export declare function toVarReference(name: string, fallback?: string): string;
+export declare function toVarDefinition(value: string, prefix?: string): string;
+export declare function cssVar(name: string, fallback?: string, cssVarPrefix?: string): {
+    variable: string;
+    reference: string;
+};

package/dist/types/theme/src/create-theme-vars/index.d.ts

@@ -0,0 +1,4 @@
+export * from './calc';
+export * from './css-var';
+export * from './to-css-var';
+export type { ThemeScale } from './theme-tokens';

package/dist/types/theme/src/create-theme-vars/theme-tokens.d.ts

@@ -0,0 +1,8 @@
+import { Dict } from '@sk-web-gui/utils';
+declare const tokens: readonly ["colors", "cursor", "rounded", "fontSize", "lineHeight", "spacing", "screens", "radius"];
+export type ThemeScale = (typeof tokens)[number] | 'transition.duration' | 'transition.property' | 'transition.easing';
+export declare function extractTokens(theme: Dict): {
+    [x: string]: any;
+};
+export declare function omitVars(rawTheme: Dict): Omit<Dict, "__cssMap" | "__cssVars" | "__breakpoints">;
+export {};

package/dist/types/theme/src/create-theme-vars/to-css-var.d.ts

@@ -0,0 +1,2 @@
+import type { WithCSSVar, Dict } from '@sk-web-gui/utils';
+export declare function toCSSVar<T extends Dict>(rawTheme: T): WithCSSVar<T>;

package/dist/types/theme/src/default-theme.d.ts

@@ -0,0 +1,4 @@
+import { GuiTheme, ColorScheme } from './types';
+export declare const lightScheme: ColorScheme;
+export declare const darkScheme: ColorScheme;
+export declare const defaultTheme: GuiTheme;

package/dist/types/theme/src/gui-provider.d.ts

@@ -0,0 +1,48 @@
+import { Dict, WithCSSVar } from '@sk-web-gui/utils';
+import React from 'react';
+import { GuiTheme, GuiThemeOverride } from './types';
+export declare enum ColorSchemeMode {
+    Dark = "dark",
+    Light = "light",
+    System = "system"
+}
+export declare const GuiContext: React.Context<{
+    theme: WithCSSVar<Dict>;
+    /**
+     * The chosen colorScheme
+     */
+    colorScheme: ColorSchemeMode;
+    /**
+     * Set the colorScheme
+     */
+    setColorScheme: (scheme: ColorSchemeMode) => void;
+    /**
+     * Scheme that is used when set to "system"
+     */
+    preferredColorScheme: Exclude<ColorSchemeMode, ColorSchemeMode.System>;
+    units: {
+        base: number;
+        htmlBase: number;
+    };
+} | undefined>;
+export interface GuiProviderProps {
+    children: React.ReactNode;
+    theme?: GuiTheme;
+    /**
+     * @default system
+     */
+    colorScheme?: ColorSchemeMode;
+    /**
+     * Font size in px that the theme variables are based on
+     * @default 10
+     */
+    baseFontSize?: number;
+    /**
+     * Font base size in px that the site uses.
+     * @default 10
+     */
+    htmlFontSize?: number;
+}
+export declare function GuiProvider({ theme, colorScheme: _colorScheme, baseFontSize, htmlFontSize, children, }: GuiProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useGui<T extends object = Dict>(): WithCSSVar<T>;
+export declare function extendTheme(themeOverride: GuiThemeOverride): GuiTheme;

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

@@ -0,0 +1,14 @@
+export * from './gui-provider';
+export type * from './gui-provider';
+export * from './create-memo-class';
+export type * from './create-memo-class';
+export * from './create-theme-vars';
+export type * from './create-theme-vars';
+export * from './default-theme';
+export type * from './default-theme';
+export * from './colors';
+export type * from './colors';
+export * from './types';
+export type * from './types';
+export * from './units';
+export type * from './units';

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

@@ -0,0 +1,54 @@
+import { DeepPartial } from '@sk-web-gui/utils';
+export type RecursiveProperty<Nested = string | number> = RecursiveObject<Nested> | Nested;
+export interface RecursiveObject<Nested = string | number> {
+    [property: string]: RecursiveProperty<Nested>;
+}
+export interface ColorHues {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    lightest?: string;
+    darkest?: string;
+}
+export interface ThemeOption {
+    [key: string | number]: string | ThemeOption;
+}
+export type Colors = RecursiveObject<Record<string, Partial<ColorHues>> | string>;
+export interface ColorScheme {
+    id: string;
+    type: 'light' | 'dark';
+    colors: {
+        bg: {
+            base: string;
+            fill: string;
+        };
+        text: {
+            foreground: string;
+            muted: string;
+        };
+        severity?: {
+            error: ThemeOption;
+            warning: ThemeOption;
+            info: ThemeOption;
+        };
+    } & Colors;
+}
+export interface GuiTheme {
+    readonly cursor: 'default' | 'pointer';
+    readonly rounded: string;
+    readonly colorSchemes: Record<string, ColorScheme>;
+    readonly fontSize: ThemeOption;
+    readonly lineHeight: ThemeOption;
+    readonly spacing: ThemeOption;
+    readonly screens: ThemeOption;
+    readonly radius: ThemeOption;
+    readonly config: Record<string, unknown>;
+}
+export type GuiThemeOverride = DeepPartial<GuiTheme>;

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

@@ -0,0 +1,266 @@
+export declare const spacing: {
+    0: string;
+    '0.25': string;
+    '0.5': string;
+    '0.75': string;
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+    10: string;
+    11: string;
+    12: string;
+    13: string;
+    14: string;
+    15: string;
+    16: string;
+    17: string;
+    18: string;
+    19: string;
+    20: string;
+    22: string;
+    24: string;
+    26: string;
+    28: string;
+    30: string;
+    32: string;
+    33: string;
+    34: string;
+    36: string;
+    38: string;
+    40: string;
+    42: string;
+    43: string;
+    44: string;
+    46: string;
+    48: string;
+    49: string;
+    50: string;
+    52: string;
+    54: string;
+    56: string;
+    58: string;
+    60: string;
+    62: string;
+    64: string;
+    68: string;
+    72: string;
+    80: string;
+    100: string;
+};
+export declare const breakpoints: {
+    phone: {
+        DEFAULT: string;
+        min: string;
+        max: string;
+    };
+    'small-device': {
+        DEFAULT: string;
+        min: string;
+        max: string;
+    };
+    'medium-device': {
+        DEFAULT: string;
+        min: string;
+        max: string;
+    };
+    'large-device': {
+        DEFAULT: string;
+        min: string;
+        max: string;
+    };
+    desktop: {
+        DEFAULT: string;
+        min: string;
+        max: string;
+    };
+};
+export declare const screens: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    phone: string;
+    'phone-min': string;
+    'phone-max': string;
+    'small-device': string;
+    'small-device-min': string;
+    'small-device-max': string;
+    'medium-device': string;
+    'medium-device-min': string;
+    'medium-device-max': string;
+    'large-device': string;
+    'large-device-min': string;
+    'large-device-max': string;
+    desktop: string;
+    'desktop-min': string;
+    'desktop-max': string;
+};
+export declare const fontSizes: {
+    display: {
+        1: {
+            DEFAULT: string;
+            lg: string;
+            md: string;
+            sm: string;
+        };
+        2: {
+            DEFAULT: string;
+            lg: string;
+            md: string;
+            sm: string;
+        };
+        3: {
+            DEFAULT: string;
+            lg: string;
+            md: string;
+            sm: string;
+        };
+    };
+    h: {
+        1: {
+            DEFAULT: string;
+            lg: string;
+            md: string;
+            sm: string;
+        };
+        2: {
+            DEFAULT: string;
+            lg: string;
+            md: string;
+            sm: string;
+        };
+        3: {
+            DEFAULT: string;
+            lg: string;
+            md: string;
+            sm: string;
+        };
+        4: {
+            DEFAULT: string;
+            lg: string;
+            md: string;
+            sm: string;
+        };
+    };
+    label: {
+        large: string;
+        medium: string;
+        small: string;
+    };
+    input: {
+        large: string;
+        medium: string;
+        small: string;
+    };
+    logo: {
+        header: string;
+    };
+    lead: string;
+    base: string;
+    large: string;
+    small: string;
+};
+export declare const lineHeights: {
+    display: {
+        1: {
+            DEFAULT: string;
+            lg: string;
+            md: string;
+            sm: string;
+        };
+        2: {
+            DEFAULT: string;
+            lg: string;
+            md: string;
+            sm: string;
+        };
+        3: {
+            DEFAULT: string;
+            lg: string;
+            md: string;
+            sm: string;
+        };
+    };
+    h: {
+        1: {
+            DEFAULT: string;
+            lg: string;
+            md: string;
+            sm: string;
+        };
+        2: {
+            DEFAULT: string;
+            lg: string;
+            md: string;
+            sm: string;
+        };
+        3: {
+            DEFAULT: string;
+            lg: string;
+            md: string;
+            sm: string;
+        };
+        4: {
+            DEFAULT: string;
+            lg: string;
+            md: string;
+            sm: string;
+        };
+    };
+    label: {
+        large: string;
+        medium: string;
+        small: string;
+    };
+    input: {
+        large: string;
+        medium: string;
+        small: string;
+    };
+    logo: {
+        header: string;
+    };
+    lead: string;
+    base: string;
+    large: string;
+    small: string;
+};
+export declare const radius: {
+    circular: {
+        DEFAULT: string;
+        lg: string;
+        md: string;
+        sm: string;
+    };
+    button: {
+        DEFAULT: string;
+        lg: string;
+        md: string;
+        sm: string;
+    };
+    cards: {
+        DEFAULT: string;
+        lg: string;
+        md: string;
+        sm: string;
+    };
+    utility: {
+        DEFAULT: string;
+        lg: string;
+        md: string;
+        sm: string;
+    };
+    groups: {
+        DEFAULT: string;
+        lg: string;
+        md: string;
+        sm: string;
+    };
+};

package/dist/types/theme/src/use-safe-effect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from 'react';
+export declare const useSafeEffect: typeof useEffect;

package/dist/types/theme/src/utils.d.ts

@@ -0,0 +1 @@
+export declare const isBrowser: boolean;

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

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

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

@@ -0,0 +1,7 @@
+import { createToast, useToastOptions } from './toast';
+export { createToast };
+export type { useToastOptions };
+declare const _default: {
+    createToast: typeof createToast;
+};
+export default _default;

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

@@ -0,0 +1,62 @@
+import { Position } from '@sk-web-gui/toasted-notes';
+import { DefaultProps } from '@sk-web-gui/utils';
+import React from 'react';
+interface IToast extends DefaultProps {
+    /**
+     * The title of the toast.
+     */
+    title?: string;
+    /**
+     * If `true` adds a close button to the toast.
+     */
+    closeable?: boolean;
+    /**
+     * Callback function to close the toast.
+     */
+    onClose?: () => void;
+    /**
+     * Callback function to undo the toast.
+     */
+    onUndo?: () => void;
+    /**
+     * The description of the toast
+     */
+    description?: string;
+    /**
+     * The undo text of the toast
+     */
+    undoText?: string;
+    /**
+     * Duration before dismiss in milliseconds, or `null` to never dismiss.
+     */
+    duration?: number | null;
+    /**
+     * One of toasted-notes positions.
+     */
+    position?: keyof typeof Position;
+    /**
+     * The message of the toast
+     */
+    message?: string;
+    /**
+     * The status of the toast
+     */
+    status?: 'info' | 'success' | 'error' | 'warning';
+    /**
+     * Custom icon
+     */
+    icon?: React.ElementType;
+    /**
+     * Custom close icon
+     */
+    closeIcon?: React.ElementType;
+}
+interface RenderOption {
+    render?: (props: {
+        onClose: (id: string) => void;
+        id: string;
+    }) => React.ReactNode;
+}
+export type useToastOptions = IToast & RenderOption;
+export declare function createToast(Comp: React.ElementType): () => ({ position, duration, render, ...rest }: useToastOptions) => any;
+export default createToast;

package/dist/types/toasted-notes/index.d.ts

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

package/dist/types/toasted-notes/src/Alert.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface Props {
+    id: string;
+    title: React.ReactNode | string;
+    onClose: () => void;
+}
+declare const Alert: ({ id, title, onClose }: Props) => import("react/jsx-runtime").JSX.Element;
+export default Alert;

package/dist/types/toasted-notes/src/Message.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import POSITIONS from './Positions';
+interface MessageCallback {
+    id: string;
+    onClose: () => void;
+}
+export type MessageType = 'default' | 'success' | 'error';
+export type PositionsType = keyof typeof POSITIONS;
+export type MessageProp = React.ReactNode | ((callback: MessageCallback) => React.ReactNode) | string;
+export interface MessageOptions {
+    id: string;
+    duration: number | null;
+    type: MessageType;
+    onRequestRemove: () => void;
+    onRequestClose: () => void;
+    showing: boolean;
+    position: PositionsType;
+}
+interface Props extends MessageOptions {
+    message: MessageProp;
+    zIndex?: number;
+    requestClose?: boolean;
+    position: PositionsType;
+}
+export declare const Message: ({ id, message, position, onRequestRemove, requestClose, duration }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/toasted-notes/src/Positions.d.ts

@@ -0,0 +1,9 @@
+declare const POSITIONS: {
+    top: string;
+    'top-left': string;
+    'top-right': string;
+    bottom: string;
+    'bottom-left': string;
+    'bottom-right': string;
+};
+export default POSITIONS;

package/dist/types/toasted-notes/src/Toast.d.ts

@@ -0,0 +1,13 @@
+import { MessageOptionalOptions } from './ToastManager';
+import { MessageProp, PositionsType } from './Message';
+export declare class Toaster {
+    createNotification?: Function;
+    removeAll?: Function;
+    closeToast?: Function;
+    constructor();
+    closeAll: () => void;
+    bindNotify: (fn: Function, removeAll: Function, closeToast: Function) => void;
+    notify: (message: MessageProp, options?: MessageOptionalOptions) => any;
+    close: (id: number, position: PositionsType) => void;
+}
+export default Toaster;

package/dist/types/toasted-notes/src/ToastManager.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import { PositionsType, MessageType, MessageOptions, MessageProp } from './Message';
+interface Props {
+    notify: (fn: Function, closeAll: Function, close: Function) => void;
+}
+export interface MessageOptionalOptions {
+    type?: MessageType;
+    duration?: number | null;
+    position?: PositionsType;
+}
+interface ToastArgs extends MessageOptions {
+    message: MessageProp;
+}
+type State = {
+    top: Array<ToastArgs>;
+    'top-left': Array<ToastArgs>;
+    'top-right': Array<ToastArgs>;
+    'bottom-left': Array<ToastArgs>;
+    bottom: Array<ToastArgs>;
+    'bottom-right': Array<ToastArgs>;
+};
+export declare class ToastManager extends React.Component<Props, State> {
+    static idCounter: number;
+    state: State;
+    constructor(props: Props);
+    notify: (message: MessageProp, options: MessageOptionalOptions) => {
+        id: number;
+        position: "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    };
+    closeAll: () => void;
+    createToastState: (message: MessageProp, options: MessageOptionalOptions) => {
+        id: number;
+        message: MessageProp;
+        position: "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+        showing: boolean;
+        duration: number | null;
+        onRequestRemove: () => void;
+        type: MessageType | undefined;
+    };
+    closeToast: (id: string, position: PositionsType) => void;
+    removeToast: (id: string, position: PositionsType) => void;
+    getStyle: (position: PositionsType) => React.CSSProperties;
+    render(): import("react/jsx-runtime").JSX.Element[];
+}
+export default ToastManager;

package/dist/types/toasted-notes/src/index.d.ts

@@ -0,0 +1,4 @@
+import { Toaster } from './Toast';
+declare const toaster: Toaster;
+export { default as Position } from './Positions';
+export { toaster };

package/dist/types/toasted-notes/src/useTimeout.d.ts

@@ -0,0 +1,3 @@
+type Callback = () => void;
+export declare function useTimeout(callback: Callback, delay: number | null): void;
+export {};

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

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

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Tooltip, TooltipProps } from './tooltip';
+export { Tooltip };
+export type { TooltipProps };
+declare const _default: {
+    Tooltip: import("react").ForwardRefExoticComponent<TooltipProps & import("react").RefAttributes<HTMLSpanElement>>;
+};
+export default _default;

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

@@ -0,0 +1,14 @@
+import { DefaultProps } from '@sk-web-gui/utils';
+import React from 'react';
+interface ITooltipProps extends DefaultProps {
+    /** Select the position of the tooltip
+     * @default below
+     */
+    position?: 'above' | 'below' | 'right' | 'left';
+    /** React Node */
+    children?: React.ReactNode;
+}
+export interface TooltipProps extends React.HTMLAttributes<HTMLSpanElement>, ITooltipProps {
+}
+export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLSpanElement>>;
+export default Tooltip;