chiplet 0.3.0-dev.3 → 0.3.0

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

@@ -7,12 +7,12 @@ import {
 } from '@vanilla-extract/css'
 import { recipe } from '@vanilla-extract/recipes'
 
+const outset = createVar()
 const gap = createVar()
 const width = createVar()
 const height = createVar()
-const margin = createVar()
-const padding = createVar()
 const size = createVar()
+const padding = createVar()
 const color = createVar()
 const colorHover = createVar()
 const colorActive = createVar()
@@ -27,9 +27,10 @@ const backgroundChecked = createVar()
 const backgroundDisabled = createVar()
 const scale = createVar()
 const scaleActive = createVar()
+const scaleDisabled = createVar()
+const translate = createVar()
+const translateChecked = createVar()
 const transition = createVar()
-const offset = createVar()
-const offsetChecked = createVar()
 
 export const CheckboxGroupStyle = style({
   vars: {
@@ -83,16 +84,16 @@ export const CheckboxStyle = recipe({
     outlineOffset: theme.checkbox.outline,
     transition,
     selectors: {
-      // https://larsmagnus.co/blog/focus-visible-within-the-missing-pseudo-class#using-has-to-emulate-focus-visible-within
-      '&:has(:focus-visible)': {
-        outline: theme.outline,
-      },
       // https://kizu.dev/label-to-input/
-      '&:has(:focus-visible, :hover)': {
+      '&:has(:hover, :focus-visible)': {
         vars: {
           [color]: colorHover,
         },
       },
+      // https://larsmagnus.co/blog/focus-visible-within-the-missing-pseudo-class#using-has-to-emulate-focus-visible-within
+      '&:has(:focus-visible)': {
+        outline: theme.outline,
+      },
       '&:has(:active)': {
         vars: {
           [color]: colorActive,
@@ -103,7 +104,7 @@ export const CheckboxStyle = recipe({
           [color]: colorChecked,
         },
       },
-      '&:has(:indeterminate, :checked):where(:has(:focus-visible, :hover))': {
+      '&:has(:indeterminate, :checked):where(:has(:hover, :focus-visible))': {
         vars: {
           [color]: colorCheckedHover,
         },
@@ -125,19 +126,19 @@ export const CheckboxStyle = recipe({
     size: {
       small: {
         vars: {
-          [margin]: theme.checkbox.margin,
+          [outset]: theme.checkbox.outset,
           [size]: theme.checkbox.size.small,
         },
       },
       medium: {
         vars: {
-          [margin]: theme.checkbox.margin,
+          [outset]: theme.checkbox.outset,
           [size]: theme.checkbox.size.medium,
         },
       },
       large: {
         vars: {
-          [margin]: theme.checkbox.margin,
+          [outset]: theme.checkbox.outset,
           [size]: theme.checkbox.size.large,
         },
       },
@@ -147,7 +148,7 @@ export const CheckboxStyle = recipe({
 
 globalStyle(`${CheckboxStyle.classNames.base} > input`, {
   position: 'absolute',
-  inset: `calc(-1 * ${margin})`,
+  inset: `calc(-1 * ${outset})`,
   margin: '0',
   appearance: 'none',
   cursor: 'inherit',
@@ -227,13 +228,20 @@ export const SwitchStyle = recipe({
       [backgroundDisabled]: theme.disabled.background,
       [scale]: '1',
       [scaleActive]: '1.25',
+      [scaleDisabled]: '1',
+      [translate]: padding,
+      [translateChecked]: `calc(${width} - ${size} * ${scale} - ${padding})`,
       [transition]: theme.switch.transition,
-      [offset]: padding,
-      [offsetChecked]: `calc(100% - ${size} * ${scale} - ${padding})`,
     },
     position: 'relative',
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    flexShrink: '0',
+    placeContent: 'center',
+    placeItems: 'center',
     inlineSize: width,
     blockSize: height,
+    padding,
     color,
     cursor,
     outlineOffset: theme.switch.outline,
@@ -242,14 +250,14 @@ export const SwitchStyle = recipe({
     transition,
     '::after': {
       position: 'absolute',
-      insetBlockStart: padding,
-      insetInlineStart: offset,
+      insetInlineStart: '0',
       inlineSize: `calc(${size} * ${scale})`,
       blockSize: size,
       pointerEvents: 'none',
       content: '',
       background: 'currentcolor',
-      borderRadius: size,
+      borderRadius: 'inherit',
+      translate,
       transition: 'inherit',
     },
     selectors: {
@@ -265,14 +273,15 @@ export const SwitchStyle = recipe({
         vars: {
           [color]: colorChecked,
           [background]: backgroundChecked,
-          [offset]: offsetChecked,
+          [translate]: translateChecked,
         },
       },
       '&:has(:disabled)': {
         vars: {
           [color]: colorDisabled,
-          [background]: backgroundDisabled,
           [cursor]: cursorDisabled,
+          [background]: backgroundDisabled,
+          [scale]: scaleDisabled,
         },
       },
     },
@@ -281,26 +290,26 @@ export const SwitchStyle = recipe({
     size: {
       small: {
         vars: {
+          [outset]: theme.switch.outset,
           [width]: theme.switch.width.small,
           [height]: theme.switch.height.small,
           [padding]: theme.switch.padding.small,
-          [margin]: theme.switch.outset,
         },
       },
       medium: {
         vars: {
+          [outset]: theme.switch.outset,
           [width]: theme.switch.width.medium,
           [height]: theme.switch.height.medium,
           [padding]: theme.switch.padding.medium,
-          [margin]: theme.switch.outset,
         },
       },
       large: {
         vars: {
+          [outset]: theme.switch.outset,
           [width]: theme.switch.width.large,
           [height]: theme.switch.height.large,
           [padding]: theme.switch.padding.large,
-          [margin]: theme.switch.outset,
         },
       },
     },
@@ -309,7 +318,7 @@ export const SwitchStyle = recipe({
 
 export const SwitchInputStyle = style({
   position: 'absolute',
-  inset: `calc(-1 * ${margin})`,
+  inset: `calc(-1 * ${outset})`,
   margin: '0',
   appearance: 'none',
   cursor: 'inherit',

package/src/component/icon/README.md

@@ -1,4 +1,18 @@
-# How to simplify SVG files
+# Simplify SVG files
 
-1. `pip3 install picosvg`
-2. `for svg in *.svg ; do python3 -m 'picosvg.picosvg' "$svg" --output_file "$svg" ; done`
+Install picosvg:
+
+```sh
+python3 -m pip install picosvg
+```
+
+From the repository root, write simplified copies to a separate directory so the originals remain unchanged:
+
+```sh
+mkdir -p "$TMPDIR/chiplet-icons"
+for svg in src/component/icon/set/*.svg; do
+  python3 -m picosvg.picosvg "$svg" --output_file "$TMPDIR/chiplet-icons/$(basename "$svg")" || exit 1
+done
+```
+
+Review the generated files before replacing any source icons.

package/src/component/index.ts

@@ -1,5 +1,6 @@
 export * from './icon'
 export * from './popover'
+export * from './style'
 export * from './typography'
 
 export * from './button'

package/src/component/input/Input.tsx

@@ -16,8 +16,7 @@ export interface InputProps extends Omit<
   defaultValue?: string | undefined
   value?: string | undefined
   onChange?:
-    | ChangeCallback<React.ChangeEvent<HTMLInputElement>, string>
-    | undefined
+    ChangeCallback<React.ChangeEvent<HTMLInputElement>, string> | undefined
   before?: JSX.Element | null | undefined
   after?: JSX.Element | null | undefined
   slot?: {

package/src/component/input/SearchInput.tsx

@@ -2,14 +2,13 @@ import type { ChangeCallback } from '#hook'
 import { isEnterKey } from '#util'
 import clsx from 'clsx'
 import { useCallback } from 'react'
+import { Input, type InputProps } from '.'
 import { Search24Regular } from '../icon'
 import { InputBeforeStyle, SearchInputBeforeStyle } from './style/index.css'
-import { Input, type InputProps } from '.'
 
 export interface SearchInputProps extends InputProps {
   onSearch?:
-    | ChangeCallback<React.KeyboardEvent<HTMLInputElement>, string>
-    | undefined
+    ChangeCallback<React.KeyboardEvent<HTMLInputElement>, string> | undefined
 }
 
 export function SearchInput(props: SearchInputProps) {
@@ -28,6 +27,7 @@ export function SearchInput(props: SearchInputProps) {
   const { onKeyDown } = attrs
 
   attrs.onKeyDown = useCallback<NonNullable<typeof onKeyDown>>(
+    // eslint-disable-next-line react-hooks/preserve-manual-memoization
     (ev) => {
       onKeyDown?.(ev)
 
@@ -35,6 +35,7 @@ export function SearchInput(props: SearchInputProps) {
         onSearch?.(ev, ev.currentTarget.value)
       }
     },
+    // eslint-disable-next-line react-hooks/preserve-manual-memoization
     [onKeyDown, onSearch]
   )
 

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

@@ -1,4 +1,4 @@
-import { stretch, theme } from '#theme'
+import { radiusVar, SquircleStyle, stretch, theme } from '#theme'
 import { createVar, globalStyle, style } from '@vanilla-extract/css'
 import { recipe } from '@vanilla-extract/recipes'
 
@@ -19,52 +19,53 @@ const borderColorHover = createVar()
 const borderColorFocus = createVar()
 const borderColorDisabled = createVar()
 const borderSize = createVar()
-const radius = createVar()
 const placeholder = createVar()
 const before = createVar()
 const after = createVar()
 
 export const InputStyle = recipe({
-  base: {
-    vars: {
-      [border]: `${borderSize} solid`,
-      [placeholder]: theme.input.placeholder,
-      [before]: theme.input.before,
-      [after]: theme.input.after,
-    },
-    boxSizing: 'border-box',
-    display: 'flex',
-    placeItems: 'center',
-    blockSize: height,
-    font,
-    color,
-    background,
-    border,
-    borderColor,
-    borderRadius: radius,
-    ':hover': {
+  base: [
+    SquircleStyle,
+    {
       vars: {
-        [background]: backgroundHover,
-        [borderColor]: borderColorHover,
+        [border]: `${borderSize} solid`,
+        [placeholder]: theme.input.placeholder,
+        [before]: theme.input.before,
+        [after]: theme.input.after,
       },
-    },
-    ':focus-within': {
-      vars: {
-        [background]: backgroundFocus,
-        [borderColor]: borderColorFocus,
+      boxSizing: 'border-box',
+      display: 'flex',
+      placeItems: 'center',
+      blockSize: height,
+      font,
+      color,
+      background,
+      border,
+      borderColor,
+      ':hover': {
+        vars: {
+          [background]: backgroundHover,
+          [borderColor]: borderColorHover,
+        },
       },
-    },
-    selectors: {
-      '&:has(> input:disabled)': {
+      ':focus-within': {
         vars: {
-          [color]: colorDisabled,
-          [background]: backgroundDisabled,
-          [borderColor]: borderColorDisabled,
-          [placeholder]: color,
+          [background]: backgroundFocus,
+          [borderColor]: borderColorFocus,
+        },
+      },
+      selectors: {
+        '&:has(> input:disabled)': {
+          vars: {
+            [color]: colorDisabled,
+            [background]: backgroundDisabled,
+            [borderColor]: borderColorDisabled,
+            [placeholder]: color,
+          },
         },
       },
     },
-  },
+  ],
   variants: {
     variant: {
       primary: {
@@ -103,9 +104,9 @@ export const InputStyle = recipe({
           [height]: theme.input.height.small,
           [padding]: theme.input.padding.small,
           [font]: theme.input.font.small,
-          [borderSize]: theme.input.border.small,
-          [radius]: theme.input.radius.small,
           [icon]: theme.icon.size.small,
+          [borderSize]: theme.input.border.small,
+          [radiusVar]: theme.input.radius.small,
         },
       },
       medium: {
@@ -114,9 +115,9 @@ export const InputStyle = recipe({
           [height]: theme.input.height.medium,
           [padding]: theme.input.padding.medium,
           [font]: theme.input.font.medium,
-          [borderSize]: theme.input.border.medium,
-          [radius]: theme.input.radius.medium,
           [icon]: theme.icon.size.medium,
+          [borderSize]: theme.input.border.medium,
+          [radiusVar]: theme.input.radius.medium,
         },
       },
       large: {
@@ -125,9 +126,9 @@ export const InputStyle = recipe({
           [height]: theme.input.height.large,
           [padding]: theme.input.padding.large,
           [font]: theme.input.font.large,
-          [borderSize]: theme.input.border.large,
-          [radius]: theme.input.radius.large,
           [icon]: theme.icon.size.large,
+          [borderSize]: theme.input.border.large,
+          [radiusVar]: theme.input.radius.large,
         },
       },
     },

package/src/component/popover/Tooltip.tsx

@@ -9,9 +9,7 @@ import { Portal } from './Portal'
 import { TooltipArrowStyle, TooltipStyle } from './style/index.css'
 
 export type TooltipContent =
-  | ((tooltip: Tooltip) => React.ReactNode)
-  | string
-  | React.ReactElement
+  ((tooltip: Tooltip) => React.ReactNode) | string | React.ReactElement
 
 export interface TooltipProps
   extends

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

@@ -1,21 +1,17 @@
-import { stretch, theme } from '#theme'
+import { radiusVar, SquircleStyle, stretch, theme } from '#theme'
 import { createVar, style } from '@vanilla-extract/css'
 import { recipe } from '@vanilla-extract/recipes'
 
 const width = createVar()
 const maxWidth = createVar()
-const minHeight = createVar()
 const maxHeight = createVar()
 const padding = createVar()
 const paddingBlock = createVar()
 const paddingInline = createVar()
 const margin = createVar()
-const fontSize = createVar()
-const lineHeight = createVar()
 const color = createVar()
 const background = createVar()
 const border = createVar()
-const radius = createVar()
 const shadow = createVar()
 const backdrop = createVar()
 const filter = createVar()
@@ -27,48 +23,50 @@ const transition = createVar()
 const transitionProperty = `background, opacity, transform, display, overlay`
 
 export const DialogStyle = recipe({
-  base: {
-    vars: {
-      [maxWidth]: `calc(100% - 2 * ${margin})`,
-      [maxHeight]: `calc(100% - 2 * ${margin})`,
-      [margin]: theme.dialog.margin,
-      [color]: theme.dialog.color,
-      [background]: theme.dialog.background,
-      [backdrop]: theme.dialog.backdrop,
-      [radius]: theme.dialog.radius,
-      [shadow]: theme.dialog.shadow,
-      [filter]: theme.dialog.filter,
-      [transform]: 'none',
-      [transition]: theme.dialog.transition,
-    },
-    boxSizing: 'border-box',
-    maxInlineSize: maxWidth,
-    maxBlockSize: maxHeight,
-    padding: '0',
-    margin: 'auto',
-    overflow: 'clip auto',
-    color,
-    background,
-    border: 'none',
-    borderRadius: radius,
-    boxShadow: shadow,
-    transform: 'none',
-    transition,
-    transitionProperty,
-    '::backdrop': {
-      background: backdrop,
-      backdropFilter: filter,
-      transition: 'inherit',
-    },
-    // https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@starting-style
-    '@starting-style': {
-      opacity: 0,
-      transform,
+  base: [
+    SquircleStyle,
+    {
+      vars: {
+        [maxWidth]: `calc(100% - 2 * ${margin})`,
+        [maxHeight]: `calc(100% - 2 * ${margin})`,
+        [margin]: theme.dialog.margin,
+        [color]: theme.dialog.color,
+        [background]: theme.dialog.background,
+        [backdrop]: theme.dialog.backdrop,
+        [radiusVar]: theme.dialog.radius,
+        [shadow]: theme.dialog.shadow,
+        [filter]: theme.dialog.filter,
+        [transform]: 'none',
+        [transition]: theme.dialog.transition,
+      },
+      boxSizing: 'border-box',
+      maxInlineSize: maxWidth,
+      maxBlockSize: maxHeight,
+      padding: '0',
+      margin: 'auto',
+      overflow: 'clip auto',
+      color,
+      background,
+      border: 'none',
+      boxShadow: shadow,
+      transform: 'none',
+      transition,
+      transitionProperty,
       '::backdrop': {
-        background: 'none',
+        background: backdrop,
+        backdropFilter: filter,
+        transition: 'inherit',
+      },
+      // https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@starting-style
+      '@starting-style': {
+        opacity: 0,
+        transform,
+        '::backdrop': {
+          background: 'none',
+        },
       },
     },
-  },
+  ],
   variants: {
     size: {
       auto: {
@@ -91,37 +89,39 @@ export const DialogStyle = recipe({
 })
 
 export const PopoverStyle = recipe({
-  base: {
-    vars: {
-      [color]: theme.popover.color,
-      [background]: theme.popover.background,
-      [border]: theme.popover.border,
-      [radius]: theme.popover.radius,
-      [shadow]: theme.popover.shadow,
-      [transform]: `${translate} scale(0.95)`,
-      [translateValue]: '0.5rem',
-      [transition]: theme.popover.transition,
-    },
-    boxSizing: 'border-box',
-    padding: '0',
-    margin: '0',
-    overflow: 'hidden auto',
-    color,
-    background,
-    border,
-    borderRadius: radius,
-    boxShadow: shadow,
-    transform: 'none',
-    transformOrigin,
-    transition,
-    transitionProperty,
-    '@starting-style': {
-      opacity: 0,
-      // Do not set the CSS 'translate' property here;
-      // it is controlled by the 'usePositioning' hook.
-      transform,
+  base: [
+    SquircleStyle,
+    {
+      vars: {
+        [color]: theme.popover.color,
+        [background]: theme.popover.background,
+        [border]: theme.popover.border,
+        [radiusVar]: theme.popover.radius,
+        [shadow]: theme.popover.shadow,
+        [transform]: `${translate} scale(0.95)`,
+        [translateValue]: '0.5rem',
+        [transition]: theme.popover.transition,
+      },
+      boxSizing: 'border-box',
+      padding: '0',
+      margin: '0',
+      overflow: 'clip auto',
+      color,
+      background,
+      border,
+      boxShadow: shadow,
+      transform: 'none',
+      transformOrigin,
+      transition,
+      transitionProperty,
+      '@starting-style': {
+        opacity: 0,
+        // Do not set the CSS 'translate' property here;
+        // it is controlled by the 'usePositioning' hook.
+        transform,
+      },
     },
-  },
+  ],
   variants: {
     position: {
       'above': {
@@ -200,47 +200,44 @@ export const PopoverStyle = recipe({
   },
 })
 
-export const TooltipStyle = style({
-  vars: {
-    [minHeight]: theme.tooltip.minHeight,
-    [padding]: `${paddingBlock} ${paddingInline}`,
-    [paddingBlock]: `calc((${minHeight} - ${lineHeight}) / 2)`,
-    [paddingInline]: theme.tooltip.padding,
-    [fontSize]: theme.tooltip.fontSize,
-    [lineHeight]: theme.tooltip.lineHeight,
-    [color]: theme.tooltip.color,
-    [background]: theme.tooltip.background,
-    [border]: theme.tooltip.border,
-    [radius]: theme.tooltip.radius,
-    [filter]: theme.tooltip.filter,
+export const TooltipStyle = style([
+  SquircleStyle,
+  {
+    vars: {
+      [padding]: `${paddingBlock} ${paddingInline}`,
+      [paddingBlock]: `calc((${theme.tooltip.minHeight} - 1lh) / 2)`,
+      [paddingInline]: theme.tooltip.padding,
+      [color]: theme.tooltip.color,
+      [background]: theme.tooltip.background,
+      [border]: theme.tooltip.border,
+      [radiusVar]: theme.tooltip.radius,
+      [filter]: theme.tooltip.filter,
+    },
+    boxSizing: 'border-box',
+    inlineSize: 'fit-content',
+    blockSize: 'fit-content',
+    padding,
+    margin: '0',
+    overflow: 'visible',
+    color,
+    background,
+    border,
+    filter,
   },
-  boxSizing: 'border-box',
-  inlineSize: 'fit-content',
-  blockSize: 'fit-content',
-  padding,
-  margin: '0',
-  overflow: 'visible',
-  fontSize,
-  lineHeight,
-  color,
-  background,
-  border,
-  borderRadius: radius,
-  filter,
-})
+])
 
 export const TooltipArrowStyle = recipe({
   base: {
     vars: {
       [width]: theme.tooltip.arrow.size,
-      [radius]: theme.tooltip.arrow.radius,
+      [radiusVar]: theme.tooltip.arrow.radius,
     },
     position: 'absolute',
     zIndex: '-1',
     inlineSize: width,
     aspectRatio: '1 / 1',
     background: 'inherit',
-    borderRadius: radius,
+    borderRadius: radiusVar,
     transform: 'skew(15deg, 15deg)',
   },
   variants: {