@temp-spotwork/ui 1.4.7 → 1.4.8

package/dist/components/atoms/form/time-picker/time-picker.stories.d.ts

@@ -28,3 +28,10 @@ export declare const MidnightMinus1Hour: Story;
 export declare const MidnightMinus1HourAnd18HoursMaxUpperBound: Story;
 export declare const Noon: Story;
 export declare const FifteenMinutesStep: Story;
+export declare const CustomInputHeight: Story;
+export declare const WithoutIcon: Story;
+export declare const WithCustomIcon: Story;
+export declare const DropdownOpensBottom: Story;
+export declare const DropdownOpensTop: Story;
+export declare const DropdownOpensLeft: Story;
+export declare const DropdownOpensRight: Story;

package/dist/components/atoms/form/time-picker/time-picker.stories.js

@@ -1,32 +1,33 @@
-import { jsx as r, jsxs as o } from "react/jsx-runtime";
-import { useState as l } from "react";
-import { TimePicker as n } from "./time-picker.js";
+import { jsx as o, jsxs as l } from "react/jsx-runtime";
+import { useState as d } from "react";
+import { TimePicker as m } from "./time-picker.js";
 import { m as t } from "../../../../index-CYyrKZeH.js";
-const i = (e) => {
-  const [a, s] = l(e.value || /* @__PURE__ */ new Date());
-  return /* @__PURE__ */ o("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ o("div", { className: "mt-4 p-3 bg-gray-100 rounded-md", children: [
-      /* @__PURE__ */ r("div", { className: "text-sm font-medium text-gray-700", children: "Selected Value:" }),
-      /* @__PURE__ */ o("div", { className: "text-sm text-gray-600", children: [
-        /* @__PURE__ */ o("div", { children: [
+import { w as i, e as s, u as c } from "../../../../index-CktvVE7I.js";
+const n = (e) => {
+  const [r, a] = d(e.value || /* @__PURE__ */ new Date());
+  return /* @__PURE__ */ l("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ l("div", { className: "mt-4 p-3 bg-gray-100 rounded-md", children: [
+      /* @__PURE__ */ o("div", { className: "text-sm font-medium text-gray-700", children: "Selected Value:" }),
+      /* @__PURE__ */ l("div", { className: "text-sm text-gray-600", children: [
+        /* @__PURE__ */ l("div", { children: [
           "Date: ",
-          t(a).format("MMMM Do, YYYY")
+          t(r).format("MMMM Do, YYYY")
         ] }),
-        /* @__PURE__ */ o("div", { children: [
+        /* @__PURE__ */ l("div", { children: [
           "Time: ",
-          t(a).format("h:mm A")
+          t(r).format("h:mm A")
         ] }),
-        /* @__PURE__ */ o("div", { children: [
+        /* @__PURE__ */ l("div", { children: [
           "ISO: ",
-          a.toLocaleString()
+          r.toLocaleString()
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ r(n, { ...e, value: a, selectValue: s })
+    /* @__PURE__ */ o(m, { ...e, value: r, selectValue: a })
   ] });
-}, h = {
+}, y = {
   title: "@spotwork-ui/atoms/form/TimePicker",
-  component: n,
+  component: m,
   parameters: {
     layout: "centered",
     docs: {
@@ -99,6 +100,19 @@ const i = (e) => {
       control: "text",
       description: "Optional className to apply to the time picker container"
     },
+    inputHeight: {
+      control: "text",
+      description: "Optional height for the time picker input button"
+    },
+    icon: {
+      control: "text",
+      description: "Optional icon key rendered at right side of input"
+    },
+    dropdownPlacement: {
+      control: "select",
+      options: ["top", "bottom", "left", "right"],
+      description: "Controls where the dropdown opens relative to the input"
+    },
     selectValue: {
       action: "time selected",
       description: "Callback function to update the selected time"
@@ -114,36 +128,36 @@ const i = (e) => {
     daySeparatorFormat: "literal",
     notRenderTimeDifference: !1
   }
-}, p = {
-  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+}, w = {
+  render: (e) => /* @__PURE__ */ o(n, { ...e }),
   args: {
     label: "Select Time",
     helperText: "Choose your preferred time",
     step: 15
   }
-}, T = {
-  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+}, D = {
+  render: (e) => /* @__PURE__ */ o(n, { ...e }),
   args: {
     value: t().hours(14).minutes(30).toDate()
     // 2:30 PM
   }
-}, g = {
-  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+}, f = {
+  render: (e) => /* @__PURE__ */ o(n, { ...e }),
   args: {
     label: "Meeting Time",
     value: t().hours(9).minutes(0).toDate()
     // 9:00 AM
   }
-}, b = {
-  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+}, v = {
+  render: (e) => /* @__PURE__ */ o(n, { ...e }),
   args: {
     label: "Appointment Time",
     helperText: "Please select a time between 9 AM and 5 PM",
     value: t().hours(10).minutes(15).toDate()
     // 10:15 AM
   }
-}, D = {
-  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+}, x = {
+  render: (e) => /* @__PURE__ */ o(n, { ...e }),
   args: {
     label: "Time Selection",
     helperText: "Please select a valid time",
@@ -151,8 +165,8 @@ const i = (e) => {
     value: t().hours(16).minutes(45).toDate()
     // 4:45 PM
   }
-}, v = {
-  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+}, S = {
+  render: (e) => /* @__PURE__ */ o(n, { ...e }),
   args: {
     label: "Time Selection",
     helperText: "This time is outside business hours",
@@ -160,8 +174,8 @@ const i = (e) => {
     value: t().hours(20).minutes(30).toDate()
     // 8:30 PM
   }
-}, x = {
-  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+}, k = {
+  render: (e) => /* @__PURE__ */ o(n, { ...e }),
   args: {
     label: "Time Selection",
     helperText: "This field is currently disabled",
@@ -169,8 +183,8 @@ const i = (e) => {
     value: t().hours(12).minutes(0).toDate()
     // 12:00 PM
   }
-}, f = {
-  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+}, C = {
+  render: (e) => /* @__PURE__ */ o(n, { ...e }),
   args: {
     label: "Time with 15-minute intervals",
     helperText: "Select time in 15-minute increments",
@@ -178,8 +192,8 @@ const i = (e) => {
     value: t().hours(13).minutes(0).toDate()
     // 1:00 PM
   }
-}, y = {
-  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+}, M = {
+  render: (e) => /* @__PURE__ */ o(n, { ...e }),
   args: {
     label: "Business Hours",
     helperText: "Select time between 9 AM and 5 PM",
@@ -190,8 +204,8 @@ const i = (e) => {
     value: t().hours(14).minutes(30).toDate()
     // 2:30 PM
   }
-}, S = {
-  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+}, B = {
+  render: (e) => /* @__PURE__ */ o(n, { ...e }),
   args: {
     label: "Central (Chicago) Time",
     helperText: "All times are in Central Time",
@@ -199,8 +213,8 @@ const i = (e) => {
     value: t().hours(15).minutes(0).toDate()
     // 3:00 PM
   }
-}, M = {
-  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+}, A = {
+  render: (e) => /* @__PURE__ */ o(n, { ...e }),
   args: {
     label: "Time Relative to Today",
     helperText: "Shows time difference from current time",
@@ -208,8 +222,8 @@ const i = (e) => {
     value: t().add(1, "days").hours(16).minutes(30).toDate()
     // Tomorrow 4:30 PM
   }
-}, w = {
-  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+}, N = {
+  render: (e) => /* @__PURE__ */ o(n, { ...e }),
   args: {
     label: "Multi-day Time Selection",
     helperText: "Shows actual dates for day separators",
@@ -219,8 +233,8 @@ const i = (e) => {
     value: t().hours(12).minutes(0).toDate()
     // 12:00 PM
   }
-}, A = {
-  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+}, P = {
+  render: (e) => /* @__PURE__ */ o(n, { ...e }),
   args: {
     label: "Simple Time Selection",
     helperText: "No relative time display",
@@ -229,8 +243,8 @@ const i = (e) => {
     value: t().add(1, "days").hours(10).minutes(15).toDate()
     // Tomorrow 10:15 AM
   }
-}, k = {
-  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+}, I = {
+  render: (e) => /* @__PURE__ */ o(n, { ...e }),
   args: {
     label: "Auto-focused Time Picker",
     helperText: "This field will be focused automatically",
@@ -238,8 +252,8 @@ const i = (e) => {
     value: t().hours(11).minutes(0).toDate()
     // 11:00 AM
   }
-}, C = {
-  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+}, O = {
+  render: (e) => /* @__PURE__ */ o(n, { ...e }),
   args: {
     label: "Custom Styled Time Picker",
     helperText: "This has custom container styling",
@@ -247,24 +261,24 @@ const i = (e) => {
     value: t().hours(13).minutes(45).toDate()
     // 1:45 PM
   }
-}, N = {
-  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+}, R = {
+  render: (e) => /* @__PURE__ */ o(n, { ...e }),
   args: {
     label: "Early Morning Time",
     helperText: "Select an early morning time",
     value: t().hours(6).minutes(0).toDate()
     // 6:00 AM
   }
-}, P = {
-  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+}, W = {
+  render: (e) => /* @__PURE__ */ o(n, { ...e }),
   args: {
     label: "Late Evening Time",
     helperText: "Select a late evening time",
     value: t().hours(22).minutes(30).toDate()
     // 10:30 PM
   }
-}, W = {
-  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+}, H = {
+  render: (e) => /* @__PURE__ */ o(n, { ...e }),
   args: {
     label: "Early Morning Time",
     helperText: "Select a early morning time",
@@ -276,7 +290,7 @@ const i = (e) => {
     step: 15
   }
 }, z = {
-  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+  render: (e) => /* @__PURE__ */ o(n, { ...e }),
   args: {
     label: "Midnight Time in Vancouver",
     helperText: "Select midnight",
@@ -288,7 +302,7 @@ const i = (e) => {
     timezone: "America/Vancouver"
   }
 }, V = {
-  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+  render: (e) => /* @__PURE__ */ o(n, { ...e }),
   args: {
     label: "Midnight Time + 1 hour",
     helperText: "Select midnight + 1 hour",
@@ -298,8 +312,8 @@ const i = (e) => {
     max: t().hours(1).minutes(0).add(6, "hours").toDate(),
     step: 15
   }
-}, E = {
-  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+}, F = {
+  render: (e) => /* @__PURE__ */ o(n, { ...e }),
   args: {
     label: "Midnight Time - 1 hour",
     helperText: "Select midnight - 1 hour",
@@ -309,8 +323,8 @@ const i = (e) => {
     max: t().hours(23).minutes(0).add(6, "hours").toDate(),
     step: 15
   }
-}, F = {
-  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+}, L = {
+  render: (e) => /* @__PURE__ */ o(n, { ...e }),
   args: {
     label: "Midnight Time - 1 hour",
     helperText: "Select midnight - 1 hour",
@@ -320,16 +334,16 @@ const i = (e) => {
     max: t().hours(23).minutes(0).add(18, "hours").toDate(),
     step: 15
   }
-}, O = {
-  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+}, Y = {
+  render: (e) => /* @__PURE__ */ o(n, { ...e }),
   args: {
     label: "Noon Time",
     helperText: "Select noon",
     value: t().hours(12).minutes(0).toDate()
     // 12:00 PM
   }
-}, H = {
-  render: (e) => /* @__PURE__ */ r(i, { ...e }),
+}, E = {
+  render: (e) => /* @__PURE__ */ o(n, { ...e }),
   args: {
     label: "Fifteen Minutes Step",
     helperText: "Select a time in 15 minute increments",
@@ -338,31 +352,127 @@ const i = (e) => {
     max: t().add(3, "hours").toDate(),
     step: 15
   }
+}, j = {
+  render: (e) => /* @__PURE__ */ o(n, { ...e }),
+  args: {
+    label: "Height Test",
+    helperText: "Input should be taller than default",
+    inputHeight: "5rem"
+  },
+  play: async ({ canvasElement: e }) => {
+    const a = i(e).getByRole("button", { name: /height test/i });
+    await s(a).toHaveStyle({ height: "5rem" });
+  }
+}, q = {
+  render: (e) => /* @__PURE__ */ o(n, { ...e, icon: void 0 }),
+  args: {
+    label: "No Icon",
+    helperText: "No icon should render on the right side"
+  },
+  play: async ({ canvasElement: e }) => {
+    const r = i(e);
+    await c.click(r.getByRole("button", { name: /no icon/i }));
+    const a = i(e.ownerDocument.body).queryByTestId("icon-No Icon-clock");
+    await s(a).toBeNull();
+  },
+  parameters: {
+    controls: {
+      exclude: ["icon"]
+    }
+  }
+}, U = {
+  render: (e) => /* @__PURE__ */ o(n, { ...e }),
+  args: {
+    label: "Custom Icon",
+    helperText: "Uses chevron down instead of clock",
+    icon: "ChevronDown"
+  },
+  play: async ({ canvasElement: e }) => {
+    const a = i(e).getByRole("button", { name: /custom icon/i });
+    await c.click(a);
+    const u = i(e.ownerDocument.body).queryByTestId("icon-Custom Icon-clock");
+    await s(u).not.toBeNull();
+  }
+}, _ = {
+  render: (e) => /* @__PURE__ */ o(n, { ...e }),
+  args: {
+    label: "Bottom Placement",
+    dropdownPlacement: "bottom"
+  },
+  play: async ({ canvasElement: e }) => {
+    const r = i(e);
+    await c.click(r.getByRole("button", { name: /bottom placement/i }));
+    const a = i(e.ownerDocument.body).getByTestId("time-picker-dropdown");
+    await s(a.className).toContain("top-full");
+  }
+}, G = {
+  render: (e) => /* @__PURE__ */ o(n, { ...e }),
+  args: {
+    label: "Top Placement",
+    dropdownPlacement: "top"
+  },
+  play: async ({ canvasElement: e }) => {
+    const r = i(e);
+    await c.click(r.getByRole("button", { name: /top placement/i }));
+    const a = i(e.ownerDocument.body).getByTestId("time-picker-dropdown");
+    await s(a.className).toContain("bottom-full");
+  }
+}, J = {
+  render: (e) => /* @__PURE__ */ o(n, { ...e }),
+  args: {
+    label: "Left Placement",
+    dropdownPlacement: "left"
+  },
+  play: async ({ canvasElement: e }) => {
+    const r = i(e);
+    await c.click(r.getByRole("button", { name: /left placement/i }));
+    const a = i(e.ownerDocument.body).getByTestId("time-picker-dropdown");
+    await s(a.className).toContain("right-full");
+  }
+}, K = {
+  render: (e) => /* @__PURE__ */ o(n, { ...e }),
+  args: {
+    label: "Right Placement",
+    dropdownPlacement: "right"
+  },
+  play: async ({ canvasElement: e }) => {
+    const r = i(e);
+    await c.click(r.getByRole("button", { name: /right placement/i }));
+    const a = i(e.ownerDocument.body).getByTestId("time-picker-dropdown");
+    await s(a.className).toContain("left-full");
+  }
 };
 export {
-  k as AutoFocus,
-  T as Basic,
-  f as CustomStep,
-  C as CustomStyling,
-  p as Default,
-  x as Disabled,
-  N as EarlyMorning,
-  W as EarlyMorningWithDateToCompareAndMin,
-  D as Error,
-  H as FifteenMinutesStep,
-  P as LateEvening,
+  I as AutoFocus,
+  D as Basic,
+  j as CustomInputHeight,
+  C as CustomStep,
+  O as CustomStyling,
+  w as Default,
+  k as Disabled,
+  _ as DropdownOpensBottom,
+  J as DropdownOpensLeft,
+  K as DropdownOpensRight,
+  G as DropdownOpensTop,
+  R as EarlyMorning,
+  H as EarlyMorningWithDateToCompareAndMin,
+  x as Error,
+  E as FifteenMinutesStep,
+  W as LateEvening,
   z as Midnight,
-  E as MidnightMinus1Hour,
-  F as MidnightMinus1HourAnd18HoursMaxUpperBound,
+  F as MidnightMinus1Hour,
+  L as MidnightMinus1HourAnd18HoursMaxUpperBound,
   V as MidnightPlus1Hour,
-  O as Noon,
-  v as Warning,
-  M as WithDateComparison,
-  w as WithDateSeparators,
-  b as WithHelperText,
-  g as WithLabel,
-  y as WithTimeConstraints,
-  S as WithTimezone,
-  A as WithoutTimeDifference,
-  h as default
+  Y as Noon,
+  S as Warning,
+  U as WithCustomIcon,
+  A as WithDateComparison,
+  N as WithDateSeparators,
+  v as WithHelperText,
+  f as WithLabel,
+  M as WithTimeConstraints,
+  B as WithTimezone,
+  q as WithoutIcon,
+  P as WithoutTimeDifference,
+  y as default
 };

package/dist/components/atoms/icons/icons.stories.js

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import { f as o } from "../../../index-DfdAzObv.js";
+import { f as o } from "../../../index-CktvVE7I.js";
 import { Icons as l } from "./icons.js";
 import "./iconsSVGs/Large/Profile.js";
 import "./iconsSVGs/Small/Profile.js";

package/dist/components/atoms/message/message.stories.js

@@ -1,4 +1,4 @@
-import { f as o } from "../../../index-DfdAzObv.js";
+import { f as o } from "../../../index-CktvVE7I.js";
 import { Message as r } from "./message.js";
 const e = {
   title: "@spotwork-ui/message",

package/dist/components/atoms/tab/Tab.stories.js

@@ -1,4 +1,4 @@
-import { f as o } from "../../../index-DfdAzObv.js";
+import { f as o } from "../../../index-CktvVE7I.js";
 import { Tab as r } from "./tab.js";
 const e = {
   title: "@spotwork-ui/Tab",

package/dist/components/molecules/button/Button.stories.js

@@ -1,4 +1,4 @@
-import { f as o } from "../../../index-DfdAzObv.js";
+import { f as o } from "../../../index-CktvVE7I.js";
 import { Button as t } from "./button.js";
 const e = {
   title: "@spotwork-ui/Button",

package/dist/components/molecules/collapsible-card/Collapsiblecard.stories.js

@@ -1,4 +1,4 @@
-import { f as o } from "../../../index-DfdAzObv.js";
+import { f as o } from "../../../index-CktvVE7I.js";
 import { CollapsibleCard as r } from "./collapsible-card.js";
 const e = {
   title: "@spotwork-ui/Collapsiblecard",

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

@@ -1,4 +1,4 @@
-import { f as o } from "../../../../index-DfdAzObv.js";
+import { f as o } from "../../../../index-CktvVE7I.js";
 import { MessageEditor as r } from "./message-editor.js";
 const e = {
   title: "@spotwork-ui/MessageEditor",

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

@@ -1,4 +1,4 @@
-import { f as o } from "../../../../index-DfdAzObv.js";
+import { f as o } from "../../../../index-CktvVE7I.js";
 import { MessageGroupComposer as r } from "./message-group-composer.js";
 const t = {
   title: "@spotwork-ui/MessageGroupComposer",

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

@@ -1,4 +1,4 @@
-import { f as o } from "../../../../index-DfdAzObv.js";
+import { f as o } from "../../../../index-CktvVE7I.js";
 import { Cell as r } from "./cell.js";
 const e = {
   title: "@spotwork-ui/Cell",

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

@@ -1,4 +1,4 @@
-import { f as o } from "../../../../index-DfdAzObv.js";
+import { f as o } from "../../../../index-CktvVE7I.js";
 import { Row as r } from "./row.js";
 const e = {
   title: "@spotwork-ui/Row",

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

@@ -1,4 +1,4 @@
-import { f as o } from "../../../../index-DfdAzObv.js";
+import { f as o } from "../../../../index-CktvVE7I.js";
 import { RowHeader as r } from "./row-header.js";
 const e = {
   title: "@spotwork-ui/RowHeader",

package/dist/components/molecules/dataviz/donut-chart/DonutChart.stories.js

@@ -1,4 +1,4 @@
-import { f as o } from "../../../../index-DfdAzObv.js";
+import { f as o } from "../../../../index-CktvVE7I.js";
 import { DonutChart as t } from "./donut-chart.js";
 const e = {
   title: "@spotwork-ui/DonutChart",

package/dist/components/molecules/dataviz/dot-matrix/DotMatrix.stories.js

@@ -1,4 +1,4 @@
-import { f as o } from "../../../../index-DfdAzObv.js";
+import { f as o } from "../../../../index-CktvVE7I.js";
 import { DotMatrix as t } from "./dot-matrix.js";
 const e = {
   title: "@spotwork-ui/DotMatrix",

package/dist/components/molecules/dataviz/single-stacked-bar/SingleStackedBar.stories.js

@@ -1,4 +1,4 @@
-import { f as o } from "../../../../index-DfdAzObv.js";
+import { f as o } from "../../../../index-CktvVE7I.js";
 import { SingleStackedBar as r } from "./single-stacked-bar.js";
 const e = {
   title: "@spotwork-ui/SingleStackedBar",

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

@@ -17,9 +17,12 @@ export type DialogProps = {
     hasActionButtons?: boolean;
     hasBottomBorder?: boolean;
     actionButtons?: ButtonProps[];
+    maxHeight?: string;
+    contentMaxHeight?: string;
+    heightSpacingRem?: number;
 };
 /**
  * Dialog component that renders a modal overlay with customizable content
  * Uses Radix UI for accessibility and proper modal behavior
  */
-export declare function Dialog({ children, width, open, title, subTitle, cancelButtonText, setClose, actionButtons, hasPadding, hasActionButtons, hasBottomBorder, }: DialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function Dialog({ children, width, open, title, subTitle, cancelButtonText, setClose, actionButtons, hasPadding, hasActionButtons, hasBottomBorder, maxHeight, contentMaxHeight, heightSpacingRem, }: DialogProps): import("react/jsx-runtime").JSX.Element;