Transform docs

atomiks · Apr 11, 2024 · 961b80c · 961b80c
1 parent c9ee2f5
commit 961b80c
Show file tree

Hide file tree

Showing 62 changed files with 239 additions and 279 deletions.
diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminate.js b/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminate.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
-import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
+import * as BaseCheckbox from '@base_ui/react/Checkbox';
 import HorizontalRule from '@mui/icons-material/HorizontalRule';
 
 export default function UnstyledCheckboxIndeterminate() {
@@ -30,7 +30,7 @@ const grey = {
   100: '#E5EAF2',
 };
 
-const Checkbox = styled(BaseCheckbox)(
+const Checkbox = styled(BaseCheckbox.Root)(
   ({ theme }) => `
     width: 24px;
     height: 24px;

diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminate.tsx b/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminate.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
-import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
+import * as BaseCheckbox from '@base_ui/react/Checkbox';
 import HorizontalRule from '@mui/icons-material/HorizontalRule';
 
 export default function UnstyledCheckboxIndeterminate() {
@@ -30,7 +30,7 @@ const grey = {
   100: '#E5EAF2',
 };
 
-const Checkbox = styled(BaseCheckbox)(
+const Checkbox = styled(BaseCheckbox.Root)(
   ({ theme }) => `
     width: 24px;
     height: 24px;

diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminateGroup.js b/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminateGroup.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
-import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
+import * as BaseCheckbox from '@base_ui/react/Checkbox';
 import HorizontalRule from '@mui/icons-material/HorizontalRule';
 import Check from '@mui/icons-material/Check';
 
@@ -76,7 +76,7 @@ const grey = {
   800: '#303740',
 };
 
-const Checkbox = styled(BaseCheckbox)(
+const Checkbox = styled(BaseCheckbox.Root)(
   ({ theme }) => `
     width: 24px;
     height: 24px;

diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx b/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
-import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
+import * as BaseCheckbox from '@base_ui/react/Checkbox';
 import HorizontalRule from '@mui/icons-material/HorizontalRule';
 import Check from '@mui/icons-material/Check';
 
@@ -76,7 +76,7 @@ const grey = {
   800: '#303740',
 };
 
-const Checkbox = styled(BaseCheckbox)(
+const Checkbox = styled(BaseCheckbox.Root)(
   ({ theme }) => `
     width: 24px;
     height: 24px;

diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/css/index.js b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/css/index.js
@@ -1,26 +1,29 @@
 import * as React from 'react';
-import { Checkbox } from '@base_ui/react/Checkbox';
+import * as Checkbox from '@base_ui/react/Checkbox';
 import { useTheme } from '@mui/system';
 import Check from '@mui/icons-material/Check';
 
 export default function UnstyledCheckboxIntroduction() {
   return (
     <div style={{ display: 'flex', gap: 12 }}>
-      <Checkbox
+      <Checkbox.Root
         className="Checkbox"
         aria-label="Basic checkbox, on by default"
         defaultChecked
       >
         <Checkbox.Indicator className="Checkbox-indicator">
           <Check className="Checkbox-icon" />
         </Checkbox.Indicator>
-      </Checkbox>
-      <Checkbox className="Checkbox" aria-label="Basic checkbox, off by default">
+      </Checkbox.Root>
+      <Checkbox.Root
+        className="Checkbox"
+        aria-label="Basic checkbox, off by default"
+      >
         <Checkbox.Indicator className="Checkbox-indicator">
           <Check className="Checkbox-icon" />
         </Checkbox.Indicator>
-      </Checkbox>
-      <Checkbox
+      </Checkbox.Root>
+      <Checkbox.Root
         className="Checkbox"
         aria-label="Disabled checkbox, on by default"
         defaultChecked
@@ -29,16 +32,16 @@ export default function UnstyledCheckboxIntroduction() {
         <Checkbox.Indicator className="Checkbox-indicator">
           <Check className="Checkbox-icon" />
         </Checkbox.Indicator>
-      </Checkbox>
-      <Checkbox
+      </Checkbox.Root>
+      <Checkbox.Root
         className="Checkbox"
         aria-label="Disabled checkbox, off by default"
         disabled
       >
         <Checkbox.Indicator className="Checkbox-indicator">
           <Check className="Checkbox-icon" />
         </Checkbox.Indicator>
-      </Checkbox>
+      </Checkbox.Root>
       <Styles />
     </div>
   );

diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/css/index.tsx b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/css/index.tsx
@@ -1,26 +1,29 @@
 import * as React from 'react';
-import { Checkbox } from '@base_ui/react/Checkbox';
+import * as Checkbox from '@base_ui/react/Checkbox';
 import { useTheme } from '@mui/system';
 import Check from '@mui/icons-material/Check';
 
 export default function UnstyledCheckboxIntroduction() {
   return (
     <div style={{ display: 'flex', gap: 12 }}>
-      <Checkbox
+      <Checkbox.Root
         className="Checkbox"
         aria-label="Basic checkbox, on by default"
         defaultChecked
       >
         <Checkbox.Indicator className="Checkbox-indicator">
           <Check className="Checkbox-icon" />
         </Checkbox.Indicator>
-      </Checkbox>
-      <Checkbox className="Checkbox" aria-label="Basic checkbox, off by default">
+      </Checkbox.Root>
+      <Checkbox.Root
+        className="Checkbox"
+        aria-label="Basic checkbox, off by default"
+      >
         <Checkbox.Indicator className="Checkbox-indicator">
           <Check className="Checkbox-icon" />
         </Checkbox.Indicator>
-      </Checkbox>
-      <Checkbox
+      </Checkbox.Root>
+      <Checkbox.Root
         className="Checkbox"
         aria-label="Disabled checkbox, on by default"
         defaultChecked
@@ -29,16 +32,16 @@ export default function UnstyledCheckboxIntroduction() {
         <Checkbox.Indicator className="Checkbox-indicator">
           <Check className="Checkbox-icon" />
         </Checkbox.Indicator>
-      </Checkbox>
-      <Checkbox
+      </Checkbox.Root>
+      <Checkbox.Root
         className="Checkbox"
         aria-label="Disabled checkbox, off by default"
         disabled
       >
         <Checkbox.Indicator className="Checkbox-indicator">
           <Check className="Checkbox-icon" />
         </Checkbox.Indicator>
-      </Checkbox>
+      </Checkbox.Root>
       <Styles />
     </div>
   );

diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/system/index.js b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/system/index.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
-import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
+import * as BaseCheckbox from '@base_ui/react/Checkbox';
 import Check from '@mui/icons-material/Check';
 
 export default function UnstyledSwitchIntroduction() {
@@ -44,7 +44,7 @@ const blue = {
   800: '#004C99',
 };
 
-const Checkbox = styled(BaseCheckbox)(
+const Checkbox = styled(BaseCheckbox.Root)(
   ({ theme }) => `
     width: 24px;
     height: 24px;

diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
-import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
+import * as BaseCheckbox from '@base_ui/react/Checkbox';
 import Check from '@mui/icons-material/Check';
 
 export default function UnstyledSwitchIntroduction() {
@@ -44,7 +44,7 @@ const blue = {
   800: '#004C99',
 };
 
-const Checkbox = styled(BaseCheckbox)(
+const Checkbox = styled(BaseCheckbox.Root)(
   ({ theme }) => `
     width: 24px;
     height: 24px;

diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
+import * as BaseCheckbox from '@base_ui/react/Checkbox';
+
 import { useTheme } from '@mui/system';
 import Check from '@mui/icons-material/Check';
 
@@ -41,7 +42,7 @@ export default function UnstyledCheckboxIntroduction() {
 
 const Checkbox = React.forwardRef(function Checkbox(props, ref) {
   return (
-    <BaseCheckbox
+    <BaseCheckbox.Root
       {...props}
       ref={ref}
       className={(state) =>

diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import {
-  Checkbox as BaseCheckbox,
-  type CheckboxIndicatorProps,
-  type CheckboxProps,
+import * as BaseCheckbox from '@base_ui/react/Checkbox';
+import type {
+  CheckboxIndicatorProps,
+  CheckboxRootProps,
 } from '@base_ui/react/Checkbox';
 import { useTheme } from '@mui/system';
 import Check from '@mui/icons-material/Check';
@@ -42,10 +42,10 @@ export default function UnstyledCheckboxIntroduction() {
   );
 }
 
-const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
+const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxRootProps>(
   function Checkbox(props, ref) {
     return (
-      <BaseCheckbox
+      <BaseCheckbox.Root
         {...props}
         ref={ref}
         className={(state) =>

diff --git a/docs/data/base/components/checkbox/checkbox.md b/docs/data/base/components/checkbox/checkbox.md
@@ -1,7 +1,7 @@
 ---
 productId: base-ui
 title: React Checkbox component and hook
-components: Checkbox, CheckboxIndicator
+components: CheckboxRoot, CheckboxIndicator
 hooks: useCheckbox
 githubLabel: 'component: checkbox'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
@@ -24,47 +24,47 @@ The Checkbox component provides users with a checkbox for toggling a checked sta
 ## Component
 
 ```jsx
-import { Checkbox } from '@base_ui/react/Checkbox';
+import * as Checkbox from '@base_ui/react/Checkbox';
 ```
 
 ### Anatomy
 
 The `Checkbox` component is composed of a root component and an indicator child component:
 
 ```tsx
-<Checkbox>
+<Checkbox.Root>
   <Checkbox.Indicator />
-</Checkbox>
+</Checkbox.Root>
 ```
 
 The indicator can contain children, such as an icon:
 
 ```tsx
-<Checkbox>
+<Checkbox.Root>
   <Checkbox.Indicator>
     <MyCheckIcon />
   </Checkbox.Indicator>
-</Checkbox>
+</Checkbox.Root>
 ```
 
 The indicator conditionally unmounts its children when the checkbox is unchecked. For CSS animations, you can use the `keepMounted` prop to transition `visibility` and `opacity` for example:
 
 ```tsx
-<Checkbox>
+<Checkbox.Root>
   <Checkbox.Indicator keepMounted>
     <MyCheckIcon />
   </Checkbox.Indicator>
-</Checkbox>
+</Checkbox.Root>
 ```
 
 ### Custom structure
 
 Use the `render` prop to override the rendered checkbox or indicator element with your own components:
 
 ```jsx
-<Checkbox render={(props) => <MyCheckbox {...props} />}>
+<Checkbox.Root render={(props) => <MyCheckbox {...props} />}>
   <Checkbox.Indicator render={(props) => <MyCheckboxIndicator {...props} />} />
-</Checkbox>
+</Checkbox.Root>
 ```
 
 To ensure behavior works as expected:
@@ -113,9 +113,9 @@ You may not need to use hooks unless you find that you're limited by the customi
 Ensure the checkbox has an accessible name via a `label` element.
 
 ```jsx
-<Checkbox id="my-checkbox">
+<Checkbox.Root id="my-checkbox">
   <Checkbox.Indicator />
-</Checkbox>
+</Checkbox.Root>
 <label htmlFor="my-checkbox">
   My label
 </label>

diff --git a/docs/data/base/components/number-field/UnstyledNumberFieldFormat.js b/docs/data/base/components/number-field/UnstyledNumberFieldFormat.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { NumberField as BaseNumberField } from '@base_ui/react/NumberField';
+import * as BaseNumberField from '@base_ui/react/NumberField';
 import { styled, css } from '@mui/system';
 
 export default function UnstyledNumberFieldFormat() {
@@ -49,7 +49,7 @@ const NumberLabel = styled('label')`
   font-weight: bold;
 `;
 
-const NumberField = styled(BaseNumberField)`
+const NumberField = styled(BaseNumberField.Root)`
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 1rem;
 `;

diff --git a/docs/data/base/components/number-field/UnstyledNumberFieldFormat.tsx b/docs/data/base/components/number-field/UnstyledNumberFieldFormat.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { NumberField as BaseNumberField } from '@base_ui/react/NumberField';
+import * as BaseNumberField from '@base_ui/react/NumberField';
 import { styled, css } from '@mui/system';
 
 export default function UnstyledNumberFieldFormat() {
@@ -49,7 +49,7 @@ const NumberLabel = styled('label')`
   font-weight: bold;
 `;
 
-const NumberField = styled(BaseNumberField)`
+const NumberField = styled(BaseNumberField.Root)`
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 1rem;
 `;

diff --git a/docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/css/index.js b/docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/css/index.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { NumberField } from '@base_ui/react/NumberField';
+import * as NumberField from '@base_ui/react/NumberField';
 import { useTheme } from '@mui/system';
 
 function useIsDarkMode() {
@@ -14,7 +14,7 @@ export default function UnstyledNumberFieldIntroduction() {
 
   return (
     <div className={isDarkMode ? 'dark' : ''}>
-      <NumberField
+      <NumberField.Root
         id={id}
         className="NumberField"
         aria-label="Basic number field, default value"
@@ -52,7 +52,7 @@ export default function UnstyledNumberFieldIntroduction() {
             +
           </NumberField.Increment>
         </NumberField.Group>
-      </NumberField>
+      </NumberField.Root>
       <Styles />
     </div>
   );