@temp-spotwork/ui 1.4.3

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

@@ -0,0 +1,6 @@
+const e = "flex bg-surface-subdued relative", o = "flex justify-between gap-lg", t = "w-full h-px absolute bottom-0 left-0 bg-bcolor-subdued";
+export {
+  o as largeContainer,
+  t as pseudoBorder,
+  e as smallContainer
+};

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

@@ -0,0 +1,19 @@
+import { SvgKey } from '../../atoms/icons';
+import { ProgressBarProps } from '../dataviz/progress-bar';
+
+export type TabGroupItemProps = {
+    id: string;
+    title: string;
+    className?: string;
+    tabIcon?: SvgKey;
+    content?: React.ReactNode;
+    datavizProps?: ProgressBarProps;
+};
+export type TabGroupProps = {
+    nodesList: Array<TabGroupItemProps>;
+    variant: 'small' | 'large';
+    activeTab: string;
+    setActiveTab: (tab: string) => void;
+    className?: string;
+};
+export declare function TabGroup({ nodesList, variant, activeTab, setActiveTab, className }: TabGroupProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,23 @@
+import { jsxs as p, jsx as i } from "react/jsx-runtime";
+import { pseudoBorder as f, smallContainer as u, largeContainer as c } from "./styles.js";
+import { Tab as d } from "../../atoms/tab/tab.js";
+import { t as l } from "../../../bundle-mjs-CAy1p0fn.js";
+function j({ nodesList: m, variant: r, activeTab: e, setActiveTab: s, className: a }) {
+  const o = (t) => t.id ? t.id === e ? "active" : "default" : t.title === e ? "active" : "default";
+  return /* @__PURE__ */ p("div", { className: l(r === "small" ? u : c, a), children: [
+    r === "small" && /* @__PURE__ */ i("div", { className: l(f) }),
+    m.map((t) => /* @__PURE__ */ i(
+      d,
+      {
+        ...t,
+        variant: r,
+        type: o(t),
+        onClick: () => s(t.id ? t.id : t.title)
+      },
+      t.title
+    ))
+  ] });
+}
+export {
+  j as TabGroup
+};

package/dist/components/molecules/tab-group/tabgroup.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { TabGroup } from '.';
+
+declare const meta: Meta<typeof TabGroup>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const SmallVariantWithState: Story;
+export declare const LargeVariantWithProgress: Story;
+export declare const MultipleTabsWithState: Story;
+export declare const MixedVariantsDemo: Story;
+export declare const WithContent: Story;

package/dist/components/molecules/tab-group/tabgroup.stories.js

@@ -0,0 +1,285 @@
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import { f as c } from "../../../index-DfdAzObv.js";
+import { useState as r } from "react";
+import { TabGroup as s } from "./tab-group.js";
+import { Typography as n } from "../../styles/typography/typography.js";
+import { Chips as o } from "../../atoms/form/chips/chips.js";
+const u = {
+  title: "@spotwork-ui/molecules/Tabgroup",
+  component: s,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    backgroundColor: { control: "color" }
+  },
+  args: { onClick: c() }
+}, f = {
+  args: {
+    nodesList: [
+      { title: "Tab 1", tabIcon: "Profile" },
+      { title: "Tab 2", tabIcon: "Settings" },
+      { title: "Tab 3", tabIcon: "Calendar" }
+    ],
+    variant: "small",
+    activeTab: "Tab 1",
+    setActiveTab: c()
+  }
+}, I = {
+  render: () => {
+    const [e, i] = r("Dashboard");
+    return /* @__PURE__ */ t(s, { nodesList: [
+      { id: "dashboard", title: "Dashboard", tabIcon: "Profile", content: /* @__PURE__ */ t("div", { children: "Dashboard" }) },
+      { id: "analytics", title: "Analytics", tabIcon: "Summary", content: /* @__PURE__ */ t("div", { children: "Analytics" }) },
+      { id: "settings", title: "Settings", tabIcon: "Settings", content: /* @__PURE__ */ t("div", { children: "Settings" }) },
+      { id: "profile", title: "Profile", tabIcon: "Profile", content: /* @__PURE__ */ t("div", { children: "Profile" }) }
+    ], variant: "small", activeTab: e, setActiveTab: i });
+  }
+}, x = {
+  render: () => {
+    const [e, i] = r("projects");
+    return /* @__PURE__ */ t(s, { nodesList: [
+      {
+        id: "projects",
+        title: "Projects",
+        tabIcon: "File",
+        datavizProps: {
+          progress: 75,
+          total: 100,
+          hasTotalCount: !0
+        }
+      },
+      {
+        id: "tasks",
+        title: "Tasks",
+        tabIcon: "Tick",
+        datavizProps: {
+          progress: 45,
+          total: 80,
+          hasTotalCount: !0
+        }
+      },
+      {
+        id: "team",
+        title: "Team",
+        tabIcon: "Profile",
+        datavizProps: {
+          progress: 12,
+          total: 15,
+          hasTotalCount: !0
+        }
+      }
+    ], variant: "large", activeTab: e, setActiveTab: i });
+  }
+}, y = {
+  render: () => {
+    const [e, i] = r("overview");
+    return /* @__PURE__ */ a("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ a("div", { className: "text-sm text-gray-600 mb-2", children: [
+        "Active Tab: ",
+        /* @__PURE__ */ t("span", { className: "font-semibold", children: e })
+      ] }),
+      /* @__PURE__ */ t(s, { nodesList: [
+        {
+          id: "overview",
+          title: "Overview",
+          tabIcon: "Profile",
+          datavizProps: {
+            progress: 90,
+            total: 100
+          }
+        },
+        {
+          id: "reports",
+          title: "Reports",
+          tabIcon: "File",
+          datavizProps: {
+            progress: 60,
+            total: 100
+          }
+        },
+        {
+          id: "analytics",
+          title: "Analytics",
+          tabIcon: "Summary",
+          datavizProps: {
+            progress: 30,
+            total: 50
+          }
+        },
+        {
+          id: "settings",
+          title: "Settings",
+          tabIcon: "Settings",
+          datavizProps: {
+            progress: 100,
+            total: 100
+          }
+        }
+      ], variant: "large", activeTab: e, setActiveTab: i })
+    ] });
+  }
+}, A = {
+  render: () => {
+    const [e, i] = r("small-1"), [l, d] = r("large-1");
+    return /* @__PURE__ */ a("div", { className: "space-y-8", children: [
+      /* @__PURE__ */ a("div", { children: [
+        /* @__PURE__ */ t("h3", { className: "text-lg font-semibold mb-2", children: "Small Variant" }),
+        /* @__PURE__ */ t(s, { nodesList: [
+          { id: "small-1", title: "Small 1", tabIcon: "Profile" },
+          { id: "small-2", title: "Small 2", tabIcon: "Profile" },
+          { id: "small-3", title: "Small 3", tabIcon: "Settings" }
+        ], variant: "small", activeTab: e, setActiveTab: i })
+      ] }),
+      /* @__PURE__ */ a("div", { children: [
+        /* @__PURE__ */ t("h3", { className: "text-lg font-semibold mb-2", children: "Large Variant" }),
+        /* @__PURE__ */ t(s, { nodesList: [
+          {
+            id: "large-1",
+            title: "Large 1",
+            tabIcon: "Chapters",
+            datavizProps: {
+              progress: 80,
+              total: 100
+            }
+          },
+          {
+            id: "large-2",
+            title: "Large 2",
+            tabIcon: "Summary",
+            datavizProps: {
+              progress: 45,
+              total: 100
+            }
+          }
+        ], variant: "large", activeTab: l, setActiveTab: d })
+      ] })
+    ] });
+  }
+}, P = {
+  render: () => {
+    const [e, i] = r("tab-1");
+    return /* @__PURE__ */ t(
+      s,
+      {
+        className: "min-w-[1500px] max-w-full",
+        nodesList: [
+          {
+            id: "tab-1",
+            title: "Missing Check-Ins",
+            tabIcon: "USA",
+            content: /* @__PURE__ */ a("div", { className: "flex items-center gap-xs", children: [
+              /* @__PURE__ */ t(n, { swStyle: 8, children: "30" }),
+              /* @__PURE__ */ t(
+                o,
+                {
+                  id: "Unread",
+                  chipText: "Unread",
+                  chipSelected: !0,
+                  color: "alert",
+                  variant: "largeReadOnly",
+                  infoBubbleContent: "6"
+                }
+              )
+            ] })
+          },
+          {
+            id: "tab-2",
+            title: "New Spotters",
+            tabIcon: "USA",
+            content: /* @__PURE__ */ a("div", { className: "flex items-center gap-xs", children: [
+              /* @__PURE__ */ t(n, { swStyle: 8, children: "44" }),
+              /* @__PURE__ */ t(
+                o,
+                {
+                  id: "Unread",
+                  chipText: "Unread",
+                  chipSelected: !0,
+                  color: "alert",
+                  variant: "largeReadOnly",
+                  infoBubbleContent: "5"
+                }
+              )
+            ] })
+          },
+          {
+            id: "tab-3",
+            title: "New Teams",
+            tabIcon: "USA",
+            content: /* @__PURE__ */ a("div", { className: "flex items-center gap-xs", children: [
+              /* @__PURE__ */ t(n, { swStyle: 8, children: "3" }),
+              /* @__PURE__ */ t(
+                o,
+                {
+                  id: "Unread",
+                  chipText: "Unread",
+                  chipSelected: !0,
+                  color: "alert",
+                  variant: "largeReadOnly",
+                  infoBubbleContent: "1"
+                }
+              )
+            ] })
+          },
+          {
+            id: "tab-4",
+            title: "Absences",
+            tabIcon: "USA",
+            content: /* @__PURE__ */ t("div", { className: "flex items-center gap-xs", children: /* @__PURE__ */ t(n, { swStyle: 8, children: "3" }) })
+          },
+          {
+            id: "tab-5",
+            title: "Late Check-Ins",
+            tabIcon: "USA",
+            content: /* @__PURE__ */ a("div", { className: "flex items-center gap-xs", children: [
+              /* @__PURE__ */ t(n, { swStyle: 8, children: "5" }),
+              /* @__PURE__ */ t(
+                o,
+                {
+                  id: "Unread",
+                  chipText: "Unread",
+                  chipSelected: !0,
+                  color: "warning",
+                  variant: "largeReadOnly",
+                  infoBubbleContent: "1"
+                }
+              )
+            ] })
+          },
+          {
+            id: "tab-6",
+            title: "Late Check-Ins",
+            tabIcon: "USA",
+            content: /* @__PURE__ */ a("div", { className: "flex items-center gap-xs", children: [
+              /* @__PURE__ */ t(n, { swStyle: 8, children: "295" }),
+              /* @__PURE__ */ t(
+                o,
+                {
+                  id: "Unread",
+                  chipText: "On Time",
+                  chipSelected: !0,
+                  color: "success",
+                  variant: "largeReadOnly",
+                  infoBubbleContent: "233"
+                }
+              )
+            ] })
+          }
+        ],
+        variant: "large",
+        activeTab: e,
+        setActiveTab: i
+      }
+    );
+  }
+};
+export {
+  x as LargeVariantWithProgress,
+  A as MixedVariantsDemo,
+  y as MultipleTabsWithState,
+  f as Primary,
+  I as SmallVariantWithState,
+  P as WithContent,
+  u as default
+};

package/dist/components/styles/colors/colormap.d.ts

@@ -0,0 +1,277 @@
+export declare const crusta: {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    950: string;
+};
+export declare const cinnabar: {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    950: string;
+};
+export declare const blueRibbon: {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    950: string;
+};
+export declare const apple: {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    950: string;
+};
+export declare const sun: {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    950: string;
+};
+export declare const woodsmoke: {
+    0: string;
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    950: string;
+};
+export declare const glyph: {
+    default: string;
+    defaultInverted: string;
+    overlay: string;
+    subdued: string;
+    subduedInverted: string;
+    placeholder: string;
+    faded: string;
+    active: string;
+    activeInverted: string;
+    success: string;
+    successInverted: string;
+    warning: string;
+    warningInverted: string;
+    alert: string;
+    alertInverted: string;
+    disabled: string;
+    disabledInverted: string;
+    firstPartyMessage: string;
+    secondPartyMessage: string;
+    visualPlaceholderDefault: string;
+};
+export type GlyphColor = keyof typeof glyph;
+export declare const glyphColorsKeys: string[];
+export declare const glyphClassesMap: {};
+export declare const linkColors: {
+    default: string;
+    hover: string;
+    active: string;
+    disabled: string;
+};
+export declare const linkColorClassesMap: {};
+export type LinkColors = keyof typeof linkColors;
+export declare const surface: {
+    default: string;
+    defaultInverted: string;
+    subdued: string;
+    subduedInverted: string;
+    active: string;
+    activeInverted: string;
+    success: string;
+    successInverted: string;
+    warning: string;
+    warningInverted: string;
+    alert: string;
+    alertInverted: string;
+    badge: string;
+    disabled: string;
+    disabledInverted: string;
+    disabledActive: string;
+    visualPlaceholderDefault: string;
+    firstPartyMessage: string;
+    secondPartyMessage: string;
+};
+export type SurfaceColor = keyof typeof surface;
+export declare const surfaceColorsKeys: string[];
+export declare const surfaceClassesMap: {};
+export declare const borderColor: {
+    none: string;
+    default: string;
+    active: string;
+    divider: string;
+    warning: string;
+    alert: string;
+    defaultInverted: string;
+    subdued: string;
+    subduedDashed: string;
+    disabled: string;
+    outline: string;
+    success: string;
+};
+export declare const shadow: {
+    active: string;
+    warning: string;
+    destructive: string;
+    alert: string;
+};
+export declare const progressBar: {
+    success: string;
+    warning: string;
+    caution: string;
+    alert: string;
+    trackDefault: string;
+    trackInverted: string;
+    trackActive: string;
+};
+export declare const buttonGlyph: {
+    disabled: string;
+    primary: string;
+    secondary: {
+        affirmative: {
+            default: string;
+        };
+        destructive: {
+            default: string;
+            hover: string;
+            active: string;
+        };
+        warning: {
+            default: string;
+            hover: string;
+            active: string;
+        };
+    };
+    tertiary: {
+        affirmative: {
+            default: string;
+        };
+        destructive: {
+            default: string;
+            hover: string;
+            active: string;
+        };
+    };
+    warning: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+    dark: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+};
+export declare const buttonBorder: {
+    disabled: string;
+    secondary: {
+        affirmative: {
+            default: string;
+        };
+        destructive: {
+            default: string;
+        };
+        warning: {
+            default: string;
+        };
+    };
+};
+export declare const buttonSurface: {
+    primary: {
+        disabled: string;
+        affirmative: {
+            default: string;
+            hover: string;
+            active: string;
+        };
+        destructive: {
+            default: string;
+            hover: string;
+            active: string;
+        };
+    };
+    secondary: {
+        warning: {
+            hover: string;
+            active: string;
+        };
+        affirmative: {
+            hover: string;
+            active: string;
+        };
+        destructive: {
+            hover: string;
+            active: string;
+        };
+    };
+    tertiary: {
+        affirmative: {
+            hover: string;
+            active: string;
+        };
+        warning: {
+            hover: string;
+            active: string;
+        };
+        destructive: {
+            hover: string;
+            active: string;
+        };
+        dark: {
+            hover: string;
+            active: string;
+        };
+    };
+};
+export declare const dataVizColors: {
+    hue1: string;
+    hue2: string;
+    hue3: string;
+    hue4: string;
+    shade1: string;
+    shade2: string;
+    shade3: string;
+    shade4: string;
+    shade5: string;
+};
+export type DataVizColor = keyof typeof dataVizColors;