@jongh/ui 1.6.5

package/.storybook/index.css

@@ -0,0 +1 @@
+@layer reset, base, tokens, recipes, utilities;

package/.storybook/main.ts

@@ -0,0 +1,40 @@
+import { dirname, join } from "path"
+import type { StorybookConfig } from "@storybook/react-vite"
+import { mergeConfig } from "vite"
+import tsconfigPaths from "vite-tsconfig-paths"
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath("@storybook/addon-controls"),
+    getAbsolutePath("@storybook/addon-a11y"),
+    getAbsolutePath("@storybook/experimental-addon-test"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/react-vite"),
+    options: {},
+  },
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      // 👇 Default prop filter, which excludes props from node_modules
+      shouldRemoveUndefinedFromOptional: true,
+      propFilter: (prop) =>
+        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
+    },
+  },
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      plugins: [tsconfigPaths({ root: "./" })],
+    })
+  },
+}
+export default config
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")))
+}

package/.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from "@storybook/react"
+import "./index.css"
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    layout: "centered",
+  },
+}
+
+export default preview

package/.storybook/vitest.setup.ts

@@ -0,0 +1,9 @@
+import { beforeAll } from "vitest"
+import { setProjectAnnotations } from "@storybook/react"
+import * as projectAnnotations from "./preview"
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+const project = setProjectAnnotations([projectAnnotations])
+
+beforeAll(project.beforeAll)

package/.turbo/turbo-build.log

@@ -0,0 +1,79 @@
+
+> @jongh/ui@1.6.5 build /home/runner/work/j-design-system/j-design-system/packages/ui
+> storybook build
+
+@storybook/core v8.5.6
+
+info => Cleaning outputDir: storybook-static
+The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
+info => Loading presets
+info => Building manager..
+WARN unable to find package.json for radix-ui
+info => Manager built (242 ms)
+info => Building preview..
+WARN No story files found for the specified pattern: src/**/*.mdx
+info Using tsconfig paths for react-docgen
+vite v5.4.14 building for production...
+transforming...
+🐼 info [hrtime] Extracted in (88.18ms)
+../../node_modules/.pnpm/@storybook+core@8.5.6_prettier@3.5.2/node_modules/@storybook/core/dist/preview/runtime.js (3212:15): Use of eval in "../../node_modules/.pnpm/@storybook+core@8.5.6_prettier@3.5.2/node_modules/@storybook/core/dist/preview/runtime.js" is strongly discouraged as it poses security risks and may cause issues with minification.
+../../node_modules/.pnpm/@storybook+core@8.5.6_prettier@3.5.2/node_modules/@storybook/core/dist/preview/runtime.js (3214:16): Use of eval in "../../node_modules/.pnpm/@storybook+core@8.5.6_prettier@3.5.2/node_modules/@storybook/core/dist/preview/runtime.js" is strongly discouraged as it poses security risks and may cause issues with minification.
+✓ 1839 modules transformed.
+rendering chunks...
+computing gzip size...
+storybook-static/iframe.html                                17.75 kB │ gzip:   5.00 kB
+storybook-static/assets/preview-DC8N7cZb.css                44.77 kB │ gzip:   9.65 kB
+storybook-static/assets/preview-BCV5r-Ja.js                  0.13 kB │ gzip:   0.13 kB
+storybook-static/assets/preview-Bl8rsKRy.js                  0.17 kB │ gzip:   0.16 kB
+storybook-static/assets/preview-Br-h4d84.js                  0.17 kB │ gzip:   0.15 kB
+storybook-static/assets/index-DNo8LKN3.js                    0.23 kB │ gzip:   0.21 kB
+storybook-static/assets/_commonjsHelpers-Cpj98o6Y.js         0.24 kB │ gzip:   0.18 kB
+storybook-static/assets/index-DUy19JZU.js                    0.46 kB │ gzip:   0.30 kB
+storybook-static/assets/index-Cvkemp2J.js                    0.63 kB │ gzip:   0.40 kB
+storybook-static/assets/preview-B3PTUHS7.js                  0.64 kB │ gzip:   0.44 kB
+storybook-static/assets/preview-DGUiP6tS.js                  0.71 kB │ gzip:   0.50 kB
+storybook-static/assets/chunk-XP5HYGXS-D5tuasO7.js           0.72 kB │ gzip:   0.40 kB
+storybook-static/assets/index-DrFu-skq.js                    0.77 kB │ gzip:   0.47 kB
+storybook-static/assets/index-rtmQni2k.js                    0.79 kB │ gzip:   0.45 kB
+storybook-static/assets/preview-Bm-a94Ct.js                  0.84 kB │ gzip:   0.54 kB
+storybook-static/assets/react-18-BPs3tMGP.js                 0.84 kB │ gzip:   0.49 kB
+storybook-static/assets/jsx-runtime-BYYWji4R.js              0.92 kB │ gzip:   0.58 kB
+storybook-static/assets/index-Bklpsb39.js                    1.36 kB │ gzip:   0.67 kB
+storybook-static/assets/createLucideIcon-DmXe7Z8R.js         1.58 kB │ gzip:   0.66 kB
+storybook-static/assets/preview-Bb56VplF.js                  2.12 kB │ gzip:   1.17 kB
+storybook-static/assets/index-CSbWd7UJ.js                    2.15 kB │ gzip:   0.94 kB
+storybook-static/assets/index-Cu4lwwaE.js                    2.58 kB │ gzip:   1.26 kB
+storybook-static/assets/index-D_35mznO.js                    2.83 kB │ gzip:   1.29 kB
+storybook-static/assets/preview-1l6V4UsQ.js                  3.50 kB │ gzip:   1.69 kB
+storybook-static/assets/avatar.stories-DMDsrSks.js           3.85 kB │ gzip:   1.53 kB
+storybook-static/assets/button.stories-CuVC-3x-.js           4.09 kB │ gzip:   1.43 kB
+storybook-static/assets/chip.stories-FBIp8XNi.js             4.82 kB │ gzip:   1.84 kB
+storybook-static/assets/preview-D77C14du.js                  5.03 kB │ gzip:   1.86 kB
+storybook-static/assets/index-ClcD9ViR.js                    7.18 kB │ gzip:   2.92 kB
+storybook-static/assets/preview-BWzBA1C2.js                  7.62 kB │ gzip:   1.56 kB
+storybook-static/assets/preview-BBWR9nbA.js                  8.12 kB │ gzip:   3.10 kB
+storybook-static/assets/tabs.stories-BbTU4QU3.js             9.68 kB │ gzip:   3.44 kB
+storybook-static/assets/slider.stories-CxOczq0y.js          10.35 kB │ gzip:   3.97 kB
+storybook-static/assets/accordion.stories-0Om0AnMm.js       10.82 kB │ gzip:   3.56 kB
+storybook-static/assets/index-DvbTp2M2.js                   17.33 kB │ gzip:   6.88 kB
+storybook-static/assets/index-C2tRLqin.js                   20.57 kB │ gzip:   7.38 kB
+storybook-static/assets/Color-F6OSRLHC-CrKta8Qx.js          29.40 kB │ gzip:  11.08 kB
+storybook-static/assets/matchers-57EZJSQE-oeXCqs4p.js       29.72 kB │ gzip:  10.28 kB
+storybook-static/assets/entry-preview-Bkgdgq1b.js           41.76 kB │ gzip:  14.06 kB
+storybook-static/assets/dialog.stories-3WsEvXt4.js          44.57 kB │ gzip:  11.86 kB
+storybook-static/assets/select.stories-AN8Hb81Z.js          50.87 kB │ gzip:  17.65 kB
+storybook-static/assets/index-CBft-ReK.js                   53.73 kB │ gzip:  15.56 kB
+storybook-static/assets/index-BrlJLjep.js                  134.00 kB │ gzip:  43.17 kB
+storybook-static/assets/iframe-LPPPXabV.js                 193.17 kB │ gzip:  66.90 kB
+storybook-static/assets/entry-preview-docs-zLz1Es7d.js     244.61 kB │ gzip:  73.41 kB
+
+(!) Some chunks are larger than 500 kB after minification. Consider:
+storybook-static/assets/axe-Dzet_oDA.js                    572.30 kB │ gzip: 157.93 kB
+storybook-static/assets/index-D59aU5s_.js                  661.29 kB │ gzip: 156.45 kB
+storybook-static/assets/DocsRenderer-CFRXHY34-Crd9Mepd.js  868.48 kB │ gzip: 272.24 kB
+✓ built in 13.18s
+- Using dynamic import() to code-split the application
+info => Preview built (16 s)
+- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
+info => Output directory: /home/runner/work/j-design-system/j-design-system/packages/ui/storybook-static
+- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

package/CHANGELOG.md

@@ -0,0 +1,54 @@
+# @jongh/ui
+
+## 1.6.5
+
+### Patch Changes
+
+- Updated dependencies [2b064ae]
+  - panda-animation@0.1.0
+
+## 1.6.4
+
+### Patch Changes
+
+- Updated dependencies [7b2feec]
+  - panda-animation@0.0.2
+
+## 1.6.3
+
+### Patch Changes
+
+- Updated dependencies [412a4ca]
+  - @jongh/panda-preset@1.4.0
+
+## 1.6.2
+
+### Patch Changes
+
+- Updated dependencies [cb4aefa]
+  - @jongh/panda-preset@1.3.0
+
+## 1.6.1
+
+### Patch Changes
+
+- Updated dependencies [fc499b8]
+  - @jongh/panda-preset@1.2.0
+
+## 1.6.0
+
+### Minor Changes
+
+- a27c196: add fadeIn keyframes in preset
+
+### Patch Changes
+
+- Updated dependencies [a27c196]
+  - @jongh/panda-preset@1.1.0
+
+## 1.5.22
+
+### Patch Changes
+
+- Updated dependencies
+  - @jongh/panda-preset@1.0.0

package/chromatic.config.json

@@ -0,0 +1,6 @@
+{
+  "onlyChanged": true,
+  "projectId": "Project:6683c8acf34b923f7227be4a",
+  "storybookBaseDir": "packages/ui",
+  "zip": true
+}

package/eslint.config.mjs

@@ -0,0 +1,14 @@
+import { config } from "@jongh/eslint/react-internal"
+
+/** @type {import("eslint").Linter.Config} */
+export default [
+  ...config,
+  {
+    rules: {
+      "react/display-name": "off",
+    },
+  },
+  {
+    ignores: ["styled-system/*", ".storybook/*", "postcss.config.*"],
+  },
+]

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@jongh/ui",
+  "version": "1.6.5",
+  "description": "Headless UI components for React",
+  "type": "module",
+  "dependencies": {
+    "@floating-ui/react-dom": "^2.1.2",
+    "@vitejs/plugin-react": "^4.3.1",
+    "framer-motion": "^11.3.19",
+    "lucide-react": "^0.475.0",
+    "radix-ui": "^1.1.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "panda-animation": "0.1.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.4",
+    "@pandacss/studio": "^0.46.0",
+    "@storybook/addon-a11y": "^8.5.3",
+    "@storybook/addon-controls": "^8.5.3",
+    "@storybook/addon-docs": "^8.5.3",
+    "@storybook/addon-essentials": "^8.5.3",
+    "@storybook/addon-links": "^8.5.3",
+    "@storybook/addon-onboarding": "^8.5.3",
+    "@storybook/addon-themes": "^8.5.3",
+    "@storybook/blocks": "^8.5.3",
+    "@storybook/experimental-addon-test": "^8.5.3",
+    "@storybook/preview-api": "^8.5.3",
+    "@storybook/react": "^8.5.3",
+    "@storybook/react-vite": "^8.5.3",
+    "@storybook/test": "^8.5.3",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "axe-playwright": "^2.0.1",
+    "chromatic": "^11.5.4",
+    "playwright": "^1.48.2",
+    "storybook": "^8.5.3",
+    "vite": "^5.4.10",
+    "vite-bundle-visualizer": "^1.2.1",
+    "vite-plugin-dts": "^3.9.1",
+    "vite-tsconfig-paths": "^5.1.4",
+    "@jongh/eslint": "0.0.0",
+    "@jongh/tsconfig": "0.0.0"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "scripts": {
+    "lint": "eslint --max-warnings 0 --no-warn-ignored --fix",
+    "test": "vitest run",
+    "test-storybook": "vitest",
+    "storybook": "storybook dev -p 6006",
+    "build": "storybook build",
+    "check-type": "tsc --noEmit"
+  }
+}

package/panda.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from "@pandacss/dev"
+import { preset } from "panda-animation"
+
+import { defaultPreset } from "./preset"
+export default defineConfig({
+  preflight: true,
+  presets: [preset(), "@pandacss/preset-panda", defaultPreset],
+  jsxFramework: "react",
+  include: ["./src/**/*.{js,jsx,ts,tsx}", "./src/stories/*.{js,jsx,ts,tsx}"],
+  outdir: "styled-system",
+  strictPropertyValues: true,
+  strictTokens: true,
+})

package/postcss.config.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require("@pandacss/dev/postcss")()],
+}

package/preset.ts

@@ -0,0 +1,134 @@
+import {
+  defineGlobalStyles,
+  definePreset,
+  defineSemanticTokens,
+  defineTokens,
+} from "@pandacss/dev"
+
+const globalCss = defineGlobalStyles({
+  "html, body": {
+    w: "full",
+    h: "full",
+  },
+})
+
+const radii = defineTokens.radii({
+  radius: { value: "0.5rem" },
+})
+
+export const semanticColors = defineSemanticTokens.colors({
+  background: {
+    value: { base: "hsl(0 0% 100%)", _dark: "hsl(222.2 84% 4.9%)" },
+  },
+  foreground: {
+    value: { base: "hsl(222.2 84% 4.9%)", _dark: "hsl(210 40% 98%)" },
+  },
+  card: {
+    DEFAULT: {
+      value: { base: "hsl(0 0% 100%)", _dark: "hsl(222.2 84% 4.9%)" },
+    },
+    foreground: {
+      value: { base: "hsl(222.2 84% 4.9%)", _dark: "hsl(210 40% 98%)" },
+    },
+  },
+  popover: {
+    DEFAULT: {
+      value: { base: "hsl(0 0% 100%)", _dark: "hsl(222.2 84% 4.9%)" },
+    },
+    foreground: {
+      value: { base: "hsl(222.2 84% 4.9%)", _dark: "hsl(210 40% 98%)" },
+    },
+  },
+  primary: {
+    DEFAULT: {
+      value: { base: "hsl(222.2 47.4% 11.2%)", _dark: "hsl(210 40% 98%)" },
+    },
+    foreground: {
+      value: { base: "hsl(210 40% 98%)", _dark: "hsl(222.2 47.4% 11.2%)" },
+    },
+  },
+  secondary: {
+    DEFAULT: {
+      value: { base: "hsl(210 40% 96.1%)", _dark: "hsl(217.2 32.6% 17.5%)" },
+    },
+    foreground: {
+      value: { base: "hsl(222.2 47.4% 11.2%)", _dark: "hsl(210 40% 98%)" },
+    },
+  },
+  muted: {
+    DEFAULT: {
+      value: { base: "hsl(210 40% 96.1%)", _dark: "hsl(217.2 32.6% 17.5%)" },
+    },
+    foreground: {
+      value: {
+        base: "hsl(215.4 16.3% 46.9%)",
+        _dark: "hsl(215 20.2% 65.1%)",
+      },
+    },
+  },
+  accent: {
+    DEFAULT: {
+      value: { base: "hsl(210 40% 96.1%)", _dark: "hsl(217.2 32.6% 17.5%)" },
+    },
+    foreground: {
+      value: { base: "hsl(222.2 47.4% 11.2%)", _dark: "hsl(210 40% 98%)" },
+    },
+  },
+  destructive: {
+    DEFAULT: {
+      value: { base: "hsl(0 84.2% 60.2%)", _dark: "hsl(0 62.8% 30.6%)" },
+    },
+    foreground: {
+      value: { base: "hsl(210 40% 98%)", _dark: "hsl(210 40% 98%)" },
+    },
+  },
+  border: {
+    value: {
+      base: "hsl(214.3 31.8% 91.4%)",
+      _dark: "hsl(217.2 32.6% 17.5%)",
+    },
+  },
+  input: {
+    value: {
+      base: "hsl(214.3 31.8% 91.4%)",
+      _dark: "hsl(217.2 32.6% 17.5%)",
+    },
+  },
+  ring: {
+    value: { base: "hsl(222.2 84% 4.9%)", _dark: "hsl(212.7 26.8% 83.9%)" },
+  },
+})
+
+const borders = defineSemanticTokens.borders({
+  base: { value: "1px solid {colors.border}" },
+  input: { value: "1px solid {colors.input}" },
+  primary: { value: "1px solid {colors.primary}" },
+  destructive: { value: "1px solid {colors.destructive}" },
+})
+
+export const radius = defineSemanticTokens.radii({
+  xl: { value: `calc({radii.radius} + 4px)` },
+  lg: { value: `{radii.radius}` },
+  md: { value: `calc({radii.radius} - 2px)` },
+  sm: { value: "calc({radii.radius} - 4px)" },
+})
+
+export const defaultPreset = definePreset({
+  name: "default",
+  globalCss,
+  theme: {
+    extend: {
+      tokens: {
+        radii,
+      },
+      semanticTokens: {
+        colors: semanticColors,
+        radii: radius,
+        borders: borders,
+      },
+    },
+  },
+  staticCss: {
+    recipes: "*",
+  },
+})

package/src/component/accordion/ui/index.tsx

@@ -0,0 +1,80 @@
+import { css, cx } from "@styled-system/css"
+import { Accordion as AccordionPrimitive } from "radix-ui"
+import { type ComponentPropsWithoutRef, ElementRef, forwardRef } from "react"
+
+import { recipe } from "./recipe"
+
+export const Root = forwardRef<
+  ElementRef<typeof AccordionPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const styles = recipe.raw()
+
+  return (
+    <AccordionPrimitive.Root
+      ref={ref}
+      className={cx(css(styles.root), className)}
+      {...props}
+    />
+  )
+})
+
+export const Header = forwardRef<
+  ElementRef<typeof AccordionPrimitive.Header>,
+  ComponentPropsWithoutRef<typeof AccordionPrimitive.Header>
+>(({ className, ...props }, ref) => {
+  const styles = recipe.raw()
+
+  return (
+    <AccordionPrimitive.Header
+      ref={ref}
+      className={cx(css(styles.header), className)}
+      {...props}
+    />
+  )
+})
+
+export const Item = forwardRef<
+  ElementRef<typeof AccordionPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  const styles = recipe.raw()
+
+  return (
+    <AccordionPrimitive.Item
+      ref={ref}
+      className={cx(css(styles.item), className)}
+      {...props}
+    />
+  )
+})
+
+export const Trigger = forwardRef<
+  ElementRef<typeof AccordionPrimitive.Trigger>,
+  ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, ...props }, ref) => {
+  const styles = recipe.raw()
+
+  return (
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cx(css(styles.trigger), className)}
+      {...props}
+    />
+  )
+})
+
+export const Content = forwardRef<
+  ElementRef<typeof AccordionPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, ...props }, ref) => {
+  const styles = recipe.raw()
+
+  return (
+    <AccordionPrimitive.Content
+      ref={ref}
+      className={cx(css(styles.content), className)}
+      {...props}
+    />
+  )
+})

package/src/component/accordion/ui/recipe.ts

@@ -0,0 +1,65 @@
+import { sva } from "@styled-system/css"
+
+export const recipe = sva({
+  slots: ["root", "item", "header", "trigger", "content"],
+  base: {
+    item: {
+      borderBottom: "base",
+    },
+    header: {
+      display: "flex",
+    },
+    trigger: {
+      display: "flex",
+      flex: "1",
+      alignItems: "center",
+      justifyContent: "space-between",
+      py: "4",
+      fontWeight: "medium",
+      transition: "all",
+      cursor: "pointer",
+      _hover: {
+        textDecoration: "underline",
+      },
+
+      "& > svg": {
+        h: "4",
+        w: "4",
+        flexShrink: "0",
+        transition: "transform",
+        transitionDuration: "normal",
+      },
+
+      "&[data-state=open] > svg": {
+        transform: "rotate(180deg)",
+      },
+    },
+    content: {
+      overflow: "hidden",
+      textStyle: "sm",
+      transition: "all",
+
+      "&[data-state=closed]": {
+        animationName: "accordion-up_radix",
+        animationDuration: "normal",
+      },
+
+      "&[data-state=open]": {
+        animationName: "accordion-down_radix",
+        animationDuration: "normal",
+      },
+    },
+  },
+  variants: {
+    variant: {
+      sm: {
+        trigger: {
+          color: "amber.700",
+        },
+        content: {
+          color: "pink.300",
+        },
+      },
+    },
+  },
+})

package/src/component/avatar/ui/index.tsx

@@ -0,0 +1,47 @@
+import { css, cx } from "@styled-system/css"
+import { Avatar as AvatarPrimitive } from "radix-ui"
+import { type ComponentPropsWithoutRef, ElementRef, forwardRef } from "react"
+
+import { recipe } from "./recipe"
+
+export const Root = forwardRef<
+  ElementRef<typeof AvatarPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const styles = recipe.raw()
+  return (
+    <AvatarPrimitive.Root
+      ref={ref}
+      className={cx(css(styles.root), className)}
+      {...props}
+    />
+  )
+})
+
+export const Image = forwardRef<
+  ElementRef<typeof AvatarPrimitive.Image>,
+  ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => {
+  const styles = recipe.raw()
+  return (
+    <AvatarPrimitive.Image
+      ref={ref}
+      className={cx(css(styles.image), className)}
+      {...props}
+    />
+  )
+})
+
+export const Fallback = forwardRef<
+  ElementRef<typeof AvatarPrimitive.Fallback>,
+  ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => {
+  const styles = recipe.raw()
+  return (
+    <AvatarPrimitive.Fallback
+      ref={ref}
+      className={cx(css(styles.fallback), className)}
+      {...props}
+    />
+  )
+})