@gobolt/genesis 0.2.19 → 0.2.20

package/dist/_virtual/index5.cjs

@@ -1,6 +1,6 @@
 "use strict";
 var _commonjsHelpers = require("./_commonjsHelpers.cjs");
-var index = require("../node_modules/copy-to-clipboard/index.cjs");
-var copyToClipboardExports = index.__require();
-var copy = /* @__PURE__ */ _commonjsHelpers.getDefaultExportFromCjs(copyToClipboardExports);
-module.exports = copy;
+var index = require("../node_modules/debounce/index.cjs");
+var debounceExports = /* @__PURE__ */ index.__require();
+var debounce = /* @__PURE__ */ _commonjsHelpers.getDefaultExportFromCjs(debounceExports);
+module.exports = debounce;

package/dist/_virtual/index5.js

@@ -1,7 +1,7 @@
 import { getDefaultExportFromCjs } from "./_commonjsHelpers.js";
-import { __require as requireCopyToClipboard } from "../node_modules/copy-to-clipboard/index.js";
-var copyToClipboardExports = requireCopyToClipboard();
-var copy = /* @__PURE__ */ getDefaultExportFromCjs(copyToClipboardExports);
+import { __require as requireDebounce } from "../node_modules/debounce/index.js";
+var debounceExports = /* @__PURE__ */ requireDebounce();
+var debounce = /* @__PURE__ */ getDefaultExportFromCjs(debounceExports);
 export {
-  copy as default
+  debounce as default
 };

package/dist/_virtual/index6.cjs

@@ -1,6 +1,6 @@
 "use strict";
 var _commonjsHelpers = require("./_commonjsHelpers.cjs");
-var index = require("../node_modules/debounce/index.cjs");
-var debounceExports = /* @__PURE__ */ index.__require();
-var debounce = /* @__PURE__ */ _commonjsHelpers.getDefaultExportFromCjs(debounceExports);
-module.exports = debounce;
+var index = require("../node_modules/copy-to-clipboard/index.cjs");
+var copyToClipboardExports = index.__require();
+var copy = /* @__PURE__ */ _commonjsHelpers.getDefaultExportFromCjs(copyToClipboardExports);
+module.exports = copy;

package/dist/_virtual/index6.js

@@ -1,7 +1,7 @@
 import { getDefaultExportFromCjs } from "./_commonjsHelpers.js";
-import { __require as requireDebounce } from "../node_modules/debounce/index.js";
-var debounceExports = /* @__PURE__ */ requireDebounce();
-var debounce = /* @__PURE__ */ getDefaultExportFromCjs(debounceExports);
+import { __require as requireCopyToClipboard } from "../node_modules/copy-to-clipboard/index.js";
+var copyToClipboardExports = requireCopyToClipboard();
+var copy = /* @__PURE__ */ getDefaultExportFromCjs(copyToClipboardExports);
 export {
-  debounce as default
+  copy as default
 };

package/dist/components/Badge/Badge.cjs

@@ -11,8 +11,14 @@ const Badge = ({
   state = "info",
   isDisabled,
   hasClose = false,
-  onClick,
+  onClick = () => {
+  },
   size = "normal",
+  hasIcon = true,
+  customIcon = null,
+  backgroundColor = null,
+  textColor = null,
+  hasHover = true,
   ...rest
 }) => {
   const { theme } = useGenesis.useGenesis();
@@ -28,6 +34,7 @@ const Badge = ({
         style: {
           padding: "4px 4px"
         },
+        hasHover,
         ...rest,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -39,8 +46,10 @@ const Badge = ({
             },
             children: iconUtil.getBadgeStateIcon(
               state,
-              theme.colors.status[state].onsurface,
-              isBadgeIconFilled
+              backgroundColor || theme.colors.status[state].onsurface,
+              isBadgeIconFilled,
+              hasIcon,
+              customIcon
             )
           }
         )
@@ -56,18 +65,22 @@ const Badge = ({
       state,
       disabled: isDisabled,
       style: { cursor: role === "button" ? "pointer" : "default" },
+      backgroundColor,
+      hasHover,
       ...rest,
       children: [
         iconUtil.getBadgeStateIcon(
           state,
-          theme.colors.status[state].onsurface,
-          isBadgeIconFilled
+          backgroundColor || theme.colors.status[state].onsurface,
+          isBadgeIconFilled,
+          hasIcon,
+          customIcon
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
           Typography,
           {
             variant: size === "small" ? "label3" : "label2",
-            color: isDisabled ? theme.colors.status.disabled.default : theme.colors.status[state].onsurface,
+            color: isDisabled ? theme.colors.status.disabled.default : textColor || theme.colors.status[state].onsurface,
             isDisabled,
             children: label
           }

package/dist/components/Badge/Badge.d.ts

@@ -4,8 +4,13 @@ export interface BadgeProps {
     isDisabled?: boolean;
     state?: State;
     hasClose?: boolean;
+    hasIcon?: boolean;
+    customIcon?: React.ReactNode | null;
     size?: "small" | "normal" | "large";
-    onClick?: () => void;
+    backgroundColor?: string;
+    textColor?: string;
+    onClick?: () => void | null;
+    hasHover?: boolean;
 }
-declare const Badge: ({ label, state, isDisabled, hasClose, onClick, size, ...rest }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+declare const Badge: ({ label, state, isDisabled, hasClose, onClick, size, hasIcon, customIcon, backgroundColor, textColor, hasHover, ...rest }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
 export default Badge;

package/dist/components/Badge/Badge.js

@@ -10,8 +10,14 @@ const Badge = ({
   state = "info",
   isDisabled,
   hasClose = false,
-  onClick,
+  onClick = () => {
+  },
   size = "normal",
+  hasIcon = true,
+  customIcon = null,
+  backgroundColor = null,
+  textColor = null,
+  hasHover = true,
   ...rest
 }) => {
   const { theme } = useGenesis();
@@ -27,6 +33,7 @@ const Badge = ({
         style: {
           padding: "4px 4px"
         },
+        hasHover,
         ...rest,
         children: /* @__PURE__ */ jsx(
           "div",
@@ -38,8 +45,10 @@ const Badge = ({
             },
             children: getBadgeStateIcon(
               state,
-              theme.colors.status[state].onsurface,
-              isBadgeIconFilled
+              backgroundColor || theme.colors.status[state].onsurface,
+              isBadgeIconFilled,
+              hasIcon,
+              customIcon
             )
           }
         )
@@ -55,18 +64,22 @@ const Badge = ({
       state,
       disabled: isDisabled,
       style: { cursor: role === "button" ? "pointer" : "default" },
+      backgroundColor,
+      hasHover,
       ...rest,
       children: [
         getBadgeStateIcon(
           state,
-          theme.colors.status[state].onsurface,
-          isBadgeIconFilled
+          backgroundColor || theme.colors.status[state].onsurface,
+          isBadgeIconFilled,
+          hasIcon,
+          customIcon
         ),
         /* @__PURE__ */ jsx(
           Typography,
           {
             variant: size === "small" ? "label3" : "label2",
-            color: isDisabled ? theme.colors.status.disabled.default : theme.colors.status[state].onsurface,
+            color: isDisabled ? theme.colors.status.disabled.default : textColor || theme.colors.status[state].onsurface,
             isDisabled,
             children: label
           }

package/dist/components/Badge/__stories__/Badge.stories.d.ts

@@ -12,3 +12,5 @@ export declare const Hollow: Story;
 export declare const Disabled: Story;
 export declare const Icon: Story;
 export declare const WithClose: Story;
+export declare const NoIconNoCloseNoHover: Story;
+export declare const Custom: Story;

package/dist/components/Badge/styles.cjs

@@ -6,7 +6,7 @@ const getBorderColor = (theme, state) => {
   }
   return theme.colors.status[state].surface;
 };
-const getGenesisClass = (theme, state, label, disabled) => `
+const getGenesisClass = (theme, state, label, disabled, backgroundColor, textColor, hasHover) => `
   display: flex;
   gap: 4px;
   justify-content: center;
@@ -18,10 +18,10 @@ const getGenesisClass = (theme, state, label, disabled) => `
   padding-right: ${theme.components.badge["right-padding"]}px;
   border-radius: ${theme.components.badge.radius}px;
   border: 1px solid ${getBorderColor(theme, state)};
-  background-color: ${theme.colors.status[state].surface};
+  background-color: ${backgroundColor || theme.colors.status[state].surface};
 
   &:not(:disabled):hover {
-    background-color: ${theme.colors.status[state]["surface-hover"]};
+    ${hasHover ? `background-color: ${theme.colors.status[state]["surface-hover"]};` : ""}
   }
 
   ${disabled ? `
@@ -36,8 +36,24 @@ const getGenesisClass = (theme, state, label, disabled) => `
   ` : ""}
 `;
 const Badge = styled.div`
-  ${({ theme, state, label, disabled }) => {
-  return getGenesisClass(theme, state, label, disabled);
+  ${({
+  theme,
+  state,
+  label,
+  disabled,
+  backgroundColor,
+  textColor,
+  hasHover
+}) => {
+  return getGenesisClass(
+    theme,
+    state,
+    label,
+    disabled,
+    backgroundColor,
+    textColor,
+    hasHover
+  );
 }}
 `;
 exports.Badge = Badge;

package/dist/components/Badge/styles.d.ts

@@ -5,7 +5,10 @@ interface StyledBadgeProps {
     state?: State;
     label?: string;
     disabled?: boolean;
+    backgroundColor?: string;
+    textColor?: string;
+    hasHover?: boolean;
 }
-export declare const getGenesisClass: (theme: GenesisTheme, state: State, label?: string, disabled?: boolean) => string;
+export declare const getGenesisClass: (theme: GenesisTheme, state: State, label?: string, disabled?: boolean, backgroundColor?: string, textColor?: string, hasHover?: boolean) => string;
 export declare const Badge: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledBadgeProps>> & string;
 export {};

package/dist/components/Badge/styles.js

@@ -5,7 +5,7 @@ const getBorderColor = (theme, state) => {
   }
   return theme.colors.status[state].surface;
 };
-const getGenesisClass = (theme, state, label, disabled) => `
+const getGenesisClass = (theme, state, label, disabled, backgroundColor, textColor, hasHover) => `
   display: flex;
   gap: 4px;
   justify-content: center;
@@ -17,10 +17,10 @@ const getGenesisClass = (theme, state, label, disabled) => `
   padding-right: ${theme.components.badge["right-padding"]}px;
   border-radius: ${theme.components.badge.radius}px;
   border: 1px solid ${getBorderColor(theme, state)};
-  background-color: ${theme.colors.status[state].surface};
+  background-color: ${backgroundColor || theme.colors.status[state].surface};
 
   &:not(:disabled):hover {
-    background-color: ${theme.colors.status[state]["surface-hover"]};
+    ${hasHover ? `background-color: ${theme.colors.status[state]["surface-hover"]};` : ""}
   }
 
   ${disabled ? `
@@ -35,8 +35,24 @@ const getGenesisClass = (theme, state, label, disabled) => `
   ` : ""}
 `;
 const Badge = styled.div`
-  ${({ theme, state, label, disabled }) => {
-  return getGenesisClass(theme, state, label, disabled);
+  ${({
+  theme,
+  state,
+  label,
+  disabled,
+  backgroundColor,
+  textColor,
+  hasHover
+}) => {
+  return getGenesisClass(
+    theme,
+    state,
+    label,
+    disabled,
+    backgroundColor,
+    textColor,
+    hasHover
+  );
 }}
 `;
 export {

package/dist/components/Table/TableControls/PrimaryTableControlsRow.cjs

@@ -3,7 +3,7 @@ var jsxRuntime = require("react/jsx-runtime");
 var index$1 = require("../../../node_modules/react-icons/hi2/index.cjs");
 var index = require("../../../node_modules/react-icons/hi/index.cjs");
 var index$2 = require("../../../node_modules/react-icons/fi/index.cjs");
-var index$3 = require("../../../_virtual/index6.cjs");
+var index$3 = require("../../../_virtual/index5.cjs");
 var Input = require("../../Input/Input.cjs");
 var UtilityButton = require("../../Button/UtilityButton.cjs");
 var Typography = require("../../Typography/Typography.cjs");

package/dist/components/Table/TableControls/PrimaryTableControlsRow.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { HiMiniAdjustmentsVertical } from "../../../node_modules/react-icons/hi2/index.js";
 import { HiSearch, HiOutlineSortDescending, HiOutlineSortAscending } from "../../../node_modules/react-icons/hi/index.js";
 import { FiSettings } from "../../../node_modules/react-icons/fi/index.js";
-import debounce from "../../../_virtual/index6.js";
+import debounce from "../../../_virtual/index5.js";
 import Input from "../../Input/Input.js";
 import UtilityButton from "../../Button/UtilityButton.js";
 import Typography from "../../Typography/Typography.js";

package/dist/node_modules/antd/es/typography/hooks/useCopyClick.cjs

@@ -1,6 +1,6 @@
 "use strict";
 var React = require("react");
-var index = require("../../../../../_virtual/index5.cjs");
+var index = require("../../../../../_virtual/index6.cjs");
 var useEvent = require("../../../../rc-util/es/hooks/useEvent.cjs");
 var toList = require("../../_util/toList.cjs");
 function _interopNamespaceDefault(e) {

package/dist/node_modules/antd/es/typography/hooks/useCopyClick.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import copy from "../../../../../_virtual/index5.js";
+import copy from "../../../../../_virtual/index6.js";
 import useEvent from "../../../../rc-util/es/hooks/useEvent.js";
 import toList from "../../_util/toList.js";
 var __awaiter = function(thisArg, _arguments, P, generator) {

package/dist/utils/icon-util.cjs

@@ -44,10 +44,13 @@ const getIconColor = (state, theme) => {
       return theme.colors.status.info.onsurface;
   }
 };
-const getBadgeStateIcon = (state, color, isFilled = true) => {
-  if (!state) {
+const getBadgeStateIcon = (state, color, isFilled = true, hasIcon = true, customIcon = null) => {
+  if (!state || !hasIcon) {
     return null;
   }
+  if (customIcon) {
+    return customIcon;
+  }
   if (!isFilled) {
     switch (state) {
       // isFilled is false

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 getIconColor: (state: any, theme: any) => any;
-export declare const getBadgeStateIcon: (state: any, color: any, isFilled?: boolean) => import("react/jsx-runtime").JSX.Element;
+export declare const getBadgeStateIcon: (state: any, color: any, isFilled?: boolean, hasIcon?: boolean, customIcon?: any) => any;

package/dist/utils/icon-util.js

@@ -43,10 +43,13 @@ const getIconColor = (state, theme) => {
       return theme.colors.status.info.onsurface;
   }
 };
-const getBadgeStateIcon = (state, color, isFilled = true) => {
-  if (!state) {
+const getBadgeStateIcon = (state, color, isFilled = true, hasIcon = true, customIcon = null) => {
+  if (!state || !hasIcon) {
     return null;
   }
+  if (customIcon) {
+    return customIcon;
+  }
   if (!isFilled) {
     switch (state) {
       // isFilled is false

package/package.json

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