@kushagradhawan/kookie-ui 0.1.0

package/src/components/checkbox-group.primitive.tsx

@@ -0,0 +1,208 @@
+'use client';
+
+import * as React from 'react';
+import { Checkbox as CheckboxPrimitive, Direction } from 'radix-ui';
+import {
+  Context,
+  Primitive,
+  useComposedRefs,
+  RovingFocus,
+  useControllableState,
+} from 'radix-ui/internal';
+
+const { useDirection } = Direction;
+
+/* -------------------------------------------------------------------------------------------------
+ * CheckboxGroup
+ * -----------------------------------------------------------------------------------------------*/
+const CHECKBOX_GROUP_NAME = 'CheckboxGroup';
+
+type ScopedProps<P> = P & { __scopeCheckboxGroup?: Context.Scope };
+const [createCheckboxGroupContext, createCheckboxGroupScope] = Context.createContextScope(
+  CHECKBOX_GROUP_NAME,
+  [RovingFocus.createRovingFocusGroupScope, CheckboxPrimitive.createCheckboxScope]
+);
+const useRovingFocusGroupScope = RovingFocus.createRovingFocusGroupScope();
+const useCheckboxScope = CheckboxPrimitive.createCheckboxScope();
+
+type CheckboxGroupContextValue = {
+  name?: string;
+  required: boolean;
+  disabled: boolean;
+  value?: string[];
+  onItemCheck(value: string): void;
+  onItemUncheck(value: string): void;
+};
+
+const [CheckboxGroupProvider, useCheckboxGroupContext] =
+  createCheckboxGroupContext<CheckboxGroupContextValue>(CHECKBOX_GROUP_NAME);
+
+type CheckboxGroupElement = React.ElementRef<typeof Primitive.div>;
+type RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocus.Root>;
+type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
+interface CheckboxGroupProps extends PrimitiveDivProps {
+  name?: CheckboxGroupContextValue['name'];
+  required?: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>['required'];
+  disabled?: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>['disabled'];
+  dir?: RovingFocusGroupProps['dir'];
+  orientation?: RovingFocusGroupProps['orientation'];
+  loop?: RovingFocusGroupProps['loop'];
+  defaultValue?: string[];
+  value?: CheckboxGroupContextValue['value'];
+  onValueChange?: (value: string[]) => void;
+}
+
+const CheckboxGroup = React.forwardRef<CheckboxGroupElement, CheckboxGroupProps>(
+  (props: ScopedProps<CheckboxGroupProps>, forwardedRef) => {
+    const {
+      __scopeCheckboxGroup,
+      name,
+      defaultValue,
+      value: valueProp,
+      required = false,
+      disabled = false,
+      orientation,
+      dir,
+      loop = true,
+      onValueChange,
+      ...groupProps
+    } = props;
+    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeCheckboxGroup);
+    const direction = useDirection(dir);
+    const [value = [], setValue] = useControllableState({
+      prop: valueProp,
+      defaultProp: defaultValue,
+      onChange: onValueChange,
+    });
+
+    const handleItemCheck = React.useCallback(
+      (itemValue: string) => setValue((prevValue = []) => [...prevValue, itemValue]),
+      [setValue]
+    );
+
+    const handleItemUncheck = React.useCallback(
+      (itemValue: string) =>
+        setValue((prevValue = []) => prevValue.filter((value) => value !== itemValue)),
+      [setValue]
+    );
+
+    return (
+      <CheckboxGroupProvider
+        scope={__scopeCheckboxGroup}
+        name={name}
+        required={required}
+        disabled={disabled}
+        value={value}
+        onItemCheck={handleItemCheck}
+        onItemUncheck={handleItemUncheck}
+      >
+        <RovingFocus.Root
+          asChild
+          {...rovingFocusGroupScope}
+          orientation={orientation}
+          dir={direction}
+          loop={loop}
+        >
+          <Primitive.div
+            role="group"
+            data-disabled={disabled ? '' : undefined}
+            dir={direction}
+            {...groupProps}
+            ref={forwardedRef}
+          />
+        </RovingFocus.Root>
+      </CheckboxGroupProvider>
+    );
+  }
+);
+
+CheckboxGroup.displayName = CHECKBOX_GROUP_NAME;
+
+/* -------------------------------------------------------------------------------------------------
+ * CheckboxGroupItem
+ * -----------------------------------------------------------------------------------------------*/
+
+const ITEM_NAME = 'CheckboxGroupItem';
+
+type CheckboxGroupItemElement = React.ElementRef<typeof CheckboxPrimitive.Root>;
+type CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;
+interface CheckboxGroupItemProps
+  extends Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'onCheckedChange' | 'name'> {
+  value: string;
+}
+
+const CheckboxGroupItem = React.forwardRef<CheckboxGroupItemElement, CheckboxGroupItemProps>(
+  (props: ScopedProps<CheckboxGroupItemProps>, forwardedRef) => {
+    const { __scopeCheckboxGroup, disabled, ...itemProps } = props;
+    const context = useCheckboxGroupContext(ITEM_NAME, __scopeCheckboxGroup);
+    const isDisabled = context.disabled || disabled;
+    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeCheckboxGroup);
+    const checkboxScope = useCheckboxScope(__scopeCheckboxGroup);
+    const ref = React.useRef<React.ElementRef<typeof CheckboxPrimitive.Root>>(null);
+    const composedRefs = useComposedRefs(forwardedRef, ref);
+    const checked = context.value?.includes(itemProps.value);
+
+    return (
+      <RovingFocus.Item asChild {...rovingFocusGroupScope} focusable={!isDisabled} active={checked}>
+        <CheckboxPrimitive.Root
+          name={context.name}
+          disabled={isDisabled}
+          required={context.required}
+          checked={checked}
+          {...checkboxScope}
+          {...itemProps}
+          ref={composedRefs}
+          onCheckedChange={(checked) => {
+            if (checked) {
+              context.onItemCheck(props.value);
+            } else {
+              context.onItemUncheck(props.value);
+            }
+          }}
+        />
+      </RovingFocus.Item>
+    );
+  }
+);
+
+CheckboxGroupItem.displayName = ITEM_NAME;
+
+/* -------------------------------------------------------------------------------------------------
+ * CheckboxGroupIndicator
+ * -----------------------------------------------------------------------------------------------*/
+
+const INDICATOR_NAME = 'CheckboxGroupIndicator';
+
+type CheckboxGroupIndicatorElement = React.ElementRef<typeof CheckboxPrimitive.Indicator>;
+type CheckboxIndicatorProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Indicator>;
+interface CheckboxGroupIndicatorProps extends CheckboxIndicatorProps {}
+
+const CheckboxGroupIndicator = React.forwardRef<
+  CheckboxGroupIndicatorElement,
+  CheckboxGroupIndicatorProps
+>((props: ScopedProps<CheckboxGroupIndicatorProps>, forwardedRef) => {
+  const { __scopeCheckboxGroup, ...indicatorProps } = props;
+  const checkboxScope = useCheckboxScope(__scopeCheckboxGroup);
+  return <CheckboxPrimitive.Indicator {...checkboxScope} {...indicatorProps} ref={forwardedRef} />;
+});
+
+CheckboxGroupIndicator.displayName = INDICATOR_NAME;
+
+/* ---------------------------------------------------------------------------------------------- */
+
+const Root = CheckboxGroup;
+const Item = CheckboxGroupItem;
+const Indicator = CheckboxGroupIndicator;
+
+export {
+  createCheckboxGroupScope,
+  //
+  CheckboxGroup,
+  CheckboxGroupItem,
+  CheckboxGroupIndicator,
+  //
+  Root,
+  Item,
+  Indicator,
+};
+export type { CheckboxGroupProps, CheckboxGroupItemProps, CheckboxGroupIndicatorProps };

package/src/components/checkbox-group.props.tsx

@@ -0,0 +1,9 @@
+import { asChildPropDef } from '../props/as-child.prop.js';
+import { baseCheckboxPropDefs } from './_internal/base-checkbox.props.js';
+
+const checkboxGroupRootPropDefs = {
+  ...asChildPropDef,
+  ...baseCheckboxPropDefs,
+};
+
+export { checkboxGroupRootPropDefs };

package/src/components/checkbox-group.tsx

@@ -0,0 +1,156 @@
+'use client';
+
+import * as React from 'react';
+import classNames from 'classnames';
+import { Context } from 'radix-ui/internal';
+
+import * as CheckboxGroupPrimitive from './checkbox-group.primitive.js';
+import { createCheckboxGroupScope } from './checkbox-group.primitive.js';
+import { checkboxGroupRootPropDefs } from './checkbox-group.props.js';
+import { ThickCheckIcon } from './icons.js';
+import { Text } from './text.js';
+import { extractProps } from '../helpers/extract-props.js';
+import { marginPropDefs } from '../props/margin.props.js';
+
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
+import type { MarginProps } from '../props/margin.props.js';
+import type { GetPropDefTypes } from '../props/prop-def.js';
+
+const CHECKBOX_GROUP_NAME = 'CheckboxGroup';
+
+type ScopedProps<P> = P & { __scopeCheckboxGroup?: Context.Scope };
+const [createCheckboxGroupContext] = Context.createContextScope(CHECKBOX_GROUP_NAME, [
+  createCheckboxGroupScope,
+]);
+const useCheckboxGroupScope = createCheckboxGroupScope();
+
+type CheckboxGroupRootOwnProps = GetPropDefTypes<typeof checkboxGroupRootPropDefs>;
+type CheckboxGroupContextValue = CheckboxGroupRootOwnProps;
+
+const [CheckboxGroupProvider, useCheckboxGroupContext] =
+  createCheckboxGroupContext<CheckboxGroupContextValue>(CHECKBOX_GROUP_NAME);
+
+type CheckboxGroupRootElement = React.ElementRef<typeof CheckboxGroupPrimitive.Root>;
+interface CheckboxGroupRootProps
+  extends ComponentPropsWithout<
+      typeof CheckboxGroupPrimitive.Root,
+      'asChild' | 'color' | 'defaultChecked'
+    >,
+    MarginProps,
+    CheckboxGroupRootOwnProps {}
+const CheckboxGroupRoot = React.forwardRef<CheckboxGroupRootElement, CheckboxGroupRootProps>(
+  (
+    {
+      color = checkboxGroupRootPropDefs.color.default,
+      highContrast = checkboxGroupRootPropDefs.highContrast.default,
+      size = checkboxGroupRootPropDefs.size.default,
+      variant = checkboxGroupRootPropDefs.variant.default,
+      ...props
+    }: ScopedProps<CheckboxGroupRootProps>,
+    forwardedRef
+  ) => {
+    const { __scopeCheckboxGroup, className, ...rootProps } = extractProps(props, marginPropDefs);
+    const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxGroup);
+    return (
+      <CheckboxGroupProvider
+        scope={__scopeCheckboxGroup}
+        color={color}
+        size={size}
+        highContrast={highContrast}
+        variant={variant}
+      >
+        <CheckboxGroupPrimitive.Root
+          {...checkboxGroupScope}
+          {...rootProps}
+          ref={forwardedRef}
+          className={classNames('rt-CheckboxGroupRoot', className)}
+        />
+      </CheckboxGroupProvider>
+    );
+  }
+);
+CheckboxGroupRoot.displayName = 'CheckboxGroup.Root';
+
+type CheckboxGroupItemElement = React.ElementRef<typeof CheckboxGroupPrimitive.Item>;
+interface CheckboxGroupItemProps
+  extends ComponentPropsWithout<typeof CheckboxGroupPrimitive.Item, RemovedProps>,
+    MarginProps {}
+const CheckboxGroupItem = React.forwardRef<CheckboxGroupItemElement, CheckboxGroupItemProps>(
+  (_props: ScopedProps<CheckboxGroupItemProps>, forwardedRef) => {
+    const { __scopeCheckboxGroup, children, className, style, ...props } = _props;
+    const { size } = useCheckboxGroupContext('CheckboxGroupItem', __scopeCheckboxGroup);
+
+    // Render `<Text as="label">` if children are provided, otherwise render
+    // the solo checkbox to allow building out your custom layouts with it.
+    if (children) {
+      return (
+        <Text
+          as="label"
+          size={size}
+          className={classNames('rt-CheckboxGroupItem', className)}
+          style={style}
+        >
+          <CheckboxGroupItemCheckbox
+            __scopeCheckboxGroup={__scopeCheckboxGroup}
+            {...props}
+            ref={forwardedRef}
+          />
+          {children && <span className="rt-CheckboxGroupItemInner">{children}</span>}
+        </Text>
+      );
+    }
+
+    return (
+      <CheckboxGroupItemCheckbox
+        __scopeCheckboxGroup={__scopeCheckboxGroup}
+        {...props}
+        ref={forwardedRef}
+        className={className}
+        style={style}
+      />
+    );
+  }
+);
+CheckboxGroupItem.displayName = 'CheckboxGroup.Item';
+
+type CheckboxGroupItemCheckboxElement = React.ElementRef<typeof CheckboxGroupPrimitive.Item>;
+interface CheckboxGroupItemCheckboxProps
+  extends ComponentPropsWithout<typeof CheckboxGroupPrimitive.Item, RemovedProps> {}
+const CheckboxGroupItemCheckbox = React.forwardRef<
+  CheckboxGroupItemCheckboxElement,
+  ScopedProps<CheckboxGroupItemCheckboxProps>
+>(({ __scopeCheckboxGroup, ...props }, forwardedRef) => {
+  const context = useCheckboxGroupContext('CheckboxGroupItemCheckbox', __scopeCheckboxGroup);
+  const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxGroup);
+  const { color, className } = extractProps(
+    { ...props, ...context },
+    checkboxGroupRootPropDefs,
+    marginPropDefs
+  );
+  return (
+    <CheckboxGroupPrimitive.Item
+      {...checkboxGroupScope}
+      data-accent-color={color}
+      {...props}
+      ref={forwardedRef}
+      className={classNames(
+        'rt-reset',
+        'rt-BaseCheckboxRoot',
+        'rt-CheckboxGroupItemCheckbox',
+        className
+      )}
+    >
+      <CheckboxGroupPrimitive.Indicator
+        {...checkboxGroupScope}
+        asChild
+        className="rt-BaseCheckboxIndicator"
+      >
+        <ThickCheckIcon />
+      </CheckboxGroupPrimitive.Indicator>
+    </CheckboxGroupPrimitive.Item>
+  );
+});
+CheckboxGroupItemCheckbox.displayName = 'CheckboxGroup.ItemCheckbox';
+
+export { CheckboxGroupRoot as Root, CheckboxGroupItem as Item };
+export type { CheckboxGroupRootProps as RootProps, CheckboxGroupItemProps as ItemProps };

package/src/components/checkbox.css

@@ -0,0 +1,18 @@
+@import './_internal/base-checkbox.css';
+
+.rt-CheckboxRoot {
+  &:where(:focus-visible) {
+    &::before {
+      outline: 2px solid var(--focus-8);
+      outline-offset: 2px;
+    }
+  }
+
+  &:where(:disabled) {
+    cursor: var(--cursor-disabled);
+
+    &::before {
+      background-color: var(--gray-a3);
+    }
+  }
+}

package/src/components/checkbox.props.tsx

@@ -0,0 +1 @@
+export { baseCheckboxPropDefs as checkboxPropDefs } from './_internal/base-checkbox.props.js';

package/src/components/checkbox.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import * as React from 'react';
+import classNames from 'classnames';
+import { Checkbox as CheckboxPrimitive } from 'radix-ui';
+import { useControllableState } from 'radix-ui/internal';
+
+import { checkboxPropDefs } from './checkbox.props.js';
+import { ThickCheckIcon, ThickDividerHorizontalIcon } from './icons.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 } from '../helpers/component-props.js';
+import type { GetPropDefTypes } from '../props/prop-def.js';
+
+type CheckboxElement = React.ElementRef<typeof CheckboxPrimitive.Root>;
+type CheckboxOwnProps = GetPropDefTypes<typeof checkboxPropDefs>;
+interface CheckboxProps
+  extends ComponentPropsWithout<
+      typeof CheckboxPrimitive.Root,
+      'asChild' | 'color' | 'defaultValue' | 'children'
+    >,
+    MarginProps,
+    CheckboxOwnProps {}
+const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>((props, forwardedRef) => {
+  const {
+    className,
+    color,
+    checked: checkedProp,
+    defaultChecked: defaultCheckedProp,
+    onCheckedChange,
+    ...checkboxProps
+  } = extractProps(props, checkboxPropDefs, marginPropDefs);
+
+  const [checked, setChecked] = useControllableState({
+    prop: checkedProp,
+    defaultProp: defaultCheckedProp,
+    onChange: onCheckedChange,
+  });
+
+  return (
+    <CheckboxPrimitive.Root
+      data-accent-color={color}
+      {...checkboxProps}
+      defaultChecked={defaultCheckedProp}
+      checked={checked}
+      onCheckedChange={setChecked}
+      asChild={false}
+      ref={forwardedRef}
+      className={classNames('rt-reset', 'rt-BaseCheckboxRoot', 'rt-CheckboxRoot', className)}
+    >
+      <CheckboxPrimitive.Indicator
+        asChild
+        className="rt-BaseCheckboxIndicator rt-CheckboxIndicator"
+      >
+        {checked === 'indeterminate' ? <ThickDividerHorizontalIcon /> : <ThickCheckIcon />}
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+});
+Checkbox.displayName = 'Checkbox';
+
+export { Checkbox };
+export type { CheckboxProps };

package/src/components/code.css

@@ -0,0 +1,185 @@
+/* stylelint-disable selector-max-type */
+/* Disable selector-max-type rule to target individual element types. */
+
+.rt-Code {
+  --code-variant-font-size-adjust: calc(var(--code-font-size-adjust) * 0.95);
+  font-family: var(--code-font-family);
+  font-size: calc(var(--code-variant-font-size-adjust) * 1em);
+  font-style: var(--code-font-style);
+  font-weight: var(--code-font-weight);
+  line-height: 1.25;
+  letter-spacing: calc(var(--code-letter-spacing) + var(--letter-spacing, var(--default-letter-spacing)));
+  border-radius: calc((0.5px + 0.2em) * var(--radius-factor));
+
+  box-sizing: border-box;
+  padding-top: var(--code-padding-top);
+  padding-left: var(--code-padding-left);
+  padding-bottom: var(--code-padding-bottom);
+  padding-right: var(--code-padding-right);
+
+  /* Make sure that the height is not stretched in a Flex/Grid layout */
+  height: fit-content;
+
+  & :where(&) {
+    font-size: inherit;
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * SIZES                                                                                           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+@breakpoints {
+  .rt-Code {
+    &:where(.rt-r-size-1) {
+      font-size: calc(var(--font-size-1) * var(--code-variant-font-size-adjust));
+      line-height: var(--line-height-1);
+      --letter-spacing: var(--letter-spacing-1);
+    }
+    &:where(.rt-r-size-2) {
+      font-size: calc(var(--font-size-2) * var(--code-variant-font-size-adjust));
+      line-height: var(--line-height-2);
+      --letter-spacing: var(--letter-spacing-2);
+    }
+    &:where(.rt-r-size-3) {
+      font-size: calc(var(--font-size-3) * var(--code-variant-font-size-adjust));
+      line-height: var(--line-height-3);
+      --letter-spacing: var(--letter-spacing-3);
+    }
+    &:where(.rt-r-size-4) {
+      font-size: calc(var(--font-size-4) * var(--code-variant-font-size-adjust));
+      line-height: var(--line-height-4);
+      --letter-spacing: var(--letter-spacing-4);
+    }
+    &:where(.rt-r-size-5) {
+      font-size: calc(var(--font-size-5) * var(--code-variant-font-size-adjust));
+      line-height: var(--line-height-5);
+      --letter-spacing: var(--letter-spacing-5);
+    }
+    &:where(.rt-r-size-6) {
+      font-size: calc(var(--font-size-6) * var(--code-variant-font-size-adjust));
+      line-height: var(--line-height-6);
+      --letter-spacing: var(--letter-spacing-6);
+    }
+    &:where(.rt-r-size-7) {
+      font-size: calc(var(--font-size-7) * var(--code-variant-font-size-adjust));
+      line-height: var(--line-height-7);
+      --letter-spacing: var(--letter-spacing-7);
+    }
+    &:where(.rt-r-size-8) {
+      font-size: calc(var(--font-size-8) * var(--code-variant-font-size-adjust));
+      line-height: var(--line-height-8);
+      --letter-spacing: var(--letter-spacing-8);
+    }
+    &:where(.rt-r-size-9) {
+      font-size: calc(var(--font-size-9) * var(--code-variant-font-size-adjust));
+      line-height: var(--line-height-9);
+      --letter-spacing: var(--letter-spacing-9);
+    }
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * VARIANTS                                                                                        *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+/* ghost */
+
+.rt-Code:where(.rt-variant-ghost) {
+  --code-variant-font-size-adjust: var(--code-font-size-adjust);
+  padding: 0;
+
+  &:where([data-accent-color]) {
+    color: var(--accent-a11);
+  }
+
+  &:where([data-accent-color].rt-high-contrast),
+  :where([data-accent-color]:not(.radix-themes)) &:where(.rt-high-contrast) {
+    color: var(--accent-12);
+  }
+}
+
+/* solid */
+
+.rt-Code:where(.rt-variant-solid) {
+  background-color: var(--accent-a9);
+  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);
+    }
+  }
+
+  :where(.rt-Link) &,
+  &:where(:any-link, button) {
+    /* Create a new stacking context (otherwise, `filter` may do it on hover) */
+    isolation: isolate;
+    @media (hover: hover) {
+      &:where(:hover) {
+        background-color: var(--accent-10);
+      }
+      &:where(.rt-high-contrast:hover) {
+        background-color: var(--accent-12);
+        /* Re-use base button hover filter */
+        filter: var(--base-button-solid-high-contrast-hover-filter);
+      }
+    }
+  }
+}
+
+/* soft */
+
+.rt-Code:where(.rt-variant-soft) {
+  background-color: var(--accent-a3);
+  color: var(--accent-a11);
+
+  &:where(.rt-high-contrast) {
+    color: var(--accent-12);
+  }
+
+  :where(.rt-Link) &,
+  &:where(:any-link, button) {
+    isolation: isolate;
+    @media (hover: hover) {
+      &:where(:hover) {
+        background-color: var(--accent-a4);
+      }
+    }
+  }
+}
+
+/* outline */
+
+.rt-Code:where(.rt-variant-outline) {
+  box-shadow: inset 0 0 0 max(1px, 0.033em) var(--accent-a8);
+  color: var(--accent-a11);
+
+  &:where(.rt-high-contrast) {
+    box-shadow: inset 0 0 0 max(1px, 0.033em) var(--accent-a7), inset 0 0 0 max(1px, 0.033em) var(--gray-a11);
+    color: var(--accent-12);
+  }
+
+  :where(.rt-Link) &,
+  &:where(:any-link, button) {
+    isolation: isolate;
+    @media (hover: hover) {
+      &:where(:hover) {
+        background-color: var(--accent-a2);
+      }
+    }
+  }
+}

package/src/components/code.props.tsx

@@ -0,0 +1,32 @@
+import { asChildPropDef } from '../props/as-child.prop.js';
+import { accentColorPropDef } from '../props/color.prop.js';
+import { highContrastPropDef } from '../props/high-contrast.prop.js';
+import { textWrapPropDef } from '../props/text-wrap.prop.js';
+import { truncatePropDef } from '../props/truncate.prop.js';
+import { weightPropDef } from '../props/weight.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', 'outline', 'ghost'] as const;
+
+const codePropDefs = {
+  ...asChildPropDef,
+  size: {
+    type: 'enum',
+    className: 'rt-r-size',
+    values: sizes,
+    responsive: true,
+  },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'soft' },
+  ...weightPropDef,
+  ...accentColorPropDef,
+  ...highContrastPropDef,
+  ...truncatePropDef,
+  ...textWrapPropDef,
+} satisfies {
+  size: PropDef<(typeof sizes)[number]>;
+  variant: PropDef<(typeof variants)[number]>;
+};
+
+export { codePropDefs };