@duro-app/ui 0.21.0 → 0.22.0

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

@@ -0,0 +1,99 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
+
+export const styles = css.create({
+  // --- Root ---
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    margin: 0,
+    padding: 0,
+  },
+
+  // --- Item ---
+  item: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: spacing.sm,
+    paddingTop: spacing.sm,
+    paddingBottom: spacing.sm,
+    paddingLeft: spacing.ms,
+    paddingRight: spacing.ms,
+    borderBottomWidth: 1,
+    borderBottomStyle: 'solid',
+    borderBottomColor: colors.border,
+    backgroundColor: {
+      default: 'transparent',
+      ':hover': colors.bgCardHover,
+    },
+    transitionProperty: 'background-color',
+    transitionDuration: '120ms',
+    cursor: 'default',
+  },
+  itemSelected: {
+    backgroundColor: {
+      default: colors.bgCardHover,
+      ':hover': colors.bgCardHover,
+    },
+  },
+  itemDisabled: {
+    opacity: 0.5,
+    pointerEvents: 'none',
+  },
+  itemLast: {
+    borderBottomWidth: 0,
+  },
+
+  // --- Item content area (text + description) ---
+  content: {
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 2,
+    minWidth: 0,
+  },
+
+  // --- Primary text ---
+  text: {
+    fontSize: typography.fontSizeSm,
+    fontWeight: typography.fontWeightMedium,
+    lineHeight: typography.lineHeight,
+    color: colors.text,
+    margin: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+
+  // --- Description text ---
+  description: {
+    fontSize: typography.fontSizeXs,
+    lineHeight: typography.lineHeight,
+    color: colors.textMuted,
+    margin: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+
+  // --- Actions slot ---
+  actions: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: spacing.xs,
+    flexShrink: 0,
+  },
+
+  // --- Empty state ---
+  empty: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: spacing.xl,
+    paddingBottom: spacing.xl,
+    color: colors.textMuted,
+    fontSize: typography.fontSizeSm,
+  },
+})

package/src/components/Panel/Panel.meta.ts

@@ -18,9 +18,18 @@ export const meta: ComponentMeta = {
     optional: ['Root', 'Header', 'Body', 'Footer'],
   },
   relatedTo: [
-    {component: 'Card', relationship: 'Card is for shallow, repeated items; Panel is for deep, organized content'},
-    {component: 'DetailPanel', relationship: 'DetailPanel uses Panel internally for its structural layout'},
-    {component: 'PageShell', relationship: 'PageShell is for page-level layout; Panel is for section-level'},
+    {
+      component: 'Card',
+      relationship: 'Card is for shallow, repeated items; Panel is for deep, organized content',
+    },
+    {
+      component: 'DetailPanel',
+      relationship: 'DetailPanel uses Panel internally for its structural layout',
+    },
+    {
+      component: 'PageShell',
+      relationship: 'PageShell is for page-level layout; Panel is for section-level',
+    },
   ],
   example: `<Panel.Root bordered>
   <Panel.Header>

package/src/components/Panel/Panel.stories.tsx

@@ -10,6 +10,12 @@ import {Input} from '../Input/Input'
 
 const meta: Meta = {
   title: 'Components/Panel',
+  argTypes: {
+    bordered: {
+      control: 'boolean',
+      description: 'Whether the panel has an outer border for visual separation',
+    },
+  },
 }
 
 export default meta
@@ -25,9 +31,8 @@ export const Default: Story = {
       </Panel.Header>
       <Panel.Body>
         <Text>
-          Panel is a structural primitive for grouping content with
-          header, body, and footer slots. It fills the gap between Card
-          and page-level layout.
+          Panel is a structural primitive for grouping content with header, body, and footer slots.
+          It fills the gap between Card and page-level layout.
         </Text>
       </Panel.Body>
       <Panel.Footer>
@@ -45,12 +50,14 @@ export const Bordered: Story = {
     <Panel.Root bordered>
       <Panel.Header>
         <Heading level={3}>Bordered Panel</Heading>
-        <Button variant="secondary" size="small">Action</Button>
+        <Button variant="secondary" size="small">
+          Action
+        </Button>
       </Panel.Header>
       <Panel.Body>
         <Text>
-          The bordered variant adds an outer border, useful when the panel
-          needs visual separation from its surroundings.
+          The bordered variant adds an outer border, useful when the panel needs visual separation
+          from its surroundings.
         </Text>
       </Panel.Body>
       <Panel.Footer>
@@ -67,8 +74,8 @@ export const BodyOnly: Story = {
     <Panel.Root bordered>
       <Panel.Body>
         <Text>
-          Panel sub-components can be used independently. This panel only
-          has a Body — no Header or Footer.
+          Panel sub-components can be used independently. This panel only has a Body — no Header or
+          Footer.
         </Text>
       </Panel.Body>
     </Panel.Root>
@@ -85,8 +92,8 @@ export const UnpaddedBody: Story = {
       </Panel.Header>
       <Panel.Body padded={false}>
         <Text>
-          Setting padded=false removes body padding, useful for content
-          that needs to extend edge-to-edge (tables, images, etc).
+          Setting padded=false removes body padding, useful for content that needs to extend
+          edge-to-edge (tables, images, etc).
         </Text>
       </Panel.Body>
     </Panel.Root>

package/src/components/Panel/Panel.tsx

@@ -11,11 +11,7 @@ interface RootProps {
 }
 
 function Root({children, bordered = false}: RootProps) {
-  return (
-    <html.div style={[styles.root, bordered && styles.bordered]}>
-      {children}
-    </html.div>
-  )
+  return <html.div style={[styles.root, bordered && styles.bordered]}>{children}</html.div>
 }
 
 // --- Header ---
@@ -33,11 +29,7 @@ interface BodyProps {
 }
 
 function Body({children, padded = true}: BodyProps) {
-  return (
-    <html.div style={[styles.body, padded && styles.bodyPadded]}>
-      {children}
-    </html.div>
-  )
+  return <html.div style={[styles.body, padded && styles.bodyPadded]}>{children}</html.div>
 }
 
 // --- Footer ---

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

@@ -31,6 +31,11 @@ export const styles = css.create({
   body: {
     flex: 1,
     overflowY: 'auto',
+    // Minimal inset prevents child borders from touching panel structural borders
+    paddingTop: spacing.sm,
+    paddingBottom: spacing.sm,
+    paddingLeft: spacing.sm,
+    paddingRight: spacing.sm,
   },
   bodyPadded: {
     paddingTop: spacing.lg,

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

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/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

@@ -16,6 +16,7 @@ export {DetailPanel, type DetailPanelSize} from './components/DetailPanel/Detail
 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'