@hirobius/design-system 0.16.0 → 0.18.0

package/dist/patterns.js

@@ -0,0 +1,423 @@
+'use client';
+import { A as T, D as F, F as L, C as $, G as R, H as A, J as P, K as j, E as D, L as E, M as H, N as W, O as z, P as _, R as B, Q as M, U as O, V as X, W as G, X as q, a8 as K, a9 as U, aa as J, ab as Q, ac as Y, ad as Z, af as ee, ag as ae, ah as re, ai as te, aj as se, ak as ie, al as oe, am as le, an as ce, ao as ne, ap as de, aq as he, ar as pe, as as ue, at as ve, au as me, av as fe } from "./chunks/activity-feed-C8_e-Btq.js";
+import { F as be, a as we, b as ye, u as xe } from "./chunks/form-DnGRy27o.js";
+import { jsxs as o, Fragment as m, jsx as e } from "react/jsx-runtime";
+import { useRef as c, useEffect as v } from "react";
+import d from "./tokens.js";
+const h = 280, b = 380, n = 24, f = 3.5, w = `
+  .hds-scr-outer {
+    position: relative;
+    overflow: hidden;
+    width: 100%; /* audit-ok: percentage fill in CSS template */
+    --card-width: ${h}px;
+    --card-height: ${b}px;
+    --card-gap: ${n}px;
+    --visible-count: ${f};
+  }
+
+  /* Vertical scroll container — maps vertical scrolling to a horizontal strip */
+  .hds-scr-yscroll {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%; /* audit-ok: percentage fill in CSS template */
+    height: 100%; /* audit-ok: percentage fill in CSS template */
+    overflow-y: scroll;
+    overflow-x: hidden;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+  .hds-scr-yscroll::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Tall spacer that gives the vertical scroll room to travel */
+  .hds-scr-spacer {
+    /* Total scroll travel = card-width × card-count so each card gets a full
+       width of scroll travel. The visible window is added back so the last
+       card reaches the entry position. */
+    height: var(--hds-scr-spacer-height, 4000px);
+    width: 100%; /* audit-ok: percentage fill in CSS template */
+  }
+
+  /* Sticky strip — stays pinned in view while the vertical container scrolls */
+  .hds-scr-strip {
+    position: sticky;
+    top: 0;
+    overflow-x: scroll;
+    overflow-y: hidden;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    height: calc(var(--card-height) + 48px);
+    display: flex;
+    align-items: center;
+  }
+  .hds-scr-strip::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Horizontal track */
+  .hds-scr-track {
+    display: flex;
+    align-items: center;
+    padding: 0 ${n}px;
+    gap: var(--card-gap);
+    /* Wide enough to hold all cards plus padding */
+    min-width: max-content;
+  }
+
+  /* Individual card wrapper — controls position in the flow */
+  .hds-scr-card {
+    flex: 0 0 var(--card-width);
+    height: var(--card-height);
+    position: relative;
+    cursor: pointer;
+    transition:
+      transform 0.25s ease,
+      width 0.25s ease;
+    z-index: 0;
+  }
+
+  /* Card inner surface */
+  .hds-scr-card-inner {
+    width: 100%; /* audit-ok: percentage fill in CSS template */
+    height: 100%; /* audit-ok: percentage fill in CSS template */
+    border-radius: ${d.borderRadius[8]};
+    background: var(--semantic-color-surface-raised);
+    border: 1px solid var(--semantic-color-border-default);
+    box-shadow: var(--semantic-shadow-subtle);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    text-decoration: none;
+    color: inherit;
+    transition:
+      transform 0.25s ease,
+      box-shadow 0.25s ease;
+  }
+
+  /* Hover: widen card 25% and lift it */
+  .hds-scr-card:hover {
+    z-index: 10;
+    transform: translate(-10%, -4.5%);
+    flex-basis: calc(var(--card-width) * 1.25);
+    width: calc(var(--card-width) * 1.25);
+  }
+  .hds-scr-card:hover .hds-scr-card-inner {
+    box-shadow: var(--semantic-shadow-floating);
+  }
+
+  /* Neighbour shift — requires :has() support */
+  @supports selector(:has(+ *)) {
+    .hds-scr-card:hover + .hds-scr-card {
+      transform: translateX(8%);
+    }
+  }
+
+  /* Cover image */
+  .hds-scr-cover {
+    flex: 1 1 auto;
+    min-height: 0;
+    background-color: var(--semantic-color-surface-page);
+    overflow: hidden;
+  }
+  .hds-scr-cover img {
+    width: 100%; /* audit-ok: percentage fill in CSS template */
+    height: 100%; /* audit-ok: percentage fill in CSS template */
+    object-fit: cover;
+    display: block;
+  }
+  .hds-scr-cover-placeholder {
+    width: 100%; /* audit-ok: percentage fill in CSS template */
+    height: 100%; /* audit-ok: percentage fill in CSS template */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--semantic-color-surface-page);
+  }
+
+  /* Card metadata footer */
+  .hds-scr-meta {
+    flex: 0 0 auto;
+    padding: 14px 16px 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    border-top: 1px solid var(--semantic-color-border-subdued);
+  }
+
+  /* Scroll-driven stacking animation — Chrome 115+ / FF 110+ */
+  @supports (animation-timeline: scroll()) {
+    .hds-scr-card-inner {
+      animation: hds-scr-stack linear;
+      animation-timeline: view(
+        x
+        calc(0px - 2 * var(--card-width))
+        calc(var(--card-width) * (var(--visible-count) - 0.2))
+      );
+      animation-duration: 1ms;
+    }
+
+    @keyframes hds-scr-stack {
+      from {
+        transform: translateX(0%) scale(1);
+        opacity: 1;
+      }
+      to {
+        transform: translateX(300%) scale(0.5);
+        opacity: 0;
+      }
+    }
+
+    /* Cancel the animation on a hovered card so it stays visible */
+    .hds-scr-card:hover .hds-scr-card-inner {
+      animation: none;
+    }
+  }
+
+  /* Fallback outer height when scroll-driven animations are not available:
+     a static card-height plus some breathing room */
+  .hds-scr-outer[data-fallback="true"] {
+    /* Outer div becomes a straight horizontal scroll container */
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: thin;
+  }
+  .hds-scr-outer[data-fallback="true"] .hds-scr-yscroll {
+    position: static;
+    overflow: visible;
+    height: auto;
+    width: auto;
+  }
+  .hds-scr-outer[data-fallback="true"] .hds-scr-spacer {
+    height: auto;
+    width: auto;
+  }
+  .hds-scr-outer[data-fallback="true"] .hds-scr-strip {
+    position: static;
+    overflow-x: visible;
+    overflow-y: visible;
+  }
+  .hds-scr-outer[data-fallback="true"] .hds-scr-track {
+    padding: 12px ${n}px;
+  }
+`;
+function y() {
+  return /* @__PURE__ */ e("div", { className: "hds-scr-cover-placeholder", "aria-hidden": "true", children: /* @__PURE__ */ o(
+    "svg",
+    {
+      width: "48",
+      height: "48",
+      viewBox: "0 0 48 48",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ e(
+          "rect",
+          {
+            x: "6",
+            y: "10",
+            width: "36",
+            height: "28",
+            rx: "3",
+            stroke: "var(--semantic-color-border-default)",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "circle",
+          {
+            cx: "16",
+            cy: "20",
+            r: "4",
+            stroke: "var(--semantic-color-border-default)",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "path",
+          {
+            d: "M6 30l10-8 8 6 6-5 12 9",
+            stroke: "var(--semantic-color-border-default)",
+            strokeWidth: "1.5",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  ) });
+}
+function x({ card: a, index: t, total: l }) {
+  const i = /* @__PURE__ */ o(m, { children: [
+    /* @__PURE__ */ e("div", { className: "hds-scr-cover", children: a.coverImage ? /* @__PURE__ */ e(
+      "img",
+      {
+        src: a.coverImage,
+        alt: a.title,
+        loading: t < 4 ? "eager" : "lazy",
+        decoding: "async"
+      }
+    ) : /* @__PURE__ */ e(y, {}) }),
+    /* @__PURE__ */ o("div", { className: "hds-scr-meta", children: [
+      a.category && /* @__PURE__ */ e(
+        "span",
+        {
+          style: {
+            ...d.typeStyles.eyebrow,
+            color: "var(--semantic-color-content-secondary)"
+          },
+          children: a.category
+        }
+      ),
+      /* @__PURE__ */ e(
+        "span",
+        {
+          style: {
+            ...d.typeStyles.heading3,
+            color: "var(--semantic-color-content-primary)"
+          },
+          children: a.title
+        }
+      )
+    ] })
+  ] });
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: "hds-scr-card",
+      style: { "--card-index": t },
+      "aria-label": `${a.title}${a.category ? `, ${a.category}` : ""}, card ${t + 1} of ${l}`,
+      children: a.href ? /* @__PURE__ */ e(
+        "a",
+        {
+          href: a.href,
+          className: "hds-focus hds-scr-card-inner",
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
+            textDecoration: "none",
+            color: "inherit"
+          },
+          children: i
+        }
+      ) : /* @__PURE__ */ e("div", { className: "hds-scr-card-inner", children: i })
+    }
+  );
+}
+function V({ cards: a }) {
+  const t = c(null), l = c(null), i = c(null), p = a.length, g = h * p + /* trailing breathing room */
+  h * f;
+  return v(() => {
+    const r = l.current, s = i.current;
+    if (!r || !s) return;
+    function u() {
+      !r || !s || (s.scrollLeft = r.scrollTop);
+    }
+    return r.addEventListener("scroll", u, { passive: !0 }), () => {
+      r.removeEventListener("scroll", u);
+    };
+  }, []), v(() => {
+    const r = t.current;
+    if (!r) return;
+    typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("animation-timeline", "scroll()") || r.setAttribute("data-fallback", "true");
+  }, []), /* @__PURE__ */ o(m, { children: [
+    /* @__PURE__ */ e("style", { dangerouslySetInnerHTML: { __html: w } }),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        ref: t,
+        className: "hds-scr-outer",
+        style: {
+          height: "calc(var(--card-height) + 48px)"
+        },
+        role: "region",
+        "aria-label": "Project cards",
+        children: /* @__PURE__ */ o(
+          "div",
+          {
+            ref: l,
+            className: "hds-scr-yscroll",
+            role: "region",
+            "aria-label": "Project cards, vertical scroll",
+            tabIndex: 0,
+            style: { height: "100%" },
+            children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: "hds-scr-spacer",
+                  style: {
+                    "--hds-scr-spacer-height": `${g}px`
+                  }
+                }
+              ),
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  ref: i,
+                  className: "hds-scr-strip",
+                  role: "region",
+                  "aria-label": "Project cards, horizontal scroll",
+                  tabIndex: 0,
+                  children: /* @__PURE__ */ e("div", { className: "hds-scr-track", role: "list", children: a.map((r, s) => /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(x, { card: r, index: s, total: p }) }, r.id)) })
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  T as ActivityFeed,
+  F as AppShell,
+  L as AssetImg,
+  $ as Calendar,
+  R as Carousel,
+  A as CodeBlock,
+  P as CommandPalette,
+  j as DocLinkCard,
+  D as ErrorPattern,
+  E as FileInput,
+  be as Form,
+  we as FormField,
+  ye as FormFieldShell,
+  H as Lightbox,
+  W as NavItem,
+  z as OverflowList,
+  _ as Page,
+  B as Reveal,
+  M as SideNav,
+  V as StackedCardRail,
+  O as Stepper,
+  X as Toolbar,
+  G as TopNav,
+  q as TreeList,
+  K as activityAvatarVariants,
+  U as activityToneVariants,
+  J as appShellVariants,
+  Q as blockCodeTextVariants,
+  Y as blockContainerVariants,
+  Z as blockHeaderVariants,
+  ee as carouselControlVariants,
+  ae as chevronVariants,
+  re as cmdkDescriptionVariants,
+  te as cmdkKindBadgeVariants,
+  se as cmdkRowVariants,
+  ie as collapsibleToggleVariants,
+  oe as copyButtonVariants,
+  le as defaultActivityEvents,
+  ce as docLinkCardVariants,
+  ne as fileInputVariants,
+  de as inlineCodeTextVariants,
+  he as inlineWrapperVariants,
+  pe as navIndicatorVariants,
+  ue as navItemVariants,
+  ve as prePanelVariants,
+  me as sideNavVariants,
+  fe as stepMarkerVariants,
+  xe as useFieldWiring
+};

package/dist/static.css

@@ -145,8 +145,8 @@
   border-style: solid;
   border-width: 1px;
   border-color: transparent;
-  padding: var(--semantic-space-component-padding);
-  gap: var(--semantic-space-layout-tight);
+  padding: var(--semantic-space-surface-padding);
+  gap: var(--semantic-space-scale-sm);
 }
 
 .hds-card--no-padding {
@@ -194,8 +194,8 @@
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  gap: var(--semantic-space-component-gap);
-  padding: var(--semantic-space-component-gap);
+  gap: var(--semantic-space-scale-xs);
+  padding: var(--semantic-space-scale-xs);
   border-radius: var(
     --primitive-radius-4
   ); /* tier-ok: alert.tsx itself carries the identical exemption ("tier-ok: 4px primitive radius, no semantic 4px token", alert.tsx:24) */