@gobolt/genesis 0.0.10 → 0.1.0

package/dist/components/Radio/Radio.js

@@ -1,19 +1,35 @@
 import "react/jsx-runtime";
 import "react";
-import "../../constants/index.js";
-import "../../styled-components.browser.esm-CZ1XM4o4.js";
+import "../Avatar/styles.js";
 import "../Badge/styles.js";
+import "../../providers/BreakpointThemeProvider.js";
+import { g as N, b as O } from "../../Typography-CoZ5qD-t.js";
+import "../../styled-components.browser.esm-CZ1XM4o4.js";
+import "../../constants/index.js";
 import "../Breadcrumb/styles.js";
-import "../../providers/ThemeProvider.js";
-import { k as w, f as y } from "../../Typography-aGoDUl4R.js";
 import "../Button/styles.js";
+import "../Card/styles.js";
 import "../Checkbox/styles.js";
 import "../ErrorBoundaryFallback/styles.js";
 import "../Input/styles.js";
+import "../Layout/Content/styles.js";
 import "../Message/styles.js";
+import "../Notification/NotificationBadge/styles.js";
 import "../Notification/styles.js";
+import "../../styles-CWdUpZom.js";
+import "../Progress/styles.js";
+import "../../styles/global-styles.js";
+import "../Row/styles.js";
+import "../Row/RowLabelValue/styles.js";
+import "../Row/RowActions/styles.js";
+import "../SegmentedControls/styles.js";
 import "../Select/styles.js";
+import "../Switch/styles.js";
+import "../../styles-qerRs7Rn.js";
+import "../Tabs/styles.js";
+import "../Tile/styles.js";
 import "../Toast/styles.js";
+import "../Tooltip/styles.js";
 import "./states/RadioChecked.js";
 import "./states/RadioCheckedHover.js";
 import "./states/RadioCheckedFocussed.js";
@@ -23,6 +39,6 @@ import "./states/RadioUncheckedHover.js";
 import "./states/RadioUncheckedFocussed.js";
 import "./states/RadioUncheckedDisabled.js";
 export {
-  w as RadioWrapper,
-  y as default
+  N as RadioWrapper,
+  O as default
 };

package/dist/components/Radio/RadioGroup.js

@@ -1,5 +1,5 @@
 import { jsx as l } from "react/jsx-runtime";
-import { f } from "../../Typography-aGoDUl4R.js";
+import { b as f } from "../../Typography-CoZ5qD-t.js";
 const u = ({
   selectedId: d,
   options: r,

package/dist/components/Radio/__tests__/RadioGroup.test.js

@@ -1,5 +1,5 @@
 import { jsx as i } from "react/jsx-runtime";
-import { v as n, f as r, a as d } from "../../../setup-BvfREoHl.js";
+import { v as n, f as r, a as d } from "../../../setup-CUbCc8fQ.js";
 import l from "../RadioGroup.js";
 describe("<RadioGroup />", () => {
   const t = {

package/dist/components/Radio/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './RadioGroup';
 export type { RadioGroupProps } from './RadioGroup';
+export type { RadioData } from './RadioGroup';

package/dist/components/Row/Row.d.ts

@@ -0,0 +1,14 @@
+import { BadgeProps } from '../..';
+import { Action } from './RowActions/RowActions';
+
+export interface RowProps {
+    label: string;
+    value?: string;
+    isFullWidth?: boolean;
+    actions?: Action[] | null;
+    hasBorder?: boolean;
+    isLoading?: boolean;
+    badgeProps?: BadgeProps;
+}
+declare const Row: ({ label, value, isFullWidth, actions, hasBorder, isLoading, badgeProps, }: RowProps) => import("react/jsx-runtime").JSX.Element;
+export default Row;

package/dist/components/Row/Row.js

@@ -0,0 +1,38 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { Column as u } from "./styles.js";
+import "../../providers/BreakpointThemeProvider.js";
+import { u as a } from "../../Typography-CoZ5qD-t.js";
+import { RowLabelValue as p } from "./RowLabelValue/RowLabelValue.js";
+import { RowActions as n } from "./RowActions/RowActions.js";
+const j = ({
+  label: m,
+  value: s,
+  isFullWidth: o = !1,
+  actions: r,
+  hasBorder: t = !0,
+  isLoading: l = !1,
+  badgeProps: f = null
+}) => (a(), /* @__PURE__ */ i(
+  u,
+  {
+    $hasBorder: t,
+    actions: r,
+    $isFullWidth: o,
+    children: [
+      /* @__PURE__ */ e(
+        p,
+        {
+          label: m,
+          value: s,
+          isFullWidth: o,
+          isLoading: l,
+          badgeProps: f
+        }
+      ),
+      /* @__PURE__ */ e(n, { actions: r })
+    ]
+  }
+));
+export {
+  j as default
+};

package/dist/components/Row/RowActions/RowActions.d.ts

@@ -0,0 +1,9 @@
+export type Action = {
+    label: string;
+    onClick: () => void;
+};
+interface RowActionsProps {
+    actions: Action[] | null;
+}
+export declare const RowActions: ({ actions }: RowActionsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Row/RowActions/RowActions.js

@@ -0,0 +1,59 @@
+import { jsx as o } from "react/jsx-runtime";
+import "../../Avatar/styles.js";
+import "../../Badge/styles.js";
+import "../../../providers/BreakpointThemeProvider.js";
+import { a as p } from "../../../Typography-CoZ5qD-t.js";
+import { TYPOGRAPHY_VARIANT as m } from "../../../constants/index.js";
+import "../../Breadcrumb/styles.js";
+import "../../Button/styles.js";
+import "../../Card/styles.js";
+import "../../Checkbox/styles.js";
+import "react";
+import "../../ErrorBoundaryFallback/styles.js";
+import "../../Input/styles.js";
+import "../../Layout/Content/styles.js";
+import "../../Message/styles.js";
+import "../../Notification/NotificationBadge/styles.js";
+import "../../Notification/styles.js";
+import "../../../styles-CWdUpZom.js";
+import "../../Progress/styles.js";
+import "../../../styles/global-styles.js";
+import "../styles.js";
+import "../RowLabelValue/styles.js";
+import "../../SegmentedControls/styles.js";
+import "../../Select/styles.js";
+import "../../Switch/styles.js";
+import "../../../styles-qerRs7Rn.js";
+import "../../Tabs/styles.js";
+import "../../Tile/styles.js";
+import "../../Toast/styles.js";
+import "../../Tooltip/styles.js";
+import { ActionsContainer as n, RowActionButton as e } from "./styles.js";
+const c = ({ action: { onClick: r, label: t } }) => /* @__PURE__ */ o(
+  e,
+  {
+    onClick: r,
+    style: {
+      cursor: "pointer",
+      display: "100%",
+      alignItems: "center",
+      background: "#fff",
+      borderRadius: 4,
+      padding: 8,
+      boxShadow: "0px 1px 2px 0px #00000026",
+      width: "100%",
+      border: "1px solid #cbcbcb"
+    },
+    children: /* @__PURE__ */ o(
+      p,
+      {
+        variant: m.label1,
+        isFullWidth: !0,
+        children: t
+      }
+    )
+  }
+), _ = ({ actions: r }) => r ? /* @__PURE__ */ o(n, { children: r.map((t, i) => /* @__PURE__ */ o(c, { action: t }, i)) }) : null;
+export {
+  _ as RowActions
+};

package/dist/components/Row/RowActions/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const ActionsContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const RowActionButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;

package/dist/components/Row/RowActions/styles.js

@@ -0,0 +1,32 @@
+import { d as o } from "../../../styled-components.browser.esm-CZ1XM4o4.js";
+const r = o.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+  padding: 0px 26px;
+`, d = o.button`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  background: #fff;
+  border: 1px solid #cbcbcb !important;
+  border-radius: 4px;
+  padding: 8px;
+  box-shadow: ${({ theme: n }) => n.shadows.general[1]};
+  width: 100%;
+  border: none;
+
+  &:hover {
+    background: #fafafa;
+  }
+
+  &:active {
+    background: #f0f0f0;
+  }
+`;
+export {
+  r as ActionsContainer,
+  d as RowActionButton
+};

package/dist/components/Row/RowLabelValue/RowLabelValue.d.ts

@@ -0,0 +1,11 @@
+import { BadgeProps } from '../../..';
+
+interface RowLabelValueProps {
+    label: string;
+    value: string;
+    isLoading?: boolean;
+    isFullWidth?: boolean;
+    badgeProps: BadgeProps | null;
+}
+export declare const RowLabelValue: ({ label, value, isLoading, isFullWidth, badgeProps, }: RowLabelValueProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Row/RowLabelValue/RowLabelValue.js

@@ -0,0 +1,62 @@
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import "../../Avatar/styles.js";
+import h from "../../Badge/Badge.js";
+import "../../Breadcrumb/styles.js";
+import "../../../providers/BreakpointThemeProvider.js";
+import { u, a as t } from "../../../Typography-CoZ5qD-t.js";
+import "../../Button/styles.js";
+import "../../Card/styles.js";
+import "../../Checkbox/styles.js";
+import { TYPOGRAPHY_VARIANT as m } from "../../../constants/index.js";
+import "react";
+import "../../ErrorBoundaryFallback/styles.js";
+import "../../Input/styles.js";
+import "../../Layout/Content/styles.js";
+import "../../Message/styles.js";
+import "../../Notification/NotificationBadge/styles.js";
+import "../../Notification/styles.js";
+import "../../../styles-CWdUpZom.js";
+import "../../Progress/styles.js";
+import "../styles.js";
+import "../RowActions/styles.js";
+import "../../SegmentedControls/styles.js";
+import "../../Select/styles.js";
+import "../../Switch/styles.js";
+import "../../../styles-qerRs7Rn.js";
+import "../../Tabs/styles.js";
+import "../../Tile/styles.js";
+import "../../Toast/styles.js";
+import "../../Tooltip/styles.js";
+import "../../../styles/global-styles.js";
+import { RowSkeleton as f } from "./RowSkeleton.js";
+import { RowLabelValue as g } from "./styles.js";
+const Q = ({
+  label: p,
+  value: e,
+  isLoading: l,
+  isFullWidth: o,
+  badgeProps: i
+}) => {
+  const { theme: a } = u(), n = (c, s) => c ? /* @__PURE__ */ r(h, { ...i }) : /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
+    t,
+    {
+      variant: m.label1,
+      style: { lineHeight: "1.5" },
+      children: s
+    }
+  ) });
+  return /* @__PURE__ */ d(g, { $isFullWidth: o, children: [
+    /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
+      t,
+      {
+        variant: m.label2,
+        color: a.colors.onsurface["copy-light"],
+        children: p
+      }
+    ) }),
+    /* @__PURE__ */ r("div", { children: l ? /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(f, { isFullWidth: o }) }) : n(i, e) })
+  ] });
+};
+export {
+  Q as RowLabelValue
+};

package/dist/components/Row/RowLabelValue/RowSkeleton.d.ts

@@ -0,0 +1,3 @@
+export declare const RowSkeleton: ({ isFullWidth }: {
+    isFullWidth: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Row/RowLabelValue/RowSkeleton.js

@@ -0,0 +1,24 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Skeleton as e } from "./styles.js";
+const l = ({ isFullWidth: r }) => r ? /* @__PURE__ */ t("div", { style: { width: 200 }, children: /* @__PURE__ */ t(
+  e,
+  {
+    active: !0,
+    paragraph: { rows: 2 },
+    title: !1,
+    avatar: !1,
+    loading: !0
+  }
+) }) : /* @__PURE__ */ t("div", { style: { width: 150 }, children: /* @__PURE__ */ t(
+  e,
+  {
+    active: !0,
+    paragraph: { rows: 1, width: "100%" },
+    avatar: !1,
+    title: !1,
+    loading: !0
+  }
+) });
+export {
+  l as RowSkeleton
+};

package/dist/components/Row/RowLabelValue/styles.d.ts

@@ -0,0 +1,15 @@
+interface StyledRowLabelValueProps {
+    $isFullWidth?: boolean;
+}
+export declare const getGenesisRowLabelValueClass: ({ components }: {
+    components: any;
+}, $isFullWidth?: boolean) => string;
+export declare const RowLabelValue: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledRowLabelValueProps>> & string;
+export declare const Skeleton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('antd').SkeletonProps, never>> & string & Omit<import('react').FC<import('antd').SkeletonProps> & {
+    Button: import('react').FC<import('antd/es/skeleton/Button').SkeletonButtonProps>;
+    Avatar: import('react').FC<import('antd/es/skeleton/Avatar').AvatarProps>;
+    Input: import('react').FC<import('antd/es/skeleton/Input').SkeletonInputProps>;
+    Image: import('react').FC<import('antd/es/skeleton/Image').SkeletonImageProps>;
+    Node: import('react').FC<import('antd/es/skeleton/Node').SkeletonNodeProps>;
+}, keyof import('react').Component<any, {}, any>>;
+export {};

package/dist/components/Row/RowLabelValue/styles.js

@@ -0,0 +1,25 @@
+import { d as n } from "../../../styled-components.browser.esm-CZ1XM4o4.js";
+import { S as a } from "../../../Skeleton-BVN4pcVe.js";
+const r = (e) => `${e.row["ver-padding"]}px ${e.row["hor-padding"]}px`, o = ({ components: e }, t = !1) => `
+  display: flex;
+  flex-direction: ${t ? "column" : "row"};
+  align-items:  ${t ? "flex-start" : "center"};
+  justify-content:  ${t ? "flex-start" : "space-between"};
+  width: 100%;
+  padding: ${r(e)};
+  gap: 8px;
+`, s = n.div`
+  ${({ theme: e, $isFullWidth: t }) => o(e, t)}
+`, d = n(a)`
+  && {
+    .ant-skeleton-content .ant-skeleton-paragraph > li {
+      border-radius: 50px !important;
+      height: 16px !important;
+    }
+  }
+`;
+export {
+  s as RowLabelValue,
+  d as Skeleton,
+  o as getGenesisRowLabelValueClass
+};

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

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as Row } from '../Row';
+
+declare const meta: Meta<typeof Row>;
+export default meta;
+type Story = StoryObj<typeof Row>;
+export declare const Default: Story;
+export declare const Badge: Story;
+export declare const FullWidth: Story;
+export declare const Loading: Story;
+export declare const LoadingFullWidth: Story;
+export declare const WithActions: Story;
+export declare const MultipleRows: Story;

package/dist/components/Row/__tests__/Row.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,16 @@
+import { jsx as r } from "react/jsx-runtime";
+import { s as t, a as s } from "../../../setup-CUbCc8fQ.js";
+import a from "../Row.js";
+describe("<Row />", () => {
+  let e;
+  beforeEach(() => {
+    e = {
+      label: "Label",
+      value: "Value"
+    };
+  });
+  const o = () => s(/* @__PURE__ */ r(a, { ...e }));
+  it("should render the Row", () => {
+    o(), expect(t.getByText("Label")).toBeInTheDocument();
+  });
+});

package/dist/components/Row/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Row';
+export type { RowProps } from './Row';

package/dist/components/Row/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "./Row.js";
+export {
+  o as default
+};

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

@@ -0,0 +1,15 @@
+import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
+
+interface StyledColumnProps {
+    theme?: GenesisTheme;
+    $hasBorder?: boolean;
+    $isFullWidth?: boolean;
+    actions?: unknown;
+}
+export declare const getGenesisColumnClass: ({ colors, borderRadius, sizing }: {
+    colors: any;
+    borderRadius: any;
+    sizing: any;
+}, $hasBorder?: boolean, $isFullWidth?: boolean, actions?: any) => string;
+export declare const Column: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledColumnProps>> & string;
+export {};

package/dist/components/Row/styles.js

@@ -0,0 +1,15 @@
+import { d as i } from "../../styled-components.browser.esm-CZ1XM4o4.js";
+const l = (t) => `1px solid ${t.surface["border-light"]}`, d = ({ colors: t, borderRadius: o, sizing: r }, e = !1, n = !1, s = null) => `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border-bottom: ${e ? l(t) : "none"};
+  padding-bottom:${s ? "24px" : "0"};
+  align-items: ${n ? "flex-start !important" : "center"};
+`, m = i.div`
+  ${({ theme: t, $hasBorder: o, $isFullWidth: r, actions: e }) => d(t, o, r, e)}
+`;
+export {
+  m as Column,
+  d as getGenesisColumnClass
+};

package/dist/components/SegmentedControls/SegmentedControls.d.ts

@@ -0,0 +1,12 @@
+export interface SegmentedControlsProps {
+    options: {
+        label: string;
+        id: string;
+        icon?: JSX.Element;
+    }[];
+    onChange: (value: string) => void;
+    selectedTabId: string;
+    isScaled?: boolean;
+}
+declare const SegmentedControls: ({ options, onChange, selectedTabId, isScaled, }: SegmentedControlsProps) => import("react/jsx-runtime").JSX.Element;
+export default SegmentedControls;

package/dist/components/SegmentedControls/SegmentedControls.js

@@ -0,0 +1,26 @@
+import { jsx as m } from "react/jsx-runtime";
+import { SegmentedControls as p } from "./styles.js";
+const i = ({
+  options: o,
+  onChange: t,
+  selectedTabId: e,
+  isScaled: n = !1
+}) => {
+  const s = o.map(({ label: r, id: a, icon: l }) => ({
+    label: r,
+    value: a,
+    icon: l
+  }));
+  return /* @__PURE__ */ m(
+    p,
+    {
+      options: s,
+      onChange: t,
+      value: e,
+      block: n
+    }
+  );
+};
+export {
+  i as default
+};

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as SegmentedControls } from '../SegmentedControls';
+
+declare const meta: Meta<typeof SegmentedControls>;
+export default meta;
+type Story = StoryObj<typeof SegmentedControls>;
+export declare const Default: Story;
+export declare const WithIcons: Story;
+export declare const Scaled: Story;

package/dist/components/SegmentedControls/__tests__/SegmentedControls.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,24 @@
+import { jsx as i } from "react/jsx-runtime";
+import { a as r } from "../../../setup-CUbCc8fQ.js";
+import p from "../SegmentedControls.js";
+describe("<SegmentedControls />", () => {
+  let t;
+  beforeEach(() => {
+    t = {
+      options: [
+        { label: "Option 1", id: "1" },
+        { label: "Option 2", id: "2" }
+      ],
+      selectedTabId: "1",
+      onChange: vi.fn()
+    };
+  });
+  const o = () => r(/* @__PURE__ */ i(p, { ...t }));
+  it("should render with provided options", () => {
+    const { getByText: e } = o();
+    expect(e("Option 1")).toBeInTheDocument(), expect(e("Option 2")).toBeInTheDocument();
+  }), it("should highlight the selected option", () => {
+    const { getByText: e } = o(), n = e("Option 1");
+    expect(n).toHaveAttribute("aria-selected", "true");
+  });
+});

package/dist/components/SegmentedControls/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './SegmentedControls';
+export type { SegmentedControlsProps } from './SegmentedControls';

package/dist/components/SegmentedControls/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "./SegmentedControls.js";
+export {
+  o as default
+};

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

@@ -0,0 +1,12 @@
+import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
+
+interface StyledSegmentedControlsProps {
+    theme?: GenesisTheme;
+    type?: "primary" | "secondary";
+    state?: "active" | "disabled";
+}
+export declare const getGenesisClass: ({ colors, borderRadius, sizing }: GenesisTheme, type?: string, state?: string) => string;
+export declare const SegmentedControls: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<import('antd').SegmentedProps<unknown> & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: import('react').Ref<HTMLDivElement>;
+}, StyledSegmentedControlsProps>> & string & Omit<(<ValueType>(props: import('antd').SegmentedProps<ValueType> & React.RefAttributes<HTMLDivElement>) => ReturnType<import('react').ForwardRefExoticComponent<Omit<import('antd').SegmentedProps<import('antd/es/segmented').SegmentedValue>, "ref"> & import('react').RefAttributes<HTMLDivElement>>>) & Pick<import('react').FC<{}>, "displayName">, keyof import('react').Component<any, {}, any>>;
+export {};