jcicl 1.2.7 → 1.2.8

package/LabeledTextArea/LabeledTextArea.js

@@ -1,11 +1,11 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
 import { n as a } from "../.chunks/emotion-styled.browser.esm.js";
 import { c as n } from "../.chunks/emotion-react.browser.esm.js";
-import t from "../theme.js";
+import s from "../theme.js";
 import { useThemeColors as d } from "../ThemeContext.js";
 import { T as l } from "../.chunks/TextField.js";
 const m = a("div", { shouldForwardProp: (e) => !["customTheme"].includes(e) })(({ customTheme: e }) => {
-  var o;
+  var r;
   return {
     ...n`
     display: flex;
@@ -23,11 +23,11 @@ const m = a("div", { shouldForwardProp: (e) => !["customTheme"].includes(e) })((
       textarea {
         &:hover,
         :focus {
-          box-shadow: ${(o = t.boxShadows.green) == null ? void 0 : o.split("#")[0]} ${e.themeColor} inset;
+          box-shadow: ${(r = s.boxShadows.green) == null ? void 0 : r.split("#")[0]} ${e.themeColor} inset;
         }
         width: 100%;
         padding: 13px;
-        border: 1px solid ${t.colors.gray};
+        border: 1px solid ${s.colors.gray};
         border-radius: 9px;
         resize: vertical;
         min-height: 130px;
@@ -48,11 +48,14 @@ const m = a("div", { shouldForwardProp: (e) => !["customTheme"].includes(e) })((
     }
   `
   };
-}), b = ({ label: e, ...o }) => {
-  const s = d();
-  return /* @__PURE__ */ i(m, { className: "jcLabeledTextArea", customTheme: s, children: [
-    e && /* @__PURE__ */ r("span", { children: e }),
-    /* @__PURE__ */ r(l, { ...o, multiline: !0, fullWidth: !0, rows: 1 })
+}), b = ({ label: e, ...r }) => {
+  const i = d();
+  return /* @__PURE__ */ o(m, { className: "jcLabeledTextArea", customTheme: i, children: [
+    e && /* @__PURE__ */ o("span", { children: [
+      e,
+      r.required && /* @__PURE__ */ t("span", { className: "mx-0.5 text-jc-gray", children: "*" })
+    ] }),
+    /* @__PURE__ */ t(l, { ...r, multiline: !0, fullWidth: !0, rows: 1 })
   ] });
 };
 export {

package/TimeSlotPicker/TimeSlotPicker.d.ts

@@ -0,0 +1,42 @@
+export interface TimeSlotOption {
+    /** Form value for the slot (e.g. `'14:30'`). */
+    value: string;
+    /** Display label for the pill (e.g. `'2:30 PM'`). */
+    label: string;
+    /**
+     * Marks the currently scheduled time (e.g. when rescheduling). Rendered as a thicker
+     * theme-accent border — no extra text, so every pill keeps the same size.
+     */
+    current?: boolean;
+}
+export interface TimeSlotPickerProps {
+    /** Slots to render as selectable pills, in display order. */
+    options: TimeSlotOption[];
+    /** Value of the currently selected slot. */
+    value?: string;
+    onChange: (value: string) => void;
+    /** Bold heading above the grid (e.g. `'Available Times'`). */
+    title?: string;
+    loading?: boolean;
+    /** Shown centered in the grid when `options` is empty and not loading. */
+    emptyText?: string;
+    /** Error display: red border + red helper text. */
+    error?: boolean;
+    helperText?: string;
+    /**
+     * Fixed height of the scrolling pill area. The default matches LabeledTextArea's
+     * rendered box (130px content min-height + 13px padding ×2 + 1px border ×2) so the
+     * picker can sit beside a message box with identical border heights.
+     */
+    height?: string;
+    className?: string;
+}
+/**
+ * Calendly-style time-slot selector: a scrolling pill grid of appointment times
+ * (library ScrollContainer scrollbar). Purely presentational — the consumer fetches
+ * availability (e.g. from JC.Scheduling) and maps it to `options`. Single-select,
+ * keyboard accessible per the ARIA radio-group pattern (one tab stop, arrow keys move
+ * and select), themed via the app's custom theme accent.
+ */
+export declare const TimeSlotPicker: React.FC<TimeSlotPickerProps>;
+export default TimeSlotPicker;

package/TimeSlotPicker/TimeSlotPicker.js

@@ -0,0 +1,78 @@
+import { jsxs as w, jsx as r } from "react/jsx-runtime";
+import { useRef as j } from "react";
+import { cn as s } from "../cn.js";
+import N from "../ScrollContainer/ScrollContainer.js";
+import { useThemeColors as k } from "../ThemeContext.js";
+const S = ({
+  options: t,
+  value: n,
+  onChange: i,
+  title: o,
+  loading: f = !1,
+  emptyText: h = "No available times.",
+  error: d = !1,
+  helperText: m,
+  height: v = "158px",
+  className: x
+}) => {
+  const p = { "--slot-accent": k().themeColor }, u = j([]), b = t.findIndex((e) => e.value === n), g = b >= 0 ? b : 0, y = (e, l) => {
+    var c;
+    let a;
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") a = (l + 1) % t.length;
+    else if (e.key === "ArrowLeft" || e.key === "ArrowUp")
+      a = (l - 1 + t.length) % t.length;
+    else return;
+    e.preventDefault(), i(t[a].value), (c = u.current[a]) == null || c.focus();
+  };
+  return (
+    // gap/radius/border mirror LabeledTextArea (3px label gap, 9px radius, gray border)
+    // so the picker pairs seamlessly beside a message box.
+    /* @__PURE__ */ w("div", { className: s("flex flex-col gap-[3px] font-['Roboto',sans-serif]", x), style: p, children: [
+      o && /* @__PURE__ */ r("span", { className: "font-bold", children: o }),
+      /* @__PURE__ */ r("div", { className: s("rounded-[9px] border bg-white", d ? "border-jc-error" : "border-jc-gray"), children: /* @__PURE__ */ r(N, { height: v, direction: "vertical", autoHide: "leave", children: /* @__PURE__ */ r(
+        "div",
+        {
+          role: "radiogroup",
+          "aria-label": o ?? "Available times",
+          className: "grid grid-cols-2 content-start gap-2 p-2 md:grid-cols-3",
+          children: f ? /* @__PURE__ */ r("span", { className: "text-jc-gray-3 col-span-full animate-pulse p-2 text-sm", children: "Loading available times…" }) : t.length === 0 ? /* @__PURE__ */ r("span", { className: "text-jc-gray-3 col-span-full p-2 text-sm", children: h }) : t.map((e, l) => {
+            const a = e.value === n;
+            return /* @__PURE__ */ r(
+              "button",
+              {
+                ref: (c) => {
+                  u.current[l] = c;
+                },
+                type: "button",
+                role: "radio",
+                "aria-checked": a,
+                tabIndex: l === g ? 0 : -1,
+                onKeyDown: (c) => y(c, l),
+                onClick: () => i(e.value),
+                title: e.current ? "Current appointment time" : void 0,
+                "aria-label": e.current ? `${e.label} (current appointment time)` : e.label,
+                className: s(
+                  "cursor-pointer rounded-md border px-2 py-1.5 text-center text-sm font-medium transition-all duration-150",
+                  "focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--slot-accent)]",
+                  a ? "border-transparent bg-[var(--slot-accent)] text-white shadow-sm" : s(
+                    "text-jc-charcoal bg-white hover:border-[var(--slot-accent)] hover:text-[var(--slot-accent)] hover:shadow-sm",
+                    // The current slot reads as a 2px accent border: 1px real border +
+                    // 1px inset shadow, so its box size matches every other pill.
+                    e.current ? "border-[var(--slot-accent)] shadow-[inset_0_0_0_1px_var(--slot-accent)]" : "border-jc-gray-4"
+                  )
+                ),
+                children: e.label
+              },
+              e.value
+            );
+          })
+        }
+      ) }) }),
+      m && /* @__PURE__ */ r("span", { className: s("text-right text-xs", d ? "text-jc-error" : "text-jc-gray-3"), children: m })
+    ] })
+  );
+};
+export {
+  S as TimeSlotPicker,
+  S as default
+};

package/TimeSlotPicker/index.d.ts

@@ -0,0 +1 @@
+export { default, TimeSlotPicker, type TimeSlotPickerProps, type TimeSlotOption } from './TimeSlotPicker';

package/TimeSlotPicker/index.js

@@ -0,0 +1,5 @@
+import { TimeSlotPicker as o, TimeSlotPicker as r } from "./TimeSlotPicker.js";
+export {
+  o as TimeSlotPicker,
+  r as default
+};