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

package/package.json

@@ -1,31 +1,27 @@
 {
   "name": "chiplet",
-  "version": "0.3.0-dev.3",
+  "version": "0.3.0-dev.4",
   "description": "React component, hook, and utility library.",
   "license": "MIT",
   "type": "module",
   "imports": {
     "#.storybook/preview": "./.storybook/preview.tsx",
+    "#.mock/*": "./test/.mock/*.ts",
     "#test": "./test/index.ts",
     "#component": "./src/component/index.ts",
     "#hook": "./src/hook/index.ts",
     "#infra": "./src/infra/index.ts",
     "#theme": "./src/theme/index.ts",
     "#util": "./src/util/index.ts",
-    "#*": {
-      "types": [
-        "./src/*/index.ts",
-        "./src/*/index.tsx",
-        "./src/*.ts",
-        "./src/*.tsx",
-        "./src/*"
-      ],
-      "default": [
-        "./src/*"
-      ]
-    }
+    "#*": [
+      "./src/*",
+      "./src/*.ts",
+      "./src/*.tsx",
+      "./src/*/index.ts"
+    ]
   },
   "exports": {
+    "./package.json": "./package.json",
     ".": {
       "types": "./src/index.ts",
       "default": "./dist/index.js"
@@ -40,85 +36,85 @@
     "./src"
   ],
   "dependencies": {
-    "@floating-ui/dom": "^1.7.5",
-    "@floating-ui/utils": "^0.2.10",
-    "@opentelemetry/api": "^1.9.0",
-    "@opentelemetry/api-logs": "^0.211.0",
-    "@opentelemetry/auto-instrumentations-web": "^0.56.0",
-    "@opentelemetry/exporter-logs-otlp-http": "^0.211.0",
-    "@opentelemetry/exporter-metrics-otlp-http": "^0.211.0",
-    "@opentelemetry/exporter-trace-otlp-http": "^0.211.0",
-    "@opentelemetry/instrumentation": "^0.211.0",
-    "@opentelemetry/instrumentation-long-task": "^0.55.0",
-    "@opentelemetry/instrumentation-web-exception": "^0.4.0",
-    "@opentelemetry/opentelemetry-browser-detector": "^0.211.0",
-    "@opentelemetry/resources": "^2.5.0",
-    "@opentelemetry/sdk-logs": "^0.211.0",
-    "@opentelemetry/sdk-metrics": "^2.5.0",
-    "@opentelemetry/sdk-trace-web": "^2.5.0",
-    "@opentelemetry/semantic-conventions": "^1.39.0",
+    "@floating-ui/dom": "^1.7.6",
+    "@floating-ui/utils": "^0.2.11",
+    "@opentelemetry/api": "^1.9.1",
+    "@opentelemetry/api-logs": "^0.214.0",
+    "@opentelemetry/auto-instrumentations-web": "^0.59.0",
+    "@opentelemetry/exporter-logs-otlp-http": "^0.214.0",
+    "@opentelemetry/exporter-metrics-otlp-http": "^0.214.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.214.0",
+    "@opentelemetry/instrumentation": "^0.214.0",
+    "@opentelemetry/instrumentation-long-task": "^0.58.0",
+    "@opentelemetry/instrumentation-web-exception": "^0.7.0",
+    "@opentelemetry/opentelemetry-browser-detector": "^0.214.0",
+    "@opentelemetry/resources": "^2.6.1",
+    "@opentelemetry/sdk-logs": "^0.214.0",
+    "@opentelemetry/sdk-metrics": "^2.6.1",
+    "@opentelemetry/sdk-trace-web": "^2.6.1",
+    "@opentelemetry/semantic-conventions": "^1.40.0",
     "@vanilla-extract/recipes": "^0.5.7",
     "clsx": "^2.1.1",
-    "lodash-es": "^4.17.23",
+    "lodash-es": "^4.18.1",
     "rxjs": "^7.8.2",
     "symbol-observable": "^4.0.0",
     "tiny-invariant": "^1.3.3"
   },
   "devDependencies": {
-    "@commitlint/cli": "^20.4.1",
-    "@commitlint/config-conventional": "^20.4.1",
-    "@commitlint/types": "^20.4.0",
+    "@commitlint/cli": "^20.5.0",
+    "@commitlint/config-conventional": "^20.5.0",
+    "@commitlint/types": "^20.5.0",
     "@csstools/postcss-light-dark-function": "^3.0.0",
-    "@csstools/postcss-relative-color-syntax": "^4.0.1",
-    "@eslint/js": "^9.39.2",
-    "@rollup/plugin-babel": "^6.1.0",
-    "@rollup/plugin-commonjs": "^29.0.0",
+    "@csstools/postcss-relative-color-syntax": "^4.0.2",
+    "@eslint/js": "^10.0.1",
+    "@rollup/plugin-babel": "^7.0.0",
+    "@rollup/plugin-commonjs": "^29.0.2",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/npm": "^13.1.4",
-    "@storybook/addon-a11y": "^10.2.8",
-    "@storybook/addon-docs": "^10.2.8",
-    "@storybook/addon-links": "^10.2.8",
-    "@storybook/addon-themes": "^10.2.8",
-    "@storybook/addon-vitest": "^10.2.8",
-    "@storybook/react-vite": "^10.2.8",
+    "@semantic-release/npm": "^13.1.5",
+    "@storybook/addon-a11y": "^10.3.4",
+    "@storybook/addon-docs": "^10.3.4",
+    "@storybook/addon-links": "^10.3.4",
+    "@storybook/addon-themes": "^10.3.4",
+    "@storybook/addon-vitest": "^10.3.4",
+    "@storybook/react-vite": "^10.3.4",
     "@svgr/rollup": "^8.1.0",
-    "@tailwindcss/postcss": "^4.1.18",
+    "@tailwindcss/postcss": "^4.2.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/lodash-es": "^4.17.12",
     "@types/mime-types": "^3.0.1",
-    "@types/node": "^24.10.12",
-    "@types/react": "^19.2.13",
+    "@types/node": "^24.12.2",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@typescript/native-preview": "7.0.0-dev.20260207.1",
-    "@vanilla-extract/css": "^1.18.0",
-    "@vanilla-extract/rollup-plugin": "^1.5.1",
-    "@vanilla-extract/vite-plugin": "^5.1.4",
-    "@vitejs/plugin-legacy": "^7.2.1",
-    "@vitejs/plugin-react": "^5.1.4",
-    "@vitest/browser-playwright": "^4.0.18",
-    "@vitest/coverage-istanbul": "^4.0.18",
-    "babel-plugin-formatjs": "^11.2.3",
+    "@typescript/native-preview": "7.0.0-dev.20260406.1",
+    "@vanilla-extract/css": "^1.20.1",
+    "@vanilla-extract/rollup-plugin": "^1.5.3",
+    "@vanilla-extract/vite-plugin": "^5.2.2",
+    "@vitejs/plugin-legacy": "^8.0.1",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/browser-playwright": "^4.1.2",
+    "@vitest/coverage-istanbul": "^4.1.2",
+    "babel-plugin-formatjs": "^11.3.2",
     "babel-plugin-react-compiler": "^1.0.0",
     "clsx": "^2.1.1",
     "colorjs.io": "^0.6.1",
     "csstype": "^3.2.3",
-    "eslint": "^9.39.2",
+    "eslint": "^10.2.0",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.5.0",
-    "globals": "^17.3.0",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
     "husky": "^9.1.7",
-    "jsdom": "^28.0.0",
-    "lint-staged": "^16.2.7",
+    "jsdom": "^29.0.1",
+    "lint-staged": "^16.4.0",
     "mime-types": "^3.0.2",
-    "playwright": "^1.58.2",
-    "postcss": "^8.5.6",
+    "playwright": "^1.59.1",
+    "postcss": "^8.5.8",
     "postcss-html": "^1.8.1",
     "postcss-scss": "^4.0.9",
     "postcss-styled-syntax": "^0.7.1",
@@ -129,30 +125,31 @@
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.1",
     "remark-mdx-frontmatter": "^5.2.0",
-    "rimraf": "^6.1.2",
-    "rollup": "^4.57.1",
+    "rimraf": "^6.1.3",
+    "rollup": "^4.60.1",
     "rollup-plugin-esbuild": "^6.2.1",
     "rollup-plugin-node-externals": "^8.1.2",
-    "rollup-plugin-visualizer": "^6.0.5",
+    "rollup-plugin-visualizer": "^7.0.1",
     "rollup-preserve-directives": "^1.1.3",
     "semantic-release": "^25.0.3",
     "sort-package-json": "^3.6.1",
-    "storybook": "^10.2.8",
-    "stylelint": "^17.1.1",
-    "stylelint-config-recess-order": "^7.6.1",
+    "storybook": "^10.3.4",
+    "stylelint": "^17.6.0",
+    "stylelint-config-recess-order": "^7.7.0",
     "stylelint-config-standard": "^40.0.0",
-    "stylelint-plugin-logical-css": "^1.3.0",
-    "tailwindcss": "^4.1.18",
+    "stylelint-plugin-logical-css": "^2.1.0",
+    "tailwindcss": "^4.2.2",
     "ts-node": "^10.9.2",
     "tslib": "^2.8.1",
-    "type-fest": "^5.4.4",
-    "typescript": "6.0.0-dev.20260101",
-    "typescript-eslint": "^8.55.0",
-    "vite": "^7.3.1",
-    "vitest": "^4.0.18"
+    "type-fest": "^5.5.0",
+    "typedoc": "^0.28.18",
+    "typescript": "^6.0.2",
+    "typescript-eslint": "^8.58.0",
+    "vite": "^8.0.5",
+    "vitest": "^4.1.2"
   },
   "peerDependencies": {
-    "@vanilla-extract/css": "^1.18.0",
+    "@vanilla-extract/css": "^1.20.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tslib": "^2.8.1"
@@ -161,8 +158,8 @@
     "node": ">=24.11"
   },
   "scripts": {
-    "build": "rimraf dist && rollup -c && storybook build",
-    "clean": "rimraf -g **/{dist,tsconfig.tsbuildinfo,storybook-static,coverage,test-results,__screenshots__}",
+    "build": "pnpm -r build && rimraf dist && rollup -c && storybook build && typedoc src --out typedoc-generated",
+    "clean": "pnpm -r clean && rimraf -g **/{dist,.tsbuildinfo,storybook-static,typedoc-generated,coverage,test-results,__screenshots__}",
     "dev": "storybook dev -p 6006",
     "format": "stylelint --fix '**/*.{css,scss,js,jsx,ts,tsx,html,vue}' && eslint --fix . && prettier --write .",
     "lint": "stylelint '**/*.{css,scss,js,jsx,ts,tsx,html,vue}' && eslint . && prettier --check .",

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

@@ -27,11 +27,11 @@ const backgroundHover = createVar()
 const backgroundActive = createVar()
 const backgroundDisabled = createVar()
 const border = createVar()
-const borderSize = createVar()
 const borderColor = createVar()
 const borderColorHover = createVar()
 const borderColorActive = createVar()
 const borderColorDisabled = createVar()
+const borderSize = createVar()
 const shadow = createVar()
 const shadowDisabled = createVar()
 const transition = createVar()

package/src/component/checkbox/Checkbox.tsx

@@ -46,7 +46,7 @@ export function Checkbox(props: CheckboxProps) {
   const ref = useRefObject(attrs.ref)
 
   useLayoutEffect(() => {
-    /* istanbul ignore else -- @preserve */
+    /* istanbul ignore else */
     if (ref.current) {
       // When a checkbox has both `indeterminate` and `checked` set to true,
       // only the `indeterminate` state will be activated in Chromium browser.

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/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/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,
         },
       },
     },