hlmnhkl-ui 0.15.0 → 0.17.0

package/README.md

@@ -49,7 +49,7 @@ Using Next.js or React Router? The [installation guide](https://ui.hlmnhkl.my/in
 
 ## Pro
 
-53 more components (such as Calendar, Chart, KanbanBoard and Combobox), page blocks, full templates and brand themes are coming as hlmnhkl/ui Pro. You can see them on the [docs site](https://ui.hlmnhkl.my).
+54 more components (such as Calendar, Chart, KanbanBoard, Combobox and Route), page blocks, full templates and brand themes are coming as hlmnhkl/ui Pro. You can see them on the [docs site](https://ui.hlmnhkl.my).
 
 ## Licence
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hlmnhkl-ui",
-  "version": "0.15.0",
+  "version": "0.17.0",
   "description": "React components in a monochrome style. Copy them into your app with npx hlmnhkl-ui add <name>.",
   "license": "MIT",
   "homepage": "https://ui.hlmnhkl.my",

package/scripts/pro-components.json

@@ -40,6 +40,7 @@
   "RelativeTime",
   "ResizablePanels",
   "RichTextEditor",
+  "Route",
   "Sidebar",
   "Sparkline",
   "Stat",

package/src/components/Checkbox/Checkbox.module.css

@@ -71,8 +71,9 @@
 
 .tick,
 .dash {
-  stroke-dasharray: 1;
-  stroke-dashoffset: 1;
+  /* Hidden just before the path starts. A zero-length dash would leave its round ends as a dot in Safari. */
+  stroke-dasharray: 1 2;
+  stroke-dashoffset: 1.01;
   transition: stroke-dashoffset var(--hl-motion-base) var(--hl-ease-out);
 }
 

package/src/components/CopyButton/CopyButton.module.css

@@ -62,8 +62,9 @@
   stroke-width: 2.25;
   stroke-linecap: round;
   stroke-linejoin: round;
-  stroke-dasharray: 1;
-  stroke-dashoffset: 1;
+  /* Hidden just before the path starts. A zero-length dash would leave its round ends as a dot in Safari. */
+  stroke-dasharray: 1 2;
+  stroke-dashoffset: 1.01;
   transition: stroke-dashoffset var(--hl-motion-base) var(--hl-ease-in);
 }
 

package/src/components/PasswordInput/PasswordInput.module.css

@@ -55,8 +55,9 @@
 .eye[data-open] .pupil { transform: scale(0.8); }
 
 .slash {
-  stroke-dasharray: 1;
-  stroke-dashoffset: 1;
+  /* Hidden just before the path starts. A zero-length dash would leave its round ends as a dot in Safari. */
+  stroke-dasharray: 1 2;
+  stroke-dashoffset: 1.01;
   transition: stroke-dashoffset var(--hl-motion-base) var(--hl-ease-out);
 }
 

package/src/components/SegmentedControl/SegmentedControl.module.css

@@ -19,7 +19,7 @@
   left: 0;
   z-index: -1;
   border-radius: var(--hl-radius-control);
-  background: var(--hl-color-surface);
+  background: var(--hl-color-surface-raised);
   box-shadow: var(--hl-shadow-2), 0 0 0 var(--hl-line) var(--hl-color-border);
 }
 

package/src/components/Skeleton/Skeleton.module.css

@@ -26,10 +26,31 @@
 .rect { width: 100%; height: var(--hl-skeleton-block); border-radius: var(--hl-radius-md); }
 .circle { width: var(--hl-skeleton-avatar); height: var(--hl-skeleton-avatar); border-radius: var(--hl-radius-full); }
 
+/* A sketch: the shapes as dashed pencil outlines, no fill. Text becomes dashed baselines. The lines
+   themselves fade gently instead of a shimmer, which would light up the empty box behind them. */
+.sketch {
+  background: none;
+  border: var(--hl-line) dashed var(--hl-color-border-strong);
+  animation: sketching var(--hl-motion-shimmer) var(--hl-ease-in-out) infinite alternate;
+  animation-delay: calc(var(--i, 0) * var(--hl-motion-stagger) * 3);
+}
+
+.sketch::after { display: none; }
+
+.sketch.text {
+  border-width: 0 0 var(--hl-line);
+  border-radius: 0;
+}
+
+@keyframes sketching {
+  from { border-color: var(--hl-color-border); }
+}
+
 @keyframes shimmer {
   to { transform: translateX(100%); }
 }
 
 @media (prefers-reduced-motion: reduce) {
   .bone::after { animation: none; display: none; }
+  .sketch { animation: none; }
 }

package/src/components/Skeleton/Skeleton.tsx

@@ -11,24 +11,27 @@ export type SkeletonProps = {
   height?: CSSProperties['height']
   /** For text: number of lines. The last one is shorter, like real text. */
   lines?: number
+  /** Solid grey shapes, or a sketch: the same shapes as dashed outlines, like a pencil layout. */
+  variant?: 'solid' | 'sketch'
   /** Extra class for the root element. */
   className?: string
 }
 
 // Decorative only. Mark the loading container with aria-busy and a label instead.
-export function Skeleton({ shape = 'rect', width, height, lines = 1, className }: SkeletonProps) {
+export function Skeleton({ shape = 'rect', width, height, lines = 1, variant = 'solid', className }: SkeletonProps) {
+  const look = variant === 'sketch' && styles.sketch
   if (shape === 'text') {
     return (
       <span className={cx(styles.lines, className)} style={{ width }} aria-hidden="true">
         {Array.from({ length: lines }, (_, i) => (
           <span
             key={i}
-            className={cx(styles.bone, styles.text)}
+            className={cx(styles.bone, styles.text, look)}
             style={{ width: lines > 1 && i === lines - 1 ? '62%' : '100%', ['--i' as string]: i }}
           />
         ))}
       </span>
     )
   }
-  return <span className={cx(styles.bone, styles[shape], className)} style={{ width, height }} aria-hidden="true" />
+  return <span className={cx(styles.bone, styles[shape], look, className)} style={{ width, height }} aria-hidden="true" />
 }

package/src/components/Slider/Slider.module.css

@@ -73,7 +73,7 @@
   margin-top: calc((var(--hl-track-h) - var(--thumb)) / 2);
   border: var(--hl-line-thick) solid var(--hl-color-accent);
   border-radius: var(--hl-radius-full);
-  background: var(--hl-color-surface);
+  background: var(--hl-color-surface-raised);
   box-shadow: var(--hl-shadow-2);
   transition:
     transform var(--hl-motion-slow) var(--hl-ease-spring),
@@ -86,7 +86,7 @@
   box-sizing: border-box;
   border: var(--hl-line-thick) solid var(--hl-color-accent);
   border-radius: var(--hl-radius-full);
-  background: var(--hl-color-surface);
+  background: var(--hl-color-surface-raised);
   box-shadow: var(--hl-shadow-2);
   transition:
     transform var(--hl-motion-slow) var(--hl-ease-spring),

package/src/components/Table/Table.module.css

@@ -131,6 +131,33 @@
   text-align: left;
 }
 
+/* A group's header: its name and how many rows it holds, on a quiet band that opens a gap above it,
+   so the groups read as pieces the table split into. */
+.groupHead {
+  padding: var(--hl-space-6) var(--hl-space-5) var(--hl-space-2);
+  border-top: var(--hl-line) solid var(--hl-color-border);
+  background: var(--hl-color-surface-sunken);
+  font-size: var(--hl-text-sm);
+  font-weight: var(--hl-weight-semibold);
+  text-align: left;
+}
+
+.group:first-of-type .groupHead { padding-top: var(--hl-space-3); }
+
+.groupCount {
+  margin-left: var(--hl-space-3);
+  font-size: var(--hl-text-xs);
+  font-weight: var(--hl-weight-regular);
+  color: var(--hl-color-fg-muted);
+}
+
+/* A new group's header settles in while its rows glide into place below it. */
+.groupRow { animation: groupIn var(--hl-motion-slow) var(--hl-ease-out) both; }
+
+@keyframes groupIn {
+  from { opacity: 0; transform: translateY(calc(var(--hl-shift-sm) * -1)); }
+}
+
 .empty {
   padding: var(--hl-space-9) var(--hl-space-5);
   border-top: var(--hl-line) solid var(--hl-color-border);
@@ -193,8 +220,9 @@
 
 .tick,
 .dash {
-  stroke-dasharray: 1;
-  stroke-dashoffset: 1;
+  /* Hidden just before the path starts. A zero-length dash would leave its round ends as a dot in Safari. */
+  stroke-dasharray: 1 2;
+  stroke-dashoffset: 1.01;
   transition: stroke-dashoffset var(--hl-motion-base) var(--hl-ease-out);
 }
 
@@ -215,7 +243,8 @@
   [data-layout="stack"] .table,
   [data-layout="stack"] .table tbody,
   [data-layout="stack"] .table tr,
-  [data-layout="stack"] .table td { display: block; }
+  [data-layout="stack"] .table td,
+  [data-layout="stack"] .table .groupHead { display: block; }
 
   [data-layout="stack"] .head { display: block; }
 

package/src/components/Table/Table.tsx

@@ -31,6 +31,8 @@ export type TableLabels = {
   sortedBy: (column: string, direction: TableSort['direction']) => string
   /** Spoken when a third press turns the sort off. */
   unsorted: (column: string) => string
+  /** The row count beside each group's name. */
+  groupCount: (count: number) => string
 }
 
 const defaultLabels: TableLabels = {
@@ -38,6 +40,7 @@ const defaultLabels: TableLabels = {
   selectRow: (name) => `Select ${name}`,
   sortedBy: (column, direction) => `Sorted by ${column}, ${direction}`,
   unsorted: (column) => `No longer sorted by ${column}`,
+  groupCount: (count) => `${count} ${count === 1 ? 'row' : 'rows'}`,
 }
 
 export type TableProps<T> = {
@@ -57,6 +60,9 @@ export type TableProps<T> = {
   defaultSort?: TableSort | null
   /** Called with the new sort when a header is pressed: ascending, descending, then null. */
   onSortChange?: (sort: TableSort | null) => void
+  /** Gathers rows under a header per group, such as each row's status. Groups keep the order they first
+   * appear in; the sort applies inside each group. Rows glide to their group when it changes. */
+  groupBy?: (row: T) => string
   /** Adds a checkbox column. */
   selectable?: boolean
   /** Ids of the selected rows, when you control it. */
@@ -109,6 +115,7 @@ export function Table<T>({
   sort: sortProp,
   defaultSort = null,
   onSortChange,
+  groupBy,
   selectable,
   selected: selectedProp,
   defaultSelected = [],
@@ -143,8 +150,10 @@ export function Table<T>({
   const [sort, setSort] = useControllable<TableSort | null>(sortProp, defaultSort, onSortChange)
   const [selected, setSelected] = useControllable(selectedProp, defaultSelected, onSelectedChange)
   const [announce, setAnnounce] = useState('')
-  const bodyRef = useRef<HTMLTableSectionElement>(null)
+  const tableRef = useRef<HTMLTableElement>(null)
   const lastTops = useRef(new Map<string, number>())
+  const lastShape = useRef('')
+  const groupOrder = useRef<string[]>([])
 
   const sorted = useMemo(() => {
     if (!sort) return rows
@@ -161,16 +170,26 @@ export function Table<T>({
     return out
   }, [rows, columns, sort])
 
-  const order = sorted.map(getRowId).join('|')
+  // Groups take the order they first appear in, and keep it: a sort, or a row moving to another group,
+  // never shuffles the groups themselves. A group seen for the first time joins at the end.
+  let groups: Array<{ key: string; rows: T[] }> | null = null
+  if (groupBy) {
+    for (const key of new Set(rows.map(groupBy))) if (!groupOrder.current.includes(key)) groupOrder.current.push(key)
+    groups = groupOrder.current.map((key) => ({ key, rows: sorted.filter((r) => groupBy(r) === key) })).filter((g) => g.rows.length)
+  }
+  const shape = groups ? groups.map((g) => g.key).join('|') : ''
+  const order = groups ? groups.map((g) => `${g.key}:${g.rows.map(getRowId).join(',')}`).join('|') : sorted.map(getRowId).join('|')
 
-  // FLIP: rows glide to their new place after a sort
+  // FLIP: rows glide to their new place after a sort. When the groups themselves change, they snap
+  // there with the spring, so the table visibly splits apart and closes up again.
   useLayoutEffect(() => {
-    const body = bodyRef.current
-    if (!body) return
+    const table = tableRef.current
+    if (!table) return
     const duration = motionMs('slow')
-    const ease = easing('out')
+    const ease = easing(shape !== lastShape.current ? 'spring' : 'out')
+    lastShape.current = shape
     const now = new Map<string, number>()
-    body.querySelectorAll<HTMLElement>('[data-row-id]').forEach((tr) => {
+    table.querySelectorAll<HTMLElement>('tbody [data-row-id]').forEach((tr) => {
       const rid = tr.dataset.rowId!
       const top = tr.offsetTop
       now.set(rid, top)
@@ -204,11 +223,35 @@ export function Table<T>({
   const scrollable = Boolean(maxHeight) || more.start || more.end
   const nameOf = (row: T) => (rowLabel ? rowLabel(row) : String(read(row, columns[0]?.key ?? '') ?? getRowId(row)))
 
+  const colCount = columns.length + (selectable ? 1 : 0)
+  // Keeps the entrance stagger going across groups.
+  let rowIndex = 0
+  const renderRow = (row: T) => {
+    const ri = rowIndex++
+    const rid = getRowId(row)
+    const on = selectedSet.has(rid)
+    return (
+      <tr key={rid} role="row" data-row-id={rid} className={styles.row} data-selected={on || undefined} style={{ ['--i' as string]: Math.min(ri, 12) }}>
+        {selectable && (
+          <td role="cell" className={styles.checkCell}>
+            <Check checked={on} label={labels.selectRow(nameOf(row))} onChange={(v) => setSelected(v ? [...selected, rid] : selected.filter((s) => s !== rid))} />
+          </td>
+        )}
+        {columns.map((c) => (
+          <td key={c.key} role="cell" className={styles.td} data-align={c.align ?? 'start'} data-label={labelOf(c)}>
+            {/* One wrapper, so the card layout always gets a label and a value */}
+            <span>{c.cell ? c.cell(row) : String(read(row, c.key) ?? '')}</span>
+          </td>
+        ))}
+      </tr>
+    )
+  }
+
   return (
     <div className={cx(styles.root, className)} data-layout={layout} data-more-start={more.start || undefined} data-more-end={more.end || undefined}>
       <div ref={scrollRef} onScroll={measure} className={styles.scroll} style={{ maxHeight }} tabIndex={scrollable ? 0 : undefined} role={scrollable ? 'region' : undefined} aria-labelledby={scrollable ? `${id}-cap` : undefined}>
         {/* Explicit roles keep table semantics when rows restyle as cards (layout="stack") */}
-        <table role="table" className={styles.table} aria-labelledby={`${id}-cap`}>
+        <table ref={tableRef} role="table" className={styles.table} aria-labelledby={`${id}-cap`}>
           <caption id={`${id}-cap`} className={cx(styles.caption, hideCaption && styles.srOnly)}>
             {caption}
           </caption>
@@ -253,34 +296,30 @@ export function Table<T>({
               })}
             </tr>
           </thead>
-          <tbody role="rowgroup" ref={bodyRef}>
-            {sorted.map((row, ri) => {
-              const rid = getRowId(row)
-              const on = selectedSet.has(rid)
-              return (
-                <tr key={rid} role="row" data-row-id={rid} className={styles.row} data-selected={on || undefined} style={{ ['--i' as string]: Math.min(ri, 12) }}>
-                  {selectable && (
-                    <td role="cell" className={styles.checkCell}>
-                      <Check checked={on} label={labels.selectRow(nameOf(row))} onChange={(v) => setSelected(v ? [...selected, rid] : selected.filter((s) => s !== rid))} />
-                    </td>
-                  )}
-                  {columns.map((c) => (
-                    <td key={c.key} role="cell" className={styles.td} data-align={c.align ?? 'start'} data-label={labelOf(c)}>
-                      {/* One wrapper, so the card layout always gets a label and a value */}
-                      <span>{c.cell ? c.cell(row) : String(read(row, c.key) ?? '')}</span>
-                    </td>
-                  ))}
+          {groups && groups.length > 0 ? (
+            groups.map((g) => (
+              <tbody key={g.key} role="rowgroup" className={styles.group}>
+                <tr role="row" data-row-id={`group:${g.key}`} className={styles.groupRow}>
+                  <th role="rowheader" scope="rowgroup" colSpan={colCount} className={styles.groupHead}>
+                    <span>{g.key}</span>{' '}
+                    <span className={styles.groupCount}>{labels.groupCount(g.rows.length)}</span>
+                  </th>
+                </tr>
+                {g.rows.map(renderRow)}
+              </tbody>
+            ))
+          ) : (
+            <tbody role="rowgroup">
+              {sorted.map(renderRow)}
+              {sorted.length === 0 && (
+                <tr role="row">
+                  <td role="cell" colSpan={colCount} className={styles.empty}>
+                    {emptyText}
+                  </td>
                 </tr>
-              )
-            })}
-            {sorted.length === 0 && (
-              <tr role="row">
-                <td role="cell" colSpan={columns.length + (selectable ? 1 : 0)} className={styles.empty}>
-                  {emptyText}
-                </td>
-              </tr>
-            )}
-          </tbody>
+              )}
+            </tbody>
+          )}
         </table>
       </div>
       <p className={styles.srOnly} role="status">{announce}</p>

package/src/components/Tabs/Tabs.module.css

@@ -22,6 +22,7 @@
 
 .tab {
   position: relative;
+  min-width: var(--hl-hit-min);
   min-height: var(--hl-hit-min);
   padding: 0 var(--hl-space-4);
   border: 0;
@@ -36,6 +37,11 @@
   transition: color var(--hl-motion-base) var(--hl-ease-out), background-color var(--hl-motion-fast) var(--hl-ease-out);
 }
 
+/* Narrow screens: a little less room around each tab, so a short row fits instead of scrolling. */
+@media (max-width: 479px) {
+  .tab { padding: 0 var(--hl-space-3); }
+}
+
 @media (hover: hover) {
   .tab:hover:not(:disabled) { color: var(--hl-color-fg); background: var(--hl-color-surface-hover); }
 }

package/src/tokens.css

@@ -23,6 +23,8 @@
   --hl-color-surface-sunken: var(--hl-gray-100);
   --hl-color-surface-hover: var(--hl-gray-150);
   --hl-color-surface-active: var(--hl-gray-200);
+  /* Something that sits on a track, such as a sliding pill or a slider thumb. */
+  --hl-color-surface-raised: var(--hl-color-surface);
   --hl-color-overlay: rgb(10 10 10 / 0.32);
   --hl-color-fg: var(--hl-gray-950);
   --hl-color-fg-muted: var(--hl-gray-600);
@@ -212,6 +214,7 @@
     --hl-color-surface-sunken: #121212;
     --hl-color-surface-hover: #262626;
     --hl-color-surface-active: #2e2e2e;
+    --hl-color-surface-raised: #2c2c2c;
     --hl-color-overlay: rgb(0 0 0 / 0.6);
     --hl-color-fg: #ececec;
     --hl-color-fg-muted: #ababab;
@@ -232,8 +235,9 @@
     --hl-color-danger-solid: #d63a2e;
     /* Darker on hover: a lighter red drops white text under 4.5:1 */
     --hl-color-danger-solid-hover: #b8302a;
-    --hl-shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
-    --hl-shadow-2: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.4);
+    /* Faint: in the dark, height shows as a lighter surface, not a deep shadow. */
+    --hl-shadow-1: 0 1px 2px rgb(0 0 0 / 0.2);
+    --hl-shadow-2: 0 1px 2px rgb(0 0 0 / 0.2), 0 4px 12px rgb(0 0 0 / 0.15);
     --hl-shadow-3: 0 2px 4px rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.5);
     --hl-shadow-4: 0 4px 8px rgb(0 0 0 / 0.4), 0 24px 64px rgb(0 0 0 / 0.6);
     color-scheme: dark;
@@ -248,6 +252,7 @@
   --hl-color-surface-sunken: #121212;
   --hl-color-surface-hover: #262626;
   --hl-color-surface-active: #2e2e2e;
+  --hl-color-surface-raised: #2c2c2c;
   --hl-color-overlay: rgb(0 0 0 / 0.6);
   --hl-color-fg: #ececec;
   --hl-color-fg-muted: #ababab;
@@ -268,8 +273,9 @@
   --hl-color-danger-solid: #d63a2e;
   /* Darker on hover: a lighter red drops white text under 4.5:1 */
   --hl-color-danger-solid-hover: #b8302a;
-  --hl-shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
-  --hl-shadow-2: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.4);
+  /* Faint: in the dark, height shows as a lighter surface, not a deep shadow. */
+  --hl-shadow-1: 0 1px 2px rgb(0 0 0 / 0.2);
+  --hl-shadow-2: 0 1px 2px rgb(0 0 0 / 0.2), 0 4px 12px rgb(0 0 0 / 0.15);
   --hl-shadow-3: 0 2px 4px rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.5);
   --hl-shadow-4: 0 4px 8px rgb(0 0 0 / 0.4), 0 24px 64px rgb(0 0 0 / 0.6);
   color-scheme: dark;
@@ -303,6 +309,8 @@
   --hl-day-mark: 4px;
   --hl-calendar-gap: 32px;
   --hl-wheel-rows: 5;
+  /* How far each row tilts per row away from the middle, so a wheel reads as a drum. */
+  --hl-wheel-tilt: 18deg;
   --hl-wheel-w: 64px;
 
   /* Smarter inputs */