@temp-spotwork/ui 1.4.3

package/dist/components/atoms/card-content/note/note.d.ts

@@ -0,0 +1,33 @@
+import { AvatarProps } from '../../avatar';
+import { GlyphColor } from '../../../styles/colors';
+import { LinkProps } from '../../../molecules/link';
+
+export type NoteProps = {
+    /**
+     * the avatar component.It has AvatarProps type and variant={'circular'} size={4} are predefined, but you can rewrite it.
+     */
+    avatar?: Partial<AvatarProps> & {
+        id: string;
+    };
+    /**
+     * a note message
+     */
+    note: string;
+    /**
+     * color of note message title
+     */
+    noteColor?: GlyphColor;
+    /**
+     * a link of message writer
+     */
+    linkProps?: LinkProps;
+    /**
+     * prefix of  the buttonLink
+     */
+    prefix?: string;
+    /**
+     * suffix of the buttonLink. It usually is a date of note.
+     */
+    suffix?: string;
+};
+export declare function Note({ avatar, note, noteColor, linkProps, prefix, suffix, }: NoteProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/card-content/note/note.js

@@ -0,0 +1,30 @@
+import { jsxs as l, jsx as e, Fragment as t } from "react/jsx-runtime";
+import { Avatar as m } from "../../avatar/avatar.js";
+import { Typography as r } from "../../../styles/typography/typography.js";
+import { Link as n } from "../../../molecules/link/link.js";
+function p({
+  avatar: s,
+  note: c,
+  noteColor: a = "default",
+  linkProps: i,
+  prefix: d,
+  suffix: o
+}) {
+  return /* @__PURE__ */ l("div", { className: "flex gap-xs", children: [
+    s && /* @__PURE__ */ e("div", { className: "p-xxs", children: /* @__PURE__ */ e(m, { variant: "circular", size: 4, ...s }) }),
+    /* @__PURE__ */ l("div", { className: "flex flex-col", children: [
+      c && /* @__PURE__ */ e(r, { swStyle: 3, children: c, color: a }),
+      /* @__PURE__ */ l("div", { className: "flex flex-row items-baseline gap-xs", children: [
+        d && /* @__PURE__ */ e(r, { swStyle: 1, children: d, color: "subdued" }),
+        i && /* @__PURE__ */ e(n, { ...i }),
+        o && /* @__PURE__ */ l(t, { children: [
+          /* @__PURE__ */ e(r, { swStyle: 1, children: "•", color: "subdued" }),
+          /* @__PURE__ */ e(r, { swStyle: 1, children: o, color: "subdued" })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+export {
+  p as Note
+};

package/dist/components/atoms/conversation/chatheader/chatheader.d.ts

@@ -0,0 +1,11 @@
+export type ChatheaderProps = {
+    /**
+     * a name to be shown on the left side of header.
+     */
+    userName?: string;
+    /**
+     * Whether to show Maximize\Restore icons and fix the width
+     */
+    isMinimized?: boolean;
+};
+export declare function Chatheader({ userName, isMinimized }: ChatheaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/conversation/chatheader/chatheader.js

@@ -0,0 +1,91 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { useState as t } from "react";
+import { c as l } from "../../../../index-fN7hCOo3.js";
+import { chatHeaderIconContainer as k, chatHeader as x, fixedWidth as v } from "./styles.js";
+import { Icons as i } from "../../icons/icons.js";
+import "../../icons/iconsSVGs/Large/Profile.js";
+import "../../icons/iconsSVGs/Small/Profile.js";
+function j({ userName: d, isMinimized: o = !1 }) {
+  const [s, c] = t(!0), [m, r] = t(!0), [f, n] = t("");
+  function h() {
+    n("minimize"), r(!1);
+  }
+  function u() {
+    n("Maximize1"), r(!0);
+  }
+  function I() {
+    c(!0), n("maximize");
+  }
+  function p() {
+    c(!1), n("restore");
+  }
+  function C() {
+    n("close");
+  }
+  return /* @__PURE__ */ a("div", { className: l(x, o && v), children: [
+    /* @__PURE__ */ e(
+      "span",
+      {
+        className: "truncate font-manrope text-[1.6rem] text-glyph-defaultInverted font-semibold leading-[2.5rem]",
+        children: d
+      }
+    ),
+    /* @__PURE__ */ a("div", { className: l(k), children: [
+      m ? /* @__PURE__ */ e(
+        i,
+        {
+          handleClick: h,
+          id: "minimizeIcon",
+          color: "defaultInverted",
+          icon: "Minimize"
+        }
+      ) : /* @__PURE__ */ e(
+        i,
+        {
+          handleClick: u,
+          id: "openIcon",
+          color: "defaultInverted",
+          icon: "Maximize1"
+        }
+      ),
+      !o && (s ? /* @__PURE__ */ e(
+        i,
+        {
+          handleClick: p,
+          id: "restoreIcon",
+          color: "defaultInverted",
+          icon: "Restore"
+        }
+      ) : /* @__PURE__ */ e(
+        i,
+        {
+          handleClick: I,
+          id: "restoreIcon",
+          color: "defaultInverted",
+          icon: "Maximize"
+        }
+      )),
+      /* @__PURE__ */ e(
+        i,
+        {
+          handleClick: C,
+          id: "closeIcon",
+          color: "defaultInverted",
+          icon: "Cross"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        id: "clickEventsTesting",
+        "data-testid": "chatHeaderClickEventsTesting",
+        className: "absolute width-[0.1rem] height-[0.1rem] left-[-200rem]",
+        children: f
+      }
+    )
+  ] });
+}
+export {
+  j as Chatheader
+};

package/dist/components/atoms/conversation/chatheader/index.d.ts

@@ -0,0 +1,2 @@
+export { Chatheader } from './chatheader';
+export type { ChatheaderProps } from './chatheader';

package/dist/components/atoms/conversation/chatheader/index.js

@@ -0,0 +1,4 @@
+import { Chatheader as a } from "./chatheader.js";
+export {
+  a as Chatheader
+};

package/dist/components/atoms/conversation/chatheader/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const chatHeader = "flex f-full justify-between gap-lg bg-linkColors-active p-md hover:cursor-pointer";
+export declare const chatHeaderIconContainer = "flex";
+export declare const chatHeaderIcon = "hover:cursor-pointer";
+export declare const fixedWidth = "w-[25rem]";

package/dist/components/atoms/conversation/chatheader/styles.js

@@ -0,0 +1,7 @@
+const e = "flex f-full justify-between gap-lg bg-linkColors-active p-md hover:cursor-pointer", o = "flex", r = "hover:cursor-pointer", t = "w-[25rem]";
+export {
+  e as chatHeader,
+  r as chatHeaderIcon,
+  o as chatHeaderIconContainer,
+  t as fixedWidth
+};

package/dist/components/atoms/daybubble/recurrence-day/RecurrenceDay.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta as MetaType, StoryObj } from '@storybook/react';
+import { RecurrenceDay } from './recurrence-day';
+
+declare const Meta: MetaType<typeof RecurrenceDay>;
+export default Meta;
+type Story = StoryObj<typeof RecurrenceDay>;
+export declare const Basic: Story;

package/dist/components/atoms/daybubble/recurrence-day/RecurrenceDay.stories.js

@@ -0,0 +1,20 @@
+import { jsx as a } from "react/jsx-runtime";
+import { RecurrenceDay as s } from "./recurrence-day.js";
+import { useState as c } from "react";
+const f = {
+  component: s,
+  decorators: [
+    (e, { args: o }) => {
+      const [t, r] = c(!1);
+      return /* @__PURE__ */ a(e, { args: { ...o, active: t, onClick: () => r(!t) } });
+    }
+  ]
+}, p = {
+  args: {
+    day: 0
+  }
+};
+export {
+  p as Basic,
+  f as default
+};

package/dist/components/atoms/daybubble/recurrence-day/index.d.ts

@@ -0,0 +1,2 @@
+export { RecurrenceDay } from './recurrence-day';
+export type { RecurrenceDayProps } from './recurrence-day';

package/dist/components/atoms/daybubble/recurrence-day/index.js

@@ -0,0 +1,4 @@
+import { RecurrenceDay as c } from "./recurrence-day.js";
+export {
+  c as RecurrenceDay
+};

package/dist/components/atoms/daybubble/recurrence-day/recurrence-day.d.ts

@@ -0,0 +1,27 @@
+export type RecurrenceDayProps = {
+    /**
+     *  day of the week, ranging from 0 (Sunday) to 6 (Saturday)
+     */
+    day: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * active state
+     */
+    active?: boolean;
+    /**
+     * warning state
+     */
+    warning?: boolean;
+    /**
+     * disabled state
+     */
+    disabled?: boolean;
+    /**
+     * handle  click on RecurrenceDay
+     */
+    onClick?: () => void;
+    /**
+     * localization
+     */
+    locale?: string;
+};
+export declare function RecurrenceDay({ day, active, warning, disabled, onClick, locale, }: RecurrenceDayProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/daybubble/recurrence-day/recurrence-day.js

@@ -0,0 +1,86 @@
+import { jsx as n } from "react/jsx-runtime";
+import { Typography as g } from "../../../styles/typography/typography.js";
+import { t as w } from "../../../../bundle-mjs-CAy1p0fn.js";
+import { s as i, a as h } from "../../../../startOfWeek-DBvLd9He.js";
+function I({
+  day: c,
+  active: e,
+  warning: o,
+  disabled: r,
+  onClick: t,
+  locale: u = "en"
+}) {
+  const a = [], d = new Intl.DateTimeFormat(u, { weekday: "short" }), f = i(/* @__PURE__ */ new Date());
+  for (let s = 0; s < 7; s++)
+    a.push(d.format(h(f, s)));
+  const l = () => {
+    switch (!0) {
+      case (r && !e):
+        return "bg-surface-disabled";
+      case (r && e):
+        return "bg-surface-disabledInverted";
+      case e:
+        return "bg-surface-active";
+      case o:
+        return "bg-surface-warning";
+      case r:
+        return "bg-surface-disabled";
+      default:
+        return "bg-surface-default";
+    }
+  }, b = () => {
+    switch (!0) {
+      case (r && !e):
+        return "border-bcolor-disabled";
+      case (r && e):
+        return "border-surface-disabledInverted";
+      case e:
+        return "border-bcolor-active border-[0.15rem]";
+      case o:
+        return "border-bcolor-warning  border-[0.15rem]";
+      case r:
+        return "border-bcolor-disabled";
+      default:
+        return "border-bcolor-default";
+    }
+  }, m = () => {
+    switch (!0) {
+      case (r && !e):
+        return "disabled";
+      case (r && e):
+        return "disabledInverted";
+      case e:
+        return "active";
+      case o:
+        return "warning";
+      case r:
+        return "disabled";
+      default:
+        return "default";
+    }
+  };
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      "data-testid": "RecurrenceDay-container",
+      className: w(
+        "shrink-0 grow-0 w-[4rem] h-[4rem] flex items-center justify-center border rounded-full select-none ",
+        r || !t ? "cursor-not-allowed" : "cursor-pointer",
+        l(),
+        b()
+      ),
+      onClick: () => !r && (t == null ? void 0 : t()),
+      children: /* @__PURE__ */ n(
+        g,
+        {
+          children: a[c].trim().toUpperCase().charAt(0),
+          color: m(),
+          swStyle: 5
+        }
+      )
+    }
+  );
+}
+export {
+  I as RecurrenceDay
+};

package/dist/components/atoms/form/calendar/calendar-date-cell.d.ts

@@ -0,0 +1,68 @@
+import { default as React } from 'react';
+import { CalendarDate } from './types';
+
+export type CalendarDateCellProps = {
+    /**
+     * The date to display
+     */
+    date: Date;
+    /**
+     * The selected dates
+     */
+    selectedDates: CalendarDate[];
+    /**
+     * Whether the calendar is disabled
+     */
+    disabled: boolean;
+    /**
+     * Callback when this date is clicked
+     */
+    onDateChange: (date: CalendarDate[]) => void;
+    /**
+     * Ref callback to track this cell's position for marquee selection
+     */
+    onCellRef: (dateStr: string, node: HTMLButtonElement | null) => void;
+    /**
+     * Minimum selectable date
+     */
+    minDate: Date;
+    /**
+     * Maximum selectable date
+     */
+    maxDate: Date;
+    /**
+     * Current month being displayed
+     */
+    month: Date;
+    /**
+     * The timezone for date operations
+     */
+    timezone: string;
+    /**
+     * Read only mode
+     */
+    readOnly?: boolean;
+    /**
+     * Override the tooltips for the selected dates
+     */
+    overrideTooltip?: (date: CalendarDate) => string | React.ReactNode;
+};
+/**
+ * Calendar date cell component that renders a single date in the calendar grid.
+ *
+ * Features:
+ * - Handles date selection with click events
+ * - Supports multiple selection states (selected, disabled, today, etc.)
+ * - Provides visual feedback through styling and colors
+ * - Supports tooltips for additional information
+ * - Integrates with marquee selection system
+ * - Handles accessibility attributes
+ *
+ * The component determines its state based on:
+ * - Whether the date is in the current month
+ * - Whether the date is selected
+ * - Whether the date is disabled (outside min/max range)
+ * - Whether the date is today
+ * - Custom color states from selectedDates
+ */
+export declare const CalendarDateCell: React.FC<CalendarDateCellProps>;

package/dist/components/atoms/form/calendar/calendar-date-cell.js

@@ -0,0 +1,82 @@
+import { jsx as s, jsxs as C } from "react/jsx-runtime";
+import { isValidElement as B } from "react";
+import { m as a } from "../../../../index-CYyrKZeH.js";
+import { Typography as N } from "../../../styles/typography/typography.js";
+import { t as T } from "../../../../bundle-mjs-CAy1p0fn.js";
+import { isDateInCurrentMonth as F, isDateSelected as j, isDateDisabled as M, isDateSelectable as G } from "./calendar-utils.js";
+import { T as H, a as J, b as K, C as L, A as Q } from "../../../../index-DNpMaKvH.js";
+import { toolTipStyles as R } from "../../../styles/tool-tip/styles.js";
+const z = ({
+  date: l,
+  selectedDates: c,
+  disabled: S,
+  onDateChange: u,
+  onCellRef: I,
+  minDate: w,
+  maxDate: g,
+  month: k,
+  timezone: i,
+  overrideTooltip: h,
+  readOnly: d
+}) => {
+  const y = a.tz(l, i).isSame(a.tz(/* @__PURE__ */ new Date(), i), "day"), A = l.toISOString().split("T")[0], P = (o) => {
+    if (S || M(o.date, i, w, g)) return;
+    const x = [...c], q = j(
+      o.date,
+      c.map((b) => b.date),
+      i
+    );
+    let p;
+    q ? p = x.filter((b) => !a.tz(b.date, i).isSame(o.date, "day")) : p = [...x, o], u == null || u(p);
+  }, E = F(l, k, i), e = j(
+    l,
+    c.map((o) => o.date),
+    i
+  ), V = a.tz(l, i), r = c.find((o) => V.isSame(a.tz(o.date, i), "day")), n = M(l, i, w, g) || S || (r == null ? void 0 : r.isDisabled), f = r != null && r.color ? r.color : e ? "active" : void 0, m = G(l, c, i);
+  let t = "w-[3rem] h-[3rem] rounded-md transition-all duration-200 flex items-center justify-center";
+  if (n && !d ? t += " cursor-not-allowed" : d && (t += " cursor-default"), e ? t += " bg-surface-active" : t += " bg-surface-default", y && (t += " border border-bcolor-subdued rounded"), y && e && (t += " border-bcolor-active"), !n && m && !(r != null && r.color) && !d && (t += " hover:bg-surface-active"), r != null && r.color && (t += " cursor-default"), f === "warning" && (t += " bg-surface-warning"), f === "alert" && (t += " bg-surface-alert"), f === "disabled" && (t += " bg-surface-disabled"), !E)
+    return /* @__PURE__ */ s("span", { className: "w-[3rem] h-[3rem]" });
+  const v = /* @__PURE__ */ s(
+    "button",
+    {
+      type: "button",
+      "aria-disabled": n || !m,
+      "aria-selected": e,
+      ref: (o) => I(A, o),
+      className: T(t),
+      onMouseDown: (o) => {
+        o.preventDefault();
+      },
+      onClick: (o) => {
+        o.stopPropagation(), !n && m && !(r != null && r.isDisabled) && P({ date: l });
+      },
+      children: /* @__PURE__ */ s(
+        N,
+        {
+          swStyle: 5,
+          color: f || (n ? "disabled" : "default"),
+          className: "w-full h-full flex items-center justify-center",
+          children: a.tz(l, i).format("D")
+        }
+      )
+    }
+  );
+  return r != null && r.tooltip ? /* @__PURE__ */ C(H, { children: [
+    /* @__PURE__ */ s(J, { asChild: !0, children: v }),
+    /* @__PURE__ */ s(K, { children: /* @__PURE__ */ C(L, { className: T(R), side: "bottom", align: "center", children: [
+      h ? h(r) : typeof r.tooltip == "string" && !B(r.tooltip) ? /* @__PURE__ */ s(
+        N,
+        {
+          color: "defaultInverted",
+          children: r.tooltip,
+          swStyle: 1,
+          className: "px-xs max-w-[30rem]"
+        }
+      ) : r.tooltip,
+      /* @__PURE__ */ s(Q, { className: "fill-glyph-default" })
+    ] }) })
+  ] }) : v;
+};
+export {
+  z as CalendarDateCell
+};

package/dist/components/atoms/form/calendar/calendar-month.d.ts

@@ -0,0 +1,57 @@
+import { default as React } from 'react';
+import { CalendarDate } from './types';
+
+export type CalendarDatesProps = {
+    /**
+     * The currently selected date(s)
+     */
+    selectedDates: CalendarDate[];
+    /**
+     * Callback when date selection changes
+     */
+    onDateChange: (date: CalendarDate[]) => void;
+    /**
+     * Current month being displayed
+     */
+    month: Date;
+    /**
+     * Disable the calendar
+     */
+    disabled: boolean;
+    /**
+     * Minimum selectable date
+     */
+    minDate: Date;
+    /**
+     * Maximum selectable date
+     */
+    maxDate: Date;
+    /**
+     * The timezone for date operations
+     */
+    timezone: string;
+    /**
+     * Read only mode
+     */
+    readOnly?: boolean;
+    /**
+     * Override the tooltips for the selected dates
+     */
+    overrideTooltip?: (date: CalendarDate) => string | React.ReactNode;
+};
+/**
+ * Calendar month component that renders a full month grid with marquee selection support.
+ *
+ * Features:
+ * - Generates a complete calendar grid including dates from adjacent months
+ * - Supports marquee/drag selection for multiple date selection
+ * - Handles mouse events for both click and drag interactions
+ * - Tracks date cell positions for accurate drag selection
+ * - Visual feedback with drag selection box
+ *
+ * The component calculates the full calendar view including:
+ * - Dates from the previous month to fill the first week
+ * - All dates from the current month
+ * - Dates from the next month to fill the last week
+ */
+export declare const CalendarDates: React.FC<CalendarDatesProps>;