feat(website): use ark ui design system for docs

.vscode/settings.json

@@ -3,13 +3,5 @@
     "**/templates": true
   },
   "typescript.tsdk": "node_modules/typescript/lib",
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "material-icon-theme.files.associations": {
-    "**.recipe.ts": "panda",
-    "**.stories.vue": "storybook"
-  },
-  "material-icon-theme.folders.associations": {
-    "react": "React-components",
-    "solid": "Core"
-  }
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
 }

bun.lock

@@ -19,6 +19,9 @@
         "vercel": "41.6.1",
       },
     },
+    "design-system": {
+      "name": "@ark-ui/design-system",
+    },
     "packages/react": {
       "name": "@ark-ui/react",
       "version": "5.6.0",
@@ -82,6 +85,7 @@
         "@zag-js/utils": "1.11.0",
       },
       "devDependencies": {
+        "@ark-ui/design-system": "workspace:*",
         "@biomejs/biome": "1.9.4",
         "@storybook/addon-a11y": "8.6.12",
         "@storybook/addon-essentials": "8.6.12",
@@ -409,6 +413,7 @@
         "@uidotdev/usehooks": "2.4.1",
         "@zag-js/anatomy-icons": "1.11.0",
         "@zag-js/docs": "1.11.0",
+        "change-case": "5.4.4",
         "effect": "3.14.11",
         "lucide-react": "0.501.0",
         "match-sorter": "8.0.0",
@@ -429,10 +434,14 @@
   },
   "trustedDependencies": [
     "@ark-ui/website",
+    "@ark-ui/design-system",
   ],
   "patchedDependencies": {
     "happy-dom@17.4.4": "patches/happy-dom@17.4.4.patch",
   },
+  "overrides": {
+    "flexsearch": "0.8.158",
+  },
   "packages": {
     "@adobe/css-tools": ["@adobe/css-tools@4.4.2", "", {}, "sha512-baYZExFpsdkBNuvGKTKWCwKH57HRZLVtycZS05WTQNVOiXVSeAki3nU35zlRbToeMW8aHlJfyS+1C4BOv27q0A=="],
 
@@ -444,6 +453,8 @@
 
     "@ark-ui/anatomy": ["@ark-ui/anatomy@3.5.0", "", { "dependencies": { "@zag-js/accordion": "0.62.1", "@zag-js/anatomy": "0.62.1", "@zag-js/avatar": "0.62.1", "@zag-js/carousel": "0.62.1", "@zag-js/checkbox": "0.62.1", "@zag-js/clipboard": "0.62.1", "@zag-js/collapsible": "0.62.1", "@zag-js/color-picker": "0.62.1", "@zag-js/color-utils": "0.62.1", "@zag-js/combobox": "0.62.1", "@zag-js/date-picker": "0.62.1", "@zag-js/date-utils": "0.62.1", "@zag-js/dialog": "0.62.1", "@zag-js/editable": "0.62.1", "@zag-js/file-upload": "0.62.1", "@zag-js/hover-card": "0.62.1", "@zag-js/menu": "0.62.1", "@zag-js/number-input": "0.62.1", "@zag-js/pagination": "0.62.1", "@zag-js/pin-input": "0.62.1", "@zag-js/popover": "0.62.1", "@zag-js/presence": "0.62.1", "@zag-js/progress": "0.62.1", "@zag-js/qr-code": "0.62.1", "@zag-js/radio-group": "0.62.1", "@zag-js/rating-group": "0.62.1", "@zag-js/select": "0.62.1", "@zag-js/signature-pad": "0.62.1", "@zag-js/slider": "0.62.1", "@zag-js/splitter": "0.62.1", "@zag-js/switch": "0.62.1", "@zag-js/tabs": "0.62.1", "@zag-js/tags-input": "0.62.1", "@zag-js/time-picker": "0.62.1", "@zag-js/toast": "0.62.1", "@zag-js/toggle-group": "0.62.1", "@zag-js/tooltip": "0.62.1", "@zag-js/tree-view": "0.62.1" } }, "sha512-KoROLVVT23BvFHcye/GYhG8NJ2CH0C+CaoJhXrkEjvk8pbEx80Xk5NIUy5gL7xmX+LDD7kY5t3NotBqCu+2L2w=="],
 
+    "@ark-ui/design-system": ["@ark-ui/design-system@workspace:design-system"],
+
     "@ark-ui/next-js": ["@ark-ui/next-js@workspace:templates/next-js"],
 
     "@ark-ui/nuxt": ["@ark-ui/nuxt@workspace:templates/nuxt"],
@@ -1810,7 +1821,7 @@
 
     "chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
 
-    "change-case": ["change-case@4.1.2", "", { "dependencies": { "camel-case": "^4.1.2", "capital-case": "^1.0.4", "constant-case": "^3.0.4", "dot-case": "^3.0.4", "header-case": "^2.0.4", "no-case": "^3.0.4", "param-case": "^3.0.4", "pascal-case": "^3.1.2", "path-case": "^3.0.4", "sentence-case": "^3.0.4", "snake-case": "^3.0.4", "tslib": "^2.0.3" } }, "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A=="],
+    "change-case": ["change-case@5.4.4", "", {}, "sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w=="],
 
     "character-entities": ["character-entities@2.0.2", "", {}, "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ=="],
 
@@ -2296,7 +2307,7 @@
 
     "flatted": ["flatted@3.3.3", "", {}, "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg=="],
 
-    "flexsearch": ["flexsearch@0.7.21", "", {}, "sha512-W7cHV7Hrwjid6lWmy0IhsWDFQboWSng25U3VVywpHOTJnnAZNPScog67G+cVpeX9f7yDD21ih0WDrMMT+JoaYg=="],
+    "flexsearch": ["flexsearch@0.8.158", "", {}, "sha512-UBOzX2rxIrhAeSSCesTI0qB2Q+75n66rofJx5ppZm5tjXV2P6BxOS3VHKsoSdJhIPg9IMzQl3qkVeSFyq3BUdw=="],
 
     "fn.name": ["fn.name@1.1.0", "", {}, "sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw=="],
 
@@ -4070,6 +4081,8 @@
 
     "@eslint/eslintrc/minimatch": ["minimatch@3.1.2", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw=="],
 
+    "@histoire/plugin-vue/change-case": ["change-case@4.1.2", "", { "dependencies": { "camel-case": "^4.1.2", "capital-case": "^1.0.4", "constant-case": "^3.0.4", "dot-case": "^3.0.4", "header-case": "^2.0.4", "no-case": "^3.0.4", "param-case": "^3.0.4", "pascal-case": "^3.1.2", "path-case": "^3.0.4", "sentence-case": "^3.0.4", "snake-case": "^3.0.4", "tslib": "^2.0.3" } }, "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A=="],
+
     "@histoire/plugin-vue/globby": ["globby@13.2.2", "", { "dependencies": { "dir-glob": "^3.0.1", "fast-glob": "^3.3.0", "ignore": "^5.2.4", "merge2": "^1.4.1", "slash": "^4.0.0" } }, "sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w=="],
 
     "@histoire/plugin-vue/pathe": ["pathe@1.1.2", "", {}, "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ=="],
@@ -4476,6 +4489,8 @@
 
     "h3/cookie-es": ["cookie-es@1.2.2", "", {}, "sha512-+W7VmiVINB+ywl1HGXJXmrqkOhpKrIiVZV6tQuV54ZyQC7MMuBt81Vc336GMLoHBq5hV/F9eXgt5Mnx0Rha5Fg=="],
 
+    "histoire/change-case": ["change-case@4.1.2", "", { "dependencies": { "camel-case": "^4.1.2", "capital-case": "^1.0.4", "constant-case": "^3.0.4", "dot-case": "^3.0.4", "header-case": "^2.0.4", "no-case": "^3.0.4", "param-case": "^3.0.4", "pascal-case": "^3.1.2", "path-case": "^3.0.4", "sentence-case": "^3.0.4", "snake-case": "^3.0.4", "tslib": "^2.0.3" } }, "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A=="],
+
     "histoire/chokidar": ["chokidar@3.6.0", "", { "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", "normalize-path": "~3.0.0", "readdirp": "~3.6.0" }, "optionalDependencies": { "fsevents": "~2.3.2" } }, "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw=="],
 
     "histoire/fs-extra": ["fs-extra@10.1.0", "", { "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", "universalify": "^2.0.0" } }, "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ=="],

design-system/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@ark-ui/design-system",
+  "private": true,
+  "scripts": {
+    "prepare": "panda codegen --clean"
+  },
+  "exports": {
+    "./css": {
+      "types": "./dist/css/index.d.ts",
+      "require": "./dist/css/index.mjs",
+      "import": "./dist/css/index.mjs"
+    },
+    "./tokens": {
+      "types": "./dist/tokens/index.d.ts",
+      "require": "./dist/tokens/index.mjs",
+      "import": "./dist/tokens/index.mjs"
+    },
+    "./types": {
+      "types": "./dist/types/index.d.ts",
+      "require": "./dist/types/index.mjs",
+      "import": "./dist/types/index.mjs"
+    },
+    "./patterns": {
+      "types": "./dist/patterns/index.d.ts",
+      "require": "./dist/patterns/index.mjs",
+      "import": "./dist/patterns/index.mjs"
+    },
+    "./recipes": {
+      "types": "./dist/recipes/index.d.ts",
+      "require": "./dist/recipes/index.mjs",
+      "import": "./dist/recipes/index.mjs"
+    },
+    "./jsx": {
+      "types": "./dist/jsx/index.d.ts",
+      "require": "./dist/jsx/index.mjs",
+      "import": "./dist/jsx/index.mjs"
+    },
+    "./*": "./src/components/ui/*.ts",
+    ".": "./src/index.ts",
+    "./package.json": "./package.json"
+  }
+}

design-system/panda.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from '@pandacss/dev'
+import preset from './src'
+
+export default defineConfig({
+  presets: ['@pandacss/preset-panda', preset],
+  preflight: true,
+  include: ['./src/**/*.{js,jsx,ts,tsx}'],
+  exclude: [],
+  outdir: 'dist',
+  jsxFramework: 'react',
+})

design-system/src/components/ui/avatar.ts

@@ -0,0 +1,2 @@
+export { useAvatar } from '@ark-ui/react/avatar'
+export * as Avatar from './styled/avatar'

design-system/src/components/ui/styled/avatar.tsx

@@ -0,0 +1,33 @@
+'use client'
+import { type AvatarVariantProps, avatar } from '@ark-ui/design-system/recipes'
+import type { ComponentProps, HTMLStyledProps } from '@ark-ui/design-system/types'
+import type { Assign } from '@ark-ui/react'
+import { Avatar } from '@ark-ui/react/avatar'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(avatar)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  HTMLDivElement,
+  Assign<Assign<HTMLStyledProps<'div'>, Avatar.RootProviderBaseProps>, AvatarVariantProps>
+>(Avatar.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  HTMLDivElement,
+  Assign<Assign<HTMLStyledProps<'div'>, Avatar.RootBaseProps>, AvatarVariantProps>
+>(Avatar.Root, 'root')
+
+export const Fallback = withContext<HTMLSpanElement, Assign<HTMLStyledProps<'span'>, Avatar.FallbackBaseProps>>(
+  Avatar.Fallback,
+  'fallback',
+)
+
+export const Image = withContext<HTMLImageElement, Assign<HTMLStyledProps<'img'>, Avatar.ImageBaseProps>>(
+  Avatar.Image,
+  'image',
+)
+
+export { AvatarContext as Context } from '@ark-ui/react/avatar'
+export type { AvatarStatusChangeDetails as StatusChangeDetails } from '@ark-ui/react/avatar'

design-system/src/components/ui/styled/utils/create-style-context.tsx

@@ -0,0 +1,89 @@
+import { cx } from '@ark-ui/design-system/css'
+import { type StyledComponent, isCssProperty, styled } from '@ark-ui/design-system/jsx'
+import {
+  type ElementType,
+  type ForwardRefExoticComponent,
+  type PropsWithoutRef,
+  type RefAttributes,
+  createContext,
+  forwardRef,
+  useContext,
+} from 'react'
+
+type Props = Record<string, unknown>
+type Recipe = {
+  (props?: Props): Props
+  splitVariantProps: (props: Props) => [Props, Props]
+}
+type Slot<R extends Recipe> = keyof ReturnType<R>
+type Options = { forwardProps?: string[] }
+
+const shouldForwardProp = (prop: string, variantKeys: string[], options: Options = {}) =>
+  options.forwardProps?.includes(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop))
+
+export const createStyleContext = <R extends Recipe>(recipe: R) => {
+  const StyleContext = createContext<Record<Slot<R>, string> | null>(null)
+
+  const withRootProvider = <P extends {}>(Component: ElementType) => {
+    const StyledComponent = (props: P) => {
+      const [variantProps, otherProps] = recipe.splitVariantProps(props)
+      const slotStyles = recipe(variantProps) as Record<Slot<R>, string>
+
+      return (
+        <StyleContext.Provider value={slotStyles}>
+          <Component {...otherProps} />
+        </StyleContext.Provider>
+      )
+    }
+    return StyledComponent
+  }
+
+  const withProvider = <T, P extends { className?: string | undefined }>(
+    Component: ElementType,
+    slot: Slot<R>,
+    options?: Options,
+  ): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> => {
+    const StyledComponent = styled(
+      Component,
+      {},
+      {
+        shouldForwardProp: (prop, variantKeys) => shouldForwardProp(prop, variantKeys, options),
+      },
+    ) as StyledComponent<ElementType>
+    const StyledSlotProvider = forwardRef<T, P>((props, ref) => {
+      const [variantProps, otherProps] = recipe.splitVariantProps(props)
+      const slotStyles = recipe(variantProps) as Record<Slot<R>, string>
+
+      return (
+        <StyleContext.Provider value={slotStyles}>
+          <StyledComponent {...otherProps} ref={ref} className={cx(slotStyles?.[slot], props.className)} />
+        </StyleContext.Provider>
+      )
+    })
+    // @ts-expect-error
+    StyledSlotProvider.displayName = Component.displayName || Component.name
+
+    return StyledSlotProvider
+  }
+
+  const withContext = <T, P extends { className?: string | undefined }>(
+    Component: ElementType,
+    slot: Slot<R>,
+  ): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> => {
+    const StyledComponent = styled(Component)
+    const StyledSlotComponent = forwardRef<T, P>((props, ref) => {
+      const slotStyles = useContext(StyleContext)
+      return <StyledComponent {...props} ref={ref} className={cx(slotStyles?.[slot], props.className)} />
+    })
+    // @ts-expect-error
+    StyledSlotComponent.displayName = Component.displayName || Component.name
+
+    return StyledSlotComponent
+  }
+
+  return {
+    withRootProvider,
+    withProvider,
+    withContext,
+  }
+}

design-system/src/index.ts

@@ -0,0 +1,15 @@
+import { definePreset } from '@pandacss/dev'
+import { avatar } from './recipes/avatar'
+
+const preset = definePreset({
+  name: 'Ark UI Preset',
+  theme: {
+    extend: {
+      slotRecipes: {
+        avatar,
+      },
+    },
+  },
+})
+
+export default preset