chiplet 0.3.0-dev.3 → 0.3.0

package/src/component/select/Group.tsx

@@ -1,6 +1,7 @@
 import { useUniqueId } from '#hook'
 import clsx from 'clsx'
 import {
+  GroupHeaderStyle,
   GroupLabelStyle,
   GroupNestedListStyle,
   GroupStyle,
@@ -17,6 +18,7 @@ export interface GroupProps
   label?: string | undefined
   slot?: {
     root?: React.ComponentProps<'li'> | undefined
+    header?: React.ComponentProps<'div'> | undefined
     label?: React.ComponentProps<'div'> | undefined
     nested?: React.ComponentProps<'ul'> | undefined
   }
@@ -39,11 +41,17 @@ export function Group(props: GroupProps) {
     >
       {label != null && (
         <div
-          {...labelProps}
-          className={clsx(GroupLabelStyle, labelProps.className)}
+          {...slot?.header}
+          className={clsx(GroupHeaderStyle, slot?.header?.className)}
           role='none'
         >
-          {label}
+          <div
+            {...labelProps}
+            className={clsx(GroupLabelStyle, labelProps.className)}
+            role='none'
+          >
+            {label}
+          </div>
         </div>
       )}
 

package/src/component/select/Option.tsx

@@ -24,8 +24,7 @@ export interface OptionProps<T extends OptionValue> extends Omit<
   multiple?: never
   disabled?: boolean | undefined
   onChange?:
-    | ChangeCallback<React.MouseEvent<HTMLLIElement>, boolean>
-    | undefined
+    ChangeCallback<React.MouseEvent<HTMLLIElement>, boolean> | undefined
   slot?: {
     root?: React.ComponentProps<'li'> | undefined
     icon?: React.ComponentProps<'svg'> | undefined

package/src/component/select/style/index.css.ts

@@ -2,6 +2,8 @@ import {
   ActiveSelector,
   DisabledSelector,
   HighlightName,
+  radiusVar,
+  SquircleStyle,
   theme,
   TRANSPARENT,
 } from '#theme'
@@ -10,7 +12,6 @@ import { recipe } from '@vanilla-extract/recipes'
 
 const gap = createVar()
 const width = createVar()
-const height = createVar()
 const padding = createVar()
 const paddingBlock = createVar()
 const paddingInline = createVar()
@@ -18,8 +19,6 @@ const margin = createVar()
 const marginBlock = createVar()
 const marginInline = createVar()
 const font = createVar()
-const fontSize = createVar()
-const lineHeight = createVar()
 const icon = createVar()
 const color = createVar()
 const colorChecked = createVar()
@@ -32,10 +31,10 @@ const backgroundActive = createVar()
 const backgroundDisabled = createVar()
 const border = createVar()
 const borderSize = createVar()
-const radius = createVar()
 
 const gridTemplate = "'a b c' / auto 1fr auto"
 const gridColumn = 'span 3'
+const paddingBlockValue = `calc((${theme.item.height} - 1lh) / 2)`
 
 export const ListStyle = style({
   vars: {
@@ -52,6 +51,8 @@ export const ListStyle = style({
   padding,
   margin: '0',
   overflow: 'auto',
+  scrollSnapType: 'both mandatory',
+  scrollPadding: padding,
   selectors: {
     [`&::highlight(${HighlightName})`]: {
       textDecorationLine: 'underline',
@@ -60,59 +61,57 @@ export const ListStyle = style({
 })
 
 export const ItemStyle = recipe({
-  base: {
-    vars: {
-      [gap]: theme.item.gap,
-      [height]: theme.item.height,
-      [padding]: `${paddingBlock} ${paddingInline}`,
-      [paddingBlock]: `calc((${height} - ${lineHeight}) / 2)`,
-      [paddingInline]: theme.item.padding,
-      [fontSize]: theme.item.fontSize,
-      [lineHeight]: theme.item.lineHeight,
-      [icon]: theme.item.icon,
-      [color]: 'inherit',
-      [colorDisabled]: theme.disabled.color,
-      [cursor]: 'pointer',
-      [cursorDisabled]: 'not-allowed',
-      [background]: 'none',
-      [backgroundHover]: theme.hover.background,
-      [backgroundActive]: theme.active.background,
-      [backgroundDisabled]: 'none',
-      [radius]: theme.item.radius,
-    },
-    display: 'grid',
-    gridTemplateRows: 'subgrid',
-    gridTemplateColumns: 'subgrid',
-    gridColumn,
-    gap,
-    placeItems: 'start',
-    padding,
-    fontSize,
-    lineHeight,
-    color,
-    cursor,
-    background,
-    borderRadius: radius,
-    ':hover': {
+  base: [
+    SquircleStyle,
+    {
       vars: {
-        [background]: backgroundHover,
+        [gap]: theme.item.gap,
+        [padding]: `${paddingBlock} ${paddingInline}`,
+        [paddingBlock]: paddingBlockValue,
+        [paddingInline]: theme.item.padding,
+        [icon]: theme.item.icon,
+        [color]: 'inherit',
+        [colorDisabled]: theme.disabled.color,
+        [cursor]: 'pointer',
+        [cursorDisabled]: 'not-allowed',
+        [background]: 'none',
+        [backgroundHover]: theme.hover.background,
+        [backgroundActive]: theme.active.background,
+        [backgroundDisabled]: 'none',
+        [radiusVar]: theme.item.radius,
       },
-    },
-    selectors: {
-      [`&${ActiveSelector}`]: {
+      display: 'grid',
+      gridTemplateRows: 'subgrid',
+      gridTemplateColumns: 'subgrid',
+      gridColumn,
+      gap,
+      placeItems: 'start',
+      padding,
+      color,
+      cursor,
+      scrollSnapAlign: 'center',
+      background,
+      ':hover': {
         vars: {
-          [background]: backgroundActive,
+          [background]: backgroundHover,
         },
       },
-      [`&${DisabledSelector}`]: {
-        vars: {
-          [color]: colorDisabled,
-          [cursor]: cursorDisabled,
-          [background]: backgroundDisabled,
+      selectors: {
+        [`&${ActiveSelector}`]: {
+          vars: {
+            [background]: backgroundActive,
+          },
+        },
+        [`&${DisabledSelector}`]: {
+          vars: {
+            [color]: colorDisabled,
+            [cursor]: cursorDisabled,
+            [background]: backgroundDisabled,
+          },
         },
       },
     },
-  },
+  ],
   variants: {
     danger: {
       true: {
@@ -148,7 +147,7 @@ export const ItemAfterStyle = style({
 
 export const ItemIconStyle = style({
   vars: {
-    [marginBlock]: `calc((${lineHeight} - ${icon}) / 2)`,
+    [marginBlock]: `calc((1lh - ${icon}) / 2)`,
     [color]: TRANSPARENT,
     [colorChecked]: 'inherit',
   },
@@ -168,7 +167,7 @@ export const ItemIconStyle = style({
 export const SeparatorStyle = style({
   vars: {
     [margin]: `${marginBlock} ${marginInline}`,
-    [marginBlock]: `calc((${theme.item.height} - ${theme.item.lineHeight}) / 2)`,
+    [marginBlock]: paddingBlockValue,
     [marginInline]: '0',
     [color]: theme.separator.color,
     [border]: `${borderSize} solid`,
@@ -189,18 +188,25 @@ export const GroupStyle = style({
   gap: 'inherit',
 })
 
-export const GroupLabelStyle = style({
+export const GroupHeaderStyle = style({
   vars: {
     [padding]: `${paddingBlock} ${paddingInline}`,
-    [paddingBlock]: `calc((${theme.item.height} - ${theme.item.lineHeight}) / 2)`,
+    [paddingBlock]: paddingBlockValue,
     [paddingInline]: theme.item.padding,
     [font]: theme.group.font,
     [color]: theme.group.color,
   },
   position: 'sticky',
   insetBlockStart: '0',
+  display: 'grid',
+  gridTemplateColumns: 'subgrid',
   gridColumn,
+  gap: 'inherit',
   padding,
+})
+
+export const GroupLabelStyle = style({
+  gridColumn,
   font,
   color,
 })

package/src/component/style/article.css.ts

@@ -0,0 +1,189 @@
+import { createVar, globalStyle, style } from '@vanilla-extract/css'
+
+const gap = createVar()
+const width = createVar()
+const color = createVar()
+const background = createVar()
+
+export const ArticleStyle = style({
+  vars: {
+    [width]: '48rem',
+    [color]: 'light-dark(#131313, #fff)',
+    [background]: 'light-dark(#fff, #131313)',
+  },
+  maxInlineSize: width,
+  paddingInline: '1.5rem',
+  margin: 'auto',
+  fontFamily: `'Proxima Nova', 'Myriad Set Pro', 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif`,
+  fontSize: '0.875rem',
+  lineHeight: '1.25rem',
+})
+
+globalStyle(`${ArticleStyle} h1, ${ArticleStyle} section`, {
+  color,
+  background,
+})
+
+globalStyle(
+  ['h1', 'h2', 'h3', 'p', 'ul', 'ol', 'pre', 'hr', 'section']
+    .map((selector) => `${ArticleStyle} ${selector}`)
+    .join(', '),
+  {
+    maxInlineSize: width,
+    margin: 'auto',
+  }
+)
+
+globalStyle(`${ArticleStyle} h1`, {
+  padding: '2.5rem 2rem',
+  fontFamily: `'Proxima Nova', 'Segoe UI Light', Quicksand, 'Myriad Set Pro', 'Lucida Grande', sans-serif`,
+  fontSize: '2rem',
+  lineHeight: '3rem',
+  textAlign: 'center',
+})
+
+globalStyle(`${ArticleStyle} h2`, {
+  padding: '1rem 1.5rem 0.75rem 1.25rem',
+  fontSize: '1.125rem',
+  lineHeight: '1.75rem',
+  borderInlineStart: '0.25rem solid #aaf',
+})
+
+globalStyle(`${ArticleStyle} h3`, {
+  position: 'relative',
+  marginBlock: '1.25rem',
+})
+
+globalStyle(`${ArticleStyle} h3::before`, {
+  position: 'absolute',
+  insetBlock: '0.1875rem 0.375rem',
+  insetInlineStart: '-1.5rem',
+  content: '',
+  borderInlineStart: '0.25rem solid #999',
+})
+
+globalStyle(`${ArticleStyle} p, ${ArticleStyle} li`, {
+  marginBlock: '1.25rem',
+})
+
+globalStyle(`${ArticleStyle} ul`, {
+  paddingInlineStart: '1em',
+  listStyle: 'circle',
+})
+
+globalStyle(`${ArticleStyle} ol`, {
+  paddingInlineStart: '1em',
+  listStyle: 'auto',
+})
+
+globalStyle(`${ArticleStyle} a`, {
+  color: '#08c',
+})
+
+globalStyle(`${ArticleStyle} a:hover`, {
+  color: '#15c',
+  textDecoration: 'underline',
+  textDecorationColor: '#58e',
+})
+
+globalStyle(`${ArticleStyle} a:focus-visible`, {
+  outline: '1px dotted rgb(0 0 0 / 75%)',
+  outlineOffset: '2px',
+})
+
+globalStyle(`${ArticleStyle} a[download]`, {
+  vars: {
+    [color]: 'light-dark(#fff, #fff)',
+    [background]: 'light-dark(#acc, #222)',
+  },
+  display: 'inline-block',
+  blockSize: '1.75rem',
+  padding: '0 0.5rem',
+  fontSize: '0.875rem',
+  lineHeight: '1.75rem',
+  color,
+  background,
+  borderRadius: '0.125rem',
+})
+
+globalStyle(`${ArticleStyle} :has(> a[download]:only-child)`, {
+  paddingInline: '1.5rem',
+})
+
+globalStyle(`${ArticleStyle} a[download]:hover`, {
+  color: '#fff',
+  textDecoration: 'none',
+  background: '#8aa',
+})
+
+globalStyle(`${ArticleStyle} a[download]:focus-visible`, {
+  outline: '2px solid rgb(102 136 136 / 40%)',
+  outlineOffset: '1px',
+  background: '#688',
+})
+
+globalStyle(`${ArticleStyle} code`, {
+  display: 'inline-block',
+  padding: '0.125rem',
+  fontFamily: `Monaco, 'Andale Mono', 'Bitstream Vera Sans Mono', Consolas, 'Courier New', monospace`,
+  fontSize: '0.875rem',
+  lineHeight: '1rem',
+  verticalAlign: 'top',
+  color: '#333',
+  whiteSpace: 'pre',
+  background: '#e5e5e5',
+  borderRadius: '0.125rem',
+})
+
+globalStyle(`${ArticleStyle} code::selection`, {
+  background: '#bbb',
+})
+
+globalStyle(`${ArticleStyle} section`, {
+  padding: '0.25rem 1.5rem',
+})
+
+globalStyle(`${ArticleStyle} footer`, {
+  vars: {
+    [gap]: '1.25rem',
+    [color]: '#aaf',
+  },
+  display: 'flex',
+  gap,
+  placeContent: 'center',
+  placeItems: 'center',
+  marginBlock: '2.5rem',
+  overflow: 'clip',
+  color,
+})
+
+globalStyle(`${ArticleStyle} footer::selection`, {
+  color: '#88d',
+  background: '#ccc',
+})
+
+globalStyle(`${ArticleStyle} footer strong, ${ArticleStyle} footer time`, {
+  position: 'relative',
+})
+
+globalStyle(
+  `${ArticleStyle} footer strong::before, ${ArticleStyle} footer time::after`,
+  {
+    position: 'absolute',
+    insetBlockStart: '0.5625rem',
+    inlineSize: width,
+    blockSize: '0.125rem',
+    content: '',
+    background: color,
+  }
+)
+
+globalStyle(`${ArticleStyle} footer strong::before`, {
+  insetInlineEnd: '100%',
+  marginInlineEnd: gap,
+})
+
+globalStyle(`${ArticleStyle} footer time::after`, {
+  insetInlineStart: '100%',
+  marginInlineStart: gap,
+})

package/src/component/style/index.ts

@@ -0,0 +1 @@
+export * from './article.css'

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/useLastFocused.ts

@@ -8,6 +8,7 @@ export function useLastFocused(
   tree: Tree,
   active: Element | null
 ) {
+  // eslint-disable-next-line react-hooks/preserve-manual-memoization
   let ctx = useMemo(
     () => (active ? tree.map.get(active)?.context : null),
     [active, tree.map]

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/form/useGroup.ts

@@ -11,8 +11,8 @@ import {
   type SyntheticEvent,
 } from 'react'
 import invariant from 'tiny-invariant'
-import { FormContext } from './context'
 import { useDefault, type ChangeCallback } from '.'
+import { FormContext } from './context'
 
 interface Props<T, E extends SyntheticEvent> extends PropsWithChildren {
   name?: string | undefined
@@ -141,6 +141,7 @@ export function useGroup<T, P extends Props<T, SyntheticEvent>>(props: P) {
 
   props = {
     ...props,
+    // eslint-disable-next-line react-hooks/refs
     children: createElement(FormContext, { value: _context }, props.children),
   }
 

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
+        )
       }
     })
 
@@ -164,6 +168,7 @@ export function usePopover<T extends React.HTMLElementType = 'div'>(
     children,
   }
 
+  // eslint-disable-next-line react-hooks/refs
   positionedProps.children = createElement(
     OverlayContext,
     { value: overlay },
@@ -178,13 +183,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
-  }
-}