@kushagradhawan/kookie-ui 0.1.0

package/src/components/alert-dialog.tsx

@@ -0,0 +1,137 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';
+
+import { alertDialogContentPropDefs } from './alert-dialog.props.js';
+import { Heading } from './heading.js';
+import { Text } from './text.js';
+import { Theme } from './theme.js';
+import { extractProps } from '../helpers/extract-props.js';
+import { requireReactElement } from '../helpers/require-react-element.js';
+
+import type { AlertDialogContentOwnProps } from './alert-dialog.props.js';
+import type {
+  ComponentPropsWithout,
+  RemovedProps,
+  ComponentPropsAs,
+} from '../helpers/component-props.js';
+
+interface AlertDialogRootProps
+  extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Root> {}
+const AlertDialogRoot: React.FC<AlertDialogRootProps> = (props) => (
+  <AlertDialogPrimitive.Root {...props} />
+);
+AlertDialogRoot.displayName = 'AlertDialog.Root';
+
+type AlertDialogTriggerElement = React.ElementRef<typeof AlertDialogPrimitive.Trigger>;
+interface AlertDialogTriggerProps
+  extends ComponentPropsWithout<typeof AlertDialogPrimitive.Trigger, RemovedProps> {}
+const AlertDialogTrigger = React.forwardRef<AlertDialogTriggerElement, AlertDialogTriggerProps>(
+  ({ children, ...props }, forwardedRef) => (
+    <AlertDialogPrimitive.Trigger {...props} ref={forwardedRef} asChild>
+      {requireReactElement(children)}
+    </AlertDialogPrimitive.Trigger>
+  )
+);
+AlertDialogTrigger.displayName = 'AlertDialog.Trigger';
+
+type AlertDialogContentElement = React.ElementRef<typeof AlertDialogPrimitive.Content>;
+interface AlertDialogContentProps
+  extends ComponentPropsWithout<typeof AlertDialogPrimitive.Content, RemovedProps>,
+    AlertDialogContentOwnProps {
+  container?: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Portal>['container'];
+}
+const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDialogContentProps>(
+  ({ align, ...props }, forwardedRef) => {
+    const { align: alignPropDef, ...propDefs } = alertDialogContentPropDefs;
+    const { className: alignClassName } = extractProps({ align }, { align: alignPropDef });
+    const { className, forceMount, container, ...contentProps } = extractProps(props, propDefs);
+    return (
+      <AlertDialogPrimitive.Portal container={container} forceMount={forceMount}>
+        <Theme asChild>
+          <AlertDialogPrimitive.Overlay className="rt-BaseDialogOverlay rt-AlertDialogOverlay">
+            <div className="rt-BaseDialogScroll rt-AlertDialogScroll">
+              <div
+                className={`rt-BaseDialogScrollPadding rt-AlertDialogScrollPadding ${alignClassName}`}
+              >
+                <AlertDialogPrimitive.Content
+                  {...contentProps}
+                  ref={forwardedRef}
+                  className={classNames('rt-BaseDialogContent', 'rt-AlertDialogContent', className)}
+                />
+              </div>
+            </div>
+          </AlertDialogPrimitive.Overlay>
+        </Theme>
+      </AlertDialogPrimitive.Portal>
+    );
+  }
+);
+AlertDialogContent.displayName = 'AlertDialog.Content';
+
+type AlertDialogTitleElement = React.ElementRef<typeof Heading>;
+type AlertDialogTitleProps = ComponentPropsWithout<typeof Heading, 'asChild'>;
+const AlertDialogTitle = React.forwardRef<AlertDialogTitleElement, AlertDialogTitleProps>(
+  (props, forwardedRef) => (
+    <AlertDialogPrimitive.Title asChild>
+      <Heading size="5" mb="3" trim="start" {...props} asChild={false} ref={forwardedRef} />
+    </AlertDialogPrimitive.Title>
+  )
+);
+AlertDialogTitle.displayName = 'AlertDialog.Title';
+
+type AlertDialogDescriptionElement = HTMLParagraphElement;
+type AlertDialogDescriptionProps = ComponentPropsAs<typeof Text, 'p'>;
+const AlertDialogDescription = React.forwardRef<
+  AlertDialogDescriptionElement,
+  AlertDialogDescriptionProps
+>((props, forwardedRef) => (
+  <AlertDialogPrimitive.Description asChild>
+    <Text as="p" size="3" {...props} asChild={false} ref={forwardedRef} />
+  </AlertDialogPrimitive.Description>
+));
+AlertDialogDescription.displayName = 'AlertDialog.Description';
+
+type AlertDialogActionElement = React.ElementRef<typeof AlertDialogPrimitive.Action>;
+interface AlertDialogActionProps
+  extends ComponentPropsWithout<typeof AlertDialogPrimitive.Action, RemovedProps> {}
+const AlertDialogAction = React.forwardRef<AlertDialogActionElement, AlertDialogActionProps>(
+  ({ children, ...props }, forwardedRef) => (
+    <AlertDialogPrimitive.Action {...props} ref={forwardedRef} asChild>
+      {requireReactElement(children)}
+    </AlertDialogPrimitive.Action>
+  )
+);
+AlertDialogAction.displayName = 'AlertDialog.Action';
+
+type AlertDialogCancelElement = React.ElementRef<typeof AlertDialogPrimitive.Cancel>;
+interface AlertDialogCancelProps
+  extends ComponentPropsWithout<typeof AlertDialogPrimitive.Cancel, RemovedProps> {}
+const AlertDialogCancel = React.forwardRef<AlertDialogCancelElement, AlertDialogCancelProps>(
+  ({ children, ...props }, forwardedRef) => (
+    <AlertDialogPrimitive.Cancel {...props} ref={forwardedRef} asChild>
+      {requireReactElement(children)}
+    </AlertDialogPrimitive.Cancel>
+  )
+);
+AlertDialogCancel.displayName = 'AlertDialog.Cancel';
+
+export {
+  AlertDialogRoot as Root,
+  AlertDialogTrigger as Trigger,
+  AlertDialogContent as Content,
+  AlertDialogTitle as Title,
+  AlertDialogDescription as Description,
+  AlertDialogAction as Action,
+  AlertDialogCancel as Cancel,
+};
+
+export type {
+  AlertDialogRootProps as RootProps,
+  AlertDialogTriggerProps as TriggerProps,
+  AlertDialogContentProps as ContentProps,
+  AlertDialogTitleProps as TitleProps,
+  AlertDialogDescriptionProps as DescriptionProps,
+  AlertDialogActionProps as ActionProps,
+  AlertDialogCancelProps as CancelProps,
+};

package/src/components/animations.css

@@ -0,0 +1,129 @@
+@keyframes rt-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes rt-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes rt-slide-from-top {
+  from {
+    transform: translateY(4px) scale(0.97);
+  }
+  to {
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes rt-slide-to-top {
+  from {
+    transform: translateY(0) scale(1);
+  }
+  to {
+    transform: translateY(4px) scale(0.97);
+  }
+}
+
+@keyframes rt-slide-from-bottom {
+  from {
+    transform: translateY(-4px) scale(0.97);
+  }
+  to {
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes rt-slide-to-bottom {
+  from {
+    transform: translateY(0) scale(1);
+  }
+  to {
+    transform: translateY(-4px) scale(0.97);
+  }
+}
+
+@keyframes rt-slide-from-left {
+  from {
+    transform: translateX(4px) scale(0.97);
+  }
+  to {
+    transform: translateX(0) scale(1);
+  }
+}
+
+@keyframes rt-slide-to-left {
+  from {
+    transform: translateX(0) scale(1);
+  }
+  to {
+    transform: translateX(4px) scale(0.97);
+  }
+}
+
+@keyframes rt-slide-from-right {
+  from {
+    transform: translateX(-4px) scale(0.97);
+  }
+  to {
+    transform: translateX(0) scale(1);
+  }
+}
+
+@keyframes rt-slide-to-right {
+  from {
+    transform: translateX(0) scale(1);
+  }
+  to {
+    transform: translateX(-4px) scale(0.97);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .rt-PopperContent {
+    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+
+    &:where([data-state='open']) {
+      animation-duration: 160ms;
+
+      &:where([data-side='top']) {
+        animation-name: rt-slide-from-top, rt-fade-in;
+      }
+      &:where([data-side='bottom']) {
+        animation-name: rt-slide-from-bottom, rt-fade-in;
+      }
+      &:where([data-side='left']) {
+        animation-name: rt-slide-from-left, rt-fade-in;
+      }
+      &:where([data-side='right']) {
+        animation-name: rt-slide-from-right, rt-fade-in;
+      }
+    }
+
+    &:where([data-state='closed']) {
+      animation-duration: 100ms;
+
+      &:where([data-side='top']) {
+        animation-name: rt-slide-to-top, rt-fade-out;
+      }
+      &:where([data-side='bottom']) {
+        animation-name: rt-slide-to-bottom, rt-fade-out;
+      }
+      &:where([data-side='left']) {
+        animation-name: rt-slide-to-left, rt-fade-out;
+      }
+      &:where([data-side='right']) {
+        animation-name: rt-slide-to-right, rt-fade-out;
+      }
+    }
+  }
+}

package/src/components/aspect-ratio.tsx

@@ -0,0 +1,3 @@
+import { AspectRatio as AspectRatioPrimitive } from 'radix-ui';
+export const AspectRatio = AspectRatioPrimitive.Root;
+export type AspectRatioProps = AspectRatioPrimitive.AspectRatioProps;

package/src/components/avatar.css

@@ -0,0 +1,143 @@
+.rt-AvatarRoot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  user-select: none;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  flex-shrink: 0;
+}
+
+.rt-AvatarImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+
+.rt-AvatarFallback {
+  font-family: var(--default-font-family);
+  font-weight: var(--font-weight-medium);
+  font-style: normal;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  border-radius: inherit;
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * SIZES                                                                                           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.rt-AvatarFallback {
+  text-transform: uppercase;
+
+  &:where(.rt-one-letter) {
+    font-size: var(--avatar-fallback-one-letter-font-size);
+  }
+  &:where(.rt-two-letters) {
+    /* prettier-ignore */
+    font-size: var(--avatar-fallback-two-letters-font-size, var(--avatar-fallback-one-letter-font-size));
+  }
+}
+
+@breakpoints {
+  .rt-AvatarRoot {
+    &:where(.rt-r-size-1) {
+      --avatar-size: var(--space-5);
+      --avatar-fallback-one-letter-font-size: var(--font-size-2);
+      --avatar-fallback-two-letters-font-size: var(--font-size-1);
+      border-radius: max(var(--radius-2), var(--radius-full));
+      letter-spacing: var(--letter-spacing-1);
+    }
+    &:where(.rt-r-size-2) {
+      --avatar-size: var(--space-6);
+      --avatar-fallback-one-letter-font-size: var(--font-size-3);
+      --avatar-fallback-two-letters-font-size: var(--font-size-2);
+      border-radius: max(var(--radius-2), var(--radius-full));
+      letter-spacing: var(--letter-spacing-2);
+    }
+    &:where(.rt-r-size-3) {
+      --avatar-size: var(--space-7);
+      --avatar-fallback-one-letter-font-size: var(--font-size-4);
+      --avatar-fallback-two-letters-font-size: var(--font-size-3);
+      border-radius: max(var(--radius-3), var(--radius-full));
+      letter-spacing: var(--letter-spacing-3);
+    }
+    &:where(.rt-r-size-4) {
+      --avatar-size: var(--space-8);
+      --avatar-fallback-one-letter-font-size: var(--font-size-5);
+      --avatar-fallback-two-letters-font-size: var(--font-size-4);
+      border-radius: max(var(--radius-3), var(--radius-full));
+      letter-spacing: var(--letter-spacing-4);
+    }
+    &:where(.rt-r-size-5) {
+      --avatar-size: var(--space-9);
+      --avatar-fallback-one-letter-font-size: var(--font-size-6);
+      border-radius: max(var(--radius-4), var(--radius-full));
+      letter-spacing: var(--letter-spacing-6);
+    }
+    &:where(.rt-r-size-6) {
+      --avatar-size: 80px;
+      --avatar-fallback-one-letter-font-size: var(--font-size-7);
+      border-radius: max(var(--radius-5), var(--radius-full));
+      letter-spacing: var(--letter-spacing-7);
+    }
+    &:where(.rt-r-size-7) {
+      --avatar-size: 96px;
+      --avatar-fallback-one-letter-font-size: var(--font-size-7);
+      border-radius: max(var(--radius-5), var(--radius-full));
+      letter-spacing: var(--letter-spacing-7);
+    }
+    &:where(.rt-r-size-8) {
+      --avatar-size: 128px;
+      --avatar-fallback-one-letter-font-size: var(--font-size-8);
+      border-radius: max(var(--radius-6), var(--radius-full));
+      letter-spacing: var(--letter-spacing-8);
+    }
+    &:where(.rt-r-size-9) {
+      --avatar-size: 160px;
+      --avatar-fallback-one-letter-font-size: var(--font-size-9);
+      border-radius: max(var(--radius-6), var(--radius-full));
+      letter-spacing: var(--letter-spacing-9);
+    }
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * VARIANTS                                                                                        *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+/* solid */
+
+.rt-AvatarRoot:where(.rt-variant-solid) {
+  & :where(.rt-AvatarFallback) {
+    background-color: var(--accent-9);
+    color: var(--accent-contrast);
+  }
+  &:where(.rt-high-contrast) :where(.rt-AvatarFallback) {
+    background-color: var(--accent-12);
+    color: var(--accent-1);
+  }
+}
+
+/* soft */
+
+.rt-AvatarRoot:where(.rt-variant-soft) {
+  & :where(.rt-AvatarFallback) {
+    background-color: var(--accent-a3);
+    color: var(--accent-a11);
+  }
+  &:where(.rt-high-contrast) :where(.rt-AvatarFallback) {
+    color: var(--accent-12);
+  }
+}

package/src/components/avatar.props.tsx

@@ -0,0 +1,25 @@
+import { asChildPropDef } from '../props/as-child.prop.js';
+import { accentColorPropDef } from '../props/color.prop.js';
+import { highContrastPropDef } from '../props/high-contrast.prop.js';
+import { radiusPropDef } from '../props/radius.prop.js';
+
+import type { PropDef } from '../props/prop-def.js';
+
+const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
+const variants = ['solid', 'soft'] as const;
+
+const avatarPropDefs = {
+  ...asChildPropDef,
+  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '3', responsive: true },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'soft' },
+  ...accentColorPropDef,
+  ...highContrastPropDef,
+  ...radiusPropDef,
+  fallback: { type: 'ReactNode', required: true },
+} satisfies {
+  size: PropDef<(typeof sizes)[number]>;
+  variant: PropDef<(typeof variants)[number]>;
+  fallback: PropDef<React.ReactNode>;
+};
+
+export { avatarPropDefs };

package/src/components/avatar.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import * as React from 'react';
+import classNames from 'classnames';
+import { Avatar as AvatarPrimitive } from 'radix-ui';
+
+import { avatarPropDefs } from './avatar.props.js';
+import { extractProps } from '../helpers/extract-props.js';
+import { getSubtree } from '../helpers/get-subtree.js';
+import { marginPropDefs } from '../props/margin.props.js';
+
+import type { MarginProps } from '../props/margin.props.js';
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
+import type { GetPropDefTypes } from '../props/prop-def.js';
+
+interface AvatarProps extends MarginProps, AvatarImplProps {}
+const Avatar = React.forwardRef<AvatarImplElement, AvatarProps>((props, forwardedRef) => {
+  const { asChild, children, className, style, color, radius, ...imageProps } = extractProps(
+    props,
+    avatarPropDefs,
+    marginPropDefs
+  );
+
+  return (
+    // TODO as a rule, should we rather spread the props on root?
+    <AvatarPrimitive.Root
+      data-accent-color={color}
+      data-radius={radius}
+      className={classNames('rt-reset', 'rt-AvatarRoot', className)}
+      style={style}
+      asChild={asChild}
+    >
+      {getSubtree({ asChild, children }, <AvatarImpl ref={forwardedRef} {...imageProps} />)}
+    </AvatarPrimitive.Root>
+  );
+});
+Avatar.displayName = 'Avatar';
+
+type AvatarImplElement = React.ElementRef<typeof AvatarPrimitive.Image>;
+type AvatarOwnProps = GetPropDefTypes<typeof avatarPropDefs>;
+
+interface AvatarImplProps
+  extends ComponentPropsWithout<typeof AvatarPrimitive.Image, RemovedProps>,
+    AvatarOwnProps {
+  // TODO: See if we can automate making prop defs with `required: true` non nullable
+  fallback: NonNullable<AvatarOwnProps['fallback']>;
+}
+
+const AvatarImpl = React.forwardRef<AvatarImplElement, AvatarImplProps>(
+  ({ fallback, ...imageProps }, forwardedRef) => {
+    const [status, setStatus] = React.useState<'idle' | 'loading' | 'loaded' | 'error'>('idle');
+    return (
+      <>
+        {status === 'idle' || status === 'loading' ? <span className="rt-AvatarFallback" /> : null}
+
+        {status === 'error' ? (
+          <AvatarPrimitive.Fallback
+            className={classNames('rt-AvatarFallback', {
+              'rt-one-letter': typeof fallback === 'string' && fallback.length === 1,
+              'rt-two-letters': typeof fallback === 'string' && fallback.length === 2,
+            })}
+            delayMs={0}
+          >
+            {fallback}
+          </AvatarPrimitive.Fallback>
+        ) : null}
+
+        <AvatarPrimitive.Image
+          ref={forwardedRef}
+          className="rt-AvatarImage"
+          {...imageProps}
+          onLoadingStatusChange={(status) => {
+            imageProps.onLoadingStatusChange?.(status);
+            setStatus(status);
+          }}
+        />
+      </>
+    );
+  }
+);
+
+AvatarImpl.displayName = 'AvatarImpl';
+
+export { Avatar };
+export type { AvatarProps };

package/src/components/badge.css

@@ -0,0 +1,109 @@
+.rt-Badge {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  font-family: var(--default-font-family);
+  font-weight: var(--font-weight-medium);
+  font-style: normal;
+  flex-shrink: 0;
+  line-height: 1;
+
+  /* Make sure that the height is not stretched in a Flex/Grid layout */
+  height: fit-content;
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * SIZES                                                                                           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+@breakpoints {
+  .rt-Badge {
+    &:where(.rt-r-size-1) {
+      font-size: var(--font-size-1);
+      line-height: var(--line-height-1);
+      letter-spacing: var(--letter-spacing-1);
+      padding: calc(var(--space-1) * 0.5) calc(var(--space-1) * 1.5);
+      gap: calc(var(--space-1) * 1.5);
+      border-radius: max(var(--radius-1), var(--radius-full));
+    }
+    &:where(.rt-r-size-2) {
+      font-size: var(--font-size-1);
+      line-height: var(--line-height-1);
+      letter-spacing: var(--letter-spacing-1);
+      padding: var(--space-1) var(--space-2);
+      gap: calc(var(--space-1) * 1.5);
+      border-radius: max(var(--radius-2), var(--radius-full));
+    }
+    &:where(.rt-r-size-3) {
+      font-size: var(--font-size-2);
+      line-height: var(--line-height-2);
+      letter-spacing: var(--letter-spacing-2);
+      padding: var(--space-1) calc(var(--space-2) * 1.25);
+      gap: var(--space-2);
+      border-radius: max(var(--radius-2), var(--radius-full));
+    }
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * VARIANTS                                                                                        *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+/* solid */
+
+.rt-Badge:where(.rt-variant-solid) {
+  background-color: var(--accent-9);
+  color: var(--accent-contrast);
+
+  &::selection {
+    background-color: var(--accent-7);
+    color: var(--accent-12);
+  }
+
+  &:where(.rt-high-contrast) {
+    background-color: var(--accent-12);
+    color: var(--accent-1);
+
+    &::selection {
+      background-color: var(--accent-a11);
+      color: var(--accent-1);
+    }
+  }
+}
+
+/* surface */
+
+.rt-Badge:where(.rt-variant-surface) {
+  background-color: var(--accent-surface);
+  box-shadow: inset 0 0 0 1px var(--accent-a6);
+  color: var(--accent-a11);
+
+  &:where(.rt-high-contrast) {
+    color: var(--accent-12);
+  }
+}
+
+/* soft */
+
+.rt-Badge:where(.rt-variant-soft) {
+  background-color: var(--accent-a3);
+  color: var(--accent-a11);
+  &:where(.rt-high-contrast) {
+    color: var(--accent-12);
+  }
+}
+
+/* outline */
+
+.rt-Badge:where(.rt-variant-outline) {
+  box-shadow: inset 0 0 0 1px var(--accent-a8);
+  color: var(--accent-a11);
+  &:where(.rt-high-contrast) {
+    box-shadow: inset 0 0 0 1px var(--accent-a7), inset 0 0 0 1px var(--gray-a11);
+    color: var(--accent-12);
+  }
+}

package/src/components/badge.props.tsx

@@ -0,0 +1,23 @@
+import { asChildPropDef } from '../props/as-child.prop.js';
+import { accentColorPropDef } from '../props/color.prop.js';
+import { highContrastPropDef } from '../props/high-contrast.prop.js';
+import { radiusPropDef } from '../props/radius.prop.js';
+
+import type { PropDef } from '../props/prop-def.js';
+
+const sizes = ['1', '2', '3'] as const;
+const variants = ['solid', 'soft', 'surface', 'outline'] as const;
+
+const badgePropDefs = {
+  ...asChildPropDef,
+  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'soft' },
+  ...accentColorPropDef,
+  ...highContrastPropDef,
+  ...radiusPropDef,
+} satisfies {
+  size: PropDef<(typeof sizes)[number]>;
+  variant: PropDef<(typeof variants)[number]>;
+};
+
+export { badgePropDefs };

package/src/components/badge.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Slot } from 'radix-ui';
+
+import { badgePropDefs } from './badge.props.js';
+import { extractProps } from '../helpers/extract-props.js';
+import { marginPropDefs } from '../props/margin.props.js';
+
+import type { MarginProps } from '../props/margin.props.js';
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
+import type { GetPropDefTypes } from '../props/prop-def.js';
+
+type BadgeElement = React.ElementRef<'span'>;
+type BadgeOwnProps = GetPropDefTypes<typeof badgePropDefs>;
+interface BadgeProps
+  extends ComponentPropsWithout<'span', RemovedProps>,
+    MarginProps,
+    BadgeOwnProps {}
+const Badge = React.forwardRef<BadgeElement, BadgeProps>((props, forwardedRef) => {
+  const { asChild, className, color, radius, ...badgeProps } = extractProps(
+    props,
+    badgePropDefs,
+    marginPropDefs
+  );
+  const Comp = asChild ? Slot.Root : 'span';
+  return (
+    <Comp
+      data-accent-color={color}
+      data-radius={radius}
+      {...badgeProps}
+      ref={forwardedRef}
+      className={classNames('rt-reset', 'rt-Badge', className)}
+    />
+  );
+});
+Badge.displayName = 'Badge';
+
+export { Badge };
+export type { BadgeProps };