@gobolt/genesis 0.3.22 → 0.3.24

package/dist/components/UtilityButton/components/Button/icon-button-styles.js

@@ -0,0 +1,76 @@
+import styled from "@gobolt/genesis/utils/styled";
+const getPadding = (size, sizing) => {
+    if (size === "small") {
+        return `${sizing.Size1}px ${sizing.Size1}px`;
+    }
+    return `${sizing.Size2}px ${sizing.Size2}px`;
+};
+const getVariant = ({ colors, sizing, borderRadius, components }, $themeType, $state, size, $isSelected) => {
+    return `
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      color: ${colors[$themeType][$state].color};
+      font-size: ${sizing.Size4}px;
+      line-height: ${sizing.Size6}px;
+      letter-spacing: 0;
+      font-weight: 400;
+      border-width: 1px;
+      cursor: pointer;
+      width: auto; !important;
+      height: auto; !important;
+
+      background-color:${$isSelected
+        ? colors[$themeType].hover.backgroundColor
+        : colors[$themeType][$state].backgroundColor};
+      padding: ${getPadding(size, sizing)};
+
+      box-shadow: ${$themeType === "utility" ? "0px 1px 2px 0px #00000026" : "none"};
+
+      border-radius: ${borderRadius.BorderRadiusMd}px;
+      gap: ${components.button.gap}px;
+      border-style: solid;
+      border-color: ${colors[$themeType][$state].borderColor};
+      
+      transition: all 0.2s ease-in-out;
+
+      &:hover {
+        color: ${colors[$themeType].hover.color};
+        background-color: ${colors[$themeType].hover.backgroundColor};
+        border-color: ${colors[$themeType].hover.borderColor};
+      }
+
+      &:active {
+        color: ${colors[$themeType].pressed.color};
+        background-color: ${colors[$themeType].pressed.backgroundColor};
+        border-color: ${colors[$themeType].pressed.borderColor};
+      }
+
+      &:focus-visible {
+        outline: none;
+        color: ${colors[$themeType].focussed.color};
+        background-color: ${colors[$themeType].focussed.backgroundColor};
+        box-shadow: 0 0 0 1px #fff, 0 0 0 4px ${colors[$themeType].focussed.ringColor};
+        border-radius: ${borderRadius.BorderRadiusMd}px;
+        border-color: ${colors[$themeType].focussed.borderColor};
+        transition: box-shadow 0.2s ease-in-out;
+      }
+
+      &:disabled {
+        color: ${colors[$themeType].disabled.color};
+        background-color: ${colors[$themeType].disabled.backgroundColor};
+        border-color: ${colors[$themeType].disabled.borderColor};
+        cursor: not-allowed;
+      }
+    `;
+};
+const getGenesisButtonClass = (theme, $themeType, $state, size, $isSelected) => `
+    font-family: 'Inter', sans-serif;
+    ${getVariant(theme, $themeType, $state, size, $isSelected)}
+`;
+export const Button = styled.button `
+  ${({ theme, $themeType, $state, size, $isSelected }) => {
+    return getGenesisButtonClass(theme, $themeType, $state, size, $isSelected);
+}}
+`;

package/dist/components/UtilityButton/components/Button/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from "./Button";
+export type { ButtonProps } from "./Button";
+export { default as IconButton } from "./IconButton";
+export type { IconButtonProps } from "./IconButton";

package/dist/components/UtilityButton/components/Button/index.js

@@ -0,0 +1,2 @@
+export { default } from "./Button";
+export { default as IconButton } from "./IconButton";

package/dist/components/UtilityButton/components/Button/styles.d.ts

@@ -0,0 +1 @@
+export declare const Button: any;

package/dist/components/UtilityButton/components/Button/styles.js

@@ -0,0 +1,118 @@
+import styled from "@gobolt/genesis/utils/styled";
+import { Button as AntButton } from "antd";
+const getPadding = (size, $themeType, sizing, $isIconButton) => {
+    if ($isIconButton && (size === "normal" || size === "large")) {
+        return `${sizing.Size2}px ${sizing.Size2}px`;
+    }
+    if ($isIconButton && size === "small") {
+        return `${sizing.Size1}px ${sizing.Size1}px`;
+    }
+    // utility button padding is different from the main button
+    if ($themeType === "utility" && size === "small") {
+        return `${sizing.Size1_5}px ${sizing.Size2}px`;
+    }
+    if ($themeType === "utility" && (size === "normal" || size === "large")) {
+        return `${sizing.Size2_5}px ${sizing.Size3}px`;
+    }
+    if (size === "small") {
+        return `${sizing.Size1_5}px ${sizing.Size4}px`;
+    }
+    if (size === "normal" || size === "large") {
+        return `${sizing.Size2_5}px ${sizing.Size6}px`;
+    }
+    return `${sizing.Size2}px ${sizing.Size2}px`;
+};
+const getHeight = (size) => {
+    if (size === "normal" || size === "large") {
+        return `40px`;
+    }
+    if (size === "small") {
+        return `32px`;
+    }
+    return `40px`;
+};
+const getWidth = (size, $isIconButton) => {
+    if (!$isIconButton) {
+        return `auto`;
+    }
+    if (size === "normal" || size === "large") {
+        return `40px`;
+    }
+    if (size === "small") {
+        return `32px`;
+    }
+    return `40px`;
+};
+const getVariant = ({ colors, sizing, borderRadius, components }, $themeType, $state, size, $isIconButton) => {
+    const backgroundColor = colors[$themeType][$state].backgroundColor;
+    return `
+      &.ant-btn {
+      
+        color: ${colors[$themeType][$state].color};
+        font-size: ${sizing.Size4}px;
+        line-height: ${sizing.Size6}px;
+        letter-spacing: 0;
+        font-weight: 400;
+        border-width: 1px;
+        line-height: 1 !important;
+
+        width: ${getWidth(size, $isIconButton)}; !important;
+        height: ${getHeight(size)}; !important;
+
+        background-color: ${colors[$themeType][$state].backgroundColor};
+        padding: ${getPadding(size, $themeType, sizing, $isIconButton)};
+
+        box-shadow: ${$themeType === "utility" ? "0px 1px 2px 0px #00000026" : "none"};
+
+        border-radius: ${borderRadius.BorderRadiusMd}px;
+        gap: ${components.button.gap}px;
+        border-style: solid;
+        border-color: ${colors[$themeType][$state].borderColor};
+        
+        transition: all 0.2s ease-in-out;
+
+        &:hover {
+          color: ${colors[$themeType].hover.color};
+          background-color: ${colors[$themeType].hover.backgroundColor};
+          border-color: ${colors[$themeType].hover.borderColor};
+        }
+
+        &:active {
+          color: ${colors[$themeType].pressed.color};
+          background-color: ${colors[$themeType].pressed.backgroundColor};
+          border-color: ${colors[$themeType].pressed.borderColor};
+        }
+
+        &:focus-visible {
+          outline: none;
+          color: ${colors[$themeType].focussed.color};
+          background-color: ${colors[$themeType].focussed.backgroundColor};
+          box-shadow: 0 0 0 1px #fff, 0 0 0 4px ${colors[$themeType].focussed.ringColor};
+          border-radius: ${borderRadius.BorderRadiusMd}px;
+          border-color: ${colors[$themeType].focussed.borderColor};
+          transition: box-shadow 0.2s ease-in-out;
+        }
+
+        &:disabled {
+          color: ${colors[$themeType].disabled.color};
+          background-color: ${colors[$themeType].disabled.backgroundColor};
+          border-color: ${colors[$themeType].disabled.borderColor};
+          cursor: not-allowed;
+        }
+    
+      }
+        
+      `;
+};
+const getGenesisButtonClass = (theme, $themeType, $state, $isIconButton, size) => `
+    &.ant-btn {
+      font-family: 'Inter', sans-serif;
+ 
+      ${getVariant(theme, $themeType, $state, size, $isIconButton)}
+    } 
+`;
+export const Button = styled(AntButton) `
+  ${({ theme, $themeType, $state, children, $isIconButton, size }) => {
+    return getGenesisButtonClass(theme, $themeType, $state, $isIconButton, size);
+}}
+`;

package/dist/components/UtilityButton/components/UtilityButton/UtilityButton.d.ts

@@ -0,0 +1,5 @@
+import type { ButtonProps } from "../Button";
+export interface UtilityButtonProps extends Omit<ButtonProps, "themeType"> {
+}
+declare const UtilityButton: ({ children, onClick, state, isIconButton, size, ...rest }: UtilityButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default UtilityButton;

package/dist/components/UtilityButton/components/UtilityButton/UtilityButton.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Button from "../Button";
+import { TYPE } from "../../constants";
+const UtilityButton = ({ children, onClick, state = "active", isIconButton = false, size = "normal", ...rest }) => {
+    const buttonState = state === "active" || state === "disabled" ? state : "active";
+    const themeType = TYPE.utility;
+    return (_jsx(Button, { onClick: onClick, themeType: themeType, state: buttonState, disabled: state === "disabled" || rest.disabled, isIconButton: isIconButton, size: size, ...rest, children: children }));
+};
+export default UtilityButton;

package/dist/components/UtilityButton/constants/index.d.ts

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

package/dist/components/UtilityButton/constants/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/components/index.js

@@ -0,0 +1,7 @@
+
+export { default as Button } from './Button/Button.js';
+export { default as UtilityButton } from './UtilityButton/UtilityButton.js';
+export { default as TableWithControls } from './TableWithControls/TableWithControls.js';
+export { useTableWithControls } from './TableWithControls/useTableWithControls.js';
+export { default as Table } from './Table/Table.js';
+export { useTable } from './Table/useTable.js';

package/dist/components/shared/DropdownChevron.js

@@ -1,7 +1,18 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useGenesis } from "@gobolt/genesis/providers";
-const DropdownChevron = (properties) => {
-    const { theme } = useGenesis();
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "none", ...properties, children: _jsx("path", { fill: "#222", fillRule: "evenodd", d: "M5.293 7.293a1 1 0 0 1 1.414 0L10 10.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414Z", clipRule: "evenodd" }) }));
+var DropdownChevron = function (properties) {
+    var theme = useGenesis().theme;
+    return (_jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "none" }, properties, { children: _jsx("path", { fill: "#222", fillRule: "evenodd", d: "M5.293 7.293a1 1 0 0 1 1.414 0L10 10.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414Z", clipRule: "evenodd" }) })));
 };
 export default DropdownChevron;

package/dist/index.js

@@ -1,89 +1,10 @@
-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,
-};
+
+export { default as Button } from './components/Button/Button.js';
+export { default as UtilityButton } from './components/UtilityButton/UtilityButton.js';
+export { default as TableWithControls } from './components/TableWithControls/TableWithControls.js';
+export { useTableWithControls } from './components/TableWithControls/useTableWithControls.js';
+export { default as Table } from './components/Table/Table.js';
+export { useTable } from './components/Table/useTable.js';
+export * from './constants/index.js';
+export * from './utils/styled.js';
+export * from './styles/theme/genesis-theme.types.js';

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

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