diff --git a/.agents/skills/add-new-component/SKILL.md b/.agents/skills/add-new-component/SKILL.md index 0d26750bf..49dd093e0 100644 --- a/.agents/skills/add-new-component/SKILL.md +++ b/.agents/skills/add-new-component/SKILL.md @@ -177,11 +177,13 @@ Key rules: ## Step 2: Create the Index File -Simple re-export: +Re-export the component and its props types: ```tsx // packages/react/components//index.tsx export { Component } from './'; +export type { ComponentContentProps } from './-content'; +export type { ComponentRootProps as ComponentProps } from './-root'; ``` ## Step 3: Add CSS Module Styles @@ -239,10 +241,12 @@ Common `--rs-*` tokens: Add to `packages/react/index.tsx` in **alphabetical order**: ```tsx -export { Chip } from './components/chip'; -export { CodeBlock } from './components/code-block'; -export { Collapsible } from './components/collapsible'; // <-- new -export { Combobox } from './components/combobox'; +export { Chip, type ChipProps } from './components/chip'; +export { + Component, + type ComponentContentProps, + type ComponentProps +} from './components/'; // <-- new ``` ## Step 5: Write Tests @@ -496,8 +500,11 @@ Notes: pnpm --filter @raystack/apsara build pnpm --filter @raystack/apsara test -- --reporter=verbose components/ pnpm --filter www build +grep -n "from './components/'" packages/react/dist/index.d.ts ``` +The `grep` prints the root export of the component. Check that it lists the props type of every part that declares its own type. Type-only exports are erased at runtime, so the tests and the build still pass when one is missing. Parts that take Base UI or HTML props unchanged have no type to export. + Checklist: - [ ] Component builds without errors - [ ] All tests pass @@ -506,4 +513,5 @@ Checklist: - [ ] Every rendered element has a `data-slot`, with a `data-slots.test.tsx` covering them - [ ] CSS uses `--rs-*` tokens only - [ ] Export in `packages/react/index.tsx` in alphabetical order +- [ ] Props types exported from the component index and `packages/react/index.tsx`, and listed in `dist/index.d.ts` - [ ] Interactive `playground` added to `demo.ts`, covering the component's main props diff --git a/AGENTS.md b/AGENTS.md index da467e173..f4c03220c 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -21,7 +21,7 @@ Skills are in `.agents/skills/`. `.claude/skills` is a symlink to that folder, s ## Code - Each component is in `packages/react/components//`. Its `index.tsx` only re-exports. -- Export new components from `packages/react/index.tsx`, in alphabetical order. +- Export new components from `packages/react/index.tsx`, in alphabetical order, with their props types: `Props` for the root part and `Props` for each part with its own type. - Wrap Base UI primitives, for example `import { Tabs as TabsPrimitive } from '@base-ui/react'`. Do not rebuild behavior that Base UI already has. - For plain elements, use `useRender` and `mergeProps` so the `render` prop works. - Pass `ref` as a normal prop (React 19). Do not use `forwardRef`. diff --git a/apps/www/src/content/docs/(overview)/getting-started.mdx b/apps/www/src/content/docs/(overview)/getting-started.mdx index 04b318c80..706be908d 100644 --- a/apps/www/src/content/docs/(overview)/getting-started.mdx +++ b/apps/www/src/content/docs/(overview)/getting-started.mdx @@ -189,6 +189,20 @@ function ThemeToggle() { } ``` +## Importing prop types + +Components export their props types from the main entry, for example `ButtonProps`, `TabsProps` and `TabsTabProps`: + +```tsx +import { Button, type ButtonProps } from "@raystack/apsara"; + +function SaveButton({ saving, ...props }: ButtonProps & { saving: boolean }) { + return ), classNames -}: DisplaySettingsProps) { +}: DataTableDisplayControlsProps) { const { table, updateTableQuery, diff --git a/packages/react/components/data-table/components/filters.tsx b/packages/react/components/data-table/components/filters.tsx index cc319ea2e..b120f22df 100644 --- a/packages/react/components/data-table/components/filters.tsx +++ b/packages/react/components/data-table/components/filters.tsx @@ -88,18 +88,20 @@ function AddFilter({ ) : null; } -export function Filters({ - classNames, - className, - trigger -}: { +export interface DataTableFiltersProps { classNames?: { filterChips?: string; addFilter?: string; }; className?: string; trigger?: Trigger; -}) { +} + +export function Filters({ + classNames, + className, + trigger +}: DataTableFiltersProps) { const { table, tableQuery } = useDataTable(); const columns = table?.getAllColumns() as DataTableColumn[]; diff --git a/packages/react/components/data-table/components/toolbar.tsx b/packages/react/components/data-table/components/toolbar.tsx index 40a3bdbbe..792c5f77d 100644 --- a/packages/react/components/data-table/components/toolbar.tsx +++ b/packages/react/components/data-table/components/toolbar.tsx @@ -7,7 +7,11 @@ import { useDataTable } from '../hooks/useDataTable'; import { DisplaySettings } from './display-settings'; import { Filters } from './filters'; -export function Toolbar({ className }: { className?: string }) { +export interface DataTableToolbarProps { + className?: string; +} + +export function Toolbar({ className }: DataTableToolbarProps) { const { shouldShowFilters = false } = useDataTable(); if (!shouldShowFilters) { diff --git a/packages/react/components/data-table/components/virtualized-content.tsx b/packages/react/components/data-table/components/virtualized-content.tsx index 4c116a363..6e4d9fcb2 100644 --- a/packages/react/components/data-table/components/virtualized-content.tsx +++ b/packages/react/components/data-table/components/virtualized-content.tsx @@ -14,9 +14,9 @@ import { Skeleton } from '../../skeleton'; import styles from '../data-table.module.css'; import { DataTableColumnDef, + DataTableVirtualizedContentProps, defaultGroupOption, - GroupedData, - VirtualizedContentProps + GroupedData } from '../data-table.types'; import { useDataTable } from '../hooks/useDataTable'; import { useStickyGroupAnchor } from '../hooks/useStickyGroupAnchor'; @@ -220,7 +220,7 @@ export function VirtualizedContent({ emptyState, zeroState, classNames = {} -}: VirtualizedContentProps) { +}: DataTableVirtualizedContentProps) { const { onRowClick, table, diff --git a/packages/react/components/data-table/data-table.tsx b/packages/react/components/data-table/data-table.tsx index 201f70925..ae3dbd84a 100644 --- a/packages/react/components/data-table/data-table.tsx +++ b/packages/react/components/data-table/data-table.tsx @@ -51,7 +51,7 @@ function DataTableRoot({ onColumnVisibilityChange, stickyGroupHeader = false, getRowId -}: React.PropsWithChildren>) { +}: DataTableProps) { const defaultTableQuery = useMemo( () => getDefaultTableQuery(defaultSort, query, columns), [defaultSort, query, columns] diff --git a/packages/react/components/data-table/data-table.types.tsx b/packages/react/components/data-table/data-table.types.tsx index 7805967ee..e71631ebe 100644 --- a/packages/react/components/data-table/data-table.types.tsx +++ b/packages/react/components/data-table/data-table.types.tsx @@ -120,6 +120,7 @@ export interface DataTableProps { stickyGroupHeader?: boolean; /** Return a stable unique id for each row (used as React key). Use for sortable/filterable tables. */ getRowId?: (row: TData, index: number) => string; + children?: React.ReactNode; } export type DataTableContentClassNames = { @@ -138,7 +139,7 @@ export type DataTableContentBaseProps = { export type DataTableContentProps = DataTableContentBaseProps; -export type VirtualizedContentProps = DataTableContentBaseProps & { +export type DataTableVirtualizedContentProps = DataTableContentBaseProps & { /** Height of each row in pixels. */ rowHeight?: number; /** Height of group header rows in pixels. Defaults to 40 (matches the non-virtualized section header height). */ diff --git a/packages/react/components/data-table/index.ts b/packages/react/components/data-table/index.ts index 6070e9bd1..275400b14 100644 --- a/packages/react/components/data-table/index.ts +++ b/packages/react/components/data-table/index.ts @@ -1,14 +1,18 @@ export { EmptyFilterValue } from '~/types/filters'; +export type { DataTableDisplayControlsProps } from './components/display-settings'; +export type { DataTableFiltersProps } from './components/filters'; export type { DataTableSearchProps } from './components/search'; +export type { DataTableToolbarProps } from './components/toolbar'; export { DataTable } from './data-table'; export { DataTableColumnDef, DataTableContentProps, DataTableFilter, + type DataTableProps, DataTableQuery, DataTableSort, + DataTableVirtualizedContentProps, InternalFilter, - InternalQuery, - VirtualizedContentProps + InternalQuery } from './data-table.types'; export { useDataTable } from './hooks/useDataTable'; diff --git a/packages/react/components/data-view/components/display-controls.tsx b/packages/react/components/data-view/components/display-controls.tsx index d90a670c8..41a8d9690 100644 --- a/packages/react/components/data-view/components/display-controls.tsx +++ b/packages/react/components/data-view/components/display-controls.tsx @@ -15,7 +15,7 @@ import { Grouping } from './grouping'; import { Ordering } from './ordering'; import { ViewSwitcher } from './view-switcher'; -interface DisplayControlsProps +export interface DataViewDisplayControlsProps extends Pick { trigger?: ReactNode; hideViewSwitcher?: boolean; @@ -49,7 +49,7 @@ export function DisplayControls({ hideDisplayProperties = false, align = 'end', ...positionerProps -}: DisplayControlsProps) { +}: DataViewDisplayControlsProps) { const { fields, updateTableQuery, diff --git a/packages/react/components/data-view/components/toolbar.tsx b/packages/react/components/data-view/components/toolbar.tsx index 96f3231ad..6184be86c 100644 --- a/packages/react/components/data-view/components/toolbar.tsx +++ b/packages/react/components/data-view/components/toolbar.tsx @@ -1,15 +1,16 @@ 'use client'; import { cx } from 'class-variance-authority'; -import { PropsWithChildren } from 'react'; +import { ReactNode } from 'react'; import { Flex } from '../../flex'; import styles from '../data-view.module.css'; import { useDataView } from '../hooks/useDataView'; import { DisplayControls } from './display-controls'; import { Filters } from './filters'; -interface ToolbarProps { +export interface DataViewToolbarProps { className?: string; + children?: ReactNode; } /** @@ -19,10 +20,7 @@ interface ToolbarProps { * custom actions); omitting children renders the default * ` + ` pair. */ -export function Toolbar({ - className, - children -}: PropsWithChildren) { +export function Toolbar({ className, children }: DataViewToolbarProps) { const { shouldShowFilters } = useDataView(); if (!shouldShowFilters) return null; diff --git a/packages/react/components/data-view/data-view.tsx b/packages/react/components/data-view/data-view.tsx index 12b6606e8..8857f3fd7 100644 --- a/packages/react/components/data-view/data-view.tsx +++ b/packages/react/components/data-view/data-view.tsx @@ -67,7 +67,7 @@ function DataViewRoot({ view, onViewChange, groupByResolvers -}: React.PropsWithChildren>) { +}: DataViewProps) { const defaultTableQuery = useMemo( () => getDefaultTableQuery(defaultSort, query, fields), [defaultSort, query, fields] diff --git a/packages/react/components/data-view/data-view.types.tsx b/packages/react/components/data-view/data-view.types.tsx index 6d2928775..8ec4dff2b 100644 --- a/packages/react/components/data-view/data-view.types.tsx +++ b/packages/react/components/data-view/data-view.types.tsx @@ -196,6 +196,7 @@ export interface DataViewProps { * to compute the bucket id per row when a key matches one in this map. */ groupByResolvers?: Record>; + children?: React.ReactNode; } /** @deprecated Every key here has an equivalent `[data-slot]` selector. See the List slot table in the DataView docs. Prefer styling by `data-slot` over threading class names through props. */ diff --git a/packages/react/components/data-view/index.ts b/packages/react/components/data-view/index.ts index 5cb2cf95f..e85040a86 100644 --- a/packages/react/components/data-view/index.ts +++ b/packages/react/components/data-view/index.ts @@ -3,11 +3,12 @@ export { EmptyFilterValue } from '~/types/filters'; export type { DataViewClearFiltersProps } from './components/clear-filters'; export type { DataViewCustomProps } from './components/custom'; export type { DataViewDisplayAccessProps } from './components/display-access'; +export type { DataViewDisplayControlsProps } from './components/display-controls'; export type { DataViewEmptyStateProps } from './components/empty-state'; export type { DataViewFiltersProps } from './components/filters'; export type { DataViewSearchProps } from './components/search'; +export type { DataViewToolbarProps } from './components/toolbar'; export type { DataViewZeroStateProps } from './components/zero-state'; - export { DataView } from './data-view'; export type { DataViewContextType, diff --git a/packages/react/components/dialog/index.ts b/packages/react/components/dialog/index.ts index 480740a46..e5d671ec2 100644 --- a/packages/react/components/dialog/index.ts +++ b/packages/react/components/dialog/index.ts @@ -1 +1,2 @@ export { Dialog } from './dialog'; +export type { DialogContentProps } from './dialog-content'; diff --git a/packages/react/components/drawer/drawer-content.tsx b/packages/react/components/drawer/drawer-content.tsx index e07342b7e..d596bfac0 100644 --- a/packages/react/components/drawer/drawer-content.tsx +++ b/packages/react/components/drawer/drawer-content.tsx @@ -32,6 +32,11 @@ export interface DrawerContentProps children?: ReactNode; /** Corner radius for this drawer only. Overrides the theme's `radius`. */ radius?: Radius; + /** + * Accessible label for the close button. + * @default 'Close' + */ + closeLabel?: string; } export function DrawerContent({ @@ -45,7 +50,7 @@ export function DrawerContent({ closeLabel = 'Close', radius, ...props -}: DrawerContentProps & { closeLabel?: string }) { +}: DrawerContentProps) { const resolvedAriaLabel = ariaLabel ?? (ariaLabelledBy ? undefined : 'Drawer'); const theme = useThemeInjection(); diff --git a/packages/react/components/drawer/index.tsx b/packages/react/components/drawer/index.tsx index 8827142e8..855852bb6 100644 --- a/packages/react/components/drawer/index.tsx +++ b/packages/react/components/drawer/index.tsx @@ -1 +1,3 @@ export { Drawer } from './drawer'; +export type { DrawerContentProps } from './drawer-content'; +export type { DrawerRootProps as DrawerProps } from './drawer-root'; diff --git a/packages/react/components/empty-state/empty-state.tsx b/packages/react/components/empty-state/empty-state.tsx index 14b05185c..faddad338 100644 --- a/packages/react/components/empty-state/empty-state.tsx +++ b/packages/react/components/empty-state/empty-state.tsx @@ -11,7 +11,7 @@ type classNameKeys = | 'heading' | 'subHeading'; -interface EmptyStateProps extends ComponentProps { +export interface EmptyStateProps extends ComponentProps { icon: ReactNode; heading?: ReactNode; subHeading?: ReactNode; diff --git a/packages/react/components/empty-state/index.tsx b/packages/react/components/empty-state/index.tsx index 6cc754ae0..ef799c543 100644 --- a/packages/react/components/empty-state/index.tsx +++ b/packages/react/components/empty-state/index.tsx @@ -1 +1 @@ -export { EmptyState } from './empty-state'; +export { EmptyState, type EmptyStateProps } from './empty-state'; diff --git a/packages/react/components/flex/flex.tsx b/packages/react/components/flex/flex.tsx index 4a9e79b83..e3ab53022 100644 --- a/packages/react/components/flex/flex.tsx +++ b/packages/react/components/flex/flex.tsx @@ -44,7 +44,8 @@ const flex = cva(styles.flex, { } }); -type BoxProps = VariantProps & useRender.ComponentProps<'div'>; +export type FlexProps = VariantProps & + useRender.ComponentProps<'div'>; export function Flex({ inline, @@ -57,7 +58,7 @@ export function Flex({ render, ref, ...props -}: BoxProps) { +}: FlexProps) { const flexProps = { 'data-slot': 'flex', className: flex({ diff --git a/packages/react/components/flex/index.tsx b/packages/react/components/flex/index.tsx index 7d7e52a50..f4adaa3ca 100644 --- a/packages/react/components/flex/index.tsx +++ b/packages/react/components/flex/index.tsx @@ -1 +1 @@ -export { Flex } from './flex'; +export { Flex, type FlexProps } from './flex'; diff --git a/packages/react/components/grid/grid-item.tsx b/packages/react/components/grid/grid-item.tsx index 923860b01..a4d93dbf2 100644 --- a/packages/react/components/grid/grid-item.tsx +++ b/packages/react/components/grid/grid-item.tsx @@ -2,7 +2,7 @@ import { mergeProps, useRender } from '@base-ui/react'; import { CSSProperties } from 'react'; import { AlignType } from './types'; -type GridItemProps = useRender.ComponentProps<'div'> & { +export type GridItemProps = useRender.ComponentProps<'div'> & { area?: string; colStart?: number | string; colEnd?: number | string; diff --git a/packages/react/components/grid/grid.tsx b/packages/react/components/grid/grid.tsx index 37a9eb617..ae178b8a6 100644 --- a/packages/react/components/grid/grid.tsx +++ b/packages/react/components/grid/grid.tsx @@ -17,7 +17,7 @@ const grid = cva(styles.grid, { } }); -type GridProps = useRender.ComponentProps<'div'> & +export type GridProps = useRender.ComponentProps<'div'> & VariantProps & { /** * Supports CSS Grid template areas syntax. diff --git a/packages/react/components/grid/index.ts b/packages/react/components/grid/index.ts index 265dfc40f..7d19a15b0 100644 --- a/packages/react/components/grid/index.ts +++ b/packages/react/components/grid/index.ts @@ -4,3 +4,5 @@ import { GridItem } from './grid-item'; export const Grid = Object.assign(GridPrimitive, { Item: GridItem }); +export type { GridProps } from './grid'; +export type { GridItemProps } from './grid-item'; diff --git a/packages/react/components/headline/index.tsx b/packages/react/components/headline/index.tsx index 1869c5dd4..5aad07dae 100644 --- a/packages/react/components/headline/index.tsx +++ b/packages/react/components/headline/index.tsx @@ -1 +1,2 @@ +export type { HeadlineProps } from './headline'; export * from './headline'; diff --git a/packages/react/components/icon-button/index.tsx b/packages/react/components/icon-button/index.tsx index 13aaf00af..52133029c 100644 --- a/packages/react/components/icon-button/index.tsx +++ b/packages/react/components/icon-button/index.tsx @@ -1 +1 @@ -export { IconButton } from './icon-button'; +export { IconButton, type IconButtonProps } from './icon-button'; diff --git a/packages/react/components/image/image.tsx b/packages/react/components/image/image.tsx index 3aafde65b..af8c839c3 100644 --- a/packages/react/components/image/image.tsx +++ b/packages/react/components/image/image.tsx @@ -22,7 +22,9 @@ const image = cva(styles.image, { } }); -interface ImageProps extends ComponentProps<'img'>, VariantProps { +export interface ImageProps + extends ComponentProps<'img'>, + VariantProps { fallback?: string; } diff --git a/packages/react/components/image/index.tsx b/packages/react/components/image/index.tsx index c6fc1f1a5..816932890 100644 --- a/packages/react/components/image/index.tsx +++ b/packages/react/components/image/index.tsx @@ -1 +1 @@ -export { Image } from './image'; +export { Image, type ImageProps } from './image'; diff --git a/packages/react/components/indicator/index.tsx b/packages/react/components/indicator/index.tsx index e914a6cd2..d93375687 100644 --- a/packages/react/components/indicator/index.tsx +++ b/packages/react/components/indicator/index.tsx @@ -1 +1 @@ -export { Indicator } from './indicator'; +export { Indicator, type IndicatorProps } from './indicator'; diff --git a/packages/react/components/input/index.tsx b/packages/react/components/input/index.tsx index f376f8cdb..f47a3e090 100644 --- a/packages/react/components/input/index.tsx +++ b/packages/react/components/input/index.tsx @@ -1 +1 @@ -export { Input } from './input'; +export { Input, type InputProps } from './input'; diff --git a/packages/react/components/link/index.tsx b/packages/react/components/link/index.tsx index 63b88256e..f0f795b85 100644 --- a/packages/react/components/link/index.tsx +++ b/packages/react/components/link/index.tsx @@ -1 +1 @@ -export { Link } from './link'; +export { Link, type LinkProps } from './link'; diff --git a/packages/react/components/list/index.tsx b/packages/react/components/list/index.tsx index 53821c4bd..41c3baca0 100644 --- a/packages/react/components/list/index.tsx +++ b/packages/react/components/list/index.tsx @@ -1 +1,8 @@ -export { List } from './list'; +export { + List, + type ListHeaderProps, + type ListItemProps, + type ListLabelProps, + type ListRootProps as ListProps, + type ListValueProps +} from './list'; diff --git a/packages/react/components/list/list.tsx b/packages/react/components/list/list.tsx index 7bf508851..c61f3f6f9 100644 --- a/packages/react/components/list/list.tsx +++ b/packages/react/components/list/list.tsx @@ -10,25 +10,25 @@ const value = cva(styles.value); const header = cva(styles.header); const headerText = cva(styles['header-text']); -interface ListRootProps +export interface ListRootProps extends ComponentProps<'ul'>, VariantProps { children: ReactNode; } -interface ListItemProps extends ComponentProps<'li'> { +export interface ListItemProps extends ComponentProps<'li'> { children: ReactNode; } -interface ListLabelProps extends ComponentProps<'span'> { +export interface ListLabelProps extends ComponentProps<'span'> { children: ReactNode; } -interface ListValueProps extends ComponentProps<'span'> { +export interface ListValueProps extends ComponentProps<'span'> { children: ReactNode; } -interface ListHeaderProps extends ComponentProps<'div'> { +export interface ListHeaderProps extends ComponentProps<'div'> { children: ReactNode; /** * Heading level set as `aria-level` on the underlying heading. diff --git a/packages/react/components/menu/index.ts b/packages/react/components/menu/index.ts index 01435c7b0..53f7d3473 100644 --- a/packages/react/components/menu/index.ts +++ b/packages/react/components/menu/index.ts @@ -1 +1,6 @@ export { Menu } from './menu'; +export type { MenuContentProps } from './menu-content'; +export type { MenuItemProps } from './menu-item'; +export type { MenuEmptyStateProps } from './menu-misc'; +export type { MenuRootProps as MenuProps, MenuSubMenuProps } from './menu-root'; +export type { MenuSubTriggerProps, MenuTriggerProps } from './menu-trigger'; diff --git a/packages/react/components/menu/menu-misc.tsx b/packages/react/components/menu/menu-misc.tsx index 78c3c8ba3..792b99486 100644 --- a/packages/react/components/menu/menu-misc.tsx +++ b/packages/react/components/menu/menu-misc.tsx @@ -67,11 +67,15 @@ export function MenuSeparator({ className, ...props }: ComponentProps<'div'>) { } MenuSeparator.displayName = 'Menu.Separator'; +export interface MenuEmptyStateProps extends ComponentProps<'div'> { + children: ReactNode; +} + export function MenuEmptyState({ className, children, ...props -}: ComponentProps<'div'> & { children: ReactNode }) { +}: MenuEmptyStateProps) { return (
, 'orientation'> { orientation?: 'vertical' | 'horizontal'; @@ -60,7 +60,7 @@ function RadioGroup({ RadioGroup.displayName = 'Radio.Group'; -interface RadioItemProps +export interface RadioItemProps extends RadioPrimitive.Root.Props, VariantProps {} diff --git a/packages/react/components/reasoning/index.tsx b/packages/react/components/reasoning/index.tsx index ff53538d0..9a241c843 100644 --- a/packages/react/components/reasoning/index.tsx +++ b/packages/react/components/reasoning/index.tsx @@ -1,5 +1,7 @@ export { Reasoning, + type ReasoningContentProps, type ReasoningProps, - type ReasoningStepProps + type ReasoningStepProps, + type ReasoningTriggerProps } from './reasoning'; diff --git a/packages/react/components/search/index.ts b/packages/react/components/search/index.ts index 161bbbb64..b3bae083f 100644 --- a/packages/react/components/search/index.ts +++ b/packages/react/components/search/index.ts @@ -1 +1 @@ -export { Search } from './search'; +export { Search, type SearchProps } from './search'; diff --git a/packages/react/components/select/index.ts b/packages/react/components/select/index.ts index de9bdf23a..4284e8a7f 100644 --- a/packages/react/components/select/index.ts +++ b/packages/react/components/select/index.ts @@ -1 +1,11 @@ export { Select } from './select'; +export type { SelectContentProps } from './select-content'; +export type { SelectItemProps } from './select-item'; +export type { + SelectGroupProps, + SelectLabelProps, + SelectSeparatorProps +} from './select-misc'; +export type { SelectRootProps as SelectProps } from './select-root'; +export type { SelectTriggerProps } from './select-trigger'; +export type { SelectValueProps } from './select-value'; diff --git a/packages/react/components/select/select-value.tsx b/packages/react/components/select/select-value.tsx index 548586d33..5a5ceb136 100644 --- a/packages/react/components/select/select-value.tsx +++ b/packages/react/components/select/select-value.tsx @@ -9,7 +9,7 @@ import { ItemType } from './types'; type ValueType = Omit; -type SelectValueProps = ComponentProps<'span'> & { +export type SelectValueProps = ComponentProps<'span'> & { placeholder?: string; children?: ((value?: ValueType | ValueType[]) => ReactNode) | ReactNode; className?: string; diff --git a/packages/react/components/separator/index.tsx b/packages/react/components/separator/index.tsx index c99fe35dc..84b5222ed 100644 --- a/packages/react/components/separator/index.tsx +++ b/packages/react/components/separator/index.tsx @@ -1 +1 @@ -export { Separator } from './separator'; +export { Separator, type SeparatorProps } from './separator'; diff --git a/packages/react/components/separator/separator.tsx b/packages/react/components/separator/separator.tsx index 7d0d01325..dfcd38627 100644 --- a/packages/react/components/separator/separator.tsx +++ b/packages/react/components/separator/separator.tsx @@ -22,7 +22,7 @@ const separator = cva(styles.separator, { } }); -type SeparatorProps = SeparatorPrimitive.Props & +export type SeparatorProps = SeparatorPrimitive.Props & VariantProps & { /** * When true, the separator is purely decorative and hidden from diff --git a/packages/react/components/side-panel/index.tsx b/packages/react/components/side-panel/index.tsx index 5c3fc9e19..3620dc217 100644 --- a/packages/react/components/side-panel/index.tsx +++ b/packages/react/components/side-panel/index.tsx @@ -1 +1,6 @@ -export { SidePanel } from './side-panel'; +export { + SidePanel, + type SidePanelHeaderProps, + type SidePanelProps, + type SidePanelSectionProps +} from './side-panel'; diff --git a/packages/react/components/side-panel/side-panel.tsx b/packages/react/components/side-panel/side-panel.tsx index 6527c9ec6..6734fcb20 100644 --- a/packages/react/components/side-panel/side-panel.tsx +++ b/packages/react/components/side-panel/side-panel.tsx @@ -16,7 +16,7 @@ const sidePanelRoot = cva(styles['side-panel'], { } }); -interface SidePanelProps +export interface SidePanelProps extends ComponentProps<'aside'>, VariantProps {} @@ -36,7 +36,7 @@ const SidePanelRoot = ({ SidePanelRoot.displayName = 'SidePanel'; -interface SidePanelHeaderProps extends ComponentProps<'div'> { +export interface SidePanelHeaderProps extends ComponentProps<'div'> { title: string; icon?: ReactNode; actions?: Array; @@ -95,7 +95,7 @@ const SidePanelHeader = ({ SidePanelHeader.displayName = 'SidePanel.Header'; -interface SidePanelSectionProps extends ComponentProps<'div'> {} +export interface SidePanelSectionProps extends ComponentProps<'div'> {} const SidePanelSection = ({ className, ...props }: SidePanelSectionProps) => { return ( diff --git a/packages/react/components/sidebar/index.tsx b/packages/react/components/sidebar/index.tsx index 23d174c20..ea6da8518 100644 --- a/packages/react/components/sidebar/index.tsx +++ b/packages/react/components/sidebar/index.tsx @@ -1,3 +1,10 @@ export { Sidebar } from './sidebar'; -export type { SidebarContextValue } from './sidebar-root'; +export type { SidebarGroupProps } from './sidebar-group'; +export type { SidebarItemProps } from './sidebar-item'; +export type { SidebarMoreProps } from './sidebar-more'; +export type { + SidebarContextValue, + SidebarRootProps as SidebarProps +} from './sidebar-root'; export { useSidebar } from './sidebar-root'; +export type { SidebarTriggerProps } from './sidebar-trigger'; diff --git a/packages/react/components/sidebar/sidebar-group.tsx b/packages/react/components/sidebar/sidebar-group.tsx index 5f58cd716..4545e34f8 100644 --- a/packages/react/components/sidebar/sidebar-group.tsx +++ b/packages/react/components/sidebar/sidebar-group.tsx @@ -10,7 +10,7 @@ import { SidebarLeadingVisual } from './sidebar-leading-visual'; import { useSidebarSafe } from './sidebar-root'; import { SidebarTrailingVisual } from './sidebar-trailing-visual'; -export interface SidebarNavigationGroupProps extends ComponentProps<'section'> { +export interface SidebarGroupProps extends ComponentProps<'section'> { label: string; /** * Renders the group as an accordion whose items can be shown or hidden. @@ -54,7 +54,7 @@ export function SidebarNavigationGroup({ classNames, children, ...props -}: SidebarNavigationGroupProps) { +}: SidebarGroupProps) { const { isCollapsed } = useSidebarSafe(); const [internalOpen, setInternalOpen] = useState(defaultOpen); const isOpen = isCollapsed || (providedOpen ?? internalOpen); diff --git a/packages/react/components/skeleton/index.ts b/packages/react/components/skeleton/index.ts index 9147f13a9..d682bf302 100644 --- a/packages/react/components/skeleton/index.ts +++ b/packages/react/components/skeleton/index.ts @@ -1 +1,5 @@ -export { Skeleton } from './skeleton'; +export { + Skeleton, + type SkeletonProps, + type SkeletonProviderProps +} from './skeleton'; diff --git a/packages/react/components/skeleton/skeleton.tsx b/packages/react/components/skeleton/skeleton.tsx index 9e0ce8c8c..b09698307 100644 --- a/packages/react/components/skeleton/skeleton.tsx +++ b/packages/react/components/skeleton/skeleton.tsx @@ -22,7 +22,7 @@ export interface SkeletonProps { const SkeletonContext = createContext(null); -interface SkeletonProviderProps extends SkeletonProps { +export interface SkeletonProviderProps extends SkeletonProps { children: ReactNode; } diff --git a/packages/react/components/slider/index.tsx b/packages/react/components/slider/index.tsx index 611e90646..74eacb709 100644 --- a/packages/react/components/slider/index.tsx +++ b/packages/react/components/slider/index.tsx @@ -1 +1 @@ -export { Slider } from './slider'; +export { Slider, type SliderProps } from './slider'; diff --git a/packages/react/components/spinner/index.tsx b/packages/react/components/spinner/index.tsx index b2a4e980b..c70327904 100644 --- a/packages/react/components/spinner/index.tsx +++ b/packages/react/components/spinner/index.tsx @@ -1 +1 @@ -export { Spinner } from './spinner'; +export { Spinner, type SpinnerProps } from './spinner'; diff --git a/packages/react/components/switch/index.ts b/packages/react/components/switch/index.ts index 675ddba51..73eb5710d 100644 --- a/packages/react/components/switch/index.ts +++ b/packages/react/components/switch/index.ts @@ -1 +1 @@ -export { Switch } from './switch'; +export { Switch, type SwitchProps } from './switch'; diff --git a/packages/react/components/table/index.ts b/packages/react/components/table/index.ts index 48232283c..9d4fc0b57 100644 --- a/packages/react/components/table/index.ts +++ b/packages/react/components/table/index.ts @@ -1 +1,9 @@ -export { Table } from './table'; +export { + Table, + type TableCellProps, + type TableHeaderProps, + type TableHeadProps, + type TableProps, + type TableRowProps, + type TableSectionHeaderProps +} from './table'; diff --git a/packages/react/components/table/table.tsx b/packages/react/components/table/table.tsx index 619d1a806..afd599fe4 100644 --- a/packages/react/components/table/table.tsx +++ b/packages/react/components/table/table.tsx @@ -3,10 +3,8 @@ import { ComponentProps } from 'react'; import styles from './table.module.css'; const table = cva(styles['table']); -function TableRoot({ - className, - ...props -}: ComponentProps<'table'> & VariantProps) { +export type TableProps = ComponentProps<'table'> & VariantProps; +function TableRoot({ className, ...props }: TableProps) { return ( ); @@ -14,10 +12,9 @@ function TableRoot({ TableRoot.displayName = 'Table'; const header = cva(styles['header']); -function TableHeader({ - className, - ...props -}: ComponentProps<'thead'> & VariantProps) { +export type TableHeaderProps = ComponentProps<'thead'> & + VariantProps; +function TableHeader({ className, ...props }: TableHeaderProps) { return ( & VariantProps) { +export type TableRowProps = ComponentProps<'tr'> & VariantProps; +function TableRow({ className, interactive, ...props }: TableRowProps) { return ( & VariantProps) { +export type TableHeadProps = ComponentProps<'th'> & VariantProps; +function TableHead({ className, scope = 'col', ...props }: TableHeadProps) { return ( ; +export type TabsRootProps = TabsPrimitive.Root.Props & + VariantProps; function TabsRoot({ className, variant, size, ...props }: TabsRootProps) { return ( @@ -52,7 +53,7 @@ function TabsList({ className, children, ...props }: TabsPrimitive.List.Props) { } TabsList.displayName = 'Tabs.List'; -interface TabsTabProps extends TabsPrimitive.Tab.Props { +export interface TabsTabProps extends TabsPrimitive.Tab.Props { leadingIcon?: ReactNode; } diff --git a/packages/react/components/text-area/index.tsx b/packages/react/components/text-area/index.tsx index 88ff10393..b6419545a 100644 --- a/packages/react/components/text-area/index.tsx +++ b/packages/react/components/text-area/index.tsx @@ -1 +1 @@ -export { TextArea } from './text-area'; +export { TextArea, type TextAreaProps } from './text-area'; diff --git a/packages/react/components/text/index.tsx b/packages/react/components/text/index.tsx index 1a9ac1460..74782c49e 100644 --- a/packages/react/components/text/index.tsx +++ b/packages/react/components/text/index.tsx @@ -1 +1,2 @@ +export type { TextProps } from './text'; export * from './text'; diff --git a/packages/react/components/toast/index.ts b/packages/react/components/toast/index.ts index bcb815d4e..56ded51ab 100644 --- a/packages/react/components/toast/index.ts +++ b/packages/react/components/toast/index.ts @@ -1,3 +1,3 @@ export { Toast, toastManager, useToastManager } from './toast'; export type { ToastPosition, ToastProviderProps } from './toast-provider'; -export type { ToastRootProps } from './toast-root'; +export type { ToastRootProps as ToastProps } from './toast-root'; diff --git a/packages/react/components/toggle/index.ts b/packages/react/components/toggle/index.ts index 6618bb578..edd005658 100644 --- a/packages/react/components/toggle/index.ts +++ b/packages/react/components/toggle/index.ts @@ -1 +1 @@ -export { Toggle } from './toggle'; +export { Toggle, type ToggleProps } from './toggle'; diff --git a/packages/react/components/tooltip/index.tsx b/packages/react/components/tooltip/index.tsx index c20c22cb1..63c4ccd6e 100644 --- a/packages/react/components/tooltip/index.tsx +++ b/packages/react/components/tooltip/index.tsx @@ -1 +1,3 @@ export { Tooltip } from './tooltip'; +export type { TooltipContentProps } from './tooltip-content'; +export type { TooltipTriggerProps } from './tooltip-misc'; diff --git a/packages/react/components/tooltip/tooltip-misc.tsx b/packages/react/components/tooltip/tooltip-misc.tsx index 174f815fb..330e9c2aa 100644 --- a/packages/react/components/tooltip/tooltip-misc.tsx +++ b/packages/react/components/tooltip/tooltip-misc.tsx @@ -4,7 +4,7 @@ import { Tooltip as TooltipPrimitive } from '@base-ui/react'; export interface TooltipTriggerProps extends TooltipPrimitive.Trigger.Props {} -export function TooltipTrigger(props: TooltipPrimitive.Trigger.Props) { +export function TooltipTrigger(props: TooltipTriggerProps) { return (
& VariantProps) { +export type TableCellProps = ComponentProps<'td'> & VariantProps; +function TableCell({ className, ...props }: TableCellProps) { return ( ); @@ -85,6 +74,14 @@ TableCell.displayName = 'Table.Cell'; const sectionHeader = cva(styles['sectionHeader']); type SectionHeaderClassNames = 'row' | 'cell'; +export interface TableSectionHeaderProps extends ComponentProps<'tr'> { + colSpan: number; + /** + * @deprecated Use `[data-slot="table-section-header"]` (row) and + * `[data-slot="table-section-header-cell"]` (cell) instead. + */ + classNames?: Partial>; +} function SectionHeader({ className, classNames, @@ -92,14 +89,7 @@ function SectionHeader({ children, ref, ...rest -}: ComponentProps<'tr'> & { - colSpan: number; - /** - * @deprecated Use `[data-slot="table-section-header"]` (row) and - * `[data-slot="table-section-header-cell"]` (cell) instead. - */ - classNames?: Partial>; -}) { +}: TableSectionHeaderProps) { return (