diff --git a/.changeset/afraid-bikes-enjoy.md b/.changeset/afraid-bikes-enjoy.md
new file mode 100644
index 0000000000..2f4b1097eb
--- /dev/null
+++ b/.changeset/afraid-bikes-enjoy.md
@@ -0,0 +1,5 @@
+---
+"@zag-js/anatomy-icons": patch
+---
+
+Add anatomy-icons package
diff --git a/examples/next-ts/package.json b/examples/next-ts/package.json
index d439bbc30e..18623d059b 100644
--- a/examples/next-ts/package.json
+++ b/examples/next-ts/package.json
@@ -13,6 +13,7 @@
"@internationalized/date": "^3.3.0",
"@zag-js/accordion": "workspace:*",
"@zag-js/anatomy": "workspace:*",
+ "@zag-js/anatomy-icons": "workspace:*",
"@zag-js/aria-hidden": "workspace:*",
"@zag-js/auto-resize": "workspace:*",
"@zag-js/avatar": "workspace:*",
diff --git a/examples/next-ts/pages/anatomy.tsx b/examples/next-ts/pages/anatomy.tsx
new file mode 100644
index 0000000000..73f18730f1
--- /dev/null
+++ b/examples/next-ts/pages/anatomy.tsx
@@ -0,0 +1,22 @@
+import { allComponents, createGradient } from "@zag-js/anatomy-icons"
+
+const ACCENTS = ["red", "#2CFF80", "blue"]
+
+export default function Page() {
+ return (
+
+ {Object.entries(allComponents).map(([name, Anatomy], i) => (
+
+
{name.replace("Anatomy", "")}
+ {ACCENTS.map((accent, i) => {
+ return (
+
+ )
+ })}
+
+ ))}
+
+ )
+}
diff --git a/packages/anatomy-icons/README.md b/packages/anatomy-icons/README.md
new file mode 100644
index 0000000000..271c3d200e
--- /dev/null
+++ b/packages/anatomy-icons/README.md
@@ -0,0 +1,3 @@
+# Anatomy Icons
+
+This package provides a set of icons for use in the Zag.js docs for the anatomy section.
diff --git a/packages/anatomy-icons/package.json b/packages/anatomy-icons/package.json
new file mode 100644
index 0000000000..662ef1b630
--- /dev/null
+++ b/packages/anatomy-icons/package.json
@@ -0,0 +1,52 @@
+{
+ "name": "@zag-js/anatomy-icons",
+ "version": "0.12.0",
+ "keywords": [
+ "ui-machines",
+ "state-machines",
+ "zag",
+ "fsm",
+ "xstate",
+ "finite state machine"
+ ],
+ "author": "Segun Adebayo ",
+ "homepage": "https://github.com/chakra-ui/zag#readme",
+ "license": "MIT",
+ "repository": "https://github.com/chakra-ui/zag/tree/main/packages/machine",
+ "sideEffects": false,
+ "files": [
+ "dist",
+ "src"
+ ],
+ "scripts": {
+ "build": "tsup",
+ "test": "jest --config ../../jest.config.js --rootDir . --passWithNoTests",
+ "lint": "eslint src --ext .ts,.tsx",
+ "gen": "node scripts/generate.mjs",
+ "gen-dry": "node scripts/generate.mjs --dry-run",
+ "typecheck": "tsc --noEmit",
+ "prepack": "clean-package",
+ "postpack": "clean-package restore"
+ },
+ "publishConfig": {
+ "access": "public"
+ },
+ "bugs": {
+ "url": "https://github.com/chakra-ui/zag/issues"
+ },
+ "clean-package": "../../clean-package.config.json",
+ "main": "src/index.ts",
+ "devDependencies": {
+ "@types/react": "^18.2.15",
+ "clean-package": "2.2.0",
+ "react": "^18.2.0"
+ },
+ "dependencies": {
+ "color2k": "^2.0.2",
+ "@svgr/core": "^8.0.0",
+ "@svgr/plugin-jsx": "8.0.1"
+ },
+ "peerDependencies": {
+ "react": ">=16.8.0"
+ }
+}
diff --git a/packages/anatomy-icons/scripts/generate.mjs b/packages/anatomy-icons/scripts/generate.mjs
new file mode 100644
index 0000000000..fcc5f60fc5
--- /dev/null
+++ b/packages/anatomy-icons/scripts/generate.mjs
@@ -0,0 +1,118 @@
+import { transform } from "@svgr/core"
+import { readFileSync, writeFileSync } from "fs"
+import { format } from "prettier"
+
+const html = String.raw
+
+/* -----------------------------------------------------------------------------
+ * Edit code here
+ * -----------------------------------------------------------------------------*/
+
+const name = "RadioGroup"
+
+// prettier-ignore
+const svgCode = html`
+
+`
+
+/* -----------------------------------------------------------------------------
+ * Implmentation
+ * -----------------------------------------------------------------------------*/
+
+function toDashCase(str) {
+ return str
+ .replace(/([A-Z])/g, "-$1")
+ .replace(/^-/, "")
+ .toLowerCase()
+}
+
+const dashName = toDashCase(name)
+
+const defaultPalette = {
+ 0: "white",
+ 1: "#2CFF80",
+ 2: "#2C7A51",
+ 3: "#16402D",
+ 4: "#1C4D37",
+ 5: "#287753",
+ 6: "#1F8B56",
+ 7: "#2AB26B",
+ 8: "#1E6943",
+ 9: "#C1FFDF",
+ 10: "#41B883",
+ 11: "#299464",
+ 12: "#2AB36B",
+ 13: "#9FFFCD",
+ 14: "#0E432B",
+}
+
+function findColors(code) {
+ const pattern = /"#.*?"/g
+ const matches = code.match(pattern) || []
+ return Array.from(new Set(matches.map((match) => match.slice(1, -1))))
+}
+
+function replaceColors(code) {
+ const colors = findColors(code)
+
+ if (colors.length === 0) {
+ return code.replaceAll(`"white"`, `{palette[0]}`)
+ }
+
+ const regex = new RegExp(
+ colors
+ .map((c) => `"${c}"`)
+ .map((str) => str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"))
+ .join("|"),
+ "g",
+ )
+
+ return code
+ .replace(regex, (c) => {
+ const num = Object.entries(defaultPalette).find((cc) => `"${cc[1]}"` === c)
+ return `{palette[${num?.[0]}]}`
+ })
+ .replaceAll(`"white"`, `{palette[0]}`)
+}
+
+const jsxCode = transform.sync(svgCode, {
+ plugins: ["@svgr/plugin-jsx"],
+})
+
+let template = `
+import { createComponent } from "../create-component"
+
+export const ${name}Anatomy = createComponent((props) => {
+ const { palette, ...rest } = props
+ return (
+ ${jsxCode
+ .replace('import * as React from "react";\n', "")
+ .replace("const SvgComponent = props =>", "")
+ .replace("export default SvgComponent;", "")
+ .replace("{...props}", "{...rest}")
+ .replace(";", "")}
+ )
+})
+`
+
+template = await format(replaceColors(template), { parser: "typescript" })
+
+if (process.argv.includes("--dry-run")) {
+ console.log(template)
+ process.exit(0)
+}
+
+writeFileSync(`./src/components/${dashName}.tsx`, template, "utf-8")
+
+const content = readFileSync("./src/components/index.ts", "utf-8").replace(
+ "\n\nexport const allComponents = {",
+ `
+import { ${name}Anatomy } from "./${dashName}"
+
+export const allComponents = {
+ "${dashName}": ${name}Anatomy,`,
+)
+
+writeFileSync("./src/components/index.ts", content, "utf-8")
diff --git a/packages/anatomy-icons/src/components/accordion.tsx b/packages/anatomy-icons/src/components/accordion.tsx
new file mode 100644
index 0000000000..229717bb35
--- /dev/null
+++ b/packages/anatomy-icons/src/components/accordion.tsx
@@ -0,0 +1,100 @@
+import { createComponent } from "../create-component"
+
+export const AccordionAnatomy = createComponent((props) => {
+ const { palette, ...rest } = props
+
+ return (
+
+ )
+})
diff --git a/packages/anatomy-icons/src/components/avatar.tsx b/packages/anatomy-icons/src/components/avatar.tsx
new file mode 100644
index 0000000000..26c6a938ca
--- /dev/null
+++ b/packages/anatomy-icons/src/components/avatar.tsx
@@ -0,0 +1,60 @@
+import { createComponent } from "../create-component"
+
+export const AvatarAnatomy = createComponent((props) => {
+ const { palette, ...rest } = props
+
+ return (
+
+ )
+})
diff --git a/packages/anatomy-icons/src/components/checkbox.tsx b/packages/anatomy-icons/src/components/checkbox.tsx
new file mode 100644
index 0000000000..89968292dc
--- /dev/null
+++ b/packages/anatomy-icons/src/components/checkbox.tsx
@@ -0,0 +1,55 @@
+import { createComponent } from "../create-component"
+
+export const CheckboxAnatomy = createComponent((props) => {
+ const { palette, ...rest } = props
+
+ return (
+
+ )
+})
diff --git a/packages/anatomy-icons/src/components/combobox.tsx b/packages/anatomy-icons/src/components/combobox.tsx
new file mode 100644
index 0000000000..ed403492fc
--- /dev/null
+++ b/packages/anatomy-icons/src/components/combobox.tsx
@@ -0,0 +1,87 @@
+import { createComponent } from "../create-component"
+
+export const ComboboxAnatomy = createComponent((props) => {
+ const { palette, ...rest } = props
+
+ return (
+
+ )
+})
diff --git a/packages/anatomy-icons/src/components/dialog.tsx b/packages/anatomy-icons/src/components/dialog.tsx
new file mode 100644
index 0000000000..26f5cbb808
--- /dev/null
+++ b/packages/anatomy-icons/src/components/dialog.tsx
@@ -0,0 +1,55 @@
+import { createComponent } from "../create-component"
+
+export const DialogAnatomy = createComponent((props) => {
+ const { palette, ...rest } = props
+
+ return (
+
+ )
+})
diff --git a/packages/anatomy-icons/src/components/editable.tsx b/packages/anatomy-icons/src/components/editable.tsx
new file mode 100644
index 0000000000..166cb7c045
--- /dev/null
+++ b/packages/anatomy-icons/src/components/editable.tsx
@@ -0,0 +1,72 @@
+import { createComponent } from "../create-component"
+
+export const EditableAnatomy = createComponent((props) => {
+ const { palette, ...rest } = props
+
+ return (
+
+ )
+})
diff --git a/packages/anatomy-icons/src/components/hover-card.tsx b/packages/anatomy-icons/src/components/hover-card.tsx
new file mode 100644
index 0000000000..61ede795ed
--- /dev/null
+++ b/packages/anatomy-icons/src/components/hover-card.tsx
@@ -0,0 +1,38 @@
+import { createComponent } from "../create-component"
+
+export const HoverCardAnatomy = createComponent((props) => {
+ const { palette, ...rest } = props
+
+ return (
+
+ )
+})
diff --git a/packages/anatomy-icons/src/components/index.ts b/packages/anatomy-icons/src/components/index.ts
new file mode 100644
index 0000000000..16f61a72ca
--- /dev/null
+++ b/packages/anatomy-icons/src/components/index.ts
@@ -0,0 +1,53 @@
+import { AccordionAnatomy } from "./accordion"
+import { AvatarAnatomy } from "./avatar"
+import { CheckboxAnatomy } from "./checkbox"
+import { ComboboxAnatomy } from "./combobox"
+import { DialogAnatomy } from "./dialog"
+import { EditableAnatomy } from "./editable"
+import { HoverCardAnatomy } from "./hover-card"
+import { MenuAnatomy } from "./menu"
+import { NumberInputAnatomy } from "./number-input"
+import { PaginationAnatomy } from "./pagination"
+import { PinInputAnatomy } from "./pin-input"
+import { PopoverAnatomy } from "./popover"
+import { RatingAnatomy } from "./rating"
+import { SegmentedControlAnatomy } from "./segmented-control"
+import { SelectAnatomy } from "./select"
+import { SliderAnatomy } from "./slider"
+import { SplitterAnatomy } from "./splitter"
+import { SwitchAnatomy } from "./switch"
+import { TabsAnatomy } from "./tabs"
+import { TagsInputAnatomy } from "./tags-input"
+import { ToastAnatomy } from "./toast"
+import { TooltipAnatomy } from "./tooltip"
+
+export const allComponents = {
+ accordion: AccordionAnatomy,
+ avatar: AvatarAnatomy,
+ checkbox: CheckboxAnatomy,
+ combobox: ComboboxAnatomy,
+ dialog: DialogAnatomy,
+ editable: EditableAnatomy,
+ "hover-card": HoverCardAnatomy,
+ pagination: PaginationAnatomy,
+ "pin-input": PinInputAnatomy,
+ popover: PopoverAnatomy,
+ menu: MenuAnatomy,
+ "number-input": NumberInputAnatomy,
+ rating: RatingAnatomy,
+ "segmented-control": SegmentedControlAnatomy,
+ slider: SliderAnatomy,
+ "tags-input": TagsInputAnatomy,
+ tooltip: TooltipAnatomy,
+ toast: ToastAnatomy,
+ splitter: SplitterAnatomy,
+ select: SelectAnatomy,
+ switch: SwitchAnatomy,
+ tabs: TabsAnatomy,
+}
+
+export type ComponentAnatomyName = keyof typeof allComponents
+
+export function getComponent(name: ComponentAnatomyName) {
+ return allComponents[name]
+}
diff --git a/packages/anatomy-icons/src/components/menu.tsx b/packages/anatomy-icons/src/components/menu.tsx
new file mode 100644
index 0000000000..b4e29ba676
--- /dev/null
+++ b/packages/anatomy-icons/src/components/menu.tsx
@@ -0,0 +1,105 @@
+import { createComponent } from "../create-component"
+
+export const MenuAnatomy = createComponent((props) => {
+ const { palette, ...rest } = props
+
+ return (
+
+ )
+})
diff --git a/packages/anatomy-icons/src/components/number-input.tsx b/packages/anatomy-icons/src/components/number-input.tsx
new file mode 100644
index 0000000000..a74e903851
--- /dev/null
+++ b/packages/anatomy-icons/src/components/number-input.tsx
@@ -0,0 +1,104 @@
+import { createComponent } from "../create-component"
+
+export const NumberInputAnatomy = createComponent((props) => {
+ const { palette, ...rest } = props
+
+ return (
+
+ )
+})
diff --git a/packages/anatomy-icons/src/components/pagination.tsx b/packages/anatomy-icons/src/components/pagination.tsx
new file mode 100644
index 0000000000..a2108fa437
--- /dev/null
+++ b/packages/anatomy-icons/src/components/pagination.tsx
@@ -0,0 +1,106 @@
+import { createComponent } from "../create-component"
+
+export const PaginationAnatomy = createComponent((props) => {
+ const { palette, ...rest } = props
+
+ return (
+
+ )
+})
diff --git a/packages/anatomy-icons/src/components/pin-input.tsx b/packages/anatomy-icons/src/components/pin-input.tsx
new file mode 100644
index 0000000000..1de5b619cc
--- /dev/null
+++ b/packages/anatomy-icons/src/components/pin-input.tsx
@@ -0,0 +1,50 @@
+import { createComponent } from "../create-component"
+
+export const PinInputAnatomy = createComponent((props) => {
+ const { palette, ...rest } = props
+
+ return (
+
+ )
+})
diff --git a/packages/anatomy-icons/src/components/popover.tsx b/packages/anatomy-icons/src/components/popover.tsx
new file mode 100644
index 0000000000..e2674a67cd
--- /dev/null
+++ b/packages/anatomy-icons/src/components/popover.tsx
@@ -0,0 +1,66 @@
+import { createComponent } from "../create-component"
+
+export const PopoverAnatomy = createComponent((props) => {
+ const { palette, ...rest } = props
+
+ return (
+
+ )
+})
diff --git a/packages/anatomy-icons/src/components/rating.tsx b/packages/anatomy-icons/src/components/rating.tsx
new file mode 100644
index 0000000000..210bd78b07
--- /dev/null
+++ b/packages/anatomy-icons/src/components/rating.tsx
@@ -0,0 +1,94 @@
+import { createComponent } from "../create-component"
+
+export const RatingAnatomy = createComponent((props) => {
+ const { palette, ...rest } = props
+
+ return (
+
+ )
+})
diff --git a/packages/anatomy-icons/src/components/segmented-control.tsx b/packages/anatomy-icons/src/components/segmented-control.tsx
new file mode 100644
index 0000000000..ba42f0a030
--- /dev/null
+++ b/packages/anatomy-icons/src/components/segmented-control.tsx
@@ -0,0 +1,48 @@
+import { createComponent } from "../create-component"
+
+export const SegmentedControlAnatomy = createComponent((props) => {
+ const { palette, ...rest } = props
+
+ return (
+
+ )
+})
diff --git a/packages/anatomy-icons/src/components/select.tsx b/packages/anatomy-icons/src/components/select.tsx
new file mode 100644
index 0000000000..3bf2b7f793
--- /dev/null
+++ b/packages/anatomy-icons/src/components/select.tsx
@@ -0,0 +1,70 @@
+import { createComponent } from "../create-component"
+
+export const SelectAnatomy = createComponent((props) => {
+ const { palette, ...rest } = props
+
+ return (
+
+ )
+})
diff --git a/packages/anatomy-icons/src/components/slider.tsx b/packages/anatomy-icons/src/components/slider.tsx
new file mode 100644
index 0000000000..bf655ba288
--- /dev/null
+++ b/packages/anatomy-icons/src/components/slider.tsx
@@ -0,0 +1,115 @@
+import { createComponent } from "../create-component"
+
+export const SliderAnatomy = createComponent((props) => {
+ const { palette, ...rest } = props
+
+ return (
+
+ )
+})
diff --git a/packages/anatomy-icons/src/components/splitter.tsx b/packages/anatomy-icons/src/components/splitter.tsx
new file mode 100644
index 0000000000..01de3b3572
--- /dev/null
+++ b/packages/anatomy-icons/src/components/splitter.tsx
@@ -0,0 +1,91 @@
+import { createComponent } from "../create-component"
+
+export const SplitterAnatomy = createComponent((props) => {
+ const { palette, ...rest } = props
+
+ return (
+
+ )
+})
diff --git a/packages/anatomy-icons/src/components/switch.tsx b/packages/anatomy-icons/src/components/switch.tsx
new file mode 100644
index 0000000000..4289785ea1
--- /dev/null
+++ b/packages/anatomy-icons/src/components/switch.tsx
@@ -0,0 +1,84 @@
+import { createComponent } from "../create-component"
+
+export const SwitchAnatomy = createComponent((props) => {
+ const { palette, ...rest } = props
+
+ return (
+
+ )
+})
diff --git a/packages/anatomy-icons/src/components/tabs.tsx b/packages/anatomy-icons/src/components/tabs.tsx
new file mode 100644
index 0000000000..20b287bdf6
--- /dev/null
+++ b/packages/anatomy-icons/src/components/tabs.tsx
@@ -0,0 +1,62 @@
+import { createComponent } from "../create-component"
+
+export const TabsAnatomy = createComponent((props) => {
+ const { palette, ...rest } = props
+
+ return (
+
+ )
+})
diff --git a/packages/anatomy-icons/src/components/tags-input.tsx b/packages/anatomy-icons/src/components/tags-input.tsx
new file mode 100644
index 0000000000..933dcf866d
--- /dev/null
+++ b/packages/anatomy-icons/src/components/tags-input.tsx
@@ -0,0 +1,99 @@
+import { createComponent } from "../create-component"
+
+export const TagsInputAnatomy = createComponent((props) => {
+ const { palette, ...rest } = props
+
+ return (
+
+ )
+})
diff --git a/packages/anatomy-icons/src/components/toast.tsx b/packages/anatomy-icons/src/components/toast.tsx
new file mode 100644
index 0000000000..7bdc76fe1b
--- /dev/null
+++ b/packages/anatomy-icons/src/components/toast.tsx
@@ -0,0 +1,49 @@
+import { createComponent } from "../create-component"
+
+export const ToastAnatomy = createComponent((props) => {
+ const { palette, ...rest } = props
+
+ return (
+
+ )
+})
diff --git a/packages/anatomy-icons/src/components/tooltip.tsx b/packages/anatomy-icons/src/components/tooltip.tsx
new file mode 100644
index 0000000000..237f4f8294
--- /dev/null
+++ b/packages/anatomy-icons/src/components/tooltip.tsx
@@ -0,0 +1,46 @@
+import { createComponent } from "../create-component"
+
+export const TooltipAnatomy = createComponent((props) => {
+ const { palette, ...rest } = props
+
+ return (
+
+ )
+})
diff --git a/packages/anatomy-icons/src/create-component.tsx b/packages/anatomy-icons/src/create-component.tsx
new file mode 100644
index 0000000000..297dace067
--- /dev/null
+++ b/packages/anatomy-icons/src/create-component.tsx
@@ -0,0 +1,16 @@
+import { createElement, type ElementType } from "react"
+import { createPalette } from "./create-palette"
+
+type SvgProps = React.SVGProps
+
+type BaseProps = SvgProps & { accentColor: string }
+
+type Props = SvgProps & { palette: string[] }
+
+export function createComponent(Comp: React.ElementType) {
+ const AnatomyIcon: React.FC = ({ accentColor, ...rest }) => {
+ const palette = createPalette(accentColor)
+ return createElement(Comp, { palette, ...rest })
+ }
+ return AnatomyIcon as ElementType
+}
diff --git a/packages/anatomy-icons/src/create-gradient.ts b/packages/anatomy-icons/src/create-gradient.ts
new file mode 100644
index 0000000000..b7c097f2d4
--- /dev/null
+++ b/packages/anatomy-icons/src/create-gradient.ts
@@ -0,0 +1,11 @@
+import { adjustHue, darken, desaturate, toHex } from "color2k"
+
+export function createGradient(accentColor: string) {
+ const startColor = toHex(darken(desaturate(adjustHue(accentColor, 9), 0.52), 0.1))
+ const stopColor = toHex(darken(desaturate(adjustHue(accentColor, 9), 0.43), 0.22))
+ return {
+ startColor,
+ stopColor,
+ value: `linear-gradient(112deg, ${startColor} 0%, ${stopColor} 100%)`,
+ }
+}
diff --git a/packages/anatomy-icons/src/create-palette.ts b/packages/anatomy-icons/src/create-palette.ts
new file mode 100644
index 0000000000..427d1618bd
--- /dev/null
+++ b/packages/anatomy-icons/src/create-palette.ts
@@ -0,0 +1,21 @@
+import { adjustHue, darken, desaturate, lighten, toHex } from "color2k"
+
+export function createPalette(accentColor: string) {
+ return [
+ "#FFFFFF",
+ accentColor,
+ darken(desaturate(adjustHue(accentColor, 4), 0.53), 0.26),
+ darken(desaturate(adjustHue(accentColor, 9), 0.51), 0.42),
+ darken(desaturate(adjustHue(accentColor, 9), 0.53), 0.38),
+ darken(desaturate(adjustHue(accentColor, 9), 0.5), 0.28),
+ darken(desaturate(adjustHue(accentColor, 7), 0.36), 0.26),
+ darken(desaturate(adjustHue(accentColor, 5), 0.38), 0.16),
+ darken(desaturate(adjustHue(accentColor, 6), 0.44), 0.33),
+ lighten(adjustHue(accentColor, 5), 0.29),
+ darken(desaturate(adjustHue(accentColor, 9), 0.52), 0.1),
+ darken(desaturate(adjustHue(accentColor, 9), 0.43), 0.22),
+ darken(desaturate(adjustHue(accentColor, 4), 0.38), 0.16),
+ lighten(adjustHue(accentColor, 5), 0.22),
+ darken(desaturate(adjustHue(accentColor, 9), 0.35), 0.43),
+ ].map(toHex)
+}
diff --git a/packages/anatomy-icons/src/index.ts b/packages/anatomy-icons/src/index.ts
new file mode 100644
index 0000000000..896fa0afb8
--- /dev/null
+++ b/packages/anatomy-icons/src/index.ts
@@ -0,0 +1,4 @@
+export { allComponents, getComponent } from "./components"
+export type { ComponentAnatomyName } from "./components"
+export { createGradient } from "./create-gradient"
+export { createPalette } from "./create-palette"
diff --git a/packages/anatomy-icons/tsconfig.json b/packages/anatomy-icons/tsconfig.json
new file mode 100644
index 0000000000..8f06118339
--- /dev/null
+++ b/packages/anatomy-icons/tsconfig.json
@@ -0,0 +1,8 @@
+{
+ "extends": "../../tsconfig.json",
+ "include": ["src"],
+ "compilerOptions": {
+ "jsx": "react-jsx",
+ "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo"
+ }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 042090811e..78bbd31fcd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,7 +10,7 @@ importers:
dependencies:
'@axe-core/playwright':
specifier: 4.7.3
- version: 4.7.3(playwright-core@1.36.1)
+ version: 4.7.3(playwright-core@1.36.2)
'@babel/generator':
specifier: 7.22.9
version: 7.22.9
@@ -143,6 +143,9 @@ importers:
'@zag-js/anatomy':
specifier: workspace:*
version: link:../../packages/anatomy
+ '@zag-js/anatomy-icons':
+ specifier: workspace:*
+ version: link:../../packages/anatomy-icons
'@zag-js/aria-hidden':
specifier: workspace:*
version: link:../../packages/utilities/aria-hidden
@@ -1238,6 +1241,28 @@ importers:
specifier: 2.2.0
version: 2.2.0
+ packages/anatomy-icons:
+ dependencies:
+ '@svgr/core':
+ specifier: ^8.0.0
+ version: 8.0.0
+ '@svgr/plugin-jsx':
+ specifier: 8.0.1
+ version: 8.0.1(@svgr/core@8.0.0)
+ color2k:
+ specifier: ^2.0.2
+ version: 2.0.2
+ devDependencies:
+ '@types/react':
+ specifier: ^18.2.15
+ version: 18.2.16
+ clean-package:
+ specifier: 2.2.0
+ version: 2.2.0
+ react:
+ specifier: ^18.2.0
+ version: 18.2.0
+
packages/core:
dependencies:
'@zag-js/store':
@@ -2578,6 +2603,9 @@ importers:
'@zag-js/accordion':
specifier: workspace:*
version: link:../packages/machines/accordion
+ '@zag-js/anatomy-icons':
+ specifier: workspace:*
+ version: link:../packages/anatomy-icons
'@zag-js/avatar':
specifier: workspace:*
version: link:../packages/machines/avatar
@@ -2756,19 +2784,18 @@ packages:
dependencies:
'@jridgewell/gen-mapping': 0.3.3
'@jridgewell/trace-mapping': 0.3.18
- dev: true
/@antfu/utils@0.7.5:
resolution: {integrity: sha512-dlR6LdS+0SzOAPx/TPRhnoi7hE251OVeT2Snw0RguNbBSbjUHdWr0l3vcUUDg26rEysT89kCbtw1lVorBXLLCg==}
dev: true
- /@axe-core/playwright@4.7.3(playwright-core@1.36.1):
+ /@axe-core/playwright@4.7.3(playwright-core@1.36.2):
resolution: {integrity: sha512-v2PRgAyGvop7bamrTpNJtc5b1R7giAPnMzZXrS/VDZBCY5+uwVYtCNgDvBsqp5P1QMZxUMoBN+CERJUTMjFN0A==}
peerDependencies:
playwright-core: '>= 1.0.0'
dependencies:
axe-core: 4.7.2
- playwright-core: 1.36.1
+ playwright-core: 1.36.2
dev: false
/@babel/code-frame@7.22.5:
@@ -2785,7 +2812,6 @@ packages:
/@babel/compat-data@7.22.5:
resolution: {integrity: sha512-4Jc/YuIaYqKnDDz892kPIledykKg12Aw1PYX5i/TY28anJtacvM1Rrr8wbieB9GfEJwlzqT0hUEao0CxEebiDA==}
engines: {node: '>=6.9.0'}
- dev: true
/@babel/core@7.21.0:
resolution: {integrity: sha512-PuxUbxcW6ZYe656yL3EAhpy7qXKq0DmYsrJLpbB8XrsCP9Nm+XCg9XFMb5vIDliPD7+U/+M+QJlH17XOcB7eXA==}
@@ -2828,10 +2854,9 @@ packages:
debug: 4.3.4
gensync: 1.0.0-beta.2
json5: 2.2.3
- semver: 6.3.0
+ semver: 6.3.1
transitivePeerDependencies:
- supports-color
- dev: true
/@babel/generator@7.22.9:
resolution: {integrity: sha512-KtLMbmicyuK2Ak/FTCJVbDnkN1SlT8/kceFTiuDiiRUUSMnHMidxSCdG4ndkTOHHpoomWe/4xkvHkEOncwjYIw==}
@@ -2881,8 +2906,7 @@ packages:
'@babel/helper-validator-option': 7.22.5
browserslist: 4.21.5
lru-cache: 5.1.1
- semver: 6.3.0
- dev: true
+ semver: 6.3.1
/@babel/helper-create-class-features-plugin@7.21.0(@babel/core@7.21.0):
resolution: {integrity: sha512-Q8wNiMIdwsv5la5SPxNYzzkPnjgC0Sy0i7jLkVOCdllu/xcVNkr3TeZzbHBJrj+XXRqzX5uCyCoV9eu6xUG7KQ==}
@@ -2903,6 +2927,25 @@ packages:
- supports-color
dev: true
+ /@babel/helper-create-class-features-plugin@7.21.0(@babel/core@7.22.5):
+ resolution: {integrity: sha512-Q8wNiMIdwsv5la5SPxNYzzkPnjgC0Sy0i7jLkVOCdllu/xcVNkr3TeZzbHBJrj+XXRqzX5uCyCoV9eu6xUG7KQ==}
+ engines: {node: '>=6.9.0'}
+ peerDependencies:
+ '@babel/core': ^7.0.0
+ dependencies:
+ '@babel/core': 7.22.5
+ '@babel/helper-annotate-as-pure': 7.18.6
+ '@babel/helper-environment-visitor': 7.22.5
+ '@babel/helper-function-name': 7.22.5
+ '@babel/helper-member-expression-to-functions': 7.21.0
+ '@babel/helper-optimise-call-expression': 7.18.6
+ '@babel/helper-replace-supers': 7.20.7
+ '@babel/helper-skip-transparent-expression-wrappers': 7.20.0
+ '@babel/helper-split-export-declaration': 7.22.6
+ transitivePeerDependencies:
+ - supports-color
+ dev: true
+
/@babel/helper-create-class-features-plugin@7.22.6(@babel/core@7.22.5):
resolution: {integrity: sha512-iwdzgtSiBxF6ni6mzVnZCF3xt5qE6cEA0J7nFt8QOAWZ0zjCFceEgpn3vtb2V7WFR6QzP2jmIFOHMTRo7eNJjQ==}
engines: {node: '>=6.9.0'}
@@ -2997,7 +3040,6 @@ packages:
'@babel/types': 7.22.5
transitivePeerDependencies:
- supports-color
- dev: true
/@babel/helper-optimise-call-expression@7.18.6:
resolution: {integrity: sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==}
@@ -3063,7 +3105,6 @@ packages:
engines: {node: '>=6.9.0'}
dependencies:
'@babel/types': 7.22.5
- dev: true
/@babel/helper-skip-transparent-expression-wrappers@7.20.0:
resolution: {integrity: sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==}
@@ -3101,7 +3142,6 @@ packages:
/@babel/helper-validator-option@7.22.5:
resolution: {integrity: sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==}
engines: {node: '>=6.9.0'}
- dev: true
/@babel/helpers@7.21.0:
resolution: {integrity: sha512-XXve0CBtOW0pd7MRzzmoyuSj0e3SEzj8pgyFxnTT1NJZL38BD1MK7yYrm8yefRPIDvNNe14xR4FdbHwpInD4rA==}
@@ -3123,7 +3163,6 @@ packages:
'@babel/types': 7.22.5
transitivePeerDependencies:
- supports-color
- dev: true
/@babel/highlight@7.22.5:
resolution: {integrity: sha512-BSKlD1hgnedS5XRnGOljZawtag7H1yPfQp0tdNJCHoH6AZ+Pcm9VvkrK59/Yy593Ypg0zMxH2BxD1VPYUQ7UIw==}
@@ -3179,6 +3218,16 @@ packages:
'@babel/helper-plugin-utils': 7.20.2
dev: true
+ /@babel/plugin-syntax-typescript@7.20.0(@babel/core@7.22.5):
+ resolution: {integrity: sha512-rd9TkG+u1CExzS4SM1BlMEhMXwFLKVjOAFFCDx9PbX5ycJWDoWMcwdJH9RhkPu1dOgn5TrxLot/Gx6lWFuAUNQ==}
+ engines: {node: '>=6.9.0'}
+ peerDependencies:
+ '@babel/core': ^7.0.0-0
+ dependencies:
+ '@babel/core': 7.22.5
+ '@babel/helper-plugin-utils': 7.20.2
+ dev: true
+
/@babel/plugin-syntax-typescript@7.22.5(@babel/core@7.22.5):
resolution: {integrity: sha512-1mS2o03i7t1c6VzH6fdQ3OA8tcEIxwG18zIPRp+UY1Ihv6W+XZzBCVxExF9upussPXJ0xE9XRHwMoNs1ep/nRQ==}
engines: {node: '>=6.9.0'}
@@ -3223,6 +3272,20 @@ packages:
- supports-color
dev: true
+ /@babel/plugin-transform-typescript@7.21.0(@babel/core@7.22.5):
+ resolution: {integrity: sha512-xo///XTPp3mDzTtrqXoBlK9eiAYW3wv9JXglcn/u1bi60RW11dEUxIgA8cbnDhutS1zacjMRmAwxE0gMklLnZg==}
+ engines: {node: '>=6.9.0'}
+ peerDependencies:
+ '@babel/core': ^7.0.0-0
+ dependencies:
+ '@babel/core': 7.22.5
+ '@babel/helper-create-class-features-plugin': 7.21.0(@babel/core@7.22.5)
+ '@babel/helper-plugin-utils': 7.20.2
+ '@babel/plugin-syntax-typescript': 7.20.0(@babel/core@7.22.5)
+ transitivePeerDependencies:
+ - supports-color
+ dev: true
+
/@babel/plugin-transform-typescript@7.22.5(@babel/core@7.22.5):
resolution: {integrity: sha512-SMubA9S7Cb5sGSFFUlqxyClTA9zWJ8qGQrppNUm05LtFuN1ELRFNndkix4zUJrC9F+YivWwa1dHMSyo0e0N9dA==}
engines: {node: '>=6.9.0'}
@@ -3966,7 +4029,7 @@ packages:
'@contentlayer/core': 0.3.4(esbuild@0.18.11)
'@contentlayer/utils': 0.3.4
chokidar: 3.5.3
- fast-glob: 3.2.12
+ fast-glob: 3.3.0
gray-matter: 4.0.3
imagescript: 1.2.16
micromatch: 4.0.5
@@ -5286,8 +5349,8 @@ packages:
nuxt: ^3.6.1
vite: '*'
dependencies:
- '@nuxt/kit': 3.6.2
- '@nuxt/schema': 3.6.2
+ '@nuxt/kit': 3.6.5
+ '@nuxt/schema': 3.6.5
execa: 7.1.1
nuxt: 3.6.5(@types/node@20.4.4)(eslint@8.45.0)(typescript@5.1.6)
vite: 4.4.7(@types/node@20.4.4)
@@ -5322,7 +5385,7 @@ packages:
dependencies:
'@nuxt/devtools-kit': 0.6.7(nuxt@3.6.5)(vite@4.4.7)
'@nuxt/devtools-wizard': 0.6.7
- '@nuxt/kit': 3.6.2
+ '@nuxt/kit': 3.6.5
birpc: 0.2.12
boxen: 7.1.1
consola: 3.2.3
@@ -5364,32 +5427,6 @@ packages:
- utf-8-validate
dev: true
- /@nuxt/kit@3.6.2:
- resolution: {integrity: sha512-X1WN76izsILva6TvQVTfJCHG7TXCwsB6jsxZKcU3qSog26jer5dildDb5ZmKL3e+IFD6BwK4ShO/py8VZcT6OA==}
- engines: {node: ^14.18.0 || >=16.10.0}
- dependencies:
- '@nuxt/schema': 3.6.2
- c12: 1.4.2
- consola: 3.2.3
- defu: 6.1.2
- globby: 13.2.2
- hash-sum: 2.0.0
- ignore: 5.2.4
- jiti: 1.19.1
- knitwork: 1.0.0
- mlly: 1.4.0
- pathe: 1.1.1
- pkg-types: 1.0.3
- scule: 1.0.0
- semver: 7.5.4
- unctx: 2.3.1
- unimport: 3.1.0(rollup@3.26.2)
- untyped: 1.3.2
- transitivePeerDependencies:
- - rollup
- - supports-color
- dev: true
-
/@nuxt/kit@3.6.5:
resolution: {integrity: sha512-uBI5I2Zx6sk+vRHU+nBmifwxg/nyXCGZ1g5hUKrUfgv1ZfiKB8JkN5T9iRoduDOaqbwM6XSnEl1ja73iloDcrw==}
engines: {node: ^14.18.0 || >=16.10.0}
@@ -5416,24 +5453,6 @@ packages:
- supports-color
dev: true
- /@nuxt/schema@3.6.2:
- resolution: {integrity: sha512-wxb1/C5ozly5IwX0IRjVGml1n2KjZrTKsf6lTk3fdjUpW105kAvYX4j66PDOdBRE4vCwCsgaHJfWpUSeNBxbuA==}
- engines: {node: ^14.18.0 || >=16.10.0}
- dependencies:
- defu: 6.1.2
- hookable: 5.5.3
- pathe: 1.1.1
- pkg-types: 1.0.3
- postcss-import-resolver: 2.0.0
- std-env: 3.3.3
- ufo: 1.1.2
- unimport: 3.1.0(rollup@3.26.2)
- untyped: 1.3.2
- transitivePeerDependencies:
- - rollup
- - supports-color
- dev: true
-
/@nuxt/schema@3.6.5:
resolution: {integrity: sha512-UPUnMB0W5TZ/Pi1fiF71EqIsPlj8LGZqzhSf8wOeh538KHwxbA9r7cuvEUU92eXRksOZaylbea3fJxZWhOITVw==}
engines: {node: ^14.18.0 || >=16.10.0}
@@ -6222,6 +6241,131 @@ packages:
solid-js: 1.7.8
dev: false
+ /@svgr/babel-plugin-add-jsx-attribute@8.0.0(@babel/core@7.22.5):
+ resolution: {integrity: sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==}
+ engines: {node: '>=14'}
+ peerDependencies:
+ '@babel/core': ^7.0.0-0
+ dependencies:
+ '@babel/core': 7.22.5
+ dev: false
+
+ /@svgr/babel-plugin-remove-jsx-attribute@8.0.0(@babel/core@7.22.5):
+ resolution: {integrity: sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==}
+ engines: {node: '>=14'}
+ peerDependencies:
+ '@babel/core': ^7.0.0-0
+ dependencies:
+ '@babel/core': 7.22.5
+ dev: false
+
+ /@svgr/babel-plugin-remove-jsx-empty-expression@8.0.0(@babel/core@7.22.5):
+ resolution: {integrity: sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==}
+ engines: {node: '>=14'}
+ peerDependencies:
+ '@babel/core': ^7.0.0-0
+ dependencies:
+ '@babel/core': 7.22.5
+ dev: false
+
+ /@svgr/babel-plugin-replace-jsx-attribute-value@8.0.0(@babel/core@7.22.5):
+ resolution: {integrity: sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==}
+ engines: {node: '>=14'}
+ peerDependencies:
+ '@babel/core': ^7.0.0-0
+ dependencies:
+ '@babel/core': 7.22.5
+ dev: false
+
+ /@svgr/babel-plugin-svg-dynamic-title@8.0.0(@babel/core@7.22.5):
+ resolution: {integrity: sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==}
+ engines: {node: '>=14'}
+ peerDependencies:
+ '@babel/core': ^7.0.0-0
+ dependencies:
+ '@babel/core': 7.22.5
+ dev: false
+
+ /@svgr/babel-plugin-svg-em-dimensions@8.0.0(@babel/core@7.22.5):
+ resolution: {integrity: sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==}
+ engines: {node: '>=14'}
+ peerDependencies:
+ '@babel/core': ^7.0.0-0
+ dependencies:
+ '@babel/core': 7.22.5
+ dev: false
+
+ /@svgr/babel-plugin-transform-react-native-svg@8.0.0(@babel/core@7.22.5):
+ resolution: {integrity: sha512-UKrY3860AQICgH7g+6h2zkoxeVEPLYwX/uAjmqo4PIq2FIHppwhIqZstIyTz0ZtlwreKR41O3W3BzsBBiJV2Aw==}
+ engines: {node: '>=14'}
+ peerDependencies:
+ '@babel/core': ^7.0.0-0
+ dependencies:
+ '@babel/core': 7.22.5
+ dev: false
+
+ /@svgr/babel-plugin-transform-svg-component@8.0.0(@babel/core@7.22.5):
+ resolution: {integrity: sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==}
+ engines: {node: '>=12'}
+ peerDependencies:
+ '@babel/core': ^7.0.0-0
+ dependencies:
+ '@babel/core': 7.22.5
+ dev: false
+
+ /@svgr/babel-preset@8.0.0(@babel/core@7.22.5):
+ resolution: {integrity: sha512-KLcjiZychInVrhs86OvcYPLTFu9L5XV2vj0XAaE1HwE3J3jLmIzRY8ttdeAg/iFyp8nhavJpafpDZTt+1LIpkQ==}
+ engines: {node: '>=14'}
+ peerDependencies:
+ '@babel/core': ^7.0.0-0
+ dependencies:
+ '@babel/core': 7.22.5
+ '@svgr/babel-plugin-add-jsx-attribute': 8.0.0(@babel/core@7.22.5)
+ '@svgr/babel-plugin-remove-jsx-attribute': 8.0.0(@babel/core@7.22.5)
+ '@svgr/babel-plugin-remove-jsx-empty-expression': 8.0.0(@babel/core@7.22.5)
+ '@svgr/babel-plugin-replace-jsx-attribute-value': 8.0.0(@babel/core@7.22.5)
+ '@svgr/babel-plugin-svg-dynamic-title': 8.0.0(@babel/core@7.22.5)
+ '@svgr/babel-plugin-svg-em-dimensions': 8.0.0(@babel/core@7.22.5)
+ '@svgr/babel-plugin-transform-react-native-svg': 8.0.0(@babel/core@7.22.5)
+ '@svgr/babel-plugin-transform-svg-component': 8.0.0(@babel/core@7.22.5)
+ dev: false
+
+ /@svgr/core@8.0.0:
+ resolution: {integrity: sha512-aJKtc+Pie/rFYsVH/unSkDaZGvEeylNv/s2cP+ta9/rYWxRVvoV/S4Qw65Kmrtah4CBK5PM6ISH9qUH7IJQCng==}
+ engines: {node: '>=14'}
+ dependencies:
+ '@babel/core': 7.22.5
+ '@svgr/babel-preset': 8.0.0(@babel/core@7.22.5)
+ camelcase: 6.3.0
+ cosmiconfig: 8.2.0
+ snake-case: 3.0.4
+ transitivePeerDependencies:
+ - supports-color
+ dev: false
+
+ /@svgr/hast-util-to-babel-ast@8.0.0:
+ resolution: {integrity: sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==}
+ engines: {node: '>=14'}
+ dependencies:
+ '@babel/types': 7.22.5
+ entities: 4.5.0
+ dev: false
+
+ /@svgr/plugin-jsx@8.0.1(@svgr/core@8.0.0):
+ resolution: {integrity: sha512-bfCFb+4ZsM3UuKP2t7KmDwn6YV8qVn9HIQJmau6xeQb/iV65Rpi7NBNBWA2hcCd4GKoCqG8hpaaDk5FDR0eH+g==}
+ engines: {node: '>=14'}
+ peerDependencies:
+ '@svgr/core': '*'
+ dependencies:
+ '@babel/core': 7.22.5
+ '@svgr/babel-preset': 8.0.0(@babel/core@7.22.5)
+ '@svgr/core': 8.0.0
+ '@svgr/hast-util-to-babel-ast': 8.0.0
+ svg-parser: 2.0.4
+ transitivePeerDependencies:
+ - supports-color
+ dev: false
+
/@swc/core-darwin-arm64@1.3.71:
resolution: {integrity: sha512-xOm0hDbcO2ShwQu1CjLtq3fwrG9AvhuE0s8vtBc8AsamYExHmR8bo6GQHJUtfPG1FVPk5a8xoQSd1fs09FQjLg==}
engines: {node: '>=10'}
@@ -6614,7 +6758,7 @@ packages:
graphemer: 1.4.0
ignore: 5.2.4
natural-compare-lite: 1.4.0
- semver: 7.5.3
+ semver: 7.5.4
tsutils: 3.21.0(typescript@5.1.6)
typescript: 5.1.6
transitivePeerDependencies:
@@ -6932,9 +7076,9 @@ packages:
vite: ^4.0.0
vue: ^3.0.0
dependencies:
- '@babel/core': 7.21.0
- '@babel/plugin-transform-typescript': 7.21.0(@babel/core@7.21.0)
- '@vue/babel-plugin-jsx': 1.1.1(@babel/core@7.21.0)
+ '@babel/core': 7.22.5
+ '@babel/plugin-transform-typescript': 7.21.0(@babel/core@7.22.5)
+ '@vue/babel-plugin-jsx': 1.1.1(@babel/core@7.22.5)
vite: 4.3.9(@types/node@20.4.4)
vue: 3.3.4
transitivePeerDependencies:
@@ -7827,7 +7971,6 @@ packages:
electron-to-chromium: 1.4.314
node-releases: 2.0.10
update-browserslist-db: 1.0.10(browserslist@4.21.5)
- dev: true
/buffer-alloc-unsafe@1.1.0:
resolution: {integrity: sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==}
@@ -7970,7 +8113,6 @@ packages:
/camelcase@6.3.0:
resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
engines: {node: '>=10'}
- dev: true
/camelcase@7.0.1:
resolution: {integrity: sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==}
@@ -9063,7 +9205,6 @@ packages:
/electron-to-chromium@1.4.314:
resolution: {integrity: sha512-+3RmNVx9hZLlc0gW//4yep0K5SYKmIvB5DXg1Yg6varsuAHlHwTeqeygfS8DWwLCsNOWrgj+p9qgM5WYjw1lXQ==}
- dev: true
/emoji-regex@8.0.0:
resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
@@ -9117,7 +9258,6 @@ packages:
/entities@4.5.0:
resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
engines: {node: '>=0.12'}
- dev: true
/env-paths@2.2.1:
resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
@@ -10221,7 +10361,6 @@ packages:
/gensync@1.0.0-beta.2:
resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
engines: {node: '>=6.9.0'}
- dev: true
/get-caller-file@2.0.5:
resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
@@ -11985,7 +12124,6 @@ packages:
resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
dependencies:
yallist: 3.1.1
- dev: true
/lru-cache@6.0.0:
resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
@@ -12043,7 +12181,7 @@ packages:
resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
engines: {node: '>=8'}
dependencies:
- semver: 6.3.0
+ semver: 6.3.1
dev: true
/make-error@1.3.6:
@@ -13262,7 +13400,6 @@ packages:
/node-releases@2.0.10:
resolution: {integrity: sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==}
- dev: true
/nopt@5.0.0:
resolution: {integrity: sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==}
@@ -14086,12 +14223,6 @@ packages:
mlly: 1.4.0
pathe: 1.1.1
- /playwright-core@1.36.1:
- resolution: {integrity: sha512-7+tmPuMcEW4xeCL9cp9KxmYpQYHKkyjwoXRnoeTowaeNat8PoBMk/HwCYhqkH2fRkshfKEOiVus/IhID2Pg8kg==}
- engines: {node: '>=16'}
- hasBin: true
- dev: false
-
/playwright-core@1.36.2:
resolution: {integrity: sha512-sQYZt31dwkqxOrP7xy2ggDfEzUxM1lodjhsQ3NMMv5uGTRDsLxU0e4xf4wwMkF2gplIxf17QMBCodSFgm6bFVQ==}
engines: {node: '>=16'}
@@ -15230,7 +15361,6 @@ packages:
/semver@6.3.1:
resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
hasBin: true
- dev: true
/semver@7.3.8:
resolution: {integrity: sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==}
@@ -15827,6 +15957,10 @@ packages:
resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
engines: {node: '>= 0.4'}
+ /svg-parser@2.0.4:
+ resolution: {integrity: sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==}
+ dev: false
+
/svg-tags@1.0.0:
resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
dev: true
@@ -16604,7 +16738,6 @@ packages:
browserslist: 4.21.5
escalade: 3.1.1
picocolors: 1.0.0
- dev: true
/upper-case-first@2.0.2:
resolution: {integrity: sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==}
@@ -17074,7 +17207,7 @@ packages:
espree: 9.6.0
esquery: 1.5.0
lodash: 4.17.21
- semver: 7.5.3
+ semver: 7.5.4
transitivePeerDependencies:
- supports-color
dev: true
@@ -17351,7 +17484,6 @@ packages:
/yallist@3.1.1:
resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
- dev: true
/yallist@4.0.0:
resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
diff --git a/shared/src/style.css b/shared/src/style.css
index 1041316ac7..7923b4ab82 100644
--- a/shared/src/style.css
+++ b/shared/src/style.css
@@ -117,6 +117,38 @@ a[aria-current="page"] {
max-width: 40ch;
}
+/* -----------------------------------------------------------------------------
+* Anatomy
+* -----------------------------------------------------------------------------*/
+
+.anatomy {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ overflow: auto;
+ max-height: 100%;
+}
+
+.anatomy .anatomy__item {
+ display: flex;
+ overflow: auto;
+ width: 100%;
+ position: relative;
+}
+
+.anatomy span {
+ position: absolute;
+ top: 2;
+ left: 2;
+ font-weight: 500;
+}
+
+.anatomy svg {
+ width: calc(100vw / 3);
+ height: fit-content;
+}
+
/* -----------------------------------------------------------------------------
* Avatar
* -----------------------------------------------------------------------------*/
diff --git a/website/components/mdx-components.tsx b/website/components/mdx-components.tsx
index 3cda2cd204..a58941fd90 100644
--- a/website/components/mdx-components.tsx
+++ b/website/components/mdx-components.tsx
@@ -7,7 +7,6 @@ import * as tabs from "@zag-js/tabs"
import { type MDX } from "contentlayer/core"
import { allComponents, allSnippets } from "@/contentlayer"
import { useMDXComponent } from "next-contentlayer/hooks"
-import NextImage from "next/image"
import Link from "next/link"
import { type FC } from "react"
import { HiOutlineCode } from "react-icons/hi"
@@ -18,6 +17,7 @@ import { ApiTable } from "./api-table"
import { CopyButton } from "./copy-button"
import { useFramework } from "./framework"
import { Showcase } from "./showcase"
+import { allComponents as Anatomies } from "@zag-js/anatomy-icons"
function SnippetItem({ body, id }: { body: MDX; id: string }) {
const content = useMDX(body.code)
@@ -220,10 +220,10 @@ const components: Record> = {
)
},
Anatomy: ({ id }: { id: string }) => {
- const src = `/illustrations/${id}.svg`
+ const Anatomy = chakra(Anatomies[id])
return (
-
+
)
},
diff --git a/website/data/components/pagination.mdx b/website/data/components/pagination.mdx
index 5d9279749a..4aa6181571 100644
--- a/website/data/components/pagination.mdx
+++ b/website/data/components/pagination.mdx
@@ -35,6 +35,8 @@ how we name its parts.
> Each part includes a `data-part` attribute to help identify them in the DOM.
+
+
On a high level, the pagination consists of:
- **Root**: The root container for the pagination
@@ -62,7 +64,6 @@ The pagination package exports two key functions:
-
```jsx
const api = connect(state, send)
@@ -154,4 +155,4 @@ added to them to select and style them in the DOM.
The pagination's `api` exposes the following methods and properties:
-
\ No newline at end of file
+
diff --git a/website/package.json b/website/package.json
index 8d23656819..5971c35bb6 100644
--- a/website/package.json
+++ b/website/package.json
@@ -25,6 +25,7 @@
"@emotion/react": "11.11.1",
"@emotion/styled": "11.11.0",
"@zag-js/avatar": "workspace:*",
+ "@zag-js/anatomy-icons": "workspace:*",
"@zag-js/accordion": "workspace:*",
"@zag-js/checkbox": "workspace:*",
"@zag-js/combobox": "workspace:*",
@@ -80,4 +81,4 @@
"remark-gfm": "3.0.1",
"typescript": "5.1.6"
}
-}
+}
\ No newline at end of file
diff --git a/website/public/illustrations/accordion.svg b/website/public/illustrations/accordion.svg
deleted file mode 100644
index 2770820dca..0000000000
--- a/website/public/illustrations/accordion.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-
diff --git a/website/public/illustrations/avatar.svg b/website/public/illustrations/avatar.svg
deleted file mode 100644
index c07327a4af..0000000000
--- a/website/public/illustrations/avatar.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-
diff --git a/website/public/illustrations/checkbox.svg b/website/public/illustrations/checkbox.svg
deleted file mode 100644
index be77fb83ed..0000000000
--- a/website/public/illustrations/checkbox.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-
diff --git a/website/public/illustrations/combobox.svg b/website/public/illustrations/combobox.svg
deleted file mode 100644
index 212b15933b..0000000000
--- a/website/public/illustrations/combobox.svg
+++ /dev/null
@@ -1,24 +0,0 @@
-
diff --git a/website/public/illustrations/dialog.svg b/website/public/illustrations/dialog.svg
deleted file mode 100644
index bfc636028c..0000000000
--- a/website/public/illustrations/dialog.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-
diff --git a/website/public/illustrations/editable.svg b/website/public/illustrations/editable.svg
deleted file mode 100644
index 9bb472e9a2..0000000000
--- a/website/public/illustrations/editable.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-
diff --git a/website/public/illustrations/hover-card.svg b/website/public/illustrations/hover-card.svg
deleted file mode 100644
index ed840c4acb..0000000000
--- a/website/public/illustrations/hover-card.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-
diff --git a/website/public/illustrations/menu.svg b/website/public/illustrations/menu.svg
deleted file mode 100644
index 23c69e8004..0000000000
--- a/website/public/illustrations/menu.svg
+++ /dev/null
@@ -1,29 +0,0 @@
-
diff --git a/website/public/illustrations/number-input.svg b/website/public/illustrations/number-input.svg
deleted file mode 100644
index 8a6e544399..0000000000
--- a/website/public/illustrations/number-input.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-
diff --git a/website/public/illustrations/pagination.svg b/website/public/illustrations/pagination.svg
deleted file mode 100644
index d709b6829f..0000000000
--- a/website/public/illustrations/pagination.svg
+++ /dev/null
@@ -1,39 +0,0 @@
-
diff --git a/website/public/illustrations/pin-input.svg b/website/public/illustrations/pin-input.svg
deleted file mode 100644
index b9759de23b..0000000000
--- a/website/public/illustrations/pin-input.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-
diff --git a/website/public/illustrations/popover.svg b/website/public/illustrations/popover.svg
deleted file mode 100644
index 29b5aa395a..0000000000
--- a/website/public/illustrations/popover.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-
diff --git a/website/public/illustrations/rating.svg b/website/public/illustrations/rating.svg
deleted file mode 100644
index d6eecfbabf..0000000000
--- a/website/public/illustrations/rating.svg
+++ /dev/null
@@ -1,29 +0,0 @@
-
diff --git a/website/public/illustrations/segmented-control.svg b/website/public/illustrations/segmented-control.svg
deleted file mode 100644
index 1175789fbc..0000000000
--- a/website/public/illustrations/segmented-control.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-
diff --git a/website/public/illustrations/select.svg b/website/public/illustrations/select.svg
deleted file mode 100644
index eb93ddd460..0000000000
--- a/website/public/illustrations/select.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-
diff --git a/website/public/illustrations/slider.svg b/website/public/illustrations/slider.svg
deleted file mode 100644
index 3c5b106fc1..0000000000
--- a/website/public/illustrations/slider.svg
+++ /dev/null
@@ -1,37 +0,0 @@
-
diff --git a/website/public/illustrations/switch.svg b/website/public/illustrations/switch.svg
deleted file mode 100644
index d115308b10..0000000000
--- a/website/public/illustrations/switch.svg
+++ /dev/null
@@ -1,28 +0,0 @@
-
diff --git a/website/public/illustrations/tabs.svg b/website/public/illustrations/tabs.svg
deleted file mode 100644
index a9bdbc7347..0000000000
--- a/website/public/illustrations/tabs.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-
diff --git a/website/public/illustrations/tags-input.svg b/website/public/illustrations/tags-input.svg
deleted file mode 100644
index 2792ec866f..0000000000
--- a/website/public/illustrations/tags-input.svg
+++ /dev/null
@@ -1,28 +0,0 @@
-
diff --git a/website/public/illustrations/toast.svg b/website/public/illustrations/toast.svg
deleted file mode 100644
index 8733661875..0000000000
--- a/website/public/illustrations/toast.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-
diff --git a/website/public/illustrations/tooltip.svg b/website/public/illustrations/tooltip.svg
deleted file mode 100644
index f6b563e957..0000000000
--- a/website/public/illustrations/tooltip.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-