@duro-app/ui 0.19.0 → 0.20.1

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

@@ -271,10 +271,7 @@ function CheckboxTableDemo() {
         </Table.Body>
       </Table.Root>
 
-      <ActionBar
-        selectedItemCount={selected.size}
-        onClearSelection={() => setSelected(new Set())}
-      >
+      <ActionBar selectedItemCount={selected.size} onClearSelection={() => setSelected(new Set())}>
         <Button variant="danger" size="small">
           Delete
         </Button>

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'