feat!(BREAKING CHANGE): remove misused styling props

apps/www/src/app/docs/[[...slug]]/page.tsx

@@ -34,8 +34,13 @@ export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
           pageTree={docs.pageTree}
           source={page.data.source}
         />
-        <Flex width='full' align='start'>
-          <Flex direction='column' align='center' justify='center' width='full'>
+        <Flex style={{ width: '100%' }} align='start'>
+          <Flex
+            direction='column'
+            align='center'
+            justify='center'
+            style={{ width: '100%' }}
+          >
             <Flex
               direction='column'
               className={styles.content}

apps/www/src/app/examples/page.tsx

@@ -319,7 +319,7 @@ const Page = () => {
 
               <RangePicker
                 footer={
-                  <Callout width='100%' type='success'>
+                  <Callout style={{ width: '100%' }} type='success'>
                     Some important message in the footer
                   </Callout>
                 }
@@ -1570,7 +1570,7 @@ const Page = () => {
               <Button onClick={() => setDialogOpen(true)}>Open Dialog</Button>
 
               <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-                <Dialog.Content width='500px'>
+                <Dialog.Content style={{ width: 500 }}>
                   <Dialog.Header>
                     <Dialog.Title>Dialog Title</Dialog.Title>
                   </Dialog.Header>
@@ -1657,7 +1657,6 @@ const Page = () => {
                         <Input
                           placeholder='Type to filter...'
                           leadingIcon={<MixerHorizontalIcon />}
-                          width='100%'
                         />
                       </Flex>
 
@@ -1731,7 +1730,7 @@ const Page = () => {
                 open={nestedDialogOpen}
                 onOpenChange={setNestedDialogOpen}
               >
-                <Dialog.Content width='500px'>
+                <Dialog.Content style={{ width: 500 }}>
                   <Dialog.Body>
                     <Text>This is the nested dialog content. </Text>
                     <Flex
@@ -1826,7 +1825,6 @@ const Page = () => {
                         <Input
                           placeholder='Type to filter...'
                           leadingIcon={<MixerHorizontalIcon />}
-                          width='100%'
                         />
                       </Flex>
 

apps/www/src/app/not-found.tsx

@@ -6,8 +6,7 @@ export default function NotFound() {
       align='center'
       justify='center'
       gap={9}
-      width='full'
-      style={{ height: '100vh' }}
+      style={{ width: '100%', height: '100vh' }}
     >
       <Headline size='t3' weight='medium' style={{ width: 'auto' }}>
         404

apps/www/src/components/datatable-demo.tsx

@@ -110,7 +110,7 @@ export const columns: DataTableColumnDef<Payment, unknown>[] = [
 const DataTableDemo = () => {
   const data = useMemo(() => generateData(100), []);
   return (
-    <Flex direction='column' gap={4} width='full'>
+    <Flex direction='column' gap={4} style={{ width: '100%' }}>
       <div style={{ height: 400 }}>
         <DataTable
           data={data}
@@ -130,7 +130,7 @@ const DataTableVirtualizedDemo = () => {
   const data = useMemo(() => generateData(1000), []);
 
   return (
-    <Flex direction='column' gap={4} width='full'>
+    <Flex direction='column' gap={4} style={{ width: '100%' }}>
       <div style={{ height: 400 }}>
         <DataTable
           data={data}
@@ -153,8 +153,7 @@ const DataTableSearchDemo = () => {
     <Flex
       direction='column'
       gap={4}
-      width='full'
-      style={{ height: 400, padding: '20px' }}
+      style={{ width: '100%', height: 400, padding: '20px' }}
     >
       <DataTable
         data={data}

apps/www/src/components/dataview-demo.tsx

@@ -186,7 +186,7 @@ const defaultSort = { name: 'name', order: 'asc' as const };
 
 export function DataViewTableDemo() {
   return (
-    <Flex direction='column' gap={4} width='full'>
+    <Flex direction='column' gap={4} style={{ width: '100%' }}>
       <div style={{ height: 400 }}>
         <DataView data={people} fields={fields} defaultSort={defaultSort}>
           <DataView.Toolbar>
@@ -202,7 +202,7 @@ export function DataViewTableDemo() {
 
 export function DataViewListDemo() {
   return (
-    <Flex direction='column' gap={4} width='full'>
+    <Flex direction='column' gap={4} style={{ width: '100%' }}>
       <div style={{ height: 400 }}>
         <DataView data={people} fields={fields} defaultSort={defaultSort}>
           <DataView.Toolbar>
@@ -217,7 +217,7 @@ export function DataViewListDemo() {
 
 export function DataViewSearchDemo() {
   return (
-    <Flex direction='column' gap={4} width='full'>
+    <Flex direction='column' gap={4} style={{ width: '100%' }}>
       <div style={{ height: 400 }}>
         <DataView data={people} fields={fields} defaultSort={defaultSort}>
           <DataView.Toolbar>
@@ -242,7 +242,7 @@ export function DataViewMultiViewDemo() {
     []
   );
   return (
-    <Flex direction='column' gap={4} width='full'>
+    <Flex direction='column' gap={4} style={{ width: '100%' }}>
       <div style={{ height: 400 }}>
         <DataView
           data={people}
@@ -266,7 +266,7 @@ export function DataViewMultiViewDemo() {
 export function DataViewEmptyZeroDemo() {
   const [filtered, setFiltered] = useState(false);
   return (
-    <Flex direction='column' gap={4} width='full'>
+    <Flex direction='column' gap={4} style={{ width: '100%' }}>
       <div style={{ height: 400 }}>
         <DataView
           data={filtered ? [] : people}
@@ -296,7 +296,7 @@ export function DataViewEmptyZeroDemo() {
 
 export function DataViewCustomDemo() {
   return (
-    <Flex direction='column' gap={4} width='full'>
+    <Flex direction='column' gap={4} style={{ width: '100%' }}>
       <DataView data={people} fields={fields} defaultSort={defaultSort}>
         <DataView.Toolbar>
           <DataView.Filters />
@@ -386,7 +386,7 @@ function generatePeople(count: number): Person[] {
 export function DataViewVirtualizedDemo() {
   const data = useMemo(() => generatePeople(1000), []);
   return (
-    <Flex direction='column' gap={4} width='full'>
+    <Flex direction='column' gap={4} style={{ width: '100%' }}>
       <div style={{ height: 400 }}>
         <DataView data={data} fields={fields} defaultSort={defaultSort}>
           <DataView.Toolbar>
@@ -414,7 +414,7 @@ export function DataViewGroupingDemo() {
   // so the sticky group header visibly swaps as the user moves between teams.
   const groupedPeople = useMemo(() => generatePeople(60), []);
   return (
-    <Flex direction='column' gap={4} width='full'>
+    <Flex direction='column' gap={4} style={{ width: '100%' }}>
       <div style={{ height: 320 }}>
         <DataView
           data={groupedPeople}
@@ -446,7 +446,7 @@ export function DataViewGroupingDemo() {
 export function DataViewVirtualizedGroupingDemo() {
   const data = useMemo(() => generatePeople(1500), []);
   return (
-    <Flex direction='column' gap={4} width='full'>
+    <Flex direction='column' gap={4} style={{ width: '100%' }}>
       <div style={{ height: 360 }}>
         <DataView
           data={data}
@@ -478,7 +478,7 @@ export function DataViewVirtualizedGroupingDemo() {
 export function DataViewLoadingDemo() {
   const [isLoading, setIsLoading] = useState(true);
   return (
-    <Flex direction='column' gap={4} width='full'>
+    <Flex direction='column' gap={4} style={{ width: '100%' }}>
       <Flex gap={3} align='center'>
         <Button
           size='small'
@@ -518,7 +518,7 @@ export function DataViewVirtualizedLoadingDemo() {
   const [isLoading, setIsLoading] = useState(true);
   const allPeople = useMemo(() => generatePeople(1000), []);
   return (
-    <Flex direction='column' gap={4} width='full'>
+    <Flex direction='column' gap={4} style={{ width: '100%' }}>
       <Flex gap={3} align='center'>
         <Button
           size='small'
@@ -577,7 +577,7 @@ export function DataViewPerViewFieldsDemo() {
     []
   );
   return (
-    <Flex direction='column' gap={4} width='full'>
+    <Flex direction='column' gap={4} style={{ width: '100%' }}>
       <div style={{ height: 400 }}>
         <DataView
           data={people}

apps/www/src/components/docs/footer.tsx

@@ -10,7 +10,7 @@ type DocsFooterProps = {
 export default function DocsFooter({ url }: DocsFooterProps) {
   const neighbours = findNeighbour(docs.pageTree, url);
   return (
-    <Flex width='full' justify='between'>
+    <Flex style={{ width: '100%' }} justify='between'>
       {neighbours.previous ? (
         <Link href={neighbours.previous.url}>
           <Button

apps/www/src/components/docs/search.tsx

@@ -137,7 +137,7 @@ export default function DocsSearch({ pageTree }: { pageTree: Root }) {
       <Dialog.Trigger render={<IconButton size={3} aria-label='Search docs' />}>
         <MagnifyingGlassIcon />
       </Dialog.Trigger>
-      <Dialog.Content width={512} className={styles.searchContainer}>
+      <Dialog.Content style={{ width: 512 }} className={styles.searchContainer}>
         <Command className={styles.searchCommand} filter={() => 1}>
           <Flex className={styles.inputContainer} align='center'>
             <Command.Input

apps/www/src/components/docs/sidebar.tsx

@@ -106,7 +106,12 @@ export default function DocsSidebar({ pageTree, className }: Props) {
   return (
     <Sidebar open collapsible={false} className={cx(className, styles.sidebar)}>
       <Sidebar.Header className={styles.header}>
-        <Flex align='center' gap={3} justify='between' width='full'>
+        <Flex
+          align='center'
+          gap={3}
+          justify='between'
+          style={{ width: '100%' }}
+        >
           <Link href='/'>
             <Logo onlyWordmark />
           </Link>

apps/www/src/components/playground/alert-dialog-examples.tsx

@@ -11,7 +11,7 @@ export function AlertDialogExamples() {
           <AlertDialog.Trigger render={<Button color='danger' />}>
             Delete Item
           </AlertDialog.Trigger>
-          <AlertDialog.Content width='400px'>
+          <AlertDialog.Content style={{ width: '400px' }}>
             <AlertDialog.Header>
               <AlertDialog.Title>Are you sure?</AlertDialog.Title>
             </AlertDialog.Header>
@@ -37,7 +37,7 @@ export function AlertDialogExamples() {
           <AlertDialog.Trigger render={<Button variant='outline' />}>
             Discard Changes
           </AlertDialog.Trigger>
-          <AlertDialog.Content width={400}>
+          <AlertDialog.Content style={{ width: 400 }}>
             <AlertDialog.Body>
               <AlertDialog.Title>Unsaved Changes</AlertDialog.Title>
               <AlertDialog.Description>

apps/www/src/components/playground/callout-examples.tsx

@@ -14,7 +14,7 @@ export function CalloutExamples() {
         <Callout type='accent'>Accent Callout</Callout>
         <Callout type='attention'>Attention Callout</Callout>
         <Callout type='normal'>Normal Callout</Callout>
-        <Callout type='success' outline>
+        <Callout type='success' variant='outline'>
           With Outline Callout
         </Callout>
         <Callout dismissible onDismiss={() => alert('Dismissed!')}>

apps/www/src/components/playground/dialog-examples.tsx

@@ -10,7 +10,7 @@ export function DialogExamples() {
         <Dialog>
           <Dialog.Trigger render={<Button />}>Dialog</Dialog.Trigger>
           <Dialog.Content
-            width='400px'
+            style={{ width: '400px' }}
             overlay={{
               blur: true,
               className: 'custom-overlay',
@@ -28,7 +28,7 @@ export function DialogExamples() {
           <Dialog.Trigger render={<Button variant='outline' />}>
             Open Dialog
           </Dialog.Trigger>
-          <Dialog.Content width={600} showCloseButton={false}>
+          <Dialog.Content style={{ width: 600 }} showCloseButton={false}>
             <Dialog.Title>No Close Button</Dialog.Title>
             <Dialog.Description>
               This dialog doesn't show the close button.

apps/www/src/components/playground/list-examples.tsx

@@ -10,15 +10,15 @@ export function ListExamples() {
         <List>
           <List.Header>User Information</List.Header>
           <List.Item align='center'>
-            <List.Label minWidth='88px'>Status</List.Label>
+            <List.Label style={{ minWidth: '88px' }}>Status</List.Label>
             <List.Value>Active</List.Value>
           </List.Item>
           <List.Item align='center'>
-            <List.Label minWidth='88px'>Type</List.Label>
+            <List.Label style={{ minWidth: '88px' }}>Type</List.Label>
             <List.Value>Premium Account</List.Value>
           </List.Item>
           <List.Item align='center'>
-            <List.Label minWidth='88px'>Created</List.Label>
+            <List.Label style={{ minWidth: '88px' }}>Created</List.Label>
             <List.Value>April 24, 2024</List.Value>
           </List.Item>
         </List>

apps/www/src/components/playground/text-area-examples.tsx

@@ -13,7 +13,10 @@ export function TextAreaExamples() {
         <Field label='Error TextArea' error='This field has an error'>
           <TextArea placeholder='Enter your text here' />
         </Field>
-        <TextArea placeholder='Without Field wrapper' width='300px' />
+        <TextArea
+          placeholder='Without Field wrapper'
+          style={{ width: '300px' }}
+        />
       </Flex>
     </PlaygroundLayout>
   );

apps/www/src/components/theme-customiser/theme-customiser.tsx

@@ -125,7 +125,7 @@ export default function ThemeCustomizer() {
           </div>
         </Radio.Group>
       </div>
-      <Button onClick={handleCopyTheme} type='button' width='100%'>
+      <Button onClick={handleCopyTheme} type='button' style={{ width: '100%' }}>
         Copy Theme Options
       </Button>
     </div>

apps/www/src/content/docs/components/alert-dialog/props.ts

@@ -7,9 +7,6 @@ export interface AlertDialogProps {
 }
 
 export interface AlertDialogContentProps {
-  /** Controls alert dialog width */
-  width?: string | number;
-
   /**
    * Toggle nested dialog animation (scaling and translation)
    * @default true

apps/www/src/content/docs/components/button/props.ts

@@ -37,12 +37,6 @@ export type ButtonProps = {
   /** Icon element to display after button text */
   trailingIcon?: React.ReactNode;
 
-  /** Custom maximum width for the button */
-  maxWidth?: string | number;
-
-  /** Custom width for the button */
-  width?: string | number;
-
   /**
    * Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (e.g. <div>).
    * Defaults to false when render prop is provided.

apps/www/src/content/docs/components/callout/demo.ts

@@ -34,9 +34,10 @@ export const playground = {
     icon: {
       type: 'icon'
     },
-    outline: {
-      type: 'checkbox',
-      defaultValue: false
+    variant: {
+      type: 'select',
+      options: ['solid', 'outline'],
+      defaultValue: 'solid'
     },
     highContrast: {
       type: 'checkbox',
@@ -45,9 +46,6 @@ export const playground = {
     dismissible: {
       type: 'checkbox',
       defaultValue: false
-    },
-    width: {
-      type: 'text'
     }
   },
   getCode
@@ -71,7 +69,7 @@ export const outlineDemo = {
   code: `
   <Flex gap={5} direction="column">
     <Callout type="success">Without Outline Callout</Callout>
-    <Callout type="success" outline>With Outline Callout</Callout>
+    <Callout type="success" variant="outline">With Outline Callout</Callout>
   </Flex>`
 };
 
@@ -99,8 +97,3 @@ export const actionDemo = {
     A short message to attract user's attention
   </Callout>`
 };
-
-export const widthDemo = {
-  type: 'code',
-  code: `<Callout type="success" width={500}>A short message to attract user's attention</Callout>`
-};