@temp-spotwork/ui 1.4.3

package/dist/components/molecules/filter/segmented-control/segmented-control.d.ts

@@ -0,0 +1,23 @@
+export type SegmentedControlOption = {
+    id: string;
+    label: string;
+};
+export type SegmentedControlProps = {
+    /**
+     * An array of segment data, including properties for each segment
+     */
+    segments: SegmentedControlOption[];
+    /**
+     * Callback for handling segment clicks
+     */
+    handleClick: (value: string) => void;
+    /**
+     * Whether the segments should be inline
+     */
+    inline?: boolean;
+    /**
+     * Active set for selected segment
+     */
+    activeSegment?: string;
+};
+export declare function SegmentedControl({ segments, handleClick, inline, activeSegment }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/filter/segmented-control/segmented-control.js

@@ -0,0 +1,43 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Typography as i } from "../../../styles/typography/typography.js";
+import { getStyles as p, getContainerStyles as f } from "./styles.js";
+import { t as n } from "../../../../bundle-mjs-CAy1p0fn.js";
+function C({
+  segments: a,
+  handleClick: l,
+  inline: o = !1,
+  activeSegment: t
+}) {
+  const s = p(o);
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: n(
+        s.container,
+        s.segmentsBorder
+      ),
+      children: a.map(({ id: r, label: c }) => {
+        const m = f(o, r === t);
+        return /* @__PURE__ */ e(
+          "div",
+          {
+            className: n("cursor-pointer", m.container),
+            onClick: () => l(r),
+            children: /* @__PURE__ */ e(
+              i,
+              {
+                children: c,
+                color: r === t ? "active" : "default",
+                swStyle: 1
+              }
+            )
+          },
+          r
+        );
+      })
+    }
+  );
+}
+export {
+  C as SegmentedControl
+};

package/dist/components/molecules/filter/segmented-control/styles.d.ts

@@ -0,0 +1,7 @@
+export declare const getContainerStyles: (inline: boolean, active?: boolean) => {
+    container: string;
+};
+export declare const getStyles: (inline: boolean) => {
+    container: string;
+    segmentsBorder: string;
+};

package/dist/components/molecules/filter/segmented-control/styles.js

@@ -0,0 +1,11 @@
+import { padding as r, border as n } from "../../../styles/defaults/defaults.js";
+const a = (e, t = !1) => ({
+  container: `${e ? "inline-flex" : "flex"} justify-center items-center w-${e ? "max" : "full"} h-[2.5rem] py-[${r.xxs}] px-[${r.md}] rounded-[0.25rem] gap-xs ${t ? "bg-surface-active" : ""} min-w-[7.5rem] `
+}), s = (e) => ({
+  container: `${e ? "inline-flex w-max" : "flex w-auto"} justify-center items-center gap-[0.5rem] py-xxs px-[0.15rem] bg-surface-default box-border h-[3rem]`,
+  segmentsBorder: `rounded ${n.default}  border-bcolor-default`
+});
+export {
+  a as getContainerStyles,
+  s as getStyles
+};

package/dist/components/molecules/form/radiogroup/index.d.ts

@@ -0,0 +1,2 @@
+export { Radiogroup } from './radiogroup';
+export type { RadiogroupProps } from './radiogroup';

package/dist/components/molecules/form/radiogroup/index.js

@@ -0,0 +1,4 @@
+import { Radiogroup as p } from "./radiogroup.js";
+export {
+  p as Radiogroup
+};

package/dist/components/molecules/form/radiogroup/radiogroup.d.ts

@@ -0,0 +1,66 @@
+import { default as React, ReactNode } from 'react';
+
+/**
+ * Props for individual radio group items/segments
+ */
+export type RadiogroupItemProps = {
+    /**
+     * Id for testing
+     */
+    id: string;
+    /**
+     * variable used for the label s
+     */
+    label: string;
+    /**
+     * the icon to be displayed
+     */
+    icon?: ReactNode;
+};
+/**
+ * Props for the Radiogroup component
+ * This component renders a group of selectable segments that behave like radio buttons
+ */
+export type RadiogroupProps = {
+    /**
+     * the value of the active segment
+     */
+    value: string;
+    /**
+     * An array of the values for the segment props
+     */
+    segments: RadiogroupItemProps[];
+    /**
+     * the handle for the when the each segment is clicked
+     */
+    onClick: (value: string) => void;
+    /**
+     * the optional inline style to be applied if wanted
+     */
+    inline?: boolean;
+    /**
+     * the displayed label
+     */
+    label?: string;
+    /**
+     * the display hint text
+     */
+    hintText?: string;
+    /**
+     * the warning state
+     */
+    warning?: boolean;
+    /**
+     * the disabled state
+     */
+    disabled?: boolean;
+    /**
+     * the optional className to be applied if wanted
+     */
+    className?: string;
+};
+/**
+ * Radiogroup component that renders a group of selectable segments
+ * Each segment can have an icon and label, with only one being active at a time
+ */
+export declare const Radiogroup: React.FC<RadiogroupProps>;

package/dist/components/molecules/form/radiogroup/radiogroup.js

@@ -0,0 +1,80 @@
+import { jsxs as f, jsx as o } from "react/jsx-runtime";
+import b, { useCallback as y } from "react";
+import { Typography as n } from "../../../styles/typography/typography.js";
+import { FormHelperText as v } from "../../../atoms/form/form-helper-text/form-helper-text.js";
+import { t as l } from "../../../../bundle-mjs-CAy1p0fn.js";
+import { border as C } from "../../../styles/defaults/defaults.js";
+const _ = b.memo(function({
+  value: p,
+  segments: i,
+  onClick: s,
+  inline: c = !1,
+  label: a,
+  hintText: m,
+  warning: u,
+  disabled: e,
+  className: d
+}) {
+  const g = y(
+    (r) => () => {
+      e || s(r);
+    },
+    [s, e]
+  );
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      "data-testid": "segment-container",
+      className: l(c ? "w-max" : "w-full", d),
+      role: "group",
+      "aria-label": a,
+      children: [
+        a && /* @__PURE__ */ o(n, { swStyle: 3, color: e ? "disabled" : "default", children: a }),
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: l(
+              "flex h-[4rem] p-[0.5rem] w-full items-center gap-[0.5rem] self-stretch rounded-[0.5rem] bg-surface-default",
+              C.default
+            ),
+            children: i.map(({ id: r, label: h, icon: x }) => {
+              const t = r === p, w = l(
+                "cursor-pointer h-[3rem] py-[0.25rem] px-[1rem] rounded-[0.25rem] gap-xs flex items-center justify-center",
+                c ? "w-max" : "w-full",
+                t ? "bg-surface-active" : "bg-surface-default",
+                e && "cursor-not-allowed",
+                t && e && "bg-surface-disabled"
+              );
+              return /* @__PURE__ */ f(
+                "button",
+                {
+                  type: "button",
+                  className: w,
+                  onClick: g(r),
+                  disabled: e,
+                  "aria-pressed": t,
+                  children: [
+                    x,
+                    /* @__PURE__ */ o(n, { swStyle: 5, color: e ? "disabled" : t ? "active" : "default", children: h })
+                  ]
+                },
+                r
+              );
+            })
+          }
+        ),
+        m && /* @__PURE__ */ o(
+          v,
+          {
+            helperText: m,
+            warning: u,
+            helperTextAndIconColor: u ? "warning" : "subdued"
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  _ as Radiogroup
+};

package/dist/components/molecules/form/radiogroup/radiogroup.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Radiogroup } from './radiogroup';
+
+declare const meta: Meta<typeof Radiogroup>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Basic: Story;
+export declare const Inline: Story;
+export declare const Disabled: Story;
+export declare const WithIcons: Story;
+export declare const WithHintAndWarning: Story;

package/dist/components/molecules/form/radiogroup/radiogroup.stories.js

@@ -0,0 +1,95 @@
+import { jsx as o } from "react/jsx-runtime";
+import { f as t } from "../../../../index-DfdAzObv.js";
+import { Radiogroup as s } from "./radiogroup.js";
+import { useState as d } from "react";
+import { Icons as r } from "../../../atoms/icons/icons.js";
+import "../../../atoms/icons/iconsSVGs/Large/Profile.js";
+import "../../../atoms/icons/iconsSVGs/Small/Profile.js";
+function a(e) {
+  const [c, m] = d(e.value);
+  return /* @__PURE__ */ o(
+    s,
+    {
+      ...e,
+      value: c,
+      onClick: (i) => {
+        var l;
+        m(i), (l = e.onClick) == null || l.call(e, i);
+      }
+    }
+  );
+}
+const S = {
+  title: "@spotwork-ui/molecules/form/Radiogroup",
+  component: s,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    backgroundColor: { control: "color" }
+  },
+  args: { onClick: t() }
+}, n = [
+  { id: "paid", label: "Paid" },
+  { id: "unpaid", label: "Unpaid" }
+], u = [
+  { id: "alert", label: "Alert", icon: /* @__PURE__ */ o(r, { icon: "AlertSmall" }) },
+  { id: "success", label: "Success", icon: /* @__PURE__ */ o(r, { icon: "SuccessSmall" }) }
+], T = {
+  args: {}
+}, v = {
+  render: (e) => /* @__PURE__ */ o(a, { ...e }),
+  // now controlled
+  args: {
+    value: "paid",
+    segments: n,
+    label: "Payment Type",
+    onClick: t()
+  }
+}, P = {
+  render: (e) => /* @__PURE__ */ o(a, { ...e }),
+  // now controlled
+  args: {
+    value: "paid",
+    segments: n,
+    label: "Payment Type",
+    inline: !0,
+    onClick: t()
+  }
+}, h = {
+  args: {
+    value: "paid",
+    segments: n,
+    label: "Payment Type",
+    disabled: !0,
+    onClick: t()
+  }
+}, x = {
+  render: (e) => /* @__PURE__ */ o(a, { ...e }),
+  // now controlled
+  args: {
+    value: "alert",
+    segments: u,
+    label: "Status",
+    onClick: t()
+  }
+}, A = {
+  args: {
+    value: "paid",
+    segments: n,
+    label: "Payment Type",
+    hintText: "This is a hint text",
+    warning: !0,
+    onClick: t()
+  }
+};
+export {
+  v as Basic,
+  h as Disabled,
+  P as Inline,
+  T as Primary,
+  A as WithHintAndWarning,
+  x as WithIcons,
+  S as default
+};

package/dist/components/molecules/link/Link.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Link } from './';
+
+declare const meta: Meta<typeof Link>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/molecules/link/Link.stories.js

@@ -0,0 +1,20 @@
+import { f as o } from "../../../index-DfdAzObv.js";
+import { Link as r } from "./link.js";
+const e = {
+  title: "@spotwork-ui/Link",
+  component: r,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    backgroundColor: { control: "color" }
+  },
+  args: { onClick: o() }
+}, n = {
+  args: {}
+};
+export {
+  n as Primary,
+  e as default
+};

package/dist/components/molecules/link/index.d.ts

@@ -0,0 +1,2 @@
+export { Link } from './link';
+export type { LinkProps } from './link';

package/dist/components/molecules/link/index.js

@@ -0,0 +1,4 @@
+import { Link as e } from "./link.js";
+export {
+  e as Link
+};

package/dist/components/molecules/link/link.d.ts

@@ -0,0 +1,34 @@
+import { SvgKey } from '../../atoms/icons';
+import { StyleMapKey } from '../../styles/typography';
+
+export type LinkProps = {
+    /**
+     * option prop for button text.
+     */
+    text: string;
+    /**
+     * option prop for button text.
+     */
+    swStyle?: StyleMapKey;
+    /**
+     * optional start icon.
+     */
+    startIcon?: SvgKey;
+    /**
+     * optional end icon, it will be displayed if text prop if defined.
+     */
+    endIcon?: SvgKey;
+    /**
+     * Function to be executed when the button is clicked.
+     */
+    onClick?: () => void;
+    /**
+     * Determines if the button is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * optional autoFocus
+     */
+    autoFocus?: boolean;
+};
+export declare function Link({ text, swStyle, startIcon, endIcon, onClick, disabled, autoFocus }: LinkProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/link/link.js

@@ -0,0 +1,78 @@
+import { jsxs as h, jsx as e } from "react/jsx-runtime";
+import { useState as n } from "react";
+import { Icons as c } from "../../atoms/icons/icons.js";
+import "../../atoms/icons/iconsSVGs/Large/Profile.js";
+import "../../atoms/icons/iconsSVGs/Small/Profile.js";
+import { c as d } from "../../../index-fN7hCOo3.js";
+import { Typography as x } from "../../styles/typography/typography.js";
+import { baseStyle as $, flexItems as C, typographyStyle as M } from "./styles.js";
+import "../../styles/colors/colors.js";
+import { linkColors as p } from "../../styles/colors/colormap.js";
+function H({
+  text: l,
+  swStyle: f = 1,
+  startIcon: t,
+  endIcon: r,
+  onClick: i,
+  disabled: o = !1,
+  autoFocus: u = !1
+}) {
+  const [v, a] = n(!1), [y, m] = n(!1), s = o ? "disabled" : y ? "active" : v ? "hover" : "default";
+  return (
+    // button and the different states depending on the mouse action
+    /* @__PURE__ */ h(
+      "button",
+      {
+        autoFocus: u,
+        type: "button",
+        className: `${$} ${o && "cursor-not-allowed"}`,
+        onMouseOver: () => a(!0),
+        onMouseLeave: () => {
+          a(!1);
+        },
+        onMouseUp: () => {
+          m(!1);
+        },
+        onMouseDown: () => {
+          m(!0);
+        },
+        onClick: () => !o && i && i(),
+        disabled: o,
+        children: [
+          t && /* @__PURE__ */ e(
+            c,
+            {
+              icon: t,
+              id: `start-${t}`,
+              cssColor: p[s],
+              disabled: !0
+            }
+          ),
+          l && /* @__PURE__ */ e("div", { className: C, children: /* @__PURE__ */ e(
+            x,
+            {
+              className: d(
+                !o && M,
+                `text-linkColors-${s}`
+              ),
+              children: l,
+              swStyle: f
+            }
+          ) }),
+          r && /* @__PURE__ */ e(
+            c,
+            {
+              icon: r,
+              id: `end-${r}`,
+              cssColor: p[s],
+              disabled: !0
+            }
+          )
+        ]
+      }
+    )
+  );
+}
+export {
+  H as Link
+};

package/dist/components/molecules/link/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const baseStyle = "inline-flex items-center gap-xxs bg-transparent max-h-[5rem] h-fit";
+export declare const flexItems = "flex items-center gap-xxs ";
+export declare const typographyStyle = "border-b-[0.15rem] border-b-transparent active:border-b-linkColors-active hover:border-b-linkColors-hover";
+export declare const spacing = "flex gap-xxs";

package/dist/components/molecules/link/styles.js

@@ -0,0 +1,7 @@
+const e = "inline-flex items-center gap-xxs bg-transparent max-h-[5rem] h-fit", r = "flex items-center gap-xxs ", t = "border-b-[0.15rem] border-b-transparent active:border-b-linkColors-active hover:border-b-linkColors-hover", o = "flex gap-xxs";
+export {
+  e as baseStyle,
+  r as flexItems,
+  o as spacing,
+  t as typographyStyle
+};

package/dist/components/molecules/navigation/context-menu/context-menu.d.ts

@@ -0,0 +1,13 @@
+import { NavigationItemProps } from '../../../atoms/navigation/navigation-item';
+
+export type ContextMenuItemProps = NavigationItemProps & {
+    onClick: () => void;
+};
+export type ContextMenuProps = {
+    /**
+     * Navigation items
+     */
+    options: ContextMenuItemProps[];
+    classNames?: string;
+};
+export declare function ContextMenu({ options, classNames }: ContextMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/navigation/context-menu/context-menu.js

@@ -0,0 +1,28 @@
+import { jsx as r } from "react/jsx-runtime";
+import { t } from "../../../../bundle-mjs-CAy1p0fn.js";
+import { NavigationItem as a } from "../../../atoms/navigation/navigation-item/navigation-item.js";
+import { I as n } from "../../../../index-BKdkX0lZ.js";
+function u({ options: m, classNames: o }) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: t(
+        "flex w-[20.5rem] p-[0.3125rem] flex-col items-start gap-[0.3125rem] rounded-[0.625rem] border-surface-subdued bg-surface-default shadow-[0rem_0rem_1rem_0rem_#B0B0B0]",
+        `${o}`
+      ),
+      "data-testid": "header",
+      children: m.map((e) => /* @__PURE__ */ r(
+        n,
+        {
+          className: "w-full p-0 m-0 hover:border-none hover:ring-0 hover:outline-none",
+          onClick: () => e.onClick(),
+          children: /* @__PURE__ */ r(a, { ...e })
+        },
+        e.label
+      ))
+    }
+  );
+}
+export {
+  u as ContextMenu
+};

package/dist/components/molecules/navigation/header/Header.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Header } from './';
+
+declare const meta: Meta<typeof Header>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/molecules/navigation/header/Header.stories.js

@@ -0,0 +1,20 @@
+import { f as o } from "../../../../index-DfdAzObv.js";
+import { Header as r } from "./header.js";
+const e = {
+  title: "@spotwork-ui/Header",
+  component: r,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    backgroundColor: { control: "color" }
+  },
+  args: { onClick: o() }
+}, s = {
+  args: {}
+};
+export {
+  s as Primary,
+  e as default
+};

package/dist/components/molecules/navigation/header/header.d.ts

@@ -0,0 +1,37 @@
+import { default as React, ReactNode } from 'react';
+
+export type HeaderProps = {
+    /**
+     * Callback function to toggle the sidebar visibility.
+     */
+    setShowSideBar: () => void;
+    /**
+     * URL of the company logo.
+     */
+    companyLogoUrl: string;
+    /**
+     * Optional account information to display. Should be an account component
+     */
+    account?: ReactNode;
+    /**
+     * Flag indicating whether there are unread messages.
+     */
+    hasUnreadMessages?: boolean;
+    /**
+     * Callback function to handle showing messages.
+     */
+    setShowMessages?: () => void;
+    /**
+     * Show or hide hamburger menu
+     */
+    showMenu?: boolean;
+    /**
+     * Show or hide Notifications Icon
+     */
+    showNotifications?: boolean;
+    /**
+     * Show or hide Notifications Icon
+     */
+    additionalRightBox?: React.ReactNode;
+};
+export declare function Header({ setShowSideBar, companyLogoUrl, account, hasUnreadMessages, setShowMessages, showMenu, showNotifications, additionalRightBox, }: HeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/navigation/header/header.js

@@ -0,0 +1,38 @@
+import { jsxs as r, jsx as a } from "react/jsx-runtime";
+import { Icons as c } from "../../../atoms/icons/icons.js";
+import "../../../atoms/icons/iconsSVGs/Large/Profile.js";
+import "../../../atoms/icons/iconsSVGs/Small/Profile.js";
+import { styles as m } from "./styles.js";
+function v({
+  setShowSideBar: i,
+  companyLogoUrl: o,
+  account: s,
+  hasUnreadMessages: l = !1,
+  setShowMessages: d,
+  showMenu: n = !0,
+  showNotifications: u = !0,
+  additionalRightBox: t
+}) {
+  const e = m();
+  return /* @__PURE__ */ r("div", { className: e.container, "data-testid": "header", children: [
+    /* @__PURE__ */ r("div", { className: e.menuBox, children: [
+      n && /* @__PURE__ */ a(
+        c,
+        {
+          id: "HamburgerMenu",
+          icon: "HamburgerMenu",
+          handleClick: i,
+          button: !0
+        }
+      ),
+      /* @__PURE__ */ a("img", { className: "h-[4rem] w-auto", src: o, alt: "Spotwork" })
+    ] }),
+    (s || t) && /* @__PURE__ */ r("div", { className: e.accContainer, children: [
+      t,
+      s && /* @__PURE__ */ a("div", { className: e.account, children: s })
+    ] })
+  ] });
+}
+export {
+  v as Header
+};

package/dist/components/molecules/navigation/header/index.d.ts

@@ -0,0 +1,2 @@
+export { Header } from './header';
+export type { HeaderProps } from './header';