@duro-app/ui 0.22.0 → 0.23.0

package/src/components/Table/Table.stories.tsx

@@ -55,7 +55,7 @@ function statusVariant(status: string) {
 
 export const Default: Story = {
   render: () => (
-    <Table.Root columns={4}>
+    <Table.Root>
       <Table.Header>
         <Table.Row>
           <Table.HeaderCell>Service</Table.HeaderCell>
@@ -108,7 +108,7 @@ export const Default: Story = {
 
 export const Striped: Story = {
   render: () => (
-    <Table.Root variant="striped" columns={4}>
+    <Table.Root variant="striped">
       <Table.Header>
         <Table.Row>
           <Table.HeaderCell>Service</Table.HeaderCell>
@@ -141,7 +141,7 @@ export const Striped: Story = {
 
 export const Bordered: Story = {
   render: () => (
-    <Table.Root variant="bordered" columns={4}>
+    <Table.Root variant="bordered">
       <Table.Header>
         <Table.Row>
           <Table.HeaderCell>Service</Table.HeaderCell>
@@ -175,7 +175,7 @@ export const Bordered: Story = {
 
 export const Compact: Story = {
   render: () => (
-    <Table.Root size="sm" columns={4}>
+    <Table.Root size="sm">
       <Table.Header>
         <Table.Row>
           <Table.HeaderCell>Service</Table.HeaderCell>
@@ -248,7 +248,7 @@ function CheckboxTableDemo() {
 
   return (
     <>
-      <Table.Root columns={5}>
+      <Table.Root>
         <Table.Header>
           <Table.Row>
             <Table.HeaderCell aria-label="Select all">
@@ -316,7 +316,7 @@ export const AllVariants: Story = {
     <html.div style={storyStyles.stack}>
       <html.div>
         <html.span style={storyStyles.label}>Default</html.span>
-        <Table.Root columns={3}>
+        <Table.Root>
           <Table.Header>
             <Table.Row>
               <Table.HeaderCell>Name</Table.HeaderCell>
@@ -341,7 +341,7 @@ export const AllVariants: Story = {
 
       <html.div>
         <html.span style={storyStyles.label}>Striped</html.span>
-        <Table.Root variant="striped" columns={3}>
+        <Table.Root variant="striped">
           <Table.Header>
             <Table.Row>
               <Table.HeaderCell>Name</Table.HeaderCell>
@@ -371,7 +371,7 @@ export const AllVariants: Story = {
 
       <html.div>
         <html.span style={storyStyles.label}>Bordered</html.span>
-        <Table.Root variant="bordered" columns={3}>
+        <Table.Root variant="bordered">
           <Table.Header>
             <Table.Row>
               <Table.HeaderCell>Name</Table.HeaderCell>
@@ -396,7 +396,7 @@ export const AllVariants: Story = {
 
       <html.div>
         <html.span style={storyStyles.label}>Compact (sm)</html.span>
-        <Table.Root size="sm" columns={3}>
+        <Table.Root size="sm">
           <Table.Header>
             <Table.Row>
               <Table.HeaderCell>Name</Table.HeaderCell>

package/src/components/Table/Table.tsx

@@ -1,4 +1,4 @@
-import {type ReactNode, createContext, useContext, Children} from 'react'
+import {type ReactNode, type MutableRefObject, createContext, useContext, useRef, Children, isValidElement} from 'react'
 import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
 
@@ -12,8 +12,8 @@ export type TableSize = 'sm' | 'md'
 interface TableContextValue {
   variant: TableVariant
   size: TableSize
-  columns: number
-  isHeader: boolean
+  /** Mutable ref: header Row writes inferred template, body Rows read it */
+  inferredTemplateRef: MutableRefObject<string | null>
 }
 
 const TableContext = createContext<TableContextValue | null>(null)
@@ -24,7 +24,7 @@ function useTable() {
   return ctx
 }
 
-// --- HeaderContext (to distinguish header vs body rowgroup) ---
+// --- HeaderContext ---
 
 const HeaderContext = createContext(false)
 
@@ -34,12 +34,13 @@ interface RootProps {
   children: ReactNode
   variant?: TableVariant
   size?: TableSize
-  columns: number
 }
 
-function Root({children, variant = 'default', size = 'md', columns}: RootProps) {
+function Root({children, variant = 'default', size = 'md'}: RootProps) {
+  const inferredTemplateRef = useRef<string | null>(null)
+
   return (
-    <TableContext.Provider value={{variant, size, columns, isHeader: false}}>
+    <TableContext.Provider value={{variant, size, inferredTemplateRef}}>
       <html.div role="table" style={styles.root}>
         {children}
       </html.div>
@@ -83,24 +84,40 @@ function Body({children}: {children: ReactNode}) {
   )
 }
 
-// Row index context for striped variant
 const RowIndexContext = createContext<number>(-1)
 
 // --- Row ---
 
 function Row({children}: {children: ReactNode}) {
-  const {variant, columns} = useTable()
+  const {variant, inferredTemplateRef} = useTable()
   const isHeader = useContext(HeaderContext)
   const rowIndex = useContext(RowIndexContext)
   const isEvenRow = rowIndex >= 0 && rowIndex % 2 === 1
   const childArray = Children.toArray(children)
 
+  let template: string
+
+  if (isHeader) {
+    // Build template from HeaderCell width props
+    const widths: string[] = []
+    Children.forEach(children, (child) => {
+      if (isValidElement(child)) {
+        const props = child.props as {width?: string}
+        widths.push(props.width || '1fr')
+      }
+    })
+    template = widths.join(' ')
+    inferredTemplateRef.current = template
+  } else {
+    template = inferredTemplateRef.current ?? `repeat(${childArray.length}, 1fr)`
+  }
+
   return (
     <html.div
       role="row"
       style={[
         styles.row,
-        styles.gridColumns(columns),
+        styles.gridColumns(template),
         !isHeader && styles.bodyRow,
         !isHeader && variant === 'striped' && isEvenRow && styles.stripedEven,
       ]}
@@ -116,19 +133,18 @@ function Row({children}: {children: ReactNode}) {
   )
 }
 
-// Cell index context for bordered variant
-const CellIndexContext = createContext<{index: number; total: number}>({
-  index: 0,
-  total: 0,
-})
+const CellIndexContext = createContext<{index: number; total: number}>({index: 0, total: 0})
 
 // --- HeaderCell ---
 
 function HeaderCell({
   children,
+  width: _width,
   'aria-label': ariaLabel,
 }: {
   children?: ReactNode
+  /** Column width: CSS value like '40px', '2fr', 'auto'. Defaults to '1fr'. */
+  width?: string
   'aria-label'?: string
 }) {
   const {size, variant} = useTable()

package/src/components/Table/styles.css.ts

@@ -91,7 +91,7 @@ export const styles = css.create({
   },
 
   // Dynamic styles — simple identifier params only (StyleX constraint)
-  gridColumns: (columns: number) => ({
-    gridTemplateColumns: `repeat(${columns}, 1fr)`,
+  gridColumns: (template: string) => ({
+    gridTemplateColumns: template,
   }),
 })

package/src/components/ThemeProvider/ThemeProvider.meta.ts

@@ -7,9 +7,7 @@ export const meta: ComponentMeta = {
     'App root — required for all Duro components to render correctly',
     'Theme switching (dark/light mode toggle)',
   ],
-  whenNotToUse: [
-    'Never omit — all Duro components require ThemeProvider',
-  ],
+  whenNotToUse: ['Never omit — all Duro components require ThemeProvider'],
   example: `<ThemeProvider theme="dark">
   <App />
 </ThemeProvider>`,

package/src/index.ts

@@ -11,6 +11,7 @@ export {Button, type ButtonVariant, type ButtonSize} from './components/Button/B
 export {Callout, type CalloutVariant} from './components/Callout/Callout'
 export {Card, type CardVariant, type CardSize} from './components/Card/Card'
 export {Checkbox} from './components/Checkbox/Checkbox'
+export {CheckboxGroup} from './components/CheckboxGroup/CheckboxGroup'
 export {Dialog, type DialogSize} from './components/Dialog/Dialog'
 export {DetailPanel, type DetailPanelSize} from './components/DetailPanel/DetailPanel'
 export {Drawer, type DrawerAnchor, type DrawerSize} from './components/Drawer/Drawer'
@@ -29,6 +30,7 @@ export {
 } from './components/LinkButton/LinkButton'
 export {Menu} from './components/Menu/Menu'
 export {Panel} from './components/Panel/Panel'
+export {RadioGroup} from './components/RadioGroup/RadioGroup'
 export {ScrollArea} from './components/ScrollArea/ScrollArea'
 export {Select} from './components/Select/Select'
 export {SideNav} from './components/SideNav/SideNav'