fix: [docs] sync props tables with components

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

@@ -1,16 +1,16 @@
 import { ReactElement, ReactNode } from 'react';
 
 export interface BreadcrumbItem {
-  /** Text to display for the item */
-  label: string;
+  /** Content of the item, usually its text */
+  children?: ReactNode;
 
   /** URL for the item link */
   href?: string;
 
-  /** Optional icon element to display before the label */
+  /** Optional icon element to display before the content */
   leadingIcon?: ReactNode;
 
-  /** Optional icon element to display after the label */
+  /** Optional icon element to display after the content */
   trailingIcon?: ReactNode;
 
   /**

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

@@ -137,6 +137,11 @@ export interface CalendarProps {
 }
 
 export interface RangePickerProps {
+  /**
+   * Additional CSS class names for the group that holds the start and end inputs.
+   */
+  pickerGroupClassName?: string;
+
   /**
    * Format for displaying the date. Supports various formats:
    * - With slashes: "DD/MM/YYYY", "MM/DD/YYYY", "YYYY/MM/DD"

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

@@ -51,6 +51,9 @@ export interface CalloutProps {
   /** Additional CSS class names */
   className?: string;
 
+  /** Inline styles for the callout */
+  style?: React.CSSProperties;
+
   /**
    * Corner radius for this callout only. Overrides the theme's `radius`.
    * @defaultValue The theme's `radius`

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

@@ -31,6 +31,9 @@ export interface ChipProps {
   /** Callback function when dismiss button is clicked */
   onDismiss?: () => void;
 
+  /** Disables the chip and its dismiss button */
+  disabled?: boolean;
+
   /** Content to display inside the chip */
   children?: React.ReactNode;
 

apps/www/src/content/docs/components/code-block/index.mdx

@@ -111,7 +111,7 @@ Renders a text label displayed in the header.
 
 ### LanguageSelect
 
-Renders a language selection dropdown container.
+Renders a language selection dropdown container. It accepts the props of a single-selection `Select` root.
 
 <auto-type-table path="./props.ts" name="CodeBlockLanguageSelectProps" />
 

apps/www/src/content/docs/components/code-block/props.ts

@@ -119,12 +119,28 @@ export interface CodeBlockLanguageSelectProps {
   /**
    * Available languages for selection
    */
-  children: ReactNode;
+  children?: ReactNode;
 
   /**
-   * Additional CSS class name
+   * The controlled open state of the dropdown
    */
-  className?: string;
+  open?: boolean;
+
+  /**
+   * The initial open state when uncontrolled
+   * @defaultValue false
+   */
+  defaultOpen?: boolean;
+
+  /**
+   * Callback fired when the open state changes
+   */
+  onOpenChange?: (open: boolean) => void;
+
+  /**
+   * Prevents the user from changing the language
+   */
+  disabled?: boolean;
 }
 
 export interface CodeBlockLanguageSelectTriggerProps {

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

@@ -52,6 +52,17 @@ export interface FieldLabelProps {
    */
   required?: boolean;
 
+  /**
+   * Text rendered next to the label when `required={false}`.
+   * @defaultValue "(optional)"
+   */
+  optionalText?: string;
+
+  /**
+   * Text rendered next to the label when `required={true}`. No indicator is rendered when it is omitted.
+   */
+  requiredText?: string;
+
   /** Additional CSS class names. */
   className?: string;
 }

apps/www/src/content/docs/components/floating-actions/props.ts

@@ -47,6 +47,12 @@ export interface FloatingActionsSeparatorProps {
    */
   size?: 'small' | 'half' | 'full';
 
+  /**
+   * Hides the separator from assistive technology.
+   * @defaultValue false
+   */
+  decorative?: boolean;
+
   /** Additional CSS class names. */
   className?: string;
 

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

@@ -52,4 +52,7 @@ export interface IconButtonProps {
    * @defaultValue The theme's `radius`
    */
   radius?: 'none' | 'small' | 'medium' | 'large' | 'full';
+
+  /** Accessible name for the button. */
+  'aria-label'?: string;
 }

apps/www/src/content/docs/components/indicator/index.mdx

@@ -76,7 +76,7 @@ The Indicator component includes several accessibility features:
 
 - Uses `role="status"` to indicate its purpose to screen readers
 - Provides appropriate `aria-label` based on the content:
-  - Uses custom `ariaLabel` prop if provided
+  - Uses custom `aria-label` prop if provided
   - Falls back to the label text if available
   - Uses a default "indicator" if neither is provided
 - Hides decorative dot from screen readers when no label is present

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

@@ -15,7 +15,7 @@ export interface IndicatorProps {
   pulse?: boolean;
 
   /** Optional custom description for screen readers */
-  ariaLabel?: string;
+  'aria-label'?: string;
 
   /** The content to show the indicator on */
   children: React.ReactNode;

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

@@ -6,15 +6,15 @@ export const preview = {
   <Flex align="center" justify="center">
     <List>
       <List.Header>User Information</List.Header>
-      <List.Item align="center">
+      <List.Item>
         <List.Label style={{ minWidth: "88px" }}>Status</List.Label>
         <List.Value>Active</List.Value>
       </List.Item>
-      <List.Item align="center">
+      <List.Item>
         <List.Label style={{ minWidth: "88px" }}>Type</List.Label>
         <List.Value>Premium Account</List.Value>
       </List.Item>
-      <List.Item align="center">
+      <List.Item>
         <List.Label style={{ minWidth: "88px" }}>Created</List.Label>
         <List.Value>April 24, 2024</List.Value>
       </List.Item>
@@ -27,28 +27,10 @@ export const basicDemo = {
   code: `
   <List>
   <List.Header>User Information</List.Header>
-  <List.Item align="center">
+  <List.Item>
     <List.Label style={{ minWidth: "88px" }}>Status</List.Label>
     <List.Value>Active</List.Value>
   </List.Item>
 </List>;
   `
 };
-
-export const alignDemo = {
-  type: 'code',
-  code: `
-<List>
-  <List.Header>Deployment</List.Header>
-  <List.Item align="center">
-    <List.Label style={{ minWidth: "96px" }}>Status</List.Label>
-    <List.Value>Succeeded</List.Value>
-  </List.Item>
-  <List.Item align="start">
-    <List.Label style={{ minWidth: "96px" }}>Notes</List.Label>
-    <List.Value>
-      Rolled out to three regions. Two nodes were drained and replaced during the rollout.
-    </List.Value>
-  </List.Item>
-</List>`
-};

apps/www/src/content/docs/components/list/index.mdx

@@ -5,7 +5,6 @@ source: packages/react/components/list
 ---
 
 import { basicDemo, preview,
-  alignDemo,
 } from "./demo.ts";
 
 <Demo data={preview} />
@@ -36,12 +35,6 @@ A `Header` labels the group, then each `Item` pairs a `Label` with its `Value`.
 
 <Demo data={basicDemo} />
 
-### Aligning rows
-
-`align` on an `Item` controls how the label sits against its value. `center` suits one-line values; switch to `start` when the value wraps, so the label stays level with the first line rather than floating in the middle.
-
-<Demo data={alignDemo} />
-
 ## API Reference
 
 Each item holds an aligned label and value, with an optional header above them.

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

@@ -1,4 +1,7 @@
 export interface ListRootProps {
+  /** List items and an optional header. */
+  children: React.ReactNode;
+
   /** Additional CSS class names. */
   className?: string;
 }
@@ -18,12 +21,6 @@ export interface ListHeaderProps {
 }
 
 export interface ListItemProps {
-  /**
-   * Alignment of the item content.
-   * @default "start"
-   */
-  align?: 'start' | 'center' | 'end';
-
   /** Content to be displayed in the item. */
   children?: React.ReactNode;
 

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

@@ -5,6 +5,12 @@ export interface SearchProps {
    */
   size?: 'small' | 'large';
 
+  /**
+   * Visual variant of the input.
+   * @default "default"
+   */
+  variant?: 'default' | 'borderless';
+
   /** Placeholder text for the input. */
   placeholder?: string;
 

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

@@ -1,4 +1,36 @@
 export interface SelectRootProps {
+  /** The selected value. An array when `multiple` is set. */
+  value?: string | string[];
+
+  /** The value selected on first render when `value` is not set. An array when `multiple` is set. */
+  defaultValue?: string | string[];
+
+  /** Called when the selection changes. Receives an array when `multiple` is set. */
+  onValueChange?: (value: string | string[]) => void;
+
+  /** Whether the list is open. */
+  open?: boolean;
+
+  /** Whether the list is open on first render when `open` is not set.
+   * @default false
+   */
+  defaultOpen?: boolean;
+
+  /** Called when the list opens or closes. */
+  onOpenChange?: (open: boolean) => void;
+
+  /** Whether the select is disabled. */
+  disabled?: boolean;
+
+  /** Whether a value is required. Defaults to the `required` of the surrounding `Field`. */
+  required?: boolean;
+
+  /** Name of the field when the select is submitted with a form. */
+  name?: string;
+
+  /** The select's parts, such as `Select.Trigger` and `Select.Content`. */
+  children?: React.ReactNode;
+
   /** Enables multiple selection.
    * When enabled, value, onValueChange, and defaultValue will be an array of strings.
    * @default false
@@ -25,6 +57,9 @@ export interface SelectRootProps {
 
   /** Callback fired when the search value changes */
   onSearch?: (value: string) => void;
+
+  /** All item values. In autocomplete mode, setting it turns off the filtering of `Select.Item` children. */
+  items?: string[];
 }
 
 export interface SelectTriggerProps {
@@ -93,6 +128,9 @@ export interface SelectItemProps {
   /** The value of the item. */
   value: string;
 
+  /** Icon rendered before the item text. */
+  leadingIcon?: React.ReactNode;
+
   /** Additional CSS class names. */
   className?: string;
 }

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

@@ -23,6 +23,11 @@ export interface ToastProviderProps {
    */
   timeout?: number;
 
+  /**
+   * Toast manager instance. Defaults to the exported `toastManager`. Pass one from `Toast.createToastManager()` to scope toasts to this provider.
+   */
+  toastManager?: CreateToastManagerReturn;
+
   children?: React.ReactNode;
 }
 

apps/www/src/content/docs/dataview/props.ts

@@ -1,4 +1,4 @@
-import { ReactNode, RefObject } from 'react';
+import { CSSProperties, ReactNode, RefObject } from 'react';
 
 // Documentation-only placeholders so `auto-type-table` can render the public
 // API without surfacing real generics (TData is shown as `T` for readability).
@@ -74,6 +74,9 @@ export interface DataViewProps {
    * Keeps the wire format (`group_by: string[]`) unchanged.
    */
   groupByResolvers?: Record<string, (row: T) => string>;
+
+  /** The DataView's toolbar, renderers and other parts. */
+  children?: ReactNode;
 }
 
 export interface DataViewField {
@@ -120,6 +123,27 @@ export interface DataViewField {
    * takes no section.
    */
   groupOrder?: string[];
+
+  /**
+   * Value type of a `select` or `multiselect` filter.
+   * @defaultValue "string"
+   */
+  dataType?: 'string' | 'number' | 'boolean';
+
+  /**
+   * Value a new filter on this field starts with.
+   * @defaultValue today for `date`, the first option for `select`, otherwise `""`
+   */
+  defaultFilterValue?: unknown;
+
+  /** Props for the filter's control. `select` is passed to the filter's `Select`. */
+  filterProps?: { select?: Record<string, unknown> };
+
+  /**
+   * Count shown next to each group header when `showGroupCount` is on, by raw group value.
+   * @defaultValue the group's row count
+   */
+  groupCountMap?: Record<string, number>;
 }
 
 export interface DataViewListProps {
@@ -181,6 +205,9 @@ export interface DataViewListColumn {
    * @defaultValue "1fr"
    */
   width?: string | number;
+
+  /** Inline styles for the column's cells and its header cell. */
+  styles?: { cell?: CSSProperties; header?: CSSProperties };
 }
 
 /** Date inputs accepted by Timeline props and row fields. */
@@ -419,12 +446,16 @@ export interface DataViewDisplayAccessProps {
 export interface DataViewEmptyStateProps {
   /** Restrict to a specific view's `name`. */
   forView?: string;
+  /** Additional CSS class names. */
+  className?: string;
   children: ReactNode;
 }
 
 export interface DataViewZeroStateProps {
   /** Restrict to a specific view's `name`. */
   forView?: string;
+  /** Additional CSS class names. */
+  className?: string;
   children: ReactNode;
 }