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'