@discourser/design-system 0.9.3 → 0.9.4

package/dist/preset/recipes/tabs.d.ts

@@ -0,0 +1,2 @@
+export declare const tabs: import("@pandacss/dev").SlotRecipeConfig;
+//# sourceMappingURL=tabs.d.ts.map

package/dist/preset/recipes/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/preset/recipes/tabs.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,IAAI,0CA6Kf,CAAA"}

package/dist/preset/recipes/textarea.d.ts

@@ -0,0 +1,2 @@
+export declare const textarea: import("@pandacss/dev").RecipeConfig<import("@pandacss/dev").RecipeVariantRecord>;
+//# sourceMappingURL=textarea.d.ts.map

package/dist/preset/recipes/textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/preset/recipes/textarea.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,mFA+EnB,CAAA"}

package/dist/preset/recipes/toast.d.ts

@@ -0,0 +1,2 @@
+export declare const toast: import("@pandacss/dev").SlotRecipeConfig;
+//# sourceMappingURL=toast.d.ts.map

package/dist/preset/recipes/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/preset/recipes/toast.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,0CA+ChB,CAAA"}

package/dist/preset/recipes/tooltip.d.ts

@@ -0,0 +1,2 @@
+export declare const tooltip: import("@pandacss/dev").SlotRecipeConfig;
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/preset/recipes/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/preset/recipes/tooltip.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,0CAkClB,CAAA"}

package/dist/preset/semantic-tokens.d.ts

@@ -0,0 +1,197 @@
+/**
+ * M3 Semantic Tokens - layered on top of Park UI
+ *
+ * These provide M3-style naming (surface, onSurface, etc.)
+ * while Park UI components use their own naming (fg, canvas, etc.)
+ */
+export declare const m3SemanticTokens: {
+    surface: {
+        DEFAULT: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        dim: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        bright: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        container: {
+            DEFAULT: {
+                value: {
+                    base: string;
+                    _dark: string;
+                };
+            };
+            low: {
+                value: {
+                    base: string;
+                    _dark: string;
+                };
+            };
+            lowest: {
+                value: {
+                    base: string;
+                    _dark: string;
+                };
+            };
+            high: {
+                value: {
+                    base: string;
+                    _dark: string;
+                };
+            };
+            highest: {
+                value: {
+                    base: string;
+                    _dark: string;
+                };
+            };
+        };
+    };
+    onSurface: {
+        DEFAULT: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        variant: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+    };
+    m3Primary: {
+        DEFAULT: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        container: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+    };
+    onM3Primary: {
+        DEFAULT: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        container: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+    };
+    secondary: {
+        DEFAULT: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        container: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+    };
+    onSecondary: {
+        DEFAULT: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        container: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+    };
+    tertiary: {
+        DEFAULT: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        container: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+    };
+    onTertiary: {
+        DEFAULT: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        container: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+    };
+    outline: {
+        DEFAULT: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+        variant: {
+            value: {
+                base: string;
+                _dark: string;
+            };
+        };
+    };
+    inverseSurface: {
+        value: {
+            base: string;
+            _dark: string;
+        };
+    };
+    inverseOnSurface: {
+        value: {
+            base: string;
+            _dark: string;
+        };
+    };
+    inversePrimary: {
+        value: {
+            base: string;
+            _dark: string;
+        };
+    };
+    scrim: {
+        value: {
+            base: string;
+            _dark: string;
+        };
+    };
+};
+//# sourceMappingURL=semantic-tokens.d.ts.map

package/dist/preset/semantic-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"semantic-tokens.d.ts","sourceRoot":"","sources":["../../src/preset/semantic-tokens.ts"],"names":[],"mappings":"AAMA;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8D3B,CAAC"}

package/dist/preset/shadows.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Shadow semantic tokens from Park UI
+ * Adjusted to use 'base' instead of '_light' and neutral.a* instead of black.a*
+ */
+export declare const shadows: {
+    xs: {
+        value: {
+            base: string;
+            _dark: string;
+        };
+    };
+    sm: {
+        value: {
+            base: string;
+            _dark: string;
+        };
+    };
+    md: {
+        value: {
+            base: string;
+            _dark: string;
+        };
+    };
+    lg: {
+        value: {
+            base: string;
+            _dark: string;
+        };
+    };
+    xl: {
+        value: {
+            base: string;
+            _dark: string;
+        };
+    };
+    '2xl': {
+        value: {
+            base: string;
+            _dark: string;
+        };
+    };
+    inset: {
+        value: {
+            base: string;
+            _dark: string;
+        };
+    };
+};
+//# sourceMappingURL=shadows.d.ts.map

package/dist/preset/shadows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadows.d.ts","sourceRoot":"","sources":["../../src/preset/shadows.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2ClB,CAAC"}

package/dist/preset/text-styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Text styles from Park UI
+ * These provide consistent typography sizing across components
+ */
+export declare const textStyles: import("@pandacss/dev").TextStyles;
+//# sourceMappingURL=text-styles.d.ts.map

package/dist/preset/text-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-styles.d.ts","sourceRoot":"","sources":["../../src/preset/text-styles.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,UAAU,oCAcrB,CAAC"}

package/dist/recipes/button.recipe.d.ts

@@ -0,0 +1,2 @@
+export declare const buttonRecipe: import("@pandacss/dev").RecipeConfig<import("@pandacss/dev").RecipeVariantRecord>;
+//# sourceMappingURL=button.recipe.d.ts.map

package/dist/recipes/button.recipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.recipe.d.ts","sourceRoot":"","sources":["../../src/recipes/button.recipe.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,mFAqHvB,CAAC"}

package/dist/recipes/card.recipe.d.ts

@@ -0,0 +1,2 @@
+export declare const cardRecipe: import("@pandacss/dev").RecipeConfig<import("@pandacss/dev").RecipeVariantRecord>;
+//# sourceMappingURL=card.recipe.d.ts.map

package/dist/recipes/card.recipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.recipe.d.ts","sourceRoot":"","sources":["../../src/recipes/card.recipe.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,mFA+CrB,CAAC"}

package/dist/recipes/dialog.recipe.d.ts

@@ -0,0 +1,2 @@
+export declare const dialogRecipe: import("@pandacss/dev").SlotRecipeConfig;
+//# sourceMappingURL=dialog.recipe.d.ts.map

package/dist/recipes/dialog.recipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.recipe.d.ts","sourceRoot":"","sources":["../../src/recipes/dialog.recipe.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,0CA+HvB,CAAC"}

package/dist/recipes/icon-button.recipe.d.ts

@@ -0,0 +1,2 @@
+export declare const iconButtonRecipe: import("@pandacss/dev").RecipeConfig<import("@pandacss/dev").RecipeVariantRecord>;
+//# sourceMappingURL=icon-button.recipe.d.ts.map

package/dist/recipes/icon-button.recipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.recipe.d.ts","sourceRoot":"","sources":["../../src/recipes/icon-button.recipe.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,mFA6F3B,CAAC"}

package/dist/recipes/index.d.ts

@@ -0,0 +1,7 @@
+export { buttonRecipe } from './button.recipe';
+export { cardRecipe } from './card.recipe';
+export { iconButtonRecipe } from './icon-button.recipe';
+export { inputRecipe } from './input.recipe';
+export { dialogRecipe } from './dialog.recipe';
+export { switchRecipe } from './switch.recipe';
+//# sourceMappingURL=index.d.ts.map

package/dist/recipes/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/recipes/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/recipes/input.recipe.d.ts

@@ -0,0 +1,2 @@
+export declare const inputRecipe: import("@pandacss/dev").RecipeConfig<import("@pandacss/dev").RecipeVariantRecord>;
+//# sourceMappingURL=input.recipe.d.ts.map

package/dist/recipes/input.recipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.recipe.d.ts","sourceRoot":"","sources":["../../src/recipes/input.recipe.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,mFA0FtB,CAAC"}

package/dist/recipes/switch.recipe.d.ts

@@ -0,0 +1,2 @@
+export declare const switchRecipe: import("@pandacss/dev").SlotRecipeConfig;
+//# sourceMappingURL=switch.recipe.d.ts.map

package/dist/recipes/switch.recipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.recipe.d.ts","sourceRoot":"","sources":["../../src/recipes/switch.recipe.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,0CAkHvB,CAAC"}

package/dist/stories/foundations/components/ColorSwatch.d.ts

@@ -0,0 +1,21 @@
+interface ColorSwatchProps {
+    name: string;
+    value: string;
+    description?: string;
+}
+export declare const ColorSwatch: ({ name, value, description }: ColorSwatchProps) => import("react/jsx-runtime").JSX.Element;
+interface TonalSwatchProps {
+    paletteName: string;
+    tone: number;
+    value: string;
+}
+export declare const TonalSwatch: ({ paletteName, tone, value }: TonalSwatchProps) => import("react/jsx-runtime").JSX.Element;
+interface SemanticSwatchProps {
+    name: string;
+    lightValue: string;
+    darkValue: string;
+    description?: string;
+}
+export declare const SemanticSwatch: ({ name, lightValue, darkValue, description, }: SemanticSwatchProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ColorSwatch.d.ts.map

package/dist/stories/foundations/components/ColorSwatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSwatch.d.ts","sourceRoot":"","sources":["../../../../src/stories/foundations/components/ColorSwatch.tsx"],"names":[],"mappings":"AAEA,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,GAAI,8BAA8B,gBAAgB,4CA2CzE,CAAC;AAEF,UAAU,gBAAgB;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,WAAW,GAAI,8BAA8B,gBAAgB,4CAyBzE,CAAC;AAEF,UAAU,mBAAmB;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,GAAI,+CAK5B,mBAAmB,4CAmErB,CAAC"}

package/dist/stories/foundations/components/ElevationCard.d.ts

@@ -0,0 +1,11 @@
+interface ElevationCardProps {
+    level: string;
+    shadow: string;
+}
+export declare const ElevationCard: ({ level, shadow }: ElevationCardProps) => import("react/jsx-runtime").JSX.Element;
+interface ElevationGridProps {
+    elevations: Record<string, string>;
+}
+export declare const ElevationGrid: ({ elevations }: ElevationGridProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ElevationCard.d.ts.map

package/dist/stories/foundations/components/ElevationCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElevationCard.d.ts","sourceRoot":"","sources":["../../../../src/stories/foundations/components/ElevationCard.tsx"],"names":[],"mappings":"AAEA,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,GAAI,mBAAmB,kBAAkB,4CAiDlE,CAAC;AAEF,UAAU,kBAAkB;IAC1B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,aAAa,GAAI,gBAAgB,kBAAkB,4CAkB/D,CAAC"}

package/dist/stories/foundations/components/SpacingBox.d.ts

@@ -0,0 +1,11 @@
+interface SpacingBoxProps {
+    name: string;
+    value: string;
+}
+export declare const SpacingBox: ({ name, value }: SpacingBoxProps) => import("react/jsx-runtime").JSX.Element;
+interface SpacingGridProps {
+    spacings: Record<string, string>;
+}
+export declare const SpacingGrid: ({ spacings }: SpacingGridProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SpacingBox.d.ts.map

package/dist/stories/foundations/components/SpacingBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpacingBox.d.ts","sourceRoot":"","sources":["../../../../src/stories/foundations/components/SpacingBox.tsx"],"names":[],"mappings":"AAEA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,UAAU,GAAI,iBAAiB,eAAe,4CAiE1D,CAAC;AAEF,UAAU,gBAAgB;IACxB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAClC;AAED,eAAO,MAAM,WAAW,GAAI,cAAc,gBAAgB,4CAezD,CAAC"}

package/dist/stories/foundations/components/TypeSpecimen.d.ts

@@ -0,0 +1,12 @@
+interface TypeSpecimenProps {
+    name: string;
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: string;
+    letterSpacing: string;
+    fontFamily: string;
+    sampleText?: string;
+}
+export declare const TypeSpecimen: ({ name, fontSize, lineHeight, fontWeight, letterSpacing, fontFamily, sampleText, }: TypeSpecimenProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TypeSpecimen.d.ts.map

package/dist/stories/foundations/components/TypeSpecimen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypeSpecimen.d.ts","sourceRoot":"","sources":["../../../../src/stories/foundations/components/TypeSpecimen.tsx"],"names":[],"mappings":"AAEA,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,GAAI,oFAQ1B,iBAAiB,4CAsFnB,CAAC"}

package/dist/utils/cn.d.ts

@@ -0,0 +1,6 @@
+import { type ClassValue } from 'clsx';
+/**
+ * Utility function to merge class names
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=cn.d.ts.map

package/dist/utils/cn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/utils/cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAE7C;;GAEG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@discourser/design-system",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "description": "Aesthetic-agnostic design system with Panda CSS and Ark UI",
   "type": "module",
   "publishConfig": {
@@ -60,14 +60,16 @@
   "files": [
     "dist",
     "styled-system",
+    "src",
     "guidelines"
   ],
   "scripts": {
     "dev": "pnpm docs:generate && storybook dev -p 6006",
-    "build": "pnpm build:panda && pnpm build:lib && pnpm build:css",
+    "build": "pnpm build:panda && pnpm build:lib && pnpm build:types && pnpm build:css",
     "build:panda": "panda codegen",
     "build:css": "panda cssgen --outfile dist/styles.css",
     "build:lib": "tsup",
+    "build:types": "tsc --project tsconfig.build.json",
     "build:storybook": "pnpm docs:generate && storybook build",
     "prepare": "panda codegen && husky",
     "lint": "eslint src --ext .ts,.tsx",

package/src/components/AbsoluteCenter.tsx

@@ -0,0 +1,7 @@
+import { ark } from '@ark-ui/react/factory'
+import type { ComponentProps } from 'react'
+import { styled } from 'styled-system/jsx'
+import { absoluteCenter } from 'styled-system/recipes'
+
+export type AbsoluteCenterProps = ComponentProps<typeof AbsoluteCenter>
+export const AbsoluteCenter = styled(ark.div, absoluteCenter)

package/src/components/Accordion.tsx

@@ -0,0 +1,27 @@
+'use client'
+import { Accordion } from '@ark-ui/react/accordion'
+import { ark } from '@ark-ui/react/factory'
+import type { ComponentProps } from 'react'
+import { createStyleContext } from 'styled-system/jsx'
+import { accordion } from 'styled-system/recipes'
+
+const ChevronDownIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="m6 9 6 6 6-6"></path>
+  </svg>
+)
+
+const { withProvider, withContext } = createStyleContext(accordion)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider(Accordion.Root, 'root')
+export const RootProvider = withProvider(Accordion.RootProvider, 'root')
+export const Item = withContext(Accordion.Item, 'item')
+export const ItemContent = withContext(Accordion.ItemContent, 'itemContent')
+export const ItemIndicator = withContext(Accordion.ItemIndicator, 'itemIndicator', {
+  defaultProps: { children: <ChevronDownIcon /> },
+})
+export const ItemTrigger = withContext(Accordion.ItemTrigger, 'itemTrigger')
+export const ItemBody = withContext(ark.div, 'itemBody')
+
+export { AccordionContext as Context } from '@ark-ui/react/accordion'

package/src/components/Avatar.tsx

@@ -0,0 +1,55 @@
+'use client'
+import { Avatar } from '@ark-ui/react/avatar'
+import { type ComponentProps, forwardRef } from 'react'
+import { createStyleContext } from 'styled-system/jsx'
+import { avatar } from 'styled-system/recipes'
+
+const UserIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
+    <circle cx="12" cy="7" r="4"></circle>
+  </svg>
+)
+
+const { withProvider, withContext } = createStyleContext(avatar)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider(Avatar.Root, 'root')
+export const RootProvider = withProvider(Avatar.RootProvider, 'root')
+export const Image = withContext(Avatar.Image, 'image', {
+  defaultProps: {
+    draggable: 'false',
+    referrerPolicy: 'no-referrer',
+  },
+})
+
+export { AvatarContext as Context } from '@ark-ui/react/avatar'
+
+export interface FallbackProps extends ComponentProps<typeof StyledFallback> {
+  /**
+   * The name to derive the initials from.
+   * If not provided, the fallback will display a generic icon.
+   */
+  name?: string | undefined
+}
+
+const StyledFallback = withContext(Avatar.Fallback, 'fallback')
+
+export const Fallback = forwardRef<HTMLDivElement, FallbackProps>(function Fallback(props, ref) {
+  const { name, children, asChild, ...rest } = props
+
+  const fallbackContent = children || asChild ? children : name ? getInitials(name) : <UserIcon />
+
+  return (
+    <StyledFallback ref={ref} {...rest}>
+      {fallbackContent}
+    </StyledFallback>
+  )
+})
+
+const getInitials = (name: string) => {
+  const names = name.trim().split(' ')
+  const firstName = names[0] || ''
+  const lastName = names.length > 1 ? names[names.length - 1] : ''
+  return firstName && lastName ? `${firstName[0]}${lastName[0]}` : firstName[0]
+}

package/src/components/Badge.tsx

@@ -0,0 +1,29 @@
+import { ark } from '@ark-ui/react/factory';
+import { forwardRef, type ComponentProps } from 'react';
+import { css, cx } from 'styled-system/css';
+import { styled } from 'styled-system/jsx';
+import { badge } from 'styled-system/recipes';
+
+type BaseBadgeProps = ComponentProps<typeof BaseBadge>;
+const BaseBadge = styled(ark.div, badge);
+
+// Override colorPalette type to provide specific values
+export interface BadgeProps extends Omit<BaseBadgeProps, 'colorPalette'> {
+  /**
+   * The color palette to use for the badge.
+   * @default "primary"
+   */
+  colorPalette?: 'primary' | 'neutral' | 'error' | 'gray' | 'red' | undefined;
+}
+
+export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
+  function Badge(props, ref) {
+    const { colorPalette = 'primary', className, ...rest } = props;
+
+    // Apply colorPalette using Panda's css() function
+    const colorPaletteClass = css({ colorPalette });
+    const mergedClassName = cx(colorPaletteClass, className);
+
+    return <BaseBadge ref={ref} {...rest} className={mergedClassName} />;
+  },
+);