@gobolt/genesis 0.0.10 → 0.1.0

package/dist/components/Badge/__tests__/Badge.test.js

@@ -1,18 +1,17 @@
-import { jsx as r } from "react/jsx-runtime";
-import d from "../Badge.js";
-import { BADGE as n, STATE as a } from "../../../constants/index.js";
-import { a as m } from "../../../setup-BvfREoHl.js";
+import { jsx as t } from "react/jsx-runtime";
+import { s as n, a as s } from "../../../setup-CUbCc8fQ.js";
+import a from "../Badge.js";
 describe("<Badge />", () => {
   let e;
   beforeEach(() => {
     e = {
-      badge: n.product,
-      state: a.info
+      label: "Hello"
     };
   });
-  const o = () => m(/* @__PURE__ */ r(d, { ...e }));
-  it("should render badge and state elements", () => {
-    const { getByTestId: t } = o();
-    expect(t("Badge")).toBeInTheDocument(), expect(t("BadgeState")).toBeInTheDocument();
+  const r = () => s(/* @__PURE__ */ t(a, { ...e }));
+  it("should render the Badge component", () => {
+    r();
+    const o = n.getByRole("badge");
+    expect(o).toBeInTheDocument();
   });
 });

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

@@ -1,3 +1,12 @@
-export declare const BadgeState: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Badge: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const BadgeWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
+import { State } from './Badge';
+
+interface StyledBadgeProps {
+    theme?: GenesisTheme;
+    state?: State;
+    label?: string;
+    disabled?: boolean;
+}
+export declare const getGenesisClass: (theme: GenesisTheme, state: State, label?: string, disabled?: 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

@@ -1,34 +1,37 @@
-import { d as o } from "../../styled-components.browser.esm-CZ1XM4o4.js";
-const i = o.div`
-  position: relative;
-  display: flex;
-  position: absolute;
-  justify-content: center;
-  align-items: center;
-  top: -10px;
-  left: 16px;
-  width: 20px;
-  height: 20px;
-  border: 2px solid ${({ color: e }) => e};
-  border-radius: 50%;
-  box-sizing: border-box;
-  background-color: white;
-`, r = o.div`
-  display: flex;
-  position: relative;
-`, d = o.div`
+import { d as n } from "../../styled-components.browser.esm-CZ1XM4o4.js";
+const a = (o, r) => r === "hollow" ? o.colors.inputs.surface.border : o.colors.status[r].surface, t = (o, r, d, s) => `
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  border: 1px solid ${({ theme: e }) => e.colors.surface.border};
-  background-color: ${({ theme: e }) => e.colors.surface.default};
+  padding-top: ${o.components.badge["ver-padding"]}px;
+  padding-bottom: ${o.components.badge["ver-padding"]}px;
+  padding-left: ${o.components.badge["left-padding"]}px;
+  padding-right: ${o.components.badge["right-padding"]}px;
+  border-radius: ${o.components.badge.radius}px;
+  border: 1px solid ${a(o, r)};
+  background-color: ${o.colors.status[r].surface};
+  width: ${d ? "auto" : "24px"};
+  height: ${d ? "auto" : "24px"};
+
+  &:not(:disabled):hover {
+    background-color: ${o.colors.status[r]["surface-hover"]};
+  }
+
+  ${s ? `
+    background-color: ${o.colors.status.disabled.surface} !important;
+    border-color: ${o.colors.status.disabled} !important;
+    border: none;
+    cursor: not-allowed;
+
+    &:hover {
+      cursor: not-allowed;
+    }
+  ` : ""}
+`, c = n.div`
+  ${({ theme: o, state: r, label: d, disabled: s }) => t(o, r, d, s)}
 `;
 export {
-  r as Badge,
-  i as BadgeState,
-  d as BadgeWrapper
+  c as Badge,
+  t as getGenesisClass
 };

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -1,7 +1,7 @@
 import { jsx as r } from "react/jsx-runtime";
 import { BreadcrumbWrapper as s, Breadcrumb as i } from "./styles.js";
-import "../../providers/ThemeProvider.js";
-import { u as m } from "../../Typography-aGoDUl4R.js";
+import "../../providers/BreakpointThemeProvider.js";
+import { u as m } from "../../Typography-CoZ5qD-t.js";
 const c = ({ items: e, isDisabled: a = !1 }) => {
   const { breakpoint: o } = m();
   return /* @__PURE__ */ r(s, { $isDisabled: a, children: /* @__PURE__ */ r(i, { items: e, breakpoint: o, role: "navigation" }) });

package/dist/components/Breadcrumb/__tests__/Breadcrumb.test.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import { s, a as c } from "../../../setup-BvfREoHl.js";
+import { s, a as c } from "../../../setup-CUbCc8fQ.js";
 import m from "../Breadcrumb.js";
 const n = [
   { title: "Home", href: "/" },