@fidely-ui/react
Version:
Fidely UI is a modern, beautifully crafted React design system powered by Ark UI and Panda CSS, delivering accessible and themeable components for building exceptional web apps
22 lines (21 loc) • 1.18 kB
JavaScript
'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import { ark } from '@ark-ui/react/factory';
import { styled } from '@fidely-ui/styled-system/jsx';
import { table } from '@fidely-ui/styled-system/recipes';
import { makeStyleContext } from '../../system/make-style-context';
import { forwardRef } from 'react';
import { cx } from '@fidely-ui/styled-system/css';
const { withSlotProvider, withSlotContext } = makeStyleContext(table);
export const TableRoot = withSlotProvider(ark.table, 'root');
export const TableBody = withSlotContext(ark.tbody, 'body');
export const TableHeader = withSlotContext(ark.thead, 'header');
export const TableFooter = withSlotContext(ark.tfoot, 'footer');
export const TableRow = withSlotContext(ark.tr, 'row');
export const TableHeadCell = withSlotContext(ark.th, 'headCell');
export const TableCell = withSlotContext(ark.td, 'cell');
export const TableCaption = withSlotContext(ark.caption, 'caption');
export const TableScrollArea = forwardRef(function TableScrollArea(props, ref) {
const slotStyles = table().scrollArea;
return (_jsx(styled.div, { ref: ref, className: cx(slotStyles, props.className), ...props }));
});