@sk-web-gui/core 0.1.37 → 0.1.38

package/dist/types/table/stories/zebratable.stories.d.ts

@@ -0,0 +1,69 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react';
+import { ZebraTableProps } from '../src/zebratable';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Template: {
+    (args: ZebraTableProps): JSX.Element;
+    argTypes: {
+        captionTitle: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: string;
+            defaultValue: string;
+        };
+        captionBody: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: string;
+            defaultValue: string;
+        };
+        summary: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: string;
+            defaultValue: string;
+        };
+        tableSortable: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: string;
+            defaultValue: string;
+        };
+    };
+    story: {
+        name: string;
+    };
+};

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

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

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

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

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

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

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

@@ -0,0 +1,13 @@
+import { DefaultProps } from '@sk-web-gui/theme';
+import * as React from 'react';
+export interface TagProps extends DefaultProps {
+    /** Controls tag appearance */
+    variant?: 'outline' | 'solid' | 'light';
+    href?: string;
+    useDeleteButton?: boolean;
+    deleteAriaLabel?: string;
+    size?: 'sm' | 'md' | 'lg';
+    deleteCallback?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    children?: React.ReactNode;
+}
+export declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<React.LegacyRef<HTMLElement>>>;

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

@@ -0,0 +1,86 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react';
+import { TagProps } from '../src';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Template: {
+    ({ ...args }: TagProps): JSX.Element;
+    argTypes: {
+        variant: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            options: string[];
+            control: string;
+            defaultValue: string;
+        };
+        size: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            options: string[];
+            control: string;
+            defaultValue: string;
+        };
+        useDeleteButton: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            options: boolean[];
+            control: string;
+            defaultValue: boolean;
+        };
+        deleteAriaLabel: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: string;
+            defaultValue: string;
+        };
+        href: {
+            type: {
+                name: string;
+                required: boolean;
+            };
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: string;
+            defaultValue: string;
+        };
+    };
+};
+export declare const Outline: () => JSX.Element;
+export declare const Solid: () => JSX.Element;
+export declare const Light: () => JSX.Element;

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

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

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

@@ -0,0 +1,272 @@
+export declare const _colors: {
+    black: {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+    };
+    gray: {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+    };
+    'gray-light': {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+    };
+    'gray-lighter': {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+    };
+    'gray-stroke': {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+    };
+    'gray-middle': {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+    };
+    white: {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+    };
+    vattjom: {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+    };
+    gronsta: {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+    };
+    bjornstigen: {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+    };
+    juniskar: {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+    };
+    svartvik: {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+        '50': string;
+        '100': string;
+        '200': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '700': string;
+        '800': string;
+        '900': string;
+    };
+    red: {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+    };
+};
+export declare const colors: {
+    primary: {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    secondary: {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    neutral: {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    hover: {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+    };
+    background: {
+        one: string;
+        two: string;
+        three: string;
+    };
+    heading: {
+        DEFAULT: string;
+        two: string;
+        three: string;
+    };
+    body: {
+        DEFAULT: string;
+        two: string;
+    };
+    info: {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+    };
+    success: {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+    };
+    warning: {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+    };
+    error: {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+    };
+    black: {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+    };
+    gray: {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+    };
+    'gray-light': {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+    };
+    'gray-lighter': {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+    };
+    'gray-stroke': {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+    };
+    'gray-middle': {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+    };
+    white: {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+    };
+    vattjom: {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+    };
+    gronsta: {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+    };
+    bjornstigen: {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+    };
+    juniskar: {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+    };
+    svartvik: {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+        '50': string;
+        '100': string;
+        '200': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '700': string;
+        '800': string;
+        '900': string;
+    };
+    red: {
+        DEFAULT: string;
+        dark: string;
+        light: string;
+        active: string;
+    };
+};

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 declare 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,10 @@
+import { Dict } from '@sk-web-gui/utils';
+declare const tokens: readonly ["colors", "cursor", "rounded"];
+export declare 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): {
+    [x: string]: any;
+};
+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,16 @@
+import { WithCSSVar, Dict } from '@sk-web-gui/utils';
+import * as React from 'react';
+import { GuiTheme, GuiThemeOverride } from './types';
+declare type DictGuiTheme = Dict;
+export declare const GuiContext: React.Context<{
+    theme: WithCSSVar<DictGuiTheme>;
+} | undefined>;
+export interface GuiProviderProps {
+    children: React.ReactNode;
+    theme?: GuiTheme;
+    colorScheme?: string;
+}
+export declare function GuiProvider({ theme, colorScheme, children }: GuiProviderProps): JSX.Element;
+export declare function useGui<T extends object = Dict>(): WithCSSVar<T>;
+export declare function extendTheme(themeOverride: GuiThemeOverride): GuiTheme;
+export {};

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

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

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

@@ -0,0 +1,56 @@
+import { DeepPartial } from '@sk-web-gui/utils';
+export declare 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;
+}
+export interface Color {
+    DEFAULT: string;
+    light: string;
+    dark: string;
+    active: string;
+}
+export declare 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: Color;
+            warning: Color;
+            info: Color;
+        };
+        primary: Color;
+        secondary: Color;
+        neutral: ColorHues;
+    } & Colors;
+}
+export interface GuiTheme {
+    readonly cursor: 'default' | 'pointer';
+    readonly rounded: string;
+    readonly colorSchemes: Record<string, ColorScheme>;
+    readonly config: Record<string, unknown>;
+}
+export interface DefaultProps {
+    className?: string;
+}
+export declare type GuiThemeOverride = DeepPartial<GuiTheme>;

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 @@
+export * from './src';

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

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

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/theme';
+import * as 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 declare type useToastOptions = IToast & RenderOption;
+export declare function createToast(Comp: React.ElementType): () => ({ position, duration, render, ...rest }: useToastOptions) => any;
+export {};

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

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

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

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