@seekbuddy/dsh-ui 0.0.0-stage → 0.2.0-beta.0

package/dist/chunks/chunk-F352IICS.js

@@ -0,0 +1,57 @@
+// src/seekbuddy/Mark.tsx
+import clsx from "clsx";
+import { Tooltip } from "@seekbuddy/dsh-ui";
+
+// .build/css/seekbuddy/Mark.module.mjs
+var id = "@seekbuddy/dsh-ui/seekbuddy/Mark.module.css";
+if (typeof document !== "undefined" && !document.querySelector('style[data-dsh-ui-primitives="' + id + '"]')) {
+  const element = document.createElement("style");
+  element.setAttribute("data-dsh-ui-primitives", id);
+  element.textContent = ".NiEJAq_mark{box-sizing:border-box;vertical-align:middle;border-radius:var(--dsw-radius-xs);cursor:help;flex:none;justify-content:center;align-items:center;line-height:0;display:inline-flex}.NiEJAq_plain{cursor:default}.NiEJAq_mark:focus-visible{outline-offset:2px;outline-style:solid}.NiEJAq_official{color:var(--dsw-alias-state-business-primary)}";
+  document.head.appendChild(element);
+}
+var Mark_module_default = { "plain": "NiEJAq_plain", "mark": "NiEJAq_mark", "official": "NiEJAq_official" };
+
+// src/seekbuddy/Mark.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function Mark({ kind, label, size = 16, tooltip = true, className }) {
+  const mark = /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: clsx(Mark_module_default.mark, Mark_module_default[kind], !tooltip && Mark_module_default.plain, className),
+      role: "img",
+      "aria-label": label,
+      tabIndex: 0,
+      "data-kind": kind,
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          width: size,
+          height: size,
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          "aria-hidden": "true",
+          focusable: "false",
+          children: GLYPHS[kind]
+        }
+      )
+    }
+  );
+  if (!tooltip) return mark;
+  return /* @__PURE__ */ jsx(Tooltip, { label, side: "top", children: mark });
+}
+var GLYPHS = {
+  // Twelve-point seal (outer r 9.5 / inner r 8.1, generated, centred on 12,12) with a check: "issued by the platform".
+  official: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 2.5 14.1 4.18 16.75 3.77 17.73 6.27 20.23 7.25 19.82 9.9 21.5 12 19.82 14.1 20.23 16.75 17.73 17.73 16.75 20.23 14.1 19.82 12 21.5 9.9 19.82 7.25 20.23 6.27 17.73 3.77 16.75 4.18 14.1 2.5 12 4.18 9.9 3.77 7.25 6.27 6.27 7.25 3.77 9.9 4.18Z" }),
+    /* @__PURE__ */ jsx("path", { d: "m8.5 12 2.5 2.5 4.5-5" })
+  ] })
+};
+
+export {
+  Mark
+};

package/dist/chunks/chunk-IOBKTEKP.js

@@ -0,0 +1,144 @@
+import {
+  clampTime,
+  minutesToTime,
+  parseIsoTime,
+  timeToMinutes
+} from "./chunk-RZOP2PFC.js";
+
+// src/seekbuddy/date/TimePicker.tsx
+import clsx from "clsx";
+import { useEffect, useId, useRef } from "react";
+
+// .build/css/seekbuddy/date/TimePicker.module.mjs
+var id = "@seekbuddy/dsh-ui/seekbuddy/date/TimePicker.module.css";
+if (typeof document !== "undefined" && !document.querySelector('style[data-dsh-ui-primitives="' + id + '"]')) {
+  const element = document.createElement("style");
+  element.setAttribute("data-dsh-ui-primitives", id);
+  element.textContent = ".A5-U5q_picker{--time-row:32px;--time-rows:7;color:var(--dsw-alias-label-primary);grid-template-columns:repeat(2,minmax(64px,auto));display:inline-grid}.A5-U5q_column{gap:4px;min-width:0;display:grid}.A5-U5q_column+.A5-U5q_column{border-left:.5px solid var(--dsw-alias-border-l1)}.A5-U5q_heading{color:var(--dsw-alias-label-tertiary);font:var(--dsw-font-xxs-12);text-align:center;padding:0 8px}.A5-U5q_list{max-height:calc(var(--time-row) * var(--time-rows));margin:0;padding:0 8px;list-style:none;overflow-y:auto}.A5-U5q_list:focus-visible{border-radius:var(--dsw-radius-sm);outline-offset:-2px;outline-style:solid}.A5-U5q_option{height:var(--time-row);border-radius:var(--dsw-radius-sm);cursor:pointer;font:var(--dsw-font-xs-13);font-variant-numeric:tabular-nums;user-select:none;justify-content:center;align-items:center;display:flex}.A5-U5q_option:hover:not(.A5-U5q_disabled):not(.A5-U5q_selected){background:var(--dsw-alias-interactive-bg-hover)}.A5-U5q_selected{color:var(--dsw-alias-label-primary-foreground);background:var(--dsw-alias-button-primary-fill)}.A5-U5q_selected:hover{background:var(--dsw-alias-button-primary-hover)}.A5-U5q_placeholder{background:var(--dsw-alias-bg-multi-select)}.A5-U5q_list:focus-visible [data-active]{box-shadow:inset 0 0 0 1px var(--dsw-alias-state-business-primary)}.A5-U5q_disabled{color:var(--dsw-alias-label-dimmed);cursor:not-allowed;text-decoration:line-through}";
+  document.head.appendChild(element);
+}
+var TimePicker_module_default = { "selected": "A5-U5q_selected", "placeholder": "A5-U5q_placeholder", "heading": "A5-U5q_heading", "list": "A5-U5q_list", "option": "A5-U5q_option", "column": "A5-U5q_column", "picker": "A5-U5q_picker", "disabled": "A5-U5q_disabled" };
+
+// src/seekbuddy/date/TimePicker.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var pad2 = (value) => String(value).padStart(2, "0");
+function TimePicker({
+  value,
+  onChange,
+  minuteStep = 1,
+  min,
+  max,
+  labels,
+  autoFocus = false,
+  className
+}) {
+  const idBase = useId();
+  const optionRefs = useRef(/* @__PURE__ */ new Map());
+  const hoursRef = useRef(null);
+  const pendingAutoFocus = useRef(autoFocus);
+  const parsed = value === null ? { h: 0, min: 0 } : parseIsoTime(value);
+  const lower = min === void 0 ? 0 : timeToMinutes(min);
+  const upper = max === void 0 ? 1439 : timeToMinutes(max);
+  const inWindow = (minutes2) => minutes2 >= lower && minutes2 <= upper;
+  const hours = Array.from({ length: 24 }, (_, hour) => hour);
+  const minutes = Array.from({ length: Math.ceil(60 / minuteStep) }, (_, index) => index * minuteStep);
+  const emit = (h, m) => {
+    const next = clampTime(minutesToTime(h * 60 + m), min, max);
+    if (next !== value) onChange(next);
+  };
+  const columns = [
+    {
+      kind: "hours",
+      label: labels.hours,
+      options: hours,
+      cursor: parsed.h,
+      isDisabled: (hour) => !minutes.some((minute) => inWindow(hour * 60 + minute)),
+      pick: (hour) => emit(hour, parsed.min)
+    },
+    {
+      kind: "minutes",
+      label: labels.minutes,
+      options: minutes,
+      cursor: parsed.min,
+      isDisabled: (minute) => !inWindow(parsed.h * 60 + minute),
+      pick: (minute) => emit(parsed.h, minute)
+    }
+  ];
+  const optionId = (kind, option) => `${idBase}-${kind}-${option}`;
+  useEffect(() => {
+    for (const column of columns) {
+      const node = optionRefs.current.get(optionId(column.kind, column.cursor));
+      if (node !== void 0 && typeof node.scrollIntoView === "function") node.scrollIntoView({ block: "center" });
+    }
+    if (pendingAutoFocus.current) {
+      pendingAutoFocus.current = false;
+      hoursRef.current?.focus();
+    }
+  });
+  const onKeyDown = (column) => (event) => {
+    const enabled = column.options.filter((option) => !column.isDisabled(option));
+    if (enabled.length === 0) return;
+    let target;
+    if (event.key === "Home") target = enabled[0];
+    else if (event.key === "End") target = enabled[enabled.length - 1];
+    else if (event.key === "ArrowDown") target = enabled.find((option) => option > column.cursor);
+    else if (event.key === "ArrowUp") {
+      for (const option of enabled) if (option < column.cursor) target = option;
+    } else return;
+    event.preventDefault();
+    if (target !== void 0 && (target !== column.cursor || value === null)) column.pick(target);
+  };
+  return /* @__PURE__ */ jsx("div", { className: clsx(TimePicker_module_default.picker, className), children: columns.map((column) => {
+    const headingId = `${idBase}-${column.kind}-heading`;
+    return /* @__PURE__ */ jsxs("div", { className: TimePicker_module_default.column, children: [
+      /* @__PURE__ */ jsx("div", { id: headingId, className: TimePicker_module_default.heading, children: column.label }),
+      /* @__PURE__ */ jsx(
+        "ul",
+        {
+          ref: column.kind === "hours" ? hoursRef : void 0,
+          role: "listbox",
+          "aria-labelledby": headingId,
+          "aria-activedescendant": optionId(column.kind, column.cursor),
+          tabIndex: 0,
+          className: TimePicker_module_default.list,
+          onKeyDown: onKeyDown(column),
+          children: column.options.map((option) => {
+            const id2 = optionId(column.kind, option);
+            const disabled = column.isDisabled(option);
+            const active = column.cursor === option;
+            const selected = active && value !== null;
+            return /* @__PURE__ */ jsx(
+              "li",
+              {
+                id: id2,
+                ref: (node) => {
+                  if (node === null) optionRefs.current.delete(id2);
+                  else optionRefs.current.set(id2, node);
+                },
+                role: "option",
+                "aria-selected": selected,
+                "aria-disabled": disabled || void 0,
+                "data-active": active || void 0,
+                className: clsx(
+                  TimePicker_module_default.option,
+                  selected && TimePicker_module_default.selected,
+                  active && !selected && TimePicker_module_default.placeholder,
+                  disabled && TimePicker_module_default.disabled
+                ),
+                onClick: () => {
+                  if (!disabled) column.pick(option);
+                },
+                children: pad2(option)
+              },
+              option
+            );
+          })
+        }
+      )
+    ] }, column.kind);
+  }) });
+}
+
+export {
+  TimePicker
+};

package/dist/chunks/chunk-KETGFAOH.js

@@ -0,0 +1,66 @@
+import {
+  Spinner
+} from "./chunk-WUL523OW.js";
+
+// src/seekbuddy/Empty.tsx
+import clsx from "clsx";
+import { Button } from "@seekbuddy/dsh-ui";
+import { IconRefreshOutlineRegular, IconSearchOutlineRegular, IconWarningOutlineRegular } from "@seekbuddy/dsh-ui/icons";
+
+// .build/css/seekbuddy/Empty.module.mjs
+var id = "@seekbuddy/dsh-ui/seekbuddy/Empty.module.css";
+if (typeof document !== "undefined" && !document.querySelector('style[data-dsh-ui-primitives="' + id + '"]')) {
+  const element = document.createElement("style");
+  element.setAttribute("data-dsh-ui-primitives", id);
+  element.textContent = ".tPyKuq_empty{box-sizing:border-box;border-radius:var(--dsw-radius-lg);color:var(--dsw-alias-label-tertiary);text-align:center;font:var(--dsw-font-xs-13);border:0;flex-direction:column;justify-content:center;align-items:center;gap:6px;margin:0;padding:28px 24px;display:flex}.tPyKuq_bordered{border:1px dashed var(--dsw-alias-border-l2)}.tPyKuq_icon{color:var(--dsw-alias-label-tertiary);justify-content:center;align-items:center;margin-bottom:2px;display:inline-flex}.tPyKuq_icon .tPyKuq_spinner{border-width:2px;width:20px;height:20px}.tPyKuq_title{color:var(--dsw-alias-label-primary);font:var(--dsw-font-s-strong-14);margin:0}.tPyKuq_description{max-width:36em;color:var(--dsw-alias-label-tertiary);font:var(--dsw-font-xs-13);margin:0}.tPyKuq_error .tPyKuq_icon,.tPyKuq_error .tPyKuq_title{color:var(--dsw-alias-state-error-primary)}.tPyKuq_action{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:6px;display:flex}";
+  document.head.appendChild(element);
+}
+var Empty_module_default = { "title": "tPyKuq_title", "error": "tPyKuq_error", "bordered": "tPyKuq_bordered", "description": "tPyKuq_description", "action": "tPyKuq_action", "empty": "tPyKuq_empty", "spinner": "tPyKuq_spinner", "icon": "tPyKuq_icon" };
+
+// src/seekbuddy/Empty.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Empty({
+  status,
+  title,
+  description,
+  icon,
+  action,
+  retryLabel,
+  onRetry,
+  minHeight = 240,
+  bordered = true,
+  className,
+  style,
+  ...rest
+}) {
+  const live = status === "loading" ? { role: "status", "aria-live": "polite" } : status === "error" ? { role: "alert" } : {};
+  const visual = icon === void 0 ? defaultIcon(status) : icon;
+  const retry = status === "error" && onRetry !== void 0 && retryLabel !== void 0 ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", icon: /* @__PURE__ */ jsx(IconRefreshOutlineRegular, {}), onClick: onRetry, children: retryLabel }) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...live,
+      ...rest,
+      className: clsx(Empty_module_default.empty, Empty_module_default[status], bordered && Empty_module_default.bordered, className),
+      style: { minHeight, ...style },
+      children: [
+        visual === null ? null : /* @__PURE__ */ jsx("span", { className: Empty_module_default.icon, "aria-hidden": "true", children: visual }),
+        /* @__PURE__ */ jsx("p", { className: Empty_module_default.title, children: title }),
+        description === void 0 || description === null ? null : /* @__PURE__ */ jsx("div", { className: Empty_module_default.description, children: description }),
+        action === void 0 && retry === null ? null : /* @__PURE__ */ jsxs("div", { className: Empty_module_default.action, children: [
+          action,
+          retry
+        ] })
+      ]
+    }
+  );
+}
+function defaultIcon(status) {
+  if (status === "loading") return /* @__PURE__ */ jsx(Spinner, { size: "md", tone: "page", className: Empty_module_default.spinner });
+  if (status === "error") return /* @__PURE__ */ jsx(IconWarningOutlineRegular, { size: 20 });
+  return /* @__PURE__ */ jsx(IconSearchOutlineRegular, { size: 20 });
+}
+
+export {
+  Empty
+};