@useloops/design-system 1.4.528 → 1.4.530

package/dist/primitiveVariables-BbfFaPHq.d.ts

@@ -0,0 +1,75 @@
+type GenericSizeMap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
+declare const breakpoints: {
+    sm: number;
+    md: number;
+    lg: number;
+    lgNav: number;
+    xl: number;
+    xxl: number;
+};
+declare const space: {
+    0: number;
+    25: number;
+    50: number;
+    100: number;
+    150: number;
+    200: number;
+    300: number;
+    350: number;
+    400: number;
+    500: number;
+    600: number;
+    800: number;
+    1000: number;
+    2000: number;
+};
+declare const base: number;
+declare const margin: {
+    none: number;
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+    xxxl: number;
+};
+declare const padding: {
+    none: number;
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+declare const radius: {
+    none: number;
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    round: number;
+};
+declare const elevation: {
+    raised: string;
+    float: string;
+    overlay: string;
+    aiSummary: string;
+};
+declare const elevationFilter: {
+    raised: string;
+    float: string;
+    overlay: string;
+};
+declare const boxShadow: {
+    input: {
+        focus: string;
+    };
+};
+declare const easing: {
+    default: string;
+    input: string;
+};
+
+export { type GenericSizeMap as G, base as a, breakpoints as b, elevationFilter as c, boxShadow as d, elevation as e, easing as f, margin as m, padding as p, radius as r, space as s };

package/dist/theme.d.ts

@@ -0,0 +1,197 @@
+import * as _mui_material from '@mui/material';
+import { PaletteMode, Direction, Theme } from '@mui/material';
+import { C as ColorRange, a as ColorRangeAlpha } from './types-BFOuz_kj.js';
+import * as react from 'react';
+import { FunctionComponent, PropsWithChildren } from 'react';
+
+type ScreenSize = 'sm' | 'lg';
+interface CustomTheme {
+    palette: {
+        black: string;
+        white: string;
+        neutral: ColorRange;
+        neutralAlpha: ColorRangeAlpha;
+        purple: ColorRange;
+        red: ColorRange;
+        peach: ColorRange;
+        yellow: ColorRange;
+        blue: ColorRange;
+        green: ColorRange;
+        icon: {
+            primary: string;
+            secondary: string;
+            disabled: string;
+            primaryInverted: string;
+            secondaryInverted: string;
+            disabledInverted: string;
+            lockedWhite: string;
+            link: string;
+            linkHover: string;
+        };
+        interaction: {
+            none: string;
+            hover: string;
+            press: string;
+            hoverOnDark: string;
+            pressOnDark: string;
+            disabled: string;
+            disabledMuted: string;
+        };
+        stroke: {
+            default: string;
+            light: string;
+            focus: string;
+            disabled: string;
+        };
+        surface: {
+            default: string;
+            sunken: string;
+            raised: string;
+            float: string;
+            overlay: string;
+            scrim: string;
+            transparent: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            placeholder: string;
+            disabled: string;
+            link: string;
+            linkHover: string;
+            primaryInverted: string;
+            secondaryInverted: string;
+            placeholderInverted: string;
+            disabledInverted: string;
+            positive: string;
+            negative: string;
+            lockedWhite: string;
+        };
+        input: {
+            default: string;
+            disabled: string;
+        };
+        skeleton: {
+            default: string;
+        };
+        data: {
+            sentimentVeryPositive: string;
+            sentimentPositive: string;
+            sentimentNeutral: string;
+            sentimentNegative: string;
+            sentimentVeryNegative: string;
+        };
+        body: string;
+    };
+    margin: {
+        none: number;
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        xxl: number;
+        xxxl: number;
+    };
+    padding: {
+        none: number;
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+    };
+    radius: {
+        none: number;
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        round: number;
+    };
+    elevation: {
+        raised: string;
+        float: string;
+        overlay: string;
+        aiSummary: string;
+    };
+    elevationFilter: {
+        raised: string;
+        float: string;
+        overlay: string;
+    };
+    easing: {
+        default: string;
+        input: string;
+    };
+    boxShadow: {
+        input: {
+            focus: string;
+            handle: string;
+        };
+    };
+    shape: {
+        borderRadius: number;
+        hotspot: {
+            active: number;
+            default: number;
+        };
+    };
+    typography: {
+        headline: {
+            xxs: string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            xxl: string;
+            xxxl: string;
+        };
+        body: {
+            xxs: string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            xxl: string;
+            xxxl: string;
+        };
+    };
+}
+
+declare const customTheme: (mode: PaletteMode, size: ScreenSize, direction?: Direction) => Theme;
+
+interface ThemeCtx {
+    breakpoint: string;
+    custom: CustomTheme;
+    gridOverlayVisible: boolean;
+    mode: PaletteMode;
+    theme: Theme;
+    toggleGridOverlay: () => void;
+    toggleMode: (mode?: PaletteMode) => void;
+}
+declare const ThemeContext: react.Context<Nullable<ThemeCtx>>;
+
+declare const useThemeBuilder: (initialMode?: PaletteMode, initialScreenSize?: ScreenSize, initialDirection?: Direction) => {
+    breakpoint: "" | "sm" | "md" | "lg" | "xl";
+    custom: CustomTheme;
+    gridOverlayVisible: boolean;
+    mode: PaletteMode;
+    theme: _mui_material.Theme;
+    toggleGridOverlay: () => void;
+    toggleMode: (mode?: PaletteMode) => void;
+};
+declare const useTheme: () => ThemeCtx;
+
+interface Props extends PropsWithChildren {
+    mode?: PaletteMode;
+    screenSize?: ScreenSize;
+    direction?: Direction;
+    ignoreCacheProvider?: boolean;
+}
+declare const ThemeProvider: FunctionComponent<Props>;
+
+export { type CustomTheme, type ScreenSize, ThemeContext, type ThemeCtx, ThemeProvider, customTheme, useTheme, useThemeBuilder };

package/dist/theme.js

@@ -0,0 +1 @@
+"use strict";var e=require("./_chunks/theme.provider-CFQC74O-.js");require("react/jsx-runtime"),require("stylis"),require("@emotion/react"),require("@mui/material"),require("@mui/material/styles"),require("stylis-plugin-rtl"),require("react"),require("./_chunks/primitiveVariables-DOkvMbUd.js"),require("./_chunks/screen.hook-BWo6Lcm1.js"),require("./_chunks/semanticColor-D7luRDLB.js"),require("./_chunks/typography-Cx74j4k8.js"),require("./_chunks/types-BbAsZw_6.js"),require("./_chunks/typography.util-Cfj-ZgvS.js"),exports.ThemeContext=e.ThemeContext,exports.ThemeProvider=e.ThemeProvider,exports.customTheme=e.customTheme,exports.useTheme=e.useTheme,exports.useThemeBuilder=e.useThemeBuilder;

package/dist/types-BFOuz_kj.d.ts

@@ -0,0 +1,170 @@
+interface ColorRange {
+    [key: number]: string | undefined;
+    0: string;
+    50?: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    950?: string;
+    1000: string;
+    1100?: string;
+}
+interface ColorRangeAlpha {
+    0: string;
+    0.01: string;
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+}
+declare enum FontWeight {
+    DEFAULT = 400,
+    BOLD = 500
+}
+interface SemanticColor {
+    light: {
+        surface: {
+            sunken: string | undefined;
+            default: string | undefined;
+            raised: string | undefined;
+            float: string | undefined;
+            overlay: string | undefined;
+            scrim: string | undefined;
+            transparent: string | undefined;
+        };
+        interaction: {
+            none: string | undefined;
+            hover: string | undefined;
+            press: string | undefined;
+            hoverOnDark: string | undefined;
+            pressOnDark: string | undefined;
+            disabled: string | undefined;
+            disabledMuted: string | undefined;
+        };
+        stroke: {
+            default: string | undefined;
+            light: string | undefined;
+            focus: string | undefined;
+            disabled: string | undefined;
+        };
+        text: {
+            primary: string | undefined;
+            secondary: string | undefined;
+            placeholder: string | undefined;
+            disabled: string | undefined;
+            link: string | undefined;
+            linkHover: string | undefined;
+            primaryInverted: string | undefined;
+            secondaryInverted: string | undefined;
+            placeholderInverted: string | undefined;
+            disabledInverted: string | undefined;
+            positive: string | undefined;
+            negative: string | undefined;
+            lockedWhite: string | undefined;
+        };
+        icon: {
+            primary: string | undefined;
+            secondary: string | undefined;
+            disabled: string | undefined;
+            primaryInverted: string | undefined;
+            secondaryInverted: string | undefined;
+            disabledInverted: string | undefined;
+            positive: string | undefined;
+            negative: string | undefined;
+            lockedWhite: string | undefined;
+            link: string | undefined;
+            linkHover: string | undefined;
+        };
+        input: {
+            default: string | undefined;
+            disabled: string | undefined;
+        };
+        skeleton: {
+            default: string | undefined;
+        };
+        data: {
+            sentimentVeryPositive: string | undefined;
+            sentimentPositive: string | undefined;
+            sentimentNegative: string | undefined;
+            sentimentVeryNegative: string | undefined;
+            sentimentNeutral: string | undefined;
+        };
+    };
+    dark: {
+        surface: {
+            sunken: string | undefined;
+            default: string | undefined;
+            raised: string | undefined;
+            float: string | undefined;
+            overlay: string | undefined;
+            scrim: string | undefined;
+            transparent: string | undefined;
+        };
+        interaction: {
+            none: string | undefined;
+            hover: string | undefined;
+            press: string | undefined;
+            hoverOnDark: string | undefined;
+            pressOnDark: string | undefined;
+            disabled: string | undefined;
+            disabledMuted: string | undefined;
+        };
+        stroke: {
+            default: string | undefined;
+            light: string | undefined;
+            focus: string | undefined;
+            disabled: string | undefined;
+        };
+        text: {
+            primary: string | undefined;
+            secondary: string | undefined;
+            placeholder: string | undefined;
+            disabled: string | undefined;
+            link: string | undefined;
+            linkHover: string | undefined;
+            primaryInverted: string | undefined;
+            secondaryInverted: string | undefined;
+            placeholderInverted: string | undefined;
+            disabledInverted: string | undefined;
+            positive: string | undefined;
+            negative: string | undefined;
+            lockedWhite: string | undefined;
+        };
+        icon: {
+            primary: string | undefined;
+            secondary: string | undefined;
+            disabled: string | undefined;
+            primaryInverted: string | undefined;
+            secondaryInverted: string | undefined;
+            disabledInverted: string | undefined;
+            positive: string | undefined;
+            negative: string | undefined;
+            lockedWhite: string | undefined;
+            link: string | undefined;
+            linkHover: string | undefined;
+        };
+        input: {
+            default: string | undefined;
+            disabled: string | undefined;
+        };
+        skeleton: {
+            default: string | undefined;
+        };
+        data: {
+            sentimentVeryPositive: string | undefined;
+            sentimentPositive: string | undefined;
+            sentimentNegative: string | undefined;
+            sentimentVeryNegative: string | undefined;
+            sentimentNeutral: string | undefined;
+        };
+    };
+}
+
+export { type ColorRange as C, FontWeight as F, type SemanticColor as S, type ColorRangeAlpha as a };

package/dist/types-BcpWYszB.d.ts

@@ -0,0 +1,7 @@
+type StatusTextOutput = 'Draft' | 'In Progress' | 'Results Ready' | 'Unknown Status';
+interface TestStatusProps {
+    status: 'results-ready' | 'in-progress' | 'draft';
+    sizing?: 'md' | 'sm' | 'xs';
+}
+
+export type { StatusTextOutput as S, TestStatusProps as T };

package/dist/types-DV2de5BB.d.ts

@@ -0,0 +1,23 @@
+import { TextFieldProps } from './WebCore/TextField.js';
+
+type Adornment = any;
+type NumberFieldProps = Partial<TextFieldProps> & {
+    max?: number | undefined;
+    min?: number | undefined;
+    onChange?: (value: number | null) => void;
+    step?: number | undefined;
+    internalChange?: () => void;
+    value?: number | string | null;
+    defaultValue?: number | string | null;
+    inputRef?: React.Ref<HTMLInputElement>;
+    disabled?: boolean;
+    hideActionButtons?: boolean;
+    placeholder?: string;
+    startAdornment?: Adornment;
+    endAdornment?: Adornment;
+    slotProps?: {
+        input?: TextFieldProps;
+    };
+};
+
+export type { Adornment as A, NumberFieldProps as N };

package/dist/utils-BsTeH7ig.d.ts

@@ -0,0 +1,29 @@
+import { Theme } from '@mui/material';
+import * as react from 'react';
+import { MenuProps } from './WebCore/Menu.js';
+import { SurfaceProps } from './WebCore/Surface.js';
+
+interface TestKPICardProps extends Omit<SurfaceProps, 'variation'> {
+    colorScheme?: KpiIndicatorColor;
+    variation?: 'dimmed' | 'default';
+    active?: boolean;
+    title?: string;
+    description?: string;
+    loading?: boolean;
+    onShowMoreClick?: () => void;
+    menuItems?: MenuProps['menuItems'];
+}
+declare const TestKPICard: react.ForwardRefExoticComponent<Omit<TestKPICardProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+type KpiIndicatorColor = 'purple' | 'peach' | 'blue' | 'yellow' | 'green' | 'red';
+declare const mapKpiColorSchemeByInteger: (index: number) => TestKPICardProps["colorScheme"];
+declare const getKpiIndicatorColor: (theme: Theme) => {
+    purple: string;
+    peach: string;
+    blue: string;
+    yellow: string;
+    green: string;
+    red: string;
+};
+
+export { type KpiIndicatorColor as K, TestKPICard as T, type TestKPICardProps as a, getKpiIndicatorColor as g, mapKpiColorSchemeByInteger as m };

package/dist/utils.d.ts

@@ -0,0 +1,28 @@
+import { Breakpoint } from '@mui/material';
+
+type BreakpointOrNull = Breakpoint | null;
+declare const useBreakpoint: () => Breakpoint;
+
+declare function compareArrayMembers(arr1: string[], arr2: string[]): boolean;
+
+declare function isButton(element: HTMLElement): boolean;
+
+declare const useScreenSize: () => {
+    width: number | undefined;
+    height: number | undefined;
+};
+
+type ComboString = string;
+type ComboObject = {
+    key: string;
+    altKey?: boolean;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+    shiftKey?: boolean;
+};
+type ComboDefinition = ComboString | ComboObject;
+declare const useKeyCombo: (combo: ComboDefinition | ComboDefinition[], callback: (event: KeyboardEvent) => void, node?: HTMLElement | Document | null) => void;
+
+declare const usePrevious: <TValue>(value: TValue) => TValue | undefined;
+
+export { type BreakpointOrNull, compareArrayMembers, isButton, useBreakpoint, useKeyCombo, usePrevious, useScreenSize };

package/dist/utils.js

@@ -0,0 +1 @@
+"use strict";var e=require("./_chunks/breakpoint.hook-X1gfdrbr.js"),r=require("./_chunks/compareArrayMembers-DrCqHh_l.js"),s=require("./_chunks/isButton-BLA1xegi.js"),u=require("./_chunks/screen.hook-BWo6Lcm1.js"),o=require("./_chunks/useKeyCombo-V6XcyiXh.js"),i=require("./_chunks/usePrevious-BaNqxBnu.js");require("@mui/material"),require("react"),exports.useBreakpoint=e.useBreakpoint,exports.compareArrayMembers=r.compareArrayMembers,exports.isButton=s.isButton,exports.useScreenSize=u.useScreenSize,exports.useKeyCombo=o.useKeyCombo,exports.usePrevious=i.usePrevious;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useloops/design-system",
-  "version": "1.4.528",
+  "version": "1.4.530",
   "description": "The official React based Loops design system",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
@@ -9,6 +9,78 @@
     "dist/*",
     "./package.json"
   ],
+  "typesVersions": {
+    "*": {
+      "WebCore/*": ["./dist/WebCore/*.d.ts"],
+      "Platform/*": ["./dist/Platform/*.d.ts"],
+      "Marketing/*": ["./dist/Marketing/*.d.ts"],
+      "BrandCore/*": ["./dist/BrandCore/*.d.ts"],
+      "WebCore": ["./dist/WebCore.d.ts"],
+      "Platform": ["./dist/Platform.d.ts"],
+      "Marketing": ["./dist/Marketing.d.ts"],
+      "BrandCore": ["./dist/BrandCore.d.ts"],
+      "theme": ["./dist/theme.d.ts"],
+      "utils": ["./dist/utils.d.ts"]
+    }
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json",
+    "./BrandCore": {
+      "types": "./dist/BrandCore.d.ts",
+      "import": "./dist/esm/BrandCore.js",
+      "require": "./dist/BrandCore.js"
+    },
+    "./Marketing": {
+      "types": "./dist/Marketing.d.ts",
+      "import": "./dist/esm/Marketing.js",
+      "require": "./dist/Marketing.js"
+    },
+    "./Platform": {
+      "types": "./dist/Platform.d.ts",
+      "import": "./dist/esm/Platform.js",
+      "require": "./dist/Platform.js"
+    },
+    "./WebCore": {
+      "types": "./dist/WebCore.d.ts",
+      "import": "./dist/esm/WebCore.js",
+      "require": "./dist/WebCore.js"
+    },
+    "./theme": {
+      "types": "./dist/theme.d.ts",
+      "import": "./dist/esm/theme.js",
+      "require": "./dist/theme.js"
+    },
+    "./utils": {
+      "types": "./dist/utils.d.ts",
+      "import": "./dist/esm/utils.js",
+      "require": "./dist/utils.js"
+    },
+    "./WebCore/*": {
+      "types": "./dist/WebCore/*.d.ts",
+      "import": "./dist/esm/WebCore/*.js",
+      "require": "./dist/WebCore/*.js"
+    },
+    "./Platform/*": {
+      "types": "./dist/Platform/*.d.ts",
+      "import": "./dist/esm/Platform/*.js",
+      "require": "./dist/Platform/*.js"
+    },
+    "./Marketing/*": {
+      "types": "./dist/Marketing/*.d.ts",
+      "import": "./dist/esm/Marketing/*.js",
+      "require": "./dist/Marketing/*.js"
+    },
+    "./BrandCore/*": {
+      "types": "./dist/BrandCore/*.d.ts",
+      "import": "./dist/esm/BrandCore/*.js",
+      "require": "./dist/BrandCore/*.js"
+    }
+  },
   "scripts": {
     "dev": "storybook dev -p 6006 --no-open",
     "clean": "rimraf dist",