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 @@ - - - - - - - - - - - - - -