@gobolt/genesis 0.0.7 → 0.0.9

package/dist/components/Notification/NotificationRightChevron.d.ts

@@ -0,0 +1,2 @@
+declare const NotificationRightChevron: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default NotificationRightChevron;

package/dist/components/Notification/NotificationRightChevron.js

@@ -0,0 +1,23 @@
+import { jsx as l } from "react/jsx-runtime";
+const t = (e) => /* @__PURE__ */ l(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 25,
+    fill: "none",
+    ...e,
+    children: /* @__PURE__ */ l(
+      "path",
+      {
+        fill: "#6C6C6C",
+        fillRule: "evenodd",
+        d: "M8.752 18.148a1.2 1.2 0 0 1 0-1.697l3.951-3.951-3.951-3.951a1.2 1.2 0 1 1 1.697-1.698l4.8 4.8a1.2 1.2 0 0 1 0 1.697l-4.8 4.8a1.2 1.2 0 0 1-1.697 0Z",
+        clipRule: "evenodd"
+      }
+    )
+  }
+);
+export {
+  t as default
+};

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

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as Notification } from '../Notification';
+
+declare const meta: Meta<typeof Notification>;
+export default meta;
+type Story = StoryObj<typeof Notification>;
+export declare const Default: Story;
+export declare const UnreadVsRead: Story;
+export declare const WithoutFormattedDate: Story;
+export declare const WithActionWithoutArrow: Story;

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

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

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

@@ -0,0 +1,15 @@
+import { jsx as t } from "react/jsx-runtime";
+import { s, a as i } from "../../../setup-BvfREoHl.js";
+import n from "../Notification.js";
+describe("<Notification />", () => {
+  let e;
+  beforeEach(() => {
+    e = {
+      message: "Test notification message"
+    };
+  });
+  const o = () => i(/* @__PURE__ */ t(n, { ...e }));
+  it("should render the notification message", () => {
+    o(), expect(s.getByText(e.message)).toBeInTheDocument();
+  });
+});

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

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

package/dist/components/Notification/index.js

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

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

@@ -0,0 +1,16 @@
+type NotificationRowProps = {
+    state: string;
+    size: string;
+    isUnread: boolean;
+};
+export declare const NotificationRow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, NotificationRowProps>> & string;
+export declare const NotificationContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    size: string;
+}>> & string;
+export declare const NotificationUnread: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    state: string;
+    size: string;
+}>> & string;
+export declare const NotificationActionButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const ChevronButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export {};

package/dist/components/Notification/styles.js

@@ -0,0 +1,65 @@
+import { d as i } from "../../styled-components.browser.esm-CZ1XM4o4.js";
+import { SIZE as e } from "../../constants/index.js";
+const a = i.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: ${({ theme: t }) => t.sizing.Size4}px;
+  padding: ${({ theme: t }) => t.sizing.Size3}px;
+  pointer-events: none;
+  cursor: default;
+  border-radius: ${({ theme: t }) => t.borderRadius.BorderRadiusSm}px;
+  height: 85px;
+  width: 500px;
+  background-color: ${({ theme: t, isUnread: o }) => o ? "#F4F4F4" : t.colors.surface.default};
+`, p = i.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: t }) => t.sizing.Size2}px;
+  flex: 1;
+  max-width: 500px;
+
+  .ant-typography {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-family: ${({ theme: t }) => t.typography.fontFamily};
+    line-height: ${({ theme: t, size: o }) => o === e.standard ? t.typography.lineHeight : "16px"};
+  }
+`, s = i.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: ${({ theme: t }) => t.colors.status.info.default};
+  border-radius: 50%;
+  height: 8px;
+  width: 8px;
+  aspect-ratio: 1;
+  min-height: 8px;
+`, n = (t) => `1px solid ${t.colors.interactive.utility.border}`, c = i.button`
+  border: ${({ theme: t }) => n(t)};
+  background: "none";
+  cursor: "pointer";
+  pointer-events: "all";
+  color: ${({ theme: t }) => t.colors.interactive.utility.onsurface};
+  border-radius: ${({ theme: t }) => t.borderRadius.BorderRadiusSm};
+  padding-top: "2px";
+  padding-bottom: "2px";
+  padding-left: ${({ theme: t }) => t.components.utilityButton.padding.horPadding};
+  padding-right: ${({ theme: t }) => t.components.utilityButton.padding.horPadding};
+`, l = i.button`
+  text-decoration: underline;
+  border: none;
+  background: none;
+  cursor: pointer;
+  pointer-events: all;
+`;
+export {
+  l as ChevronButton,
+  c as NotificationActionButton,
+  p as NotificationContent,
+  a as NotificationRow,
+  s as NotificationUnread
+};

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

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+
+interface RadioProps {
+    id: string;
+    label?: string;
+    selectedId: string;
+    onChange: (id: string) => void;
+    isDisabled?: boolean;
+}
+export declare const RadioWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isDisabled: boolean;
+}>> & string;
+declare const Radio: ({ id, label, selectedId, onChange, isDisabled }: RadioProps) => import("react/jsx-runtime").JSX.Element;
+export default Radio;

package/dist/components/Radio/Radio.js

@@ -0,0 +1,28 @@
+import "react/jsx-runtime";
+import "react";
+import "../../constants/index.js";
+import "../../styled-components.browser.esm-CZ1XM4o4.js";
+import "../Badge/styles.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 "../Checkbox/styles.js";
+import "../ErrorBoundaryFallback/styles.js";
+import "../Input/styles.js";
+import "../Message/styles.js";
+import "../Notification/styles.js";
+import "../Select/styles.js";
+import "../Toast/styles.js";
+import "./states/RadioChecked.js";
+import "./states/RadioCheckedHover.js";
+import "./states/RadioCheckedFocussed.js";
+import "./states/RadioCheckedDisabled.js";
+import "./states/RadioUnchecked.js";
+import "./states/RadioUncheckedHover.js";
+import "./states/RadioUncheckedFocussed.js";
+import "./states/RadioUncheckedDisabled.js";
+export {
+  w as RadioWrapper,
+  y as default
+};

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

@@ -0,0 +1,12 @@
+export type RadioData = {
+    id: string;
+    label: string;
+};
+export interface RadioGroupProps {
+    options: RadioData[];
+    selectedId: string;
+    onChange: (item: RadioData) => void;
+    isDisabled?: boolean;
+}
+declare const RadioGroup: ({ selectedId, options, onChange, isDisabled, }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default RadioGroup;

package/dist/components/Radio/RadioGroup.js

@@ -0,0 +1,33 @@
+import { jsx as l } from "react/jsx-runtime";
+import { f } from "../../Typography-aGoDUl4R.js";
+const u = ({
+  selectedId: d,
+  options: r,
+  onChange: a,
+  isDisabled: e = !1
+}) => /* @__PURE__ */ l(
+  "div",
+  {
+    role: "radiogroup",
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      border: "none",
+      cursor: e ? "not-allowed" : "pointer"
+    },
+    children: r.map((o) => /* @__PURE__ */ l(
+      f,
+      {
+        id: o.id,
+        selectedId: d,
+        label: o.label,
+        onChange: (i) => a(r.find((n) => n.id === i)),
+        isDisabled: e
+      },
+      o.id
+    ))
+  }
+);
+export {
+  u as default
+};

package/dist/components/Radio/__stories__/RadioGroup.stories.d.ts

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

package/dist/components/Radio/__tests__/RadioGroup.test.d.ts

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

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

@@ -0,0 +1,30 @@
+import { jsx as i } from "react/jsx-runtime";
+import { v as n, f as r, a as d } from "../../../setup-BvfREoHl.js";
+import l from "../RadioGroup.js";
+describe("<RadioGroup />", () => {
+  const t = {
+    name: "test-radio-group",
+    selectedId: "1",
+    onChange: n.fn(),
+    options: [
+      { id: "1", label: "Option 1" },
+      { id: "2", label: "Option 2" },
+      { id: "3", label: "Option 3" }
+    ]
+  }, a = (e = t) => d(/* @__PURE__ */ i(l, { ...e }));
+  beforeEach(() => {
+    n.clearAllMocks();
+  }), it("should render all radio options", () => {
+    const { getAllByRole: e } = a(), o = e("radio");
+    expect(o).toHaveLength(3);
+  }), it("should call onChange when a radio is selected", () => {
+    const e = n.fn(), { getByText: o } = a({ ...t, onChange: e });
+    r.click(o("Option 1")), expect(e).toHaveBeenCalledWith({ id: "1", label: "Option 1" });
+  }), it("should mark the correct radio as checked based on value prop", () => {
+    const { getByRole: e } = a({
+      ...t,
+      selectedId: "2"
+    }), o = e("radio", { name: "Option 2" });
+    expect(o).toHaveAttribute("aria-checked", "true");
+  });
+});

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

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

package/dist/components/Radio/index.js

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

package/dist/components/Radio/states/RadioChecked.d.ts

@@ -0,0 +1,2 @@
+declare const RadioChecked: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default RadioChecked;

package/dist/components/Radio/states/RadioChecked.js

@@ -0,0 +1,18 @@
+import { jsxs as e, jsx as i } from "react/jsx-runtime";
+const h = (t) => /* @__PURE__ */ e(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 20,
+    height: 20,
+    fill: "none",
+    ...t,
+    children: [
+      /* @__PURE__ */ i("rect", { width: 20, height: 20, fill: "#384DF6", rx: 10 }),
+      /* @__PURE__ */ i("circle", { cx: 10, cy: 10, r: 4, fill: "#fff" })
+    ]
+  }
+);
+export {
+  h as default
+};

package/dist/components/Radio/states/RadioCheckedDisabled.d.ts

@@ -0,0 +1,2 @@
+declare const RadioCheckedDisabled: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default RadioCheckedDisabled;

package/dist/components/Radio/states/RadioCheckedDisabled.js

@@ -0,0 +1,18 @@
+import { jsxs as e, jsx as l } from "react/jsx-runtime";
+const r = (c) => /* @__PURE__ */ e(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 20,
+    height: 20,
+    fill: "none",
+    ...c,
+    children: [
+      /* @__PURE__ */ l("circle", { cx: 10, cy: 10, r: 9.5, fill: "#F4F4F4", stroke: "#9A9A9A" }),
+      /* @__PURE__ */ l("circle", { cx: 10, cy: 10, r: 4, fill: "#6C6C6C" })
+    ]
+  }
+);
+export {
+  r as default
+};

package/dist/components/Radio/states/RadioCheckedFocussed.d.ts

@@ -0,0 +1,2 @@
+declare const RadioCheckedFocussed: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default RadioCheckedFocussed;

package/dist/components/Radio/states/RadioCheckedFocussed.js

@@ -0,0 +1,30 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+const r = (e) => /* @__PURE__ */ i(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 26,
+    height: 26,
+    fill: "none",
+    ...e,
+    children: [
+      /* @__PURE__ */ t("rect", { width: 20, height: 20, x: 3, y: 3, fill: "#384DF6", rx: 10 }),
+      /* @__PURE__ */ t("circle", { cx: 13, cy: 13, r: 4, fill: "#fff" }),
+      /* @__PURE__ */ t(
+        "rect",
+        {
+          width: 24,
+          height: 24,
+          x: 1,
+          y: 1,
+          stroke: "#384DF6",
+          strokeWidth: 2,
+          rx: 12
+        }
+      )
+    ]
+  }
+);
+export {
+  r as default
+};

package/dist/components/Radio/states/RadioCheckedHover.d.ts

@@ -0,0 +1,2 @@
+declare const RadioCheckedHover: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default RadioCheckedHover;

package/dist/components/Radio/states/RadioCheckedHover.js

@@ -0,0 +1,18 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+const r = (i) => /* @__PURE__ */ t(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 20,
+    height: 20,
+    fill: "none",
+    ...i,
+    children: [
+      /* @__PURE__ */ e("rect", { width: 20, height: 20, fill: "#384DF6", rx: 10 }),
+      /* @__PURE__ */ e("circle", { cx: 10, cy: 10, r: 4, fill: "#fff" })
+    ]
+  }
+);
+export {
+  r as default
+};

package/dist/components/Radio/states/RadioUnchecked.d.ts

@@ -0,0 +1,2 @@
+declare const RadioUnchecked: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default RadioUnchecked;

package/dist/components/Radio/states/RadioUnchecked.js

@@ -0,0 +1,15 @@
+import { jsx as e } from "react/jsx-runtime";
+const i = (t) => /* @__PURE__ */ e(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 20,
+    height: 20,
+    fill: "none",
+    ...t,
+    children: /* @__PURE__ */ e("circle", { cx: 10, cy: 10, r: 9.5, fill: "#fff", stroke: "#9A9A9A" })
+  }
+);
+export {
+  i as default
+};

package/dist/components/Radio/states/RadioUncheckedDisabled.d.ts

@@ -0,0 +1,2 @@
+declare const RadioUncheckedDisabled: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default RadioUncheckedDisabled;

package/dist/components/Radio/states/RadioUncheckedDisabled.js

@@ -0,0 +1,15 @@
+import { jsx as e } from "react/jsx-runtime";
+const t = (i) => /* @__PURE__ */ e(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 20,
+    height: 20,
+    fill: "none",
+    ...i,
+    children: /* @__PURE__ */ e("circle", { cx: 10, cy: 10, r: 9.5, fill: "#fff", stroke: "#9A9A9A" })
+  }
+);
+export {
+  t as default
+};

package/dist/components/Radio/states/RadioUncheckedFocussed.d.ts

@@ -0,0 +1,2 @@
+declare const RadioUncheckedFocussed: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default RadioUncheckedFocussed;

package/dist/components/Radio/states/RadioUncheckedFocussed.js

@@ -0,0 +1,29 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+const i = (e) => /* @__PURE__ */ s(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 26,
+    height: 26,
+    fill: "none",
+    ...e,
+    children: [
+      /* @__PURE__ */ t("circle", { cx: 13, cy: 13, r: 9.5, fill: "#fff", stroke: "#9A9A9A" }),
+      /* @__PURE__ */ t(
+        "rect",
+        {
+          width: 24,
+          height: 24,
+          x: 1,
+          y: 1,
+          stroke: "#384DF6",
+          strokeWidth: 2,
+          rx: 12
+        }
+      )
+    ]
+  }
+);
+export {
+  i as default
+};

package/dist/components/Radio/states/RadioUncheckedHover.d.ts

@@ -0,0 +1,2 @@
+declare const RadioUncheckedHover: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default RadioUncheckedHover;

package/dist/components/Radio/states/RadioUncheckedHover.js

@@ -0,0 +1,18 @@
+import { jsxs as l, jsx as c } from "react/jsx-runtime";
+const i = (e) => /* @__PURE__ */ l(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 20,
+    height: 20,
+    fill: "none",
+    ...e,
+    children: [
+      /* @__PURE__ */ c("circle", { cx: 10, cy: 10, r: 9.5, fill: "#fff", stroke: "#9A9A9A" }),
+      /* @__PURE__ */ c("circle", { cx: 10, cy: 10, r: 4, fill: "#6C6C6C" })
+    ]
+  }
+);
+export {
+  i as default
+};

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

@@ -0,0 +1,2 @@
+declare const DropdownChevron: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default DropdownChevron;

package/dist/components/Select/DropdownChevron.js

@@ -0,0 +1,23 @@
+import { jsx as l } from "react/jsx-runtime";
+const d = (e) => /* @__PURE__ */ l(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 20,
+    height: 20,
+    fill: "none",
+    ...e,
+    children: /* @__PURE__ */ l(
+      "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 {
+  d as default
+};

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

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { TYPE, STATE } from '../../constants';
+import { SelectProps as AntSelectProps } from 'antd';
+
+export interface SelectProps extends AntSelectProps {
+    type?: keyof typeof TYPE;
+    state?: keyof typeof STATE;
+}
+interface GenesisSelectProps extends SelectProps, AntSelectProps {
+    options?: {
+        value: string;
+        label: React.ReactNode;
+    }[];
+}
+declare const Select: ({ type, state, ...rest }: GenesisSelectProps) => import("react/jsx-runtime").JSX.Element;
+export default Select;

package/dist/components/Select/Select.js

@@ -0,0 +1,36 @@
+import { jsx as o } from "react/jsx-runtime";
+import s, { useEffect as m } from "react";
+import { useBreakpoint as l } from "../../providers/ThemeProvider.js";
+import { TYPE as p } from "../../constants/index.js";
+import u from "./DropdownChevron.js";
+import { SelectWrapper as i, Select as a, SelectDropdown as f, StyledMenuItem as h } from "./styles.js";
+const E = ({
+  type: t = p.primary,
+  state: r,
+  ...d
+}) => {
+  l();
+  const [c, n] = s.useState(!1);
+  return m(() => {
+    const e = document.createElement("style");
+    return e.textContent = `
+      .ant-select-dropdown {
+        padding: 0px !important;
+      }
+    `, document.head.appendChild(e), () => {
+      document.head.removeChild(e);
+    };
+  }, []), /* @__PURE__ */ o(i, { $isFocused: c, type: t, children: /* @__PURE__ */ o(
+    a,
+    {
+      ...d,
+      suffixIcon: /* @__PURE__ */ o(u, {}),
+      dropdownRender: (e) => /* @__PURE__ */ o(f, { type: t, state: r, children: /* @__PURE__ */ o(h, { type: t, state: r, children: e }) }),
+      onFocus: () => n(!0),
+      onBlur: () => n(!1)
+    }
+  ) });
+};
+export {
+  E as default
+};

package/dist/components/{atoms/select → Select}/__stories__/Select.stories.d.ts

@@ -5,4 +5,6 @@ declare const meta: Meta<typeof Select>;
 export default meta;
 type Story = StoryObj<typeof Select>;
 export declare const Default: Story;
-export declare const DefaultValue: Story;
+export declare const Filled: Story;
+export declare const Focussed: Story;
+export declare const Disabled: Story;

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

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