diff --git a/apps/www/src/content/docs/ai-elements/message/index.mdx b/apps/www/src/content/docs/ai-elements/message/index.mdx index d89f4a808..44df422fb 100644 --- a/apps/www/src/content/docs/ai-elements/message/index.mdx +++ b/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 | diff --git a/apps/www/src/content/docs/components/accordion/props.ts b/apps/www/src/content/docs/components/accordion/props.ts index cf1ee96fc..33717c37d 100644 --- a/apps/www/src/content/docs/components/accordion/props.ts +++ b/apps/www/src/content/docs/components/accordion/props.ts @@ -32,12 +32,6 @@ export interface AccordionRootProps { */ 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 { 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 diff --git a/apps/www/src/content/docs/components/breadcrumb/props.ts b/apps/www/src/content/docs/components/breadcrumb/props.ts index eba73e64f..2d36aeb3b 100644 --- a/apps/www/src/content/docs/components/breadcrumb/props.ts +++ b/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 */ children?: ReactNode; /** Custom CSS class names */ diff --git a/apps/www/src/content/docs/components/button/props.ts b/apps/www/src/content/docs/components/button/props.ts index f08e8cdf1..3af27f246 100644 --- a/apps/www/src/content/docs/components/button/props.ts +++ b/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` diff --git a/apps/www/src/content/docs/components/calendar/demo.ts b/apps/www/src/content/docs/components/calendar/demo.ts index 42b611b85..88abcaa4f 100644 --- a/apps/www/src/content/docs/components/calendar/demo.ts +++ b/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. */ ` }, diff --git a/apps/www/src/content/docs/components/calendar/props.ts b/apps/www/src/content/docs/components/calendar/props.ts index e3f047615..4331e4865 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. 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 diff --git a/apps/www/src/content/docs/components/callout/props.ts b/apps/www/src/content/docs/components/callout/props.ts index e9d09584c..1913f7ed6 100644 --- a/apps/www/src/content/docs/components/callout/props.ts +++ b/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` diff --git a/apps/www/src/content/docs/components/checkbox/props.ts b/apps/www/src/content/docs/components/checkbox/props.ts index 1d40d3887..a6a47b79f 100644 --- a/apps/www/src/content/docs/components/checkbox/props.ts +++ b/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 @@ -33,8 +33,7 @@ export interface CheckboxProps { readOnly?: boolean; /** - * When true, the user must tick the checkbox before submitting a form. - * @defaultValue false + * When true, the user must tick the checkbox before submitting a form. Defaults to the `required` of the surrounding `Field`, otherwise `false`. */ required?: boolean; @@ -75,7 +74,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. diff --git a/apps/www/src/content/docs/components/chip/props.ts b/apps/www/src/content/docs/components/chip/props.ts index 6e47b3c57..0075aa05c 100644 --- a/apps/www/src/content/docs/components/chip/props.ts +++ b/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; 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..05a2c8058 100644 --- a/apps/www/src/content/docs/components/code-block/index.mdx +++ b/apps/www/src/content/docs/components/code-block/index.mdx @@ -28,6 +28,9 @@ import { CodeBlock } from '@raystack/apsara' + + + @@ -111,7 +114,7 @@ Renders a text label displayed in the header. ### LanguageSelect -Renders a language selection dropdown container. +Renders a language selection dropdown container. Set `value`, `defaultValue` and `onValueChange` on the `CodeBlock` root. @@ -121,6 +124,14 @@ Renders the button that opens language selection. +### 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. 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..9e3a6f27b 100644 --- a/apps/www/src/content/docs/components/code-block/props.ts +++ b/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 { diff --git a/apps/www/src/content/docs/components/command/index.mdx b/apps/www/src/content/docs/components/command/index.mdx index 5074fd22c..a55c09aeb 100644 --- a/apps/www/src/content/docs/components/command/index.mdx +++ b/apps/www/src/content/docs/components/command/index.mdx @@ -99,7 +99,7 @@ The root element owns the input value, the list of items, and the context used b ### Input -Text input that drives the search. Accepts the same props as `Input` and defaults to a magnifying-glass leading icon. +Text input that drives the search. diff --git a/apps/www/src/content/docs/components/command/props.ts b/apps/www/src/content/docs/components/command/props.ts index dd8659dd6..23b7191bf 100644 --- a/apps/www/src/content/docs/components/command/props.ts +++ b/apps/www/src/content/docs/components/command/props.ts @@ -55,10 +55,13 @@ export interface CommandRootProps { } export interface CommandInputProps { - /** Placeholder text for the input. */ + /** + * Placeholder text for the input. + * @defaultValue "Search..." + */ placeholder?: string; - /** Icon rendered at the start of the input. Defaults to a magnifying glass. */ + /** Icon rendered at the start of the input. */ leadingIcon?: React.ReactNode; /** @@ -80,6 +83,9 @@ export interface CommandInputProps { export interface CommandContentProps { /** Additional CSS class names. */ className?: string; + + /** Ref to the list element. */ + ref?: React.Ref; } export interface CommandEmptyProps { @@ -156,10 +162,10 @@ export interface CommandDialogProps { onOpenChange?: (open: boolean) => void; /** - * Whether the dialog is modal. - * @defaultValue true + * Whether the dialog is modal. `'trap-focus'` traps focus without locking scroll or outside interaction. + * @default true */ - modal?: boolean; + modal?: boolean | 'trap-focus'; } export interface CommandDialogContentProps { diff --git a/apps/www/src/content/docs/components/context-menu/props.ts b/apps/www/src/content/docs/components/context-menu/props.ts index 36d04c9ce..970006dd3 100644 --- a/apps/www/src/content/docs/components/context-menu/props.ts +++ b/apps/www/src/content/docs/components/context-menu/props.ts @@ -68,7 +68,7 @@ export interface ContextMenuContentProps { * The side of the anchor element to place the popup. * @default "bottom" */ - side?: 'top' | 'bottom' | 'left' | 'right'; + side?: 'top' | 'bottom' | 'left' | 'right' | 'inline-start' | 'inline-end'; /** * The alignment of the popup relative to the anchor element. @@ -301,9 +301,9 @@ export interface ContextMenuSubContentProps { /** * The side of the anchor element to place the popup. - * @default "bottom" + * @default "inline-end" */ - side?: 'top' | 'bottom' | 'left' | 'right'; + side?: 'top' | 'bottom' | 'left' | 'right' | 'inline-start' | 'inline-end'; /** * The alignment of the popup relative to the anchor element. diff --git a/apps/www/src/content/docs/components/copy-button/index.mdx b/apps/www/src/content/docs/components/copy-button/index.mdx index d2117d665..fe6b33ee7 100644 --- a/apps/www/src/content/docs/components/copy-button/index.mdx +++ b/apps/www/src/content/docs/components/copy-button/index.mdx @@ -40,12 +40,8 @@ CopyButton inherits all IconButton states. A disabled button ignores clicks and ## API Reference -The CopyButton component extends IconButton props and accepts the following additional props - -All IconButton props are supported - ### Slots Every rendered part carries a stable `data-slot` attribute for [styling and testing](/docs/styling#with-data-slot): diff --git a/apps/www/src/content/docs/components/dialog/props.ts b/apps/www/src/content/docs/components/dialog/props.ts index daa968e26..560b5dcf9 100644 --- a/apps/www/src/content/docs/components/dialog/props.ts +++ b/apps/www/src/content/docs/components/dialog/props.ts @@ -6,10 +6,10 @@ export interface DialogProps { onOpenChange?: (open: boolean) => void; /** - * Whether the dialog is modal + * Whether the dialog is modal. `'trap-focus'` traps focus without locking scroll or outside interaction. * @default true */ - modal?: boolean; + modal?: boolean | 'trap-focus'; } export interface DialogContentProps { diff --git a/apps/www/src/content/docs/components/drawer/index.mdx b/apps/www/src/content/docs/components/drawer/index.mdx index aa0fd6c7c..79a9eb243 100644 --- a/apps/www/src/content/docs/components/drawer/index.mdx +++ b/apps/www/src/content/docs/components/drawer/index.mdx @@ -20,7 +20,7 @@ import { Drawer } from "@raystack/apsara"; - + @@ -45,7 +45,7 @@ Pick the edge it enters from, then decide who owns its open state. ### Basic -A drawer slides in from the edge named by `side` and traps focus while open. +A drawer slides in from the edge named by the `side` of `Drawer.Content` and traps focus while open. @@ -93,10 +93,22 @@ The same header, body and footer shell as [Dialog](/docs/components/dialog), anc ### Root -Groups all parts of the drawer. The `side` prop determines both the slide direction and the swipe-to-dismiss direction. +Groups all parts of the drawer. Its `side` prop sets the swipe-to-dismiss direction. `Drawer.Content` has its own `side`, which places the panel. Set both to the same edge. +### Trigger + +Renders the button that opens the drawer. + +- Inherits all Base UI Drawer.Trigger props + +### Close + +Renders a button that closes the drawer. `Drawer.Content` already renders one unless `showCloseButton` is `false`. + +- Inherits all Base UI Drawer.Close props + ### Content Renders the drawer panel that slides in from a screen edge. diff --git a/apps/www/src/content/docs/components/drawer/props.ts b/apps/www/src/content/docs/components/drawer/props.ts index 498a8aca6..c1a4fc0d2 100644 --- a/apps/www/src/content/docs/components/drawer/props.ts +++ b/apps/www/src/content/docs/components/drawer/props.ts @@ -1,5 +1,8 @@ export interface DrawerProps { - /** The direction from which the drawer appears and can be swiped to dismiss. */ + /** + * The edge the user swipes the drawer toward to dismiss it. + * @default "right" + */ side?: 'top' | 'right' | 'bottom' | 'left'; /** Boolean to control the default open state. */ @@ -28,10 +31,16 @@ export interface DrawerProps { } export interface DrawerContentProps { - /** The direction from which the drawer appears. */ + /** + * The edge the panel sits on and slides in from. + * @default "right" + */ side?: 'top' | 'right' | 'bottom' | 'left'; - /** Whether to show the close button. */ + /** + * Whether to show the close button. + * @default true + */ showCloseButton?: boolean; /** diff --git a/apps/www/src/content/docs/components/editor/index.mdx b/apps/www/src/content/docs/components/editor/index.mdx index 2259f888c..1919b800b 100644 --- a/apps/www/src/content/docs/components/editor/index.mdx +++ b/apps/www/src/content/docs/components/editor/index.mdx @@ -135,6 +135,10 @@ The second argument of `onValueChange`. The methods convert the doc from that ch +With the `markdown` prop, the second argument is `EditorMarkdownChangeDetails`. It has the same methods and `getMarkdown`. + + + ### Markdown `MarkdownAdapter.create(options)` returns an adapter for the `markdown` prop. `MarkdownAdapter.toEditor(markdown)` and `MarkdownAdapter.fromEditor(value)` convert without an editor, for example on the server. An app that never imports `MarkdownAdapter` ships no Markdown code. diff --git a/apps/www/src/content/docs/components/editor/props.ts b/apps/www/src/content/docs/components/editor/props.ts index ab020f449..37cbd1461 100644 --- a/apps/www/src/content/docs/components/editor/props.ts +++ b/apps/www/src/content/docs/components/editor/props.ts @@ -14,7 +14,7 @@ export interface EditorProps { /** * Fires once per doc change. It does not fire for changes made through * `value`, or for labels from `resolveMentions`. The value is always editor - * JSON. + * JSON. With the `markdown` prop, `details` is `EditorMarkdownChangeDetails`. */ onValueChange?: (value: EditorJSON, details: EditorChangeDetails) => void; @@ -337,8 +337,11 @@ export interface EditorChangeDetails { getText: () => string; /** Converts the doc to HTML. */ getHTML: () => string; - /** Converts the doc to Markdown. Only present with the `markdown` prop. */ - getMarkdown?: () => string; +} + +export interface EditorMarkdownChangeDetails extends EditorChangeDetails { + /** Converts the doc to Markdown with the editor's adapter. */ + getMarkdown: () => string; } export interface MarkdownAdapterOptions { diff --git a/apps/www/src/content/docs/components/empty-state/props.ts b/apps/www/src/content/docs/components/empty-state/props.ts index 5bbab566a..94f15c47a 100644 --- a/apps/www/src/content/docs/components/empty-state/props.ts +++ b/apps/www/src/content/docs/components/empty-state/props.ts @@ -1,12 +1,12 @@ export interface EmptyStateProps { /** Icon to show in top of empty state */ - icon?: React.ReactNode; + icon: React.ReactNode; /** Primary heading message */ - heading?: string; + heading?: React.ReactNode; /** Secondary heading message */ - subHeading?: string; + subHeading?: React.ReactNode; /** Action to show in empty state like button or link */ primaryAction?: React.ReactNode; diff --git a/apps/www/src/content/docs/components/field/props.ts b/apps/www/src/content/docs/components/field/props.ts index a7b4c0974..cdaea6762 100644 --- a/apps/www/src/content/docs/components/field/props.ts +++ b/apps/www/src/content/docs/components/field/props.ts @@ -47,11 +47,21 @@ export interface FieldProps { export interface FieldLabelProps { /** - * Whether the field is required. When false, shows an (optional) indicator next to the label. - * @defaultValue true + * Whether the field is required. `true` shows `requiredText`, `false` shows `optionalText`, and nothing is shown when it is not set. */ required?: boolean; + /** + * Text rendered next to the label when `required={false}`. + * @default "(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; } @@ -63,10 +73,9 @@ export interface FieldControlProps { export interface FieldErrorProps { /** - * Match a specific ValidityState property (e.g., "valueMissing", "typeMismatch", "customError") - * or pass `true` to match any error. + * The ValidityState key that shows this error, such as `"valueMissing"`. `true` always shows it. When not set, it shows on any error. */ - match?: string | boolean; + match?: boolean | keyof ValidityState; /** 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..b6f2ae9b1 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. + * @default 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/image/props.ts b/apps/www/src/content/docs/components/image/props.ts index 2f353f861..b6cda3eaa 100644 --- a/apps/www/src/content/docs/components/image/props.ts +++ b/apps/www/src/content/docs/components/image/props.ts @@ -1,9 +1,12 @@ export interface ImageProps { /** The URL of the image to display */ - src: string; + src?: string; - /** Alternative text description (required) */ - alt: string; + /** + * Alternative text. Pass `""` for a decorative image. + * @default "" + */ + alt?: string; /** * Object-fit property diff --git a/apps/www/src/content/docs/components/indicator/index.mdx b/apps/www/src/content/docs/components/indicator/index.mdx index 6751b66a4..d184b8810 100644 --- a/apps/www/src/content/docs/components/indicator/index.mdx +++ b/apps/www/src/content/docs/components/indicator/index.mdx @@ -76,9 +76,9 @@ 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 "Indicator" if neither is provided + - Uses `"Indicator"` if neither is provided - Hides decorative dot from screen readers when no label is present Example with custom aria label: diff --git a/apps/www/src/content/docs/components/indicator/props.ts b/apps/www/src/content/docs/components/indicator/props.ts index 96c6f13b3..cf13ebf7d 100644 --- a/apps/www/src/content/docs/components/indicator/props.ts +++ b/apps/www/src/content/docs/components/indicator/props.ts @@ -15,11 +15,11 @@ 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; + children?: React.ReactNode; - /** Additional CSS class names */ + /** Additional CSS class names for the badge */ className?: string; } 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..0d553025b 100644 --- a/apps/www/src/content/docs/components/list/props.ts +++ b/apps/www/src/content/docs/components/list/props.ts @@ -1,11 +1,14 @@ export interface ListRootProps { + /** List items and an optional header. */ + children: React.ReactNode; + /** Additional CSS class names. */ className?: string; } export interface ListHeaderProps { /** Content to be displayed in the header. */ - children?: React.ReactNode; + children: React.ReactNode; /** * Heading level set as `aria-level` on the underlying heading element. @@ -18,14 +21,8 @@ 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; + children: React.ReactNode; /** Additional CSS class names. */ className?: string; @@ -33,7 +30,7 @@ export interface ListItemProps { export interface ListLabelProps { /** Content to be displayed in the label. */ - children?: React.ReactNode; + children: React.ReactNode; /** Additional CSS class names. */ className?: string; @@ -41,7 +38,7 @@ export interface ListLabelProps { export interface ListValueProps { /** Content to be displayed in the value. */ - children?: React.ReactNode; + children: React.ReactNode; /** Additional CSS class names. */ className?: string; diff --git a/apps/www/src/content/docs/components/menu/props.ts b/apps/www/src/content/docs/components/menu/props.ts index 9049c3299..667fbbb65 100644 --- a/apps/www/src/content/docs/components/menu/props.ts +++ b/apps/www/src/content/docs/components/menu/props.ts @@ -70,7 +70,7 @@ export interface MenuContentProps { * The side of the anchor element to place the popup. * @default "bottom" */ - side?: 'top' | 'bottom' | 'left' | 'right'; + side?: 'top' | 'bottom' | 'left' | 'right' | 'inline-start' | 'inline-end'; /** * The alignment of the popup relative to the anchor element. @@ -238,7 +238,7 @@ export interface MenuSeparatorProps { export interface MenuEmptyStateProps { /** React nodes to render in empty state */ - children?: ReactNode; + children: ReactNode; /** Additional CSS class names */ className?: string; @@ -303,9 +303,9 @@ export interface MenuSubContentProps { /** * The side of the anchor element to place the popup. - * @default "bottom" + * @default "inline-end" */ - side?: 'top' | 'bottom' | 'left' | 'right'; + side?: 'top' | 'bottom' | 'left' | 'right' | 'inline-start' | 'inline-end'; /** * The alignment of the popup relative to the anchor element. diff --git a/apps/www/src/content/docs/components/meter/props.ts b/apps/www/src/content/docs/components/meter/props.ts index 5ca2fa4d5..d797cb057 100644 --- a/apps/www/src/content/docs/components/meter/props.ts +++ b/apps/www/src/content/docs/components/meter/props.ts @@ -26,7 +26,7 @@ export interface MeterProps { export interface MeterLabelProps { /** The label text content. */ - children: React.ReactNode; + children?: React.ReactNode; /** Additional CSS class name. */ className?: string; diff --git a/apps/www/src/content/docs/components/number-field/props.ts b/apps/www/src/content/docs/components/number-field/props.ts index a87487d26..2606f71b1 100644 --- a/apps/www/src/content/docs/components/number-field/props.ts +++ b/apps/www/src/content/docs/components/number-field/props.ts @@ -3,13 +3,12 @@ export interface NumberFieldProps { value?: number | null; /** - * Initial uncontrolled value. - * @defaultValue 0 + * Initial uncontrolled value. The field is empty when neither this nor `value` is set. */ defaultValue?: number; /** Event handler called when the value changes. */ - onValueChange?: (value: number | null, event: Event) => void; + onValueChange?: (value: number | null, eventDetails: unknown) => void; /** Minimum allowed value. */ min?: number; @@ -36,8 +35,7 @@ export interface NumberFieldProps { readOnly?: boolean; /** - * Whether the field is required. - * @defaultValue false + * Whether the field is required. Defaults to the `required` of the surrounding `Field`, otherwise `false`. */ required?: boolean; diff --git a/apps/www/src/content/docs/components/popover/index.mdx b/apps/www/src/content/docs/components/popover/index.mdx index 4bf87ff3a..e9e3fd4a3 100644 --- a/apps/www/src/content/docs/components/popover/index.mdx +++ b/apps/www/src/content/docs/components/popover/index.mdx @@ -73,6 +73,10 @@ Renders the popover content panel. +### Close + +Renders a button that closes the popover. It takes the Base UI `Popover.Close` props. + ### Trigger Renders the element that opens the popover. diff --git a/apps/www/src/content/docs/components/popover/props.ts b/apps/www/src/content/docs/components/popover/props.ts index cd4db98a6..0d7295162 100644 --- a/apps/www/src/content/docs/components/popover/props.ts +++ b/apps/www/src/content/docs/components/popover/props.ts @@ -8,13 +8,16 @@ export interface PopoverRootProps { /** Callback when open state changes. */ onOpenChange?: (open: boolean) => void; - /** Boolean to enable modal behavior. */ - modal?: boolean; + /** + * Locks scroll and blocks outside interaction while open. `'trap-focus'` only traps focus. + * @default false + */ + modal?: boolean | 'trap-focus'; } export interface PopoverContentProps { /** Preferred side of the trigger to render. */ - side?: 'top' | 'right' | 'bottom' | 'left'; + side?: 'top' | 'right' | 'bottom' | 'left' | 'inline-start' | 'inline-end'; /** Alignment relative to trigger. */ align?: 'start' | 'center' | 'end'; diff --git a/apps/www/src/content/docs/components/preview-card/props.ts b/apps/www/src/content/docs/components/preview-card/props.ts index 1445b6251..64aa51e04 100644 --- a/apps/www/src/content/docs/components/preview-card/props.ts +++ b/apps/www/src/content/docs/components/preview-card/props.ts @@ -9,7 +9,7 @@ export interface PreviewCardRootProps { defaultOpen?: boolean; /** Event handler called when the preview card is opened or closed. */ - onOpenChange?: (open: boolean) => void; + onOpenChange?: (open: boolean, eventDetails: unknown) => void; /** Event handler called after any animations complete when the preview card is opened or closed. */ onOpenChangeComplete?: (open: boolean) => void; @@ -104,7 +104,7 @@ export interface PreviewCardContentProps { * May automatically change to avoid collisions. * @defaultValue 'bottom' */ - side?: 'top' | 'right' | 'bottom' | 'left'; + side?: 'top' | 'right' | 'bottom' | 'left' | 'inline-start' | 'inline-end'; /** * How to align the popup relative to the specified side. @@ -115,8 +115,8 @@ export interface PreviewCardContentProps { /** * Distance between the anchor and the popup in pixels. * Also accepts a function to read anchor/positioner dimensions. + * Defaults to 10 when `showArrow` is set, otherwise 4. * @remarks `number | OffsetFunction` - * @defaultValue 4 */ sideOffset?: number | ((data: OffsetData) => number); @@ -130,6 +130,7 @@ export interface PreviewCardContentProps { /** * Additional space to maintain from the edge of the collision boundary. + * @default 3 */ collisionPadding?: number; @@ -140,12 +141,19 @@ export interface PreviewCardContentProps { collisionBoundary?: Element | Element[] | 'clipping-ancestors'; /** - * Determines how to handle collisions when positioning the popup. + * Determines how to handle collisions when positioning the popup. With `side: 'shift'`, `align` takes only `'shift'` or `'none'`. */ - collisionAvoidance?: { - side?: 'escape' | 'flip'; - align?: 'shift' | 'flip'; - }; + collisionAvoidance?: + | { + side?: 'flip' | 'none'; + align?: 'flip' | 'shift' | 'none'; + fallbackAxisSide?: 'start' | 'end' | 'none'; + } + | { + side?: 'shift' | 'none'; + align?: 'shift' | 'none'; + fallbackAxisSide?: 'start' | 'end' | 'none'; + }; /** * Whether to disable the popup from tracking any layout shift of its positioning anchor. diff --git a/apps/www/src/content/docs/components/progress/props.ts b/apps/www/src/content/docs/components/progress/props.ts index a8523387f..e525dd100 100644 --- a/apps/www/src/content/docs/components/progress/props.ts +++ b/apps/www/src/content/docs/components/progress/props.ts @@ -29,7 +29,7 @@ export interface ProgressProps { export interface ProgressLabelProps { /** The label text content. */ - children: React.ReactNode; + children?: React.ReactNode; /** Additional CSS class name. */ className?: string; diff --git a/apps/www/src/content/docs/components/search/props.ts b/apps/www/src/content/docs/components/search/props.ts index 91fff7996..246b76a52 100644 --- a/apps/www/src/content/docs/components/search/props.ts +++ b/apps/www/src/content/docs/components/search/props.ts @@ -5,7 +5,16 @@ export interface SearchProps { */ size?: 'small' | 'large'; - /** Placeholder text for the input. */ + /** + * Visual variant of the input. + * @default "default" + */ + variant?: 'default' | 'borderless'; + + /** + * Placeholder text for the input. + * @default "Search" + */ placeholder?: string; /** Whether the search input is disabled. */ diff --git a/apps/www/src/content/docs/components/select/props.ts b/apps/www/src/content/docs/components/select/props.ts index 659b194d5..d480514e4 100644 --- a/apps/www/src/content/docs/components/select/props.ts +++ b/apps/www/src/content/docs/components/select/props.ts @@ -1,4 +1,38 @@ 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`, otherwise `false`. + */ + 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 +59,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 filtering of the `Select.Item` children. It has no effect without `autocomplete`. */ + items?: string[]; } export interface SelectTriggerProps { @@ -121,6 +158,9 @@ export interface SelectItemProps { /** The value of the item. */ value: string; + /** Icon rendered before the item text. Rendered only when `children` is a string. */ + leadingIcon?: React.ReactNode; + /** Additional CSS class names. */ className?: string; } diff --git a/apps/www/src/content/docs/components/sidebar/index.mdx b/apps/www/src/content/docs/components/sidebar/index.mdx index 763870ae4..22582d2ce 100644 --- a/apps/www/src/content/docs/components/sidebar/index.mdx +++ b/apps/www/src/content/docs/components/sidebar/index.mdx @@ -215,7 +215,7 @@ The footer section is a container that accepts all `div` props. It's commonly us ### Trigger -A button that toggles the sidebar open/closed. It works whether the Sidebar is controlled or uncontrolled, so you can drop it into a header without wiring up any state yourself. It accepts all `IconButton` props (e.g. `size`) plus the ones below. +A button that toggles the sidebar open/closed. It works whether the Sidebar is controlled or uncontrolled, so you can drop it into a header without wiring up any state yourself. *Note: disabled automatically when the Sidebar has `collapsible="none"`. If you use `collapsible="hidden"`, don't place `Sidebar.Trigger` inside `Sidebar.Header`/`Main`/`Footer`, because those sections are hidden along with the rest of the collapsed content, taking the trigger with them. Render it as a direct child of `` instead, or use [external control](#external-control).* diff --git a/apps/www/src/content/docs/components/sidepanel/demo.ts b/apps/www/src/content/docs/components/sidepanel/demo.ts index 0b1cf1bdd..0630c5ef3 100644 --- a/apps/www/src/content/docs/components/sidepanel/demo.ts +++ b/apps/www/src/content/docs/components/sidepanel/demo.ts @@ -9,15 +9,15 @@ export const preview = { User Information - + Status Active - + Type Premium Account - + Created April 24, 2024 @@ -26,15 +26,15 @@ export const preview = { User Information - + Status Active - + Type Premium Account - + Created April 24, 2024 @@ -52,7 +52,7 @@ export const basicDemo = { User Information - + Status Active @@ -73,7 +73,7 @@ export const positionDemo = { User Information - + Status Active @@ -90,7 +90,7 @@ export const positionDemo = { User Information - + Status Active diff --git a/apps/www/src/content/docs/components/sidepanel/index.mdx b/apps/www/src/content/docs/components/sidepanel/index.mdx index 8b6fdc0f6..bd90be00c 100644 --- a/apps/www/src/content/docs/components/sidepanel/index.mdx +++ b/apps/www/src/content/docs/components/sidepanel/index.mdx @@ -1,7 +1,7 @@ --- title: Side Panel description: A flexible side panel component to place content on either side of the page. -source: packages/react/components/sidepanel +source: packages/react/components/side-panel --- import { basicDemo, positionDemo, preview } from "./demo.ts"; diff --git a/apps/www/src/content/docs/components/sidepanel/props.ts b/apps/www/src/content/docs/components/sidepanel/props.ts index 8c01c1e5f..e11f72c4f 100644 --- a/apps/www/src/content/docs/components/sidepanel/props.ts +++ b/apps/www/src/content/docs/components/sidepanel/props.ts @@ -1,14 +1,14 @@ export interface SidePanelProps { /** * The side to position the panel. - * @default "left" + * @default "right" */ side?: 'left' | 'right'; /** * Content to render inside the side panel. */ - children: React.ReactNode; + children?: React.ReactNode; /** * Additional CSS class names to apply. diff --git a/apps/www/src/content/docs/components/switch/props.ts b/apps/www/src/content/docs/components/switch/props.ts index baa6000c5..299de767b 100644 --- a/apps/www/src/content/docs/components/switch/props.ts +++ b/apps/www/src/content/docs/components/switch/props.ts @@ -6,12 +6,14 @@ export interface SwitchProps { defaultChecked?: boolean; /** Event handler called when the checked state changes. */ - onCheckedChange?: (checked: boolean, event: Event) => void; + onCheckedChange?: (checked: boolean, eventDetails: unknown) => void; /** When true, prevents the user from interacting with the switch. */ disabled?: boolean; - /** When true, indicates that the user must check the switch. */ + /** + * When true, indicates that the user must check the switch. Defaults to the `required` of the surrounding `Field`, otherwise `false`. + */ required?: boolean; /** diff --git a/apps/www/src/content/docs/components/toast/index.mdx b/apps/www/src/content/docs/components/toast/index.mdx index e6204de5a..35a7b80a6 100644 --- a/apps/www/src/content/docs/components/toast/index.mdx +++ b/apps/www/src/content/docs/components/toast/index.mdx @@ -118,14 +118,14 @@ Creates a new toast and returns its unique ID. If `id` matches an open toast, it -### createToastManager() +### Toast.createToastManager() Factory that returns a fresh toast manager. The exported singleton `toastManager` is one such instance created at module load. Pass a custom manager to `` to scope toasts to that provider. ```tsx -import { Toast, createToastManager } from '@raystack/apsara' +import { Toast } from '@raystack/apsara' -const manager = createToastManager() +const manager = Toast.createToastManager() @@ -156,7 +156,7 @@ The `promise(promise, options)` method drives a toast through the resolve/reject ### useToastManager() -Hook for dispatching toasts from inside a component tree wrapped by ``. Returns the same methods as `createToastManager()`, including built-in `leadingIcon` support, plus a reactive `toasts` array reflecting the stacked toasts on screen. The array does not include anchored toasts. +Hook for dispatching toasts from inside a component tree wrapped by ``. Returns the same methods as `Toast.createToastManager()`, including built-in `leadingIcon` support, plus a reactive `toasts` array reflecting the stacked toasts on screen. The array does not include anchored toasts. ```tsx import { useToastManager } from '@raystack/apsara' diff --git a/apps/www/src/content/docs/components/toast/props.ts b/apps/www/src/content/docs/components/toast/props.ts index 0715ae755..388a578f6 100644 --- a/apps/www/src/content/docs/components/toast/props.ts +++ b/apps/www/src/content/docs/components/toast/props.ts @@ -23,6 +23,12 @@ export interface ToastProviderProps { */ timeout?: number; + /** + * The manager the provider renders toasts from. + * @default toastManager + */ + toastManager?: CreateToastManagerReturn; + children?: React.ReactNode; } @@ -207,7 +213,7 @@ export interface ToastObject { } /** - * The toast manager returned by `createToastManager()` and exported as the + * The toast manager returned by `Toast.createToastManager()` and exported as the * `toastManager` singleton. */ export interface CreateToastManagerReturn { @@ -256,7 +262,7 @@ export interface CreateToastManagerReturn { /** * Return value of the `useToastManager()` hook. Same methods as - * `createToastManager()` plus a reactive `toasts` array driving component + * `Toast.createToastManager()` plus a reactive `toasts` array driving component * re-renders. */ export interface UseToastManagerReturn extends CreateToastManagerReturn { diff --git a/apps/www/src/content/docs/components/toggle/props.ts b/apps/www/src/content/docs/components/toggle/props.ts index 52d943314..1225e7a4b 100644 --- a/apps/www/src/content/docs/components/toggle/props.ts +++ b/apps/www/src/content/docs/components/toggle/props.ts @@ -12,7 +12,7 @@ export interface ToggleProps { pressed?: boolean; /** Event handler called when the pressed state changes. */ - onPressedChange?: (pressed: boolean, event: Event) => void; + onPressedChange?: (pressed: boolean, eventDetails: unknown) => void; /** * The size of the toggle. @@ -50,7 +50,7 @@ export interface ToggleGroupProps { value?: string[]; /** Event handler called when the pressed values change. */ - onValueChange?: (value: string[], event: Event) => void; + onValueChange?: (value: string[], eventDetails: unknown) => void; /** * When true, multiple toggles can be pressed at the same time. diff --git a/apps/www/src/content/docs/components/tooltip/props.ts b/apps/www/src/content/docs/components/tooltip/props.ts index c9ec4deaf..bf948fcd8 100644 --- a/apps/www/src/content/docs/components/tooltip/props.ts +++ b/apps/www/src/content/docs/components/tooltip/props.ts @@ -92,7 +92,7 @@ export interface TooltipContentProps { * Side placement of the tooltip * @default "top" */ - side?: 'top' | 'bottom' | 'left' | 'right'; + side?: 'top' | 'bottom' | 'left' | 'right' | 'inline-start' | 'inline-end'; /** * Alignment of the tooltip @@ -101,8 +101,7 @@ export interface TooltipContentProps { align?: 'start' | 'center' | 'end'; /** - * Side offset for positioning - * @default 4 + * Side offset for positioning. Defaults to 10 when `showArrow` is set, otherwise 4. */ sideOffset?: number; diff --git a/apps/www/src/content/docs/dataview/props.ts b/apps/www/src/content/docs/dataview/props.ts index 39513c39b..5c91efe32 100644 --- a/apps/www/src/content/docs/dataview/props.ts +++ b/apps/www/src/content/docs/dataview/props.ts @@ -1,4 +1,5 @@ -import { ReactNode, RefObject } from 'react'; +import { CSSProperties, ReactNode, RefObject } from 'react'; +import type { SelectRootProps } from '../components/select/props'; // 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 +75,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 { @@ -83,7 +87,7 @@ export interface DataViewField { /** Human-readable label. */ label: string; - /** Optional icon (e.g. for grouping menu). */ + /** Icon for the field. No built-in DataView part renders it. */ icon?: ReactNode; /** Allow filtering on this field. */ @@ -120,6 +124,37 @@ export interface DataViewField { * takes no section. */ groupOrder?: string[]; + + /** + * Value type of a `select` or `multiselect` filter. + * @default "string" + */ + dataType?: 'string' | 'number' | 'boolean'; + + /** + * Value a new filter on this field starts with. When not set or `null`, a `date` filter starts with today, a `select` filter with its first option, and others with `""`. + */ + defaultFilterValue?: + | string + | number + | boolean + | (string | number | boolean)[] + | Date + | null; + + /** Props for the filter's control. The filter's `Select` receives `select`. */ + filterProps?: { + select?: Omit< + SelectRootProps, + 'value' | 'defaultValue' | 'onValueChange' | 'multiple' + >; + }; + + /** + * Count shown next to each group header when `showGroupCount` is on, by raw group value. + * @default the group's row count + */ + groupCountMap?: Record; } export interface DataViewListProps { @@ -181,6 +216,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 +457,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 61f54c202..aea8521c7 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'; @@ -115,6 +117,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. */ @@ -145,4 +156,8 @@ export type ThemeSwitcherProps = { * @defaultValue "nearest" */ target?: 'nearest' | 'root'; + /** + * Accessible name for the button. Defaults to "Switch to light theme" when the `target` theme is dark, otherwise "Switch to dark theme". + */ + '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 c0097d621..e9a6136f7 100644 --- a/packages/react/components/code-block/code-block-root.tsx +++ b/packages/react/components/code-block/code-block-root.tsx @@ -41,6 +41,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..4a5754720 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 instead. */ classNames?: { /** @deprecated Use `[data-slot="filter-chip"]` instead. */ filterChips?: string; diff --git a/packages/react/components/drawer/drawer-root.tsx b/packages/react/components/drawer/drawer-root.tsx index 1a19ec49d..db75a3531 100644 --- a/packages/react/components/drawer/drawer-root.tsx +++ b/packages/react/components/drawer/drawer-root.tsx @@ -15,7 +15,10 @@ const sideToSwipeDirection: Record< }; export interface DrawerRootProps extends DrawerPrimitive.Root.Props { - /** The direction from which the drawer appears and can be swiped to dismiss. */ + /** + * The edge the user swipes the drawer toward to dismiss it. + * @default "right" + */ side?: Side; } diff --git a/packages/react/components/indicator/indicator.tsx b/packages/react/components/indicator/indicator.tsx index f5e0c85b0..30b006841 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 the `data-slot` selectors instead. */ classNames?: { /** @deprecated Use `[data-slot="indicator"]` instead. */ container?: string; diff --git a/packages/react/components/progress/__tests__/progress.test.tsx b/packages/react/components/progress/__tests__/progress.test.tsx index 780df8f63..6e3625e5e 100644 --- a/packages/react/components/progress/__tests__/progress.test.tsx +++ b/packages/react/components/progress/__tests__/progress.test.tsx @@ -25,6 +25,14 @@ describe('Progress', () => { expect(progress).toHaveClass('custom-progress'); }); + it('defaults value to 0', () => { + render(); + expect(screen.getByRole('progressbar')).toHaveAttribute( + 'aria-valuenow', + '0' + ); + }); + it('renders track and indicator by default', () => { const { container } = render(); expect(container.querySelector(`.${styles.track}`)).toBeInTheDocument(); diff --git a/packages/react/components/progress/progress-root.tsx b/packages/react/components/progress/progress-root.tsx index 5abe62866..dfb17d04a 100644 --- a/packages/react/components/progress/progress-root.tsx +++ b/packages/react/components/progress/progress-root.tsx @@ -19,8 +19,14 @@ const progress = cva(styles.progress, { }); export interface ProgressProps - extends ProgressPrimitive.Root.Props, - VariantProps {} + extends Omit, + VariantProps { + /** + * The current value. `null` shows an indeterminate state. + * @default 0 + */ + value?: number | null; +} export interface ProgressContextValue { variant: 'linear' | 'circular';