@duro-app/ui 0.19.0 → 0.20.0

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

@@ -0,0 +1,187 @@
+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 {shadows} from '@duro-app/tokens/tokens/shadows.css'
+
+/** Apple-standard ease: aggressive deceleration, feels like "arriving" */
+const APPLE_EASE_OUT = 'cubic-bezier(0.32, 0.72, 0, 1)'
+const APPLE_EASE_IN = 'cubic-bezier(0.72, 0, 0.68, 0.28)'
+
+const OPEN_DURATION = '280ms'
+const CLOSE_DURATION = '220ms'
+
+export const styles = css.create({
+  // --- Outer wrapper: animates width from 0 → target ---
+  wrapper: {
+    overflow: 'hidden',
+    flexShrink: 0,
+    position: 'relative',
+  },
+
+  // --- Wrapper open/close: SM (360px) ---
+  wrapperOpenSm: {
+    animationName: css.keyframes({
+      from: {width: 0},
+      to: {width: 360},
+    }),
+    animationDuration: OPEN_DURATION,
+    animationTimingFunction: APPLE_EASE_OUT,
+    animationFillMode: 'both',
+  },
+  wrapperCloseSm: {
+    animationName: css.keyframes({
+      from: {width: 360},
+      to: {width: 0},
+    }),
+    animationDuration: CLOSE_DURATION,
+    animationTimingFunction: APPLE_EASE_IN,
+    animationFillMode: 'both',
+  },
+
+  // --- Wrapper open/close: MD (480px) ---
+  wrapperOpenMd: {
+    animationName: css.keyframes({
+      from: {width: 0},
+      to: {width: 480},
+    }),
+    animationDuration: OPEN_DURATION,
+    animationTimingFunction: APPLE_EASE_OUT,
+    animationFillMode: 'both',
+  },
+  wrapperCloseMd: {
+    animationName: css.keyframes({
+      from: {width: 480},
+      to: {width: 0},
+    }),
+    animationDuration: CLOSE_DURATION,
+    animationTimingFunction: APPLE_EASE_IN,
+    animationFillMode: 'both',
+  },
+
+  // --- Content panel ---
+  content: {
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    backgroundColor: colors.bgCard,
+    borderLeftWidth: 1,
+    borderLeftStyle: 'solid',
+    borderLeftColor: colors.border,
+    boxShadow: shadows.sm,
+    position: 'relative',
+  },
+
+  // Content must maintain its target width even while wrapper is narrower
+  contentSm: {width: 360},
+  contentMd: {width: 480},
+
+  // --- Content slide + fade animations ---
+  slideIn: {
+    animationName: css.keyframes({
+      from: {
+        transform: 'translateX(40px)',
+        opacity: 0,
+      },
+      to: {
+        transform: 'translateX(0)',
+        opacity: 1,
+      },
+    }),
+    animationDuration: OPEN_DURATION,
+    animationTimingFunction: APPLE_EASE_OUT,
+    animationFillMode: 'both',
+  },
+  slideOut: {
+    animationName: css.keyframes({
+      from: {
+        transform: 'translateX(0)',
+        opacity: 1,
+      },
+      to: {
+        transform: 'translateX(40px)',
+        opacity: 0,
+      },
+    }),
+    animationDuration: CLOSE_DURATION,
+    animationTimingFunction: APPLE_EASE_IN,
+    animationFillMode: 'both',
+  },
+
+  // --- Header ---
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingTop: spacing.lg,
+    paddingLeft: spacing.lg,
+    paddingRight: spacing.lg,
+    paddingBottom: spacing.lg,
+    gap: spacing.md,
+    borderBottomWidth: 1,
+    borderBottomStyle: 'solid',
+    borderBottomColor: colors.border,
+  },
+
+  // --- Title ---
+  title: {
+    fontSize: 18,
+    fontWeight: 600,
+    lineHeight: 1.4,
+    color: colors.text,
+    margin: 0,
+    flex: 1,
+    minWidth: 0,
+  },
+
+  // --- Body ---
+  body: {
+    flex: 1,
+    overflowY: 'auto',
+  },
+  bodyPadded: {
+    paddingTop: spacing.lg,
+    paddingLeft: spacing.lg,
+    paddingRight: spacing.lg,
+    paddingBottom: spacing.lg,
+  },
+
+  // --- Footer ---
+  footer: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: spacing.sm,
+    paddingTop: spacing.md,
+    paddingBottom: spacing.md,
+    paddingLeft: spacing.lg,
+    paddingRight: spacing.lg,
+    borderTopWidth: 1,
+    borderTopStyle: 'solid',
+    borderTopColor: colors.border,
+  },
+
+  // --- Close button ---
+  closeButton: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    borderWidth: 0,
+    backgroundColor: {
+      default: 'transparent',
+      ':hover': colors.bgCardHover,
+    },
+    color: colors.textMuted,
+    cursor: 'pointer',
+    padding: 0,
+    flexShrink: 0,
+    transitionProperty: 'background-color',
+    transitionDuration: '150ms',
+  },
+
+  inlineWrapper: {
+    display: 'inline-flex',
+  },
+})

package/src/components/Dialog/Dialog.meta.ts

@@ -0,0 +1,44 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'Modal dialog with backdrop overlay. Centered on screen with scale+fade animation. Traps focus, dismisses on backdrop click or Escape. Use for confirmations, forms, or content that requires user attention before continuing.',
+  whenToUse: [
+    'Confirmation prompts (delete, revoke, destructive actions)',
+    'Short forms or data entry that blocks the main flow',
+    'Viewing detail content in a focused overlay (e.g. certificate details)',
+    'Any modal interaction that requires user acknowledgment',
+  ],
+  whenNotToUse: [
+    'Non-modal side panels — use DetailPanel',
+    'Sliding panels from screen edges — use Drawer',
+    'Inline content expansion — use disclosure or accordion patterns',
+    'Toast/notification messages — use Alert or a toast system',
+  ],
+  anatomy: {
+    required: ['Root', 'Portal'],
+    optional: ['Trigger', 'Header', 'Title', 'Description', 'Body', 'Footer', 'Close'],
+  },
+  relatedTo: [
+    {component: 'Drawer', relationship: 'Drawer slides from an edge; Dialog is centered with scale animation'},
+    {component: 'DetailPanel', relationship: 'DetailPanel is non-modal and in-flow; Dialog is modal with backdrop'},
+  ],
+  example: `<Dialog.Root open={open} onOpenChange={setOpen}>
+  <Dialog.Trigger>
+    <Button>Open dialog</Button>
+  </Dialog.Trigger>
+  <Dialog.Portal size="md">
+    <Dialog.Header>
+      <Dialog.Title>Confirm action</Dialog.Title>
+      <Dialog.Close />
+    </Dialog.Header>
+    <Dialog.Body>
+      <Text>Are you sure you want to proceed?</Text>
+    </Dialog.Body>
+    <Dialog.Footer>
+      <Button variant="secondary" onClick={() => setOpen(false)}>Cancel</Button>
+      <Button variant="danger" onClick={handleConfirm}>Confirm</Button>
+    </Dialog.Footer>
+  </Dialog.Portal>
+</Dialog.Root>`,
+}

package/src/components/Drawer/Drawer.meta.ts

@@ -0,0 +1,45 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'Modal sliding panel from a screen edge (right, left, or bottom). Slides in with backdrop overlay. Supports swipe-to-dismiss gestures on mobile, backdrop click dismiss, and Escape key. Use for secondary workflows, settings panels, or mobile-friendly detail views.',
+  whenToUse: [
+    'Settings or configuration panels that slide in from the side',
+    'Mobile-friendly detail views (bottom sheet pattern)',
+    'Secondary workflows that need more space than a dialog',
+    'Filters, navigation drawers, or form panels',
+  ],
+  whenNotToUse: [
+    'Centered modal confirmations — use Dialog',
+    'Non-modal side inspection panels — use DetailPanel',
+    'Inline content expansion — use disclosure patterns',
+    'Primary navigation — use SideNav',
+  ],
+  anatomy: {
+    required: ['Root', 'Portal'],
+    optional: ['Trigger', 'Header', 'Title', 'Description', 'Body', 'Footer', 'Close'],
+  },
+  relatedTo: [
+    {component: 'Dialog', relationship: 'Dialog is centered modal; Drawer slides from an edge'},
+    {component: 'DetailPanel', relationship: 'DetailPanel is non-modal and in-flow; Drawer is modal with backdrop'},
+  ],
+  example: `<Drawer.Root anchor="right" open={open} onOpenChange={setOpen}>
+  <Drawer.Trigger>
+    <Button>Open drawer</Button>
+  </Drawer.Trigger>
+  <Drawer.Portal size="md">
+    <Drawer.Header>
+      <Drawer.Title>Settings</Drawer.Title>
+      <Drawer.Close />
+    </Drawer.Header>
+    <Drawer.Body>
+      <Stack gap="md">
+        <Text>Drawer content goes here.</Text>
+      </Stack>
+    </Drawer.Body>
+    <Drawer.Footer>
+      <Button variant="secondary" onClick={() => setOpen(false)}>Done</Button>
+    </Drawer.Footer>
+  </Drawer.Portal>
+</Drawer.Root>`,
+}

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

@@ -0,0 +1,37 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'Structural primitive for grouping content with header, body, and footer slots. A "workspace surface" for forms, settings sections, and inspectors. Sub-components are purely structural — no context required.',
+  whenToUse: [
+    'Organizing content with distinct header/body/footer sections',
+    'Settings panels, form containers, inspector views',
+    'When you need more structure than Card but less than a full page layout',
+  ],
+  whenNotToUse: [
+    'Repeating item cards — use Card',
+    'Modal/overlay content — use Dialog or Drawer',
+    'Page-level layout — use PageShell',
+  ],
+  anatomy: {
+    required: [],
+    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'},
+  ],
+  example: `<Panel.Root bordered>
+  <Panel.Header>
+    <Heading level={3}>Section Title</Heading>
+    <Button variant="secondary" size="small">Action</Button>
+  </Panel.Header>
+  <Panel.Body>
+    {/* Content */}
+  </Panel.Body>
+  <Panel.Footer>
+    <Button>Save</Button>
+  </Panel.Footer>
+</Panel.Root>`,
+}

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

@@ -0,0 +1,124 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {Panel} from './Panel'
+import {Button} from '../Button/Button'
+import {Text} from '../Text/Text'
+import {Heading} from '../Heading/Heading'
+import {Stack} from '../Stack/Stack'
+import {Inline} from '../Inline/Inline'
+import {Field} from '../Field/Field'
+import {Input} from '../Input/Input'
+
+const meta: Meta = {
+  title: 'Components/Panel',
+}
+
+export default meta
+type Story = StoryObj
+
+// --- Default ---
+
+export const Default: Story = {
+  render: () => (
+    <Panel.Root>
+      <Panel.Header>
+        <Heading level={3}>Section Title</Heading>
+      </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.
+        </Text>
+      </Panel.Body>
+      <Panel.Footer>
+        <Button variant="secondary">Cancel</Button>
+        <Button>Save</Button>
+      </Panel.Footer>
+    </Panel.Root>
+  ),
+}
+
+// --- Bordered ---
+
+export const Bordered: Story = {
+  render: () => (
+    <Panel.Root bordered>
+      <Panel.Header>
+        <Heading level={3}>Bordered Panel</Heading>
+        <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.
+        </Text>
+      </Panel.Body>
+      <Panel.Footer>
+        <Button>Confirm</Button>
+      </Panel.Footer>
+    </Panel.Root>
+  ),
+}
+
+// --- Body Only ---
+
+export const BodyOnly: Story = {
+  render: () => (
+    <Panel.Root bordered>
+      <Panel.Body>
+        <Text>
+          Panel sub-components can be used independently. This panel only
+          has a Body — no Header or Footer.
+        </Text>
+      </Panel.Body>
+    </Panel.Root>
+  ),
+}
+
+// --- Unpadded Body ---
+
+export const UnpaddedBody: Story = {
+  render: () => (
+    <Panel.Root bordered>
+      <Panel.Header>
+        <Heading level={3}>Full-bleed Content</Heading>
+      </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).
+        </Text>
+      </Panel.Body>
+    </Panel.Root>
+  ),
+}
+
+// --- With Form ---
+
+export const WithForm: Story = {
+  render: () => (
+    <Panel.Root bordered>
+      <Panel.Header>
+        <Heading level={3}>Profile Settings</Heading>
+      </Panel.Header>
+      <Panel.Body>
+        <Stack gap="md">
+          <Field.Root>
+            <Field.Label>Display name</Field.Label>
+            <Input placeholder="Enter your name" />
+          </Field.Root>
+          <Field.Root>
+            <Field.Label>Email</Field.Label>
+            <Input type="email" placeholder="you@example.com" />
+          </Field.Root>
+        </Stack>
+      </Panel.Body>
+      <Panel.Footer>
+        <Inline gap="sm">
+          <Button variant="secondary">Cancel</Button>
+          <Button>Save changes</Button>
+        </Inline>
+      </Panel.Footer>
+    </Panel.Root>
+  ),
+}

package/src/components/Panel/Panel.tsx

@@ -0,0 +1,56 @@
+import type {ReactNode} from 'react'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+
+// --- Root ---
+
+interface RootProps {
+  children: ReactNode
+  /** Adds an outer border. Default: false */
+  bordered?: boolean
+}
+
+function Root({children, bordered = false}: RootProps) {
+  return (
+    <html.div style={[styles.root, bordered && styles.bordered]}>
+      {children}
+    </html.div>
+  )
+}
+
+// --- Header ---
+
+function Header({children}: {children: ReactNode}) {
+  return <html.div style={styles.header}>{children}</html.div>
+}
+
+// --- Body ---
+
+interface BodyProps {
+  children: ReactNode
+  /** Adds inner padding. Default: true */
+  padded?: boolean
+}
+
+function Body({children, padded = true}: BodyProps) {
+  return (
+    <html.div style={[styles.body, padded && styles.bodyPadded]}>
+      {children}
+    </html.div>
+  )
+}
+
+// --- Footer ---
+
+function Footer({children}: {children: ReactNode}) {
+  return <html.div style={styles.footer}>{children}</html.div>
+}
+
+// --- Export ---
+
+export const Panel = {
+  Root,
+  Header,
+  Body,
+  Footer,
+}

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

@@ -0,0 +1,55 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+
+export const styles = css.create({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    backgroundColor: colors.bgCard,
+  },
+  bordered: {
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+  },
+
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingTop: spacing.lg,
+    paddingLeft: spacing.lg,
+    paddingRight: spacing.lg,
+    paddingBottom: spacing.lg,
+    gap: spacing.md,
+    borderBottomWidth: 1,
+    borderBottomStyle: 'solid',
+    borderBottomColor: colors.border,
+  },
+
+  body: {
+    flex: 1,
+    overflowY: 'auto',
+  },
+  bodyPadded: {
+    paddingTop: spacing.lg,
+    paddingLeft: spacing.lg,
+    paddingRight: spacing.lg,
+    paddingBottom: spacing.lg,
+  },
+
+  footer: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: spacing.sm,
+    paddingTop: spacing.md,
+    paddingBottom: spacing.md,
+    paddingLeft: spacing.lg,
+    paddingRight: spacing.lg,
+    borderTopWidth: 1,
+    borderTopStyle: 'solid',
+    borderTopColor: colors.border,
+  },
+})

package/src/index.ts

@@ -12,6 +12,7 @@ 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 {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'
@@ -26,6 +27,7 @@ export {
   type LinkButtonSize,
 } from './components/LinkButton/LinkButton'
 export {Menu} from './components/Menu/Menu'
+export {Panel} from './components/Panel/Panel'
 export {ScrollArea} from './components/ScrollArea/ScrollArea'
 export {Select} from './components/Select/Select'
 export {SideNav} from './components/SideNav/SideNav'