@ceed/cds 1.34.0 → 1.35.0

package/dist/components/inputs/Autocomplete.md

@@ -79,10 +79,19 @@ The `variant` prop controls the visual style of the autocomplete input. Availabl
 
 ```tsx
 <Stack gap={2} p={2}>
-  {variants.map(variant => <Autocomplete key={variant} variant={variant} options={sampleOptions} placeholder={variant} label={variant} sx={{
-    maxWidth: 300
-  }} />)}
-</Stack>
+    {variants.map((variant) => (
+      <Autocomplete
+        key={variant}
+        variant={variant}
+        options={sampleOptions}
+        placeholder={variant}
+        label={variant}
+        sx={{
+          maxWidth: 300
+        }}
+      />
+    ))}
+  </Stack>
 ```
 
 ## Sizes
@@ -90,14 +99,16 @@ The `variant` prop controls the visual style of the autocomplete input. Availabl
 Available size options: `sm`, `md`, `lg`.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '10px'
-}}>
-<Autocomplete {...args} size="sm" />
-<Autocomplete {...args} size="md" />
-<Autocomplete {...args} size="lg" />
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "10px"
+    }}
+  >
+    <Autocomplete {...args} size="sm" />
+    <Autocomplete {...args} size="md" />
+    <Autocomplete {...args} size="lg" />
+  </div>
 ```
 
 ## Colors
@@ -106,10 +117,19 @@ The `color` prop changes the color scheme. Available colors: `primary`, `neutral
 
 ```tsx
 <Stack gap={2} p={2}>
-  {colors.map(color => <Autocomplete key={color} color={color} options={sampleOptions} defaultValue="Apple" label={color} sx={{
-    maxWidth: 300
-  }} />)}
-</Stack>
+    {colors.map((color) => (
+      <Autocomplete
+        key={color}
+        color={color}
+        options={sampleOptions}
+        defaultValue="Apple"
+        label={color}
+        sx={{
+          maxWidth: 300
+        }}
+      />
+    ))}
+  </Stack>
 ```
 
 ## States
@@ -133,14 +153,23 @@ Set `error` along with `helperText` to indicate validation failures.
 Set `required` to mark the field as required in a form.
 
 ```tsx
-<Stack gap={3} p={2} sx={{
-  maxWidth: 300
-}}>
-<Autocomplete label="Disabled" options={sampleOptions} defaultValue="Apple" disabled />
-<Autocomplete label="Read Only" options={sampleOptions} defaultValue="Banana" readOnly />
-<Autocomplete label="Error" options={sampleOptions} error helperText="This field is required" />
-<Autocomplete label="Required" options={sampleOptions} required placeholder="Select a fruit..." />
-</Stack>
+<Stack
+    gap={3}
+    p={2}
+    sx={{
+      maxWidth: 300
+    }}
+  >
+    <Autocomplete label="Disabled" options={sampleOptions} defaultValue="Apple" disabled />
+    <Autocomplete label="Read Only" options={sampleOptions} defaultValue="Banana" readOnly />
+    <Autocomplete label="Error" options={sampleOptions} error helperText="This field is required" />
+    <Autocomplete
+      label="Required"
+      options={sampleOptions}
+      required
+      placeholder="Select a fruit..."
+    />
+  </Stack>
 ```
 
 ## Free Solo
@@ -150,18 +179,30 @@ The `freeSolo` prop allows users to type arbitrary values that are not in the op
 > ⚠️ **Known limitation**: The component's internal `handleChange` accesses `newValue.value`, which is `undefined` for raw strings in freeSolo mode. Typed arbitrary values may not propagate correctly through `onChange`. Consider using `onInputChange` as an alternative for capturing free-text input.
 
 ```tsx
-<Stack gap={2} p={2} sx={{
-  maxWidth: 300
-}}>
-<Autocomplete label="Free Solo" options={sampleOptions} freeSolo placeholder="Type anything..." value={value} onChange={e => setValue(e.target.value)} />
-<Typography level="body-sm" textColor="text.tertiary">
-  Current value: {value ?? '(empty)'}
-</Typography>
-<Typography level="body-xs" textColor="text.tertiary">
-  Note: freeSolo allows arbitrary text input. However, the component&apos;s onChange handler accesses
-  newValue.value which is undefined for raw strings, so typed values may not propagate correctly.
-</Typography>
-</Stack>
+<Stack
+    gap={2}
+    p={2}
+    sx={{
+      maxWidth: 300
+    }}
+  >
+    <Autocomplete
+      label="Free Solo"
+      options={sampleOptions}
+      freeSolo
+      placeholder="Type anything..."
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+    />
+    <Typography level="body-sm" textColor="text.tertiary">
+      Current value: {value ?? "(empty)"}
+    </Typography>
+    <Typography level="body-xs" textColor="text.tertiary">
+      Note: freeSolo allows arbitrary text input. However, the component&apos;s onChange handler
+      accesses newValue.value which is undefined for raw strings, so typed values may not propagate
+      correctly.
+    </Typography>
+  </Stack>
 ```
 
 ## Disable Clearable
@@ -186,13 +227,26 @@ Customize the messages shown when there are no matching options or while loading
 
 ```tsx
 <Stack gap={3} direction="row" p={2}>
-  <Autocomplete label="Custom No Options Text" options={[]} noOptionsText="No fruits found — try a different search" placeholder="Search fruits..." sx={{
-    minWidth: 280
-  }} />
-  <Autocomplete label="Custom Loading Text" options={[]} loading loadingText="Fetching fruits from the orchard..." placeholder="Loading fruits..." sx={{
-    minWidth: 280
-  }} />
-</Stack>
+    <Autocomplete
+      label="Custom No Options Text"
+      options={[]}
+      noOptionsText="No fruits found — try a different search"
+      placeholder="Search fruits..."
+      sx={{
+        minWidth: 280
+      }}
+    />
+    <Autocomplete
+      label="Custom Loading Text"
+      options={[]}
+      loading
+      loadingText="Fetching fruits from the orchard..."
+      placeholder="Loading fruits..."
+      sx={{
+        minWidth: 280
+      }}
+    />
+  </Stack>
 ```
 
 ## Multiple Selection
@@ -200,15 +254,17 @@ Customize the messages shown when there are no matching options or while loading
 Enable `multiple` to allow selecting more than one option. Selected values are shown as chips.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '10px'
-}}>
-<Autocomplete {...args} size="sm" />
-<Autocomplete {...args} size="md" />
-<Autocomplete {...args} size="lg" />
-</div>
+<div
+    style={{
+      display: "flex",
+      flexDirection: "column",
+      gap: "10px"
+    }}
+  >
+    <Autocomplete {...args} size="sm" />
+    <Autocomplete {...args} size="md" />
+    <Autocomplete {...args} size="lg" />
+  </div>
 ```
 
 ### Limit Tags
@@ -218,18 +274,34 @@ In multiple mode, use `limitTags` to control how many tags are visible before tr
 > 💡 The component uses a custom `renderTags` implementation. JoyUI's `limitTags` truncates the array passed to `renderTags`, so tags will be limited, but the default "+N more" indicator text may not appear.
 
 ```tsx
-<Stack gap={3} p={2} sx={{
-  maxWidth: 400
-}}>
-<Stack gap={1}>
-  <Typography level="title-sm">limitTags=2</Typography>
-  <Autocomplete multiple options={sampleOptions} defaultValue={['Apple', 'Banana', 'Cherry', 'Date']} limitTags={2} label="Limit Tags" />
-</Stack>
-<Stack gap={1}>
-  <Typography level="title-sm">filterSelectedOptions</Typography>
-  <Autocomplete multiple options={sampleOptions} defaultValue={['Apple', 'Banana']} filterSelectedOptions label="Filter Selected Options" />
-</Stack>
-</Stack>
+<Stack
+    gap={3}
+    p={2}
+    sx={{
+      maxWidth: 400
+    }}
+  >
+    <Stack gap={1}>
+      <Typography level="title-sm">limitTags=2</Typography>
+      <Autocomplete
+        multiple
+        options={sampleOptions}
+        defaultValue={["Apple", "Banana", "Cherry", "Date"]}
+        limitTags={2}
+        label="Limit Tags"
+      />
+    </Stack>
+    <Stack gap={1}>
+      <Typography level="title-sm">filterSelectedOptions</Typography>
+      <Autocomplete
+        multiple
+        options={sampleOptions}
+        defaultValue={["Apple", "Banana"]}
+        filterSelectedOptions
+        label="Filter Selected Options"
+      />
+    </Stack>
+  </Stack>
 ```
 
 ## Option Groups
@@ -287,19 +359,34 @@ Options can display a secondary line of text using the `secondaryText` property.
 
 ```tsx
 <Stack gap={4} direction="row" alignItems="flex-start" p={2}>
-  {sizes.map(size => <Stack key={size} gap={1}>
-  <span style={{
-    color: '#6366f1',
-    fontSize: 12
-  }}>{size}</span>
-  <Autocomplete placeholder="Placeholder" options={optionsWithSecondaryText} value={values[size]} onChange={e => setValues(prev => ({
-    ...prev,
-    [size]: e.target.value
-  }))} sx={{
-    minWidth: 200
-  }} size={size} />
-</Stack>)}
-</Stack>
+    {sizes.map((size) => (
+      <Stack key={size} gap={1}>
+        <span
+          style={{
+            color: "#6366f1",
+            fontSize: 12
+          }}
+        >
+          {size}
+        </span>
+        <Autocomplete
+          placeholder="Placeholder"
+          options={optionsWithSecondaryText}
+          value={values[size]}
+          onChange={(e) =>
+            setValues((prev) => ({
+              ...prev,
+              [size]: e.target.value
+            }))
+          }
+          sx={{
+            minWidth: 200
+          }}
+          size={size}
+        />
+      </Stack>
+    ))}
+  </Stack>
 ```
 
 ## Loading State
@@ -321,24 +408,33 @@ Manage value externally with controlled state.
 
 ```tsx
 <Stack gap={4}>
-  <Autocomplete value={value} label="Select a brand" options={[{
-    value: "Johnson's baby",
-    label: "Johnson's baby",
-    startDecorator: <Chip color="success">Active</Chip>,
-    endDecorator: <Chip color="neutral">inbound</Chip>
-  }, {
-    value: 'Haggis Magic',
-    label: 'Haggis Magic',
-    startDecorator: <Chip color="danger">Terminated</Chip>,
-    endDecorator: <Chip color="neutral">outbound</Chip>
-  }, {
-    value: 'Hogwarts Magic',
-    label: 'Hogwarts Magic',
-    startDecorator: <Chip color="danger">Magic</Chip>,
-    endDecorator: <Chip color="neutral">Muggle</Chip>
-  }]} onChange={e => setValue(e.target.value)} />
-  <Button onClick={() => setValue("Johnson's baby")}>Set Johnson's baby</Button>
-</Stack>
+    <Autocomplete
+      value={value}
+      label="Select a brand"
+      options={[
+        {
+          value: "Johnson's baby",
+          label: "Johnson's baby",
+          startDecorator: <Chip color="success">Active</Chip>,
+          endDecorator: <Chip color="neutral">inbound</Chip>
+        },
+        {
+          value: "Haggis Magic",
+          label: "Haggis Magic",
+          startDecorator: <Chip color="danger">Terminated</Chip>,
+          endDecorator: <Chip color="neutral">outbound</Chip>
+        },
+        {
+          value: "Hogwarts Magic",
+          label: "Hogwarts Magic",
+          startDecorator: <Chip color="danger">Magic</Chip>,
+          endDecorator: <Chip color="neutral">Muggle</Chip>
+        }
+      ]}
+      onChange={(e) => setValue(e.target.value)}
+    />
+    <Button onClick={() => setValue("Johnson's baby")}>Set Johnson's baby</Button>
+  </Stack>
 ```
 
 ### Uncontrolled

package/dist/components/inputs/Button.md

@@ -6,12 +6,12 @@ Button is the primary interactive element for triggering actions. Built on Joy U
 
 ```tsx
 <>
-  {/* @ts-ignore */}
-  <Button {...props} startDecorator={<Add />} />
-  <IconButton {...props} aria-label="Add">
-    <Add />
-  </IconButton>
-</>
+    {/* @ts-ignore */}
+    <Button {...props} startDecorator={<Add />} />
+    <IconButton {...props} aria-label="Add">
+      <Add />
+    </IconButton>
+  </>
 ```
 
 | Field   | Description | Default   |
@@ -38,10 +38,10 @@ The most basic button usage.
 
 ```tsx
 <>
-  <Button {...props} />
-  <Button {...props} disabled />
-  <Button {...props} loading />
-</>
+    <Button {...props} />
+    <Button {...props} disabled />
+    <Button {...props} loading />
+  </>
 ```
 
 ### Disabled State
@@ -50,19 +50,19 @@ A disabled button cannot be clicked and is visually dimmed.
 
 ```tsx
 <>
-  <Button {...props} startDecorator={<Add />} variant="solid">
-    Solid
-  </Button>
-  <Button {...props} startDecorator={<Add />} variant="soft">
-    Soft
-  </Button>
-  <Button {...props} startDecorator={<Add />} variant="outlined">
-    Outlined
-  </Button>
-  <Button {...props} startDecorator={<Add />} variant="plain">
-    Plain
-  </Button>
-</>
+    <Button {...props} startDecorator={<Add />} variant="solid">
+      Solid
+    </Button>
+    <Button {...props} startDecorator={<Add />} variant="soft">
+      Soft
+    </Button>
+    <Button {...props} startDecorator={<Add />} variant="outlined">
+      Outlined
+    </Button>
+    <Button {...props} startDecorator={<Add />} variant="plain">
+      Plain
+    </Button>
+  </>
 ```
 
 ### Loading State
@@ -88,19 +88,19 @@ Four visual styles are available to indicate action importance.
 
 ```tsx
 <>
-  <Button {...props} variant="solid">
-    Solid
-  </Button>
-  <Button {...props} variant="soft">
-    Soft
-  </Button>
-  <Button {...props} variant="outlined">
-    Outlined
-  </Button>
-  <Button {...props} variant="plain">
-    Plain
-  </Button>
-</>
+    <Button {...props} variant="solid">
+      Solid
+    </Button>
+    <Button {...props} variant="soft">
+      Soft
+    </Button>
+    <Button {...props} variant="outlined">
+      Outlined
+    </Button>
+    <Button {...props} variant="plain">
+      Plain
+    </Button>
+  </>
 ```
 
 - **solid**: High-emphasis primary actions (default)
@@ -114,16 +114,16 @@ Three sizes are available: `sm`, `md` (default), and `lg`.
 
 ```tsx
 <>
-  <Button {...props} size="sm">
-    Small
-  </Button>
-  <Button {...props} size="md">
-    Medium
-  </Button>
-  <Button {...props} size="lg">
-    Large
-  </Button>
-</>
+    <Button {...props} size="sm">
+      Small
+    </Button>
+    <Button {...props} size="md">
+      Medium
+    </Button>
+    <Button {...props} size="lg">
+      Large
+    </Button>
+  </>
 ```
 
 ### Colors
@@ -132,22 +132,22 @@ Apply semantic colors to communicate intent.
 
 ```tsx
 <>
-  <Button {...props} color="primary">
-    Primary
-  </Button>
-  <Button {...props} color="neutral">
-    Neutral
-  </Button>
-  <Button {...props} color="danger">
-    Danger
-  </Button>
-  <Button {...props} color="success">
-    Success
-  </Button>
-  <Button {...props} color="warning">
-    Warning
-  </Button>
-</>
+    <Button {...props} color="primary">
+      Primary
+    </Button>
+    <Button {...props} color="neutral">
+      Neutral
+    </Button>
+    <Button {...props} color="danger">
+      Danger
+    </Button>
+    <Button {...props} color="success">
+      Success
+    </Button>
+    <Button {...props} color="warning">
+      Warning
+    </Button>
+  </>
 ```
 
 - **primary**: Main actions (default)
@@ -162,13 +162,13 @@ Add icons or other elements before or after the button text using `startDecorato
 
 ```tsx
 <>
-  <Button {...props} startDecorator={<Add />}>
-    Add to cart
-  </Button>
-  <Button {...props} endDecorator={<Add />} color="success">
-    Go to checkout
-  </Button>
-</>
+    <Button {...props} startDecorator={<Add />}>
+      Add to cart
+    </Button>
+    <Button {...props} endDecorator={<Add />} color="success">
+      Go to checkout
+    </Button>
+  </>
 ```
 
 ### Loading Indicator
@@ -177,13 +177,13 @@ Customize the loading spinner with the `loadingIndicator` prop.
 
 ```tsx
 <>
-  <Button {...props} loading>
-    Default
-  </Button>
-  <Button {...props} loading loadingIndicator="Loading…">
-    Custom
-  </Button>
-</>
+    <Button {...props} loading>
+      Default
+    </Button>
+    <Button {...props} loading loadingIndicator="Loading…">
+      Custom
+    </Button>
+  </>
 ```
 
 ### Loading Position
@@ -192,13 +192,13 @@ Control where the loading indicator appears with `loadingPosition`.
 
 ```tsx
 <>
-  <Button {...props} loading loadingPosition="start">
-    Start
-  </Button>
-  <Button {...props} loading loadingPosition="end" endDecorator={<Add />}>
-    End
-  </Button>
-</>
+    <Button {...props} loading loadingPosition="start">
+      Start
+    </Button>
+    <Button {...props} loading loadingPosition="end" endDecorator={<Add />}>
+      End
+    </Button>
+  </>
 ```
 
 ## Common Use Cases