@duro-app/ui 0.21.0 → 0.23.0

package/src/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,113 @@
+import {type ReactNode, createContext, useContext, useCallback} from 'react'
+import {html} from 'react-strict-dom'
+import {useControllableValue} from '../../hooks/useControllableValue'
+import {styles} from './styles.css'
+
+// --- Context ---
+
+interface RadioGroupContextValue {
+  value: string
+  onSelect: (value: string) => void
+  disabled: boolean
+}
+
+const RadioGroupContext = createContext<RadioGroupContextValue | null>(null)
+
+function useRadioGroup() {
+  const ctx = useContext(RadioGroupContext)
+  if (!ctx) {
+    throw new Error('RadioGroup.Item must be used within RadioGroup.Root')
+  }
+  return ctx
+}
+
+// --- Root ---
+
+interface RootProps {
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  orientation?: 'horizontal' | 'vertical'
+  disabled?: boolean
+  children: ReactNode
+}
+
+function Root({
+  value: controlledValue,
+  defaultValue = '',
+  onValueChange,
+  orientation = 'vertical',
+  disabled = false,
+  children,
+}: RootProps) {
+  const [value, setValue] = useControllableValue(controlledValue, defaultValue, onValueChange)
+
+  const onSelect = useCallback(
+    (itemValue: string) => {
+      if (!disabled) {
+        setValue(itemValue)
+      }
+    },
+    [disabled, setValue],
+  )
+
+  return (
+    <RadioGroupContext.Provider value={{value, onSelect, disabled}}>
+      <html.div
+        role="radiogroup"
+        aria-orientation={orientation}
+        style={[styles.root, orientation === 'horizontal' && styles.rootHorizontal]}
+      >
+        {children}
+      </html.div>
+    </RadioGroupContext.Provider>
+  )
+}
+
+// --- Item ---
+
+interface ItemProps {
+  value: string
+  disabled?: boolean
+  children: ReactNode
+}
+
+function Item({value, disabled: itemDisabled = false, children}: ItemProps) {
+  const {value: groupValue, onSelect, disabled: groupDisabled} = useRadioGroup()
+  const isChecked = groupValue === value
+  const isDisabled = groupDisabled || itemDisabled
+
+  const handleClick = () => {
+    if (!isDisabled) {
+      onSelect(value)
+    }
+  }
+
+  return (
+    <html.label
+      style={[styles.item, isDisabled && styles.itemDisabled]}
+      onClick={handleClick}
+    >
+      <html.input
+        type="radio"
+        value={value}
+        checked={isChecked}
+        disabled={isDisabled}
+        onChange={() => onSelect(value)}
+        style={styles.input}
+      />
+      <html.span
+        style={[styles.circle, isChecked ? styles.circleChecked : styles.circleUnchecked]}
+        aria-hidden
+      >
+        {isChecked && <html.span style={styles.dot} />}
+      </html.span>
+      {children && <html.span>{children}</html.span>}
+    </html.label>
+  )
+}
+
+export const RadioGroup = {
+  Root,
+  Item,
+}

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

@@ -0,0 +1,66 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
+
+export const styles = css.create({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: spacing.sm,
+  },
+  rootHorizontal: {
+    flexDirection: 'row',
+  },
+  item: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: spacing.sm,
+    cursor: 'pointer',
+    fontSize: typography.fontSizeSm,
+    color: colors.text,
+    lineHeight: typography.lineHeight,
+  },
+  itemDisabled: {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+  },
+  circle: {
+    width: 18,
+    height: 18,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderRadius: radii.full,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    transitionProperty: 'background-color, border-color',
+    transitionDuration: '150ms',
+    transitionTimingFunction: 'ease',
+  },
+  circleUnchecked: {
+    backgroundColor: colors.bg,
+    borderColor: {
+      default: colors.border,
+      ':hover': colors.textMuted,
+    },
+  },
+  circleChecked: {
+    backgroundColor: colors.bg,
+    borderColor: colors.accent,
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: radii.full,
+    backgroundColor: colors.accent,
+  },
+  input: {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    opacity: 0,
+    overflow: 'hidden',
+  },
+})

package/src/components/StatusIcon/StatusIcon.meta.ts

@@ -8,10 +8,7 @@ export const meta: ComponentMeta = {
     'List item status icons with colored backgrounds',
     'Feature or capability indicators',
   ],
-  whenNotToUse: [
-    'Inline icons without background — use Icon',
-    'Status text labels — use Badge',
-  ],
+  whenNotToUse: ['Inline icons without background — use Icon', 'Status text labels — use Badge'],
   relatedTo: [
     {component: 'Icon', relationship: 'StatusIcon wraps Icon with background; Icon is bare SVG'},
     {component: 'Badge', relationship: 'Badge for text status; StatusIcon for icon status'},

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

@@ -11,6 +11,22 @@ import {colors} from '@duro-app/tokens/tokens/colors.css'
 
 const meta: Meta = {
   title: 'Components/Table',
+  argTypes: {
+    columns: {
+      control: 'number',
+      description: 'Number of columns in the table grid',
+    },
+    variant: {
+      control: 'select',
+      options: ['default', 'striped', 'bordered'],
+      description: 'Visual style variant of the table',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Density/size of table rows',
+    },
+  },
 }
 
 export default meta
@@ -39,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>
@@ -92,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>
@@ -125,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>
@@ -159,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>
@@ -232,7 +248,7 @@ function CheckboxTableDemo() {
 
   return (
     <>
-      <Table.Root columns={5}>
+      <Table.Root>
         <Table.Header>
           <Table.Row>
             <Table.HeaderCell aria-label="Select all">
@@ -300,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>
@@ -325,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>
@@ -355,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>
@@ -380,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/Tabs/Tabs.stories.tsx

@@ -4,6 +4,13 @@ import {Tabs} from './Tabs'
 
 const meta: Meta = {
   title: 'Components/Tabs',
+  argTypes: {
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      description: 'Layout orientation of the tab list',
+    },
+  },
 }
 
 export default meta

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/components/Tooltip/Tooltip.stories.tsx

@@ -6,6 +6,21 @@ import {Badge} from '../Badge/Badge'
 
 const meta: Meta = {
   title: 'Components/Tooltip',
+  argTypes: {
+    content: {
+      control: 'text',
+      description: 'Text content displayed inside the tooltip',
+    },
+    placement: {
+      control: 'select',
+      options: ['top', 'bottom', 'left', 'right'],
+      description: 'Preferred placement of the tooltip relative to the trigger',
+    },
+    delay: {
+      control: 'number',
+      description: 'Delay in milliseconds before the tooltip appears on hover',
+    },
+  },
 }
 
 export default meta

package/src/index.ts

@@ -11,11 +11,13 @@ 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'
 export {EmptyState} from './components/EmptyState/EmptyState'
 export {Heading, type HeadingVariant} from './components/Heading/Heading'
+export {List, type ListSelectionMode} from './components/List/List'
 export {Field} from './components/Field/Field'
 export {Form, type FormProps} from './components/Form/Form'
 export {Fieldset, type FieldsetGap} from './components/Fieldset/Fieldset'
@@ -28,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'