chiplet 0.3.0-dev.3 → 0.3.0-dev.4

package/src/hook/accessibility/keyboard/Keyboard.tsx

@@ -5,6 +5,7 @@ import invariant from 'tiny-invariant'
 import { KeyboardContext } from './context'
 import {
   useLastFocused,
+  useMoveFocus,
   useNavigate,
   usePool,
   type Navigate,
@@ -62,10 +63,14 @@ export function Keyboard(props: KeyboardProps) {
 
   const [isActivated, activate, reset] = useActivate(onActivate)
 
-  const [active, isFocusVisible, navigate] = useNavigate(
+  const [active, isFocusVisible, moveFocus] = useMoveFocus(tree)
+
+  const navigate = useNavigate(
     type,
     direction,
     tree,
+    active,
+    moveFocus,
     (...args) => {
       const target = props.parse?.(...args)
 

package/src/hook/accessibility/keyboard/hook/useMoveFocus.ts

@@ -8,6 +8,8 @@ import {
 import { preferVirtualFocus } from '../resolve'
 import type { Tree } from '../tree'
 
+export type MoveFocus = ReturnType<typeof useMoveFocus>[2]
+
 export function useMoveFocus(tree: Tree) {
   const [active, setActive] = useState<Element | null>(null)
   const [isFocusVisible, setIsFocusVisible] = useState(false)

package/src/hook/accessibility/keyboard/hook/useNavigate.ts

@@ -2,7 +2,7 @@ import { useCallback, useLayoutEffect, useRef } from 'react'
 import type { NavigationDirection, NavigationType } from '..'
 import { resolve, type Parse } from '../resolve'
 import type { Tree } from '../tree'
-import { useMoveFocus } from './useMoveFocus'
+import type { MoveFocus } from './useMoveFocus'
 
 export type NavigateCallback = (
   ev: KeyboardEvent | React.KeyboardEvent,
@@ -10,17 +10,17 @@ export type NavigateCallback = (
   from: Tree.Node | null
 ) => void
 
-export type Navigate = ReturnType<typeof useNavigate>[2]
+export type Navigate = ReturnType<typeof useNavigate>
 
 export function useNavigate(
   type: NavigationType,
   direction: NavigationDirection,
   tree: Tree,
+  active: Tree.Node | null,
+  moveFocus: MoveFocus,
   parse: Parse,
   onNavigate?: NavigateCallback
 ) {
-  const [active, isFocusVisible, moveFocus] = useMoveFocus(tree)
-
   const ref = useRef({
     tree,
     active,
@@ -87,5 +87,5 @@ export function useNavigate(
     }
   })
 
-  return [active, isFocusVisible, navigate] as const
+  return navigate
 }

package/src/hook/accessibility/keyboard/sort.ts

@@ -3,7 +3,7 @@ import { mergeSort } from '#util'
 
 export function sort<T extends TreeNode<Element>>(arr: readonly T[]) {
   return mergeSort(arr, ({ value: a }, { value: b }) => {
-    /* istanbul ignore next -- @preserve */
+    /* istanbul ignore next */
     if (a === b) {
       return 0
     }

package/src/hook/document/useHighlight.ts

@@ -45,7 +45,7 @@ export function useHighlight(
   )
 
   useLayoutEffect(() => {
-    /* istanbul ignore next -- @preserve */
+    /* istanbul ignore next */
     if (typeof Highlight !== 'function') return
 
     const el = refValue(ref)
@@ -76,29 +76,3 @@ export function useHighlight(
 
   return highlight
 }
-
-declare global {
-  /**
-   * https://developer.mozilla.org/en-US/docs/Web/API/Highlight
-   */
-  interface Highlight {
-    readonly size: number
-    add(range: Range): this
-    clear(): void
-    delete(range: Range): boolean
-    entries(): IterableIterator<[Range, Range]>
-    has(range: Range): boolean
-    keys(): IterableIterator<Range>
-    values(): IterableIterator<Range>
-  }
-
-  /**
-   * https://developer.mozilla.org/en-US/docs/Web/API/HighlightRegistry
-   */
-  interface HighlightRegistry {
-    readonly size: number
-    delete(name: string): boolean
-    set(name: string, highlight: Highlight): this
-    values(): IterableIterator<Highlight>
-  }
-}

package/src/hook/form/useAutoComplete.ts

@@ -194,7 +194,7 @@ export function useAutoComplete<
         (ev) => {
           onBlur?.(ev)
 
-          /* istanbul ignore else -- @preserve */
+          /* istanbul ignore else */
           if (!ev.defaultPrevented) {
             setState({
               query: undefined,
@@ -228,7 +228,7 @@ export function useAutoComplete<
 
           const value = args[0].context.value
 
-          /* istanbul ignore next -- @preserve */
+          /* istanbul ignore next */
           if (typeof value !== 'string') return
 
           const label = options?.find((option) => option.value === value)?.label
@@ -269,7 +269,7 @@ export function useAutoComplete<
 
       if (query != null) return query
 
-      /* istanbul ignore next -- @preserve */
+      /* istanbul ignore next */
       if (multiple) return ''
 
       if (value === undefined) return ''

package/src/hook/form/useDefault.ts

@@ -90,6 +90,7 @@ export function useDefault<E extends Partial<Event>, T, U extends T>(
   const isControlled = useConst(() => props.value !== undefined)
 
   invariant(
+    /* istanbul ignore next */
     process.env.NODE_ENV === 'production' ||
       isControlled === (props.value !== undefined),
     isControlled
@@ -119,6 +120,7 @@ export function useDefault<E extends Partial<Event>, T, U extends T>(
 
   const onChange = useCallback<ChangeCallback<E, V>>((ev, value, hint) => {
     invariant(
+      /* istanbul ignore next */
       process.env.NODE_ENV === 'production' || ref.current.isMounted,
       'Cannot call `onChange` within the `useLayoutEffect` hook of a child component, as the parent component has not been mounted yet.'
     )

package/src/hook/form/useForm.ts

@@ -1,6 +1,6 @@
 import { createElement, useMemo, type PropsWithChildren } from 'react'
-import { FormContext } from './context'
 import { useDefault, type ChangeCallback } from '.'
+import { FormContext } from './context'
 
 interface Props<T extends object> extends PropsWithChildren {
   defaultValue?: T | undefined
@@ -21,7 +21,7 @@ export function useForm<P extends Props<{}>>(props: P) {
   )
 
   let { children } = props
-  children = createElement(FormContext, { value: context }, props.children)
+  children = createElement(FormContext, { value: context }, children)
 
   props = {
     ...props,

package/src/hook/popover/useLightDismiss.ts

@@ -136,6 +136,6 @@ function isInside(ev: MouseEvent | React.MouseEvent) {
 
   const { clientX: x, clientY: y } = ev
 
-  /* istanbul ignore next -- @preserve */
+  /* istanbul ignore next */
   return x >= left && x <= right && y >= top && y <= bottom
 }

package/src/hook/popover/usePopover.ts

@@ -58,7 +58,7 @@ export function usePopover<T extends React.HTMLElementType = 'div'>(
 
   let anchorProps: OverlayAnchorProps = { ...anchor?.props }
   let positionedProps: React.JSX.IntrinsicElements[T] = { ...props }
-  let keyboardProps: KeyboardProps = {}
+  let keyboardProps: KeyboardProps
 
   {
     const _id = useUniqueId('popover-')
@@ -103,7 +103,11 @@ export function usePopover<T extends React.HTMLElementType = 'div'>(
       const { anchor, positioned }: Overlay<HTMLElement> = overlay
 
       if (positioned && overlay.open && !positioned.matches(':popover-open')) {
-        positioned.showPopover({ source: source || anchor || undefined })
+        const _source = source || anchor
+
+        positioned.showPopover(
+          _source instanceof HTMLElement ? { source: _source } : undefined
+        )
       }
     })
 
@@ -178,13 +182,3 @@ export function usePopover<T extends React.HTMLElementType = 'div'>(
     keyboard: { props: keyboardProps },
   }
 }
-
-declare global {
-  interface ShowPopoverOptions {
-    source?: Element | undefined
-  }
-
-  interface HTMLElement {
-    showPopover(options?: ShowPopoverOptions): void
-  }
-}

package/src/hook/popover/useTooltip.ts

@@ -48,7 +48,7 @@ export function useTooltip(options: TooltipOptions) {
 
   let anchorProps: OverlayAnchorProps = { ...anchor?.props }
   let positionedProps: React.JSX.IntrinsicElements[TooltipTag] = { ...props }
-  let arrowProps: React.ComponentProps<'div'> = {}
+  let arrowProps: React.ComponentProps<'div'>
 
   const _id = useUniqueId('tooltip-')
   positionedProps.id ||= _id
@@ -237,6 +237,7 @@ export function useTooltip(options: TooltipOptions) {
     ref: positionedRef,
   }
 
+  // eslint-disable-next-line prefer-const
   arrowProps = {
     style: {
       ...positioning.arrowStyle,

package/src/hook/react/useActivate.ts

@@ -59,7 +59,7 @@ export function useActivate(onActivate?: ActivateCallback) {
         ref.current.onActivate?.(ev, target)
 
         if (!ev.defaultPrevented) {
-          /* istanbul ignore next -- @preserve */
+          /* istanbul ignore next */
           const init: MouseEventInit = ev instanceof Event ? ev : ev.nativeEvent
           target.dispatchEvent(new MouseEvent('click', init))
           ev.preventDefault()

package/src/hook/react/useUniqueId.ts

@@ -1,8 +1,8 @@
-import { createUniqueId } from '#util'
+import { generateUniqueId } from '#util'
 import { useConst } from './useConst'
 
 export function useUniqueId(prefix?: string, suffix?: string) {
   return useConst(() => {
-    return createUniqueId(prefix, suffix)
+    return generateUniqueId(prefix, suffix)
   })
 }

package/src/infra/logging/logger.ts

@@ -6,6 +6,7 @@ import {
   type Attributes,
   type AttributeValue,
   type MetricOptions,
+  type Span,
 } from '@opentelemetry/api'
 import { logs, SeverityNumber } from '@opentelemetry/api-logs'
 import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'
@@ -51,8 +52,11 @@ import {
 } from '@opentelemetry/semantic-conventions/incubating'
 import { compact, isError } from 'lodash-es'
 
-export { SpanStatusCode } from '@opentelemetry/api'
-export { type Attributes, type AttributeValue } from '@opentelemetry/api'
+export {
+  SpanStatusCode,
+  type Attributes,
+  type AttributeValue,
+} from '@opentelemetry/api'
 export { SeverityNumber } from '@opentelemetry/api-logs'
 export { resourceFromAttributes } from '@opentelemetry/resources'
 export * from '@opentelemetry/semantic-conventions'
@@ -197,7 +201,7 @@ class Logger {
 
     this.#tracerProvider.register()
 
-    /* istanbul ignore next -- @preserve */
+    /* istanbul ignore next */
     if (typeof window !== 'undefined') {
       this.#unregister = registerInstrumentations({
         instrumentations: [
@@ -341,19 +345,28 @@ class Logger {
   //#endregion
 
   //#region tracer
-  span(name: string, attributes?: Attributes) {
-    return this.#tracer.startSpan(name, {
-      attributes: {
-        ...this.#attributes,
-        ...attributes,
-      },
-    })
-  }
+  span(name: string, attributes?: Attributes | undefined): Span
 
-  mark<T extends (...args: readonly never[]) => Promise<unknown>>(
+  span<T extends (...args: readonly never[]) => Promise<unknown>>(
     name: string,
     operation: T
+  ): T
+
+  span<T extends (...args: readonly never[]) => Promise<unknown>>(
+    name: string,
+    attributes?: Attributes | T
   ) {
+    if (typeof attributes !== 'function') {
+      return this.#tracer.startSpan(name, {
+        attributes: {
+          ...this.#attributes,
+          ...attributes,
+        },
+      })
+    }
+
+    const operation = attributes
+
     return ((...args) => {
       return this.#tracer.startActiveSpan(name, async (span) => {
         const startTime = performance.now()
@@ -364,7 +377,7 @@ class Logger {
         } catch (err) {
           status = SpanStatusCode.ERROR
 
-          /* istanbul ignore else -- @preserve */
+          /* istanbul ignore else */
           if (isError(err) || typeof err === 'string') span.recordException(err)
 
           throw err

package/src/theme/global.css.ts

@@ -1,5 +1,5 @@
 import {
-  createUniqueId,
+  generateDeterministicId,
   VirtualActiveSelector,
   VirtualDisabledSelector,
   VirtualFocusSelector,
@@ -15,7 +15,7 @@ import { tokenClass } from './token.css'
 
 export const radiusVar = createVar()
 
-export const HighlightName = createUniqueId('highlight-')
+export const HighlightName = generateDeterministicId('highlight-')
 
 export const FocusSelector = `:where(:focus-visible, ${VirtualFocusSelector})`
 

package/src/theme/theme.css.ts

@@ -258,8 +258,8 @@ export const [themeClass, theme] = createTheme({
   },
 
   checkbox: {
+    outset: gap,
     size: token.sizing.width,
-    margin: gap,
     color: palette.neutral.foreground4,
     colorHover: palette.neutral.foreground1,
     colorActive: palette.neutral.foreground4,
@@ -324,8 +324,6 @@ export const [themeClass, theme] = createTheme({
   tooltip: {
     minHeight: token.sizing.height.medium,
     padding: token.spacing.padding.small,
-    fontSize: token.typography.body2.fontSize,
-    lineHeight: token.typography.body2.lineHeight,
     color: colorInverted,
     background: backgroundInverted,
     border: 'none',
@@ -346,8 +344,6 @@ export const [themeClass, theme] = createTheme({
     gap: token.spacing.gap.small,
     height: token.sizing.height.small,
     padding: token.spacing.padding.medium,
-    fontSize: token.typography.body2.fontSize,
-    lineHeight: token.typography.body2.lineHeight,
     radius,
     icon: token.sizing.width.small,
   },

package/src/util/document/accessibility.css.ts

@@ -1,8 +1,8 @@
-import { createUniqueId } from '../random'
+import { generateDeterministicId } from '../random'
 
-export const VirtualFocus = createUniqueId('data-focus-visible-')
+export const VirtualFocus = generateDeterministicId('data-focus-visible-')
 export const VirtualFocusSelector = `[${VirtualFocus}="true"]` as const
-export const VirtualActive = createUniqueId('data-active-')
+export const VirtualActive = generateDeterministicId('data-active-')
 export const VirtualActiveSelector = `[${VirtualActive}="true"]` as const
 export const VirtualDisabled = 'aria-disabled'
 export const VirtualDisabledSelector = '[aria-disabled="true"]'

package/src/util/random/generateDeterministicId.ts

@@ -0,0 +1,10 @@
+/* istanbul ignore file */
+import { generateIdentifier } from '@vanilla-extract/css'
+
+export function generateDeterministicId<P extends string>(prefix: P) {
+  return (prefix +
+    generateIdentifier({
+      debugId: '',
+      debugFileName: false,
+    })) as `${P}${string}`
+}

package/src/util/random/generateDigest.ts

@@ -0,0 +1,11 @@
+import { toHex } from './toHex'
+
+export async function generateDigest(message: string) {
+  const encoder = new TextEncoder()
+
+  const buffer = encoder.encode(message)
+
+  const hash = await crypto.subtle.digest('SHA-256', buffer)
+
+  return toHex(new Uint8Array(hash))
+}

package/src/util/random/{createUniqueId.ts → generateUniqueId.ts}

@@ -1,12 +1,10 @@
-export function createUniqueId<
+import { toHex } from './toHex'
+
+export function generateUniqueId<
   P extends string | undefined = '',
   S extends string | undefined = '',
 >(prefix: P = '' as P, suffix: S = '' as S) {
-  const val = crypto
-    .getRandomValues(new Uint8Array(4))
-    .reduce((acc, byte) => acc + byte.toString(16).padStart(2, '0'), '')
-
   return (prefix +
-    val +
+    toHex(crypto.getRandomValues(new Uint8Array(4))) +
     suffix) as `${NoInfer<P extends string ? P : ''>}${string}${NoInfer<S extends string ? S : ''>}`
 }

package/src/util/random/index.ts

@@ -1,2 +1,5 @@
+export * from './generateDeterministicId'
+export * from './generateDigest'
+export * from './generateUniqueId'
+export * from './toHex'
 export * from './UUID'
-export * from './createUniqueId'

package/src/util/random/toHex.ts

@@ -0,0 +1,6 @@
+export function toHex(bytes: Uint8Array) {
+  return bytes.reduce(
+    (acc, byte) => acc + byte.toString(16).padStart(2, '0'),
+    ''
+  )
+}

package/dist/util/random/createUniqueId.js

@@ -1,8 +0,0 @@
-'use strict';
-function createUniqueId(prefix = "", suffix = "") {
-  const val = crypto.getRandomValues(new Uint8Array(4)).reduce((acc, byte) => acc + byte.toString(16).padStart(2, "0"), "");
-  return prefix + val + suffix;
-}
-
-export { createUniqueId };
-//# sourceMappingURL=createUniqueId.js.map

package/dist/util/random/createUniqueId.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"createUniqueId.js","sources":["../../../src/util/random/createUniqueId.ts"],"sourcesContent":["export function createUniqueId<\n  P extends string | undefined = '',\n  S extends string | undefined = '',\n>(prefix: P = '' as P, suffix: S = '' as S) {\n  const val = crypto\n    .getRandomValues(new Uint8Array(4))\n    .reduce((acc, byte) => acc + byte.toString(16).padStart(2, '0'), '')\n\n  return (prefix +\n    val +\n    suffix) as `${NoInfer<P extends string ? P : ''>}${string}${NoInfer<S extends string ? S : ''>}`\n}\n"],"names":[],"mappings":";AAAO,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAGd,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAY,EAAA,CAAA,CAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAY,CAAA,CAAA,CAAA,CAAS;AAC1C,CAAA,CAAA,MAAM,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,CAAA,CAAA,CAAA,CAAA,CAAA,EACT,eAAA,CAAgB,CAAA,CAAA,CAAA,CAAI,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAW,CAAC,CAAC,EACjC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,CAAC,CAAA,CAAA,GAAK,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,GAAA,CAAA,CAAA,CAAM,CAAA,CAAA,CAAA,EAAK,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAA,CAAE,EAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAA,CAAA,CAAG,GAAG,CAAA,CAAA,CAAG,EAAE,CAAA;AAErE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQ,CAAA,CAAA,CAAA,CAAA,CAAA,IACN,CAAA,CAAA,CAAA,GACA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AACJ;;"}

package/src/component/style/font/font.css

@@ -1,23 +0,0 @@
-@font-face {
-  font-family: 'Proxima Nova';
-  font-weight: 300;
-  src: url('./proxima-nova-light.woff') format('woff');
-}
-
-@font-face {
-  font-family: 'Proxima Nova';
-  font-weight: 400;
-  src: url('./proxima-nova-regular.woff') format('woff');
-}
-
-@font-face {
-  font-family: 'Proxima Nova';
-  font-weight: 600;
-  src: url('./proxima-nova-semibold.woff') format('woff');
-}
-
-@font-face {
-  font-family: 'Proxima Nova';
-  font-weight: 700;
-  src: url('./proxima-nova-bold.woff') format('woff');
-}