@gobolt/genesis 0.3.26 → 0.3.27

package/dist/components/TableWithControls/components/Button/Button.d.ts

@@ -1,16 +0,0 @@
-import React, { MouseEvent } from "react";
-import type { ButtonProps as AntButtonProperties } from "antd/es/button";
-import { STATE } from "../../constants";
-type ButtonThemeType = "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon";
-export interface ButtonProps extends Omit<AntButtonProperties, "type" | "size"> {
-    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    children?: React.ReactNode;
-    themeType?: ButtonThemeType;
-    state?: keyof typeof STATE;
-    isIconButton?: boolean;
-    size?: "small" | "normal" | "large";
-    isSelected?: boolean;
-    icon?: React.ReactNode;
-}
-declare const Button: React.FC<ButtonProps>;
-export default Button;

package/dist/components/TableWithControls/components/Button/Button.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as S from "./styles";
-const getState = (state, isSelected) => {
-    if (isSelected) {
-        return "selected";
-    }
-    return state === "active" || state === "disabled" ? state : "active";
-};
-const Button = ({ children, onClick, themeType = "primary", state = "active", isIconButton = false, size = "normal", isSelected, ...rest }) => {
-    const buttonState = getState(state, isSelected);
-    return (_jsx(S.Button, { onClick: onClick, "$themeType": themeType, "$state": buttonState, disabled: state === "disabled" || rest.disabled, "$isIconButton": isIconButton, size: size, ...rest, children: children }));
-};
-export default Button;

package/dist/components/TableWithControls/components/Button/IconButton.d.ts

@@ -1,8 +0,0 @@
-import type { ButtonProps } from "./Button";
-export interface IconButtonProps extends Omit<ButtonProps, "themeType" | "size"> {
-    icon: React.ReactNode;
-    size?: "small" | "normal" | "large";
-    isSelected?: boolean;
-}
-declare const IconButton: ({ isSelected, state, onClick, icon, size, ...rest }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
-export default IconButton;

package/dist/components/TableWithControls/components/Button/IconButton.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as S from "./icon-button-styles";
-import { TYPE } from "../../constants";
-const IconButton = ({ isSelected = false, state = "active", onClick, icon, size = "small", ...rest }) => {
-    const buttonState = state === "active" || state === "disabled" ? state : "active";
-    const themeType = TYPE.icon;
-    return (_jsx(S.Button, { onClick: onClick, "$themeType": themeType, "$state": buttonState, disabled: state === "disabled" || rest.disabled, size: size, "$isSelected": isSelected, ...rest, children: icon }));
-};
-export default IconButton;

package/dist/components/TableWithControls/components/Button/icon-button-styles.d.ts

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

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

@@ -1,76 +0,0 @@
-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/TableWithControls/components/Button/index.d.ts

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

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

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

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

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

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

@@ -1,118 +0,0 @@
-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/TableWithControls/components/Input/Input.d.ts

@@ -1,13 +0,0 @@
-import React from "react";
-import { STATE } from "../../constants";
-import type { InputProps as AntInputProperties, InputRef } from "antd";
-import type { InputEvent } from "../../types/events";
-type BaseInputProps = Omit<AntInputProperties, "size" | "onChange" | "value">;
-export interface InputProps extends BaseInputProps {
-    state?: keyof typeof STATE;
-    size?: "normal" | "small" | "large";
-    onChange?: (actionEvent: InputEvent) => void;
-    value?: string;
-}
-declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
-export default Input;

package/dist/components/TableWithControls/components/Input/Input.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import * as S from "./styles";
-import { STATE } from "../../constants";
-import DropdownChevron from "../shared/DropdownChevron";
-import { Select } from "antd";
-const Input = React.forwardRef(({ state = STATE.active, size = "normal", onChange, value, ...rest }, ref) => {
-    // make sure rest.type is ignored in the final output
-    // we don't want the rest type "number" to be passed to the input
-    // since we have our own version of type
-    const { type, ...validRest } = rest;
-    // If addonAfter is a Select, use our custom chevron
-    const addonAfter = React.isValidElement(rest.addonAfter) && rest.addonAfter.type === Select
-        ? React.cloneElement(rest.addonAfter, {
-            suffixIcon: _jsx(DropdownChevron, {}),
-        })
-        : rest.addonAfter;
-    const handleChange = React.useCallback((e) => {
-        if (onChange) {
-            onChange({
-                event: "inputChange",
-                payload: {
-                    value: e.target.value,
-                },
-            });
-        }
-    }, [onChange]);
-    return (_jsx(S.Input, { ...validRest, ref: ref, size: size, state: state, disabled: state === "disabled" || rest.disabled, addonAfter: addonAfter, style: {
-            height: size === "normal" || size === "large" ? "40px" : "32px",
-        }, onChange: handleChange, value: value }));
-});
-Input.displayName = "Input";
-Input.__ANT_INPUT = true;
-export default Input;

package/dist/components/TableWithControls/components/Input/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./Input";
-export type { InputProps } from "./Input";

package/dist/components/TableWithControls/components/Input/index.js

@@ -1 +0,0 @@
-export { default } from "./Input";

package/dist/components/TableWithControls/components/Input/styles.d.ts

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

package/dist/components/TableWithControls/components/Input/styles.js

@@ -1,180 +0,0 @@
-import styled from "@gobolt/genesis/utils/styled";
-import { Input as AntInput } from "antd";
-import { TYPE, STATE } from "@gobolt/genesis/constants";
-const getStateColors = (colors, type, state) => {
-    const filled = {
-        color: colors.inputs.onsurface.active,
-        borderColor: colors[TYPE.secondary].active.borderColor,
-        ringColor: colors[type].focussed.ringColor,
-    };
-    const success = {
-        color: colors.status.success.default,
-        borderColor: colors.status.success.default,
-        ringColor: colors.status.success.ringColor,
-    };
-    const error = {
-        color: colors.status.error.default,
-        borderColor: colors.status.error.default,
-        ringColor: colors.status.error.ringColor,
-    };
-    const themeState = state !== STATE.error && state !== STATE.success && state !== STATE.filled
-        ? {
-            color: colors.inputs.onsurface.active,
-            backgroundColor: colors.inputs.surface.active,
-            borderColor: colors.inputs.surface.border,
-            ringColor: colors[type][state].ringColor,
-        }
-        : null;
-    const stateMap = {
-        filled,
-        error,
-        success,
-        themeState,
-    };
-    const getValidKey = (state) => {
-        const validStates = [STATE.filled, STATE.error, STATE.success];
-        return validStates.includes(state) ? state : "themeState";
-    };
-    const css = stateMap[getValidKey(state)];
-    return css;
-};
-const getGenesisInputClass = ({ colors, borderRadius, components, shadows }, type, state, hasBeforeAddon, hasAfterAddon, size) => {
-    const stateColors = getStateColors(colors, type, state);
-    const getBorderRadius = (hasBeforeAddon, hasAfterAddon) => {
-        if (hasAfterAddon && !hasBeforeAddon) {
-            return `${borderRadius.BorderRadiusMd}px 0px 0px ${borderRadius.BorderRadiusMd}px`;
-        }
-        if (hasBeforeAddon && !hasAfterAddon) {
-            return `0px ${borderRadius.BorderRadiusMd}px ${borderRadius.BorderRadiusMd}px 0px`;
-        }
-        return `0px`;
-    };
-    return `
-    &.ant-input {
-        font-family: 'Inter', sans-serif;
-        color: ${stateColors.color};
-        border-color: ${stateColors.borderColor};
-        box-shadow: ${shadows.inputs[1]} !important;
-        height: ${size === "normal" || size === "large" ? "40px" : "32px"} !important;
-    }
-
-    /* Increase specificity for focus states */
-    &.ant-input.ant-input:focus,
-    &.ant-input.ant-input:focus-visible,
-    &.ant-input.ant-input-focused {
-      outline: none !important;
-      border-color: ${colors[type].focussed.borderColor} !important;
-      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors[type].focussed.ringColor} !important;
-    }
-
-    &.ant-input-outlined {
-      border: 1px solid ${stateColors.borderColor};
-
-      &:hover {
-        border-color: ${stateColors.borderColor};
-      }
-    }
-
-    .ant-input-group & {
-      &:focus-within {
-        outline: none;
-        color: ${stateColors.color};
-        box-shadow: none;
-        border-color: ${colors[type].focussed.borderColor};
-      }
-    }
-
-    .ant-input-group:focus-within {
-      outline: none;
-      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors[type].focussed.ringColor};
-      border-radius: ${borderRadius.BorderRadiusMd}px;
-      transition: box-shadow 0.2s ease-in-out;
-
-      /* Hide focus styles on inner input when parent is focused */
-      .ant-input:focus-within {
-        box-shadow: none;
-        border-radius: 0;
-        border-radius: ${getBorderRadius(hasBeforeAddon, hasAfterAddon)};
-        border-color: #ddd;
-      }
-    }
-
-    /* Remove inner input focus styles when in a group */
-    .ant-input-group .ant-input:focus,
-    .ant-input-group .ant-input:focus-visible,
-    .ant-input-group .ant-input:focus-within {
-      outline: none;
-      box-shadow: none;
-      border-color: ${colors[type].focussed.borderColor};
-    }
-
-    /* Single focus ring on group */
-    .ant-input-group:focus-within {
-      outline: none;
-      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors[type].focussed.ringColor};
-      border-radius: ${borderRadius.BorderRadiusMd}px;
-      transition: box-shadow 0.2s ease-in-out;
-    }
-
-    /* Remove focus styles for standalone inputs */
-    &:not(.ant-input-group):focus-visible {
-      outline: none;
-      color: ${stateColors.color};
-      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors[type].focussed.ringColor};
-      border-radius: ${borderRadius.BorderRadiusMd}px;
-      border-color: ${colors[type].focussed.borderColor};
-      transition: box-shadow 0.2s ease-in-out;
-    }
-
-    &:not(.ant-input-group .ant-input):focus-visible {
-      outline: none;
-      color: ${stateColors.color};
-      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors[type].focussed.ringColor};
-      border-radius: ${borderRadius.BorderRadiusMd}px;
-      border-color: ${colors[type].focussed.borderColor};
-      transition: box-shadow 0.2s ease-in-out;
-    }
-
-    &.ant-input-group-wrapper {
-      .ant-input-group {
-        display: flex;
-        align-items: center;
-        height: ${size === "normal" || size === "large" ? "40px" : "32px"};
-
-        .ant-input {
-          height: 100% !important;
-        }
-
-        .ant-input-group-addon {
-          padding: 0 ${components.input.suffixPrefixHorPadding};
-          height: 100%;
-          display: flex;
-          align-items: center;
-          min-width: fit-content;
-          width: auto;
-          
-          > * {
-            width: 100%;
-          }
-          
-          .ant-select {
-            height: 100%;
-            
-            .ant-select-selector {
-              height: 100%;
-              display: flex;
-              align-items: center;
-            }
-          }
-        }
-      }
-    }
-  `;
-};
-export const Input = styled(AntInput) `
-  ${({ theme, state, type = TYPE.primary, size = "normal", ...rest }) => {
-    const hasBeforeAddon = !!rest.addonBefore;
-    const hasAfterAddon = !!rest.addonAfter;
-    return getGenesisInputClass(theme, type, state, hasBeforeAddon, hasAfterAddon, size);
-}}
-`;

package/dist/components/TableWithControls/components/Select/Select.d.ts

@@ -1,26 +0,0 @@
-import React from "react";
-import { TYPE, STATE } from "@gobolt/genesis/constants";
-import { SelectProps as AntSelectProps } from "antd";
-import { GenesisTheme } from "@/lib/styles/theme/genesis-theme.types";
-type Variant = "none" | "simple";
-export interface SelectProps extends Omit<AntSelectProps, "variant" | "size"> {
-    type?: keyof typeof TYPE;
-    state?: keyof typeof STATE;
-    options?: {
-        value: string;
-        label: React.ReactNode;
-    }[];
-    variant?: Variant;
-    defaultValue?: string | string[] | number | number[] | unknown;
-    onChange?: (value: string | string[]) => void;
-    size?: "normal" | "small" | "large";
-    value?: string[] | string | number[] | number;
-    width?: number | string;
-    placeholder?: string;
-    selectDisplayMode?: "chip" | "count";
-    isSingleSelect?: boolean;
-    disabled?: boolean;
-    theme?: GenesisTheme;
-}
-declare const Select: ({ type, state, variant, defaultValue, onChange, size, width, value, options, placeholder, selectDisplayMode, isSingleSelect, disabled, ...rest }: SelectProps) => import("react/jsx-runtime").JSX.Element;
-export default Select;