diff --git a/apps/www/src/content/docs/components/breadcrumb/props.ts b/apps/www/src/content/docs/components/breadcrumb/props.ts index eba73e64f..3f271581b 100644 --- a/apps/www/src/content/docs/components/breadcrumb/props.ts +++ b/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; /** diff --git a/apps/www/src/content/docs/components/calendar/props.ts b/apps/www/src/content/docs/components/calendar/props.ts index e3f047615..6d76f01ec 100644 --- a/apps/www/src/content/docs/components/calendar/props.ts +++ b/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" diff --git a/apps/www/src/content/docs/components/callout/props.ts b/apps/www/src/content/docs/components/callout/props.ts index e9d09584c..205c19946 100644 --- a/apps/www/src/content/docs/components/callout/props.ts +++ b/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` diff --git a/apps/www/src/content/docs/components/chip/props.ts b/apps/www/src/content/docs/components/chip/props.ts index 09aff3b13..13ca6d5c9 100644 --- a/apps/www/src/content/docs/components/chip/props.ts +++ b/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; diff --git a/apps/www/src/content/docs/components/code-block/index.mdx b/apps/www/src/content/docs/components/code-block/index.mdx index 9a044bdd4..95ca9acb1 100644 --- a/apps/www/src/content/docs/components/code-block/index.mdx +++ b/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. diff --git a/apps/www/src/content/docs/components/code-block/props.ts b/apps/www/src/content/docs/components/code-block/props.ts index 397d4996d..6d4928bef 100644 --- a/apps/www/src/content/docs/components/code-block/props.ts +++ b/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 { diff --git a/apps/www/src/content/docs/components/field/props.ts b/apps/www/src/content/docs/components/field/props.ts index a7b4c0974..43a34f554 100644 --- a/apps/www/src/content/docs/components/field/props.ts +++ b/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; } diff --git a/apps/www/src/content/docs/components/floating-actions/props.ts b/apps/www/src/content/docs/components/floating-actions/props.ts index 630583412..e1f1f7af8 100644 --- a/apps/www/src/content/docs/components/floating-actions/props.ts +++ b/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; diff --git a/apps/www/src/content/docs/components/icon-button/props.ts b/apps/www/src/content/docs/components/icon-button/props.ts index 25c81193a..453536ae3 100644 --- a/apps/www/src/content/docs/components/icon-button/props.ts +++ b/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; } diff --git a/apps/www/src/content/docs/components/indicator/index.mdx b/apps/www/src/content/docs/components/indicator/index.mdx index 6f2620720..8518ee8e4 100644 --- a/apps/www/src/content/docs/components/indicator/index.mdx +++ b/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 diff --git a/apps/www/src/content/docs/components/indicator/props.ts b/apps/www/src/content/docs/components/indicator/props.ts index 96c6f13b3..df10960e3 100644 --- a/apps/www/src/content/docs/components/indicator/props.ts +++ b/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; diff --git a/apps/www/src/content/docs/components/list/demo.ts b/apps/www/src/content/docs/components/list/demo.ts index 638f9e5a1..23075ad44 100644 --- a/apps/www/src/content/docs/components/list/demo.ts +++ b/apps/www/src/content/docs/components/list/demo.ts @@ -6,15 +6,15 @@ export const preview = { User Information - + Status Active - + Type Premium Account - + Created April 24, 2024 @@ -27,28 +27,10 @@ export const basicDemo = { code: ` User Information - + Status Active ; ` }; - -export const alignDemo = { - type: 'code', - code: ` - - Deployment - - Status - Succeeded - - - Notes - - Rolled out to three regions. Two nodes were drained and replaced during the rollout. - - -` -}; diff --git a/apps/www/src/content/docs/components/list/index.mdx b/apps/www/src/content/docs/components/list/index.mdx index 96ef76fdf..361cd4e3f 100644 --- a/apps/www/src/content/docs/components/list/index.mdx +++ b/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"; @@ -36,12 +35,6 @@ A `Header` labels the group, then each `Item` pairs a `Label` with its `Value`. -### 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. - - - ## API Reference Each item holds an aligned label and value, with an optional header above them. diff --git a/apps/www/src/content/docs/components/list/props.ts b/apps/www/src/content/docs/components/list/props.ts index 7fd35a1eb..ab013dae7 100644 --- a/apps/www/src/content/docs/components/list/props.ts +++ b/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; diff --git a/apps/www/src/content/docs/components/search/props.ts b/apps/www/src/content/docs/components/search/props.ts index 91fff7996..efd6491cd 100644 --- a/apps/www/src/content/docs/components/search/props.ts +++ b/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; diff --git a/apps/www/src/content/docs/components/select/props.ts b/apps/www/src/content/docs/components/select/props.ts index 80ddce754..da95234a0 100644 --- a/apps/www/src/content/docs/components/select/props.ts +++ b/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; } diff --git a/apps/www/src/content/docs/components/toast/props.ts b/apps/www/src/content/docs/components/toast/props.ts index ebf6970a0..67c862cf9 100644 --- a/apps/www/src/content/docs/components/toast/props.ts +++ b/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; } diff --git a/apps/www/src/content/docs/dataview/props.ts b/apps/www/src/content/docs/dataview/props.ts index 39513c39b..3259d7528 100644 --- a/apps/www/src/content/docs/dataview/props.ts +++ b/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>; + + /** 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 }; + + /** + * Count shown next to each group header when `showGroupCount` is on, by raw group value. + * @defaultValue the group's row count + */ + groupCountMap?: Record; } 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; } diff --git a/apps/www/src/content/docs/theme/overview/props.ts b/apps/www/src/content/docs/theme/overview/props.ts index 8d0319859..a4938aa79 100644 --- a/apps/www/src/content/docs/theme/overview/props.ts +++ b/apps/www/src/content/docs/theme/overview/props.ts @@ -1,3 +1,5 @@ +import type { IconOptions } from '../icons/props'; + export type Appearance = 'light' | 'dark'; export type AppearanceSetting = 'light' | 'dark' | 'system'; export type AccentColor = 'indigo' | 'orange' | 'mint'; @@ -109,6 +111,15 @@ export type ThemeProps = { className?: string; children?: React.ReactNode; + + /** Icon overrides: `components` replaces icons by key, and `props` applies to every icon. */ + icons?: IconOptions; + + /** Ref to the theme's element: its `div`, or the element passed to `render`. */ + ref?: React.Ref; + + /** Inline styles for the theme's element. */ + style?: React.CSSProperties; }; /** The theme, as read and driven from anywhere inside a provider. */ @@ -139,4 +150,9 @@ export type ThemeSwitcherProps = { * @defaultValue "nearest" */ target?: 'nearest' | 'root'; + /** + * Accessible name for the button. + * @defaultValue "Switch to light theme" or "Switch to dark theme", by the current appearance + */ + 'aria-label'?: string; }; diff --git a/packages/react/components/code-block/code-block-root.tsx b/packages/react/components/code-block/code-block-root.tsx index 3d0d43e30..4eb187006 100644 --- a/packages/react/components/code-block/code-block-root.tsx +++ b/packages/react/components/code-block/code-block-root.tsx @@ -40,6 +40,7 @@ export interface CodeBlockProps extends ComponentProps<'div'>, CodeBlockCommonProps { defaultValue?: string; + /** @deprecated Has no effect. */ maxHeight?: string | number; onValueChange?: (value: string) => void; defaultCollapsed?: boolean; diff --git a/packages/react/components/data-view/components/filters.tsx b/packages/react/components/data-view/components/filters.tsx index 28f6a5cdc..621d68878 100644 --- a/packages/react/components/data-view/components/filters.tsx +++ b/packages/react/components/data-view/components/filters.tsx @@ -103,6 +103,7 @@ function AddFilter({ } export interface DataViewFiltersProps extends PositionerProps { + /** @deprecated Use the `data-slot` selectors named on each key instead. */ classNames?: { /** @deprecated Use `[data-slot="filter-chip"]` instead. */ filterChips?: string; diff --git a/packages/react/components/indicator/indicator.tsx b/packages/react/components/indicator/indicator.tsx index e6dbbe29d..dc8109cb4 100644 --- a/packages/react/components/indicator/indicator.tsx +++ b/packages/react/components/indicator/indicator.tsx @@ -29,6 +29,7 @@ export interface IndicatorProps pulse?: boolean; children?: ReactNode; 'aria-label'?: string; + /** @deprecated Use `[data-slot="indicator"]` instead. */ classNames?: { /** @deprecated Use `[data-slot="indicator"]` instead. */ container?: string; diff --git a/packages/react/components/menu/menu-root.tsx b/packages/react/components/menu/menu-root.tsx index 3af2ef47e..9e9084cf9 100644 --- a/packages/react/components/menu/menu-root.tsx +++ b/packages/react/components/menu/menu-root.tsx @@ -13,8 +13,11 @@ interface CommonProps { autocomplete?: boolean; autocompleteMode?: 'auto' | 'manual'; inputValue?: string; + /** @internal Set by `Menu` and `Menu.Submenu` for their parts. */ inputRef?: React.RefObject; + /** @internal Set by `Menu` and `Menu.Submenu` for their parts. */ contentRef?: React.RefObject; + /** @internal Set by `Menu` and `Menu.Submenu` for their parts. */ isInitialRender?: React.RefObject; open?: boolean; }