diff --git a/packages/react/src/components/table/Table.stories.tsx b/packages/react/src/components/table/Table.stories.tsx index 088638b..eeac50f 100644 --- a/packages/react/src/components/table/Table.stories.tsx +++ b/packages/react/src/components/table/Table.stories.tsx @@ -28,7 +28,7 @@ const defaultProps = { export const Default: StoryFn = (args: TableProps) => ( - Name + Name Title Email Role diff --git a/packages/react/src/components/table/TableCell.tsx b/packages/react/src/components/table/TableCell.tsx index 83d5597..bcad2c4 100644 --- a/packages/react/src/components/table/TableCell.tsx +++ b/packages/react/src/components/table/TableCell.tsx @@ -1,4 +1,5 @@ import type * as Polymophic from '@/utilities/polymorphic' +import type { TableVariantProps } from '@giantnodes/theme' import type { CellProps } from 'react-aria-components' import React from 'react' @@ -8,7 +9,7 @@ import { useTableContext } from '@/components/table/use-table.hook' const __ELEMENT_TYPE__ = 'td' -type ComponentOwnProps = CellProps +type ComponentOwnProps = CellProps & Pick type ComponentProps = Polymophic.ComponentPropsWithRef @@ -18,7 +19,7 @@ type ComponentType = ( const Component: ComponentType = React.forwardRef( (props: ComponentProps, ref: Polymophic.Ref) => { - const { as, children, className, ...rest } = props + const { as, children, className, size, ...rest } = props const Element = as ?? Cell @@ -26,10 +27,10 @@ const Component: ComponentType = React.forwardRef( const component = React.useMemo( () => ({ - className: slots.td({ className: className?.toString() }), + className: slots.td({ className: className?.toString(), size }), ...rest, }), - [className, rest, slots] + [className, rest, size, slots] ) return ( diff --git a/packages/react/src/components/table/TableColumn.tsx b/packages/react/src/components/table/TableColumn.tsx index e883097..da11bd3 100644 --- a/packages/react/src/components/table/TableColumn.tsx +++ b/packages/react/src/components/table/TableColumn.tsx @@ -1,4 +1,5 @@ import type * as Polymophic from '@/utilities/polymorphic' +import type { TableVariantProps } from '@giantnodes/theme' import type { ColumnProps } from 'react-aria-components' import React from 'react' @@ -8,7 +9,7 @@ import { useTableContext } from '@/components/table/use-table.hook' const __ELEMENT_TYPE__ = 'th' -type ComponentOwnProps = ColumnProps +type ComponentOwnProps = ColumnProps & Pick type ComponentProps = Polymophic.ComponentPropsWithRef @@ -18,7 +19,7 @@ type ComponentType = ( const Component: ComponentType = React.forwardRef( (props: ComponentProps, ref: Polymophic.Ref) => { - const { as, children, className, ...rest } = props + const { as, children, className, size, ...rest } = props const Element = as ?? Column @@ -26,10 +27,10 @@ const Component: ComponentType = React.forwardRef( const component = React.useMemo( () => ({ - className: slots.th({ className: className?.toString() }), + className: slots.th({ className: className?.toString(), size }), ...rest, }), - [className, rest, slots] + [className, rest, size, slots] ) return ( diff --git a/packages/react/src/components/table/TableHead.tsx b/packages/react/src/components/table/TableHead.tsx index 4bc388d..01ec5a7 100644 --- a/packages/react/src/components/table/TableHead.tsx +++ b/packages/react/src/components/table/TableHead.tsx @@ -2,8 +2,9 @@ import type * as Polymophic from '@/utilities/polymorphic' import type { TableHeaderProps } from 'react-aria-components' import React from 'react' -import { Checkbox, Collection, TableHeader, useTableOptions } from 'react-aria-components' +import { Collection, TableHeader, useTableOptions } from 'react-aria-components' +import Checkbox from '@/components/checkbox/Checkbox' import TableColumn from '@/components/table/TableColumn' import { useTableContext } from '@/components/table/use-table.hook' diff --git a/packages/react/src/components/table/TableRow.tsx b/packages/react/src/components/table/TableRow.tsx index 6803616..27e37f6 100644 --- a/packages/react/src/components/table/TableRow.tsx +++ b/packages/react/src/components/table/TableRow.tsx @@ -2,8 +2,9 @@ import type * as Polymophic from '@/utilities/polymorphic' import type { RowProps } from 'react-aria-components' import React from 'react' -import { Button, Checkbox, Collection, Row, useTableOptions } from 'react-aria-components' +import { Button, Collection, Row, useTableOptions } from 'react-aria-components' +import Checkbox from '@/components/checkbox/Checkbox' import TableCell from '@/components/table/TableCell' import { useTableContext } from '@/components/table/use-table.hook'