gitextract_54k8yhkw/ ├── .github/ │ ├── CONTRIBUTING.md │ ├── PULL_REQUEST_TEMPLATE.md │ ├── actions/ │ │ └── ci-setup/ │ │ └── action.yml │ └── workflows/ │ ├── ci.yml │ └── publish.yml ├── .gitignore ├── .npmrc ├── .nvmrc ├── .prettierignore ├── .prettierrc ├── .vscode/ │ ├── extensions.json │ └── settings.json ├── AGENTS.md ├── CLAUDE.md ├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md ├── apps/ │ └── playground/ │ ├── .gitignore │ ├── app/ │ │ ├── (static-theme)/ │ │ │ ├── layout.tsx │ │ │ └── theme.tsx │ │ ├── (themeable)/ │ │ │ ├── demo/ │ │ │ │ ├── page.tsx │ │ │ │ └── users.ts │ │ │ ├── ghost-balance/ │ │ │ │ └── page.tsx │ │ │ ├── layout.tsx │ │ │ ├── sink/ │ │ │ │ ├── _components.tsx │ │ │ │ ├── _utils.tsx │ │ │ │ ├── alert-dialog/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── aspect-ratio/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── avatar/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── badge/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── blockquote/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── button/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── callout/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── card/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── checkbox/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── checkbox-cards/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── checkbox-group/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── code/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── container/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── context-menu/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── cursors/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── data-list/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── dialog/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── docs-section.tsx │ │ │ │ ├── dropdown-menu/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── grid/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── heading/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── hide-cursor.tsx │ │ │ │ ├── hover-card/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── icon-button/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── kbd/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── layout.tsx │ │ │ │ ├── link/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── mixed-nested-themes-test/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── nested-appearances-test/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── nested-colors-test/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── page.module.css │ │ │ │ ├── page.tsx │ │ │ │ ├── playground/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── pointer-cursors-checkbox.tsx │ │ │ │ ├── popover/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── progress/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── radio/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── radio-cards/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── radio-group/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── radix-logo.tsx │ │ │ │ ├── scroll-area/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── segmented-control/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── select/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── separator/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── shadow-tokens/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── skeleton/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── slider/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── spinner/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── switch/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── tab-nav/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── tab-nav-demo.tsx │ │ │ │ ├── table/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── tabs/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── text/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── text-area/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── text-field/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── tooltip/ │ │ │ │ │ └── page.tsx │ │ │ │ └── typography/ │ │ │ │ └── page.tsx │ │ │ ├── snapshot/ │ │ │ │ ├── image-card.tsx │ │ │ │ ├── page.module.css │ │ │ │ └── page.tsx │ │ │ └── test/ │ │ │ ├── appearance/ │ │ │ │ └── page.tsx │ │ │ ├── as-child/ │ │ │ │ └── page.tsx │ │ │ ├── avatar/ │ │ │ │ └── page.tsx │ │ │ ├── checkbox-card/ │ │ │ │ └── page.tsx │ │ │ ├── classic-button/ │ │ │ │ └── page.tsx │ │ │ ├── data-list/ │ │ │ │ └── page.tsx │ │ │ ├── dialog/ │ │ │ │ └── page.tsx │ │ │ ├── grid-align-content/ │ │ │ │ └── page.tsx │ │ │ ├── grid-align-self/ │ │ │ │ └── page.tsx │ │ │ ├── grid-area/ │ │ │ │ └── page.tsx │ │ │ ├── grid-justify-items/ │ │ │ │ └── page.tsx │ │ │ ├── grid-justify-self/ │ │ │ │ └── page.tsx │ │ │ ├── high-contrast/ │ │ │ │ └── page.tsx │ │ │ ├── inset/ │ │ │ │ └── page.tsx │ │ │ ├── radio-card/ │ │ │ │ └── page.tsx │ │ │ ├── reset/ │ │ │ │ └── page.tsx │ │ │ ├── responsive/ │ │ │ │ └── page.tsx │ │ │ ├── skeleton/ │ │ │ │ └── page.tsx │ │ │ ├── tabnav/ │ │ │ │ ├── (accounts)/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── documents/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── layout.tsx │ │ │ │ ├── nav.tsx │ │ │ │ └── settings/ │ │ │ │ └── page.tsx │ │ │ ├── text-wrap/ │ │ │ │ └── page.tsx │ │ │ ├── textfield/ │ │ │ │ └── page.tsx │ │ │ └── webkit-tap-highlight-color/ │ │ │ └── page.tsx │ │ ├── api/ │ │ │ └── avatar/ │ │ │ └── route.ts │ │ ├── globals.css │ │ ├── layout.tsx │ │ └── next-theme-provider.tsx │ ├── components/ │ │ ├── loading-buttons.tsx │ │ └── snapshot-logo.tsx │ ├── css.d.ts │ ├── eslint.config.mjs │ ├── next.config.mjs │ ├── package.json │ ├── playwright.config.ts │ ├── postcss.config.mjs │ ├── tests/ │ │ └── visual-regression.spec.ts │ └── tsconfig.json ├── context7.json ├── package.json ├── packages/ │ └── radix-ui-themes/ │ ├── .browserslistrc │ ├── .stylelintrc.cjs │ ├── CHANGELOG.md │ ├── README.md │ ├── eslint.config.mjs │ ├── package.json │ ├── postcss-breakpoints.cjs │ ├── postcss-whitespace.cjs │ ├── postcss.config.cjs │ ├── scripts/ │ │ ├── esbuild-cjs.js │ │ ├── esbuild-esm.js │ │ └── package.json │ ├── src/ │ │ ├── components/ │ │ │ ├── _internal/ │ │ │ │ ├── base-button.css │ │ │ │ ├── base-button.props.ts │ │ │ │ ├── base-button.tsx │ │ │ │ ├── base-card.css │ │ │ │ ├── base-checkbox.css │ │ │ │ ├── base-checkbox.props.ts │ │ │ │ ├── base-dialog.css │ │ │ │ ├── base-menu.css │ │ │ │ ├── base-menu.props.ts │ │ │ │ ├── base-radio.css │ │ │ │ ├── base-radio.props.ts │ │ │ │ ├── base-tab-list.css │ │ │ │ └── base-tab-list.props.ts │ │ │ ├── accessible-icon.tsx │ │ │ ├── alert-dialog.css │ │ │ ├── alert-dialog.props.tsx │ │ │ ├── alert-dialog.tsx │ │ │ ├── animations.css │ │ │ ├── aspect-ratio.tsx │ │ │ ├── avatar.css │ │ │ ├── avatar.props.tsx │ │ │ ├── avatar.tsx │ │ │ ├── badge.css │ │ │ ├── badge.props.tsx │ │ │ ├── badge.tsx │ │ │ ├── blockquote.css │ │ │ ├── blockquote.props.tsx │ │ │ ├── blockquote.tsx │ │ │ ├── box.css │ │ │ ├── box.props.tsx │ │ │ ├── box.tsx │ │ │ ├── button.css │ │ │ ├── button.props.tsx │ │ │ ├── button.tsx │ │ │ ├── callout.css │ │ │ ├── callout.props.tsx │ │ │ ├── callout.tsx │ │ │ ├── card.css │ │ │ ├── card.props.tsx │ │ │ ├── card.tsx │ │ │ ├── checkbox-cards.css │ │ │ ├── checkbox-cards.props.tsx │ │ │ ├── checkbox-cards.tsx │ │ │ ├── checkbox-group.css │ │ │ ├── checkbox-group.primitive.tsx │ │ │ ├── checkbox-group.props.tsx │ │ │ ├── checkbox-group.tsx │ │ │ ├── checkbox.css │ │ │ ├── checkbox.props.tsx │ │ │ ├── checkbox.tsx │ │ │ ├── code.css │ │ │ ├── code.props.tsx │ │ │ ├── code.tsx │ │ │ ├── container.css │ │ │ ├── container.props.tsx │ │ │ ├── container.tsx │ │ │ ├── context-menu.css │ │ │ ├── context-menu.props.tsx │ │ │ ├── context-menu.tsx │ │ │ ├── data-list.css │ │ │ ├── data-list.props.tsx │ │ │ ├── data-list.tsx │ │ │ ├── dialog.css │ │ │ ├── dialog.props.tsx │ │ │ ├── dialog.tsx │ │ │ ├── dropdown-menu.css │ │ │ ├── dropdown-menu.props.tsx │ │ │ ├── dropdown-menu.tsx │ │ │ ├── em.css │ │ │ ├── em.props.tsx │ │ │ ├── em.tsx │ │ │ ├── flex.css │ │ │ ├── flex.props.tsx │ │ │ ├── flex.tsx │ │ │ ├── grid.css │ │ │ ├── grid.props.tsx │ │ │ ├── grid.tsx │ │ │ ├── heading.css │ │ │ ├── heading.props.tsx │ │ │ ├── heading.tsx │ │ │ ├── hover-card.css │ │ │ ├── hover-card.props.tsx │ │ │ ├── hover-card.tsx │ │ │ ├── icon-button.css │ │ │ ├── icon-button.props.tsx │ │ │ ├── icon-button.tsx │ │ │ ├── icons.tsx │ │ │ ├── index.css │ │ │ ├── index.tsx │ │ │ ├── inset.css │ │ │ ├── inset.props.tsx │ │ │ ├── inset.tsx │ │ │ ├── kbd.css │ │ │ ├── kbd.props.tsx │ │ │ ├── kbd.tsx │ │ │ ├── layout.css │ │ │ ├── link.css │ │ │ ├── link.props.tsx │ │ │ ├── link.tsx │ │ │ ├── popover.css │ │ │ ├── popover.props.tsx │ │ │ ├── popover.tsx │ │ │ ├── portal.tsx │ │ │ ├── progress.css │ │ │ ├── progress.props.tsx │ │ │ ├── progress.tsx │ │ │ ├── quote.css │ │ │ ├── quote.props.tsx │ │ │ ├── quote.tsx │ │ │ ├── radio-cards.css │ │ │ ├── radio-cards.props.tsx │ │ │ ├── radio-cards.tsx │ │ │ ├── radio-group.css │ │ │ ├── radio-group.props.tsx │ │ │ ├── radio-group.tsx │ │ │ ├── radio.css │ │ │ ├── radio.props.tsx │ │ │ ├── radio.tsx │ │ │ ├── reset.css │ │ │ ├── reset.tsx │ │ │ ├── scroll-area.css │ │ │ ├── scroll-area.props.tsx │ │ │ ├── scroll-area.tsx │ │ │ ├── section.css │ │ │ ├── section.props.tsx │ │ │ ├── section.tsx │ │ │ ├── segmented-control.css │ │ │ ├── segmented-control.props.tsx │ │ │ ├── segmented-control.tsx │ │ │ ├── select.css │ │ │ ├── select.props.tsx │ │ │ ├── select.tsx │ │ │ ├── separator.css │ │ │ ├── separator.props.tsx │ │ │ ├── separator.tsx │ │ │ ├── skeleton.css │ │ │ ├── skeleton.props.tsx │ │ │ ├── skeleton.tsx │ │ │ ├── slider.css │ │ │ ├── slider.props.tsx │ │ │ ├── slider.tsx │ │ │ ├── slot.tsx │ │ │ ├── spinner.css │ │ │ ├── spinner.props.tsx │ │ │ ├── spinner.tsx │ │ │ ├── strong.css │ │ │ ├── strong.props.tsx │ │ │ ├── strong.tsx │ │ │ ├── switch.css │ │ │ ├── switch.props.tsx │ │ │ ├── switch.tsx │ │ │ ├── tab-nav.css │ │ │ ├── tab-nav.props.tsx │ │ │ ├── tab-nav.tsx │ │ │ ├── table.css │ │ │ ├── table.props.tsx │ │ │ ├── table.tsx │ │ │ ├── tabs.css │ │ │ ├── tabs.props.tsx │ │ │ ├── tabs.tsx │ │ │ ├── text-area.css │ │ │ ├── text-area.props.tsx │ │ │ ├── text-area.tsx │ │ │ ├── text-field.css │ │ │ ├── text-field.props.tsx │ │ │ ├── text-field.tsx │ │ │ ├── text.css │ │ │ ├── text.props.tsx │ │ │ ├── text.tsx │ │ │ ├── theme-panel.css │ │ │ ├── theme-panel.tsx │ │ │ ├── theme.props.tsx │ │ │ ├── theme.tsx │ │ │ ├── tooltip.css │ │ │ ├── tooltip.props.tsx │ │ │ ├── tooltip.tsx │ │ │ └── visually-hidden.tsx │ │ ├── helpers/ │ │ │ ├── component-props.ts │ │ │ ├── extract-margin-props.ts │ │ │ ├── extract-props.ts │ │ │ ├── get-margin-styles.ts │ │ │ ├── get-matching-gray-color.ts │ │ │ ├── get-responsive-styles.ts │ │ │ ├── get-subtree.ts │ │ │ ├── has-own-property.ts │ │ │ ├── index.ts │ │ │ ├── inert.ts │ │ │ ├── input-attributes.ts │ │ │ ├── is-responsive-object.ts │ │ │ ├── map-prop-values.ts │ │ │ ├── merge-styles.ts │ │ │ └── require-react-element.ts │ │ ├── index.ts │ │ ├── props/ │ │ │ ├── as-child.prop.ts │ │ │ ├── color.prop.ts │ │ │ ├── gap.props.ts │ │ │ ├── height.props.ts │ │ │ ├── high-contrast.prop.ts │ │ │ ├── index.ts │ │ │ ├── layout.props.ts │ │ │ ├── leading-trim.prop.ts │ │ │ ├── margin.props.ts │ │ │ ├── padding.props.ts │ │ │ ├── prop-def.ts │ │ │ ├── radius.prop.ts │ │ │ ├── text-align.prop.ts │ │ │ ├── text-wrap.prop.ts │ │ │ ├── truncate.prop.ts │ │ │ ├── weight.prop.ts │ │ │ └── width.props.ts │ │ └── styles/ │ │ ├── breakpoints.css │ │ ├── index.css │ │ ├── layout.css │ │ ├── tokens/ │ │ │ ├── base.css │ │ │ ├── color.css │ │ │ ├── colors/ │ │ │ │ ├── amber.css │ │ │ │ ├── blue.css │ │ │ │ ├── bronze.css │ │ │ │ ├── brown.css │ │ │ │ ├── crimson.css │ │ │ │ ├── cyan.css │ │ │ │ ├── gold.css │ │ │ │ ├── grass.css │ │ │ │ ├── gray.css │ │ │ │ ├── green.css │ │ │ │ ├── indigo.css │ │ │ │ ├── iris.css │ │ │ │ ├── jade.css │ │ │ │ ├── lime.css │ │ │ │ ├── mauve.css │ │ │ │ ├── mint.css │ │ │ │ ├── olive.css │ │ │ │ ├── orange.css │ │ │ │ ├── pink.css │ │ │ │ ├── plum.css │ │ │ │ ├── purple.css │ │ │ │ ├── red.css │ │ │ │ ├── ruby.css │ │ │ │ ├── sage.css │ │ │ │ ├── sand.css │ │ │ │ ├── sky.css │ │ │ │ ├── slate.css │ │ │ │ ├── teal.css │ │ │ │ ├── tomato.css │ │ │ │ ├── violet.css │ │ │ │ └── yellow.css │ │ │ ├── cursor.css │ │ │ ├── index.css │ │ │ ├── layout.css │ │ │ ├── radius.css │ │ │ ├── scaling.css │ │ │ ├── shadow.css │ │ │ ├── space.css │ │ │ └── typography.css │ │ └── utilities/ │ │ ├── align-content.css │ │ ├── align-items.css │ │ ├── align-self.css │ │ ├── display.css │ │ ├── flex-basis.css │ │ ├── flex-direction.css │ │ ├── flex-grow.css │ │ ├── flex-shrink.css │ │ ├── flex-wrap.css │ │ ├── font-weight.css │ │ ├── gap.css │ │ ├── grid-area.css │ │ ├── grid-auto-flow.css │ │ ├── grid-column-end.css │ │ ├── grid-column-start.css │ │ ├── grid-column.css │ │ ├── grid-row-end.css │ │ ├── grid-row-start.css │ │ ├── grid-row.css │ │ ├── grid-template-areas.css │ │ ├── grid-template-columns.css │ │ ├── grid-template-rows.css │ │ ├── height.css │ │ ├── index.css │ │ ├── inset.css │ │ ├── justify-content.css │ │ ├── justify-items.css │ │ ├── justify-self.css │ │ ├── layout.css │ │ ├── leading-trim.css │ │ ├── margin.css │ │ ├── max-height.css │ │ ├── max-width.css │ │ ├── min-height.css │ │ ├── min-width.css │ │ ├── overflow.css │ │ ├── padding.css │ │ ├── position.css │ │ ├── resize.css │ │ ├── table-layout.css │ │ ├── text-align.css │ │ ├── text-wrap.css │ │ ├── truncate.css │ │ ├── vertical-align.css │ │ └── width.css │ └── tsconfig.json ├── pnpm-workspace.yaml ├── release-process.md └── turbo.json