@gobolt/genesis 0.3.21 → 0.3.22

package/dist/genesis-theme.types.d.ts

@@ -0,0 +1,263 @@
+export declare enum BreakpointLabel {
+    Narrow = "narrow",
+    Medium = "medium",
+    Wide = "wide"
+}
+export type Breakpoints = {
+    [key in BreakpointLabel]: number;
+};
+export type Sizing = {
+    Size1: number;
+    Size2: number;
+    Size3: number;
+    Size4: number;
+    Size5: number;
+    Size6: number;
+    Size7: number;
+    Size8: number;
+    Size10: number;
+    Size12: number;
+    Size13: number;
+    Size14: number;
+    Size16: number;
+    Size18: number;
+    Size20: number;
+    Size24: number;
+    Size27: number;
+    Size28: number;
+    Size30: number;
+    Size32: number;
+    Size34: number;
+    Size35: number;
+    Size39: number;
+    Size43: number;
+    Size50: number;
+    Size64: number;
+    Size05: number;
+    Size15: number;
+    Size025: number;
+    Size25: number;
+};
+type BorderRadius = {
+    BorderRadiusNone: number;
+    BorderRadiusXs: number;
+    BorderRadiusSm: number;
+    BorderRadiusMd: number;
+    BorderRadiusLg: number;
+    BorderRadiusXl: number;
+    BorderRadiusXxl: number;
+    BorderRadiusXxxl: number;
+    BorderRadiusRounded: number;
+};
+type FontStyle = {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+};
+export type TypographySize = {
+    display1: FontStyle;
+    display2: FontStyle;
+    display3: FontStyle;
+    heading1: FontStyle;
+    heading2: FontStyle;
+    heading3: FontStyle;
+    subHeading1: FontStyle;
+    subHeading2: FontStyle;
+    subHeading3: FontStyle;
+    body1: FontStyle;
+    body2: FontStyle;
+    body3: FontStyle;
+    body4: FontStyle;
+    body5: FontStyle;
+    message: FontStyle;
+    overline: FontStyle;
+    label: FontStyle;
+    link1: FontStyle;
+    link2: FontStyle;
+    link3: FontStyle;
+    digits1: FontStyle;
+    digits2: FontStyle;
+    digits3: FontStyle;
+};
+export type Typography = {
+    wide: TypographySize;
+    medium: TypographySize;
+    narrow: TypographySize;
+    fontFamily: string;
+    lineHeight: string;
+    body1: FontStyle;
+    body2: FontStyle;
+};
+export type ColorShades = {
+    100?: string;
+    200?: string;
+    300?: string;
+    400?: string;
+    500?: string;
+    600?: string;
+    700?: string;
+    800?: string;
+    900?: string;
+    black?: string;
+    white?: string;
+};
+type ColorLayer = {
+    textColor: string;
+    backgroundColor: string;
+    borderColor: string;
+    ringColor?: string;
+    active: ColorShades;
+    checked?: string;
+    default?: string;
+    border?: string;
+    onsurface: string;
+    generic?: string;
+    disabled?: string;
+    surface?: string;
+    hover?: string;
+    pressed?: string;
+    focus?: string;
+    info?: string;
+    success?: string;
+    error?: string;
+    empty?: string;
+};
+type ColorState = {
+    active: ColorLayer;
+    hover: ColorLayer;
+    pressed: ColorLayer;
+    focussed: ColorLayer;
+    disabled: ColorLayer;
+    link: ColorLayer;
+    surface: ColorLayer;
+    success: ColorLayer;
+    error: ColorLayer;
+    onsurface: ColorLayer;
+    warning: ColorLayer;
+    generic?: ColorLayer;
+    hollow?: ColorLayer;
+    info?: ColorLayer;
+    utility?: ColorLayer;
+    icon?: ColorLayer;
+    default?: ColorLayer;
+    selected?: ColorLayer;
+    border?: ColorLayer;
+    tertiary?: string;
+    copy?: string;
+    "copy-dark"?: string;
+    "border-light"?: string;
+    primary?: string;
+    progress?: ColorLayer;
+};
+export type ColorMode = {
+    primary: ColorState;
+    secondary: ColorState;
+    tertiary: ColorState;
+    destructive: ColorState;
+    success: ColorState;
+    warning: ColorState;
+    danger: ColorState;
+    info: ColorState;
+    onsurface: ColorState;
+    surface: ColorState;
+    inputs: ColorState;
+    interactive: ColorState;
+    status: ColorState;
+    brandon: ColorState;
+};
+export type ColorModes = {
+    light: ColorMode;
+    dark: ColorMode;
+};
+export type ColorGroup = "red" | "orange" | "yellow" | "green" | "blue" | "purple" | "sky" | "gray";
+type AllColors = {
+    red: ColorShades;
+    orange: ColorShades;
+    yellow: ColorShades;
+    green: ColorShades;
+    blue: ColorShades;
+    purple: ColorShades;
+    sky: ColorShades;
+    gray: ColorShades;
+};
+type Mode = "light" | "dark";
+type Button = {
+    padding: {
+        verPadding: number;
+        horPadding: number;
+    };
+    gap: number;
+    radius: number;
+};
+type Input = {
+    suffixPrefixHorPadding: number;
+    suffixPrefixVerPadding: number;
+};
+type Badge = {
+    "ver-padding": number;
+    "left-padding": number;
+    "right-padding": number;
+    radius: number;
+};
+type CommonContainer = {
+    "ver-padding": number;
+    "hor-padding": number;
+    radius: number;
+    gap: number;
+};
+type Popover = CommonContainer;
+type Row = CommonContainer;
+type TableCell = {
+    surface: string;
+    hover: string;
+    pressed: string;
+};
+export type Components = {
+    button: Button;
+    utilityButton: Button;
+    iconButton: Button;
+    input: Input;
+    row: Row;
+    badge: Badge;
+    popover: Popover;
+    tableCell: TableCell;
+};
+type Motion = {
+    instant: string;
+    veryfast: string;
+    fast: string;
+    medium: string;
+    slow: string;
+};
+type Shadows = {
+    general: {
+        "1": string;
+        "2": string;
+        "3": string;
+    };
+    actions: {
+        "1": string;
+        "2": string;
+    };
+    inputs: {
+        "1": string;
+    };
+};
+interface ConvenienceFunctions {
+    getStatusColor: (colors: ColorMode, status: string) => string;
+}
+export interface BaseTokens extends ConvenienceFunctions {
+    breakpoints: Breakpoints;
+    sizing: Sizing;
+    borderRadius: BorderRadius;
+    typography: Typography;
+    allColors: AllColors;
+    components: Components;
+    motion: Motion;
+    shadows: Shadows;
+}
+export interface GenesisTheme extends BaseTokens {
+    colors: ColorMode;
+    mode: Mode;
+}
+export {};

package/dist/genesis-theme.types.js

@@ -0,0 +1,6 @@
+export var BreakpointLabel;
+(function (BreakpointLabel) {
+    BreakpointLabel["Narrow"] = "narrow";
+    BreakpointLabel["Medium"] = "medium";
+    BreakpointLabel["Wide"] = "wide";
+})(BreakpointLabel || (BreakpointLabel = {}));

package/dist/index.js

@@ -0,0 +1,89 @@
+export const TYPE = {
+    primary: "primary",
+    secondary: "secondary",
+    tertiary: "tertiary",
+    destructive: "destructive",
+    utility: "utility",
+    icon: "icon",
+};
+export const BREAKPOINTS = {
+    wide: "wide",
+    medium: "medium",
+    narrow: "narrow",
+};
+export const STATE = {
+    active: "active",
+    hover: "hover",
+    pressed: "pressed",
+    focussed: "focus",
+    disabled: "disabled",
+    error: "error",
+    success: "success",
+    warning: "warning",
+    progress: "progress",
+    info: "info",
+    filled: "filled",
+    generic: "generic",
+    removed: "removed",
+    hollow: "hollow",
+};
+export const TYPOGRAPHY_VARIANT = {
+    display1: "display1",
+    display2: "display2",
+    display3: "display3",
+    heading1: "heading1",
+    heading2: "heading2",
+    heading3: "heading3",
+    subHeading1: "subHeading1",
+    subHeading2: "subHeading2",
+    subHeading3: "subHeading3",
+    body1: "body1",
+    body2: "body2",
+    body3: "body3",
+    body4: "body4",
+    body5: "body5",
+    message: "message",
+    overline1: "overline1",
+    overline2: "overline2",
+    overline3: "overline3",
+    label1: "label1",
+    label2: "label2",
+    label3: "label3",
+    link1: "link1",
+    link2: "link2",
+    link3: "link3",
+    digits1: "digits1",
+    digits2: "digits2",
+    digits3: "digits3",
+};
+export const BUTTON_VARIANT = {
+    primary: "primary",
+    secondary: "secondary",
+    tertiary: "tertiary",
+};
+export const SIZE = {
+    small: "small",
+    medium: "medium",
+    large: "large",
+    standard: "standard",
+};
+export const BADGE = {
+    appointment: "appointment",
+    asn: "asn",
+    inventory: "inventory",
+    parcel: "parcel",
+    product: "product",
+    route: "route",
+    shipment: "shipment",
+    shoppingCart: "shopping cart",
+    system: "system",
+};
+export default {
+    TYPE,
+    BREAKPOINTS,
+    STATE,
+    TYPOGRAPHY_VARIANT,
+    BUTTON_VARIANT,
+    SIZE,
+    BADGE,
+};

package/dist/styled.d.ts

@@ -0,0 +1 @@
+export { default, createGlobalStyle, useTheme, ThemeProvider, css, } from "styled-components";

package/dist/styled.js

@@ -0,0 +1,44 @@
+/*
+Warning: this was a failed attempt to create a universal styled-components library.
+When importing styled-components into a non React Native app, it will throw an error!
+
+Even when React Native was setup as an optional peer dependency; it's not actually working.
+Now it's seems like a better idea to create a separate Genesis package for React Native styled-components which is basically only the theme provider.
+*/
+/*
+import * as styledComponents from "styled-components";
+
+// Platform detection
+const isReactNative =
+  typeof navigator !== "undefined" && navigator.product === "ReactNative";
+
+// Set up platform-specific styled
+let platformStyled;
+if (isReactNative) {
+  try {
+    platformStyled = require("styled-components/native");
+  } catch (e) {
+    console.warn(
+      "Failed to load styled-components/native, falling back to web"
+    );
+    platformStyled = styledComponents;
+  }
+} else {
+  platformStyled = styledComponents;
+}
+
+// Export named exports
+export const styled = platformStyled.default;
+export const ThemeProvider = platformStyled.ThemeProvider;
+export const useTheme = platformStyled.useTheme;
+export const css = platformStyled.css;
+
+// Add createGlobalStyle (web only)
+export const createGlobalStyle = isReactNative
+  ? () => null
+  : styledComponents.createGlobalStyle;
+
+// Export default too for backwards compatibility
+export default styled;
+*/
+export { default, createGlobalStyle, useTheme, ThemeProvider, css, } from "styled-components";

package/dist/utils/icon-util.d.ts

@@ -1,3 +1,3 @@
-export declare const getIcon: (name: string) => import("react/jsx-runtime").JSX.Element | null;
+export declare const getIcon: (name: string) => import("react/jsx-runtime").JSX.Element;
 export declare const getIconColor: (state: any, theme: any) => any;
-export declare const getBadgeStateIcon: (state: any, color: any, isFilled?: boolean, hasIcon?: boolean, customIcon?: null) => import("react/jsx-runtime").JSX.Element | null;
+export declare const getBadgeStateIcon: (state: any, color: any, isFilled?: boolean, hasIcon?: boolean, customIcon?: any) => any;

package/dist/utils/icon-util.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { STATE } from "@gobolt/genesis/constants";
-var iconSize = 18;
+const iconSize = 18;
 // check circle filled & outline
 import { FaCircleCheck } from "react-icons/fa6";
 import { HiOutlineCheckCircle } from "react-icons/hi";
@@ -21,7 +21,7 @@ import { HiOutlineClock } from "react-icons/hi";
 import { HiOutlineGlobe } from "react-icons/hi";
 import { TbFiles } from "react-icons/tb";
 import { LuTag } from "react-icons/lu";
-export var getIcon = function (name) {
+export const getIcon = (name) => {
     switch (name.toLowerCase()) {
         case "orders": {
             return _jsx(LuTag, {});
@@ -37,7 +37,7 @@ export var getIcon = function (name) {
         }
     }
 };
-export var getIconColor = function (state, theme) {
+export const getIconColor = (state, theme) => {
     switch (state) {
         case STATE.error: {
             return theme.colors.status.error.onsurface;
@@ -60,10 +60,7 @@ export var getIconColor = function (state, theme) {
         }
     }
 };
-export var getBadgeStateIcon = function (state, color, isFilled, hasIcon, customIcon) {
-    if (isFilled === void 0) { isFilled = true; }
-    if (hasIcon === void 0) { hasIcon = true; }
-    if (customIcon === void 0) { customIcon = null; }
+export const getBadgeStateIcon = (state, color, isFilled = true, hasIcon = true, customIcon = null) => {
     if (!state || !hasIcon) {
         return null;
     }
@@ -74,46 +71,46 @@ export var getBadgeStateIcon = function (state, color, isFilled, hasIcon, custom
         switch (state) {
             // isFilled is false
             case STATE.warning: {
-                return _jsx(HiOutlineExclamationCircle, { size: iconSize, style: { color: color } });
+                return _jsx(HiOutlineExclamationCircle, { size: iconSize, style: { color } });
             }
             case STATE.error: {
-                return _jsx(HiOutlineXCircle, { size: iconSize, style: { color: color } });
+                return _jsx(HiOutlineXCircle, { size: iconSize, style: { color } });
             }
             case STATE.success: {
-                return _jsx(HiOutlineCheckCircle, { size: iconSize, style: { color: color } });
+                return _jsx(HiOutlineCheckCircle, { size: iconSize, style: { color } });
             }
             case STATE.progress: {
-                return _jsx(HiOutlineClock, { size: iconSize, style: { color: color } });
+                return _jsx(HiOutlineClock, { size: iconSize, style: { color } });
             }
             case STATE.removed: {
-                return _jsx(HiOutlineMinusCircle, { size: iconSize, style: { color: color } });
+                return _jsx(HiOutlineMinusCircle, { size: iconSize, style: { color } });
             }
             case STATE.info:
             default: {
-                return _jsx(PiInfo, { size: iconSize, style: { color: color } });
+                return _jsx(PiInfo, { size: iconSize, style: { color } });
             }
         }
     }
     switch (state) {
         // isFilled is true
         case STATE.warning: {
-            return _jsx(HiExclamationCircle, { size: iconSize, style: { color: color } });
+            return _jsx(HiExclamationCircle, { size: iconSize, style: { color } });
         }
         case STATE.error: {
-            return _jsx(HiXCircle, { size: iconSize, style: { color: color } });
+            return _jsx(HiXCircle, { size: iconSize, style: { color } });
         }
         case STATE.success: {
-            return _jsx(FaCircleCheck, { size: iconSize, style: { color: color } });
+            return _jsx(FaCircleCheck, { size: iconSize, style: { color } });
         }
         case STATE.progress: {
-            return _jsx(HiClock, { size: iconSize, style: { color: color } });
+            return _jsx(HiClock, { size: iconSize, style: { color } });
         }
         case STATE.removed: {
-            return _jsx(HiMinusCircle, { size: iconSize, style: { color: color } });
+            return _jsx(HiMinusCircle, { size: iconSize, style: { color } });
         }
         case STATE.info:
         default: {
-            return _jsx(PiInfoFill, { size: iconSize, style: { color: color } });
+            return _jsx(PiInfoFill, { size: iconSize, style: { color } });
         }
     }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gobolt/genesis",
-  "version": "0.3.21",
+  "version": "0.3.22",
   "description": "genesis design system",
   "author": "gobolt",
   "license": "MIT",