├── .changeset ├── README.md ├── config.json └── moody-lamps-cheat.md ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── config.yml │ └── feature_request.md ├── composite-actions │ └── install │ │ └── action.yml ├── pull_request_template.md ├── stale.yml └── workflows │ ├── quality.yml │ └── release.yml ├── .gitignore ├── .gitmodules ├── .husky ├── commit-msg └── pre-commit ├── .npmrc ├── .nvmrc ├── .prettierignore ├── .prettierrc ├── .vscode ├── extensions.json └── settings.json ├── CHANGELOG.md ├── LICENSE ├── README.md ├── clean-package.config.json ├── e2e ├── _utils.ts ├── accordion.e2e.ts ├── avatar.e2e.ts ├── carousel.e2e.ts ├── checkbox.e2e.ts ├── clipboard.e2e.ts ├── collapsible.e2e.ts ├── color-picker.e2e.ts ├── combobox.e2e.ts ├── context-menu.e2e.ts ├── date-picker.e2e.ts ├── dialog.e2e.ts ├── editable.e2e.ts ├── file-upload.e2e.ts ├── fixtures │ └── text.txt ├── hover-card.e2e.ts ├── listbox.e2e.ts ├── menu-nested.e2e.ts ├── menu-option.e2e.ts ├── menu.e2e.ts ├── models │ ├── accordion.model.ts │ ├── carousel.model.ts │ ├── clipboard.model.ts │ ├── color-picker.model.ts │ ├── combobox.model.ts │ ├── datepicker.model.ts │ ├── dialog.model.ts │ ├── editable.model.ts │ ├── listbox.model.ts │ ├── menu.model.ts │ ├── model.ts │ ├── navigation-menu.model.ts │ ├── number-input.model.ts │ ├── pagination.model.ts │ ├── password-input.model.ts │ ├── popover.model.ts │ ├── rating-group.model.ts │ ├── select.model.ts │ ├── slider.model.ts │ ├── switch.model.ts │ ├── tabs.model.ts │ ├── tags-input.model.ts │ ├── time-picker.model.ts │ ├── toast.model.ts │ ├── toggle-group.model.ts │ ├── tooltip.model.ts │ ├── tour.model.ts │ └── tree-view.model.ts ├── navigation-menu.e2e.ts ├── number-input.e2e.ts ├── pagination.e2e.ts ├── password-input.e2e.ts ├── pin-input.e2e.ts ├── popover.e2e.ts ├── radio-group.e2e.ts ├── rating-group.e2e.ts ├── select.e2e.ts ├── slider.e2e.ts ├── splitter.e2e.ts ├── switch.e2e.ts ├── tabs.e2e.ts ├── tags-input.e2e.ts ├── time-picker.e2e.ts ├── toast.e2e.ts ├── toggle-group.e2e.ts ├── tooltip.e2e.ts ├── tour.e2e.ts └── tree-view.e2e.ts ├── eslint.config.mjs ├── examples ├── next-ts │ ├── CHANGELOG.md │ ├── README.md │ ├── components │ │ ├── dialog.tsx │ │ ├── iframe.tsx │ │ ├── loader.tsx │ │ ├── presence.tsx │ │ ├── print.tsx │ │ ├── show.tsx │ │ ├── state-visualizer.tsx │ │ ├── swap.tsx │ │ ├── toast-item.tsx │ │ └── toolbar.tsx │ ├── eslint.config.mjs │ ├── hooks │ │ ├── use-controls.tsx │ │ ├── use-effect-once.ts │ │ ├── use-event.ts │ │ └── use-scroll-view.ts │ ├── next-env.d.ts │ ├── next.config.js │ ├── package.json │ ├── pages │ │ ├── _app.tsx │ │ ├── accordion.tsx │ │ ├── anatomy.tsx │ │ ├── angle-slider.tsx │ │ ├── autoresize.tsx │ │ ├── avatar.tsx │ │ ├── carousel.tsx │ │ ├── checkbox-controlled.tsx │ │ ├── checkbox.tsx │ │ ├── clipboard.tsx │ │ ├── collapse-multiple.tsx │ │ ├── collapsible.tsx │ │ ├── color-picker.tsx │ │ ├── combobox.tsx │ │ ├── context-menu.tsx │ │ ├── date-picker-multi.tsx │ │ ├── date-picker-range.tsx │ │ ├── date-picker.tsx │ │ ├── dialog-mutation.tsx │ │ ├── dialog-nested.tsx │ │ ├── dialog.tsx │ │ ├── dismissable.tsx │ │ ├── editable.tsx │ │ ├── file-upload.tsx │ │ ├── floating-panel.tsx │ │ ├── focus-visible.tsx │ │ ├── hover-card.tsx │ │ ├── index.tsx │ │ ├── listbox-grid.tsx │ │ ├── listbox.tsx │ │ ├── menu-nested.tsx │ │ ├── menu-options.tsx │ │ ├── menu-overflow.tsx │ │ ├── menu.tsx │ │ ├── navigation-menu-nested.tsx │ │ ├── navigation-menu-viewport.tsx │ │ ├── navigation-menu.tsx │ │ ├── number-input.tsx │ │ ├── pagination.tsx │ │ ├── password-input.tsx │ │ ├── pin-input.tsx │ │ ├── popover-controlled.tsx │ │ ├── popover-nested.tsx │ │ ├── popover.tsx │ │ ├── popper.tsx │ │ ├── presence.tsx │ │ ├── progress.tsx │ │ ├── qr-code-form.tsx │ │ ├── qr-code.tsx │ │ ├── radio-group.tsx │ │ ├── range-slider.tsx │ │ ├── rating-group.tsx │ │ ├── sandbox.composable.tsx │ │ ├── sandbox.tsx │ │ ├── segment-control.tsx │ │ ├── select.tsx │ │ ├── signature-pad.tsx │ │ ├── slider.tsx │ │ ├── splitter-collapsible.tsx │ │ ├── splitter-conditional.tsx │ │ ├── splitter-multiple.tsx │ │ ├── splitter.tsx │ │ ├── steps.tsx │ │ ├── swap.tsx │ │ ├── switch.tsx │ │ ├── tabs.tsx │ │ ├── tags-input.tsx │ │ ├── time-picker.tsx │ │ ├── timer-countdown.tsx │ │ ├── timer-stopwatch.tsx │ │ ├── toast-overlap.tsx │ │ ├── toast-stacked.tsx │ │ ├── toggle-group.tsx │ │ ├── toggle.tsx │ │ ├── tooltip.tsx │ │ ├── tour.tsx │ │ └── tree-view.tsx │ └── tsconfig.json ├── nuxt-ts │ ├── .gitignore │ ├── .npmrc │ ├── README.md │ ├── app.vue │ ├── components │ │ ├── Controls.vue │ │ ├── EyeDropIcon.vue │ │ ├── HalfStar.vue │ │ ├── Iframe.vue │ │ ├── SideNav.vue │ │ ├── Star.vue │ │ ├── StateVisualizer.vue │ │ ├── ToastItem.vue │ │ ├── Toolbar.vue │ │ └── TreeNode.vue │ ├── composables │ │ └── useControls.ts │ ├── nuxt.config.ts │ ├── package.json │ ├── pages │ │ ├── accordion.vue │ │ ├── angle-slider.vue │ │ ├── avatar.vue │ │ ├── carousel.vue │ │ ├── checkbox.vue │ │ ├── clipboard.vue │ │ ├── collapsible.vue │ │ ├── color-picker.vue │ │ ├── combobox.vue │ │ ├── context-menu.vue │ │ ├── date-picker-multi.vue │ │ ├── date-picker-range.vue │ │ ├── date-picker.vue │ │ ├── dialog.vue │ │ ├── editable.vue │ │ ├── file-upload.vue │ │ ├── floating-panel.vue │ │ ├── hover-card.vue │ │ ├── index.vue │ │ ├── listbox-grid.vue │ │ ├── listbox.vue │ │ ├── menu-nested.vue │ │ ├── menu-options.vue │ │ ├── menu.vue │ │ ├── number-input.vue │ │ ├── pagination.vue │ │ ├── password-input.vue │ │ ├── pin-input.vue │ │ ├── popover.vue │ │ ├── popper.vue │ │ ├── presence.vue │ │ ├── progress.vue │ │ ├── qr-code.vue │ │ ├── radio-group.vue │ │ ├── range-slider.vue │ │ ├── rating-group.vue │ │ ├── sandbox.vue │ │ ├── segment-control.vue │ │ ├── select.vue │ │ ├── signature-pad.vue │ │ ├── slider.vue │ │ ├── splitter.vue │ │ ├── steps.vue │ │ ├── switch.vue │ │ ├── tabs.vue │ │ ├── tags-input.vue │ │ ├── time-picker.vue │ │ ├── timer-countdown.vue │ │ ├── timer-stopwatch.vue │ │ ├── toast-overlap.vue │ │ ├── toast-stacked.vue │ │ ├── toggle-group.vue │ │ ├── toggle.vue │ │ ├── tooltip.vue │ │ ├── tour.vue │ │ └── tree-view.vue │ ├── public │ │ └── favicon.ico │ ├── server │ │ └── tsconfig.json │ └── tsconfig.json ├── preact-ts │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── src │ │ ├── components │ │ │ ├── show.tsx │ │ │ ├── state-visualizer.tsx │ │ │ └── toolbar.tsx │ │ ├── hooks │ │ │ ├── use-controls.tsx │ │ │ └── use-effect-once.ts │ │ ├── index.tsx │ │ ├── pages │ │ │ ├── _404.tsx │ │ │ ├── accordion.tsx │ │ │ ├── home.tsx │ │ │ └── number-input.tsx │ │ └── routes.ts │ ├── tsconfig.json │ └── vite.config.ts ├── solid-ts │ ├── .gitignore │ ├── README.md │ ├── app.config.ts │ ├── package.json │ ├── public │ │ └── favicon.ico │ ├── src │ │ ├── app.css │ │ ├── app.tsx │ │ ├── components │ │ │ ├── controls.tsx │ │ │ ├── iframe.tsx │ │ │ ├── loader.tsx │ │ │ ├── state-visualizer.tsx │ │ │ ├── toast-item.tsx │ │ │ └── toolbar.tsx │ │ ├── entry-client.tsx │ │ ├── entry-server.tsx │ │ ├── global.d.ts │ │ ├── hooks │ │ │ └── use-controls.tsx │ │ └── routes │ │ │ ├── [...404].tsx │ │ │ ├── accordion.tsx │ │ │ ├── angle-slider.tsx │ │ │ ├── avatar.tsx │ │ │ ├── carousel.tsx │ │ │ ├── checkbox.tsx │ │ │ ├── clipboard.tsx │ │ │ ├── collapsible.tsx │ │ │ ├── color-picker.tsx │ │ │ ├── combobox.tsx │ │ │ ├── context-menu.tsx │ │ │ ├── date-picker-range.tsx │ │ │ ├── date-picker.tsx │ │ │ ├── dialog.tsx │ │ │ ├── editable.tsx │ │ │ ├── file-upload.tsx │ │ │ ├── floating-panel.tsx │ │ │ ├── hover-card.tsx │ │ │ ├── index.tsx │ │ │ ├── listbox-grid.tsx │ │ │ ├── listbox.tsx │ │ │ ├── menu-nested.tsx │ │ │ ├── menu-options.tsx │ │ │ ├── menu.tsx │ │ │ ├── number-input.tsx │ │ │ ├── pagination.tsx │ │ │ ├── password-input.tsx │ │ │ ├── pin-input.tsx │ │ │ ├── popover.tsx │ │ │ ├── presence.tsx │ │ │ ├── progress.tsx │ │ │ ├── qr-code.tsx │ │ │ ├── radio-group.tsx │ │ │ ├── range-slider.tsx │ │ │ ├── rating-group.tsx │ │ │ ├── segment-control.tsx │ │ │ ├── select-shadow-dom.tsx │ │ │ ├── select.tsx │ │ │ ├── signature-pad.tsx │ │ │ ├── slider.tsx │ │ │ ├── splitter.tsx │ │ │ ├── steps.tsx │ │ │ ├── switch.tsx │ │ │ ├── tabs.tsx │ │ │ ├── tags-input.tsx │ │ │ ├── time-picker.tsx │ │ │ ├── timer-countdown.tsx │ │ │ ├── timer-stopwatch.tsx │ │ │ ├── toast-overlap.tsx │ │ │ ├── toast-stacked.tsx │ │ │ ├── toggle-group.tsx │ │ │ ├── toggle.tsx │ │ │ ├── tooltip-shadow-dom.tsx │ │ │ ├── tooltip.tsx │ │ │ ├── tour.tsx │ │ │ └── tree-view.tsx │ └── tsconfig.json ├── svelte-ts │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.svelte │ │ ├── lib │ │ │ ├── components │ │ │ │ ├── controls.svelte │ │ │ │ ├── iframe.svelte │ │ │ │ ├── state-visualizer.svelte │ │ │ │ ├── toast-item.svelte │ │ │ │ └── toolbar.svelte │ │ │ └── use-controls.svelte.ts │ │ ├── main.ts │ │ ├── routes │ │ │ ├── accordion.svelte │ │ │ ├── angle-slider.svelte │ │ │ ├── avatar.svelte │ │ │ ├── carousel.svelte │ │ │ ├── checkbox.svelte │ │ │ ├── clipboard.svelte │ │ │ ├── collapsible.svelte │ │ │ ├── color-picker.svelte │ │ │ ├── combobox.svelte │ │ │ ├── context-menu.svelte │ │ │ ├── date-picker-multi.svelte │ │ │ ├── date-picker-range.svelte │ │ │ ├── date-picker.svelte │ │ │ ├── dialog.svelte │ │ │ ├── editable.svelte │ │ │ ├── file-upload.svelte │ │ │ ├── floating-panel.svelte │ │ │ ├── hover-card.svelte │ │ │ ├── index.svelte │ │ │ ├── listbox-grid.svelte │ │ │ ├── listbox.svelte │ │ │ ├── menu-nested.svelte │ │ │ ├── menu-options.svelte │ │ │ ├── menu.svelte │ │ │ ├── number-input.svelte │ │ │ ├── pagination.svelte │ │ │ ├── password-input.svelte │ │ │ ├── pin-input.svelte │ │ │ ├── popover.svelte │ │ │ ├── popper.svelte │ │ │ ├── presence.svelte │ │ │ ├── progress.svelte │ │ │ ├── qr-code.svelte │ │ │ ├── radio-group.svelte │ │ │ ├── range-slider.svelte │ │ │ ├── rating-group.svelte │ │ │ ├── segment-control.svelte │ │ │ ├── select.svelte │ │ │ ├── signature-pad.svelte │ │ │ ├── slider.svelte │ │ │ ├── splitter.svelte │ │ │ ├── steps.svelte │ │ │ ├── switch.svelte │ │ │ ├── tabs.svelte │ │ │ ├── tags-input.svelte │ │ │ ├── time-picker.svelte │ │ │ ├── timer-countdown.svelte │ │ │ ├── timer-stopwatch.svelte │ │ │ ├── toast-overlap.svelte │ │ │ ├── toast-stacked.svelte │ │ │ ├── toggle-group.svelte │ │ │ ├── tooltip.svelte │ │ │ ├── tour.svelte │ │ │ └── tree-view.svelte │ │ └── vite-env.d.ts │ ├── svelte.config.js │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts └── vanilla-ts │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── pages │ ├── accordion.html │ ├── accordion.ts │ ├── avatar.html │ ├── avatar.ts │ ├── checkbox.html │ ├── checkbox.ts │ ├── combobox.html │ ├── combobox.ts │ ├── counter.html │ ├── counter.ts │ ├── popover.html │ └── popover.ts │ ├── public │ └── vite.svg │ ├── src │ ├── accordion.ts │ ├── avatar.ts │ ├── checkbox.ts │ ├── combobox.ts │ ├── component.ts │ ├── lib │ │ ├── bindable.ts │ │ ├── index.ts │ │ ├── machine.ts │ │ ├── normalize-props.ts │ │ ├── refs.ts │ │ └── spread-props.ts │ ├── popover.ts │ ├── typescript.svg │ └── vite-env.d.ts │ └── tsconfig.json ├── package.json ├── packages ├── anatomy-icons │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── scripts │ │ └── generate.mjs │ ├── src │ │ ├── components │ │ │ ├── accordion.tsx │ │ │ ├── avatar.tsx │ │ │ ├── carousel.tsx │ │ │ ├── checkbox.tsx │ │ │ ├── circular-progress.tsx │ │ │ ├── clipboard.tsx │ │ │ ├── color-picker.tsx │ │ │ ├── combobox.tsx │ │ │ ├── date-picker.tsx │ │ │ ├── dialog.tsx │ │ │ ├── editable.tsx │ │ │ ├── field.tsx │ │ │ ├── fieldset.tsx │ │ │ ├── file-upload.tsx │ │ │ ├── floating-panel.tsx │ │ │ ├── hover-card.tsx │ │ │ ├── index.ts │ │ │ ├── linear-progress.tsx │ │ │ ├── menu.tsx │ │ │ ├── number-input.tsx │ │ │ ├── pagination.tsx │ │ │ ├── password-input.tsx │ │ │ ├── pin-input.tsx │ │ │ ├── popover.tsx │ │ │ ├── qr-code.tsx │ │ │ ├── radio-group.tsx │ │ │ ├── rating-group.tsx │ │ │ ├── segmented-control.tsx │ │ │ ├── select.tsx │ │ │ ├── signature-pad.tsx │ │ │ ├── slider.tsx │ │ │ ├── splitter.tsx │ │ │ ├── steps.tsx │ │ │ ├── switch.tsx │ │ │ ├── tabs.tsx │ │ │ ├── tags-input.tsx │ │ │ ├── time-picker.tsx │ │ │ ├── toast.tsx │ │ │ ├── toggle-group.tsx │ │ │ ├── tooltip.tsx │ │ │ ├── tour.tsx │ │ │ └── tree-view.tsx │ │ ├── create-component.tsx │ │ ├── create-gradient.ts │ │ ├── create-palette.ts │ │ └── index.ts │ └── tsconfig.json ├── anatomy │ ├── CHANGELOG.md │ ├── package.json │ ├── src │ │ ├── create-anatomy.ts │ │ └── index.ts │ ├── tests │ │ └── create-anatomy.test.ts │ └── tsconfig.json ├── core │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── create-machine.ts │ │ ├── index.ts │ │ ├── memo.ts │ │ ├── merge-props.ts │ │ ├── scope.ts │ │ └── types.ts │ └── tsconfig.json ├── docs │ ├── CHANGELOG.md │ ├── README.md │ ├── data │ │ ├── accessibility.json │ │ ├── api.json │ │ └── data-attr.json │ ├── package.json │ ├── src │ │ └── index.ts │ └── tsconfig.json ├── frameworks │ ├── preact │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ ├── src │ │ │ ├── bindable.ts │ │ │ ├── index.ts │ │ │ ├── machine.ts │ │ │ ├── normalize-props.ts │ │ │ ├── portal.tsx │ │ │ ├── refs.ts │ │ │ └── track.ts │ │ ├── tsconfig.json │ │ └── tsup.config.ts │ ├── react │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ ├── src │ │ │ ├── bindable.ts │ │ │ ├── index.ts │ │ │ ├── machine.ts │ │ │ ├── normalize-props.ts │ │ │ ├── portal.tsx │ │ │ ├── refs.ts │ │ │ ├── track.ts │ │ │ └── use-layout-effect.ts │ │ ├── tests │ │ │ └── machine.test.ts │ │ ├── tsconfig.json │ │ ├── tsup.config.ts │ │ ├── vite.config.ts │ │ └── vitest.setup.ts │ ├── solid │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ ├── src │ │ │ ├── bindable.ts │ │ │ ├── index.ts │ │ │ ├── machine.ts │ │ │ ├── merge-props.ts │ │ │ ├── normalize-props.ts │ │ │ ├── refs.ts │ │ │ └── track.ts │ │ ├── tests │ │ │ └── merge-props.test.ts │ │ ├── tsconfig.json │ │ ├── vite.config.ts │ │ └── vitest.setup.ts │ ├── svelte │ │ ├── CHANGELOG.md │ │ ├── clean-package.config.json │ │ ├── package.json │ │ ├── src │ │ │ ├── bindable.svelte.ts │ │ │ ├── index.ts │ │ │ ├── machine.svelte.ts │ │ │ ├── merge-props.ts │ │ │ ├── normalize-props.ts │ │ │ ├── portal.ts │ │ │ ├── reflect.ts │ │ │ ├── refs.svelte.ts │ │ │ └── track.svelte.ts │ │ ├── tests │ │ │ └── merge-props.test.ts │ │ ├── tsconfig.json │ │ └── vite.config.ts │ └── vue │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ ├── src │ │ ├── bindable.ts │ │ ├── index.ts │ │ ├── machine.ts │ │ ├── normalize-props.ts │ │ ├── refs.ts │ │ └── track.ts │ │ └── tsconfig.json ├── machines │ ├── accordion │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── accordion.anatomy.ts │ │ │ ├── accordion.connect.ts │ │ │ ├── accordion.dom.ts │ │ │ ├── accordion.machine.ts │ │ │ ├── accordion.props.ts │ │ │ ├── accordion.types.ts │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── angle-slider │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── angle-slider.anatomy.ts │ │ │ ├── angle-slider.connect.ts │ │ │ ├── angle-slider.dom.ts │ │ │ ├── angle-slider.machine.ts │ │ │ ├── angle-slider.props.ts │ │ │ ├── angle-slider.types.ts │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── avatar │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── avatar.anatomy.ts │ │ │ ├── avatar.connect.ts │ │ │ ├── avatar.dom.ts │ │ │ ├── avatar.machine.ts │ │ │ ├── avatar.props.ts │ │ │ ├── avatar.types.ts │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── carousel │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── carousel.anatomy.ts │ │ │ ├── carousel.connect.ts │ │ │ ├── carousel.dom.ts │ │ │ ├── carousel.machine.ts │ │ │ ├── carousel.props.ts │ │ │ ├── carousel.types.ts │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── checkbox │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── checkbox.anatomy.ts │ │ │ ├── checkbox.connect.ts │ │ │ ├── checkbox.dom.ts │ │ │ ├── checkbox.machine.ts │ │ │ ├── checkbox.props.ts │ │ │ ├── checkbox.types.ts │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── clipboard │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── clipboard.anatomy.ts │ │ │ ├── clipboard.connect.ts │ │ │ ├── clipboard.dom.ts │ │ │ ├── clipboard.machine.ts │ │ │ ├── clipboard.props.ts │ │ │ ├── clipboard.types.ts │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── collapsible │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── collapsible.anatomy.ts │ │ │ ├── collapsible.connect.ts │ │ │ ├── collapsible.dom.ts │ │ │ ├── collapsible.machine.ts │ │ │ ├── collapsible.props.ts │ │ │ ├── collapsible.types.ts │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── color-picker │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── color-picker.anatomy.ts │ │ │ ├── color-picker.connect.ts │ │ │ ├── color-picker.dom.ts │ │ │ ├── color-picker.machine.ts │ │ │ ├── color-picker.parse.ts │ │ │ ├── color-picker.props.ts │ │ │ ├── color-picker.types.ts │ │ │ ├── index.ts │ │ │ └── utils │ │ │ │ ├── get-channel-display-color.ts │ │ │ │ ├── get-channel-input-value.ts │ │ │ │ └── get-slider-background.ts │ │ └── tsconfig.json │ ├── combobox │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── combobox.anatomy.ts │ │ │ ├── combobox.collection.ts │ │ │ ├── combobox.connect.ts │ │ │ ├── combobox.dom.ts │ │ │ ├── combobox.machine.ts │ │ │ ├── combobox.props.ts │ │ │ ├── combobox.types.ts │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── date-picker │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── date-picker.anatomy.ts │ │ │ ├── date-picker.connect.ts │ │ │ ├── date-picker.dom.ts │ │ │ ├── date-picker.machine.ts │ │ │ ├── date-picker.parse.ts │ │ │ ├── date-picker.props.ts │ │ │ ├── date-picker.types.ts │ │ │ ├── date-picker.utils.ts │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── dialog │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── dialog.anatomy.ts │ │ │ ├── dialog.connect.ts │ │ │ ├── dialog.dom.ts │ │ │ ├── dialog.machine.ts │ │ │ ├── dialog.props.ts │ │ │ ├── dialog.types.ts │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── editable │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── editable.anatomy.ts │ │ │ ├── editable.connect.ts │ │ │ ├── editable.dom.ts │ │ │ ├── editable.machine.ts │ │ │ ├── editable.props.ts │ │ │ ├── editable.types.ts │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── file-upload │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── file-upload.anatomy.ts │ │ │ ├── file-upload.connect.ts │ │ │ ├── file-upload.dom.ts │ │ │ ├── file-upload.machine.ts │ │ │ ├── file-upload.props.ts │ │ │ ├── file-upload.types.ts │ │ │ ├── file-upload.utils.ts │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── floating-panel │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── floating-panel.anatomy.ts │ │ │ ├── floating-panel.connect.ts │ │ │ ├── floating-panel.dom.ts │ │ │ ├── floating-panel.machine.ts │ │ │ ├── floating-panel.props.ts │ │ │ ├── floating-panel.store.ts │ │ │ ├── floating-panel.types.ts │ │ │ ├── get-resize-axis-style.ts │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── hover-card │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── hover-card.anatomy.ts │ │ │ ├── hover-card.connect.ts │ │ │ ├── hover-card.dom.ts │ │ │ ├── hover-card.machine.ts │ │ │ ├── hover-card.props.ts │ │ │ ├── hover-card.types.ts │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── listbox │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── index.ts │ │ │ ├── listbox.anatomy.ts │ │ │ ├── listbox.collection.ts │ │ │ ├── listbox.connect.ts │ │ │ ├── listbox.dom.ts │ │ │ ├── listbox.machine.ts │ │ │ ├── listbox.props.ts │ │ │ └── listbox.types.ts │ │ └── tsconfig.json │ ├── menu │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── index.ts │ │ │ ├── menu.anatomy.ts │ │ │ ├── menu.connect.ts │ │ │ ├── menu.dom.ts │ │ │ ├── menu.machine.ts │ │ │ ├── menu.props.ts │ │ │ └── menu.types.ts │ │ └── tsconfig.json │ ├── navigation-menu │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── auto-reset.ts │ │ │ ├── index.ts │ │ │ ├── navigation-menu.anatomy.ts │ │ │ ├── navigation-menu.connect.ts │ │ │ ├── navigation-menu.dom.ts │ │ │ ├── navigation-menu.machine.ts │ │ │ ├── navigation-menu.props.ts │ │ │ └── navigation-menu.types.ts │ │ └── tsconfig.json │ ├── number-input │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── cursor.ts │ │ │ ├── index.ts │ │ │ ├── number-input.anatomy.ts │ │ │ ├── number-input.connect.ts │ │ │ ├── number-input.dom.ts │ │ │ ├── number-input.machine.ts │ │ │ ├── number-input.props.ts │ │ │ ├── number-input.types.ts │ │ │ └── number-input.utils.ts │ │ └── tsconfig.json │ ├── pagination │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── index.ts │ │ │ ├── pagination.anatomy.ts │ │ │ ├── pagination.connect.ts │ │ │ ├── pagination.dom.ts │ │ │ ├── pagination.machine.ts │ │ │ ├── pagination.props.ts │ │ │ ├── pagination.types.ts │ │ │ └── pagination.utils.ts │ │ ├── tests │ │ │ ├── pagination.utils.test-cases.ts │ │ │ └── pagination.utils.test.ts │ │ └── tsconfig.json │ ├── password-input │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── index.ts │ │ │ ├── password-input.anatomy.ts │ │ │ ├── password-input.connect.ts │ │ │ ├── password-input.dom.ts │ │ │ ├── password-input.machine.ts │ │ │ ├── password-input.props.ts │ │ │ └── password-input.types.ts │ │ └── tsconfig.json │ ├── pin-input │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── index.ts │ │ │ ├── pin-input.anatomy.ts │ │ │ ├── pin-input.connect.ts │ │ │ ├── pin-input.dom.ts │ │ │ ├── pin-input.machine.ts │ │ │ ├── pin-input.props.ts │ │ │ ├── pin-input.types.ts │ │ │ └── pin-input.utils.ts │ │ └── tsconfig.json │ ├── popover │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── index.ts │ │ │ ├── popover.anatomy.ts │ │ │ ├── popover.connect.ts │ │ │ ├── popover.dom.ts │ │ │ ├── popover.machine.ts │ │ │ ├── popover.props.ts │ │ │ └── popover.types.ts │ │ └── tsconfig.json │ ├── presence │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── index.ts │ │ │ ├── presence.connect.ts │ │ │ ├── presence.machine.ts │ │ │ ├── presence.props.ts │ │ │ └── presence.types.ts │ │ └── tsconfig.json │ ├── progress │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── index.ts │ │ │ ├── progress.anatomy.ts │ │ │ ├── progress.connect.ts │ │ │ ├── progress.dom.ts │ │ │ ├── progress.machine.ts │ │ │ ├── progress.props.ts │ │ │ └── progress.types.ts │ │ └── tsconfig.json │ ├── qr-code │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── index.ts │ │ │ ├── qr-code.anatomy.ts │ │ │ ├── qr-code.connect.ts │ │ │ ├── qr-code.dom.ts │ │ │ ├── qr-code.machine.ts │ │ │ ├── qr-code.props.ts │ │ │ └── qr-code.types.ts │ │ └── tsconfig.json │ ├── radio-group │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── index.ts │ │ │ ├── radio-group.anatomy.ts │ │ │ ├── radio-group.connect.ts │ │ │ ├── radio-group.dom.ts │ │ │ ├── radio-group.machine.ts │ │ │ ├── radio-group.props.ts │ │ │ └── radio-group.types.ts │ │ └── tsconfig.json │ ├── rating-group │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── index.ts │ │ │ ├── rating-group.anatomy.ts │ │ │ ├── rating-group.connect.ts │ │ │ ├── rating-group.dom.ts │ │ │ ├── rating-group.machine.ts │ │ │ ├── rating-group.props.ts │ │ │ └── rating-group.types.ts │ │ └── tsconfig.json │ ├── select │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── index.ts │ │ │ ├── select.anatomy.ts │ │ │ ├── select.collection.ts │ │ │ ├── select.connect.ts │ │ │ ├── select.dom.ts │ │ │ ├── select.machine.ts │ │ │ ├── select.props.ts │ │ │ └── select.types.ts │ │ └── tsconfig.json │ ├── signature-pad │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── get-svg-path.ts │ │ │ ├── index.ts │ │ │ ├── signature-pad.anatomy.ts │ │ │ ├── signature-pad.connect.ts │ │ │ ├── signature-pad.dom.ts │ │ │ ├── signature-pad.machine.ts │ │ │ ├── signature-pad.props.ts │ │ │ └── signature-pad.types.ts │ │ └── tsconfig.json │ ├── slider │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── index.ts │ │ │ ├── slider.anatomy.ts │ │ │ ├── slider.connect.ts │ │ │ ├── slider.dom.ts │ │ │ ├── slider.machine.ts │ │ │ ├── slider.props.ts │ │ │ ├── slider.style.ts │ │ │ ├── slider.types.ts │ │ │ └── slider.utils.ts │ │ └── tsconfig.json │ ├── splitter │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── index.ts │ │ │ ├── splitter.anatomy.ts │ │ │ ├── splitter.connect.ts │ │ │ ├── splitter.dom.ts │ │ │ ├── splitter.machine.ts │ │ │ ├── splitter.props.ts │ │ │ ├── splitter.types.ts │ │ │ └── utils │ │ │ │ ├── aria.ts │ │ │ │ ├── fuzzy.ts │ │ │ │ ├── panel.ts │ │ │ │ ├── resize-by-delta.ts │ │ │ │ ├── resize-panel.ts │ │ │ │ └── validate-sizes.ts │ │ └── tsconfig.json │ ├── steps │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── index.ts │ │ │ ├── steps.anatomy.ts │ │ │ ├── steps.connect.ts │ │ │ ├── steps.dom.ts │ │ │ ├── steps.machine.ts │ │ │ ├── steps.props.ts │ │ │ └── steps.types.ts │ │ └── tsconfig.json │ ├── switch │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── index.ts │ │ │ ├── switch.anatomy.ts │ │ │ ├── switch.connect.ts │ │ │ ├── switch.dom.ts │ │ │ ├── switch.machine.ts │ │ │ ├── switch.props.ts │ │ │ └── switch.types.ts │ │ └── tsconfig.json │ ├── tabs │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── index.ts │ │ │ ├── tabs.anatomy.ts │ │ │ ├── tabs.connect.ts │ │ │ ├── tabs.dom.ts │ │ │ ├── tabs.machine.ts │ │ │ ├── tabs.props.ts │ │ │ └── tabs.types.ts │ │ └── tsconfig.json │ ├── tags-input │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── index.ts │ │ │ ├── tags-input.anatomy.ts │ │ │ ├── tags-input.connect.ts │ │ │ ├── tags-input.dom.ts │ │ │ ├── tags-input.machine.ts │ │ │ ├── tags-input.props.ts │ │ │ └── tags-input.types.ts │ │ └── tsconfig.json │ ├── time-picker │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── index.ts │ │ │ ├── time-picker.anatomy.ts │ │ │ ├── time-picker.connect.ts │ │ │ ├── time-picker.dom.ts │ │ │ ├── time-picker.machine.ts │ │ │ ├── time-picker.parse.ts │ │ │ ├── time-picker.props.ts │ │ │ ├── time-picker.types.ts │ │ │ └── time-picker.utils.ts │ │ └── tsconfig.json │ ├── timer │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── index.ts │ │ │ ├── timer.anatomy.ts │ │ │ ├── timer.connect.ts │ │ │ ├── timer.dom.ts │ │ │ ├── timer.machine.ts │ │ │ ├── timer.parse.ts │ │ │ ├── timer.props.ts │ │ │ └── timer.types.ts │ │ └── tsconfig.json │ ├── toast │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── index.ts │ │ │ ├── toast-group.connect.ts │ │ │ ├── toast-group.machine.ts │ │ │ ├── toast.anatomy.ts │ │ │ ├── toast.connect.ts │ │ │ ├── toast.dom.ts │ │ │ ├── toast.machine.ts │ │ │ ├── toast.store.ts │ │ │ ├── toast.types.ts │ │ │ └── toast.utils.ts │ │ └── tsconfig.json │ ├── toggle-group │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── index.ts │ │ │ ├── toggle-group.anatomy.ts │ │ │ ├── toggle-group.connect.ts │ │ │ ├── toggle-group.dom.ts │ │ │ ├── toggle-group.machine.ts │ │ │ ├── toggle-group.props.ts │ │ │ └── toggle-group.types.ts │ │ └── tsconfig.json │ ├── toggle │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── index.ts │ │ │ ├── toggle.anatomy.ts │ │ │ ├── toggle.connect.ts │ │ │ ├── toggle.machine.ts │ │ │ ├── toggle.props.ts │ │ │ └── toggle.types.ts │ │ └── tsconfig.json │ ├── tooltip │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── index.ts │ │ │ ├── tooltip.anatomy.ts │ │ │ ├── tooltip.connect.ts │ │ │ ├── tooltip.dom.ts │ │ │ ├── tooltip.machine.ts │ │ │ ├── tooltip.props.ts │ │ │ ├── tooltip.store.ts │ │ │ └── tooltip.types.ts │ │ └── tsconfig.json │ ├── tour │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── index.ts │ │ │ ├── tour.anatomy.ts │ │ │ ├── tour.connect.ts │ │ │ ├── tour.dom.ts │ │ │ ├── tour.machine.ts │ │ │ ├── tour.props.ts │ │ │ ├── tour.types.ts │ │ │ └── utils │ │ │ │ ├── clip-path.ts │ │ │ │ ├── rect.ts │ │ │ │ ├── step.ts │ │ │ │ └── wait.ts │ │ └── tsconfig.json │ └── tree-view │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ ├── index.ts │ │ ├── tree-view.anatomy.ts │ │ ├── tree-view.collection.ts │ │ ├── tree-view.connect.ts │ │ ├── tree-view.dom.ts │ │ ├── tree-view.machine.ts │ │ ├── tree-view.props.ts │ │ ├── tree-view.types.ts │ │ └── tree-view.utils.ts │ │ └── tsconfig.json ├── store │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── clone.ts │ │ ├── global.ts │ │ ├── index.ts │ │ ├── proxy-computed.ts │ │ ├── proxy.ts │ │ └── utils.ts │ └── tsconfig.json ├── types │ ├── CHANGELOG.md │ ├── package.json │ ├── src │ │ ├── create-props.ts │ │ ├── index.ts │ │ ├── jsx.ts │ │ └── prop-types.ts │ └── tsconfig.json └── utilities │ ├── aria-hidden │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── aria-hidden.ts │ │ ├── index.ts │ │ └── walk-tree-outside.ts │ └── tsconfig.json │ ├── auto-resize │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── autoresize-input.ts │ │ ├── autoresize-textarea.ts │ │ ├── index.ts │ │ └── visual-style.ts │ └── tsconfig.json │ ├── collection │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── grid-collection.ts │ │ ├── index.ts │ │ ├── list-collection.ts │ │ ├── selection.ts │ │ ├── tree-collection.ts │ │ ├── tree-visit.ts │ │ └── types.ts │ ├── tests │ │ ├── grid-collection.test.ts │ │ ├── list-collection.test.ts │ │ ├── selection.test.ts │ │ ├── tree-collection.test.ts │ │ ├── tree-diagram.ts │ │ └── tree-skip.test.ts │ └── tsconfig.json │ ├── color-utils │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── area-gradient.ts │ │ ├── color-format-gradient.ts │ │ ├── color.ts │ │ ├── hsb-color.ts │ │ ├── hsl-color.ts │ │ ├── index.ts │ │ ├── native-color.ts │ │ ├── parse-color.ts │ │ ├── rgb-color.ts │ │ └── types.ts │ ├── tests │ │ └── color.test.ts │ └── tsconfig.json │ ├── core │ ├── CHANGELOG.md │ ├── package.json │ ├── src │ │ ├── array.ts │ │ ├── equal.ts │ │ ├── functions.ts │ │ ├── guard.ts │ │ ├── index.ts │ │ ├── number.ts │ │ ├── object.ts │ │ ├── timers.ts │ │ └── warning.ts │ ├── tests │ │ ├── equal.test.ts │ │ ├── number.test.ts │ │ └── object.test.ts │ └── tsconfig.json │ ├── date-utils │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── align.ts │ │ ├── assertion.ts │ │ ├── constrain.ts │ │ ├── date-month.ts │ │ ├── date-year.ts │ │ ├── duration.ts │ │ ├── format.ts │ │ ├── formatter.ts │ │ ├── get-era-format.ts │ │ ├── index.ts │ │ ├── mutation.ts │ │ ├── pagination.ts │ │ ├── parse-date.ts │ │ ├── preset.ts │ │ └── types.ts │ ├── tests │ │ ├── assertion.test.ts │ │ ├── date.test.ts │ │ ├── format.test.ts │ │ ├── get-decade-range.test.ts │ │ ├── get-month-days.test.ts │ │ ├── get-month-names.test.ts │ │ ├── get-start-of-week.test.ts │ │ ├── get-week-days.test.ts │ │ ├── get-weekday-formats.test.ts │ │ ├── normalize-year.test.ts │ │ ├── parse-date.test.ts │ │ └── year-range.test.ts │ └── tsconfig.json │ ├── dismissable │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── dismissable-layer.ts │ │ ├── escape-keydown.ts │ │ ├── index.ts │ │ ├── layer-stack.ts │ │ └── pointer-event-outside.ts │ └── tsconfig.json │ ├── dom-query │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── caret.ts │ │ ├── computed-style.ts │ │ ├── data-url.ts │ │ ├── event.ts │ │ ├── form.ts │ │ ├── index.ts │ │ ├── initial-focus.ts │ │ ├── mutation-observer.ts │ │ ├── navigate.ts │ │ ├── node.ts │ │ ├── overflow.ts │ │ ├── platform.ts │ │ ├── point.ts │ │ ├── pointer-lock.ts │ │ ├── pointer-move.ts │ │ ├── press.ts │ │ ├── proxy-tab-focus.ts │ │ ├── query.ts │ │ ├── raf.ts │ │ ├── resize-observer.ts │ │ ├── scope.ts │ │ ├── searchable.ts │ │ ├── set.ts │ │ ├── shared.ts │ │ ├── tabbable.ts │ │ ├── text-selection.ts │ │ ├── typeahead.ts │ │ ├── types.ts │ │ ├── visual-viewport.ts │ │ ├── visually-hidden.ts │ │ └── wait-for.ts │ └── tsconfig.json │ ├── file-utils │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── data-transfer.ts │ │ ├── data-url-to-blob.ts │ │ ├── download-file.ts │ │ ├── get-accept-attr.ts │ │ ├── get-file-data-url.ts │ │ ├── get-total-file-size.ts │ │ ├── index.ts │ │ ├── is-file-equal.ts │ │ ├── is-valid-file-size.ts │ │ ├── is-valid-file-type.ts │ │ └── types.ts │ └── tsconfig.json │ ├── focus-trap │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── focus-trap.ts │ │ ├── index.ts │ │ └── types.ts │ └── tsconfig.json │ ├── focus-visible │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ └── index.ts │ └── tsconfig.json │ ├── highlight-word │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── highlight-first.ts │ │ ├── highlight-multiple.ts │ │ ├── highlight.ts │ │ ├── index.ts │ │ ├── normalize-span.ts │ │ └── types.ts │ ├── tests │ │ └── highlight-word.test.ts │ └── tsconfig.json │ ├── i18n-utils │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── cache.ts │ │ ├── filter.ts │ │ ├── format-bytes.ts │ │ ├── format-date.ts │ │ ├── format-list.ts │ │ ├── format-number.ts │ │ ├── format-relative-time.ts │ │ ├── index.ts │ │ ├── is-rtl.ts │ │ ├── locale.ts │ │ └── track-locale.ts │ ├── tests │ │ ├── format-byte.test.ts │ │ ├── format-date.test.ts │ │ ├── format-list.test.ts │ │ └── format-relative-time.test.ts │ └── tsconfig.json │ ├── interact-outside │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── frame-utils.ts │ │ └── index.ts │ └── tsconfig.json │ ├── live-region │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ └── index.ts │ └── tsconfig.json │ ├── popper │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── get-anchor.ts │ │ ├── get-placement.ts │ │ ├── get-styles.ts │ │ ├── index.ts │ │ ├── middleware.ts │ │ ├── placement.ts │ │ └── types.ts │ └── tsconfig.json │ ├── rect │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── affine-transform.ts │ │ ├── align.ts │ │ ├── angle.ts │ │ ├── clamp.ts │ │ ├── closest.ts │ │ ├── compass.ts │ │ ├── constrain.ts │ │ ├── contains.ts │ │ ├── distance.ts │ │ ├── equality.ts │ │ ├── from-element.ts │ │ ├── from-points.ts │ │ ├── from-range.ts │ │ ├── from-rotation.ts │ │ ├── from-window.ts │ │ ├── index.ts │ │ ├── intersection.ts │ │ ├── operations.ts │ │ ├── polygon.ts │ │ ├── rect.ts │ │ ├── resize.ts │ │ ├── types.ts │ │ └── union.ts │ ├── tests │ │ └── rect.test.ts │ └── tsconfig.json │ ├── remove-scroll │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ └── index.ts │ └── tsconfig.json │ ├── scroll-snap │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ └── index.ts │ └── tsconfig.json │ └── stringify-state │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ ├── index.ts │ └── json-format-highlight.d.ts │ └── tsconfig.json ├── playwright.config.ts ├── plop ├── machine-examples │ ├── next-ts │ │ └── pages │ │ │ └── {{machine}}.tsx.hbs │ ├── nuxt-ts │ │ └── pages │ │ │ └── {{machine}}.vue.hbs │ └── solid-ts │ │ └── src │ │ └── routes │ │ └── {{machine}}.tsx.hbs ├── machine │ ├── README.md.hbs │ ├── package.json.hbs │ ├── src │ │ ├── index.ts.hbs │ │ ├── {{machine}}.anatomy.ts.hbs │ │ ├── {{machine}}.connect.ts.hbs │ │ ├── {{machine}}.dom.ts.hbs │ │ ├── {{machine}}.machine.ts.hbs │ │ ├── {{machine}}.props.ts.hbs │ │ └── {{machine}}.types.ts.hbs │ └── tsconfig.json.hbs └── utility │ ├── README.md.hbs │ ├── package.json.hbs │ ├── src │ └── index.ts │ └── tsconfig.json.hbs ├── plopfile.js ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── renovate.json ├── scripts ├── data-attr.ts ├── get-packages.ts ├── logger.ts ├── play.ts ├── slack.ts ├── sync-packages.ts └── typedocs.ts ├── shared ├── CHANGELOG.md ├── index.ts ├── package.json ├── src │ ├── command.ts │ ├── controls.ts │ ├── country-list.ts │ ├── css │ │ ├── accordion.css │ │ ├── anatomy.css │ │ ├── angle-slider.css │ │ ├── avatar.css │ │ ├── carousel.css │ │ ├── checkbox.css │ │ ├── clipboard.css │ │ ├── collapsible.css │ │ ├── color-picker.css │ │ ├── combobox.css │ │ ├── date-picker.css │ │ ├── dialog.css │ │ ├── editable.css │ │ ├── file-upload.css │ │ ├── floating-panel.css │ │ ├── hover-card.css │ │ ├── layout.css │ │ ├── listbox.css │ │ ├── menu.css │ │ ├── navigation-menu-keyframes.css │ │ ├── navigation-menu-nested.css │ │ ├── navigation-menu-viewport.css │ │ ├── navigation-menu.css │ │ ├── number-input.css │ │ ├── pagination.css │ │ ├── password-input.css │ │ ├── pin-input.css │ │ ├── popover.css │ │ ├── presence.css │ │ ├── progress.css │ │ ├── qr-code.css │ │ ├── radio-group.css │ │ ├── rating-group.css │ │ ├── segmented-control.css │ │ ├── select.css │ │ ├── signature-pad.css │ │ ├── slider.css │ │ ├── splitter.css │ │ ├── steps.css │ │ ├── swap.css │ │ ├── switch.css │ │ ├── tabs.css │ │ ├── tags-input.css │ │ ├── time-picker.css │ │ ├── timer.css │ │ ├── toast.css │ │ ├── toggle-group.css │ │ ├── toggle.css │ │ ├── tooltip.css │ │ ├── tour.css │ │ └── tree-view.css │ ├── data.ts │ ├── deep-get-set.ts │ ├── define-controls.ts │ ├── index.ts │ ├── pagination-data.ts │ ├── routes.ts │ └── style.css └── tsconfig.json ├── starters └── react │ ├── .gitignore │ ├── README.md │ ├── app │ ├── accordion │ │ └── collapsible │ │ │ └── page.tsx │ ├── collapsible │ │ ├── controlled │ │ │ └── page.tsx │ │ └── uncontrolled │ │ │ └── page.tsx │ ├── color-picker │ │ └── controlled │ │ │ └── page.tsx │ ├── date-picker │ │ └── controlled-range-picker │ │ │ └── page.tsx │ ├── dialog │ │ ├── controlled │ │ │ └── page.tsx │ │ └── search-params │ │ │ └── page.tsx │ ├── favicon.ico │ ├── hover-card │ │ └── controlled │ │ │ └── page.tsx │ ├── layout.tsx │ ├── menu │ │ └── controlled │ │ │ └── page.tsx │ ├── page.tsx │ ├── popover │ │ └── controlled │ │ │ └── page.tsx │ ├── presence │ │ ├── page.css │ │ └── page.tsx │ ├── select │ │ ├── controlled │ │ │ └── page.tsx │ │ ├── mobile-touchend │ │ │ └── page.tsx │ │ ├── search-params │ │ │ └── page.tsx │ │ └── virtualized │ │ │ └── page.tsx │ └── tooltip │ │ ├── controlled-multiple │ │ └── page.tsx │ │ └── controlled │ │ └── page.tsx │ ├── components │ ├── accordion.tsx │ ├── button.tsx │ ├── clipboard.tsx │ ├── collapsible.tsx │ ├── color-picker.tsx │ ├── date-range-picker.tsx │ ├── dialog.tsx │ ├── hover-card.tsx │ ├── menu.tsx │ ├── popover.tsx │ ├── presence.tsx │ ├── select.tsx │ ├── show.tsx │ ├── signature-pad.tsx │ ├── tooltip.tsx │ ├── use-render.ts │ └── virtualized-select.tsx │ ├── eslint.config.mjs │ ├── next.config.js │ ├── package.json │ ├── public │ ├── next.svg │ └── vercel.svg │ └── tsconfig.json ├── tsconfig.eslint.json ├── tsconfig.json ├── tsup.config.ts ├── vite.config.ts └── website ├── .npmrc ├── .prettierignore ├── .prettierrc ├── components ├── button.tsx ├── code-area.tsx ├── copy-button.tsx ├── data-attr-table.tsx ├── footer-link.tsx ├── footer.tsx ├── framework-select.tsx ├── framework.tsx ├── icon-link.tsx ├── icons.tsx ├── illustration.tsx ├── kbd.tsx ├── keyboard-table.tsx ├── logo.tsx ├── mdx-components.tsx ├── mdx-footer.tsx ├── mobile-navigation.tsx ├── multi-framework.tsx ├── nigeria-flag.tsx ├── pagination.tsx ├── playground.tsx ├── prop-table.tsx ├── search-dialog.tsx ├── search-trigger.tsx ├── sidebar.tsx ├── skip-nav.tsx ├── theme-toggle.tsx ├── toc.tsx ├── top-navigation.tsx ├── use-scrollspy.ts ├── version-selector.tsx └── workshop-link.tsx ├── contentlayer.config.ts ├── data ├── components │ ├── accordion.mdx │ ├── angle-slider.mdx │ ├── avatar.mdx │ ├── carousel.mdx │ ├── checkbox.mdx │ ├── circular-progress.mdx │ ├── clipboard.mdx │ ├── collapsible.mdx │ ├── color-picker.mdx │ ├── combobox.mdx │ ├── context-menu.mdx │ ├── date-picker.mdx │ ├── dialog.mdx │ ├── editable.mdx │ ├── file-upload.mdx │ ├── floating-panel.mdx │ ├── hover-card.mdx │ ├── linear-progress.mdx │ ├── listbox.mdx │ ├── menu.mdx │ ├── nested-menu.mdx │ ├── number-input.mdx │ ├── pagination.mdx │ ├── password-input.mdx │ ├── pin-input.mdx │ ├── popover.mdx │ ├── presence.mdx │ ├── qr-code.mdx │ ├── radio-group.mdx │ ├── range-slider.mdx │ ├── rating-group.mdx │ ├── segmented-control.mdx │ ├── select.mdx │ ├── signature-pad.mdx │ ├── slider.mdx │ ├── splitter.mdx │ ├── steps.mdx │ ├── switch.mdx │ ├── tabs.mdx │ ├── tags-input.mdx │ ├── time-picker.mdx │ ├── timer.mdx │ ├── toast.mdx │ ├── toggle-group.mdx │ ├── tooltip.mdx │ ├── tour.mdx │ └── tree-view.mdx ├── guides │ ├── collection.mdx │ ├── composition.mdx │ ├── migration.mdx │ ├── programmatic-control.mdx │ └── styling.mdx ├── overview │ ├── faq.mdx │ ├── installation.mdx │ ├── introduction.mdx │ ├── llms-txt.mdx │ └── whats-a-machine.mdx └── snippets │ ├── react │ ├── accordion │ │ ├── component.api.mdx │ │ ├── component.usage.mdx │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── angle-slider │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ ├── tick-marks.mdx │ │ └── usage.mdx │ ├── avatar │ │ ├── component.api.mdx │ │ ├── component.usage.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── carousel │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── checkbox │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── clipboard │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── collapsible │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── color-picker │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ ├── usage.mdx │ │ ├── with-channel-inputs.mdx │ │ ├── with-eye-dropper.mdx │ │ ├── with-preview.mdx │ │ └── with-swatches.mdx │ ├── combobox │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── date-picker │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── dialog │ │ ├── controlled.mdx │ │ ├── initial-focus.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── editable │ │ ├── custom-controls.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── file-upload │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── floating-panel │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── hover-card │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── listbox │ │ ├── filtering.mdx │ │ ├── grid-usage.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── menu │ │ ├── context-menu.mdx │ │ ├── installation.mdx │ │ ├── nested-menu.mdx │ │ ├── option-items.mdx │ │ └── usage.mdx │ ├── number-input │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ ├── scrubber.mdx │ │ └── usage.mdx │ ├── pagination │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── password-input │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── pin-input │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── popover │ │ ├── initial-focus.mdx │ │ ├── installation.mdx │ │ ├── render-in-portal.mdx │ │ └── usage.mdx │ ├── presence │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── progress │ │ ├── circular.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── qr-code │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── radio-group │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── range-slider │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── rating-group │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── segmented-control │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── select │ │ ├── installation.mdx │ │ ├── usage-with-form.mdx │ │ └── usage.mdx │ ├── signature-pad │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── slider │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ ├── tick-marks.mdx │ │ └── usage.mdx │ ├── splitter │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── steps │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── switch │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── tabs │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ ├── usage.mdx │ │ └── with-indicator.mdx │ ├── tags-input │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── time-picker │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── timer │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── toast │ │ ├── installation.mdx │ │ ├── usage.mdx │ │ └── using-portal.mdx │ ├── toggle-group │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── tooltip │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── tour │ │ ├── installation.mdx │ │ └── usage.mdx │ └── tree-view │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── solid │ ├── accordion │ │ ├── component.api.mdx │ │ ├── component.usage.mdx │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── angle-slider │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ ├── tick-marks.mdx │ │ └── usage.mdx │ ├── avatar │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── carousel │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── checkbox │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── clipboard │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── collapsible │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── color-picker │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ ├── usage.mdx │ │ ├── with-channel-inputs.mdx │ │ ├── with-eye-dropper.mdx │ │ ├── with-preview.mdx │ │ └── with-swatches.mdx │ ├── combobox │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── date-picker │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── dialog │ │ ├── controlled.mdx │ │ ├── initial-focus.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── editable │ │ ├── custom-controls.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── file-upload │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── floating-panel │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── hover-card │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── listbox │ │ ├── filtering.mdx │ │ ├── grid-usage.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── menu │ │ ├── context-menu.mdx │ │ ├── installation.mdx │ │ ├── nested-menu.mdx │ │ ├── option-items.mdx │ │ └── usage.mdx │ ├── number-input │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ ├── scrubber.mdx │ │ └── usage.mdx │ ├── pagination │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── password-input │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── pin-input │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── popover │ │ ├── initial-focus.mdx │ │ ├── installation.mdx │ │ ├── render-in-portal.mdx │ │ └── usage.mdx │ ├── presence │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── progress │ │ ├── circular.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── qr-code │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── radio-group │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── range-slider │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── rating-group │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── segmented-control │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── select │ │ ├── installation.mdx │ │ ├── usage-with-form.mdx │ │ └── usage.mdx │ ├── signature-pad │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── slider │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ ├── tick-marks.mdx │ │ └── usage.mdx │ ├── splitter │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── steps │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── switch │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── tabs │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ ├── usage.mdx │ │ └── with-indicator.mdx │ ├── tags-input │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── time-picker │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── timer │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── toast │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── toggle-group │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── tooltip │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── tour │ │ ├── installation.mdx │ │ └── usage.mdx │ └── tree-view │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── svelte │ ├── accordion │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── angle-slider │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ ├── tick-marks.mdx │ │ └── usage.mdx │ ├── avatar │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── carousel │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── checkbox │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── clipboard │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── collapsible │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── color-picker │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ ├── usage.mdx │ │ ├── with-channel-inputs.mdx │ │ ├── with-eye-dropper.mdx │ │ ├── with-preview.mdx │ │ └── with-swatches.mdx │ ├── combobox │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── date-picker │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── dialog │ │ ├── controlled.mdx │ │ ├── initial-focus.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── editable │ │ ├── custom-controls.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── file-upload │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── floating-panel │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── hover-card │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── listbox │ │ ├── filtering.mdx │ │ ├── grid-usage.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── menu │ │ ├── context-menu.mdx │ │ ├── installation.mdx │ │ ├── nested-menu.mdx │ │ ├── option-items.mdx │ │ └── usage.mdx │ ├── number-input │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ ├── scrubber.mdx │ │ └── usage.mdx │ ├── pagination │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── password-input │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── pin-input │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── popover │ │ ├── initial-focus.mdx │ │ ├── installation.mdx │ │ ├── render-in-portal.mdx │ │ └── usage.mdx │ ├── progress │ │ ├── circular.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── qr-code │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── radio-group │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── range-slider │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── rating-group │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── segmented-control │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── select │ │ ├── installation.mdx │ │ ├── usage-with-form.mdx │ │ └── usage.mdx │ ├── signature-pad │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── slider │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ ├── tick-marks.mdx │ │ └── usage.mdx │ ├── splitter │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── switch │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── tabs │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ ├── usage.mdx │ │ └── with-indicator.mdx │ ├── tags-input │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── time-picker │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── timer │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── toast │ │ ├── installation.mdx │ │ ├── usage.mdx │ │ └── using-portal.mdx │ ├── toggle-group │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── tooltip │ │ ├── installation.mdx │ │ └── usage.mdx │ └── tour │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── vue │ ├── accordion │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── angle-slider │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ ├── tick-marks.mdx │ │ └── usage.mdx │ ├── avatar │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── carousel │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── checkbox │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── clipboard │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── collapsible │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── color-picker │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ ├── usage.mdx │ │ ├── with-channel-inputs.mdx │ │ ├── with-eye-dropper.mdx │ │ ├── with-preview.mdx │ │ └── with-swatches.mdx │ ├── combobox │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── date-picker │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── dialog │ │ ├── controlled.mdx │ │ ├── initial-focus.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── editable │ │ ├── custom-controls.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── file-upload │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── floating-panel │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── hover-card │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── listbox │ │ ├── filtering.mdx │ │ ├── grid-usage.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── menu │ │ ├── context-menu.mdx │ │ ├── installation.mdx │ │ ├── nested-menu.mdx │ │ ├── option-items.mdx │ │ └── usage.mdx │ ├── number-input │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ ├── scrubber.mdx │ │ └── usage.mdx │ ├── pagination │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── password-input │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── pin-input │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── popover │ │ ├── initial-focus.mdx │ │ ├── installation.mdx │ │ ├── render-in-portal.mdx │ │ └── usage.mdx │ ├── presence │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── progress │ │ ├── circular.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── qr-code │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── radio-group │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── range-slider │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── rating-group │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── segmented-control │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── select │ │ ├── installation.mdx │ │ ├── usage-with-form.mdx │ │ └── usage.mdx │ ├── signature-pad │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── slider │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ ├── tick-marks.mdx │ │ └── usage.mdx │ ├── splitter │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── steps │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── switch │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── tabs │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ ├── usage.mdx │ │ └── with-indicator.mdx │ ├── tags-input │ │ ├── controlled.mdx │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── time-picker │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── timer │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── toast │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── toggle-group │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── tooltip │ │ ├── installation.mdx │ │ └── usage.mdx │ ├── tour │ │ ├── installation.mdx │ │ └── usage.mdx │ └── tree-view │ │ ├── installation.mdx │ │ └── usage.mdx │ └── website │ └── snippet.mdx ├── demos ├── accordion.tsx ├── angle-slider.tsx ├── avatar.tsx ├── carousel.tsx ├── checkbox.tsx ├── clipboard.tsx ├── collapsible.tsx ├── color-picker.tsx ├── combobox.tsx ├── context-menu.tsx ├── date-picker-multiple-month.tsx ├── date-picker.tsx ├── dialog.tsx ├── editable.tsx ├── file-upload.tsx ├── floating-panel.tsx ├── hover-card.tsx ├── index.tsx ├── listbox.tsx ├── menu.tsx ├── nested-menu.tsx ├── number-input.tsx ├── pagination.tsx ├── password-input.tsx ├── pin-input.tsx ├── popover.tsx ├── presence.tsx ├── progress-circular.tsx ├── progress-linear.tsx ├── qr-code.tsx ├── radio.tsx ├── range-slider.tsx ├── rating.tsx ├── segmented-control.tsx ├── select.tsx ├── signature-pad.tsx ├── slider.tsx ├── splitter.tsx ├── steps.tsx ├── switch.tsx ├── tabs.tsx ├── tags-input.tsx ├── time-picker.tsx ├── timer-countdown.tsx ├── toast.tsx ├── toggle-group.tsx ├── tooltip.tsx ├── tour.tsx └── tree-view.tsx ├── eslint.config.mjs ├── layouts └── docs.tsx ├── lib ├── component-llm.ts ├── contentlayer-utils.ts ├── demo-utils.ts ├── framework-utils.ts ├── markdown-toc.d.ts ├── normalize.ts ├── open-in-stackblitz.ts ├── pagination-utils.ts ├── remark-utils.ts ├── search-meta.ts ├── svelte-highlight.ts ├── use-merge-refs.ts ├── use-route-change.ts ├── use-search.ts └── use-update-effect.ts ├── next-env.d.ts ├── next.config.ts ├── package.json ├── pages ├── _app.tsx ├── _document.tsx ├── api │ └── demo.ts ├── components │ └── [...slug].tsx ├── guides │ └── [slug].tsx ├── index.tsx ├── llms-full.txt.tsx ├── llms-react.txt.tsx ├── llms-solid.txt.tsx ├── llms-svelte.txt.tsx ├── llms-vue.txt.tsx ├── llms.txt.tsx └── overview │ └── [slug].tsx ├── plop ├── component.mdx.hbs └── snippet │ ├── react │ ├── installation.mdx.hbs │ └── usage.mdx.hbs │ ├── solid │ ├── installation.mdx.hbs │ └── usage.mdx.hbs │ ├── svelte │ ├── installation.mdx.hbs │ └── usage.mdx.hbs │ └── vue │ ├── installation.mdx.hbs │ └── usage.mdx.hbs ├── plopfile.js ├── public ├── favicon │ ├── android-chrome-192x192.png │ ├── android-chrome-256x256.png │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── mstile-150x150.png │ ├── safari-pinned-tab.svg │ └── site.webmanifest ├── fonts │ └── spline-sans.woff2 ├── lee-rob-interview.png ├── og-banner-zag-course.png ├── open-graph │ ├── twitter.png │ └── website.png ├── oss-nominee.png └── segun-adebayo-headshot.png ├── sidebar.config.ts ├── site.config.ts ├── styles ├── machines │ ├── accordion.css │ ├── angle-slider.css │ ├── avatar.css │ ├── carousel.css │ ├── checkbox.css │ ├── clipboard.css │ ├── collapsible.css │ ├── color-picker.css │ ├── combobox.css │ ├── date-picker.css │ ├── dialog.css │ ├── editable.css │ ├── file-upload.css │ ├── floating-panel.css │ ├── hover-card.css │ ├── index.css │ ├── listbox.css │ ├── menu.css │ ├── number-input.css │ ├── pagination.css │ ├── password-input.css │ ├── pin-input.css │ ├── popover.css │ ├── presence.css │ ├── progress.css │ ├── qr-code.css │ ├── radio.css │ ├── rating-group.css │ ├── segmented-control.css │ ├── select.css │ ├── signature-pad.css │ ├── slider.css │ ├── splitter.css │ ├── steps.css │ ├── switch.css │ ├── tabs.css │ ├── tags-input.css │ ├── time-picker.css │ ├── timer.css │ ├── toast.css │ ├── toggle-group.css │ ├── tooltip.css │ ├── tour.css │ └── tree-view.css ├── other.css └── prism.css ├── theme ├── components.ts ├── global-styles.ts ├── index.ts ├── layer-styles.ts ├── semantic-tokens.ts └── text-styles.ts └── tsconfig.json /.changeset/moody-lamps-cheat.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@zag-js/remove-scroll": patch 3 | --- 4 | 5 | Fix scrollbar width calculation before DOM change for scroll-lock workaround compatibility 6 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: Chat with other community members 4 | url: https://zagjs.com/discord 5 | about: The Zag Discord community 6 | - name: Consult with the Maintainers (60m) 7 | url: https://calendly.com/chakra-ui/technical-consulting-60m 8 | about: Discuss your technical questions or feature request with the Zag Maintainers 9 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "examples/next-ts/pages/compositions"] 2 | path = examples/next-ts/pages/compositions 3 | url = git@github.com:chakra-ui/zag-plus.git 4 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | npx commitlint --edit "${1}" 2 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | npx lint-staged 2 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | strict-peer-dependencies=false 2 | package-manager-strict=false 3 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 22 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | coverage 4 | .next 5 | build 6 | *.hbs 7 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["prettier-plugin-svelte"], 3 | "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }], 4 | "bracketSpacing": true, 5 | "jsxSingleQuote": false, 6 | "printWidth": 120, 7 | "proseWrap": "always", 8 | "semi": false, 9 | "singleQuote": false, 10 | "tabWidth": 2, 11 | "trailingComma": "all" 12 | } 13 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "ms-playwright.playwright", 4 | "Vue.volar", 5 | "svelte.svelte-vscode" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/typescript/lib", 3 | "search.exclude": { 4 | "**/node_modules": true, 5 | "**/dist": true, 6 | "**/.xstate": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /e2e/avatar.e2e.ts: -------------------------------------------------------------------------------- 1 | import { test } from "@playwright/test" 2 | import { a11y } from "./_utils" 3 | 4 | test.describe("avatar", () => { 5 | test.beforeEach(async ({ page }) => { 6 | await page.goto("/avatar") 7 | }) 8 | 9 | test("should have no accessibility violations", async ({ page }) => { 10 | await a11y(page, ".avatar") 11 | }) 12 | }) 13 | -------------------------------------------------------------------------------- /e2e/fixtures/text.txt: -------------------------------------------------------------------------------- 1 | zag -------------------------------------------------------------------------------- /examples/next-ts/components/print.tsx: -------------------------------------------------------------------------------- 1 | export function Print(props: { title: string; value: any }) { 2 | const { value, title } = props 3 | return ( 4 |
5 |

{title}

6 | 
{JSON.stringify(value, null, 2)}
7 |
8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /examples/next-ts/components/show.tsx: -------------------------------------------------------------------------------- 1 | export const Show = (props: { when: boolean; children: React.ReactNode }) => { 2 | const { when, children } = props 3 | return when ? <>{children} : null 4 | } 5 | -------------------------------------------------------------------------------- /examples/next-ts/components/swap.tsx: -------------------------------------------------------------------------------- 1 | import { Presence } from "./presence" 2 | 3 | export const Swap = (props: { children: React.ReactNode; open: boolean; fallback?: React.ReactNode }) => { 4 | const { children, open, fallback } = props 5 | return ( 6 | <> 7 | 10 | 13 | 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /examples/next-ts/hooks/use-effect-once.ts: -------------------------------------------------------------------------------- 1 | import { useEffect } from "react" 2 | 3 | export function useEffectOnce(fn: VoidFunction) { 4 | useEffect(fn, []) 5 | } 6 | -------------------------------------------------------------------------------- /examples/next-ts/hooks/use-event.ts: -------------------------------------------------------------------------------- 1 | import { useCallback, useRef } from "react" 2 | 3 | type AnyFunction = (...args: any[]) => any 4 | 5 | export function useEvent(callback: T | undefined): T { 6 | const ref = useRef(callback) 7 | ref.current = callback 8 | return useCallback((...args: any[]) => ref.current?.(...args), []) as T 9 | } 10 | -------------------------------------------------------------------------------- /examples/next-ts/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information. 6 | -------------------------------------------------------------------------------- /examples/next-ts/next.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | eslint: { ignoreDuringBuilds: true }, 3 | typescript: { ignoreBuildErrors: true }, 4 | experimental: { 5 | externalDir: true, 6 | }, 7 | webpack: (config) => { 8 | config.module.rules.push({ 9 | test: /\.m?js$/, 10 | type: "javascript/auto", 11 | resolve: { 12 | fullySpecified: false, 13 | }, 14 | }) 15 | return config 16 | }, 17 | } 18 | -------------------------------------------------------------------------------- /examples/next-ts/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import { routesData } from "@zag-js/shared" 2 | import Link from "next/link" 3 | 4 | const Page = () => { 5 | return ( 6 |
7 |

Zag.js + React

8 |
    9 | {routesData.map((route) => ( 10 |
  • 11 | {route.label} 12 |
    • 13 | ))} 14 |
15 |
16 | ) 17 | } 18 | 19 | export default Page 20 | -------------------------------------------------------------------------------- /examples/next-ts/pages/swap.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react" 2 | import { Swap } from "../components/swap" 3 | 4 | export default function Page() { 5 | const [muted, setMuted] = useState(false) 6 | 7 | return ( 8 |
9 | 14 |
15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /examples/nuxt-ts/.gitignore: -------------------------------------------------------------------------------- 1 | # Nuxt dev/build outputs 2 | .output 3 | .nuxt 4 | .nitro 5 | .cache 6 | dist 7 | 8 | # Node dependencies 9 | node_modules 10 | 11 | # Logs 12 | logs 13 | *.log 14 | 15 | # Misc 16 | .DS_Store 17 | .fleet 18 | .idea 19 | 20 | # Local env files 21 | .env 22 | .env.* 23 | !.env.example 24 | -------------------------------------------------------------------------------- /examples/nuxt-ts/.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true -------------------------------------------------------------------------------- /examples/nuxt-ts/app.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /examples/nuxt-ts/components/Star.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /examples/nuxt-ts/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | // https://nuxt.com/docs/api/configuration/nuxt-config 2 | export default defineNuxtConfig({ 3 | devtools: { enabled: true }, 4 | compatibilityDate: "2025-01-07", 5 | }) 6 | -------------------------------------------------------------------------------- /examples/nuxt-ts/pages/index.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | -------------------------------------------------------------------------------- /examples/nuxt-ts/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/zag/5c760a769085232a096789c002ea6ab96608ffb6/examples/nuxt-ts/public/favicon.ico -------------------------------------------------------------------------------- /examples/nuxt-ts/server/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../.nuxt/tsconfig.server.json", 3 | } 4 | -------------------------------------------------------------------------------- /examples/nuxt-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://nuxt.com/docs/guide/concepts/typescript 3 | "extends": "./.nuxt/tsconfig.json", 4 | } 5 | -------------------------------------------------------------------------------- /examples/preact-ts/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/preact-ts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Preact 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/preact-ts/src/components/show.tsx: -------------------------------------------------------------------------------- 1 | import { ComponentChildren } from "preact" 2 | 3 | export const Show = (props: { when: boolean; children: ComponentChildren }) => { 4 | const { when, children } = props 5 | return when ? <>{children} : null 6 | } 7 | -------------------------------------------------------------------------------- /examples/preact-ts/src/hooks/use-effect-once.ts: -------------------------------------------------------------------------------- 1 | import { useEffect } from "preact/hooks" 2 | 3 | export function useEffectOnce(fn: VoidFunction) { 4 | useEffect(fn, []) 5 | } 6 | -------------------------------------------------------------------------------- /examples/preact-ts/src/pages/_404.tsx: -------------------------------------------------------------------------------- 1 | export function NotFound() { 2 | return ( 3 |
4 |

404: Not Found

5 |

It's gone :(

6 |
7 | ) 8 | } 9 | -------------------------------------------------------------------------------- /examples/preact-ts/src/pages/home.tsx: -------------------------------------------------------------------------------- 1 | import { routesData } from "@zag-js/shared" 2 | 3 | export default function Home() { 4 | return ( 5 |
6 |

Zag.js + Solid

7 |
    8 | {routesData 9 | .sort((a, b) => a.label.localeCompare(b.label)) 10 | .map((route) => ( 11 |
  • 12 | {route.label} 13 |
    • 14 | ))} 15 |
16 |
17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /examples/preact-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite" 2 | import preact from "@preact/preset-vite" 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [preact()], 7 | }) 8 | -------------------------------------------------------------------------------- /examples/solid-ts/.gitignore: -------------------------------------------------------------------------------- 1 | 2 | dist 3 | .solid 4 | .output 5 | .vercel 6 | .netlify 7 | .vinxi 8 | 9 | # Environment 10 | .env 11 | .env*.local 12 | 13 | # dependencies 14 | /node_modules 15 | 16 | # IDEs and editors 17 | /.idea 18 | .project 19 | .classpath 20 | *.launch 21 | .settings/ 22 | 23 | # Temp 24 | gitignore 25 | 26 | # System Files 27 | .DS_Store 28 | Thumbs.db 29 | -------------------------------------------------------------------------------- /examples/solid-ts/app.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "@solidjs/start/config" 2 | 3 | export default defineConfig({ 4 | server: { preset: "vercel" }, 5 | }) 6 | -------------------------------------------------------------------------------- /examples/solid-ts/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/zag/5c760a769085232a096789c002ea6ab96608ffb6/examples/solid-ts/public/favicon.ico -------------------------------------------------------------------------------- /examples/solid-ts/src/entry-client.tsx: -------------------------------------------------------------------------------- 1 | // @refresh reload 2 | import { mount, StartClient } from "@solidjs/start/client" 3 | 4 | mount(() => , document.getElementById("app")!) 5 | -------------------------------------------------------------------------------- /examples/solid-ts/src/global.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/svelte-ts/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/svelte-ts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Svelte Machines 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/svelte-ts/src/main.ts: -------------------------------------------------------------------------------- 1 | import "../../../shared/src/style.css" 2 | 3 | import { mount } from "svelte" 4 | import App from "./App.svelte" 5 | 6 | const app = mount(App, { 7 | target: document.getElementById("app")!, 8 | }) 9 | 10 | export default app 11 | -------------------------------------------------------------------------------- /examples/svelte-ts/src/routes/index.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
7 |

Svelte UI Machines

8 |
    9 | {#each routesData as route} 10 |
  • 11 | {route.label} 12 |
    • 13 | {/each} 14 |
15 |
16 | -------------------------------------------------------------------------------- /examples/svelte-ts/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /examples/svelte-ts/svelte.config.js: -------------------------------------------------------------------------------- 1 | import { vitePreprocess } from "@sveltejs/vite-plugin-svelte" 2 | 3 | export default { 4 | // Consult https://svelte.dev/docs#compile-time-svelte-preprocess 5 | // for more information about preprocessors 6 | preprocess: vitePreprocess(), 7 | } 8 | -------------------------------------------------------------------------------- /examples/svelte-ts/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler" 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /examples/svelte-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { svelte } from "@sveltejs/vite-plugin-svelte" 2 | import { defineConfig } from "vite" 3 | import tsconfigPaths from "vite-tsconfig-paths" 4 | 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [svelte(), tsconfigPaths()], 8 | }) 9 | -------------------------------------------------------------------------------- /examples/vanilla-ts/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/vanilla-ts/pages/accordion.ts: -------------------------------------------------------------------------------- 1 | import "@zag-js/shared/src/style.css" 2 | 3 | import { Accordion } from "../src/accordion" 4 | import { nanoid } from "nanoid" 5 | 6 | document.querySelectorAll(".accordion").forEach((rootEl) => { 7 | const accordion = new Accordion(rootEl, { id: nanoid(), multiple: true }) 8 | accordion.init() 9 | }) 10 | -------------------------------------------------------------------------------- /examples/vanilla-ts/pages/avatar.ts: -------------------------------------------------------------------------------- 1 | import "@zag-js/shared/src/style.css" 2 | 3 | import { Avatar } from "../src/avatar" 4 | import { nanoid } from "nanoid" 5 | 6 | document.querySelectorAll(".avatar").forEach((rootEl) => { 7 | const avatar = new Avatar(rootEl, { id: nanoid() }) 8 | avatar.init() 9 | }) 10 | -------------------------------------------------------------------------------- /examples/vanilla-ts/pages/checkbox.ts: -------------------------------------------------------------------------------- 1 | import "@zag-js/shared/src/style.css" 2 | 3 | import { nanoid } from "nanoid" 4 | import { Checkbox } from "../src/checkbox" 5 | 6 | document.querySelectorAll(".checkbox").forEach((rootEl) => { 7 | const checkbox = new Checkbox(rootEl, { 8 | id: nanoid(), 9 | }) 10 | 11 | checkbox.init() 12 | }) 13 | -------------------------------------------------------------------------------- /examples/vanilla-ts/pages/combobox.ts: -------------------------------------------------------------------------------- 1 | import "@zag-js/shared/src/style.css" 2 | 3 | import { Combobox } from "../src/combobox" 4 | import { nanoid } from "nanoid" 5 | 6 | document.querySelectorAll(".combobox").forEach((rootEl) => { 7 | const combobox = new Combobox(rootEl, { id: nanoid() }) 8 | combobox.init() 9 | }) 10 | -------------------------------------------------------------------------------- /examples/vanilla-ts/pages/popover.ts: -------------------------------------------------------------------------------- 1 | import "@zag-js/shared/src/style.css" 2 | 3 | import { Popover } from "../src/popover" 4 | import { nanoid } from "nanoid" 5 | 6 | document.querySelectorAll(".popover").forEach((rootEl) => { 7 | const popover = new Popover(rootEl, { 8 | id: nanoid(), 9 | positioning: { 10 | placement: "right", 11 | }, 12 | }) 13 | popover.init() 14 | }) 15 | -------------------------------------------------------------------------------- /examples/vanilla-ts/src/lib/index.ts: -------------------------------------------------------------------------------- 1 | export { normalizeProps } from "./normalize-props" 2 | export { spreadProps } from "./spread-props" 3 | export { VanillaMachine } from "./machine" 4 | -------------------------------------------------------------------------------- /examples/vanilla-ts/src/lib/refs.ts: -------------------------------------------------------------------------------- 1 | export function createRefs(refs: T) { 2 | const ref = { current: refs } 3 | return { 4 | get(key: K): T[K] { 5 | return ref.current[key] 6 | }, 7 | set(key: K, value: T[K]) { 8 | ref.current[key] = value 9 | }, 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/vanilla-ts/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /packages/anatomy-icons/README.md: -------------------------------------------------------------------------------- 1 | # Anatomy Icons 2 | 3 | This package provides a set of icons for use in the Zag.js docs for the anatomy section. 4 | -------------------------------------------------------------------------------- /packages/anatomy-icons/src/components/time-picker.tsx: -------------------------------------------------------------------------------- 1 | import { createComponent } from "../create-component" 2 | 3 | export const TimePickerAnatomy = createComponent((props) => { 4 | const { palette, ...rest } = props 5 | return 6 | }) 7 | -------------------------------------------------------------------------------- /packages/anatomy-icons/src/create-gradient.ts: -------------------------------------------------------------------------------- 1 | import { adjustHue, darken, desaturate, toHex } from "color2k" 2 | 3 | export function createGradient(accentColor: string) { 4 | const startColor = toHex(darken(desaturate(adjustHue(accentColor, 9), 0.52), 0.1)) 5 | const stopColor = toHex(darken(desaturate(adjustHue(accentColor, 9), 0.43), 0.22)) 6 | return { 7 | startColor, 8 | stopColor, 9 | value: `linear-gradient(112deg, ${startColor} 0%, ${stopColor} 100%)`, 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/anatomy-icons/src/index.ts: -------------------------------------------------------------------------------- 1 | export { allComponents, getComponent } from "./components" 2 | export type { ComponentAnatomyName } from "./components" 3 | export { createGradient } from "./create-gradient" 4 | export { createPalette } from "./create-palette" 5 | -------------------------------------------------------------------------------- /packages/anatomy-icons/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "jsx": "react-jsx", 6 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/anatomy/src/index.ts: -------------------------------------------------------------------------------- 1 | export { createAnatomy } from "./create-anatomy" 2 | export type { Anatomy, AnatomyPart, AnatomyInstance, AnatomyPartName } from "./create-anatomy" 3 | -------------------------------------------------------------------------------- /packages/anatomy/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/core/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./merge-props" 2 | export * from "./memo" 3 | export * from "./create-machine" 4 | export * from "./types" 5 | export * from "./scope" 6 | -------------------------------------------------------------------------------- /packages/core/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src", "tests"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/docs/README.md: -------------------------------------------------------------------------------- 1 | # API Documentation for all machines 2 | 3 | This directory contains the API documentation for all machines. 4 | -------------------------------------------------------------------------------- /packages/docs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/frameworks/preact/src/index.ts: -------------------------------------------------------------------------------- 1 | export { mergeProps } from "@zag-js/core" 2 | export * from "./machine" 3 | export * from "./normalize-props" 4 | export * from "./portal" 5 | -------------------------------------------------------------------------------- /packages/frameworks/preact/src/refs.ts: -------------------------------------------------------------------------------- 1 | import { useRef } from "preact/hooks" 2 | 3 | export function useRefs(refs: T) { 4 | const ref = useRef(refs) 5 | return { 6 | get(key: K): T[K] { 7 | return ref.current[key] 8 | }, 9 | set(key: K, value: T[K]) { 10 | ref.current[key] = value 11 | }, 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/frameworks/preact/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "jsx": "preserve", 6 | "jsxImportSource": "preact", 7 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/frameworks/preact/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "tsup" 2 | import rootConfig from "../../../tsup.config" 3 | 4 | export default defineConfig({ 5 | ...rootConfig, 6 | }) 7 | -------------------------------------------------------------------------------- /packages/frameworks/react/src/index.ts: -------------------------------------------------------------------------------- 1 | export { mergeProps } from "@zag-js/core" 2 | export * from "./machine" 3 | export * from "./normalize-props" 4 | export * from "./portal" 5 | -------------------------------------------------------------------------------- /packages/frameworks/react/src/refs.ts: -------------------------------------------------------------------------------- 1 | import { useRef } from "react" 2 | 3 | export function useRefs(refs: T) { 4 | const ref = useRef(refs) 5 | return { 6 | get(key: K): T[K] { 7 | return ref.current[key] 8 | }, 9 | set(key: K, value: T[K]) { 10 | ref.current[key] = value 11 | }, 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/frameworks/react/src/use-layout-effect.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useLayoutEffect } from "react" 2 | 3 | export const useSafeLayoutEffect = typeof globalThis.document !== "undefined" ? useLayoutEffect : useEffect 4 | -------------------------------------------------------------------------------- /packages/frameworks/react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src", "tests"], 4 | "compilerOptions": { 5 | "jsx": "react-jsx", 6 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/frameworks/react/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "tsup" 2 | import { readFileSync, writeFileSync } from "fs" 3 | import rootConfig from "../../../tsup.config" 4 | 5 | export default defineConfig({ 6 | ...rootConfig, 7 | async onSuccess() { 8 | const files = ["dist/index.mjs", "dist/index.js"] 9 | for (const file of files) { 10 | const content = readFileSync(file, "utf8") 11 | writeFileSync(file, `"use client";\n\n${content}`) 12 | } 13 | }, 14 | }) 15 | -------------------------------------------------------------------------------- /packages/frameworks/react/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vitest/config" 2 | 3 | export default defineConfig({ 4 | test: { 5 | retry: 2, 6 | globals: true, 7 | environment: "jsdom", 8 | css: false, 9 | setupFiles: "./vitest.setup.ts", 10 | }, 11 | }) 12 | -------------------------------------------------------------------------------- /packages/frameworks/react/vitest.setup.ts: -------------------------------------------------------------------------------- 1 | import "@testing-library/jest-dom/vitest" 2 | import { JSDOM } from "jsdom" 3 | 4 | const { window } = new JSDOM() 5 | 6 | // @ts-ignore 7 | window.requestAnimationFrame = (cb: VoidFunction) => setTimeout(cb, 1000 / 60) 8 | 9 | Object.assign(global, { window, document: window.document }) 10 | -------------------------------------------------------------------------------- /packages/frameworks/solid/src/index.ts: -------------------------------------------------------------------------------- 1 | export { Key } from "@solid-primitives/keyed" 2 | export * from "./machine" 3 | export { mergeProps } from "./merge-props" 4 | export * from "./normalize-props" 5 | -------------------------------------------------------------------------------- /packages/frameworks/solid/src/refs.ts: -------------------------------------------------------------------------------- 1 | import { createSignal } from "solid-js" 2 | 3 | export function createRefs(refs: T) { 4 | const [ref, setRef] = createSignal(refs) 5 | return { 6 | get(key: K): T[K] { 7 | return ref()[key] 8 | }, 9 | set(key: K, value: T[K]) { 10 | setRef((prev) => ({ ...prev, [key]: value })) 11 | }, 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/frameworks/solid/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src", "tests"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/frameworks/solid/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vitest/config" 2 | 3 | export default defineConfig({ 4 | test: { 5 | retry: 2, 6 | globals: true, 7 | environment: "jsdom", 8 | css: false, 9 | setupFiles: "./vitest.setup.ts", 10 | }, 11 | }) 12 | -------------------------------------------------------------------------------- /packages/frameworks/solid/vitest.setup.ts: -------------------------------------------------------------------------------- 1 | import "@testing-library/jest-dom/vitest" 2 | import { JSDOM } from "jsdom" 3 | 4 | const { window } = new JSDOM() 5 | 6 | // @ts-ignore 7 | window.requestAnimationFrame = (cb: VoidFunction) => setTimeout(cb, 1000 / 60) 8 | 9 | Object.assign(global, { window, document: window.document }) 10 | -------------------------------------------------------------------------------- /packages/frameworks/svelte/clean-package.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "replace": { 3 | "exports": { 4 | ".": { 5 | "types": "./dist/index.d.ts", 6 | "svelte": "./dist/index.js" 7 | }, 8 | "./package.json": "./package.json" 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/frameworks/svelte/src/index.ts: -------------------------------------------------------------------------------- 1 | export { mergeProps } from "./merge-props" 2 | export { normalizeProps } from "./normalize-props.js" 3 | export type { PropTypes } from "./normalize-props.js" 4 | export { portal } from "./portal.js" 5 | export { reflect } from "./reflect.js" 6 | export { useMachine } from "./machine.svelte" 7 | -------------------------------------------------------------------------------- /packages/frameworks/svelte/src/reflect.ts: -------------------------------------------------------------------------------- 1 | type AnyFunction = (...args: any[]) => any 2 | const isFunction = (value: any): value is AnyFunction => typeof value === "function" 3 | 4 | export function reflect>(obj: () => T): T { 5 | return new Proxy(obj() as T, { 6 | get(_, prop) { 7 | const target = obj() 8 | let value = Reflect.get(target, prop) 9 | // @ts-ignore 10 | return isFunction(value) ? value.bind(target) : value 11 | }, 12 | }) 13 | } 14 | -------------------------------------------------------------------------------- /packages/frameworks/svelte/src/refs.svelte.ts: -------------------------------------------------------------------------------- 1 | export function useRefs(refs: T) { 2 | const ref = $state({ current: refs }) 3 | return { 4 | get(key: K): T[K] { 5 | return ref.current[key] 6 | }, 7 | set(key: K, value: T[K]) { 8 | ref.current[key] = value 9 | }, 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/frameworks/svelte/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src", "tests"], 4 | "compilerOptions": { 5 | "jsx": "preserve", 6 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/frameworks/svelte/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vitest/config" 2 | 3 | export default defineConfig({ 4 | test: { 5 | globals: true, 6 | }, 7 | }) 8 | -------------------------------------------------------------------------------- /packages/frameworks/vue/src/index.ts: -------------------------------------------------------------------------------- 1 | export { mergeProps } from "@zag-js/core" 2 | export * from "./normalize-props" 3 | export * from "./machine" 4 | -------------------------------------------------------------------------------- /packages/frameworks/vue/src/refs.ts: -------------------------------------------------------------------------------- 1 | import { ref } from "vue" 2 | 3 | export function useRefs(refs: T) { 4 | const __refs = ref(refs) 5 | return { 6 | get(key: K): T[K] { 7 | return __refs.value[key] 8 | }, 9 | set(key: K, value: T[K]) { 10 | __refs.value[key] = value 11 | }, 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/frameworks/vue/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "jsx": "preserve", 6 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/machines/accordion/src/accordion.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("accordion").parts("root", "item", "itemTrigger", "itemContent", "itemIndicator") 4 | export const parts = anatomy.build() 5 | -------------------------------------------------------------------------------- /packages/machines/accordion/src/index.ts: -------------------------------------------------------------------------------- 1 | export { anatomy } from "./accordion.anatomy" 2 | export { connect } from "./accordion.connect" 3 | export { machine } from "./accordion.machine" 4 | export * from "./accordion.props" 5 | export type { 6 | AccordionApi as Api, 7 | ElementIds, 8 | FocusChangeDetails, 9 | ItemProps, 10 | ItemState, 11 | AccordionMachine as Machine, 12 | AccordionProps as Props, 13 | AccordionService as Service, 14 | ValueChangeDetails, 15 | } from "./accordion.types" 16 | -------------------------------------------------------------------------------- /packages/machines/accordion/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/angle-slider/src/angle-slider.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("angle-slider").parts( 4 | "root", 5 | "label", 6 | "thumb", 7 | "valueText", 8 | "control", 9 | "track", 10 | "markerGroup", 11 | "marker", 12 | ) 13 | 14 | export const parts = anatomy.build() 15 | -------------------------------------------------------------------------------- /packages/machines/angle-slider/src/index.ts: -------------------------------------------------------------------------------- 1 | export { anatomy } from "./angle-slider.anatomy" 2 | export { connect } from "./angle-slider.connect" 3 | export { machine } from "./angle-slider.machine" 4 | export * from "./angle-slider.props" 5 | export type { 6 | AngleSliderApi as Api, 7 | ElementIds, 8 | AngleSliderMachine as Machine, 9 | MarkerProps, 10 | AngleSliderProps as Props, 11 | AngleSliderService as Service, 12 | ValueChangeDetails, 13 | } from "./angle-slider.types" 14 | -------------------------------------------------------------------------------- /packages/machines/angle-slider/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/avatar/src/avatar.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("avatar").parts("root", "image", "fallback") 4 | 5 | export const parts = anatomy.build() 6 | -------------------------------------------------------------------------------- /packages/machines/avatar/src/avatar.dom.ts: -------------------------------------------------------------------------------- 1 | import type { Scope } from "@zag-js/core" 2 | 3 | export const getRootId = (ctx: Scope) => ctx.ids?.root ?? `avatar:${ctx.id}` 4 | export const getImageId = (ctx: Scope) => ctx.ids?.image ?? `avatar:${ctx.id}:image` 5 | export const getFallbackId = (ctx: Scope) => ctx.ids?.fallback ?? `avatar:${ctx.id}:fallback` 6 | 7 | export const getRootEl = (ctx: Scope) => ctx.getById(getRootId(ctx)) 8 | export const getImageEl = (ctx: Scope) => ctx.getById(getImageId(ctx)) 9 | -------------------------------------------------------------------------------- /packages/machines/avatar/src/avatar.props.ts: -------------------------------------------------------------------------------- 1 | import { createProps } from "@zag-js/types" 2 | import { createSplitProps } from "@zag-js/utils" 3 | import type { AvatarProps } from "./avatar.types" 4 | 5 | export const props = createProps()(["dir", "id", "ids", "onStatusChange", "getRootNode"]) 6 | export const splitProps = createSplitProps>(props) 7 | -------------------------------------------------------------------------------- /packages/machines/avatar/src/index.ts: -------------------------------------------------------------------------------- 1 | export { anatomy } from "./avatar.anatomy" 2 | export { connect } from "./avatar.connect" 3 | export { machine } from "./avatar.machine" 4 | export * from "./avatar.props" 5 | export type { 6 | AvatarApi as Api, 7 | ElementIds, 8 | LoadStatus, 9 | AvatarMachine as Machine, 10 | AvatarProps as Props, 11 | AvatarService as Service, 12 | StatusChangeDetails, 13 | } from "./avatar.types" 14 | -------------------------------------------------------------------------------- /packages/machines/avatar/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/carousel/src/carousel.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("carousel").parts( 4 | "root", 5 | "itemGroup", 6 | "item", 7 | "control", 8 | "nextTrigger", 9 | "prevTrigger", 10 | "indicatorGroup", 11 | "indicator", 12 | "autoplayTrigger", 13 | ) 14 | 15 | export const parts = anatomy.build() 16 | -------------------------------------------------------------------------------- /packages/machines/carousel/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/checkbox/src/checkbox.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("checkbox").parts("root", "label", "control", "indicator") 4 | export const parts = anatomy.build() 5 | -------------------------------------------------------------------------------- /packages/machines/checkbox/src/index.ts: -------------------------------------------------------------------------------- 1 | export { anatomy } from "./checkbox.anatomy" 2 | export { connect } from "./checkbox.connect" 3 | export { machine } from "./checkbox.machine" 4 | export * from "./checkbox.props" 5 | export type { 6 | CheckboxApi as Api, 7 | CheckboxMachine as Machine, 8 | CheckboxProps as Props, 9 | CheckboxSchema as Schema, 10 | CheckedChangeDetails, 11 | CheckedState, 12 | ElementIds, 13 | } from "./checkbox.types" 14 | -------------------------------------------------------------------------------- /packages/machines/checkbox/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/clipboard/src/clipboard.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("clipboard").parts("root", "control", "trigger", "indicator", "input", "label") 4 | 5 | export const parts = anatomy.build() 6 | -------------------------------------------------------------------------------- /packages/machines/clipboard/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/collapsible/src/collapsible.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("collapsible").parts("root", "trigger", "content", "indicator") 4 | 5 | export const parts = anatomy.build() 6 | -------------------------------------------------------------------------------- /packages/machines/collapsible/src/index.ts: -------------------------------------------------------------------------------- 1 | export { anatomy } from "./collapsible.anatomy" 2 | export { connect } from "./collapsible.connect" 3 | export { machine } from "./collapsible.machine" 4 | export * from "./collapsible.props" 5 | export type { 6 | CollapsibleApi as Api, 7 | ElementIds, 8 | CollapsibleMachine as Machine, 9 | OpenChangeDetails, 10 | CollapsibleProps as Props, 11 | CollapsibleService as Service, 12 | } from "./collapsible.types" 13 | -------------------------------------------------------------------------------- /packages/machines/collapsible/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/color-picker/src/color-picker.parse.ts: -------------------------------------------------------------------------------- 1 | import { parseColor, type Color } from "@zag-js/color-utils" 2 | 3 | export const parse = (colorString: string): Color => { 4 | return parseColor(colorString) 5 | } 6 | -------------------------------------------------------------------------------- /packages/machines/color-picker/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/combobox/src/combobox.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("combobox").parts( 4 | "root", 5 | "clearTrigger", 6 | "content", 7 | "control", 8 | "input", 9 | "item", 10 | "itemGroup", 11 | "itemGroupLabel", 12 | "itemIndicator", 13 | "itemText", 14 | "label", 15 | "list", 16 | "positioner", 17 | "trigger", 18 | ) 19 | export const parts = anatomy.build() 20 | -------------------------------------------------------------------------------- /packages/machines/combobox/src/combobox.collection.ts: -------------------------------------------------------------------------------- 1 | import { ListCollection, type CollectionItem, type CollectionOptions } from "@zag-js/collection" 2 | 3 | export const collection = (options: CollectionOptions): ListCollection => { 4 | return new ListCollection(options) 5 | } 6 | 7 | collection.empty = (): ListCollection => { 8 | return new ListCollection({ items: [] }) 9 | } 10 | -------------------------------------------------------------------------------- /packages/machines/combobox/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/date-picker/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/dialog/src/dialog.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("dialog").parts( 4 | "trigger", 5 | "backdrop", 6 | "positioner", 7 | "content", 8 | "title", 9 | "description", 10 | "closeTrigger", 11 | ) 12 | 13 | export const parts = anatomy.build() 14 | -------------------------------------------------------------------------------- /packages/machines/dialog/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/editable/src/editable.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("editable").parts( 4 | "root", 5 | "area", 6 | "label", 7 | "preview", 8 | "input", 9 | "editTrigger", 10 | "submitTrigger", 11 | "cancelTrigger", 12 | "control", 13 | ) 14 | export const parts = anatomy.build() 15 | -------------------------------------------------------------------------------- /packages/machines/editable/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/file-upload/src/file-upload.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("file-upload").parts( 4 | "root", 5 | "dropzone", 6 | "item", 7 | "itemDeleteTrigger", 8 | "itemGroup", 9 | "itemName", 10 | "itemPreview", 11 | "itemPreviewImage", 12 | "itemSizeText", 13 | "label", 14 | "trigger", 15 | "clearTrigger", 16 | ) 17 | 18 | export const parts = anatomy.build() 19 | -------------------------------------------------------------------------------- /packages/machines/file-upload/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/floating-panel/src/floating-panel.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("floating-panel").parts( 4 | "trigger", 5 | "positioner", 6 | "content", 7 | "header", 8 | "body", 9 | "title", 10 | "resizeTrigger", 11 | "dragTrigger", 12 | "stageTrigger", 13 | "closeTrigger", 14 | "control", 15 | ) 16 | 17 | export const parts = anatomy.build() 18 | -------------------------------------------------------------------------------- /packages/machines/floating-panel/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/hover-card/src/hover-card.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("hoverCard").parts("arrow", "arrowTip", "trigger", "positioner", "content") 4 | export const parts = anatomy.build() 5 | -------------------------------------------------------------------------------- /packages/machines/hover-card/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/listbox/src/listbox.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("listbox").parts( 4 | "label", 5 | "input", 6 | "item", 7 | "itemText", 8 | "itemIndicator", 9 | "itemGroup", 10 | "itemGroupLabel", 11 | "content", 12 | "root", 13 | "valueText", 14 | ) 15 | export const parts = anatomy.build() 16 | -------------------------------------------------------------------------------- /packages/machines/listbox/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/menu/src/menu.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("menu").parts( 4 | "arrow", 5 | "arrowTip", 6 | "content", 7 | "contextTrigger", 8 | "indicator", 9 | "item", 10 | "itemGroup", 11 | "itemGroupLabel", 12 | "itemIndicator", 13 | "itemText", 14 | "positioner", 15 | "separator", 16 | "trigger", 17 | "triggerItem", 18 | ) 19 | export const parts = anatomy.build() 20 | -------------------------------------------------------------------------------- /packages/machines/menu/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/navigation-menu/src/navigation-menu.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("navigation-menu").parts( 4 | "root", 5 | "viewportPositioner", 6 | "viewport", 7 | "trigger", 8 | "content", 9 | "list", 10 | "item", 11 | "link", 12 | "indicator", 13 | "indicatorTrack", 14 | "arrow", 15 | ) 16 | 17 | export const parts = anatomy.build() 18 | -------------------------------------------------------------------------------- /packages/machines/navigation-menu/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/number-input/src/number-input.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("numberInput").parts( 4 | "root", 5 | "label", 6 | "input", 7 | "control", 8 | "valueText", 9 | "incrementTrigger", 10 | "decrementTrigger", 11 | "scrubber", 12 | ) 13 | 14 | export const parts = anatomy.build() 15 | -------------------------------------------------------------------------------- /packages/machines/number-input/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/pagination/src/pagination.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("pagination").parts("root", "item", "ellipsis", "prevTrigger", "nextTrigger") 4 | 5 | export const parts = anatomy.build() 6 | -------------------------------------------------------------------------------- /packages/machines/pagination/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/password-input/src/password-input.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("password-input").parts( 4 | "root", 5 | "input", 6 | "label", 7 | "control", 8 | "indicator", 9 | "visibilityTrigger", 10 | ) 11 | 12 | export const parts = anatomy.build() 13 | -------------------------------------------------------------------------------- /packages/machines/password-input/src/password-input.dom.ts: -------------------------------------------------------------------------------- 1 | import type { Scope } from "@zag-js/core" 2 | 3 | export const getRootId = (ctx: Scope) => ctx.ids?.root ?? `p-input-${ctx.id}` 4 | export const getInputId = (ctx: Scope) => ctx.ids?.input ?? `p-input-${ctx.id}-input` 5 | 6 | export const getInputEl = (ctx: Scope) => ctx.getById(getInputId(ctx)) 7 | -------------------------------------------------------------------------------- /packages/machines/password-input/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/pin-input/src/index.ts: -------------------------------------------------------------------------------- 1 | export { anatomy } from "./pin-input.anatomy" 2 | export { connect } from "./pin-input.connect" 3 | export { machine } from "./pin-input.machine" 4 | export * from "./pin-input.props" 5 | export type { 6 | PinInputApi as Api, 7 | PinInputProps as Props, 8 | PinInputService as Service, 9 | PinInputMachine as Machine, 10 | ElementIds, 11 | InputProps, 12 | IntlTranslations, 13 | ValueChangeDetails, 14 | ValueInvalidDetails, 15 | } from "./pin-input.types" 16 | -------------------------------------------------------------------------------- /packages/machines/pin-input/src/pin-input.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("pinInput").parts("root", "label", "input", "control") 4 | export const parts = anatomy.build() 5 | -------------------------------------------------------------------------------- /packages/machines/pin-input/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/popover/src/popover.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("popover").parts( 4 | "arrow", 5 | "arrowTip", 6 | "anchor", 7 | "trigger", 8 | "indicator", 9 | "positioner", 10 | "content", 11 | "title", 12 | "description", 13 | "closeTrigger", 14 | ) 15 | 16 | export const parts = anatomy.build() 17 | -------------------------------------------------------------------------------- /packages/machines/popover/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/presence/src/index.ts: -------------------------------------------------------------------------------- 1 | export { connect } from "./presence.connect" 2 | export { machine } from "./presence.machine" 3 | export * from "./presence.props" 4 | export type { 5 | PresenceApi as Api, 6 | PresenceMachine as Machine, 7 | PresenceProps as Props, 8 | PresenceService as Service, 9 | } from "./presence.types" 10 | -------------------------------------------------------------------------------- /packages/machines/presence/src/presence.props.ts: -------------------------------------------------------------------------------- 1 | import { createProps } from "@zag-js/types" 2 | import type { PresenceProps } from "./presence.types" 3 | 4 | export const props = createProps()(["onExitComplete", "present", "immediate"]) 5 | -------------------------------------------------------------------------------- /packages/machines/presence/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/progress/src/progress.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("progress").parts( 4 | "root", 5 | "label", 6 | "track", 7 | "range", 8 | "valueText", 9 | "view", 10 | "circle", 11 | "circleTrack", 12 | "circleRange", 13 | ) 14 | 15 | export const parts = anatomy.build() 16 | -------------------------------------------------------------------------------- /packages/machines/progress/src/progress.dom.ts: -------------------------------------------------------------------------------- 1 | import type { Scope } from "@zag-js/core" 2 | 3 | export const getRootId = (ctx: Scope) => ctx.ids?.root ?? `progress-${ctx.id}` 4 | export const getTrackId = (ctx: Scope) => ctx.ids?.track ?? `progress-${ctx.id}-track` 5 | export const getLabelId = (ctx: Scope) => ctx.ids?.label ?? `progress-${ctx.id}-label` 6 | export const getCircleId = (ctx: Scope) => ctx.ids?.circle ?? `progress-${ctx.id}-circle` 7 | -------------------------------------------------------------------------------- /packages/machines/progress/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/qr-code/src/index.ts: -------------------------------------------------------------------------------- 1 | export { anatomy } from "./qr-code.anatomy" 2 | export { connect } from "./qr-code.connect" 3 | export { machine } from "./qr-code.machine" 4 | export * from "./qr-code.props" 5 | export type { 6 | QrCodeApi as Api, 7 | QrCodeProps as Props, 8 | DownloadTriggerProps, 9 | ElementIds, 10 | QrCodeGenerateOptions, 11 | QrCodeGenerateResult, 12 | QrCodeService as Service, 13 | QrCodeMachine as Machine, 14 | ValueChangeDetails, 15 | } from "./qr-code.types" 16 | -------------------------------------------------------------------------------- /packages/machines/qr-code/src/qr-code.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("qr-code").parts("root", "frame", "pattern", "overlay", "downloadTrigger") 4 | 5 | export const parts = anatomy.build() 6 | -------------------------------------------------------------------------------- /packages/machines/qr-code/src/qr-code.dom.ts: -------------------------------------------------------------------------------- 1 | import type { Scope } from "@zag-js/core" 2 | 3 | export const getRootId = (scope: Scope) => scope.ids?.root ?? `qrcode:${scope.id}:root` 4 | export const getFrameId = (scope: Scope) => scope.ids?.frame ?? `qrcode:${scope.id}:frame` 5 | export const getFrameEl = (scope: Scope) => scope.getById(getFrameId(scope)) 6 | -------------------------------------------------------------------------------- /packages/machines/qr-code/src/qr-code.props.ts: -------------------------------------------------------------------------------- 1 | import { createProps } from "@zag-js/types" 2 | import { createSplitProps } from "@zag-js/utils" 3 | import type { QrCodeProps } from "./qr-code.types" 4 | 5 | export const props = createProps()([ 6 | "ids", 7 | "defaultValue", 8 | "value", 9 | "id", 10 | "encoding", 11 | "dir", 12 | "getRootNode", 13 | "onValueChange", 14 | "pixelSize", 15 | ]) 16 | 17 | export const splitProps = createSplitProps>(props) 18 | -------------------------------------------------------------------------------- /packages/machines/qr-code/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/radio-group/src/index.ts: -------------------------------------------------------------------------------- 1 | export { anatomy } from "./radio-group.anatomy" 2 | export { connect } from "./radio-group.connect" 3 | export { machine } from "./radio-group.machine" 4 | export * from "./radio-group.props" 5 | export type { 6 | RadioGroupApi as Api, 7 | ElementIds, 8 | ItemProps, 9 | ItemState, 10 | RadioGroupProps as Props, 11 | RadioGroupService as Service, 12 | RadioGroupMachine as Machine, 13 | ValueChangeDetails, 14 | } from "./radio-group.types" 15 | -------------------------------------------------------------------------------- /packages/machines/radio-group/src/radio-group.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("radio-group").parts( 4 | "root", 5 | "label", 6 | "item", 7 | "itemText", 8 | "itemControl", 9 | "indicator", 10 | ) 11 | 12 | export const parts = anatomy.build() 13 | -------------------------------------------------------------------------------- /packages/machines/radio-group/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/rating-group/src/rating-group.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("rating-group").parts("root", "label", "item", "control") 4 | export const parts = anatomy.build() 5 | -------------------------------------------------------------------------------- /packages/machines/rating-group/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/select/src/select.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("select").parts( 4 | "label", 5 | "positioner", 6 | "trigger", 7 | "indicator", 8 | "clearTrigger", 9 | "item", 10 | "itemText", 11 | "itemIndicator", 12 | "itemGroup", 13 | "itemGroupLabel", 14 | "list", 15 | "content", 16 | "root", 17 | "control", 18 | "valueText", 19 | ) 20 | export const parts = anatomy.build() 21 | -------------------------------------------------------------------------------- /packages/machines/select/src/select.collection.ts: -------------------------------------------------------------------------------- 1 | import { ListCollection, type CollectionItem, type CollectionOptions } from "@zag-js/collection" 2 | 3 | export const collection = (options: CollectionOptions): ListCollection => { 4 | return new ListCollection(options) 5 | } 6 | 7 | collection.empty = (): ListCollection => { 8 | return new ListCollection({ items: [] }) 9 | } 10 | -------------------------------------------------------------------------------- /packages/machines/select/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/signature-pad/src/signature-pad.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("signature-pad").parts( 4 | "root", 5 | "control", 6 | "segment", 7 | "segmentPath", 8 | "guide", 9 | "clearTrigger", 10 | "label", 11 | ) 12 | 13 | export const parts = anatomy.build() 14 | -------------------------------------------------------------------------------- /packages/machines/signature-pad/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/slider/src/slider.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("slider").parts( 4 | "root", 5 | "label", 6 | "thumb", 7 | "valueText", 8 | "track", 9 | "range", 10 | "control", 11 | "markerGroup", 12 | "marker", 13 | "draggingIndicator", 14 | ) 15 | 16 | export const parts = anatomy.build() 17 | -------------------------------------------------------------------------------- /packages/machines/slider/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/splitter/src/splitter.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("splitter").parts("root", "panel", "resizeTrigger") 4 | 5 | export const parts = anatomy.build() 6 | -------------------------------------------------------------------------------- /packages/machines/splitter/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/steps/src/index.ts: -------------------------------------------------------------------------------- 1 | export { anatomy } from "./steps.anatomy" 2 | export { connect } from "./steps.connect" 3 | export { machine } from "./steps.machine" 4 | export * from "./steps.props" 5 | export type { 6 | StepsApi as Api, 7 | StepsProps as Props, 8 | ElementIds, 9 | ItemProps, 10 | ItemState, 11 | StepsMachine as Machine, 12 | StepsService as Service, 13 | StepChangeDetails, 14 | } from "./steps.types" 15 | -------------------------------------------------------------------------------- /packages/machines/steps/src/steps.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("steps").parts( 4 | "root", 5 | "list", 6 | "item", 7 | "trigger", 8 | "indicator", 9 | "separator", 10 | "content", 11 | "nextTrigger", 12 | "prevTrigger", 13 | "progress", 14 | ) 15 | 16 | export const parts = anatomy.build() 17 | -------------------------------------------------------------------------------- /packages/machines/steps/src/steps.dom.ts: -------------------------------------------------------------------------------- 1 | import type { Scope } from "@zag-js/core" 2 | 3 | export const getRootId = (ctx: Scope) => ctx.ids?.root ?? `steps:${ctx.id}` 4 | export const getListId = (ctx: Scope) => ctx.ids?.list ?? `steps:${ctx.id}:list` 5 | export const getTriggerId = (ctx: Scope, index: number) => 6 | ctx.ids?.triggerId?.(index) ?? `steps:${ctx.id}:trigger:${index}` 7 | export const getContentId = (ctx: Scope, index: number) => 8 | ctx.ids?.contentId?.(index) ?? `steps:${ctx.id}:content:${index}` 9 | -------------------------------------------------------------------------------- /packages/machines/steps/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/switch/src/index.ts: -------------------------------------------------------------------------------- 1 | export { anatomy } from "./switch.anatomy" 2 | export { connect } from "./switch.connect" 3 | export { machine } from "./switch.machine" 4 | export * from "./switch.props" 5 | export type { 6 | CheckedChangeDetails, 7 | ElementIds, 8 | SwitchApi as Api, 9 | SwitchProps as Props, 10 | SwitchService as Service, 11 | } from "./switch.types" 12 | -------------------------------------------------------------------------------- /packages/machines/switch/src/switch.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("switch").parts("root", "label", "control", "thumb") 4 | export const parts = anatomy.build() 5 | -------------------------------------------------------------------------------- /packages/machines/switch/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/tabs/src/index.ts: -------------------------------------------------------------------------------- 1 | export { anatomy } from "./tabs.anatomy" 2 | export { connect } from "./tabs.connect" 3 | export { machine } from "./tabs.machine" 4 | export * from "./tabs.props" 5 | export type { 6 | TabsApi as Api, 7 | ContentProps, 8 | TabsProps as Props, 9 | ElementIds, 10 | FocusChangeDetails, 11 | IntlTranslations, 12 | NavigateDetails, 13 | TabsMachine as Machine, 14 | TabsService as Service, 15 | TriggerProps, 16 | ValueChangeDetails, 17 | } from "./tabs.types" 18 | -------------------------------------------------------------------------------- /packages/machines/tabs/src/tabs.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("tabs").parts("root", "list", "trigger", "content", "indicator") 4 | export const parts = anatomy.build() 5 | -------------------------------------------------------------------------------- /packages/machines/tabs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/tags-input/src/tags-input.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("tagsInput").parts( 4 | "root", 5 | "label", 6 | "control", 7 | "input", 8 | "clearTrigger", 9 | "item", 10 | "itemPreview", 11 | "itemInput", 12 | "itemText", 13 | "itemDeleteTrigger", 14 | ) 15 | 16 | export const parts = anatomy.build() 17 | -------------------------------------------------------------------------------- /packages/machines/tags-input/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/time-picker/src/time-picker.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("time-picker").parts( 4 | "cell", 5 | "clearTrigger", 6 | "column", 7 | "content", 8 | "control", 9 | "input", 10 | "label", 11 | "positioner", 12 | "root", 13 | "spacer", 14 | "trigger", 15 | ) 16 | 17 | export const parts = anatomy.build() 18 | -------------------------------------------------------------------------------- /packages/machines/time-picker/src/time-picker.parse.ts: -------------------------------------------------------------------------------- 1 | import { Time } from "@internationalized/date" 2 | 3 | interface TimeSegment { 4 | hour: number 5 | minute: number 6 | second: number 7 | millisecond: number 8 | } 9 | 10 | export function parse(value: Partial): Time { 11 | return new Time(value.hour, value.minute, value.second, value.millisecond) 12 | } 13 | -------------------------------------------------------------------------------- /packages/machines/time-picker/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/timer/src/timer.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("timer").parts( 4 | "root", 5 | "area", 6 | "control", 7 | "item", 8 | "itemValue", 9 | "itemLabel", 10 | "actionTrigger", 11 | "separator", 12 | ) 13 | 14 | export const parts = anatomy.build() 15 | -------------------------------------------------------------------------------- /packages/machines/timer/src/timer.dom.ts: -------------------------------------------------------------------------------- 1 | import type { Scope } from "@zag-js/core" 2 | 3 | export const getRootId = (ctx: Scope) => ctx.ids?.root ?? `timer:${ctx.id}:root` 4 | export const getAreaId = (ctx: Scope) => ctx.ids?.area ?? `timer:${ctx.id}:area` 5 | export const getAreaEl = (ctx: Scope) => ctx.getById(getAreaId(ctx)) 6 | -------------------------------------------------------------------------------- /packages/machines/timer/src/timer.props.ts: -------------------------------------------------------------------------------- 1 | import { createProps } from "@zag-js/types" 2 | import { createSplitProps } from "@zag-js/utils" 3 | import type { TimerProps } from "./timer.types" 4 | 5 | export const props = createProps()([ 6 | "autoStart", 7 | "countdown", 8 | "getRootNode", 9 | "id", 10 | "ids", 11 | "interval", 12 | "onComplete", 13 | "onTick", 14 | "startMs", 15 | "targetMs", 16 | ]) 17 | 18 | export const splitProps = createSplitProps>(props) 19 | -------------------------------------------------------------------------------- /packages/machines/timer/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/toast/src/toast.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("toast").parts( 4 | "group", 5 | "root", 6 | "title", 7 | "description", 8 | "actionTrigger", 9 | "closeTrigger", 10 | ) 11 | 12 | export const parts = anatomy.build() 13 | -------------------------------------------------------------------------------- /packages/machines/toast/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/toggle-group/src/toggle-group.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("toggle-group").parts("root", "item") 4 | export const parts = anatomy.build() 5 | -------------------------------------------------------------------------------- /packages/machines/toggle-group/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/toggle/src/index.ts: -------------------------------------------------------------------------------- 1 | export { anatomy } from "./toggle.anatomy" 2 | export { connect } from "./toggle.connect" 3 | export { machine } from "./toggle.machine" 4 | export * from "./toggle.props" 5 | export type { 6 | ToggleProps as Props, 7 | ToggleApi as Api, 8 | ToggleService as Service, 9 | ToggleSchema as Schema, 10 | ToggleMachine as Machine, 11 | } from "./toggle.types" 12 | -------------------------------------------------------------------------------- /packages/machines/toggle/src/toggle.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("toggle", ["root", "indicator"]) 4 | 5 | export const parts = anatomy.build() 6 | -------------------------------------------------------------------------------- /packages/machines/toggle/src/toggle.props.ts: -------------------------------------------------------------------------------- 1 | import { createProps } from "@zag-js/types" 2 | import { createSplitProps } from "@zag-js/utils" 3 | import type { ToggleProps } from "./toggle.types" 4 | 5 | export const props = createProps()(["defaultPressed", "pressed", "onPressedChange", "disabled"]) 6 | export const splitProps = createSplitProps>(props) 7 | -------------------------------------------------------------------------------- /packages/machines/toggle/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/tooltip/src/index.ts: -------------------------------------------------------------------------------- 1 | export { anatomy } from "./tooltip.anatomy" 2 | export { connect } from "./tooltip.connect" 3 | export { machine } from "./tooltip.machine" 4 | export * from "./tooltip.props" 5 | export type { 6 | TooltipApi as Api, 7 | ElementIds, 8 | OpenChangeDetails, 9 | Placement, 10 | PositioningOptions, 11 | TooltipMachine as Machine, 12 | TooltipProps as Props, 13 | TooltipService as Service, 14 | } from "./tooltip.types" 15 | -------------------------------------------------------------------------------- /packages/machines/tooltip/src/tooltip.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("tooltip").parts("trigger", "arrow", "arrowTip", "positioner", "content") 4 | export const parts = anatomy.build() 5 | -------------------------------------------------------------------------------- /packages/machines/tooltip/src/tooltip.store.ts: -------------------------------------------------------------------------------- 1 | import { proxy } from "@zag-js/store" 2 | 3 | export const store = proxy<{ id: string | null }>({ id: null }) 4 | -------------------------------------------------------------------------------- /packages/machines/tooltip/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/tour/src/tour.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("tour").parts( 4 | "content", 5 | "actionTrigger", 6 | "closeTrigger", 7 | "progressText", 8 | "title", 9 | "description", 10 | "positioner", 11 | "arrow", 12 | "arrowTip", 13 | "backdrop", 14 | "spotlight", 15 | ) 16 | 17 | export const parts = anatomy.build() 18 | -------------------------------------------------------------------------------- /packages/machines/tour/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/machines/tree-view/src/tree-view.anatomy.ts: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("tree-view").parts( 4 | "root", 5 | "label", 6 | "tree", 7 | "item", 8 | "itemIndicator", 9 | "itemText", 10 | "branch", 11 | "branchControl", 12 | "branchTrigger", 13 | "branchContent", 14 | "branchText", 15 | "branchIndicator", 16 | "branchIndentGuide", 17 | ) 18 | 19 | export const parts = anatomy.build() 20 | -------------------------------------------------------------------------------- /packages/machines/tree-view/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/store/README.md: -------------------------------------------------------------------------------- 1 | # @zag-js/store 2 | 3 | The reactive store package for zag machines 4 | 5 | ## Installation 6 | 7 | ```sh 8 | yarn add @zag-js/store 9 | # or 10 | npm i @zag-js/store 11 | ``` 12 | 13 | ## Contribution 14 | 15 | Yes please! See the [contributing guidelines](https://github.com/chakra-ui/zag/blob/main/CONTRIBUTING.md) for details. 16 | 17 | ## Licence 18 | 19 | This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/zag/blob/main/LICENSE). 20 | -------------------------------------------------------------------------------- /packages/store/src/index.ts: -------------------------------------------------------------------------------- 1 | export { clone } from "./clone" 2 | export { globalRef } from "./global" 3 | export { proxy, ref, snapshot, subscribe, type Ref, type Snapshot } from "./proxy" 4 | export { proxyWithComputed } from "./proxy-computed" 5 | -------------------------------------------------------------------------------- /packages/store/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/types/src/create-props.ts: -------------------------------------------------------------------------------- 1 | type StrictKeys = K extends (keyof T)[] 2 | ? [keyof T] extends [K[number]] 3 | ? unknown 4 | : `Missing required keys: ${Exclude}` 5 | : never 6 | 7 | export const createProps = 8 | >() => 9 | (props: K & StrictKeys) => 10 | Array.from(new Set(props)) 11 | -------------------------------------------------------------------------------- /packages/types/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/utilities/aria-hidden/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/utilities/auto-resize/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./autoresize-input" 2 | export * from "./autoresize-textarea" 3 | -------------------------------------------------------------------------------- /packages/utilities/auto-resize/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/utilities/collection/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src", "tests"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/utilities/color-utils/src/index.ts: -------------------------------------------------------------------------------- 1 | export { getColorAreaGradient } from "./area-gradient" 2 | export { Color } from "./color" 3 | export { normalizeColor, parseColor } from "./parse-color" 4 | export type { ColorAxes, ColorChannel, ColorChannelRange, ColorFormat, ColorStringFormat, ColorType } from "./types" 5 | -------------------------------------------------------------------------------- /packages/utilities/color-utils/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/utilities/core/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./array" 2 | export * from "./equal" 3 | export * from "./functions" 4 | export * from "./guard" 5 | export * from "./number" 6 | export * from "./object" 7 | export * from "./timers" 8 | export * from "./warning" 9 | -------------------------------------------------------------------------------- /packages/utilities/core/tests/number.test.ts: -------------------------------------------------------------------------------- 1 | import { decrementValue, incrementValue } from "../src" 2 | 3 | describe("number", () => { 4 | test("increment", () => { 5 | expect(incrementValue(1.123, 0.004)).toBe(1.127) 6 | expect(incrementValue(12.01, 0.04)).toBe(12.05) 7 | expect(incrementValue(12.05, 0.05)).toBe(12.1) 8 | }) 9 | 10 | test("decrement", () => { 11 | expect(decrementValue(12.015, 0.004)).toBe(12.011) 12 | }) 13 | }) 14 | -------------------------------------------------------------------------------- /packages/utilities/core/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/utilities/date-utils/src/get-era-format.ts: -------------------------------------------------------------------------------- 1 | import type { DateValue } from "@internationalized/date" 2 | 3 | export function getEraFormat(date: DateValue | undefined): "short" | undefined { 4 | return date?.calendar.identifier === "gregory" && date.era === "BC" ? "short" : undefined 5 | } 6 | -------------------------------------------------------------------------------- /packages/utilities/date-utils/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./align" 2 | export * from "./assertion" 3 | export * from "./constrain" 4 | export * from "./duration" 5 | export * from "./format" 6 | export * from "./formatter" 7 | export * from "./date-month" 8 | export * from "./date-year" 9 | export * from "./mutation" 10 | export * from "./pagination" 11 | export * from "./parse-date" 12 | export * from "./preset" 13 | export type { DateAdjustFn, DateGranularity, DateRangePreset } from "./types" 14 | -------------------------------------------------------------------------------- /packages/utilities/date-utils/tests/normalize-year.test.ts: -------------------------------------------------------------------------------- 1 | import { describe, expect, test } from "vitest" 2 | import { normalizeYear } from "../src" 3 | 4 | describe("normalize year", () => { 5 | test("with 2 digits", () => { 6 | expect(normalizeYear("23")).toBe("2023") 7 | }) 8 | 9 | test("with 3 digits", () => { 10 | expect(normalizeYear("123")).toBe("1230") 11 | }) 12 | 13 | test("with 4 digits", () => { 14 | expect(normalizeYear("2023")).toBe("2023") 15 | }) 16 | }) 17 | -------------------------------------------------------------------------------- /packages/utilities/date-utils/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src", "tests"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/utilities/dismissable/src/escape-keydown.ts: -------------------------------------------------------------------------------- 1 | import { addDomEvent, getDocument } from "@zag-js/dom-query" 2 | 3 | export function trackEscapeKeydown(node: HTMLElement, fn?: (event: KeyboardEvent) => void) { 4 | const handleKeyDown = (event: KeyboardEvent) => { 5 | if (event.key !== "Escape") return 6 | if (event.isComposing) return 7 | fn?.(event) 8 | } 9 | 10 | return addDomEvent(getDocument(node), "keydown", handleKeyDown, { capture: true }) 11 | } 12 | -------------------------------------------------------------------------------- /packages/utilities/dismissable/src/index.ts: -------------------------------------------------------------------------------- 1 | export type { 2 | FocusOutsideEvent, 3 | InteractOutsideEvent, 4 | InteractOutsideHandlers, 5 | PointerDownOutsideEvent, 6 | } from "@zag-js/interact-outside" 7 | export * from "./dismissable-layer" 8 | -------------------------------------------------------------------------------- /packages/utilities/dismissable/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/utilities/dom-query/src/computed-style.ts: -------------------------------------------------------------------------------- 1 | import { getWindow } from "./node" 2 | 3 | const styleCache = new WeakMap() 4 | 5 | export function getComputedStyle(el: Element) { 6 | if (!styleCache.has(el)) { 7 | styleCache.set(el, getWindow(el).getComputedStyle(el)) 8 | } 9 | return styleCache.get(el)! 10 | } 11 | -------------------------------------------------------------------------------- /packages/utilities/dom-query/src/navigate.ts: -------------------------------------------------------------------------------- 1 | import { isFirefox } from "./platform" 2 | import { queueBeforeEvent } from "./raf" 3 | 4 | export function clickIfLink(el: HTMLAnchorElement) { 5 | const click = () => el.click() 6 | if (isFirefox()) { 7 | queueBeforeEvent(el, "keyup", click) 8 | } else { 9 | queueMicrotask(click) 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/utilities/dom-query/src/visually-hidden.ts: -------------------------------------------------------------------------------- 1 | export const visuallyHiddenStyle = { 2 | border: "0", 3 | clip: "rect(0 0 0 0)", 4 | height: "1px", 5 | margin: "-1px", 6 | overflow: "hidden", 7 | padding: "0", 8 | position: "absolute", 9 | width: "1px", 10 | whiteSpace: "nowrap", 11 | wordWrap: "normal", 12 | } as const 13 | 14 | export function setVisuallyHidden(el: HTMLElement) { 15 | Object.assign(el.style, visuallyHiddenStyle) 16 | } 17 | -------------------------------------------------------------------------------- /packages/utilities/dom-query/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/utilities/file-utils/src/get-total-file-size.ts: -------------------------------------------------------------------------------- 1 | export const getTotalFileSize = (files: File[]) => { 2 | return files.reduce((acc, file) => acc + file.size, 0) 3 | } 4 | -------------------------------------------------------------------------------- /packages/utilities/file-utils/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./data-transfer" 2 | export * from "./data-url-to-blob" 3 | export * from "./download-file" 4 | export * from "./get-accept-attr" 5 | export * from "./get-file-data-url" 6 | export * from "./get-total-file-size" 7 | export * from "./is-file-equal" 8 | export * from "./is-valid-file-size" 9 | export * from "./is-valid-file-type" 10 | export type * from "./types.ts" 11 | -------------------------------------------------------------------------------- /packages/utilities/file-utils/src/is-file-equal.ts: -------------------------------------------------------------------------------- 1 | export const isFileEqual = (file1: File, file2: File) => { 2 | return file1.name === file2.name && file1.size === file2.size && file1.type === file2.type 3 | } 4 | -------------------------------------------------------------------------------- /packages/utilities/file-utils/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/utilities/focus-trap/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/utilities/focus-visible/README.md: -------------------------------------------------------------------------------- 1 | # @zag-js/focus-visible 2 | 3 | ## Installation 4 | 5 | ```sh 6 | yarn add @zag-js/focus-visible 7 | # or 8 | npm i @zag-js/focus-visible 9 | ``` 10 | 11 | ## Contribution 12 | 13 | Yes please! See the [contributing guidelines](https://github.com/chakra-ui/zag/blob/main/CONTRIBUTING.md) for details. 14 | 15 | ## Licence 16 | 17 | This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/zag/blob/main/LICENSE). 18 | -------------------------------------------------------------------------------- /packages/utilities/focus-visible/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/utilities/highlight-word/src/index.ts: -------------------------------------------------------------------------------- 1 | export { highlightWord } from "./highlight" 2 | export type { HighlightChunk, HighlightWordProps, HighlightSpan } from "./types" 3 | -------------------------------------------------------------------------------- /packages/utilities/highlight-word/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/utilities/i18n-utils/src/format-list.ts: -------------------------------------------------------------------------------- 1 | import { i18nCache } from "./cache" 2 | 3 | const getListFormatter = i18nCache(Intl.ListFormat) 4 | 5 | export function formatList(list: string[], locale: string, options: Intl.ListFormatOptions = {}) { 6 | const formatter = getListFormatter(locale, options) 7 | return formatter.format(list) 8 | } 9 | -------------------------------------------------------------------------------- /packages/utilities/i18n-utils/src/format-number.ts: -------------------------------------------------------------------------------- 1 | import { i18nCache } from "./cache" 2 | 3 | const getNumberFormatter = i18nCache(Intl.NumberFormat) 4 | 5 | export function formatNumber(v: number, locale: string, options: Intl.NumberFormatOptions = {}) { 6 | const formatter = getNumberFormatter(locale, options) 7 | return formatter.format(v) 8 | } 9 | -------------------------------------------------------------------------------- /packages/utilities/i18n-utils/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./filter" 2 | export * from "./format-bytes" 3 | export * from "./format-date" 4 | export * from "./format-list" 5 | export * from "./format-number" 6 | export * from "./format-relative-time" 7 | export { getLocaleDir, isRTL } from "./is-rtl" 8 | export { getDefaultLocale } from "./locale" 9 | export type { Locale } from "./locale" 10 | export { trackLocale } from "./track-locale" 11 | export type { LocaleOptions } from "./track-locale" 12 | -------------------------------------------------------------------------------- /packages/utilities/i18n-utils/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src", "tests"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/utilities/interact-outside/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/utilities/live-region/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/utilities/popper/src/index.ts: -------------------------------------------------------------------------------- 1 | export { getPlacement } from "./get-placement" 2 | export { getPlacementStyles, type GetPlacementStylesOptions } from "./get-styles" 3 | export { getPlacementSide, isValidPlacement } from "./placement" 4 | export type { 5 | AnchorRect, 6 | AutoUpdateOptions, 7 | Boundary, 8 | ComputePositionReturn, 9 | Placement, 10 | PlacementAlign, 11 | PlacementSide, 12 | PositioningOptions, 13 | } from "./types" 14 | -------------------------------------------------------------------------------- /packages/utilities/popper/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/utilities/rect/README.md: -------------------------------------------------------------------------------- 1 | # @zag-js/geometry 2 | 3 | ## Installation 4 | 5 | ```sh 6 | yarn add @zag-js/geometry 7 | # or 8 | npm i @zag-js/geometry 9 | ``` 10 | 11 | ## Contribution 12 | 13 | Yes please! See the [contributing guidelines](https://github.com/chakra-ui/zag/blob/main/CONTRIBUTING.md) for details. 14 | 15 | ## Licence 16 | 17 | This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/zag/blob/main/LICENSE). 18 | -------------------------------------------------------------------------------- /packages/utilities/rect/src/angle.ts: -------------------------------------------------------------------------------- 1 | import type { Point, Rect } from "./types" 2 | 3 | export function getPointAngle(rect: Rect, point: Point, reference = rect.center) { 4 | const x = point.x - reference.x 5 | const y = point.y - reference.y 6 | const deg = Math.atan2(x, y) * (180 / Math.PI) + 180 7 | return 360 - deg 8 | } 9 | -------------------------------------------------------------------------------- /packages/utilities/rect/src/equality.ts: -------------------------------------------------------------------------------- 1 | import type { Point, RectInit, Size } from "./types" 2 | 3 | export const isSizeEqual = (a: Size, b: Size | undefined) => { 4 | return a.width === b?.width && a.height === b?.height 5 | } 6 | 7 | export const isPointEqual = (a: Point, b: Point | undefined) => { 8 | return a.x === b?.x && a.y === b?.y 9 | } 10 | 11 | export const isRectEqual = (a: RectInit, b: RectInit | undefined) => { 12 | return isPointEqual(a, b) && isSizeEqual(a, b) 13 | } 14 | -------------------------------------------------------------------------------- /packages/utilities/rect/src/from-points.ts: -------------------------------------------------------------------------------- 1 | import { createRect } from "./rect" 2 | import type { Point, Rect } from "./types" 3 | 4 | export function getRectFromPoints(...pts: Point[]): Rect { 5 | const xs = pts.map((p) => p.x) 6 | const ys = pts.map((p) => p.y) 7 | 8 | const x = Math.min(...xs) 9 | const y = Math.min(...ys) 10 | 11 | const width = Math.max(...xs) - x 12 | const height = Math.max(...ys) - y 13 | 14 | return createRect({ x, y, width, height }) 15 | } 16 | -------------------------------------------------------------------------------- /packages/utilities/rect/src/union.ts: -------------------------------------------------------------------------------- 1 | import { getRectFromPoints } from "./from-points" 2 | import type { Rect } from "./types" 3 | 4 | const { min, max } = Math 5 | 6 | export function union(...rs: Rect[]): Rect { 7 | const pMin = { 8 | x: min(...rs.map((r) => r.minX)), 9 | y: min(...rs.map((r) => r.minY)), 10 | } 11 | const pMax = { 12 | x: max(...rs.map((r) => r.maxX)), 13 | y: max(...rs.map((r) => r.maxY)), 14 | } 15 | return getRectFromPoints(pMin, pMax) 16 | } 17 | -------------------------------------------------------------------------------- /packages/utilities/rect/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/utilities/remove-scroll/README.md: -------------------------------------------------------------------------------- 1 | # @zag-js/remove-scroll 2 | 3 | ## Installation 4 | 5 | ```sh 6 | yarn add @zag-js/remove-scroll 7 | # or 8 | npm i @zag-js/remove-scroll 9 | ``` 10 | 11 | ## Contribution 12 | 13 | Yes please! See the [contributing guidelines](https://github.com/chakra-ui/zag/blob/main/CONTRIBUTING.md) for details. 14 | 15 | ## Licence 16 | 17 | This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/zag/blob/main/LICENSE). 18 | -------------------------------------------------------------------------------- /packages/utilities/remove-scroll/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/utilities/scroll-snap/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/utilities/stringify-state/src/json-format-highlight.d.ts: -------------------------------------------------------------------------------- 1 | declare module "json-format-highlight" { 2 | export interface FormatOptions { 3 | keyColor?: string 4 | numberColor?: string 5 | stringColor?: string 6 | trueColor?: string 7 | falseColor?: string 8 | nullColor?: string 9 | } 10 | 11 | export default function formatHighlight(code: string, options?: Options): string 12 | } 13 | -------------------------------------------------------------------------------- /packages/utilities/stringify-state/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /plop/machine/src/index.ts.hbs: -------------------------------------------------------------------------------- 1 | export { anatomy } from "./{{dashCase machine}}.anatomy" 2 | export { connect } from "./{{dashCase machine}}.connect" 3 | export { machine } from "./{{dashCase machine}}.machine" 4 | export * from "./{{dashCase machine}}.props" 5 | export type { {{pascalCase machine}}Service, {{pascalCase machine}}Schema } from "./{{dashCase machine}}.types" 6 | -------------------------------------------------------------------------------- /plop/machine/src/{{machine}}.anatomy.ts.hbs: -------------------------------------------------------------------------------- 1 | import { createAnatomy } from "@zag-js/anatomy" 2 | 3 | export const anatomy = createAnatomy("{{dashCase machine}}").parts("root") 4 | 5 | export const parts = anatomy.build() 6 | -------------------------------------------------------------------------------- /plop/machine/src/{{machine}}.connect.ts.hbs: -------------------------------------------------------------------------------- 1 | import type { NormalizeProps, PropTypes } from "@zag-js/types" 2 | import type { State, Send } from "./{{dashCase machine}}.types" 3 | import { parts } from "./{{dashCase machine}}.anatomy" 4 | import { dom } from "./{{dashCase machine}}.dom" 5 | 6 | export function connect(service: {{machine}}Service, normalize: NormalizeProps) { 7 | return { 8 | getRootProps() { 9 | return normalize.element({}) 10 | }, 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /plop/machine/src/{{machine}}.dom.ts.hbs: -------------------------------------------------------------------------------- 1 | import type { Scope } from "@zag-js/core" 2 | 3 | export const getRootId = (ctx: MachineContext) => `{{dashCase machine}}-${ctx.id}` 4 | -------------------------------------------------------------------------------- /plop/machine/src/{{machine}}.props.ts.hbs: -------------------------------------------------------------------------------- 1 | import { createProps } from "@zag-js/types" 2 | import { createSplitProps } from "@zag-js/utils" 3 | import type { UserDefinedContext } from "./{{dashCase machine}}.types" 4 | 5 | export const props = createProps()([]) 6 | export const splitProps = createSplitProps>(props) 7 | -------------------------------------------------------------------------------- /plop/machine/tsconfig.json.hbs: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /plop/utility/README.md.hbs: -------------------------------------------------------------------------------- 1 | # @zag-js/{{name}} 2 | 3 | {{description}} 4 | 5 | ## Installation 6 | 7 | ```sh 8 | yarn add @zag-js/{{name}} 9 | # or 10 | npm i @zag-js/{{name}} 11 | ``` 12 | 13 | ## Contribution 14 | 15 | Yes please! See the 16 | [contributing guidelines](https://github.com/chakra-ui/zag/blob/main/CONTRIBUTING.md) 17 | for details. 18 | 19 | ## Licence 20 | 21 | This project is licensed under the terms of the 22 | [MIT license](https://github.com/chakra-ui/zag/blob/main/LICENSE). 23 | -------------------------------------------------------------------------------- /plop/utility/src/index.ts: -------------------------------------------------------------------------------- 1 | export function add(a: number, b: number) { 2 | return a + b 3 | } 4 | -------------------------------------------------------------------------------- /plop/utility/tsconfig.json.hbs: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - "packages/**" 3 | - "shared" 4 | - "examples/**" 5 | - "starters/**" 6 | - "website" 7 | -------------------------------------------------------------------------------- /scripts/logger.ts: -------------------------------------------------------------------------------- 1 | import signale from "signale" 2 | 3 | export function createLogger(scope: string) { 4 | return signale.scope(scope) 5 | } 6 | -------------------------------------------------------------------------------- /shared/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./src" 2 | -------------------------------------------------------------------------------- /shared/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@zag-js/shared", 3 | "version": "0.0.4", 4 | "main": "src/index.ts", 5 | "private": true, 6 | "dependencies": { 7 | "@zag-js/tour": "workspace:*" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /shared/src/css/anatomy.css: -------------------------------------------------------------------------------- 1 | .anatomy { 2 | position: fixed; 3 | top: 0; 4 | bottom: 0; 5 | left: 0; 6 | overflow: auto; 7 | max-height: 100%; 8 | } 9 | 10 | .anatomy .anatomy__item { 11 | display: flex; 12 | overflow: auto; 13 | width: 100%; 14 | position: relative; 15 | } 16 | 17 | .anatomy span { 18 | position: absolute; 19 | top: 2; 20 | left: 2; 21 | font-weight: 500; 22 | } 23 | 24 | .anatomy svg { 25 | width: calc(100vw / 3); 26 | height: fit-content; 27 | } 28 | -------------------------------------------------------------------------------- /shared/src/css/hover-card.css: -------------------------------------------------------------------------------- 1 | [data-scope="hover-card"][data-part="trigger"] { 2 | background: rgb(110, 86, 207); 3 | color: white; 4 | width: fit-content; 5 | padding: 6px; 6 | } 7 | 8 | [data-scope="hover-card"][data-part="content"] { 9 | background: rgb(225, 223, 228); 10 | padding: 6px; 11 | height: 150px; 12 | width: 300px; 13 | } 14 | -------------------------------------------------------------------------------- /shared/src/css/pin-input.css: -------------------------------------------------------------------------------- 1 | [data-scope="pin-input"][data-part="control"] { 2 | width: 300px; 3 | display: flex; 4 | margin-bottom: 12px; 5 | gap: 12px; 6 | } 7 | 8 | [data-scope="pin-input"][data-part="label"] { 9 | display: block; 10 | margin-bottom: 8px; 11 | } 12 | 13 | [data-scope="pin-input"][data-part="input"] { 14 | width: 48px; 15 | height: 48px; 16 | text-align: center; 17 | font-size: 24px; 18 | } 19 | -------------------------------------------------------------------------------- /shared/src/css/qr-code.css: -------------------------------------------------------------------------------- 1 | [data-scope="qr-code"][data-part="frame"] { 2 | width: 120px; 3 | height: 120px; 4 | background-color: white; 5 | } 6 | 7 | [data-scope="qr-code"][data-part="pattern"] { 8 | fill: green; 9 | } 10 | 11 | [data-scope="qr-code"][data-part="overlay"] { 12 | width: 25%; 13 | height: 25%; 14 | outline: 4px solid white; 15 | 16 | & img { 17 | width: 100%; 18 | height: 100%; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /shared/src/css/segmented-control.css: -------------------------------------------------------------------------------- 1 | .segmented-control [data-part="root"] { 2 | width: fit-content; 3 | padding: 4px; 4 | background-color: #f1f3f5; 5 | border-radius: 4px; 6 | gap: 8px; 7 | } 8 | 9 | .segmented-control [data-part="item"] { 10 | padding-left: 0; 11 | padding: 8px; 12 | width: 100%; 13 | text-align: center; 14 | } 15 | 16 | .segmented-control [data-part="indicator"] { 17 | width: var(--width); 18 | height: var(--height); 19 | } 20 | -------------------------------------------------------------------------------- /shared/src/css/toggle-group.css: -------------------------------------------------------------------------------- 1 | [data-scope="toggle-group"][data-part="root"] { 2 | display: flex; 3 | } 4 | 5 | [data-scope="toggle-group"][data-part="item"] { 6 | border-radius: 0px; 7 | border: 0; 8 | width: 40px; 9 | height: 40px; 10 | } 11 | 12 | [data-scope="toggle-group"][data-part="item"][data-state="on"] { 13 | background-color: blue; 14 | color: white; 15 | } 16 | -------------------------------------------------------------------------------- /shared/src/css/toggle.css: -------------------------------------------------------------------------------- 1 | [data-scope="toggle"][data-part="root"] { 2 | border-radius: 4px; 3 | border: 0; 4 | width: 40px; 5 | height: 40px; 6 | } 7 | 8 | [data-scope="toggle"][data-part="root"][data-pressed] { 9 | background-color: blue; 10 | color: white; 11 | } 12 | -------------------------------------------------------------------------------- /shared/src/css/tooltip.css: -------------------------------------------------------------------------------- 1 | .tooltip > .root { 2 | display: flex; 3 | gap: 20px; 4 | } 5 | 6 | [data-scope="tooltip"][data-part="content"] { 7 | z-index: 1; 8 | padding: 0.25em 0.5em; 9 | box-shadow: 2px 2px 10px hsla(0, 0%, 0%, 0.1); 10 | white-space: nowrap; 11 | font-size: 85%; 12 | background: #f0f0f0; 13 | color: #444; 14 | border: solid 1px #ccc; 15 | } 16 | -------------------------------------------------------------------------------- /shared/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./controls" 2 | export * from "./data" 3 | export * from "./deep-get-set" 4 | export * from "./define-controls" 5 | export * from "./routes" 6 | -------------------------------------------------------------------------------- /shared/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /starters/react/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/zag/5c760a769085232a096789c002ea6ab96608ffb6/starters/react/app/favicon.ico -------------------------------------------------------------------------------- /starters/react/app/select/virtualized/page.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import { VirtualizedSelect } from "../../../components/virtualized-select" 4 | 5 | export default function Page() { 6 | return ( 7 |
8 | 9 |
10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /starters/react/components/button.tsx: -------------------------------------------------------------------------------- 1 | export const Button = (props: React.ComponentProps<"button">) => { 2 | return ( 3 |