fix: [docs, progress] sync props tables with components

apps/www/src/content/docs/ai-elements/message/index.mdx

@@ -101,7 +101,8 @@ Every rendered part carries a stable `data-slot` attribute for [styling and test
 | `message-group` | Wrapper around consecutive messages from one sender |
 | `message-avatar` | The sender avatar |
 | `message-header` | Row above the bubble, for sender name and timestamp |
-| `message-content` | The bubble holding the message body |
+| `message-content` | Column holding the message bubbles |
+| `message-bubble` | The message surface |
 | `message-actions` | Action row revealed on the message |
 | `message-footer` | Row below the bubble |
 

apps/www/src/content/docs/ai-elements/prompt-input/index.mdx

@@ -219,6 +219,8 @@ The text field, built on `TextArea variant="borderless"`. It grows with its
 content up to a max-height cap (override with
 `--prompt-input-textarea-max-height`), then scrolls.
 
+- Inherits all TextArea props except `value`, `defaultValue`, `onValueChange`, `variant`, `size` and `rows`
+
 <auto-type-table path="./props.ts" name="PromptInputTextareaProps" />
 
 ### Editor

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

@@ -32,12 +32,6 @@ export interface AccordionRootProps<Value = string> {
    */
   disabled?: boolean;
 
-  /**
-   * The orientation of the accordion
-   * @defaultValue "vertical"
-   */
-  orientation?: 'horizontal' | 'vertical';
-
   /**
    * Whether to keep the element in the DOM while the panel is closed
    * @defaultValue false
@@ -56,9 +50,9 @@ export interface AccordionRootProps<Value = string> {
 
 export interface AccordionItemProps {
   /**
-   * A unique value for the item
+   * A unique value for the item. Base UI generates one when it is not set.
    */
-  value: string;
+  value?: string;
 
   /**
    * Whether the item is disabled

apps/www/src/content/docs/components/alert-dialog/index.mdx

@@ -78,6 +78,8 @@ Renders the alert dialog panel overlay.
 
 Renders the alert dialog header section.
 
+- Inherits all Flex props
+
 <auto-type-table path="./props.ts" name="AlertDialogHeaderProps" />
 
 ### Title
@@ -90,6 +92,8 @@ Renders the alert dialog title text.
 
 Renders the main content area of the alert dialog.
 
+- Inherits all Flex props
+
 <auto-type-table path="./props.ts" name="AlertDialogBodyProps" />
 
 ### Description
@@ -108,6 +112,8 @@ Renders the element that opens the alert dialog.
 
 Renders the alert dialog footer section.
 
+- Inherits all Flex props
+
 <auto-type-table path="./props.ts" name="AlertDialogFooterProps" />
 
 ### Slots

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

@@ -1,8 +1,8 @@
 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;
@@ -63,7 +63,7 @@ export interface BreadcrumbProps {
 export interface BreadcrumbSeparatorProps {
   /**
    * Custom separator between items
-   * @defaultValue "/"
+   * @defaultValue <ChevronRightIcon />
    */
   children?: ReactNode;
   /** Custom CSS class names */

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

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

apps/www/src/content/docs/components/calendar-preview/index.mdx

@@ -171,6 +171,8 @@ The portaled popover surface. Takes `Popover.Content` props — `side`, `align`,
 
 The typeable date field.
 
+- Inherits all Input props except `value` and `defaultValue`
+
 <auto-type-table path="./props.ts" name="CalendarPreviewInputProps" />
 
 ### CalendarPreview.Body
@@ -213,6 +215,8 @@ Step the view one month.
 
 Restores `defaultDate`, reporting `reason: 'reset'`. Carries `data-restored` while there is nothing to restore.
 
+- Inherits all IconButton props
+
 <auto-type-table path="./props.ts" name="CalendarPreviewResetProps" />
 
 ### CalendarPreview.Scales / CalendarPreview.Scale
@@ -237,6 +241,8 @@ The field label above the input, and the rule between the switcher and the view.
 
 The row below the calendar. A bare string is wrapped in `Text`; anything else renders as given.
 
+- Inherits all Flex props
+
 <auto-type-table path="./props.ts" name="CalendarPreviewFooterProps" />
 
 ### useCalendar

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

@@ -112,7 +112,7 @@ export const rangePickerDemo = {
     {
       name: 'Disabled',
       code: `
-      /* Disabling either input gates the whole picker — the shared popover would otherwise let users rewrite the "disabled" side through the calendar grid. To fix one side, constrain the calendar via \`calendarProps\` instead. */
+      /* Disabling either input gates the whole picker. The shared popover would otherwise let users rewrite the "disabled" side through the calendar grid. To fix one side, constrain the calendar via \`slotProps.calendar\` instead. */
       <RangePicker slotProps={{ startInput: { disabled: true }, endInput: { disabled: true } }} />
       `
     },

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. Ignored when `children` is set.
+   */
+  pickerGroupClassName?: string;
+
   /**
    * Format for displaying the date. Supports various formats:
    * - With slashes: "DD/MM/YYYY", "MM/DD/YYYY", "YYYY/MM/DD"
@@ -150,24 +155,24 @@ export interface RangePickerProps {
   dateFormat?: string;
 
   /**
-   * Fires on every step of range selection — not only on the completed range.
-   * Both fields are optional during partial selection; gate on `range.to` if
-   * you only want completed ranges.
+   * Fires on each day picked in the calendar. `from` is always set, and `to`
+   * is set only when the range is complete. Check `range.to` to handle only
+   * completed ranges.
    */
-  onSelect?: (range: { from?: Date; to?: Date }) => void;
+  onSelect?: (range: { from: Date | undefined; to?: Date }) => void;
 
   /** Initial (uncontrolled) date range. */
-  defaultValue?: { from?: Date; to?: Date };
+  defaultValue?: { from: Date | undefined; to?: Date };
 
   /** Controlled date range. */
-  value?: { from?: Date; to?: Date };
+  value?: { from: Date | undefined; to?: Date };
 
   /**
    * Props for each picker slot. When both this and the legacy
    * `inputsProps` / `calendarProps` / `popoverProps` are set, `slotProps` wins.
    *
-   * Input event handlers (`onChange`, `onFocus`, `onBlur`, `onKeyUp`) are not
-   * forwarded — use `onSelect` for value changes.
+   * The inputs are read-only. RangePicker replaces their `value` and `onClick`.
+   * Use `onSelect` for value changes.
    */
   slotProps?: {
     startInput?: InputProps;
@@ -259,9 +264,6 @@ export interface DatePickerProps {
    */
   onErrorChange?: (error: string | undefined) => void;
 
-  /** @deprecated Use `slotProps.calendar` instead. */
-  calendarProps?: CalendarProps;
-
   /**
    * Render prop or custom trigger. Pass a function to render a custom trigger
    * receiving the formatted `selectedDate` string, or a ReactNode to replace

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

@@ -46,11 +46,14 @@ export interface CalloutProps {
   onDismiss?: () => void;
 
   /** Text content of the callout */
-  children?: React.ReactNode;
+  children: React.ReactNode;
 
   /** 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/checkbox/props.ts

@@ -12,7 +12,7 @@ export interface CheckboxProps {
   /**
    * Event handler called when the state changes
    */
-  onCheckedChange?: (checked: boolean) => void;
+  onCheckedChange?: (checked: boolean, eventDetails: unknown) => void;
 
   /**
    * When true, the checkbox is in an indeterminate state
@@ -34,7 +34,7 @@ export interface CheckboxProps {
 
   /**
    * When true, the user must tick the checkbox before submitting a form.
-   * @defaultValue false
+   * @default the `required` of the surrounding `Field`, otherwise false
    */
   required?: boolean;
 
@@ -75,7 +75,7 @@ export interface CheckboxGroupProps {
   value?: string[];
 
   /** Event handler called when the checked values change. */
-  onValueChange?: (value: string[], event: Event) => void;
+  onValueChange?: (value: string[], eventDetails: unknown) => void;
 
   /**
    * All checkbox values in the group. Required when using a parent checkbox.

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

@@ -23,6 +23,9 @@ export interface ChipProps {
   /** ReactNode to display as an icon after the label */
   trailingIcon?: React.ReactNode;
 
+  /** Disables the chip and blocks pointer clicks on it */
+  disabled?: boolean;
+
   /** Content to display inside the chip */
   children?: React.ReactNode;
 

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

@@ -28,6 +28,9 @@ import { CodeBlock } from '@raystack/apsara'
     <CodeBlock.Label />
     <CodeBlock.LanguageSelect>
       <CodeBlock.LanguageSelectTrigger />
+      <CodeBlock.LanguageSelectContent>
+        <CodeBlock.LanguageSelectItem />
+      </CodeBlock.LanguageSelectContent>
     </CodeBlock.LanguageSelect>
     <CodeBlock.CopyButton />
   </CodeBlock.Header>
@@ -95,6 +98,8 @@ Groups all parts of the code block and manages state.
 
 Renders the optional header section for labels and controls.
 
+- Inherits all Flex props
+
 <auto-type-table path="./props.ts" name="CodeBlockHeaderProps" />
 
 ### Content
@@ -107,24 +112,40 @@ Renders the main content area containing code blocks.
 
 Renders a text label displayed in the header.
 
+- Inherits all Text props
+
 <auto-type-table path="./props.ts" name="CodeBlockLabelProps" />
 
 ### LanguageSelect
 
-Renders a language selection dropdown container.
+Renders a language selection dropdown container. Set `value`, `defaultValue` and `onValueChange` on the `CodeBlock` root.
+
+- Inherits all Select props for a single selection
 
 <auto-type-table path="./props.ts" name="CodeBlockLanguageSelectProps" />
 
 ### LanguageSelectTrigger
 
 Renders the button that opens language selection.
 
+- Inherits all Select.Trigger props
+
 <auto-type-table path="./props.ts" name="CodeBlockLanguageSelectTriggerProps" />
 
+### LanguageSelectContent
+
+Renders the dropdown that lists the languages. It is [`Select.Content`](/docs/components/select) and takes the same props.
+
+### LanguageSelectItem
+
+Renders one language in the dropdown. Selecting it shows the `CodeBlock.Code` with the same `value`, or the same `language` when that block sets no `value`. It is [`Select.Item`](/docs/components/select) and takes the same props.
+
 ### CopyButton
 
 Renders a button for copying code to clipboard.
 
+- Inherits all CopyButton props except `text`
+
 <auto-type-table path="./props.ts" name="CodeBlockCopyButtonProps" />
 
 ### Code
@@ -137,6 +158,8 @@ Renders a syntax-highlighted code block.
 
 Renders a button to expand or collapse long code blocks.
 
+- Inherits all Button props
+
 <auto-type-table path="./props.ts" name="CodeBlockCollapseTriggerProps" />
 
 ### Slots
@@ -159,6 +182,8 @@ Every rendered part carries a stable `data-slot` attribute for [styling and test
 | `code-block-collapse-trigger` | The show/hide button (when `maxLines` is exceeded) |
 | `code-block-language-select-trigger` | The language select trigger button |
 | `code-block-language-select-value` | The selected language value inside the trigger |
+| `select-content` | The `CodeBlock.LanguageSelectContent` popup |
+| `select-item` | Each `CodeBlock.LanguageSelectItem` option |
 
 ## Accessibility
 

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

@@ -48,7 +48,7 @@ export interface CodeBlockProps {
   /**
    * The code content to display
    */
-  children: ReactNode;
+  children?: ReactNode;
 
   /**
    * Additional CSS class name
@@ -83,7 +83,7 @@ export interface CodeBlockHeaderProps {
   /**
    * The content to display in the header
    */
-  children: ReactNode;
+  children?: ReactNode;
 
   /**
    * Additional CSS class name
@@ -95,7 +95,7 @@ export interface CodeBlockContentProps {
   /**
    * The content to display
    */
-  children: ReactNode;
+  children?: ReactNode;
 
   /**
    * Additional CSS class name
@@ -107,7 +107,7 @@ export interface CodeBlockLabelProps {
   /**
    * The label text to display
    */
-  children: ReactNode;
+  children?: ReactNode;
 
   /**
    * Additional CSS class name
@@ -117,14 +117,30 @@ export interface CodeBlockLabelProps {
 
 export interface CodeBlockLanguageSelectProps {
   /**
-   * Available languages for selection
+   * The `CodeBlock.LanguageSelectTrigger` and `CodeBlock.LanguageSelectContent` parts
    */
-  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
+   * @default 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 {