@tempoxyz/ds 0.2.5 → 0.2.6

package/src/web/components/Rows.tsx

@@ -3,7 +3,6 @@ import type { ComponentPropsWithRef, ReactNode } from 'react'
 import { use } from 'react'
 import type * as zyzz from 'zyzz'
 import { keyframes } from 'zyzz/web'
-import { ChevronDown } from '../icons/ChevronDown.js'
 import { ChevronRight } from '../icons/ChevronRight.js'
 import { style, variants } from '../zyzz.config.js'
 import * as RowsSize from './internal/RowsSize.js'
@@ -51,18 +50,31 @@ export namespace Rows {
       zyzz.Props.Variants<typeof styles.description>
   }
 
-  /** A block wrapper for a run of rows. `RowGroupLoader` renders the same wrapper while loading. */
+  /**
+   * A block wrapper for a run of rows. `RowGroupLoader` renders the same wrapper while loading.
+   * Directly after an expanded row, or after a group that follows one, its dividers start at the
+   * row text.
+   */
   export function Group(props: Group.Props) {
     const { className, vars, ...attributes } = props
 
-    return <div {...attributes} {...styles.group({ className, style: props.style, vars })} />
+    return (
+      <div
+        {...attributes}
+        data-group=""
+        {...styles.group({ className, style: props.style, vars })}
+      />
+    )
   }
 
   export namespace Group {
     export type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.group>
   }
 
-  /** Groups a `Rows.Title` and `Rows.Description` beside a control. */
+  /**
+   * Groups a `Rows.Title` and `Rows.Description` beside a control, or stacks a `Rows.Label` over a
+   * short paragraph that does not fit on one line beside it.
+   */
   export function Info(props: Info.Props) {
     const { className, vars, ...attributes } = props
 
@@ -79,7 +91,11 @@ export namespace Rows {
     export type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.info>
   }
 
-  /** The key of a key-value row. It keeps its width and pushes the content after it to the end. */
+  /**
+   * The key of a key-value row. It keeps its width, holds at least half the row, and pushes the
+   * content after it to the end. The value then takes at most the other half, so a `Hex` truncates
+   * and long text wraps.
+   */
   export function Label(props: Label.Props) {
     const { className, vars, ...attributes } = props
 
@@ -98,7 +114,7 @@ export namespace Rows {
 
   /**
    * Content revealed by an expandable row. Mount it directly after the row while open. It eases in
-   * on mount, and the divider between it and an `aria-expanded="true"` row is hidden.
+   * on mount, and the divider above it starts at the row text.
    */
   export function Panel(props: Panel.Props) {
     const { className, vars, ...attributes } = props
@@ -149,7 +165,8 @@ export namespace Rows {
   /**
    * `size` sets one row height for every row. A 32px control fits `small` and `medium` rows, and a
    * 40px control fits `large` rows, without changing that height. `inset` dividers start where the
-   * row text does.
+   * row text does. Dividers in a `Rows.Panel` or `Rows.Group` directly after an expanded row start
+   * there with `full` dividers too.
    * Inside a `Surface`, rows reach its edges. Variants default to `dividers="inset"`,
    * `size="medium"`.
    */
@@ -210,7 +227,7 @@ export namespace Rows {
         children: (
           <>
             <span {...styles.content()}>{children}</span>
-            {action === 'expand' && <ChevronDown data-indicator="" {...styles.indicator()} />}
+            {action === 'expand' && <ChevronRight data-indicator="" {...styles.indicator()} />}
             {action === 'navigation' && <ChevronRight {...styles.indicator()} />}
           </>
         ),
@@ -224,8 +241,9 @@ export namespace Rows {
     export type Props = Omit<useRender.ComponentProps<'div'>, 'children'> &
       Omit<zyzz.Props.Variants<typeof styles.row>, 'size'> & {
         /**
-         * `expand` shows a chevron that turns with `aria-expanded`. `navigation` shows a trailing
-         * chevron. Either makes the row a button unless `render` is set.
+         * `expand` shows a trailing chevron that turns from right to down while `aria-expanded` is
+         * true. `navigation` shows a trailing chevron. Either makes the row a button unless `render`
+         * is set.
          * @default 'none'
          */
         action?: 'expand' | 'navigation' | 'none' | undefined
@@ -263,6 +281,7 @@ export namespace Rows {
         aria-label="Loading"
         role="status"
         {...attributes}
+        data-group=""
         {...styles.group({ className, style: props.style, vars })}
       >
         {['30%', '45%'].map((width) => (
@@ -355,6 +374,29 @@ namespace styles {
         color: 'gray.900',
         flexShrink: '0 !custom',
         marginInlineEnd: 'auto !custom',
+        // Holding half the row leaves the value at most the other half, however long it is.
+        minWidth: '50% !custom',
+        selectors: {
+          // A `Hex` value yields the width of its leading identicon and gap back from this half.
+          '&:has(~ [data-hex] > [data-identicon="16"]:first-child)': {
+            minWidth: 'calc(50% - 24px) !custom',
+          },
+          '&:has(~ [data-hex] > [data-identicon="24"]:first-child)': {
+            minWidth: 'calc(50% - 32px) !custom',
+          },
+          '&:has(~ [data-hex] > [data-identicon="32"]:first-child)': {
+            minWidth: 'calc(50% - 40px) !custom',
+          },
+          '&:has(~ [data-hex] > [data-identicon="40"]:first-child)': {
+            minWidth: 'calc(50% - 48px) !custom',
+          },
+          '&:has(~ [data-hex] > [data-identicon="48"]:first-child)': {
+            minWidth: 'calc(50% - 56px) !custom',
+          },
+          '&:has(~ [data-hex] > [data-identicon="64"]:first-child)': {
+            minWidth: 'calc(50% - 72px) !custom',
+          },
+        },
       },
     },
     { id: 'tds/web/rows/label' },
@@ -415,8 +457,8 @@ namespace styles {
             { display: 'none' },
           '& :is(button, a[href], [role="button"])[data-divider]:hover:not(:disabled, [aria-disabled="true"]) + [data-divider]::before':
             { display: 'none' },
-          // An expanded row and its panel read as one item.
-          '& [aria-expanded="true"] + [data-divider]::before': { display: 'none' },
+          '& :is(button, a[href], [role="button"])[data-divider]:hover:not(:disabled, [aria-disabled="true"]) + [data-group] > [data-divider]:first-child::before':
+            { display: 'none' },
         },
       },
       // Inset dividers start where the row text does: 16, 20 or 24px in.
@@ -439,17 +481,34 @@ namespace styles {
         },
         // Panels share the rows' side padding so their text lines up. Info takes back the block
         // padding that small and medium rows trim for controls, so two-line text keeps its room.
+        // Dividers in content revealed by an expanded row start at the row text, even with `full`
+        // dividers, so the content reads as nested under the row.
         size: {
-          large: { selectors: { '& [data-panel]': { paddingInline: '24' } } },
+          large: {
+            selectors: {
+              '& :is([aria-expanded="true"] + [data-group], [aria-expanded="true"] + [data-group] + [data-group]) > [data-divider]::before':
+                { insetInlineStart: '24' },
+              '& [aria-expanded="true"] + [data-panel]::before': { insetInlineStart: '24' },
+              '& [data-panel]': { paddingInline: '24' },
+            },
+          },
           medium: {
             selectors: {
+              '& :is([aria-expanded="true"] + [data-group], [aria-expanded="true"] + [data-group] + [data-group]) > [data-divider]::before':
+                { insetInlineStart: '20' },
+              '& [aria-expanded="true"] + [data-panel]::before': { insetInlineStart: '20' },
               '& [data-info]': { paddingBlock: '4' },
               '& [data-panel]': { paddingInline: '20' },
             },
           },
           small: {
             typography: 'label.13.strong',
-            selectors: { '& [data-info]': { paddingBlock: '2' } },
+            selectors: {
+              '& :is([aria-expanded="true"] + [data-group], [aria-expanded="true"] + [data-group] + [data-group]) > [data-divider]::before':
+                { insetInlineStart: '16' },
+              '& [aria-expanded="true"] + [data-panel]::before': { insetInlineStart: '16' },
+              '& [data-info]': { paddingBlock: '2' },
+            },
           },
         },
       },
@@ -492,7 +551,7 @@ namespace styles {
             outlineOffset: '-2',
           },
           '&:disabled, &[aria-disabled="true"]': { cursor: 'default', opacity: 'disabled' },
-          '&[aria-expanded="true"] [data-indicator]': { transform: 'rotate(180deg) !custom' },
+          '&[aria-expanded="true"] [data-indicator]': { transform: 'rotate(90deg) !custom' },
         },
         '@media (prefers-reduced-motion: reduce)': {
           transitionProperty: 'background-color, opacity, outline-color',

package/src/web/vars.ts

@@ -405,6 +405,15 @@ export const variables = Vars.define(
             fontWeight: 400,
             letterSpacing: '0px',
             lineHeight: '18px',
+            // Matches the 500 weight of `label.*.strong` row text, for a Hex value in a row.
+            strong: {
+              fontFamily:
+                '"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+              fontSize: '13px',
+              fontWeight: 500,
+              letterSpacing: '0px',
+              lineHeight: '18px',
+            },
           },
         },
         '14': {

package/src/web/zyzz.config.ts

@@ -32,12 +32,83 @@ export const { style, variants, vars } = Config.create({
   vars: variables,
 })
 
+// Inter's subsets, written by `scripts/subset-fonts.ts`. A browser downloads only the subsets whose
+// `unicodeRange` the page's text uses, and a face declared later takes precedence where ranges
+// overlap, so the order is intentional: `symbols` first and `latin` last, as Google Fonts orders them.
 fontFace({
   fontDisplay: 'swap',
   fontFamily: 'Inter',
   fontStyle: 'normal',
   fontWeight: '100 900',
-  src: "url('../fonts/Inter-Variable.woff2') format('woff2')",
+  src: "url('../fonts/Inter-symbols.woff2') format('woff2')",
+  unicodeRange:
+    'U+02CD-036F,U+0E3F,U+1DC0-1DFF,U+2070-2298,U+2303-232B,U+2380-238B,U+23CE-23CF,U+2423-2468,U+24B6-24EA,U+25A0-26A0,U+2713-2788,U+27EF-27FA,U+2913,U+2A38,U+2B06-2B24,U+2E18,U+A92E,U+E000-E163,U+E1C3-E2DC,U+EE01-EEE1,U+F6C3,U+1F12F-1F16B,U+1F850-1F852',
+})
+
+fontFace({
+  fontDisplay: 'swap',
+  fontFamily: 'Inter',
+  fontStyle: 'normal',
+  fontWeight: '100 900',
+  src: "url('../fonts/Inter-cyrillic-ext.woff2') format('woff2')",
+  unicodeRange: 'U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F',
+})
+
+fontFace({
+  fontDisplay: 'swap',
+  fontFamily: 'Inter',
+  fontStyle: 'normal',
+  fontWeight: '100 900',
+  src: "url('../fonts/Inter-cyrillic.woff2') format('woff2')",
+  unicodeRange: 'U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116',
+})
+
+fontFace({
+  fontDisplay: 'swap',
+  fontFamily: 'Inter',
+  fontStyle: 'normal',
+  fontWeight: '100 900',
+  src: "url('../fonts/Inter-greek-ext.woff2') format('woff2')",
+  unicodeRange: 'U+1F00-1FFF',
+})
+
+fontFace({
+  fontDisplay: 'swap',
+  fontFamily: 'Inter',
+  fontStyle: 'normal',
+  fontWeight: '100 900',
+  src: "url('../fonts/Inter-greek.woff2') format('woff2')",
+  unicodeRange: 'U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF',
+})
+
+fontFace({
+  fontDisplay: 'swap',
+  fontFamily: 'Inter',
+  fontStyle: 'normal',
+  fontWeight: '100 900',
+  src: "url('../fonts/Inter-vietnamese.woff2') format('woff2')",
+  unicodeRange:
+    'U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB',
+})
+
+fontFace({
+  fontDisplay: 'swap',
+  fontFamily: 'Inter',
+  fontStyle: 'normal',
+  fontWeight: '100 900',
+  src: "url('../fonts/Inter-latin-ext.woff2') format('woff2')",
+  unicodeRange:
+    'U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF',
+})
+
+fontFace({
+  fontDisplay: 'swap',
+  fontFamily: 'Inter',
+  fontStyle: 'normal',
+  fontWeight: '100 900',
+  src: "url('../fonts/Inter-latin.woff2') format('woff2')",
+  unicodeRange:
+    'U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD',
 })
 
 fontFace({

package/dist/mobile/internal/useColor.d.ts

@@ -1,4 +0,0 @@
-import type { ColorValue } from 'react-native';
-/** Resolves a compiled style's color for props that take a color instead of a style, such as SVG fills. */
-export declare function useColor(style: Readonly<Record<string, string | number | undefined>> | undefined): ColorValue;
-//# sourceMappingURL=useColor.d.ts.map

package/dist/mobile/internal/useColor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useColor.d.ts","sourceRoot":"","sources":["../../../src/mobile/internal/useColor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAG9C,2GAA2G;AAC3G,wBAAgB,QAAQ,CACtB,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC,GAAG,SAAS,GACvE,UAAU,CAMZ"}

package/dist/mobile/internal/useColor.js

@@ -1,12 +0,0 @@
-import { useStyles } from 'zyzz/react-native';
-/** Resolves a compiled style's color for props that take a color instead of a style, such as SVG fills. */
-export function useColor(style) {
-    const color = useStyles().style(style).color;
-    if (typeof color === 'string')
-        return color;
-    // iOS resolves `system` schemes to dynamic colors, which Zyzz's resolved style type omits.
-    if (color && typeof color === 'object')
-        return color;
-    throw new Error('Expected a compiled style with a color');
-}
-//# sourceMappingURL=useColor.js.map

package/dist/mobile/internal/useColor.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useColor.js","sourceRoot":"","sources":["../../../src/mobile/internal/useColor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAE7C,2GAA2G;AAC3G,MAAM,UAAU,QAAQ,CACtB,KAAwE;IAExE,MAAM,KAAK,GAAY,SAAS,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,KAAK,CAAA;IACrD,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,KAAK,CAAA;IAC3C,2FAA2F;IAC3F,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,KAAmB,CAAA;IAClE,MAAM,IAAI,KAAK,CAAC,wCAAwC,CAAC,CAAA;AAC3D,CAAC"}

package/src/mobile/internal/useColor.ts

@@ -1,13 +0,0 @@
-import type { ColorValue } from 'react-native'
-import { useStyles } from 'zyzz/react-native'
-
-/** Resolves a compiled style's color for props that take a color instead of a style, such as SVG fills. */
-export function useColor(
-  style: Readonly<Record<string, string | number | undefined>> | undefined,
-): ColorValue {
-  const color: unknown = useStyles().style(style).color
-  if (typeof color === 'string') return color
-  // iOS resolves `system` schemes to dynamic colors, which Zyzz's resolved style type omits.
-  if (color && typeof color === 'object') return color as ColorValue
-  throw new Error('Expected a compiled style with a color')
-}