@temp-spotwork/ui 1.4.3

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

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

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

@@ -0,0 +1,6 @@
+export declare const styles: () => {
+    container: string;
+    menuBox: string;
+    accContainer: string;
+    account: string;
+};

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

@@ -0,0 +1,9 @@
+const e = () => ({
+  container: "flex flex-row place-content-between p-md items-center self-stretch border-b border-bcolor-divider gap-default w-full z-40",
+  menuBox: "flex flex-row items-center justify-center pl-sm h-16",
+  accContainer: "flex flex-row gap-md items-center",
+  account: "w-[4rem] h-[4rem] p-xxs flex items-center justify-center"
+});
+export {
+  e as styles
+};

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

@@ -0,0 +1,2 @@
+export * from './menubar';
+export type { MenubarProps } from './menubar';

package/dist/components/molecules/navigation/menubar/index.js

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

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

@@ -0,0 +1,27 @@
+export type MenubarProps = {
+    /**
+     * trigger element
+     */
+    trigger: React.ReactNode;
+    /**
+     * menu
+     */
+    children: React.ReactNode;
+    /**
+     * has the trigger a hover like a button
+     */
+    hasHover?: boolean;
+    /**
+     * align the menu
+     */
+    align?: 'start' | 'center' | 'end';
+    /**
+     * offset from the side of the trigger
+     */
+    sideOffset?: number;
+    /**
+     * offset from the top of the trigger
+     */
+    alignOffset?: number;
+};
+export declare function Menubar({ trigger, children, hasHover, align, sideOffset, alignOffset, }: MenubarProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,27 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { R as c, T as f, P as m, C as d } from "../../../../index-BKdkX0lZ.js";
+import { t as u } from "../../../../bundle-mjs-CAy1p0fn.js";
+function h({
+  trigger: a,
+  children: e,
+  hasHover: t = !1,
+  align: o = "start",
+  sideOffset: s = 5,
+  alignOffset: n = 0
+}) {
+  return /* @__PURE__ */ i(c, { children: [
+    /* @__PURE__ */ r(
+      f,
+      {
+        className: u(
+          t ? "hover:bg-buttonSurface-secondary-affirmative-hover data-[state=open]:bg-buttonSurface-secondary-affirmative-active rounded" : ""
+        ),
+        children: a
+      }
+    ),
+    /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(d, { align: o, sideOffset: s, alignOffset: n, className: "", children: e }) })
+  ] });
+}
+export {
+  h as Menubar
+};

package/dist/components/molecules/navigation/sidebar/Sidebar.stories.d.ts

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

package/dist/components/molecules/navigation/sidebar/Sidebar.stories.js

@@ -0,0 +1,20 @@
+import { f as o } from "../../../../index-DfdAzObv.js";
+import { Sidebar as r } from "./sidebar.js";
+const e = {
+  title: "@spotwork-ui/Sidebar",
+  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/sidebar/index.d.ts

@@ -0,0 +1,2 @@
+export { Sidebar } from './sidebar';
+export type { SidebarProps, SidebarItemProps } from './sidebar';

package/dist/components/molecules/navigation/sidebar/index.js

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

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

@@ -0,0 +1,33 @@
+import { NavigationItemProps } from '../../../atoms/navigation/navigation-item';
+
+export type SidebarItemProps = NavigationItemProps & {
+    onClick: (label: string) => void;
+    link: string;
+};
+export type SidebarProps = {
+    /**
+     * If true, the component is shown.
+     */
+    open?: boolean;
+    /**
+     * Callback fired when the component requests to be closed.
+     */
+    setOpen?: (state: boolean) => void;
+    /**
+     * Navigation items
+     */
+    items: SidebarItemProps[];
+    /**
+     * Sidebar width in rem
+     */
+    width?: string;
+    /**
+     * transition duration for content
+     */
+    transitionDuration?: number;
+    /**
+     * If true, no overlay is rendered. If false, renders the overlay with background.
+     */
+    overlayTransparent?: boolean;
+};
+export declare function Sidebar({ open, setOpen, items, transitionDuration, width, overlayTransparent, }: SidebarProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,53 @@
+import { jsx as e, jsxs as t, Fragment as u } from "react/jsx-runtime";
+import { NavigationItem as p } from "../../../atoms/navigation/navigation-item/navigation-item.js";
+import { u as h, a as n } from "../../../../react-spring_web.modern-BLL8Qmtg.js";
+import { R as b, P as v, O as g, C as y, T as N, D as x } from "../../../../index-C0ZrzaoZ.js";
+import "../../../styles/colors/colors.js";
+import { surface as k } from "../../../styles/colors/colormap.js";
+function w({
+  open: o,
+  setOpen: s,
+  items: l,
+  transitionDuration: c = 300,
+  width: d = "22.5rem",
+  overlayTransparent: a = !1
+}) {
+  const m = h(o, {
+    from: { opacity: 0, transform: "translateX(-100%)" },
+    enter: { opacity: 1, transform: "translateX(0%)" },
+    leave: { opacity: 1 },
+    config: {
+      duration: c
+    }
+  });
+  return /* @__PURE__ */ e(b, { open: o, onOpenChange: s, modal: !a, children: /* @__PURE__ */ e(v, { children: m(
+    (i, f) => f ? /* @__PURE__ */ t(u, { children: [
+      !a && /* @__PURE__ */ e(n.div, { style: { opacity: i.opacity }, children: /* @__PURE__ */ e(
+        g,
+        {
+          forceMount: !0,
+          className: "DialogOverlay fixed inset-0 top-[6rem] z-50",
+          style: {
+            background: k.subduedInverted,
+            opacity: "50%"
+          }
+        }
+      ) }),
+      /* @__PURE__ */ t(y, { forceMount: !0, "data-state": o ? "open" : "close", children: [
+        /* @__PURE__ */ e(N, { className: "sr-only", children: "Navigation Sidebar" }),
+        /* @__PURE__ */ e(x, { className: "sr-only", children: "Navigation menu with links to different sections" }),
+        /* @__PURE__ */ e(
+          n.div,
+          {
+            style: { transform: i.transform, width: d },
+            className: `fixed top-[6rem] left-0 h-screen z-50 bg-surface-default focus:outline-none ${a ? "border-[0.1rem] border-bcolor-divider" : "shadow-[0rem_1rem_1rem_0rem_#B0B0B0] border-t-[0.1rem] border-bcolor-divider"}`,
+            children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-xs p-md", children: l.map((r) => /* @__PURE__ */ e("div", { onClick: () => r.onClick(r.link), children: /* @__PURE__ */ e(p, { ...r, isNavigation: !0 }) }, r.label)) })
+          }
+        )
+      ] })
+    ] }) : null
+  ) }) });
+}
+export {
+  w as Sidebar
+};

package/dist/components/molecules/notifications/content/Content.stories.d.ts

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

package/dist/components/molecules/notifications/content/Content.stories.js

@@ -0,0 +1,20 @@
+import { f as o } from "../../../../index-DfdAzObv.js";
+import { Content as t } from "./content.js";
+const e = {
+  title: "@spotwork-ui/Content",
+  component: t,
+  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/notifications/content/coloring.d.ts

@@ -0,0 +1,7 @@
+import { GlyphColor } from '../../../styles/colors';
+
+type IconColorMap = {
+    [key: string]: GlyphColor;
+};
+export declare const iconColorMap: IconColorMap;
+export {};

package/dist/components/molecules/notifications/content/coloring.js

@@ -0,0 +1,9 @@
+const r = {
+  default: "default",
+  error: "alert",
+  warning: "warning",
+  success: "success"
+};
+export {
+  r as iconColorMap
+};

package/dist/components/molecules/notifications/content/content.d.ts

@@ -0,0 +1,29 @@
+import { IconsProps } from '../../../atoms/icons';
+
+export type ContentProps = {
+    /**
+     * id of the message
+     */
+    id: string;
+    /**
+     * the icon to display on the left of the content, it show message status. If not provided, no icon will be displayed.
+     */
+    icon?: IconsProps;
+    /**
+     * message content
+     */
+    content: string;
+    /**
+     * message sub-content to display additional information
+     */
+    subContent?: string;
+    /**
+     * the icon to display additional information, may have different colors
+     */
+    subIcon?: IconsProps;
+    /**
+     * colors of the subIcon, default is 'default'
+     */
+    subIconState?: 'default' | 'error' | 'warning' | 'success';
+};
+export declare function Content({ id, icon, content, subContent, subIcon, subIconState, }: ContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/notifications/content/content.js

@@ -0,0 +1,51 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { Icons as l } from "../../../atoms/icons/icons.js";
+import "../../../atoms/icons/iconsSVGs/Large/Profile.js";
+import "../../../atoms/icons/iconsSVGs/Small/Profile.js";
+import { Typography as s } from "../../../styles/typography/typography.js";
+import { iconColorMap as n } from "./coloring.js";
+function v({
+  id: o,
+  icon: i,
+  content: a,
+  subContent: t,
+  subIcon: d,
+  subIconState: c = "default"
+}) {
+  const m = n[c];
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: "px-[1.5rem] py-[1rem] border-b border-bcolor-divider",
+      "data-testid": "notification-" + o,
+      children: /* @__PURE__ */ r("div", { className: "flex gap-md", children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: "mt-[0.6rem] min-w-[1rem]",
+            "data-testid": "notification-icon-" + o,
+            children: i && /* @__PURE__ */ e(l, { ...i, disabled: !0 })
+          }
+        ),
+        /* @__PURE__ */ r("div", { className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ e(
+            s,
+            {
+              swStyle: 3,
+              color: "subdued",
+              htmlContent: a,
+              className: "span-styles"
+            }
+          ),
+          /* @__PURE__ */ r("div", { className: "flex items-center gap-xs", children: [
+            d && /* @__PURE__ */ e("div", { "data-testid": "notification-subicon" + o, children: /* @__PURE__ */ e(l, { ...d, disabled: !0, color: m }) }),
+            t && /* @__PURE__ */ e(s, { swStyle: 1, color: "subdued", children: t })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  v as Content
+};

package/dist/components/molecules/notifications/content/index.d.ts

@@ -0,0 +1,2 @@
+export { Content } from './content';
+export type { ContentProps } from './content';

package/dist/components/molecules/notifications/content/index.js

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

package/dist/components/molecules/snackbar/Snackbar.stories.d.ts

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Snackbar } from '.';
+
+declare const meta: Meta<typeof Snackbar>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Basic: Story;
+export declare const TwoLineMessage: Story;
+export declare const LongMessageTruncated: Story;
+export declare const WithIcon: Story;
+export declare const WithActionButton: Story;
+export declare const Dismissible: Story;
+export declare const AutoDismiss: Story;
+export declare const FullFeatured: Story;
+export declare const TwoLineWithIcon: Story;
+export declare const TwoLineWithAction: Story;

package/dist/components/molecules/snackbar/Snackbar.stories.js

@@ -0,0 +1,170 @@
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import { useState as l } from "react";
+import { S as r, P as c, V as d } from "../../../snackbar-BaF8Ts3S.js";
+import { Button as h } from "../button/button.js";
+const w = {
+  title: "@spotwork-ui/Snackbar",
+  component: r,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    title: {
+      control: "text",
+      description: "The main message text to display in the snackbar"
+    },
+    open: {
+      control: "boolean",
+      description: "Controls whether the snackbar is visible or hidden"
+    },
+    isDismissible: {
+      control: "boolean",
+      description: "When true, the snackbar will only close when user clicks close button"
+    },
+    duration: {
+      control: { type: "number", min: 1, max: 30, step: 1 },
+      description: "Auto-dismiss duration in seconds (only applies when isDismissible is false)"
+    },
+    leadingIcon: {
+      control: "text",
+      description: "Optional icon to display before the message text"
+    }
+  }
+}, s = ({ args: e }) => {
+  const [i, o] = l(e.open ?? !0);
+  return /* @__PURE__ */ a(c, { children: [
+    /* @__PURE__ */ t(r, { ...e, open: i, setOpen: o }),
+    /* @__PURE__ */ t(d, { className: "fixed bottom-0 right-0 flex flex-col p-10 gap-0.5 max-w-screen w-full m-0 list-none z-[2147483647] outline-none" })
+  ] });
+}, n = ({ args: e }) => {
+  const [i, o] = l(!1);
+  return /* @__PURE__ */ a("div", { className: "flex flex-col gap-4 items-center", children: [
+    /* @__PURE__ */ t(h, { text: "Show Snackbar", onClick: () => o(!0) }),
+    /* @__PURE__ */ a(c, { children: [
+      /* @__PURE__ */ t(r, { ...e, open: i, setOpen: o }),
+      /* @__PURE__ */ t(d, { className: "fixed bottom-0 right-0 flex flex-col p-10 gap-0.5 max-w-screen w-full m-0 list-none z-[2147483647] outline-none" })
+    ] })
+  ] });
+}, b = {
+  render: (e) => /* @__PURE__ */ t(s, { args: e }),
+  args: {
+    title: "This is a basic snackbar message",
+    open: !0
+  }
+}, f = {
+  render: (e) => /* @__PURE__ */ t(s, { args: e }),
+  args: {
+    title: "This is a longer message that will wrap to two lines in the snackbar component. It demonstrates the line-clamp-2 functionality.",
+    open: !0,
+    isDismissible: !0
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "This story demonstrates the two-line message feature. Messages longer than two lines will be truncated with an ellipsis."
+      }
+    }
+  }
+}, k = {
+  render: (e) => /* @__PURE__ */ t(s, { args: e }),
+  args: {
+    title: "This is a very long message that exceeds two lines and will be truncated. It shows how the snackbar handles lengthy content by displaying up to two lines and then cutting off with an ellipsis at the end of the second line.",
+    open: !0
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates message truncation when content exceeds two lines."
+      }
+    }
+  }
+}, x = {
+  render: (e) => /* @__PURE__ */ t(s, { args: e }),
+  args: {
+    title: "Snackbar with a leading icon",
+    leadingIcon: "Check",
+    open: !0
+  }
+}, y = {
+  render: (e) => /* @__PURE__ */ t(n, { args: e }),
+  args: {
+    title: "Snackbar with an action button",
+    actionButton: {
+      text: "Undo",
+      onClick: () => console.log("Undo clicked")
+    },
+    open: !1
+  }
+}, T = {
+  render: (e) => /* @__PURE__ */ t(n, { args: e }),
+  args: {
+    title: "This snackbar can only be closed by clicking the X button",
+    isDismissible: !0,
+    open: !1
+  }
+}, S = {
+  render: (e) => /* @__PURE__ */ t(n, { args: e }),
+  args: {
+    title: "This snackbar will auto-dismiss after 5 seconds",
+    duration: 5,
+    isDismissible: !1,
+    open: !1
+  }
+}, D = {
+  render: (e) => /* @__PURE__ */ t(n, { args: e }),
+  args: {
+    title: "A snackbar with icon, action button, and is dismissible. This demonstrates all features working together.",
+    leadingIcon: "Info",
+    actionButton: {
+      text: "View Details",
+      onClick: () => console.log("View details clicked")
+    },
+    isDismissible: !0,
+    open: !1
+  }
+}, I = {
+  render: (e) => /* @__PURE__ */ t(s, { args: e }),
+  args: {
+    title: "This is a two-line message example with an icon. The message wraps nicely across two lines and includes a leading icon for visual context.",
+    leadingIcon: "Success",
+    open: !0
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Shows a two-line message combined with a leading icon."
+      }
+    }
+  }
+}, W = {
+  render: (e) => /* @__PURE__ */ t(n, { args: e }),
+  args: {
+    title: "This snackbar demonstrates a two-line message with an action button. The message spans two lines while maintaining the action button functionality.",
+    actionButton: {
+      text: "Learn More",
+      onClick: () => console.log("Learn more clicked")
+    },
+    open: !1
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Shows how a two-line message works with action buttons."
+      }
+    }
+  }
+};
+export {
+  S as AutoDismiss,
+  b as Basic,
+  T as Dismissible,
+  D as FullFeatured,
+  k as LongMessageTruncated,
+  f as TwoLineMessage,
+  W as TwoLineWithAction,
+  I as TwoLineWithIcon,
+  y as WithActionButton,
+  x as WithIcon,
+  w as default
+};

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

@@ -0,0 +1,2 @@
+export { Snackbar } from './snackbar';
+export type { SnackbarProps } from './snackbar';

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

@@ -0,0 +1,4 @@
+import { S as o } from "../../../snackbar-BaF8Ts3S.js";
+export {
+  o as Snackbar
+};

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

@@ -0,0 +1,41 @@
+import { ButtonProps, SvgKey } from '../../../main';
+
+/**
+ * Snackbar component for displaying temporary notifications to users.
+ * Built on top of Radix UI Toast primitive for accessibility and functionality.
+ */
+export type SnackbarProps = {
+    /**
+     * The main message text to display in the snackbar
+     */
+    title: string;
+    /**
+     * Controls whether the snackbar is visible or hidden
+     */
+    open?: boolean;
+    /**
+     * Callback function to control the snackbar's open state
+     */
+    setOpen?: (value: boolean) => void;
+    /**
+     * Optional icon to display before the message text
+     */
+    leadingIcon?: SvgKey;
+    /**
+     * Optional action button with predefined styling (small, tertiary, dark).
+     * Can be customized by passing additional ButtonProps.
+     */
+    actionButton?: ButtonProps & {
+        text: string;
+    };
+    /**
+     * When true, the snackbar will only close when the user clicks the close button.
+     * When false, it will auto-dismiss after the duration period.
+     */
+    isDismissible?: boolean;
+    /**
+     * Auto-dismiss duration in seconds. Only applies when isDismissible is false.
+     */
+    duration?: number;
+};
+export declare function Snackbar({ title, open, setOpen, leadingIcon, actionButton, isDismissible, duration, }: SnackbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/snackbar/snackbar.js

@@ -0,0 +1,31 @@
+import "react/jsx-runtime";
+import { S as C } from "../../../snackbar-BaF8Ts3S.js";
+import "../../styles/tailwind-config/index.js";
+import "../../styles/typography/typography.js";
+import "../../styles/colors/colors.js";
+import "../../styles/colors/colormap.js";
+import "../../atoms/icons/icons.js";
+import "../../atoms/icons/iconsSVGs/Large/Profile.js";
+import "../../atoms/icons/iconsSVGs/Small/Profile.js";
+import "../../../index-fN7hCOo3.js";
+import "react";
+import "../../atoms/form/dateselect/dateselect.js";
+import "../../atoms/form/time-picker/time-picker.js";
+import "../../atoms/form/dropdown/dropdown.js";
+import "../filter/dropdown-selector/styles.js";
+import "../../atoms/form/dropdown-search/dropdown-search.js";
+import "../../../index-CYyrKZeH.js";
+import "../../atoms/form/textfield/textfield.js";
+import "../../atoms/form/stepper/stepper.js";
+import "../../atoms/form/textarea/textarea.js";
+import "../../atoms/form/timeselect/timeselect.js";
+import "../button/button.js";
+import "../datatables/cell/cell.js";
+import "../dataviz/donut-chart/donut-chart.js";
+import "../../../react-spring_web.modern-BLL8Qmtg.js";
+import "../form/radiogroup/radiogroup.js";
+import "../../../card-Cc2Qkiqr.js";
+import "./styles.js";
+export {
+  C as Snackbar
+};

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

@@ -0,0 +1,5 @@
+export declare const getClasses: () => {
+    container: string;
+    leftBox: string;
+    rightBox: string;
+};

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

@@ -0,0 +1,9 @@
+const e = () => ({
+  container: "flex w-[55rem] h-[4.5rem] items-center justify-between bg-surface-defaultInverted px-xl rounded gap-xxl",
+  leftBox: "flex items-center gap-md min-w-0",
+  // min-w-o uses for truncate text
+  rightBox: "flex items-center gap-xs"
+});
+export {
+  e as getClasses
+};

package/dist/components/molecules/tab-group/index.d.ts

@@ -0,0 +1,3 @@
+export { TabGroup } from './tab-group';
+export type { TabGroupProps } from './tab-group';
+export type { TabGroupItemProps } from './tab-group';

package/dist/components/molecules/tab-group/index.js

@@ -0,0 +1,4 @@
+import { TabGroup as p } from "./tab-group.js";
+export {
+  p as TabGroup
+};

package/dist/components/molecules/tab-group/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const smallContainer = "flex bg-surface-subdued relative";
+export declare const largeContainer = "flex justify-between gap-lg";
+export declare const pseudoBorder = "w-full h-px absolute bottom-0 left-0 bg-bcolor-subdued";