zkjson 0.6.0 → 1.0.2

package/benchmark/components/ui/color-mode.jsx

@@ -0,0 +1,89 @@
+'use client'
+
+import { ClientOnly, IconButton, Skeleton, Span } from '@chakra-ui/react'
+import { ThemeProvider, useTheme } from 'next-themes'
+
+import * as React from 'react'
+import { LuMoon, LuSun } from 'react-icons/lu'
+
+export function ColorModeProvider(props) {
+  return (
+    <ThemeProvider attribute='class' disableTransitionOnChange {...props} />
+  )
+}
+
+export function useColorMode() {
+  const { resolvedTheme, setTheme } = useTheme()
+  const toggleColorMode = () => {
+    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')
+  }
+  return {
+    colorMode: resolvedTheme,
+    setColorMode: setTheme,
+    toggleColorMode,
+  }
+}
+
+export function useColorModeValue(light, dark) {
+  const { colorMode } = useColorMode()
+  return colorMode === 'dark' ? dark : light
+}
+
+export function ColorModeIcon() {
+  const { colorMode } = useColorMode()
+  return colorMode === 'dark' ? <LuMoon /> : <LuSun />
+}
+
+export const ColorModeButton = React.forwardRef(
+  function ColorModeButton(props, ref) {
+    const { toggleColorMode } = useColorMode()
+    return (
+      <ClientOnly fallback={<Skeleton boxSize='8' />}>
+        <IconButton
+          onClick={toggleColorMode}
+          variant='ghost'
+          aria-label='Toggle color mode'
+          size='sm'
+          ref={ref}
+          {...props}
+          css={{
+            _icon: {
+              width: '5',
+              height: '5',
+            },
+          }}
+        >
+          <ColorModeIcon />
+        </IconButton>
+      </ClientOnly>
+    )
+  },
+)
+
+export const LightMode = React.forwardRef(function LightMode(props, ref) {
+  return (
+    <Span
+      color='fg'
+      display='contents'
+      className='chakra-theme light'
+      colorPalette='gray'
+      colorScheme='light'
+      ref={ref}
+      {...props}
+    />
+  )
+})
+
+export const DarkMode = React.forwardRef(function DarkMode(props, ref) {
+  return (
+    <Span
+      color='fg'
+      display='contents'
+      className='chakra-theme dark'
+      colorPalette='gray'
+      colorScheme='dark'
+      ref={ref}
+      {...props}
+    />
+  )
+})

package/benchmark/components/ui/dialog.jsx

@@ -0,0 +1,54 @@
+import { Dialog as ChakraDialog, Portal } from '@chakra-ui/react'
+import { CloseButton } from './close-button'
+import * as React from 'react'
+
+export const DialogContent = React.forwardRef(
+  function DialogContent(props, ref) {
+    const {
+      children,
+      portalled = true,
+      portalRef,
+      backdrop = true,
+      ...rest
+    } = props
+
+    return (
+      <Portal disabled={!portalled} container={portalRef}>
+        {backdrop && <ChakraDialog.Backdrop />}
+        <ChakraDialog.Positioner>
+          <ChakraDialog.Content ref={ref} {...rest} asChild={false}>
+            {children}
+          </ChakraDialog.Content>
+        </ChakraDialog.Positioner>
+      </Portal>
+    )
+  },
+)
+
+export const DialogCloseTrigger = React.forwardRef(
+  function DialogCloseTrigger(props, ref) {
+    return (
+      <ChakraDialog.CloseTrigger
+        position='absolute'
+        top='2'
+        insetEnd='2'
+        {...props}
+        asChild
+      >
+        <CloseButton size='sm' ref={ref}>
+          {props.children}
+        </CloseButton>
+      </ChakraDialog.CloseTrigger>
+    )
+  },
+)
+
+export const DialogRoot = ChakraDialog.Root
+export const DialogFooter = ChakraDialog.Footer
+export const DialogHeader = ChakraDialog.Header
+export const DialogBody = ChakraDialog.Body
+export const DialogBackdrop = ChakraDialog.Backdrop
+export const DialogTitle = ChakraDialog.Title
+export const DialogDescription = ChakraDialog.Description
+export const DialogTrigger = ChakraDialog.Trigger
+export const DialogActionTrigger = ChakraDialog.ActionTrigger

package/benchmark/components/ui/drawer.jsx

@@ -0,0 +1,44 @@
+import { Drawer as ChakraDrawer, Portal } from '@chakra-ui/react'
+import { CloseButton } from './close-button'
+import * as React from 'react'
+
+export const DrawerContent = React.forwardRef(
+  function DrawerContent(props, ref) {
+    const { children, portalled = true, portalRef, offset, ...rest } = props
+    return (
+      <Portal disabled={!portalled} container={portalRef}>
+        <ChakraDrawer.Positioner padding={offset}>
+          <ChakraDrawer.Content ref={ref} {...rest} asChild={false}>
+            {children}
+          </ChakraDrawer.Content>
+        </ChakraDrawer.Positioner>
+      </Portal>
+    )
+  },
+)
+
+export const DrawerCloseTrigger = React.forwardRef(
+  function DrawerCloseTrigger(props, ref) {
+    return (
+      <ChakraDrawer.CloseTrigger
+        position='absolute'
+        top='2'
+        insetEnd='2'
+        {...props}
+        asChild
+      >
+        <CloseButton size='sm' ref={ref} />
+      </ChakraDrawer.CloseTrigger>
+    )
+  },
+)
+
+export const DrawerTrigger = ChakraDrawer.Trigger
+export const DrawerRoot = ChakraDrawer.Root
+export const DrawerFooter = ChakraDrawer.Footer
+export const DrawerHeader = ChakraDrawer.Header
+export const DrawerBody = ChakraDrawer.Body
+export const DrawerBackdrop = ChakraDrawer.Backdrop
+export const DrawerDescription = ChakraDrawer.Description
+export const DrawerTitle = ChakraDrawer.Title
+export const DrawerActionTrigger = ChakraDrawer.ActionTrigger

package/benchmark/components/ui/field.jsx

@@ -0,0 +1,22 @@
+import { Field as ChakraField } from '@chakra-ui/react'
+import * as React from 'react'
+
+export const Field = React.forwardRef(function Field(props, ref) {
+  const { label, children, helperText, errorText, optionalText, ...rest } =
+    props
+  return (
+    <ChakraField.Root ref={ref} {...rest}>
+      {label && (
+        <ChakraField.Label>
+          {label}
+          <ChakraField.RequiredIndicator fallback={optionalText} />
+        </ChakraField.Label>
+      )}
+      {children}
+      {helperText && (
+        <ChakraField.HelperText>{helperText}</ChakraField.HelperText>
+      )}
+      {errorText && <ChakraField.ErrorText>{errorText}</ChakraField.ErrorText>}
+    </ChakraField.Root>
+  )
+})

package/benchmark/components/ui/input-group.jsx

@@ -0,0 +1,39 @@
+import { Group, InputElement } from '@chakra-ui/react'
+import * as React from 'react'
+
+export const InputGroup = React.forwardRef(function InputGroup(props, ref) {
+  const {
+    startElement,
+    startElementProps,
+    endElement,
+    endElementProps,
+    children,
+    startOffset = '6px',
+    endOffset = '6px',
+    ...rest
+  } = props
+
+  const child = React.Children.only(children)
+
+  return (
+    <Group ref={ref} {...rest}>
+      {startElement && (
+        <InputElement pointerEvents='none' {...startElementProps}>
+          {startElement}
+        </InputElement>
+      )}
+      {React.cloneElement(child, {
+        ...(startElement && {
+          ps: `calc(var(--input-height) - ${startOffset})`,
+        }),
+        ...(endElement && { pe: `calc(var(--input-height) - ${endOffset})` }),
+        ...children.props,
+      })}
+      {endElement && (
+        <InputElement placement='end' {...endElementProps}>
+          {endElement}
+        </InputElement>
+      )}
+    </Group>
+  )
+})

package/benchmark/components/ui/popover.jsx

@@ -0,0 +1,49 @@
+import { Popover as ChakraPopover, Portal } from '@chakra-ui/react'
+import { CloseButton } from './close-button'
+import * as React from 'react'
+
+export const PopoverContent = React.forwardRef(
+  function PopoverContent(props, ref) {
+    const { portalled = true, portalRef, ...rest } = props
+    return (
+      <Portal disabled={!portalled} container={portalRef}>
+        <ChakraPopover.Positioner>
+          <ChakraPopover.Content ref={ref} {...rest} />
+        </ChakraPopover.Positioner>
+      </Portal>
+    )
+  },
+)
+
+export const PopoverArrow = React.forwardRef(function PopoverArrow(props, ref) {
+  return (
+    <ChakraPopover.Arrow {...props} ref={ref}>
+      <ChakraPopover.ArrowTip />
+    </ChakraPopover.Arrow>
+  )
+})
+
+export const PopoverCloseTrigger = React.forwardRef(
+  function PopoverCloseTrigger(props, ref) {
+    return (
+      <ChakraPopover.CloseTrigger
+        position='absolute'
+        top='1'
+        insetEnd='1'
+        {...props}
+        asChild
+        ref={ref}
+      >
+        <CloseButton size='sm' />
+      </ChakraPopover.CloseTrigger>
+    )
+  },
+)
+
+export const PopoverTitle = ChakraPopover.Title
+export const PopoverDescription = ChakraPopover.Description
+export const PopoverFooter = ChakraPopover.Footer
+export const PopoverHeader = ChakraPopover.Header
+export const PopoverRoot = ChakraPopover.Root
+export const PopoverBody = ChakraPopover.Body
+export const PopoverTrigger = ChakraPopover.Trigger

package/benchmark/components/ui/provider.jsx

@@ -0,0 +1,12 @@
+'use client'
+
+import { ChakraProvider, defaultSystem } from '@chakra-ui/react'
+import { ColorModeProvider } from './color-mode'
+
+export function Provider(props) {
+  return (
+    <ChakraProvider value={defaultSystem}>
+      <ColorModeProvider {...props} />
+    </ChakraProvider>
+  )
+}

package/benchmark/components/ui/radio.jsx

@@ -0,0 +1,17 @@
+import { RadioGroup as ChakraRadioGroup } from '@chakra-ui/react'
+import * as React from 'react'
+
+export const Radio = React.forwardRef(function Radio(props, ref) {
+  const { children, inputProps, rootRef, ...rest } = props
+  return (
+    <ChakraRadioGroup.Item ref={rootRef} {...rest}>
+      <ChakraRadioGroup.ItemHiddenInput ref={ref} {...inputProps} />
+      <ChakraRadioGroup.ItemIndicator />
+      {children && (
+        <ChakraRadioGroup.ItemText>{children}</ChakraRadioGroup.ItemText>
+      )}
+    </ChakraRadioGroup.Item>
+  )
+})
+
+export const RadioGroup = ChakraRadioGroup.Root

package/benchmark/components/ui/slider.jsx

@@ -0,0 +1,107 @@
+function _nullishCoalesce(lhs, rhsFn) {
+  if (lhs != null) {
+    return lhs
+  } else {
+    return rhsFn()
+  }
+}
+function _optionalChain(ops) {
+  let lastAccessLHS = undefined
+  let value = ops[0]
+  let i = 1
+  while (i < ops.length) {
+    const op = ops[i]
+    const fn = ops[i + 1]
+    i += 2
+    if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) {
+      return undefined
+    }
+    if (op === 'access' || op === 'optionalAccess') {
+      lastAccessLHS = value
+      value = fn(value)
+    } else if (op === 'call' || op === 'optionalCall') {
+      value = fn((...args) => value.call(lastAccessLHS, ...args))
+      lastAccessLHS = undefined
+    }
+  }
+  return value
+}
+import { Slider as ChakraSlider, For, HStack } from '@chakra-ui/react'
+import * as React from 'react'
+
+export const Slider = React.forwardRef(function Slider(props, ref) {
+  const { marks: marksProp, label, showValue, ...rest } = props
+  const value = _nullishCoalesce(props.defaultValue, () => props.value)
+
+  const marks = _optionalChain([
+    marksProp,
+    'optionalAccess',
+    (_2) => _2.map,
+    'call',
+    (_3) =>
+      _3((mark) => {
+        if (typeof mark === 'number') return { value: mark, label: undefined }
+        return mark
+      }),
+  ])
+
+  const hasMarkLabel = !!_optionalChain([
+    marks,
+    'optionalAccess',
+    (_4) => _4.some,
+    'call',
+    (_5) => _5((mark) => mark.label),
+  ])
+
+  return (
+    <ChakraSlider.Root ref={ref} thumbAlignment='center' {...rest}>
+      {label && !showValue && <ChakraSlider.Label>{label}</ChakraSlider.Label>}
+      {label && showValue && (
+        <HStack justify='space-between'>
+          <ChakraSlider.Label>{label}</ChakraSlider.Label>
+          <ChakraSlider.ValueText />
+        </HStack>
+      )}
+      <ChakraSlider.Control data-has-mark-label={hasMarkLabel || undefined}>
+        <ChakraSlider.Track>
+          <ChakraSlider.Range />
+        </ChakraSlider.Track>
+        <SliderThumbs value={value} />
+        <SliderMarks marks={marks} />
+      </ChakraSlider.Control>
+    </ChakraSlider.Root>
+  )
+})
+
+function SliderThumbs(props) {
+  const { value } = props
+  return (
+    <For each={value}>
+      {(_, index) => (
+        <ChakraSlider.Thumb key={index} index={index}>
+          <ChakraSlider.HiddenInput />
+        </ChakraSlider.Thumb>
+      )}
+    </For>
+  )
+}
+
+const SliderMarks = React.forwardRef(function SliderMarks(props, ref) {
+  const { marks } = props
+  if (!_optionalChain([marks, 'optionalAccess', (_6) => _6.length])) return null
+
+  return (
+    <ChakraSlider.MarkerGroup ref={ref}>
+      {marks.map((mark, index) => {
+        const value = typeof mark === 'number' ? mark : mark.value
+        const label = typeof mark === 'number' ? undefined : mark.label
+        return (
+          <ChakraSlider.Marker key={index} value={value}>
+            <ChakraSlider.MarkerIndicator />
+            {label}
+          </ChakraSlider.Marker>
+        )
+      })}
+    </ChakraSlider.MarkerGroup>
+  )
+})

package/benchmark/components/ui/tooltip.jsx

@@ -0,0 +1,35 @@
+import { Tooltip as ChakraTooltip, Portal } from '@chakra-ui/react'
+import * as React from 'react'
+
+export const Tooltip = React.forwardRef(function Tooltip(props, ref) {
+  const {
+    showArrow,
+    children,
+    disabled,
+    portalled = true,
+    content,
+    contentProps,
+    portalRef,
+    ...rest
+  } = props
+
+  if (disabled) return children
+
+  return (
+    <ChakraTooltip.Root {...rest}>
+      <ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger>
+      <Portal disabled={!portalled} container={portalRef}>
+        <ChakraTooltip.Positioner>
+          <ChakraTooltip.Content ref={ref} {...contentProps}>
+            {showArrow && (
+              <ChakraTooltip.Arrow>
+                <ChakraTooltip.ArrowTip />
+              </ChakraTooltip.Arrow>
+            )}
+            {content}
+          </ChakraTooltip.Content>
+        </ChakraTooltip.Positioner>
+      </Portal>
+    </ChakraTooltip.Root>
+  )
+})

package/benchmark/jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}