@kushagradhawan/kookie-ui 0.1.0

package/src/components/icons.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
+
+type IconElement = React.ElementRef<'svg'>;
+interface IconProps extends ComponentPropsWithout<'svg', RemovedProps | 'children'> {}
+
+const ThickDividerHorizontalIcon = React.forwardRef<IconElement, IconProps>(
+  (props, forwardedRef) => {
+    return (
+      <svg
+        width="9"
+        height="9"
+        viewBox="0 0 9 9"
+        fill="currentcolor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M0.75 4.5C0.75 4.08579 1.08579 3.75 1.5 3.75H7.5C7.91421 3.75 8.25 4.08579 8.25 4.5C8.25 4.91421 7.91421 5.25 7.5 5.25H1.5C1.08579 5.25 0.75 4.91421 0.75 4.5Z"
+        />
+      </svg>
+    );
+  }
+);
+
+ThickDividerHorizontalIcon.displayName = 'ThickDividerHorizontalIcon';
+
+const ThickCheckIcon = React.forwardRef<IconElement, IconProps>((props, forwardedRef) => {
+  return (
+    <svg
+      width="9"
+      height="9"
+      viewBox="0 0 9 9"
+      fill="currentcolor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      ref={forwardedRef}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.53547 0.62293C8.88226 0.849446 8.97976 1.3142 8.75325 1.66099L4.5083 8.1599C4.38833 8.34356 4.19397 8.4655 3.9764 8.49358C3.75883 8.52167 3.53987 8.45309 3.3772 8.30591L0.616113 5.80777C0.308959 5.52987 0.285246 5.05559 0.563148 4.74844C0.84105 4.44128 1.31533 4.41757 1.62249 4.69547L3.73256 6.60459L7.49741 0.840706C7.72393 0.493916 8.18868 0.396414 8.53547 0.62293Z"
+      />
+    </svg>
+  );
+});
+ThickCheckIcon.displayName = 'ThickCheckIcon';
+
+const ChevronDownIcon = React.forwardRef<IconElement, IconProps>((props, forwardedRef) => {
+  return (
+    <svg
+      width="9"
+      height="9"
+      viewBox="0 0 9 9"
+      fill="currentcolor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      ref={forwardedRef}
+    >
+      <path d="M0.135232 3.15803C0.324102 2.95657 0.640521 2.94637 0.841971 3.13523L4.5 6.56464L8.158 3.13523C8.3595 2.94637 8.6759 2.95657 8.8648 3.15803C9.0536 3.35949 9.0434 3.67591 8.842 3.86477L4.84197 7.6148C4.64964 7.7951 4.35036 7.7951 4.15803 7.6148L0.158031 3.86477C-0.0434285 3.67591 -0.0536285 3.35949 0.135232 3.15803Z" />
+    </svg>
+  );
+});
+ChevronDownIcon.displayName = 'ChevronDownIcon';
+
+const ThickChevronRightIcon = React.forwardRef<IconElement, IconProps>((props, forwardedRef) => {
+  return (
+    <svg
+      width="9"
+      height="9"
+      viewBox="0 0 9 9"
+      fill="currentcolor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      ref={forwardedRef}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.23826 0.201711C3.54108 -0.0809141 4.01567 -0.0645489 4.29829 0.238264L7.79829 3.98826C8.06724 4.27642 8.06724 4.72359 7.79829 5.01174L4.29829 8.76174C4.01567 9.06455 3.54108 9.08092 3.23826 8.79829C2.93545 8.51567 2.91909 8.04108 3.20171 7.73826L6.22409 4.5L3.20171 1.26174C2.91909 0.958928 2.93545 0.484337 3.23826 0.201711Z"
+      />
+    </svg>
+  );
+});
+ThickChevronRightIcon.displayName = 'ThickChevronRightIcon';
+
+export { ChevronDownIcon, ThickCheckIcon, ThickChevronRightIcon, ThickDividerHorizontalIcon };
+export type { IconProps };

package/src/components/index.css

@@ -0,0 +1,65 @@
+@import './reset.css';
+@import './animations.css';
+@import './layout.css';
+
+/* Import Skeleton before other components so that its default border-radius doesn’t have a higher specificity */
+@import './skeleton.css';
+
+/* Import Text before other components as it’s commonly extended */
+@import './text.css';
+
+@import './alert-dialog.css';
+@import './avatar.css';
+@import './badge.css';
+@import './blockquote.css';
+@import './button.css';
+@import './callout.css';
+@import './card.css';
+@import './checkbox-cards.css';
+@import './checkbox-group.css';
+@import './checkbox.css';
+@import './code.css';
+@import './context-menu.css';
+@import './data-list.css';
+@import './dialog.css';
+@import './dropdown-menu.css';
+@import './em.css';
+@import './heading.css';
+@import './hover-card.css';
+@import './icon-button.css';
+@import './inset.css';
+@import './kbd.css';
+@import './link.css';
+@import './popover.css';
+@import './progress.css';
+@import './quote.css';
+@import './radio-cards.css';
+@import './radio-group.css';
+@import './radio.css';
+@import './scroll-area.css';
+@import './segmented-control.css';
+@import './select.css';
+@import './separator.css';
+@import './slider.css';
+@import './spinner.css';
+@import './strong.css';
+@import './switch.css';
+@import './tab-nav.css';
+@import './table.css';
+@import './tabs.css';
+@import './text-area.css';
+@import './text-field.css';
+@import './theme-panel.css';
+@import './tooltip.css';
+
+.radix-themes:where([data-is-root-theme='true']) {
+  /* Create a new stacking context on the root `Theme` so layered components work out of the box */
+  position: relative;
+  z-index: 0;
+
+  /* Make sure root `Theme` background covers the viewport */
+  min-height: 100vh;
+  @supports (min-height: 100dvh) {
+    min-height: 100dvh;
+  }
+}

package/src/components/index.tsx

@@ -0,0 +1,64 @@
+export { AccessibleIcon, type AccessibleIconProps } from './accessible-icon.js';
+export * as AlertDialog from './alert-dialog.js';
+export { AspectRatio, type AspectRatioProps } from './aspect-ratio.js';
+export { Avatar, type AvatarProps } from './avatar.js';
+export { Badge, type BadgeProps } from './badge.js';
+export { Blockquote, type BlockquoteProps } from './blockquote.js';
+export { Box, type BoxProps } from './box.js';
+export { Button, type ButtonProps } from './button.js';
+export * as Callout from './callout.js';
+export { Card, type CardProps } from './card.js';
+export * as CheckboxCards from './checkbox-cards.js';
+export * as CheckboxGroup from './checkbox-group.js';
+export { Checkbox, type CheckboxProps } from './checkbox.js';
+export { Code, type CodeProps } from './code.js';
+export { Container, type ContainerProps } from './container.js';
+export * as ContextMenu from './context-menu.js';
+export * as DataList from './data-list.js';
+export * as Dialog from './dialog.js';
+export * as DropdownMenu from './dropdown-menu.js';
+export { Em, type EmProps } from './em.js';
+export { Flex, type FlexProps } from './flex.js';
+export { Grid, type GridProps } from './grid.js';
+export { Heading, type HeadingProps } from './heading.js';
+export * as HoverCard from './hover-card.js';
+export { IconButton, type IconButtonProps } from './icon-button.js';
+export {
+  type IconProps,
+  ChevronDownIcon,
+  ThickCheckIcon,
+  ThickChevronRightIcon,
+  ThickDividerHorizontalIcon,
+} from './icons.js';
+export { Inset, type InsetProps } from './inset.js';
+export { Kbd, type KbdProps } from './kbd.js';
+export { Link, type LinkProps } from './link.js';
+export * as Popover from './popover.js';
+export { Portal, type PortalProps } from './portal.js';
+export { Progress, type ProgressProps } from './progress.js';
+export { Quote, type QuoteProps } from './quote.js';
+export * as RadioCards from './radio-cards.js';
+export * as RadioGroup from './radio-group.js';
+export { Radio, type RadioProps } from './radio.js';
+export { Reset, type ResetProps } from './reset.js';
+export { ScrollArea, type ScrollAreaProps } from './scroll-area.js';
+export * as SegmentedControl from './segmented-control.js';
+export { Section, type SectionProps } from './section.js';
+export * as Select from './select.js';
+export { Separator, type SeparatorProps } from './separator.js';
+export { Skeleton, type SkeletonProps } from './skeleton.js';
+export { Slider, type SliderProps } from './slider.js';
+export { Slot, Slottable } from './slot.js';
+export { Spinner, type SpinnerProps } from './spinner.js';
+export { Strong, type StrongProps } from './strong.js';
+export { Switch, type SwitchProps } from './switch.js';
+export * as TabNav from './tab-nav.js';
+export * as Table from './table.js';
+export * as Tabs from './tabs.js';
+export { TextArea, type TextAreaProps } from './text-area.js';
+export * as TextField from './text-field.js';
+export { Text, type TextProps } from './text.js';
+export { ThemePanel, type ThemePanelProps } from './theme-panel.js';
+export { Theme, ThemeContext, type ThemeProps, useThemeContext } from './theme.js';
+export { Tooltip, type TooltipProps } from './tooltip.js';
+export { VisuallyHidden, type VisuallyHiddenProps } from './visually-hidden.js';

package/src/components/inset.css

@@ -0,0 +1,111 @@
+.rt-Inset {
+  box-sizing: border-box;
+
+  /* We reset the defined margin variables to avoid inheriting them from a higher component */
+  /* If a margin IS defined on the component itself, the utility class will win and reset it */
+  --margin-top: 0px;
+  --margin-right: 0px;
+  --margin-bottom: 0px;
+  --margin-left: 0px;
+
+  overflow: hidden;
+
+  /*
+   * Note: Next.js may collapse this into a shorthand "margin" declaration when bundling the CSS.
+   * If any of the variables are set to "initial", the shorthand syntax will become invalid and botch the Inset styles.
+   */
+  margin-top: var(--margin-top-override);
+  margin-right: var(--margin-right-override);
+  margin-bottom: var(--margin-bottom-override);
+  margin-left: var(--margin-left-override);
+
+  /* Reset the overrides on direct children */
+  :where(&) > * {
+    --margin-top-override: initial;
+    --margin-right-override: initial;
+    --margin-bottom-override: initial;
+    --margin-left-override: initial;
+  }
+}
+
+@breakpoints {
+  .rt-Inset {
+    &:where(.rt-r-clip-border-box) {
+      /* prettier-ignore */
+      --inset-border-radius-calc: calc(var(--inset-border-radius, 0px) - var(--inset-border-width, 0px));
+      --inset-padding-top-calc: var(--inset-padding-top, 0px);
+      --inset-padding-right-calc: var(--inset-padding-right, 0px);
+      --inset-padding-bottom-calc: var(--inset-padding-bottom, 0px);
+      --inset-padding-left-calc: var(--inset-padding-left, 0px);
+    }
+    /* prettier-ignore */
+    &:where(.rt-r-clip-padding-box) {
+      --inset-border-radius-calc: var(--inset-border-radius, 0px);
+      --inset-padding-top-calc: calc(var(--inset-padding-top, 0px) + var(--inset-border-width, 0px));
+      --inset-padding-right-calc: calc(var(--inset-padding-right, 0px) + var(--inset-border-width, 0px));
+      --inset-padding-bottom-calc: calc(var(--inset-padding-bottom, 0px) + var(--inset-border-width, 0px));
+      --inset-padding-left-calc: calc(var(--inset-padding-left, 0px) + var(--inset-border-width, 0px));
+    }
+    &:where(.rt-r-side-top) {
+      --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
+      --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
+      --margin-bottom-override: var(--margin-bottom);
+      --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
+      border-top-left-radius: var(--inset-border-radius-calc);
+      border-top-right-radius: var(--inset-border-radius-calc);
+      border-bottom-left-radius: 0px;
+      border-bottom-right-radius: 0px;
+    }
+    &:where(.rt-r-side-bottom) {
+      --margin-top-override: var(--margin-top);
+      --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
+      --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
+      --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
+      border-top-left-radius: 0px;
+      border-top-right-radius: 0px;
+      border-bottom-left-radius: var(--inset-border-radius-calc);
+      border-bottom-right-radius: var(--inset-border-radius-calc);
+    }
+    &:where(.rt-r-side-left) {
+      --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
+      --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
+      --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
+      --margin-right-override: var(--margin-right);
+      border-top-left-radius: var(--inset-border-radius-calc);
+      border-top-right-radius: 0px;
+      border-bottom-left-radius: var(--inset-border-radius-calc);
+      border-bottom-right-radius: 0px;
+    }
+    &:where(.rt-r-side-right) {
+      --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
+      --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
+      --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
+      --margin-left-override: var(--margin-left);
+      border-top-left-radius: 0px;
+      border-top-right-radius: var(--inset-border-radius-calc);
+      border-bottom-left-radius: 0px;
+      border-bottom-right-radius: var(--inset-border-radius-calc);
+    }
+    &:where(.rt-r-side-x) {
+      --margin-top-override: var(--margin-top);
+      --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
+      --margin-bottom-override: var(--margin-bottom);
+      --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
+      border-radius: 0px;
+    }
+    &:where(.rt-r-side-y) {
+      --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
+      --margin-right-override: var(--margin-right);
+      --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
+      --margin-left-override: var(--margin-left);
+      border-radius: 0px;
+    }
+    &:where(.rt-r-side-all) {
+      --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
+      --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
+      --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
+      --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
+      border-radius: var(--inset-border-radius-calc);
+    }
+  }
+}

package/src/components/inset.props.tsx

@@ -0,0 +1,90 @@
+import { asChildPropDef } from '../props/as-child.prop.js';
+
+import type { PropDef } from '../props/prop-def.js';
+
+const sides = ['all', 'x', 'y', 'top', 'bottom', 'left', 'right'] as const;
+const clipValues = ['border-box', 'padding-box'] as const;
+const paddingValues = ['current', '0'] as const;
+
+const insetPropDefs = {
+  ...asChildPropDef,
+  side: {
+    type: 'enum',
+    className: 'rt-r-side',
+    values: sides,
+    default: 'all',
+    responsive: true,
+  },
+  clip: {
+    type: 'enum',
+    className: 'rt-r-clip',
+    values: clipValues,
+    default: 'border-box',
+    responsive: true,
+  },
+  p: {
+    type: 'enum',
+    className: 'rt-r-p',
+    values: paddingValues,
+    parseValue: parsePaddingValue,
+    responsive: true,
+  },
+  px: {
+    type: 'enum',
+    className: 'rt-r-px',
+    values: paddingValues,
+    parseValue: parsePaddingValue,
+    responsive: true,
+  },
+  py: {
+    type: 'enum',
+    className: 'rt-r-py',
+    values: paddingValues,
+    parseValue: parsePaddingValue,
+    responsive: true,
+  },
+  pt: {
+    type: 'enum',
+    className: 'rt-r-pt',
+    values: paddingValues,
+    parseValue: parsePaddingValue,
+    responsive: true,
+  },
+  pr: {
+    type: 'enum',
+    className: 'rt-r-pr',
+    values: paddingValues,
+    parseValue: parsePaddingValue,
+    responsive: true,
+  },
+  pb: {
+    type: 'enum',
+    className: 'rt-r-pb',
+    values: paddingValues,
+    parseValue: parsePaddingValue,
+    responsive: true,
+  },
+  pl: {
+    type: 'enum',
+    className: 'rt-r-pl',
+    values: paddingValues,
+    parseValue: parsePaddingValue,
+    responsive: true,
+  },
+} satisfies {
+  side: PropDef<(typeof sides)[number]>;
+  clip: PropDef<(typeof clipValues)[number]>;
+  p: PropDef<(typeof paddingValues)[number]>;
+  px: PropDef<(typeof paddingValues)[number]>;
+  py: PropDef<(typeof paddingValues)[number]>;
+  pt: PropDef<(typeof paddingValues)[number]>;
+  pr: PropDef<(typeof paddingValues)[number]>;
+  pb: PropDef<(typeof paddingValues)[number]>;
+  pl: PropDef<(typeof paddingValues)[number]>;
+};
+
+function parsePaddingValue(value: string) {
+  return value === 'current' ? 'inset' : value;
+}
+
+export { insetPropDefs };

package/src/components/inset.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Slot } from 'radix-ui';
+
+import { insetPropDefs } from './inset.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 InsetElement = React.ElementRef<'div'>;
+type InsetOwnProps = GetPropDefTypes<typeof insetPropDefs>;
+interface InsetProps
+  extends ComponentPropsWithout<'div', RemovedProps>,
+    MarginProps,
+    InsetOwnProps {}
+
+const Inset = React.forwardRef<InsetElement, InsetProps>((props, forwardedRef) => {
+  const { asChild, className, ...insetProps } = extractProps(props, insetPropDefs, marginPropDefs);
+  const Comp = asChild ? Slot.Root : 'div';
+  return <Comp {...insetProps} ref={forwardedRef} className={classNames('rt-Inset', className)} />;
+});
+Inset.displayName = 'Inset';
+
+export { Inset };
+export type { InsetProps };

package/src/components/kbd.css

@@ -0,0 +1,130 @@
+/* stylelint-disable selector-max-type */
+/* Disable selector-max-type rule to target individual element types. */
+
+:where(.radix-themes) {
+  /* prettier-ignore */
+  --kbd-box-shadow:
+    inset 0 -0.05em 0.5em var(--gray-a2),
+    inset 0 0.05em var(--white-a12),
+    inset 0 0.25em 0.5em var(--gray-a2),
+    inset 0 -0.05em var(--gray-a6),
+    0 0 0 0.05em var(--gray-a5),
+    0 0.08em 0.17em var(--gray-a7);
+}
+:is(.dark, .dark-theme),
+:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
+  /* prettier-ignore */
+  --kbd-box-shadow:
+    inset 0 -0.05em 0.5em var(--gray-a3),
+    inset 0 0.05em var(--gray-a11),
+    inset 0 0.25em 0.5em var(--gray-a2),
+    inset 0 -0.1em var(--black-a11),
+    0 0 0 0.075em var(--gray-a7),
+    0 0.08em 0.17em var(--black-a12);
+}
+
+.rt-Kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-family: var(--default-font-family);
+  font-weight: normal;
+  vertical-align: text-top;
+  white-space: nowrap;
+  user-select: none;
+
+  position: relative;
+  top: -0.03em;
+
+  font-size: 0.75em;
+  min-width: 1.75em;
+  line-height: 1.7em;
+  box-sizing: border-box;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  padding-bottom: 0.05em;
+  word-spacing: -0.1em;
+  border-radius: calc(var(--radius-factor) * 0.35em);
+  letter-spacing: var(--letter-spacing, var(--default-letter-spacing));
+
+  /* Make sure that the height is not stretched in a Flex/Grid layout */
+  height: fit-content;
+
+  color: var(--gray-12);
+  background-color: var(--gray-1);
+  box-shadow: var(--kbd-box-shadow);
+  transition: box-shadow 120ms, background-color 120ms;
+
+  &:where(:any-link, button) {
+    @media (hover: hover) {
+      &:where(:hover) {
+        transition-duration: 40ms, 40ms;
+        background-color: var(--color-background);
+        box-shadow: var(--kbd-box-shadow), 0 0 0 0.05em var(--gray-a5);
+      }
+    }
+    &:where([data-state='open']) {
+      transition-duration: 40ms, 40ms;
+      background-color: var(--color-background);
+      box-shadow: var(--kbd-box-shadow), 0 0 0 0.05em var(--gray-a5);
+    }
+    &:where(:active:not([data-state='open'])) {
+      padding-top: 0.05em;
+      padding-bottom: 0;
+      transition-duration: 40ms, 40ms;
+      background-color: var(--gray-2);
+      box-shadow: inset 0 0.05em var(--black-a3), 0 0 0 0.05em var(--gray-a7);
+    }
+    &:where(:focus-visible) {
+      outline: 2px solid var(--focus-8);
+    }
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * SIZES                                                                                           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+@breakpoints {
+  .rt-Kbd {
+    &:where(.rt-r-size-1) {
+      font-size: calc(var(--font-size-1) * 0.8);
+      --letter-spacing: var(--letter-spacing-1);
+    }
+    &:where(.rt-r-size-2) {
+      font-size: calc(var(--font-size-2) * 0.8);
+      --letter-spacing: var(--letter-spacing-2);
+    }
+    &:where(.rt-r-size-3) {
+      font-size: calc(var(--font-size-3) * 0.8);
+      --letter-spacing: var(--letter-spacing-3);
+    }
+    &:where(.rt-r-size-4) {
+      font-size: calc(var(--font-size-4) * 0.8);
+      --letter-spacing: var(--letter-spacing-4);
+    }
+    &:where(.rt-r-size-5) {
+      font-size: calc(var(--font-size-5) * 0.8);
+      --letter-spacing: var(--letter-spacing-5);
+    }
+    &:where(.rt-r-size-6) {
+      font-size: calc(var(--font-size-6) * 0.8);
+      --letter-spacing: var(--letter-spacing-6);
+    }
+    &:where(.rt-r-size-7) {
+      font-size: calc(var(--font-size-7) * 0.8);
+      --letter-spacing: var(--letter-spacing-7);
+    }
+    &:where(.rt-r-size-8) {
+      font-size: calc(var(--font-size-8) * 0.8);
+      --letter-spacing: var(--letter-spacing-8);
+    }
+    &:where(.rt-r-size-9) {
+      font-size: calc(var(--font-size-9) * 0.8);
+      --letter-spacing: var(--letter-spacing-9);
+    }
+  }
+}

package/src/components/kbd.props.tsx

@@ -0,0 +1,19 @@
+import { asChildPropDef } from '../props/as-child.prop.js';
+
+import type { PropDef } from '../props/prop-def.js';
+
+const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
+
+const kbdPropDefs = {
+  ...asChildPropDef,
+  size: {
+    type: 'enum',
+    className: 'rt-r-size',
+    values: sizes,
+    responsive: true,
+  },
+} satisfies {
+  size: PropDef<(typeof sizes)[number]>;
+};
+
+export { kbdPropDefs };

package/src/components/kbd.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Slot } from 'radix-ui';
+
+import { kbdPropDefs } from './kbd.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 KbdElement = React.ElementRef<'kbd'>;
+type KbdOwnProps = GetPropDefTypes<typeof kbdPropDefs>;
+interface KbdProps extends ComponentPropsWithout<'kbd', RemovedProps>, MarginProps, KbdOwnProps {}
+const Kbd = React.forwardRef<KbdElement, KbdProps>((props, forwardedRef) => {
+  const { asChild, className, ...kbdProps } = extractProps(props, kbdPropDefs, marginPropDefs);
+  const Comp = asChild ? Slot.Root : 'kbd';
+  return (
+    <Comp
+      {...kbdProps}
+      ref={forwardedRef}
+      className={classNames('rt-reset', 'rt-Kbd', className)}
+    />
+  );
+});
+Kbd.displayName = 'Kbd';
+
+export { Kbd };
+export type { KbdProps };

package/src/components/layout.css

@@ -0,0 +1,5 @@
+@import './box.css';
+@import './flex.css';
+@import './grid.css';
+@import './section.css';
+@import './container.css';