Repository: marigold-ui/marigold
Pull request #3233 (2023-07-27 15:03:59)

chore[DST-69]: added width as  style prop from tailwind

changeset-bot[bot]: ###  ⚠️  No Changeset found

Latest commit: 85c6e335a527efb0b27405e7b2f33c2eda0bf322

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/marigold-ui/marigold/new/width-as-style-prop?filename=.changeset/mean-ladybugs-complain.md&value=---%0A%22%40marigold%2Fdocs%22%3A%20patch%0A%22%40marigold%2Fcomponents%22%3A%20patch%0A%22%40marigold%2Fsystem%22%3A%20patch%0A---%0A%0Achore%5BDST-69%5D%3A%20added%20width%20as%20%20style%20prop%20from%20tailwind%0A)


codecov[bot]: ## [Codecov](https://app.codecov.io/gh/marigold-ui/marigold/pull/3233?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui) Report
> Merging [#3233](https://app.codecov.io/gh/marigold-ui/marigold/pull/3233?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui) (b92a491) into [main](https://app.codecov.io/gh/marigold-ui/marigold/commit/a1c49b3fbed39baeaef1a97ea44490ae19958793?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui) (a1c49b3) will **not change** coverage.
> The diff coverage is `100.00%`.

[![Impacted file tree graph](https://app.codecov.io/gh/marigold-ui/marigold/pull/3233/graphs/tree.svg?width=650&height=150&src=pr&token=YIIcKX7TZu&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui)](https://app.codecov.io/gh/marigold-ui/marigold/pull/3233?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui)

```diff
@@            Coverage Diff            @@
##              main     #3233   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          112       112           
  Lines         7015      7089   +74     
  Branches       318       318           
=========================================
+ Hits          7015      7089   +74     
```

| [Files Changed](https://app.codecov.io/gh/marigold-ui/marigold/pull/3233?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui) | Coverage Δ | |
|---|---|---|
| [...kages/components/src/Autocomplete/Autocomplete.tsx](https://app.codecov.io/gh/marigold-ui/marigold/pull/3233?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui#diff-cGFja2FnZXMvY29tcG9uZW50cy9zcmMvQXV0b2NvbXBsZXRlL0F1dG9jb21wbGV0ZS50c3g=) | `100.00% <100.00%> (ø)` | |
| [packages/components/src/Checkbox/CheckboxGroup.tsx](https://app.codecov.io/gh/marigold-ui/marigold/pull/3233?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui#diff-cGFja2FnZXMvY29tcG9uZW50cy9zcmMvQ2hlY2tib3gvQ2hlY2tib3hHcm91cC50c3g=) | `100.00% <100.00%> (ø)` | |
| [packages/components/src/ComboBox/ComboBox.tsx](https://app.codecov.io/gh/marigold-ui/marigold/pull/3233?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui#diff-cGFja2FnZXMvY29tcG9uZW50cy9zcmMvQ29tYm9Cb3gvQ29tYm9Cb3gudHN4) | `100.00% <100.00%> (ø)` | |
| [packages/components/src/DateField/DateField.tsx](https://app.codecov.io/gh/marigold-ui/marigold/pull/3233?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui#diff-cGFja2FnZXMvY29tcG9uZW50cy9zcmMvRGF0ZUZpZWxkL0RhdGVGaWVsZC50c3g=) | `100.00% <100.00%> (ø)` | |
| [packages/components/src/FieldBase/FieldBase.tsx](https://app.codecov.io/gh/marigold-ui/marigold/pull/3233?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui#diff-cGFja2FnZXMvY29tcG9uZW50cy9zcmMvRmllbGRCYXNlL0ZpZWxkQmFzZS50c3g=) | `100.00% <100.00%> (ø)` | |
| [...ackages/components/src/NumberField/NumberField.tsx](https://app.codecov.io/gh/marigold-ui/marigold/pull/3233?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui#diff-cGFja2FnZXMvY29tcG9uZW50cy9zcmMvTnVtYmVyRmllbGQvTnVtYmVyRmllbGQudHN4) | `100.00% <100.00%> (ø)` | |
| [packages/components/src/Radio/Context.ts](https://app.codecov.io/gh/marigold-ui/marigold/pull/3233?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui#diff-cGFja2FnZXMvY29tcG9uZW50cy9zcmMvUmFkaW8vQ29udGV4dC50cw==) | `100.00% <100.00%> (ø)` | |
| [packages/components/src/Radio/RadioGroup.tsx](https://app.codecov.io/gh/marigold-ui/marigold/pull/3233?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui#diff-cGFja2FnZXMvY29tcG9uZW50cy9zcmMvUmFkaW8vUmFkaW9Hcm91cC50c3g=) | `100.00% <100.00%> (ø)` | |
| [...ackages/components/src/SearchField/SearchField.tsx](https://app.codecov.io/gh/marigold-ui/marigold/pull/3233?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui#diff-cGFja2FnZXMvY29tcG9uZW50cy9zcmMvU2VhcmNoRmllbGQvU2VhcmNoRmllbGQudHN4) | `100.00% <100.00%> (ø)` | |
| [packages/components/src/Select/Select.tsx](https://app.codecov.io/gh/marigold-ui/marigold/pull/3233?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui#diff-cGFja2FnZXMvY29tcG9uZW50cy9zcmMvU2VsZWN0L1NlbGVjdC50c3g=) | `100.00% <100.00%> (ø)` | |
| ... and [4 more](https://app.codecov.io/gh/marigold-ui/marigold/pull/3233?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui) | |


Patch:
diff --git a/.changeset/spicy-countries-watch.md b/.changeset/spicy-countries-watch.md
new file mode 100644
index 000000000..a3eb2a081
--- /dev/null
+++ b/.changeset/spicy-countries-watch.md
@@ -0,0 +1,5 @@
+---
+"@marigold/components": patch
+---
+
+chore[DST-60]: change depricated API
diff --git a/docs/content/components/form/autocomplete/autocomplete.mdx b/docs/content/components/form/autocomplete/autocomplete.mdx
index a2fcf99ce..cb743c9fd 100644
--- a/docs/content/components/form/autocomplete/autocomplete.mdx
+++ b/docs/content/components/form/autocomplete/autocomplete.mdx
@@ -95,9 +95,9 @@ import { Autocomplete } from '@marigold/components';
     },
     {
       property: 'width',
-      type: 'string',
-      description: 'Control the `width` of the field.',
-      default: '100%',
+      type: 'string | number',
+      description: `Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width  `,
+      default: 'full',
     },
     {
       property: 'menuTrigger',
diff --git a/docs/content/components/form/checkbox/checkbox.mdx b/docs/content/components/form/checkbox/checkbox.mdx
index e1824a982..ef84ed12c 100644
--- a/docs/content/components/form/checkbox/checkbox.mdx
+++ b/docs/content/components/form/checkbox/checkbox.mdx
@@ -37,9 +37,9 @@ import { Checkbox, CheckboxGroup } from '@marigold/components';
     },
     {
       property: 'width',
-      type: 'string',
-      description: 'Control the width of the field.',
-      default: '100%',
+      type: 'string | number',
+      description: `Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width  `,
+      default: 'full',
     },
     {
       property: 'defaultChecked',
diff --git a/docs/content/components/form/combobox/combobox.mdx b/docs/content/components/form/combobox/combobox.mdx
index b2d2d5c91..3f1c0d415 100644
--- a/docs/content/components/form/combobox/combobox.mdx
+++ b/docs/content/components/form/combobox/combobox.mdx
@@ -91,9 +91,9 @@ import { ComboBox } from '@marigold/components';
     },
     {
       property: 'width',
-      type: 'string',
-      description: 'Control the `width` of the field.',
-      default: '100%',
+      type: 'string | number',
+      description: `Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width  `,
+      default: 'full',
     },
     {
       property: 'menuTrigger',
diff --git a/docs/content/components/form/datefield/datefield.mdx b/docs/content/components/form/datefield/datefield.mdx
index caeafd5a3..07770d34c 100644
--- a/docs/content/components/form/datefield/datefield.mdx
+++ b/docs/content/components/form/datefield/datefield.mdx
@@ -86,9 +86,9 @@ import { DateField } from '@marigold/components';
     },
     {
       property: 'width',
-      type: 'string',
-      description: 'Control the width of the field.',
-      default: '100%',
+      type: 'string | number',
+      description: `Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width  `,
+      default: 'full',
     },
   ]}
 />
diff --git a/docs/content/components/form/number-field/number-field.mdx b/docs/content/components/form/number-field/number-field.mdx
index 4e0013908..af7828e74 100644
--- a/docs/content/components/form/number-field/number-field.mdx
+++ b/docs/content/components/form/number-field/number-field.mdx
@@ -89,9 +89,9 @@ import { NumberField } from '@marigold/components';
     },
     {
       property: 'width',
-      type: 'string',
-      description: 'Control the width of the field.',
-      default: '100%',
+      type: 'string | number',
+      description: `Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width  `,
+      default: 'full',
     },
     {
       property: 'minValue',
diff --git a/docs/content/components/form/radio/radio.mdx b/docs/content/components/form/radio/radio.mdx
index ea7dd1dc2..d5dcd6804 100644
--- a/docs/content/components/form/radio/radio.mdx
+++ b/docs/content/components/form/radio/radio.mdx
@@ -37,9 +37,9 @@ import { Radio } from '@marigold/components';
     },
     {
       property: 'width',
-      type: 'string',
-      description: 'Control the width of the field',
-      default: '100%',
+      type: 'string | number',
+      description: `Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width  `,
+      default: 'full',
     },
     {
       property: 'disabled',
diff --git a/docs/content/components/form/search-field/search-field.mdx b/docs/content/components/form/search-field/search-field.mdx
index 515c9d1e6..ed51545f8 100644
--- a/docs/content/components/form/search-field/search-field.mdx
+++ b/docs/content/components/form/search-field/search-field.mdx
@@ -107,9 +107,9 @@ import { SearchField } from '@marigold/components';
     },
     {
       property: 'width',
-      type: 'string',
-      description: 'Control the `width` of the field.',
-      default: '100%',
+      type: 'string | number',
+      description: `Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width  `,
+      default: 'full',
     },
   ]}
 />
diff --git a/docs/content/components/form/select/select.mdx b/docs/content/components/form/select/select.mdx
index 3f69f5e23..8a4824572 100644
--- a/docs/content/components/form/select/select.mdx
+++ b/docs/content/components/form/select/select.mdx
@@ -78,9 +78,9 @@ import { Select } from '@marigold/components';
     },
     {
       property: 'width',
-      type: 'string',
-      description: 'Set the width of the select.',
-      default: '100%',
+      type: 'string | number',
+      description: `Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width  `,
+      default: 'full',
     },
     {
       property: 'onChange',
diff --git a/docs/content/components/form/slider/slider.mdx b/docs/content/components/form/slider/slider.mdx
index 60cba89fb..987cad6da 100644
--- a/docs/content/components/form/slider/slider.mdx
+++ b/docs/content/components/form/slider/slider.mdx
@@ -60,9 +60,9 @@ import { Slider } from '@marigold/components';
     },
     {
       property: 'width',
-      type: 'string',
-      description: 'Control the width of the field',
-      default: '100%',
+      type: 'string | number',
+      description: `Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width  `,
+      default: 'full',
     },
     {
       property: '...',
diff --git a/docs/content/components/form/switch/switch.mdx b/docs/content/components/form/switch/switch.mdx
index 4e184b6fe..f3d660d37 100644
--- a/docs/content/components/form/switch/switch.mdx
+++ b/docs/content/components/form/switch/switch.mdx
@@ -39,9 +39,9 @@ import { Switch } from '@marigold/components';
     },
     {
       property: 'width',
-      type: 'string',
-      description: 'Control the width of the field.',
-      default: '100%',
+      type: 'string | number',
+      description: `Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width  `,
+      default: 'full',
     },
     {
       property: 'defaultSelected',
diff --git a/docs/content/components/form/tag/tag.mdx b/docs/content/components/form/tag/tag.mdx
index 51ed2cbc5..71f66daaa 100644
--- a/docs/content/components/form/tag/tag.mdx
+++ b/docs/content/components/form/tag/tag.mdx
@@ -46,9 +46,9 @@ import { Tag } from '@marigold/components';
     },
     {
       property: 'width',
-      type: 'string',
-      description: 'Set the width of the select.',
-      default: '100%',
+      type: 'string | number',
+      description: `Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width  `,
+      default: 'full',
     },
     {
       property: 'allowsRemoving',
diff --git a/docs/content/components/form/text-area/text-area.mdx b/docs/content/components/form/text-area/text-area.mdx
index 31fb86ee1..f788eb7b1 100644
--- a/docs/content/components/form/text-area/text-area.mdx
+++ b/docs/content/components/form/text-area/text-area.mdx
@@ -82,9 +82,9 @@ import { TextArea } from '@marigold/components';
     },
     {
       property: 'width',
-      type: 'string',
-      description: 'Sets the width of the textarea.',
-      default: 'none',
+      type: 'string | number',
+      description: `Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width  `,
+      default: 'full',
     },
     {
       property: 'rows',
diff --git a/docs/content/components/form/textfield/textfield.mdx b/docs/content/components/form/textfield/textfield.mdx
index c73bc5843..0625b38ed 100644
--- a/docs/content/components/form/textfield/textfield.mdx
+++ b/docs/content/components/form/textfield/textfield.mdx
@@ -89,9 +89,9 @@ import { TextField } from '@marigold/components';
     },
     {
       property: 'width',
-      type: 'string',
-      description: 'Control the `width` of the field.',
-      default: '100%',
+      type: 'string | number',
+      description: `Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width  `,
+      default: 'full',
     },
     {
       property: '...',
diff --git a/docs/ui/PropsTable.tsx b/docs/ui/PropsTable.tsx
index 90a4f4d6d..e60e90eb7 100644
--- a/docs/ui/PropsTable.tsx
+++ b/docs/ui/PropsTable.tsx
@@ -6,7 +6,6 @@ import { BlankCanvas } from './icons';
 export interface PropsTableProps {
   props?: { [key: string]: string }[];
 }
-
 export const PropsTable = ({ props }: PropsTableProps) => {
   return (
     <Card px={3} py={4}>
diff --git a/packages/components/src/Autocomplete/Autocomplete.tsx b/packages/components/src/Autocomplete/Autocomplete.tsx
index d6b954ba3..8c638b943 100644
--- a/packages/components/src/Autocomplete/Autocomplete.tsx
+++ b/packages/components/src/Autocomplete/Autocomplete.tsx
@@ -12,6 +12,7 @@ import { ListBox } from '../ListBox';
 import { Popover } from '../Overlay';
 
 import { ClearButton } from './ClearButton';
+import { WidthProp } from '@marigold/system';
 
 // Search Icon
 //----------------
@@ -64,7 +65,7 @@ export interface AutocompleteProps
   onSubmit?: (key: Key | null, value: string | null) => void;
   variant?: string;
   size?: string;
-  width?: string;
+  width?: WidthProp['width'];
 }
 
 export const Autocomplete = ({
diff --git a/packages/components/src/Checkbox/CheckboxGroup.tsx b/packages/components/src/Checkbox/CheckboxGroup.tsx
index f2be74011..af5f2baa2 100644
--- a/packages/components/src/Checkbox/CheckboxGroup.tsx
+++ b/packages/components/src/Checkbox/CheckboxGroup.tsx
@@ -5,7 +5,7 @@ import {
   useCheckboxGroupState,
 } from '@react-stately/checkbox';
 import { AriaCheckboxGroupProps } from '@react-types/checkbox';
-import { useStateProps } from '@marigold/system';
+import { useStateProps, WidthProp } from '@marigold/system';
 import { HtmlProps } from '@marigold/types';
 import { FieldBase } from '../FieldBase';
 
@@ -40,6 +40,7 @@ export interface CheckboxGroupProps
   value?: string[];
   defaultValue?: string[];
   onChange?: (value: string[]) => void;
+  width?: WidthProp['width'];
 }
 
 // Components
@@ -50,6 +51,7 @@ export const CheckboxGroup = ({
   disabled,
   readOnly,
   error,
+  width,
   ...rest
 }: CheckboxGroupProps) => {
   const props = {
@@ -81,6 +83,7 @@ export const CheckboxGroup = ({
       errorMessageProps={errorMessageProps}
       disabled={disabled}
       stateProps={stateProps}
+      width={width}
       {...groupProps}
     >
       <div role="presentation" className={'flex flex-col items-start'}>
diff --git a/packages/components/src/ComboBox/ComboBox.tsx b/packages/components/src/ComboBox/ComboBox.tsx
index 6ea61bd46..5cb1fec9d 100644
--- a/packages/components/src/ComboBox/ComboBox.tsx
+++ b/packages/components/src/ComboBox/ComboBox.tsx
@@ -12,6 +12,7 @@ import { Input } from '../Input';
 import { Button } from '../Button';
 
 import { Item } from '@react-stately/collections';
+import { WidthProp } from '@marigold/system';
 
 export interface ComboBoxProps
   extends Omit<
@@ -26,7 +27,7 @@ export interface ComboBoxProps
   variant?: string;
   size?: string;
   error?: boolean;
-  width?: string;
+  width?: WidthProp['width'];
   disabled?: boolean;
   required?: boolean;
   readOnly?: boolean;
diff --git a/packages/components/src/DateField/DateField.stories.tsx b/packages/components/src/DateField/DateField.stories.tsx
index a2a34bdfb..7f5e87762 100644
--- a/packages/components/src/DateField/DateField.stories.tsx
+++ b/packages/components/src/DateField/DateField.stories.tsx
@@ -48,6 +48,15 @@ const meta = {
         defaultValue: { summary: 'Something went wrong' },
       },
     },
+    width: {
+      control: {
+        type: 'text',
+      },
+      description: 'Width of the field',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
     required: {
       control: {
         type: 'boolean',
diff --git a/packages/components/src/DateField/DateField.tsx b/packages/components/src/DateField/DateField.tsx
index 4fbcf24f2..f8636f253 100644
--- a/packages/components/src/DateField/DateField.tsx
+++ b/packages/components/src/DateField/DateField.tsx
@@ -3,7 +3,7 @@ import { useLocale } from '@react-aria/i18n';
 import { useDateFieldState } from '@react-stately/datepicker';
 import { AriaDateFieldProps, useDateField } from '@react-aria/datepicker';
 import { createCalendar, DateValue } from '@internationalized/date';
-import { cn, useClassNames, useStateProps } from '@marigold/system';
+import { WidthProp, cn, useClassNames, useStateProps } from '@marigold/system';
 import { DateSegment } from './DateSegment';
 import { FieldBase } from '../FieldBase';
 import { mergeProps } from '@react-aria/utils';
@@ -31,6 +31,7 @@ export interface DateFieldProps
   required?: boolean;
   variant?: string;
   size?: string;
+  width?: WidthProp['width'];
 }
 
 // Component
@@ -47,6 +48,7 @@ export const DateField = ({
   action,
   isPressed,
   triggerRef,
+  width,
   ...res
 }: DateFieldProps) => {
   const { locale } = useLocale();
@@ -89,7 +91,6 @@ export const DateField = ({
     focus: isFocused || isPressed,
   });
 
-  console.log(readOnly);
   return (
     <FieldBase
       error={error}
@@ -103,6 +104,7 @@ export const DateField = ({
       stateProps={stateProps}
       variant={variant}
       size={size}
+      width={width}
     >
       <div
         {...mergeProps(fieldProps, focusProps, stateProps, hoverProps)}
diff --git a/packages/components/src/FieldBase/FieldBase.tsx b/packages/components/src/FieldBase/FieldBase.tsx
index f7c984c75..26b8550ab 100644
--- a/packages/components/src/FieldBase/FieldBase.tsx
+++ b/packages/components/src/FieldBase/FieldBase.tsx
@@ -1,15 +1,20 @@
 import React, { HTMLAttributes, LabelHTMLAttributes, ReactNode } from 'react';
-import { StateAttrProps, cn, createVar, useClassNames } from '@marigold/system';
+import {
+  StateAttrProps,
+  WidthProp,
+  cn,
+  useClassNames,
+  width as twWidth,
+} from '@marigold/system';
 
 import { Label, LabelProps } from '../Label';
 import { HelpText } from '../HelpText';
 import { useFieldGroupContext } from './FieldGroup';
 
-export interface FieldBaseProps {
+export interface FieldBaseProps extends WidthProp {
   children?: ReactNode;
   variant?: string;
   size?: string;
-  width?: string;
   disabled?: boolean;
   label?: ReactNode;
   labelProps?: LabelHTMLAttributes<HTMLLabelElement> & Pick<LabelProps, 'as'>;
@@ -27,7 +32,7 @@ export const FieldBase = ({
   children,
   variant,
   size,
-  width = '100%',
+  width = 'full',
   disabled,
   label,
   labelProps,
@@ -46,15 +51,13 @@ export const FieldBase = ({
     component: 'Field',
     variant,
     size,
-    className: 'w-[--fieldWidth]',
   });
 
   return (
     <div
       {...props}
       {...stateProps}
-      className={cn('group/field', classNames)}
-      style={createVar({ fieldWidth: width })}
+      className={cn('group/field', twWidth[width], classNames)}
     >
       {label && (
         <Label
diff --git a/packages/components/src/ListBox/ListBoxOption.tsx b/packages/components/src/ListBox/ListBoxOption.tsx
index 89ccc4bc6..aa1211142 100644
--- a/packages/components/src/ListBox/ListBoxOption.tsx
+++ b/packages/components/src/ListBox/ListBoxOption.tsx
@@ -42,7 +42,7 @@ export const ListBoxOption = ({ item, state }: ListBoxOptionProps) => {
       className={classNames.option}
       {...mergeProps(props, { onPointerDown: onPointerUp }, { ...stateProps })}
     >
-      {item.rendered}
+      {item.props.children}
     </li>
   );
 };
diff --git a/packages/components/src/ListBox/ListBoxSection.tsx b/packages/components/src/ListBox/ListBoxSection.tsx
index e27efce4d..6fe059c57 100644
--- a/packages/components/src/ListBox/ListBoxSection.tsx
+++ b/packages/components/src/ListBox/ListBoxSection.tsx
@@ -30,7 +30,7 @@ export const ListBoxSection = ({ section, state }: ListSectionProps) => {
         </div>
       )}
       <ul className={classNames.list} {...groupProps}>
-        {[...section.childNodes].map(node => (
+        {[...section.props.children].map(node => (
           <ListBoxOption key={node.key} item={node} state={state} />
         ))}
       </ul>
diff --git a/packages/components/src/Menu/MenuItem.tsx b/packages/components/src/Menu/MenuItem.tsx
index 35fa4eef8..3a51e3ba6 100644
--- a/packages/components/src/Menu/MenuItem.tsx
+++ b/packages/components/src/Menu/MenuItem.tsx
@@ -52,7 +52,7 @@ export const MenuItem = ({
         focusProps
       )}
     >
-      {item.rendered}
+      {item.props.children}
     </li>
   );
 };
diff --git a/packages/components/src/Menu/MenuSection.tsx b/packages/components/src/Menu/MenuSection.tsx
index 6d484a935..7e2e2558f 100644
--- a/packages/components/src/Menu/MenuSection.tsx
+++ b/packages/components/src/Menu/MenuSection.tsx
@@ -27,27 +27,24 @@ const MenuSection = ({ onAction, item, state }: MenuSectionProps<object>) => {
           <Divider variant="section" />
         </li>
       )}
-      <li {...itemProps}>
+      <ul {...itemProps}>
         {item.rendered && (
           <span {...headingProps} className={className.section}>
             {item.rendered}
           </span>
         )}
-        <ul {...groupProps} className="pb-1">
-          {[...item.childNodes].map(node => {
-            let item = (
-              <MenuItem
-                key={node.key}
-                item={node}
-                state={state}
-                onAction={onAction}
-                className={className.item}
-              />
-            );
-            return item;
-          })}
-        </ul>
-      </li>
+        <li {...groupProps} className="pb-1">
+          {[...item.props.children].map(node => (
+            <MenuItem
+              key={node.key}
+              item={node}
+              state={state}
+              onAction={onAction}
+              className={className.item}
+            />
+          ))}
+        </li>
+      </ul>
     </>
   );
 };
diff --git a/packages/components/src/NumberField/NumberField.tsx b/packages/components/src/NumberField/NumberField.tsx
index 14905025d..ee53f3e47 100644
--- a/packages/components/src/NumberField/NumberField.tsx
+++ b/packages/components/src/NumberField/NumberField.tsx
@@ -8,7 +8,7 @@ import { useNumberFieldState } from '@react-stately/numberfield';
 import { AriaNumberFieldProps } from '@react-types/numberfield';
 
 import { HtmlProps } from '@marigold/types';
-import { cn, useClassNames, useStateProps } from '@marigold/system';
+import { WidthProp, cn, useClassNames, useStateProps } from '@marigold/system';
 
 import { FieldBase, FieldBaseProps } from '../FieldBase';
 import { StepButton } from './StepButton';
@@ -44,7 +44,7 @@ export interface NumberFieldProps
     Pick<FieldBaseProps, 'label' | 'description' | 'error' | 'errorMessage'> {
   variant?: string;
   size?: string;
-  width?: string;
+  width?: WidthProp['width'];
   hideStepper?: boolean;
 }
 
diff --git a/packages/components/src/Radio/Context.ts b/packages/components/src/Radio/Context.ts
index 0ef273fb2..d410832b2 100644
--- a/packages/components/src/Radio/Context.ts
+++ b/packages/components/src/Radio/Context.ts
@@ -1,10 +1,11 @@
 import { createContext, useContext } from 'react';
 import { RadioGroupState } from '@react-stately/radio';
+import { WidthProp } from '@marigold/system';
 
 export interface RadioGroupContextProps {
   variant?: string;
   size?: string;
-  width?: string;
+  width?: WidthProp['width'];
   error?: boolean;
   state: RadioGroupState;
 }
diff --git a/packages/components/src/Radio/RadioGroup.tsx b/packages/components/src/Radio/RadioGroup.tsx
index 12e7e937a..e70679373 100644
--- a/packages/components/src/Radio/RadioGroup.tsx
+++ b/packages/components/src/Radio/RadioGroup.tsx
@@ -3,7 +3,7 @@ import { useRadioGroup } from '@react-aria/radio';
 import { useRadioGroupState } from '@react-stately/radio';
 import { AriaRadioGroupProps } from '@react-types/radio';
 
-import { cn, useStateProps } from '@marigold/system';
+import { WidthProp, cn, useStateProps } from '@marigold/system';
 
 import { RadioGroupContext } from './Context';
 import { FieldBase } from '../FieldBase';
@@ -16,7 +16,7 @@ export interface RadioGroupProps
     'isDisabled' | 'isRquired' | 'isReadOnly ' | 'validationState'
   > {
   children: ReactNode[];
-  width?: string;
+  width?: WidthProp['width'];
   required?: boolean;
   disabled?: boolean;
   readOnly?: boolean;
diff --git a/packages/components/src/SearchField/SearchField.tsx b/packages/components/src/SearchField/SearchField.tsx
index d15115633..01437bdc1 100644
--- a/packages/components/src/SearchField/SearchField.tsx
+++ b/packages/components/src/SearchField/SearchField.tsx
@@ -5,7 +5,7 @@ import { SpectrumSearchFieldProps } from '@react-types/searchfield';
 import { TextFieldRef } from '@react-types/textfield';
 import { FieldBase } from '../FieldBase';
 import { Input } from '../Input';
-import { useStateProps } from '@marigold/system';
+import { WidthProp, useStateProps } from '@marigold/system';
 
 const SearchIcon = (props: { className?: string }) => (
   <svg
@@ -32,7 +32,7 @@ export interface SearchFieldInterface
   readOnly?: boolean;
   variant?: string;
   size?: string;
-  width?: string;
+  width?: WidthProp['width'];
 }
 
 const SearchField = (
diff --git a/packages/components/src/Select/Select.tsx b/packages/components/src/Select/Select.tsx
index 9559c6933..d6a7d4d1d 100644
--- a/packages/components/src/Select/Select.tsx
+++ b/packages/components/src/Select/Select.tsx
@@ -18,6 +18,7 @@ import {
   useClassNames,
   useSmallScreen,
   useStateProps,
+  WidthProp,
 } from '@marigold/system';
 import { HtmlProps } from '@marigold/types';
 
@@ -72,7 +73,7 @@ export interface SelectProps
     > {
   variant?: string;
   size?: string;
-  width?: string;
+  width?: WidthProp['width'];
   open?: boolean;
   disabled?: boolean;
   required?: boolean;
diff --git a/packages/components/src/Table/Table.tsx b/packages/components/src/Table/Table.tsx
index d98eca236..3e90b3b72 100755
--- a/packages/components/src/Table/Table.tsx
+++ b/packages/components/src/Table/Table.tsx
@@ -79,7 +79,7 @@ export const Table: Table = ({
         <TableHeader>
           {collection.headerRows.map(headerRow => (
             <TableHeaderRow key={headerRow.key} item={headerRow}>
-              {[...headerRow.childNodes].map(column =>
+              {[...collection.getChildren!(headerRow.key)].map(column =>
                 column.props?.isSelectionCell ? (
                   <TableSelectAllCell key={column.key} column={column} />
                 ) : (
@@ -90,17 +90,20 @@ export const Table: Table = ({
           ))}
         </TableHeader>
         <TableBody>
-          {[...collection.body.childNodes].map(row => (
-            <TableRow key={row.key} row={row}>
-              {[...row.childNodes].map(cell =>
-                cell.props?.isSelectionCell ? (
-                  <TableCheckboxCell key={cell.key} cell={cell} />
-                ) : (
-                  <TableCell key={cell.key} cell={cell} />
-                )
-              )}
-            </TableRow>
-          ))}
+          {...collection.rows.map(
+            row =>
+              row.type === 'item' && (
+                <TableRow key={row.key} row={row}>
+                  {[...collection.getChildren!(row.key)].map(cell =>
+                    cell.props?.isSelectionCell ? (
+                      <TableCheckboxCell key={cell.key} cell={cell} />
+                    ) : (
+                      <TableCell key={cell.key} cell={cell} />
+                    )
+                  )}
+                </TableRow>
+              )
+          )}
         </TableBody>
       </table>
     </TableContext.Provider>
diff --git a/packages/components/src/Table/TableRow.tsx b/packages/components/src/Table/TableRow.tsx
index 41470ff28..88faa25b1 100644
--- a/packages/components/src/Table/TableRow.tsx
+++ b/packages/components/src/Table/TableRow.tsx
@@ -24,7 +24,6 @@ export const TableRow = ({ children, row }: TableRowProps) => {
 
   const { variant, size } = row.props;
 
-  // question: why we need this?
   const classNames = useClassNames({
     component: 'Table',
     variant: variant || ctx.variant,
diff --git a/packages/components/src/TagGroup/TagGroup.tsx b/packages/components/src/TagGroup/TagGroup.tsx
index ba5d9c58b..4bcf7d6c9 100644
--- a/packages/components/src/TagGroup/TagGroup.tsx
+++ b/packages/components/src/TagGroup/TagGroup.tsx
@@ -3,7 +3,7 @@ import { useTagGroup, AriaTagGroupProps } from '@react-aria/tag';
 import { useListState } from '@react-stately/list';
 import { LabelableProps, HelpTextProps } from '@react-types/shared';
 
-import { useStateProps } from '@marigold/system';
+import { WidthProp, useStateProps } from '@marigold/system';
 import { FieldBase } from '../FieldBase';
 import { Tag } from './Tag';
 
@@ -13,7 +13,7 @@ export interface TagGroupProps
   extends Omit<AriaTagGroupProps<object>, 'isRequired' | 'validationState'>,
     LabelableProps,
     HelpTextProps {
-  width?: string;
+  width?: WidthProp['width'];
   required?: boolean;
   error?: boolean;
   allowsRemoving?: boolean;
diff --git a/packages/components/src/TextArea/TextArea.tsx b/packages/components/src/TextArea/TextArea.tsx
index d3f1db9c6..c2015a9af 100644
--- a/packages/components/src/TextArea/TextArea.tsx
+++ b/packages/components/src/TextArea/TextArea.tsx
@@ -5,7 +5,7 @@ import { useTextField } from '@react-aria/textfield';
 import { useObjectRef } from '@react-aria/utils';
 import { AriaTextFieldProps } from '@react-types/textfield';
 
-import { useClassNames, useStateProps } from '@marigold/system';
+import { WidthProp, useClassNames, useStateProps } from '@marigold/system';
 import { HtmlProps } from '@marigold/types';
 
 import { FieldBase, FieldBaseProps } from '../FieldBase';
@@ -41,7 +41,7 @@ export interface TextAreaProps
     Pick<FieldBaseProps, 'label' | 'description' | 'error' | 'errorMessage'> {
   variant?: string;
   size?: string;
-  width?: string;
+  width?: WidthProp['width'];
   value?: string;
   defaultValue?: string;
 }
diff --git a/packages/components/src/TextField/TextField.tsx b/packages/components/src/TextField/TextField.tsx
index a104fea26..1c9769f20 100644
--- a/packages/components/src/TextField/TextField.tsx
+++ b/packages/components/src/TextField/TextField.tsx
@@ -5,7 +5,7 @@ import { useTextField } from '@react-aria/textfield';
 import { mergeProps, useObjectRef } from '@react-aria/utils';
 import { AriaTextFieldProps } from '@react-types/textfield';
 
-import { useStateProps } from '@marigold/system';
+import { WidthProp, useStateProps } from '@marigold/system';
 import { HtmlProps } from '@marigold/types';
 
 import { FieldBase, FieldBaseProps } from '../FieldBase';
@@ -37,7 +37,7 @@ export interface TextFieldProps
     Pick<FieldBaseProps, 'label' | 'description' | 'error' | 'errorMessage'> {
   variant?: string;
   size?: string;
-  width?: string;
+  width?: WidthProp['width'];
   value?: string;
   defaultValue?: string;
 }
diff --git a/packages/system/src/style-props.tsx b/packages/system/src/style-props.tsx
index 5af8fdc80..ae6d80a3e 100644
--- a/packages/system/src/style-props.tsx
+++ b/packages/system/src/style-props.tsx
@@ -1,3 +1,68 @@
+export const width = {
+  full: 'w-full',
+  auto: 'w-auto',
+  px: 'w-px',
+  0: 'w-0',
+  '0.5': 'w-0.5',
+  1: 'w-1',
+  '1.5': 'w-1.5',
+  2: 'w-2',
+  '2.5': 'w-2.5',
+  3: 'w-3',
+  '3.5': 'w-3.5',
+  4: 'w-4',
+  5: 'w-5',
+  6: 'w-6',
+  7: 'w-7',
+  8: 'w-8',
+  9: 'w-9',
+  10: 'w-10',
+  11: 'w-11',
+  12: 'w-12',
+  14: 'w-14',
+  16: 'w-16',
+  20: 'w-20',
+  24: 'w-24',
+  28: 'w-28',
+  32: 'w-32',
+  36: 'w-36',
+  40: 'w-40',
+  44: 'w-44',
+  48: 'w-48',
+  52: 'w-52',
+  56: 'w-56',
+  60: 'w-60',
+  64: 'w-64',
+  72: 'w-72',
+  80: 'w-80',
+  96: 'w-96',
+  '1/2': 'w-1/2',
+  '1/3': 'w-1/3',
+  '2/3': 'w-2/3',
+  '1/4': 'w-1/4',
+  '2/4': 'w-2/4',
+  '3/4': 'w-3/4',
+  '1/5': 'w-1/5',
+  '2/5': 'w-2/5',
+  '3/5': 'w-3/5',
+  '1/6': 'w-1/6',
+  '2/6': 'w-2/6',
+  '3/6': 'w-3/6',
+  '4/6': 'w-4/6',
+  '5/6': 'w-5/6',
+  '1/12': 'w-1/12',
+  '2/12': 'w-2/12',
+  '3/12': 'w-3/12',
+  '4/12': 'w-4/12',
+  '5/12': 'w-5/12',
+  '6/12': 'w-6/12',
+  '7/12': 'w-7/12',
+  '8/12': 'w-8/12',
+  '9/12': 'w-9/12',
+  '10/12': 'w-10/12',
+  '11/12': 'w-11/12',
+};
+
 export const fontWeight = {
   thin: 'font-thin',
   extralight: 'font-extralight',
@@ -270,7 +335,6 @@ export const cursorStyle = {
 };
 
 export type AspectProp = { ratio?: keyof typeof aspect };
-
 export type AlignmentProp = {
   orientation?: {
     vertical?: {
@@ -283,9 +347,6 @@ export type AlignmentProp = {
     };
   };
 };
-
-export interface AlignmentProps extends AlignmentProp {}
-
 export type CursorProp = { cursor?: keyof typeof cursorStyle };
 export type FontStyleProp = { fontStyle?: keyof typeof textStyle };
 export type FontWeightProp = { weight?: keyof typeof fontWeight };
@@ -304,3 +365,4 @@ export type PaddingTopProp = { pt?: keyof typeof paddingTop };
 export type PaddingBottomProp = { pb?: keyof typeof paddingBottom };
 export type PlaceItemsProp = { align?: keyof typeof placeItems };
 export type TextAlignProp = { align?: keyof typeof textAlign };
+export type WidthProp = { width?: keyof typeof width };


Test patch:
diff --git a/packages/components/src/ComboBox/ComboBox.test.tsx b/packages/components/src/ComboBox/ComboBox.test.tsx
index b9533a3ab..63384fcce 100644
--- a/packages/components/src/ComboBox/ComboBox.test.tsx
+++ b/packages/components/src/ComboBox/ComboBox.test.tsx
@@ -81,9 +81,7 @@ test('supports width classname', () => {
 
   // eslint-disable-next-line testing-library/no-node-access
   const container = screen.getByText('Label').parentElement;
-  expect(container?.className).toMatchInlineSnapshot(
-    `"group/field w-[--fieldWidth]"`
-  );
+  expect(container?.className).toMatchInlineSnapshot(`"group/field w-full"`);
 });
 
 test('supports classnames', () => {
@@ -108,9 +106,7 @@ test('supports classnames', () => {
   expect(button.className).toMatchInlineSnapshot(
     `"inline-flex items-center justify-center gap-[0.5ch] absolute right-2 h-4 w-4 border-none bg-transparent p-0"`
   );
-  expect(container?.className).toMatchInlineSnapshot(
-    `"group/field w-[--fieldWidth]"`
-  );
+  expect(container?.className).toMatchInlineSnapshot(`"group/field w-full"`);
   expect(label.className).toMatchInlineSnapshot(
     `"text-teal-300 flex w-[var(--labelWidth)]"`
   );
diff --git a/packages/components/src/FieldBase/FieldBase.test.tsx b/packages/components/src/FieldBase/FieldBase.test.tsx
index 9faae4f72..dded5ca8f 100644
--- a/packages/components/src/FieldBase/FieldBase.test.tsx
+++ b/packages/components/src/FieldBase/FieldBase.test.tsx
@@ -174,21 +174,5 @@ test('takes full width by default', () => {
 
   // eslint-disable-next-line testing-library/no-node-access
   const container = screen.getByText('Label').parentElement!;
-  expect(container.getAttribute('style')).toMatchInlineSnapshot(
-    `"--fieldWidth: 100%;"`
-  );
-});
-
-test('allows to set custom width', () => {
-  render(
-    <FieldBase label="Label" description="Description" width="60px">
-      <input type="text" />
-    </FieldBase>
-  );
-
-  // eslint-disable-next-line testing-library/no-node-access
-  const container = screen.getByText('Label').parentElement!;
-  expect(container.getAttribute('style')).toMatchInlineSnapshot(
-    `"--fieldWidth: 60px;"`
-  );
+  expect(container.className).toMatchInlineSnapshot(`"group/field w-full"`);
 });
diff --git a/packages/components/src/NumberField/NumberField.test.tsx b/packages/components/src/NumberField/NumberField.test.tsx
index 8ebdddb5e..b2534e384 100644
--- a/packages/components/src/NumberField/NumberField.test.tsx
+++ b/packages/components/src/NumberField/NumberField.test.tsx
@@ -77,13 +77,11 @@ test('group and stepper can styled via "NumberField" styles', () => {
 });
 
 test('allows to set width via prop', () => {
-  render(<NumberField data-testid="number-field" label="Label" width="huge" />);
+  render(<NumberField data-testid="number-field" label="Label" width="1/2" />);
 
   // eslint-disable-next-line testing-library/no-node-access
   const container = screen.getByText('Label').parentElement;
-  expect(container?.className).toMatchInlineSnapshot(
-    `"group/field w-[--fieldWidth]"`
-  );
+  expect(container?.className).toMatchInlineSnapshot(`"group/field w-1/2"`);
 });
 
 test('supports disabled', () => {
diff --git a/packages/components/src/Select/Select.test.tsx b/packages/components/src/Select/Select.test.tsx
index c9458aadf..86c580054 100644
--- a/packages/components/src/Select/Select.test.tsx
+++ b/packages/components/src/Select/Select.test.tsx
@@ -427,7 +427,7 @@ test('supports styling classnames with variants and sizes from theme', () => {
 test('set width via props', () => {
   render(
     <OverlayProvider>
-      <Select label="Label" data-testid="select" width="200">
+      <Select label="Label" data-testid="select" width="1/2">
         <Select.Option key="one">one</Select.Option>
         <Select.Option key="two">two</Select.Option>
       </Select>
@@ -437,7 +437,7 @@ test('set width via props', () => {
   // We need to query all, since there is also a label in the hidden select
   // eslint-disable-next-line testing-library/no-node-access
   const container = screen.getAllByText('Label')[0].parentElement;
-  expect(container).toHaveStyle('width: 200');
+  expect(container?.className).toMatchInlineSnapshot(`"group/field w-1/2"`);
 });
 
 test('forwards ref', () => {
@@ -493,7 +493,7 @@ test('error is there', () => {
       <Select
         label="Label"
         data-testid="select"
-        width="200"
+        width="1/2"
         error
         errorMessage="Error"
       >
diff --git a/packages/components/src/Table/Table.test.tsx b/packages/components/src/Table/Table.test.tsx
index 630cf4b3c..678789637 100644
--- a/packages/components/src/Table/Table.test.tsx
+++ b/packages/components/src/Table/Table.test.tsx
@@ -49,11 +49,11 @@ test('renders contens correctly', () => {
   render(
     <Table aria-label="Example table">
       <Table.Header columns={columns}>
-        {column => <Table.Column>{column.name}</Table.Column>}
+        {column => <Table.Column key={column.key}>{column.name}</Table.Column>}
       </Table.Header>
       <Table.Body items={rows}>
         {item => (
-          <Table.Row>
+          <Table.Row key={item.id}>
             {columnKey => <Table.Cell>{item[columnKey]}</Table.Cell>}
           </Table.Row>
         )}
diff --git a/packages/components/src/TextField/TextField.test.tsx b/packages/components/src/TextField/TextField.test.tsx
index d7e2597ca..9ed4f247b 100644
--- a/packages/components/src/TextField/TextField.test.tsx
+++ b/packages/components/src/TextField/TextField.test.tsx
@@ -74,11 +74,11 @@ test('takes full width by default', () => {
 });
 
 test('allows to set custom width', () => {
-  render(<TextField label="Label" width="200px" />);
+  render(<TextField label="Label" width="1/2" />);
 
   // eslint-disable-next-line testing-library/no-node-access
   const container = screen.getByText('Label').parentElement;
-  expect(container).toHaveStyle(`width: 200`);
+  expect(container?.className).toMatchInlineSnapshot(`"group/field w-1/2"`);
 });
 
 test('supports disabled', () => {