@zyncat/ui 0.10.0 → 0.12.0

package/dist/support-rail.css

@@ -0,0 +1,421 @@
+@layer zyncat.tokens, zyncat.components;
+
+@layer zyncat.components {
+  .support-rail {
+    --support-rail-width: 318px;
+    --support-rail-needle-width: 42px;
+    --support-rail-needle-height: 150px;
+    --support-rail-needle-duck: 0.55;
+    --support-rail-needle-tracking: 0.22em;
+    --support-rail-caps-tracking: 0.13em;
+    --support-rail-grabber-width: 13px;
+    --support-rail-grabber-pill: 34px;
+    --support-rail-live-size: 6px;
+    --support-rail-live-reach: 2.6;
+    --support-rail-rule-width: 1.5px;
+    --support-rail-rule-height: 20px;
+
+    --support-rail-row-pad-block: var(--space-4);
+    --support-rail-row-pad-inline: var(--space-4);
+    --support-rail-row-nudge: 5px;
+
+    --support-rail-surface: var(--bg-subtle);
+    --support-rail-surface-raised: var(--bg-surface);
+    --support-rail-line: var(--border-default);
+    --support-rail-line-soft: var(--border-subtle);
+    --support-rail-accent: var(--accent);
+    --support-rail-live-color: var(--success);
+    --support-rail-radius: var(--radius-2xl);
+
+    --support-rail-open-duration: calc(var(--duration-slower) * 1.4);
+    --support-rail-close-duration: var(--duration-slower);
+    --support-rail-needle-delay: calc(var(--duration-slow) * 0.5);
+    --support-rail-stagger: calc(var(--duration-fast) * 0.3);
+
+    --support-rail-collapse-x: 1;
+    --support-rail-collapse-y: 1;
+    --support-rail-drag: 0px;
+    --support-rail-index: 0;
+
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: min(var(--support-rail-width), 100%);
+    isolation: isolate;
+    pointer-events: none;
+    font-family: var(--font-sans);
+    color: var(--text-strong);
+  }
+
+  .support-rail[data-side='right'] {
+    right: 0;
+  }
+  .support-rail[data-side='left'] {
+    left: 0;
+  }
+
+  .support-rail__needle {
+    position: absolute;
+    top: 50%;
+    width: var(--support-rail-needle-width);
+    height: var(--support-rail-needle-height);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-3);
+    margin: 0;
+    padding: 0;
+    background: var(--support-rail-surface);
+    border: var(--border-hairline) solid var(--support-rail-line);
+    box-shadow: var(--shadow-md);
+    cursor: pointer;
+    pointer-events: auto;
+    color: inherit;
+    font: inherit;
+    opacity: 1;
+    translate: 0 -50%;
+    scale: 1;
+    transition:
+      scale var(--support-rail-open-duration) var(--ease-spring) var(--support-rail-needle-delay),
+      opacity var(--duration-base) linear var(--support-rail-needle-delay),
+      background-color var(--duration-fast) var(--ease-standard);
+  }
+
+  .support-rail[data-side='right'] .support-rail__needle {
+    right: 0;
+    border-right: 0;
+    border-radius: var(--support-rail-radius) 0 0 var(--support-rail-radius);
+    transform-origin: 100% 50%;
+  }
+  .support-rail[data-side='left'] .support-rail__needle {
+    left: 0;
+    border-left: 0;
+    border-radius: 0 var(--support-rail-radius) var(--support-rail-radius) 0;
+    transform-origin: 0 50%;
+  }
+
+  .support-rail__needle:hover {
+    background: var(--support-rail-surface-raised);
+  }
+  .support-rail__needle:focus-visible {
+    outline: none;
+    box-shadow: var(--shadow-md), var(--focus-ring);
+  }
+
+  .support-rail[data-open='true'] .support-rail__needle {
+    opacity: 0;
+    scale: var(--support-rail-needle-duck);
+    pointer-events: none;
+    transition:
+      scale var(--duration-base) var(--ease-exit),
+      opacity var(--duration-fast) linear;
+  }
+
+  .support-rail__live {
+    position: relative;
+    display: block;
+    width: var(--support-rail-live-size);
+    height: var(--support-rail-live-size);
+    border-radius: var(--radius-full);
+    background: var(--support-rail-live-color);
+  }
+  .support-rail__live::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: var(--radius-full);
+    background: var(--support-rail-live-color);
+    animation: support-rail-pulse var(--duration-pulse) var(--ease-standard) infinite;
+  }
+
+  .support-rail__needle-label {
+    writing-mode: vertical-rl;
+    font-family: var(--font-mono);
+    font-size: var(--size-micro);
+    line-height: 1;
+    letter-spacing: var(--support-rail-needle-tracking);
+    text-transform: uppercase;
+    color: var(--text-secondary);
+  }
+  .support-rail[data-side='left'] .support-rail__needle-label {
+    writing-mode: vertical-lr;
+    rotate: 180deg;
+  }
+
+  .support-rail__needle-rule {
+    display: block;
+    width: var(--support-rail-rule-width);
+    height: var(--support-rail-rule-height);
+    border-radius: var(--radius-full);
+    background: var(--support-rail-accent);
+  }
+
+  .support-rail__panel {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    overflow: hidden;
+    background: var(--support-rail-surface);
+    box-shadow: var(--shadow-lg);
+    pointer-events: none;
+    opacity: 0;
+    translate: var(--support-rail-drag) 0;
+    scale: var(--support-rail-collapse-x) var(--support-rail-collapse-y);
+    will-change: scale, translate;
+    transition:
+      scale var(--support-rail-close-duration) var(--ease-exit),
+      translate var(--support-rail-close-duration) var(--ease-exit),
+      opacity var(--duration-base) linear calc(var(--support-rail-close-duration) * 0.5);
+  }
+
+  .support-rail[data-side='right'] .support-rail__panel {
+    right: 0;
+    border-left: var(--border-hairline) solid var(--support-rail-line);
+    transform-origin: 100% 50%;
+  }
+  .support-rail[data-side='left'] .support-rail__panel {
+    left: 0;
+    border-right: var(--border-hairline) solid var(--support-rail-line);
+    transform-origin: 0 50%;
+  }
+
+  .support-rail[data-open='true'] .support-rail__panel {
+    pointer-events: auto;
+    opacity: 1;
+    scale: 1 1;
+    transition:
+      scale var(--support-rail-open-duration) var(--ease-spring),
+      translate var(--support-rail-open-duration) var(--ease-spring),
+      opacity var(--duration-base) linear;
+  }
+
+  .support-rail[data-dragging] .support-rail__panel {
+    transition: none;
+  }
+
+  .support-rail__body {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    outline: none;
+  }
+  .support-rail[data-side='left'] .support-rail__body {
+    flex-direction: row-reverse;
+  }
+  .support-rail[data-dragging] .support-rail__body {
+    user-select: none;
+  }
+
+  .support-rail__grabber {
+    flex: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--support-rail-grabber-width);
+    border-right: var(--border-hairline) solid var(--support-rail-line-soft);
+    cursor: grab;
+    touch-action: none;
+  }
+  .support-rail[data-side='left'] .support-rail__grabber {
+    border-right: 0;
+    border-left: var(--border-hairline) solid var(--support-rail-line-soft);
+  }
+  .support-rail[data-dragging] .support-rail__grabber {
+    cursor: grabbing;
+  }
+  .support-rail__grabber-pill {
+    display: block;
+    width: var(--border-emphasis);
+    height: var(--support-rail-grabber-pill);
+    border-radius: var(--radius-full);
+    background: var(--text-subtle);
+  }
+
+  .support-rail__stack {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .support-rail__header {
+    flex: none;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--space-3);
+    padding: var(--space-5) var(--space-5) var(--space-4);
+  }
+  .support-rail__heading {
+    min-width: 0;
+  }
+  .support-rail__title {
+    font: var(--type-title-lg);
+    letter-spacing: var(--tracking-tight);
+  }
+  .support-rail__status {
+    margin-top: var(--space-2);
+    font-family: var(--font-mono);
+    font-size: var(--size-micro);
+    line-height: var(--leading-micro);
+    letter-spacing: var(--support-rail-caps-tracking);
+    text-transform: uppercase;
+    color: var(--text-subtle);
+  }
+
+  .support-rail__close {
+    flex: none;
+    display: grid;
+    place-items: center;
+    width: var(--control-height-sm);
+    height: var(--control-height-sm);
+    padding: 0;
+    background: transparent;
+    border: var(--border-hairline) solid var(--support-rail-line);
+    border-radius: var(--radius-full);
+    cursor: pointer;
+    color: var(--text-secondary);
+    transition: var(--transition-colors);
+  }
+  .support-rail__close:hover {
+    background: var(--text-strong);
+    border-color: var(--text-strong);
+    color: var(--text-inverse);
+  }
+  .support-rail__close:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring);
+  }
+
+  .support-rail__list {
+    flex: none;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    border-top: var(--border-hairline) solid var(--support-rail-line-soft);
+  }
+
+  .support-rail__row {
+    position: relative;
+    width: 100%;
+    display: grid;
+    grid-template-columns: var(--icon-md) 1fr auto;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--support-rail-row-pad-block) var(--support-rail-row-pad-inline);
+    background: transparent;
+    border: 0;
+    border-bottom: var(--border-hairline) solid var(--support-rail-line-soft);
+    text-align: left;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    transition:
+      background-color var(--duration-base) var(--ease-standard),
+      padding var(--duration-slow) var(--ease-standard);
+  }
+  .support-rail__row:hover {
+    background: var(--neutral-wash);
+    padding-left: calc(var(--support-rail-row-pad-inline) + var(--support-rail-row-nudge));
+  }
+  .support-rail[data-side='left'] .support-rail__row:hover {
+    padding-left: var(--support-rail-row-pad-inline);
+    padding-right: calc(var(--support-rail-row-pad-inline) + var(--support-rail-row-nudge));
+  }
+  .support-rail__row:active {
+    background: var(--neutral-wash-press);
+  }
+  .support-rail__row:focus-visible {
+    outline: none;
+    z-index: 1;
+    box-shadow: var(--focus-ring);
+  }
+
+  .support-rail__row-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--icon-sm);
+    color: var(--text-secondary);
+  }
+  .support-rail__row-text {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+  .support-rail__row-label {
+    font-size: var(--size-body);
+    line-height: var(--leading-body);
+    font-weight: var(--weight-medium);
+  }
+  .support-rail__row-note {
+    font: var(--type-micro);
+    font-weight: var(--weight-regular);
+    color: var(--text-secondary);
+  }
+  .support-rail__row-meta {
+    font-family: var(--font-mono);
+    font-size: var(--size-micro);
+    letter-spacing: var(--tracking-caps);
+    color: var(--text-subtle);
+  }
+
+  .support-rail__extra {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+  .support-rail__extra:not(:empty) {
+    padding: var(--space-4) var(--space-5) var(--space-5);
+  }
+
+  .support-rail__footer {
+    flex: none;
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-4) var(--space-5);
+    border-top: var(--border-hairline) solid var(--support-rail-line);
+    font: var(--type-caption);
+    color: var(--text-secondary);
+  }
+
+  .support-rail__row,
+  .support-rail__extra,
+  .support-rail__footer {
+    animation: support-rail-row-in var(--duration-slower) var(--ease-spring) backwards;
+    animation-delay: calc((var(--support-rail-index) + 1) * var(--support-rail-stagger));
+  }
+
+  @keyframes support-rail-row-in {
+    from {
+      translate: 0 var(--distance-sm);
+      opacity: 0;
+    }
+  }
+
+  @keyframes support-rail-pulse {
+    0% {
+      scale: 1;
+      opacity: 0.55;
+    }
+    70%,
+    100% {
+      scale: var(--support-rail-live-reach);
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .support-rail__live::after {
+      animation: none;
+      scale: 1.9;
+      opacity: 0.28;
+    }
+  }
+}

package/dist/support-rail.js

@@ -0,0 +1,243 @@
+'use client';import { useReturnFocus } from './chunk-A5WTZACK.js';
+import { useOverlayEntry, useOutsidePress } from './chunk-VAXCXZ53.js';
+import './chunk-JY6A2ZJZ.js';
+import { Presence } from './chunk-DDRSMHN4.js';
+import { Motion } from './chunk-5PZ43DCG.js';
+import { usePresence } from './chunk-M43IOM5C.js';
+import { startDrag } from './chunk-IJS7TPGV.js';
+import { useControllable } from './chunk-MMRIQNEN.js';
+import { UIMotion } from './chunk-7IZJERGA.js';
+import { cx } from './chunk-QGNC7LH5.js';
+import './support-rail.css';
+import { useRef, useId, useLayoutEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var RUBBER_BAND_DIVISOR = 6;
+var DISMISS_DISTANCE_PX = 88;
+var DISMISS_VELOCITY_PX_PER_S = 500;
+var FLICK_DISTANCE_PX = 24;
+var CONTENT_FADE_IN_DELAY_RATIO = 0.55;
+var NEUTRAL_RATIO = 1;
+var STAGGER_STEPS_MAX = 8;
+var DRAG_PROPERTY = "--support-rail-drag";
+var COLLAPSE_X_PROPERTY = "--support-rail-collapse-x";
+var COLLAPSE_Y_PROPERTY = "--support-rail-collapse-y";
+var INDEX_PROPERTY = "--support-rail-index";
+var DRAGGING_ATTRIBUTE = "data-dragging";
+var NO_DRAG = "0px";
+var CONTENT_FADE_IN = {
+  opacity: [0, 1],
+  timing: { duration: UIMotion.dur.slow, ease: "linear", delay: UIMotion.dur.base * CONTENT_FADE_IN_DELAY_RATIO }
+};
+var CONTENT_FADE_OUT = { opacity: [0], timing: { duration: UIMotion.dur.fast, ease: "linear" } };
+function collapseRatio(needleSpan, panelSpan) {
+  return panelSpan > 0 ? needleSpan / panelSpan : NEUTRAL_RATIO;
+}
+function railTravel(offsetX, dismissSign) {
+  const along = offsetX * dismissSign;
+  return along < 0 ? along / RUBBER_BAND_DIVISOR : along;
+}
+function railDismisses(travel, velocityAlong) {
+  if (travel >= DISMISS_DISTANCE_PX) return true;
+  return travel >= FLICK_DISTANCE_PX && velocityAlong >= DISMISS_VELOCITY_PX_PER_S;
+}
+function indexStyle(index) {
+  return { [INDEX_PROPERTY]: Math.min(index, STAGGER_STEPS_MAX) };
+}
+function SupportRailBody({
+  actions,
+  title,
+  status,
+  footer,
+  children,
+  panelId,
+  titleId,
+  panelRef,
+  needleRef,
+  onGrab,
+  requestClose,
+  onSelect
+}) {
+  const bodyRef = useRef(null);
+  const { isPresent } = usePresence();
+  const entry = useOverlayEntry({ nodeRef: panelRef, dismissible: isPresent, requestClose });
+  useOutsidePress({ entry, refs: [panelRef, needleRef], enabled: isPresent, onPress: requestClose });
+  useReturnFocus(panelRef);
+  useLayoutEffect(() => {
+    bodyRef.current?.focus({ preventScroll: true });
+  }, []);
+  const commit = (action) => {
+    action.onSelect?.();
+    onSelect?.(action.id, action);
+  };
+  return /* @__PURE__ */ jsxs(
+    Motion,
+    {
+      as: "div",
+      ref: bodyRef,
+      animate: CONTENT_FADE_IN,
+      exit: CONTENT_FADE_OUT,
+      className: "support-rail__body",
+      id: panelId,
+      role: "dialog",
+      "aria-modal": "false",
+      "aria-labelledby": titleId,
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "support-rail__grabber", "aria-hidden": "true", onPointerDown: onGrab, children: /* @__PURE__ */ jsx("span", { className: "support-rail__grabber-pill" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "support-rail__stack", children: [
+          /* @__PURE__ */ jsxs("div", { className: "support-rail__header", children: [
+            /* @__PURE__ */ jsxs("div", { className: "support-rail__heading", children: [
+              /* @__PURE__ */ jsx("div", { className: "support-rail__title", id: titleId, children: title }),
+              status && /* @__PURE__ */ jsx("div", { className: "support-rail__status", children: status })
+            ] }),
+            /* @__PURE__ */ jsx("button", { type: "button", className: "support-rail__close", "aria-label": "Close", onClick: requestClose, children: /* @__PURE__ */ jsx("svg", { width: "9", height: "9", viewBox: "0 0 9 9", fill: "none", stroke: "currentColor", strokeWidth: "1.3", children: /* @__PURE__ */ jsx("path", { d: "M1 1l7 7M8 1l-7 7" }) }) })
+          ] }),
+          /* @__PURE__ */ jsx("ul", { className: "support-rail__list", children: actions.map((action, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "support-rail__row",
+              style: indexStyle(index),
+              onClick: () => commit(action),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "support-rail__row-icon", "aria-hidden": "true", children: action.icon }),
+                /* @__PURE__ */ jsxs("span", { className: "support-rail__row-text", children: [
+                  /* @__PURE__ */ jsx("span", { className: "support-rail__row-label", children: action.label }),
+                  action.description && /* @__PURE__ */ jsx("span", { className: "support-rail__row-note", children: action.description })
+                ] }),
+                action.meta && /* @__PURE__ */ jsx("span", { className: "support-rail__row-meta", children: action.meta })
+              ]
+            }
+          ) }, action.id)) }),
+          /* @__PURE__ */ jsx("div", { className: "support-rail__extra", style: indexStyle(actions.length), children }),
+          footer && /* @__PURE__ */ jsx("div", { className: "support-rail__footer", style: indexStyle(actions.length + 1), children: footer })
+        ] })
+      ]
+    }
+  );
+}
+function SupportRail({
+  actions = [],
+  title = "Talk to us",
+  status,
+  side = "right",
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  onSelect,
+  needleLabel = "Support",
+  live = false,
+  children,
+  footer,
+  className = "",
+  style,
+  htmlProps
+}) {
+  const [open, setOpen] = useControllable(controlledOpen, defaultOpen, onOpenChange);
+  const rootRef = useRef(null);
+  const needleRef = useRef(null);
+  const panelRef = useRef(null);
+  const detach = useRef(null);
+  const autoId = useId();
+  const panelId = "support-rail-" + autoId;
+  const titleId = panelId + "-title";
+  const dismissSign = side === "right" ? 1 : -1;
+  const requestClose = () => setOpen(false);
+  const onGrab = (event) => {
+    const root = rootRef.current;
+    if (!root || !open || event.button !== 0 || !event.isPrimary) return;
+    detach.current?.();
+    root.setAttribute(DRAGGING_ATTRIBUTE, "");
+    detach.current = startDrag(event, {
+      onMove: (info) => root.style.setProperty(DRAG_PROPERTY, railTravel(info.offset.x, dismissSign) * dismissSign + "px"),
+      onEnd: (info) => {
+        detach.current = null;
+        root.removeAttribute(DRAGGING_ATTRIBUTE);
+        const travel = railTravel(info.offset.x, dismissSign);
+        if (railDismisses(travel, info.velocity.x * dismissSign)) requestClose();
+        else root.style.setProperty(DRAG_PROPERTY, NO_DRAG);
+      }
+    });
+  };
+  useLayoutEffect(() => {
+    const root = rootRef.current;
+    const needle = needleRef.current;
+    const panel = panelRef.current;
+    if (!root || !needle || !panel) return void 0;
+    const remeasure = () => {
+      root.style.setProperty(COLLAPSE_X_PROPERTY, String(collapseRatio(needle.offsetWidth, panel.offsetWidth)));
+      root.style.setProperty(COLLAPSE_Y_PROPERTY, String(collapseRatio(needle.offsetHeight, panel.offsetHeight)));
+    };
+    remeasure();
+    const sizes = new ResizeObserver(remeasure);
+    sizes.observe(panel);
+    sizes.observe(needle);
+    return () => sizes.disconnect();
+  }, [side]);
+  useLayoutEffect(() => {
+    const root = rootRef.current;
+    if (!root || !open) return;
+    root.style.setProperty(DRAG_PROPERTY, NO_DRAG);
+    root.removeAttribute(DRAGGING_ATTRIBUTE);
+  }, [open]);
+  useLayoutEffect(
+    () => () => {
+      detach.current?.();
+      detach.current = null;
+    },
+    []
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: cx("support-rail", className),
+      style,
+      "data-side": side,
+      "data-open": open,
+      ...htmlProps,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            ref: needleRef,
+            className: "support-rail__needle",
+            "aria-expanded": open,
+            "aria-haspopup": "dialog",
+            "aria-controls": open ? panelId : void 0,
+            onClick: () => setOpen(!open),
+            children: [
+              live && /* @__PURE__ */ jsx("span", { className: "support-rail__live", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { className: "support-rail__needle-label", children: needleLabel }),
+              /* @__PURE__ */ jsx("span", { className: "support-rail__needle-rule", "aria-hidden": "true" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { ref: panelRef, className: "support-rail__panel", children: /* @__PURE__ */ jsx(Presence, { children: open && /* @__PURE__ */ jsx(
+          SupportRailBody,
+          {
+            actions,
+            title,
+            status,
+            footer,
+            panelId,
+            titleId,
+            panelRef,
+            needleRef,
+            onGrab,
+            requestClose,
+            onSelect,
+            children
+          },
+          "body"
+        ) }) })
+      ]
+    }
+  );
+}
+
+export { SupportRail };
+//# sourceMappingURL=support-rail.js.map
+//# sourceMappingURL=support-rail.js.map