@temp-spotwork/ui 1.4.3

package/dist/components/molecules/conversation/contact/contact.js

@@ -0,0 +1,56 @@
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { useState as v } from "react";
+import { c as t } from "../../../../index-fN7hCOo3.js";
+import { Avatar as C } from "../../../atoms/avatar/avatar.js";
+import { Typography as p } from "../../../styles/typography/typography.js";
+import { Badge as f } from "../../../atoms/badge/badge.js";
+import { conversationContactCardContainerStyle as u, avatarContainer as h, conversationContactCardRightPartStyle as y, nameContainer as g, conversationContactCardRightPart as S, chipContainerStyle as x, conversationContactCardContainer as N } from "./styles.js";
+import { coloring as P, defaultColor as b } from "./coloring.js";
+function B({
+  name: n,
+  avatarProps: i,
+  notification: a,
+  onClick: c,
+  isOnline: o
+}) {
+  const [s, e] = v(!1), l = s ? P.blue.primary : b, m = {
+    ...i,
+    isOnline: o,
+    variant: "circular"
+  };
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: t(N),
+      style: { ...u, backgroundColor: l },
+      onMouseEnter: () => e(!0),
+      onMouseLeave: () => e(!1),
+      onClick: c,
+      "data-testid": "contact",
+      children: [
+        /* @__PURE__ */ r("div", { className: t(h), children: /* @__PURE__ */ r(
+          C,
+          {
+            ...m,
+            id: "avatar",
+            isOnline: o,
+            variant: "circular",
+            size: 4
+          }
+        ) }),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: t(S),
+            style: y,
+            children: /* @__PURE__ */ r("div", { className: t(g), children: /* @__PURE__ */ r(p, { swStyle: 3, children: n }) })
+          }
+        ),
+        a > 0 && /* @__PURE__ */ r("div", { style: x, children: /* @__PURE__ */ r(f, { text: a.toString(), color: "affirmative" }) })
+      ]
+    }
+  );
+}
+export {
+  B as Contact
+};

package/dist/components/molecules/conversation/contact/index.d.ts

@@ -0,0 +1,2 @@
+export { Contact } from './contact';
+export type { ContactProps } from './contact';

package/dist/components/molecules/conversation/contact/index.js

@@ -0,0 +1,4 @@
+import { Contact as r } from "./contact.js";
+export {
+  r as Contact
+};

package/dist/components/molecules/conversation/contact/styles.d.ts

@@ -0,0 +1,18 @@
+export declare const conversationContactCardContainer = "flex items-center p-xs rounded gap-xs";
+export declare const conversationContactCardContainerStyle: {
+    width: string;
+    height: string;
+};
+export declare const conversationContactCardLeftPart = "flex justify-center items-center p-xxs gap-xs";
+export declare const conversationContactCardRightPart = "flex justify-between items-center";
+export declare const conversationContactCardRightPartStyle: {
+    width: string;
+};
+export declare const conversationContactCardParent = "px-3 py-4";
+export declare const conversationContactCardAvatar = "bg-slate-400 rounded-full m-xs";
+export declare const nameContainer = "flex-grow";
+export declare const avatarContainer = "gap-xs";
+export declare const chipContainerStyle: {
+    width: string;
+    height: string;
+};

package/dist/components/molecules/conversation/contact/styles.js

@@ -0,0 +1,16 @@
+const t = "flex items-center p-xs rounded gap-xs", n = {
+  width: "28rem",
+  height: "5rem"
+}, e = "flex justify-center items-center p-xxs gap-xs", a = "flex justify-between items-center", o = { width: "22rem" }, r = "px-3 py-4", c = "bg-slate-400 rounded-full m-xs", s = "flex-grow", i = "gap-xs", C = { width: "2rem", height: "2rem" };
+export {
+  i as avatarContainer,
+  C as chipContainerStyle,
+  c as conversationContactCardAvatar,
+  t as conversationContactCardContainer,
+  n as conversationContactCardContainerStyle,
+  e as conversationContactCardLeftPart,
+  r as conversationContactCardParent,
+  a as conversationContactCardRightPart,
+  o as conversationContactCardRightPartStyle,
+  s as nameContainer
+};

package/dist/components/molecules/conversation/message-editor/MessageEditor.stories.d.ts

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

package/dist/components/molecules/conversation/message-editor/MessageEditor.stories.js

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

@@ -0,0 +1,2 @@
+export { MessageEditor } from './message-editor';
+export type { MessageEditorProps } from './message-editor';

package/dist/components/molecules/conversation/message-editor/index.js

@@ -0,0 +1,4 @@
+import { MessageEditor as r } from "./message-editor.js";
+export {
+  r as MessageEditor
+};

package/dist/components/molecules/conversation/message-editor/message-editor.d.ts

@@ -0,0 +1,17 @@
+import { SvgKey } from '../../../atoms/icons';
+
+export type MessageEditorProps = {
+    /**
+     * Add a prefix icon to the input field. Inherited from Textfield
+     */
+    startIcon?: SvgKey;
+    /**
+     * Function to fire on start icon click
+     */
+    startIconAction?: () => void;
+    /**
+     * Function to fire when "Send Message" (icon on the right) is clicked
+     */
+    sendMessage: (message: string) => void;
+};
+export declare function MessageEditor({ startIcon, startIconAction, sendMessage, }: MessageEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/conversation/message-editor/message-editor.js

@@ -0,0 +1,38 @@
+import { jsx as i } from "react/jsx-runtime";
+import c from "react";
+import { Textfield as d } from "../../../atoms/form/textfield/textfield.js";
+import { c as m } from "../../../../index-fN7hCOo3.js";
+import { messageEditor as l } from "./styles.js";
+function C({
+  startIcon: e,
+  startIconAction: o,
+  sendMessage: s
+}) {
+  const [n, a] = c.useState("");
+  function t() {
+    o && o();
+  }
+  function r() {
+    s(n), a("");
+  }
+  return /* @__PURE__ */ i("div", { className: m(l), children: /* @__PURE__ */ i(
+    d,
+    {
+      endIcon: {
+        icon: "Send",
+        handleClick: r
+      },
+      modification: "messageEditor",
+      onChange: a,
+      value: n,
+      placeholder: "Message",
+      startIcon: e ? {
+        icon: e,
+        handleClick: t
+      } : void 0
+    }
+  ) });
+}
+export {
+  C as MessageEditor
+};

package/dist/components/molecules/conversation/message-editor/styles.d.ts

@@ -0,0 +1 @@
+export declare const messageEditor = "border-none";

package/dist/components/molecules/conversation/message-editor/styles.js

@@ -0,0 +1,4 @@
+const e = "border-none";
+export {
+  e as messageEditor
+};

package/dist/components/molecules/conversation/message-group-composer/MessageGroupComposer.stories.d.ts

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

package/dist/components/molecules/conversation/message-group-composer/MessageGroupComposer.stories.js

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

package/dist/components/molecules/conversation/message-group-composer/index.d.ts

@@ -0,0 +1,2 @@
+export { MessageGroupComposer } from './message-group-composer';
+export type { MessageGroupComposerProps } from './message-group-composer';

package/dist/components/molecules/conversation/message-group-composer/index.js

@@ -0,0 +1,4 @@
+import { MessageGroupComposer as r } from "./message-group-composer.js";
+export {
+  r as MessageGroupComposer
+};

package/dist/components/molecules/conversation/message-group-composer/message-group-composer.d.ts

@@ -0,0 +1,9 @@
+import { MessageProps } from '../../../atoms/message';
+
+export type MessageGroupComposerProps = {
+    /**
+     * An array of messages
+     */
+    messages: MessageProps[];
+};
+export declare function MessageGroupComposer({ messages }: MessageGroupComposerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/conversation/message-group-composer/message-group-composer.js

@@ -0,0 +1,41 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useState as u, useEffect as c } from "react";
+import { Message as G } from "../../../atoms/message/message.js";
+import { styles as y } from "./styles.js";
+function x({ messages: a }) {
+  const [o, n] = u([...a].reverse()), [l, d] = u([]);
+  c(() => {
+    n([...a].reverse());
+  }, [a]), c(() => {
+    f();
+  }, [o]);
+  const f = () => {
+    const e = [];
+    let s = [], t;
+    o.forEach((r, h) => {
+      r.isPrimary !== t && (s.length > 0 && (e.push(s), s = []), t = r.isPrimary ?? !1), s.push({ ...r }), h === a.length - 1 && e.push(s);
+    }), e.map((r) => (r[r.length - 1].isFirstInGroup = !0, r)), d([...e]);
+  }, m = (e) => {
+    const s = o.map((t) => t.id === e ? { ...t, displayStatus: !t.displayStatus } : { ...t, displayStatus: !1 });
+    n([...s]);
+  }, p = y();
+  return /* @__PURE__ */ i("div", { className: p.container, "data-testid": "composer-container", children: l.map((e, s) => /* @__PURE__ */ i(
+    "div",
+    {
+      className: p.messageGroupBox,
+      "data-testid": "group-container",
+      children: e.map((t) => /* @__PURE__ */ i(
+        G,
+        {
+          ...t,
+          handleMessageClick: m
+        },
+        t.id
+      ))
+    },
+    s
+  )) });
+}
+export {
+  x as MessageGroupComposer
+};

package/dist/components/molecules/conversation/message-group-composer/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const styles: () => {
+    container: string;
+    messageGroupBox: string;
+};

package/dist/components/molecules/conversation/message-group-composer/styles.js

@@ -0,0 +1,7 @@
+const e = () => ({
+  container: "flex flex-col-reverse gap-md min-h-[100%]",
+  messageGroupBox: "flex flex-col-reverse gap-xs"
+});
+export {
+  e as styles
+};

package/dist/components/molecules/datatables/cell/Cell.stories.d.ts

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

package/dist/components/molecules/datatables/cell/Cell.stories.js

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

package/dist/components/molecules/datatables/cell/cell.d.ts

@@ -0,0 +1,62 @@
+import { default as React, ReactNode } from 'react';
+import { SurfaceColor } from '../../../styles/colors';
+
+export type CellProps = {
+    /**
+     * the cell id for mapping cells. It can be timestamp or something else
+     */
+    id: string;
+    /**
+     * the cell onClick handler
+     */
+    onClick?: (id: string) => void;
+    /**
+     * array of ReactNodes
+     */
+    contentBlocks?: Array<ReactNode>;
+    /**
+     * custom cell bg color
+     */
+    bgColor?: SurfaceColor;
+    /**
+     * each cell has a right border except the last cell in the row. If you need to add a left border for cell use this prop.
+     */
+    hasLeftBorder?: boolean;
+    /**
+     * a cell's right border is removed when this prop is false. By default, it is true so that cells would always have a right border unless overridden.
+     */
+    hasRightBorder?: boolean;
+    /**
+     * the rowHeader min width in rem
+     */
+    minWidth?: number;
+    /**
+     * the rowHeader max width in rem
+     */
+    maxWidth?: number;
+    /**
+     * grow
+     */
+    grow?: number;
+    /**
+     * shrink
+     */
+    shrink?: number;
+    /**
+     * shrink
+     */
+    basis?: string | number;
+    /**
+     * custom class names
+     */
+    className?: string;
+    /**
+     * custom style
+     */
+    style?: React.CSSProperties;
+    /**
+     * content container class name
+     */
+    contentContainerClassName?: string;
+};
+export declare const Cell: React.ForwardRefExoticComponent<CellProps & React.RefAttributes<HTMLTableCellElement>>;

package/dist/components/molecules/datatables/cell/cell.js

@@ -0,0 +1,51 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as v } from "react";
+import { contentBlock as w, containerInner as $, containerOuter as g } from "./styles.js";
+import { t as a } from "../../../../bundle-mjs-CAy1p0fn.js";
+const y = v(
+  ({
+    contentBlocks: e,
+    minWidth: d,
+    maxWidth: i,
+    bgColor: l = "default",
+    hasLeftBorder: m,
+    hasRightBorder: o = !0,
+    grow: s = 1,
+    shrink: n = 1,
+    basis: f = "0%",
+    className: c,
+    style: p,
+    onClick: r,
+    id: u,
+    contentContainerClassName: h
+  }, x) => /* @__PURE__ */ t(
+    "td",
+    {
+      className: a(
+        g,
+        m ? "border-l" : "",
+        o ? "" : "border-r-0",
+        // Remove right border when false,
+        `bg-surface-${l}`,
+        // bg cell color
+        c
+      ),
+      style: {
+        maxWidth: i ? `${i}rem` : void 0,
+        minWidth: `${d}rem`,
+        flexGrow: s,
+        flexShrink: n,
+        flexBasis: f,
+        ...p
+      },
+      "data-testid": "cell-container-outer",
+      ref: x,
+      onClick: () => r == null ? void 0 : r(u),
+      children: /* @__PURE__ */ t("div", { className: a($, h), "data-testid": "cell-container-inner", children: e == null ? void 0 : e.map((b, N) => /* @__PURE__ */ t("div", { className: a(w), "data-testid": "cell-content-block", children: b }, N)) })
+    }
+  )
+);
+y.displayName = "Cell";
+export {
+  y as Cell
+};

package/dist/components/molecules/datatables/cell/index.d.ts

@@ -0,0 +1,2 @@
+export { Cell } from './cell';
+export type { CellProps } from './cell';

package/dist/components/molecules/datatables/cell/index.js

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

package/dist/components/molecules/datatables/cell/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const containerOuter = "min-h-full p-0 \nborder-r border-t border-bcolor-subdued\ngroup-first/item:first:rounded-tl-xl\ngroup-first/item:last:rounded-tr-xl \ngroup-last/item:first:rounded-bl-xl \ngroup-last/item:last:rounded-br-xl group-last/item:border-b\n";
+export declare const containerInner = "flex flex-col gap-xxl px-sm py-md";
+export declare const contentBlock = "flex flex-col gap-xs flex-initial h-full";

package/dist/components/molecules/datatables/cell/styles.js

@@ -0,0 +1,12 @@
+const r = `min-h-full p-0 
+border-r border-t border-bcolor-subdued
+group-first/item:first:rounded-tl-xl
+group-first/item:last:rounded-tr-xl 
+group-last/item:first:rounded-bl-xl 
+group-last/item:last:rounded-br-xl group-last/item:border-b
+`, t = "flex flex-col gap-xxl px-sm py-md", l = "flex flex-col gap-xs flex-initial h-full";
+export {
+  t as containerInner,
+  r as containerOuter,
+  l as contentBlock
+};

package/dist/components/molecules/datatables/row/Row.stories.d.ts

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

package/dist/components/molecules/datatables/row/Row.stories.js

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

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

package/dist/components/molecules/datatables/row/index.js

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

package/dist/components/molecules/datatables/row/row.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { RowHeaderProps } from '../row-header';
+
+export type RowProps = {
+    /**
+     * the row id for mapping rows. It can be user id or job id etc..
+     */
+    id?: string;
+    /**
+     * Header of row. Can receive React.ReactElement<RowheaderProps>
+     */
+    rowHeader?: React.ReactElement<RowHeaderProps>;
+    /**
+     * pass your sells
+     */
+    cells: React.ReactNode;
+    /**
+     * min table row width in rem
+     */
+    minWidth?: number;
+    /**
+     * Additional CSS classes to apply to the row
+     */
+    className?: string;
+};
+export declare function Row({ cells, rowHeader, minWidth, id, className }: RowProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/datatables/row/row.js

@@ -0,0 +1,21 @@
+import { jsxs as i } from "react/jsx-runtime";
+import { rowContainer as m } from "./styles.js";
+import { t as n } from "../../../../bundle-mjs-CAy1p0fn.js";
+function l({ cells: t, rowHeader: o, minWidth: r, id: e, className: a }) {
+  return /* @__PURE__ */ i(
+    "tr",
+    {
+      id: e,
+      className: n(m, a),
+      style: { minWidth: r ? `${r}rem` : "0" },
+      "data-testid": "table-row-container",
+      children: [
+        o,
+        t
+      ]
+    }
+  );
+}
+export {
+  l as Row
+};

package/dist/components/molecules/datatables/row/styles.d.ts

@@ -0,0 +1 @@
+export declare const rowContainer = "flex w-full  group/item";

package/dist/components/molecules/datatables/row/styles.js

@@ -0,0 +1,4 @@
+const o = "flex w-full  group/item";
+export {
+  o as rowContainer
+};

package/dist/components/molecules/datatables/row-header/RowHeader.stories.d.ts

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

package/dist/components/molecules/datatables/row-header/RowHeader.stories.js

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

@@ -0,0 +1,2 @@
+export { RowHeader } from './row-header';
+export type { RowHeaderProps } from './row-header';

package/dist/components/molecules/datatables/row-header/index.js

@@ -0,0 +1,4 @@
+import { RowHeader as r } from "./row-header.js";
+export {
+  r as RowHeader
+};