zyzz 0.0.33 → 0.0.35

package/src/base-ui/react/internal/Attributes.generated.ts

@@ -0,0 +1,403 @@
+/**
+ * Generated by scripts/base-ui.ts. Do not edit.
+ * @module
+ */
+
+/** Attribute spellings and domains for untransformed authoring. Component validation belongs to types and source extraction. */
+export const attributes = {
+  activationDirection: {
+    attribute: 'data-activation-direction',
+    presence: false,
+    values: [
+      ' ',
+      ' up',
+      ' down',
+      'left ',
+      'left up',
+      'left down',
+      'right ',
+      'right up',
+      'right down',
+      'left',
+      'right',
+      'up',
+      'down',
+      'none',
+    ],
+  },
+  active: {
+    attribute: 'data-active',
+    presence: true,
+    values: [],
+  },
+  align: {
+    attribute: 'data-align',
+    presence: false,
+    values: ['center', 'start', 'end'],
+  },
+  anchorHidden: {
+    attribute: 'data-anchor-hidden',
+    presence: true,
+    values: [],
+  },
+  behind: {
+    attribute: 'data-behind',
+    presence: true,
+    values: [],
+  },
+  checked: {
+    attribute: 'data-checked',
+    presence: true,
+    values: [],
+  },
+  closed: {
+    attribute: 'data-closed',
+    presence: true,
+    values: [],
+  },
+  complete: {
+    attribute: 'data-complete',
+    presence: true,
+    values: [],
+  },
+  current: {
+    attribute: 'data-current',
+    presence: true,
+    selector: '& > [data-current]',
+    values: [],
+  },
+  direction: {
+    attribute: 'data-direction',
+    presence: false,
+    values: ['down', 'up'],
+  },
+  dirty: {
+    attribute: 'data-dirty',
+    presence: true,
+    values: [],
+  },
+  disabled: {
+    attribute: 'data-disabled',
+    presence: true,
+    values: [],
+  },
+  dragging: {
+    attribute: 'data-dragging',
+    presence: true,
+    values: [],
+  },
+  empty: {
+    attribute: 'data-empty',
+    presence: true,
+    values: [],
+  },
+  endingStyle: {
+    attribute: 'data-ending-style',
+    presence: true,
+    values: [],
+  },
+  error: {
+    attribute: 'data-error',
+    presence: true,
+    values: [],
+  },
+  expanded: {
+    attribute: 'data-expanded',
+    presence: true,
+    values: [],
+  },
+  filled: {
+    attribute: 'data-filled',
+    presence: true,
+    values: [],
+  },
+  focusable: {
+    attribute: 'data-focusable',
+    presence: true,
+    values: [],
+  },
+  focused: {
+    attribute: 'data-focused',
+    presence: true,
+    values: [],
+  },
+  hasOverflowX: {
+    attribute: 'data-has-overflow-x',
+    presence: true,
+    values: [],
+  },
+  hasOverflowY: {
+    attribute: 'data-has-overflow-y',
+    presence: true,
+    values: [],
+  },
+  hasSubmenuOpen: {
+    attribute: 'data-has-submenu-open',
+    presence: true,
+    values: [],
+  },
+  hidden: {
+    attribute: 'data-hidden',
+    presence: true,
+    values: [],
+  },
+  highlighted: {
+    attribute: 'data-highlighted',
+    presence: true,
+    values: [],
+  },
+  hovering: {
+    attribute: 'data-hovering',
+    presence: true,
+    values: [],
+  },
+  inactive: {
+    attribute: 'data-inactive',
+    presence: true,
+    values: [],
+  },
+  indeterminate: {
+    attribute: 'data-indeterminate',
+    presence: true,
+    values: [],
+  },
+  index: {
+    attribute: 'data-index',
+    presence: false,
+    values: [],
+    domain: 'number',
+  },
+  instant: {
+    attribute: 'data-instant',
+    presence: true,
+    values: [
+      'click',
+      'dismiss',
+      'group',
+      'trigger-change',
+      'focus',
+      'delay',
+      'tracking-cursor',
+    ],
+  },
+  invalid: {
+    attribute: 'data-invalid',
+    presence: true,
+    values: [],
+  },
+  limited: {
+    attribute: 'data-limited',
+    presence: true,
+    values: [],
+  },
+  listEmpty: {
+    attribute: 'data-list-empty',
+    presence: true,
+    values: [],
+  },
+  loading: {
+    attribute: 'data-loading',
+    presence: true,
+    values: [],
+  },
+  modal: {
+    attribute: 'data-modal',
+    presence: true,
+    values: [],
+  },
+  multiple: {
+    attribute: 'data-multiple',
+    presence: true,
+    values: [],
+  },
+  nested: {
+    attribute: 'data-nested',
+    presence: true,
+    values: [],
+  },
+  nestedDialogOpen: {
+    attribute: 'data-nested-dialog-open',
+    presence: true,
+    values: [],
+  },
+  nestedDrawerOpen: {
+    attribute: 'data-nested-drawer-open',
+    presence: true,
+    values: [],
+  },
+  nestedDrawerSwiping: {
+    attribute: 'data-nested-drawer-swiping',
+    presence: true,
+    values: [],
+  },
+  open: {
+    attribute: 'data-open',
+    presence: true,
+    values: [],
+  },
+  orientation: {
+    attribute: 'data-orientation',
+    presence: false,
+    values: ['horizontal', 'vertical'],
+  },
+  overflowXEnd: {
+    attribute: 'data-overflow-x-end',
+    presence: true,
+    values: [],
+  },
+  overflowXStart: {
+    attribute: 'data-overflow-x-start',
+    presence: true,
+    values: [],
+  },
+  overflowYEnd: {
+    attribute: 'data-overflow-y-end',
+    presence: true,
+    values: [],
+  },
+  overflowYStart: {
+    attribute: 'data-overflow-y-start',
+    presence: true,
+    values: [],
+  },
+  panelOpen: {
+    attribute: 'data-panel-open',
+    presence: true,
+    values: [],
+  },
+  placeholder: {
+    attribute: 'data-placeholder',
+    presence: true,
+    values: [],
+  },
+  popupOpen: {
+    attribute: 'data-popup-open',
+    presence: true,
+    values: [],
+  },
+  popupSide: {
+    attribute: 'data-popup-side',
+    presence: false,
+    values: ['top', 'bottom', 'left', 'right', 'inline-end', 'inline-start'],
+  },
+  pressed: {
+    attribute: 'data-pressed',
+    presence: true,
+    values: [],
+  },
+  previous: {
+    attribute: 'data-previous',
+    presence: true,
+    selector: '& > [data-previous]',
+    values: [],
+  },
+  progressing: {
+    attribute: 'data-progressing',
+    presence: true,
+    values: [],
+  },
+  readonly: {
+    attribute: 'data-readonly',
+    presence: true,
+    values: [],
+  },
+  readOnly: {
+    attribute: 'data-readonly',
+    presence: true,
+    values: [],
+  },
+  required: {
+    attribute: 'data-required',
+    presence: true,
+    values: [],
+  },
+  scrolling: {
+    attribute: 'data-scrolling',
+    presence: true,
+    values: [],
+  },
+  scrubbing: {
+    attribute: 'data-scrubbing',
+    presence: true,
+    values: [],
+  },
+  selected: {
+    attribute: 'data-selected',
+    presence: true,
+    values: [],
+  },
+  side: {
+    attribute: 'data-side',
+    presence: false,
+    values: [
+      'top',
+      'bottom',
+      'left',
+      'right',
+      'inline-end',
+      'inline-start',
+      'none',
+    ],
+  },
+  startingStyle: {
+    attribute: 'data-starting-style',
+    presence: true,
+    values: [],
+  },
+  swipeDirection: {
+    attribute: 'data-swipe-direction',
+    presence: false,
+    values: ['left', 'right', 'up', 'down'],
+  },
+  swipeDismiss: {
+    attribute: 'data-swipe-dismiss',
+    presence: true,
+    values: [],
+  },
+  swiping: {
+    attribute: 'data-swiping',
+    presence: true,
+    values: [],
+  },
+  touched: {
+    attribute: 'data-touched',
+    presence: true,
+    values: [],
+  },
+  transitioning: {
+    attribute: 'data-transitioning',
+    presence: true,
+    values: [],
+  },
+  triggerDisabled: {
+    attribute: 'data-trigger-disabled',
+    presence: true,
+    values: [],
+  },
+  type: {
+    attribute: 'data-type',
+    presence: false,
+    values: [],
+    domain: 'string',
+  },
+  uncentered: {
+    attribute: 'data-uncentered',
+    presence: true,
+    values: [],
+  },
+  unchecked: {
+    attribute: 'data-unchecked',
+    presence: true,
+    values: [],
+  },
+  valid: {
+    attribute: 'data-valid',
+    presence: true,
+    values: [],
+  },
+  visible: {
+    attribute: 'data-visible',
+    presence: true,
+    values: [],
+  },
+} as const

package/src/base-ui/react/internal/Authoring.ts

@@ -0,0 +1,173 @@
+/** Expands documented Base UI states for untransformed web authoring. @module */
+import * as Attributes from './Attributes.generated.js'
+import * as Style from '../../../Style.js'
+import type { style } from '../../../styleFunction.js'
+import * as Token from '../../../internal/Token.js'
+
+type Attribute = {
+  readonly attribute: string
+  readonly domain?: 'number' | 'string'
+  readonly presence: boolean
+  readonly selector?: string
+  readonly values: readonly string[]
+}
+
+// Matches css::string::encode so CSS-only identities agree with the compiler.
+function quote(value: string): string {
+  let result = '"'
+  let spaceBeforeHex = false
+
+  for (const code of value) {
+    const point = code.codePointAt(0)!
+    if (point === 0)
+      throw new Style.InvalidError([
+        {
+          code: 'invalid_structure',
+          message: 'Base UI state values cannot contain NUL.',
+          path: [],
+        },
+      ])
+
+    if (point <= 0x1f || point === 0x7f) {
+      result += `\\${point.toString(16)}`
+      spaceBeforeHex = true
+    } else if (code === '"' || code === '\\') {
+      result += `\\${code}`
+      spaceBeforeHex = false
+    } else {
+      if (spaceBeforeHex && /[\da-fA-F\t\n\f\r ]/u.test(code)) result += ' '
+      result += code
+      spaceBeforeHex = false
+    }
+  }
+
+  return `${result}"`
+}
+
+function record(value: unknown): Record<string, unknown> {
+  if (!value || typeof value !== 'object' || Array.isArray(value))
+    throw new Style.InvalidError([
+      {
+        code: 'invalid_structure',
+        message: 'Base UI styles require static object bodies.',
+        path: [],
+      },
+    ])
+
+  return value as Record<string, unknown>
+}
+
+function lower(input: unknown, depth = 0): Record<string, unknown> {
+  if (depth > 64)
+    throw new Style.InvalidError([
+      {
+        code: 'invalid_structure',
+        message: 'Base UI style nesting exceeds 64 levels.',
+        path: [],
+      },
+    ])
+
+  const result: Record<string, unknown> = {}
+  const insert = (selector: string, value: unknown) => {
+    let key = selector
+    let occurrence = 1
+    // Distinct condition entries retain their position without changing specificity.
+    while (Object.hasOwn(result, key))
+      key = `${selector}/*base-ui-${occurrence++}*/`
+
+    result[key] = lower(value, depth + 1)
+  }
+
+  for (const [key, value] of Object.entries(record(input))) {
+    if (key === 'states') {
+      for (const [name, body] of Object.entries(record(value))) {
+        const attribute = (
+          Attributes.attributes as Readonly<Record<string, Attribute>>
+        )[name]
+        if (!attribute)
+          throw new Style.InvalidError([
+            {
+              code: 'invalid_structure',
+              message: `Unknown Base UI state: ${name}.`,
+              path: ['states', name],
+            },
+          ])
+
+        const choices = Object.entries(record(body))
+        // A few parts expose presence-only `instant`, others expose a finite value.
+        // A shorthand can share a value key, but its scalar/token is not a declaration body.
+        // The compiler checks the component-specific domain.
+        if (
+          attribute.presence &&
+          !choices.some(
+            (entry) =>
+              attribute.values.includes(entry[0]) &&
+              entry[1] !== null &&
+              typeof entry[1] === 'object' &&
+              !Array.isArray(entry[1]) &&
+              !Token.is(entry[1]) &&
+              !Token.isExpression(entry[1]),
+          )
+        ) {
+          insert(attribute.selector ?? `&[${attribute.attribute}]`, body)
+          continue
+        }
+
+        for (const [choice, declarations] of choices) {
+          if (
+            attribute.domain === 'number'
+              ? !Number.isFinite(Number(choice)) ||
+                String(Number(choice)) !== choice
+              : attribute.domain !== 'string' &&
+                !attribute.values.includes(choice)
+          )
+            throw new Style.InvalidError([
+              {
+                code: 'invalid_structure',
+                message: `Unknown Base UI state value: ${name}.${choice}.`,
+                path: ['states', name, choice],
+              },
+            ])
+
+          insert(`&[${attribute.attribute}=${quote(choice)}]`, declarations)
+        }
+      }
+    } else if (key === 'selectors') {
+      for (const [selector, declarations] of Object.entries(record(value)))
+        insert(selector, declarations)
+    } else if (key.startsWith('@') || key.startsWith(':') || key.includes('&'))
+      insert(key, value)
+    else if (key === 'targets') {
+      const targets = record(value)
+      result[key] = Object.fromEntries(
+        Object.entries(targets).map((entry) => [
+          entry[0],
+          entry[0] === 'web' ? lower(entry[1], depth + 1) : entry[1],
+        ]),
+      )
+    } else result[key] = value
+  }
+
+  return result
+}
+
+/** Adds component-first static authoring without loading or registering components. */
+export function bind(factory: bind.Factory): bind.Factory {
+  return (...args) => {
+    const first = args[0]
+    const component =
+      args.length >= 2 &&
+      first !== null &&
+      typeof first === 'object' &&
+      '$$typeof' in first
+    if (!component) return factory(...args)
+
+    return factory(lower(args[1]), args[2])
+  }
+}
+
+/** Runtime callable boundary. Public authoring retains its overloads separately. */
+export declare namespace bind {
+  /** Style implementation accepting the existing authoring arguments. */
+  type Factory = (...args: readonly unknown[]) => style.ReturnType<style.Output>
+}