@duro-app/ui 0.20.0 → 0.20.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.20.0",
+  "version": "0.20.1",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -52,7 +52,7 @@
     }
   },
   "dependencies": {
-    "@duro-app/tokens": "^0.20.0"
+    "@duro-app/tokens": "^0.20.1"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/Dialog/Dialog.stories.tsx

@@ -177,9 +177,7 @@ function FormDialogDemo() {
           <Dialog.Title>Edit profile</Dialog.Title>
           <Dialog.Close />
         </Dialog.Header>
-        <Dialog.Description>
-          Update your display name and email address.
-        </Dialog.Description>
+        <Dialog.Description>Update your display name and email address.</Dialog.Description>
         <Dialog.Body>
           <Stack gap="md">
             <Field.Root>
@@ -270,8 +268,8 @@ export const NonDismissable: Story = {
         <Dialog.Body>
           <Stack gap="md">
             <Text>
-              You must accept the terms of service to continue. This dialog cannot be
-              dismissed by clicking outside or pressing Escape.
+              You must accept the terms of service to continue. This dialog cannot be dismissed by
+              clicking outside or pressing Escape.
             </Text>
             <Text variant="bodySm" color="muted">
               Try clicking the backdrop or pressing Escape — the dialog stays open.
@@ -309,8 +307,8 @@ function BackdropDismissDemo() {
           </Dialog.Header>
           <Dialog.Body>
             <Text>
-              Click the dark backdrop behind this dialog to dismiss it.
-              You can also press Escape or use the close button.
+              Click the dark backdrop behind this dialog to dismiss it. You can also press Escape or
+              use the close button.
             </Text>
           </Dialog.Body>
         </Dialog.Portal>

package/src/components/Dialog/Dialog.tsx

@@ -278,11 +278,7 @@ function Close({children, 'aria-label': ariaLabel = 'Close'}: CloseProps) {
   }
 
   return (
-    <html.button
-      onClick={requestClose}
-      aria-label={ariaLabel}
-      style={styles.closeButton}
-    >
+    <html.button onClick={requestClose} aria-label={ariaLabel} style={styles.closeButton}>
       <svg width={16} height={16} viewBox="0 0 16 16" fill="none">
         <path
           d="M4 4l8 8M12 4l-8 8"

package/src/components/Drawer/Drawer.stories.tsx

@@ -31,8 +31,8 @@ export const Default: Story = {
         </Drawer.Header>
         <Drawer.Body>
           <Text>
-            This drawer slides in from the right edge. It's useful for showing details,
-            settings panels, or supplementary content without leaving the current page.
+            This drawer slides in from the right edge. It's useful for showing details, settings
+            panels, or supplementary content without leaving the current page.
           </Text>
         </Drawer.Body>
         <Drawer.Footer>
@@ -93,9 +93,15 @@ export const BottomAnchor: Story = {
         </Drawer.Header>
         <Drawer.Body>
           <Stack gap="sm">
-            <Button variant="secondary" fullWidth>Share</Button>
-            <Button variant="secondary" fullWidth>Duplicate</Button>
-            <Button variant="danger" fullWidth>Delete</Button>
+            <Button variant="secondary" fullWidth>
+              Share
+            </Button>
+            <Button variant="secondary" fullWidth>
+              Duplicate
+            </Button>
+            <Button variant="danger" fullWidth>
+              Delete
+            </Button>
           </Stack>
         </Drawer.Body>
       </Drawer.Portal>
@@ -125,7 +131,10 @@ function SizesDemo() {
               <Drawer.Close />
             </Drawer.Header>
             <Drawer.Body>
-              <Text>This drawer uses the {s} size preset ({s === 'sm' ? '360' : s === 'md' ? '480' : '640'}px max-width).</Text>
+              <Text>
+                This drawer uses the {s} size preset (
+                {s === 'sm' ? '360' : s === 'md' ? '480' : '640'}px max-width).
+              </Text>
             </Drawer.Body>
             <Drawer.Footer>
               <Drawer.Close>
@@ -164,9 +173,7 @@ function FormDrawerDemo() {
           <Drawer.Title>Edit profile</Drawer.Title>
           <Drawer.Close />
         </Drawer.Header>
-        <Drawer.Description>
-          Update your account information below.
-        </Drawer.Description>
+        <Drawer.Description>Update your account information below.</Drawer.Description>
         <Drawer.Body>
           <Stack gap="md">
             <Field.Root>
@@ -269,8 +276,8 @@ export const NonDismissable: Story = {
         <Drawer.Body>
           <Stack gap="md">
             <Text>
-              This drawer cannot be dismissed by clicking the backdrop or pressing Escape.
-              You must use the explicit close action below.
+              This drawer cannot be dismissed by clicking the backdrop or pressing Escape. You must
+              use the explicit close action below.
             </Text>
             <Text variant="bodySm" color="muted">
               Try clicking outside or pressing Escape — nothing happens.
@@ -302,8 +309,8 @@ export const NoSwipeDismiss: Story = {
         </Drawer.Header>
         <Drawer.Body>
           <Text>
-            This bottom drawer has swipe-to-dismiss disabled. On mobile, you cannot
-            swipe down to close it — use the close button or tap the backdrop instead.
+            This bottom drawer has swipe-to-dismiss disabled. On mobile, you cannot swipe down to
+            close it — use the close button or tap the backdrop instead.
           </Text>
         </Drawer.Body>
       </Drawer.Portal>
@@ -326,12 +333,10 @@ export const SwipeDismiss: Story = {
         </Drawer.Header>
         <Drawer.Body>
           <Stack gap="md">
-            <Text>
-              Drag this drawer downward to dismiss it. The backdrop fades as you drag.
-            </Text>
+            <Text>Drag this drawer downward to dismiss it. The backdrop fades as you drag.</Text>
             <Text variant="bodySm" color="muted">
-              Swipe past 30% of the panel height or flick quickly to dismiss.
-              Otherwise it snaps back.
+              Swipe past 30% of the panel height or flick quickly to dismiss. Otherwise it snaps
+              back.
             </Text>
           </Stack>
         </Drawer.Body>
@@ -354,9 +359,7 @@ export const SwipeDismissRight: Story = {
           <Drawer.Close />
         </Drawer.Header>
         <Drawer.Body>
-          <Text>
-            Drag this panel to the right to dismiss it. Works with touch and mouse.
-          </Text>
+          <Text>Drag this panel to the right to dismiss it. Works with touch and mouse.</Text>
         </Drawer.Body>
       </Drawer.Portal>
     </Drawer.Root>

package/src/components/Drawer/Drawer.tsx

@@ -252,10 +252,7 @@ function Portal({children, size = 'md'}: PortalProps) {
       />
 
       {/* Viewport */}
-      <html.div
-        style={[styles.viewport, viewportAnchorMap[anchor]]}
-        data-drawer-viewport=""
-      >
+      <html.div style={[styles.viewport, viewportAnchorMap[anchor]]} data-drawer-viewport="">
         <html.div
           ref={panelRef}
           role="dialog"
@@ -338,11 +335,7 @@ function Close({children, 'aria-label': ariaLabel = 'Close'}: CloseProps) {
   }
 
   return (
-    <html.button
-      onClick={requestClose}
-      aria-label={ariaLabel}
-      style={styles.closeButton}
-    >
+    <html.button onClick={requestClose} aria-label={ariaLabel} style={styles.closeButton}>
       <svg width={16} height={16} viewBox="0 0 16 16" fill="none">
         <path
           d="M4 4l8 8M12 4l-8 8"

package/src/components/Drawer/useSwipeDismiss.ts

@@ -97,9 +97,7 @@ export function useSwipeDismiss({anchor, enabled, onDismiss, panelRef}: UseSwipe
 
         panelEl.style.transform = ''
         panelEl.style.boxShadow =
-          shadowSpread > 0
-            ? `0 0 ${shadowSpread * 2}px ${shadowSpread}px rgba(0, 0, 0, 0.15)`
-            : ''
+          shadowSpread > 0 ? `0 0 ${shadowSpread * 2}px ${shadowSpread}px rgba(0, 0, 0, 0.15)` : ''
       }
     },
     [anchor, isHorizontal],
@@ -255,8 +253,7 @@ export function useSwipeDismiss({anchor, enabled, onDismiss, panelRef}: UseSwipe
       }
 
       const fraction = movement / state.panelSize
-      const shouldDismiss =
-        fraction > DISMISS_THRESHOLD || velocity > VELOCITY_THRESHOLD
+      const shouldDismiss = fraction > DISMISS_THRESHOLD || velocity > VELOCITY_THRESHOLD
 
       if (shouldDismiss) {
         animateDismiss(panel!)
@@ -291,5 +288,15 @@ export function useSwipeDismiss({anchor, enabled, onDismiss, panelRef}: UseSwipe
       panel.removeEventListener('pointercancel', handlePointerCancel)
       panel.removeEventListener('touchmove', handleTouchMove)
     }
-  }, [enabled, panelRef, anchor, isHorizontal, getMovement, applyTransform, resetStyles, animateSnapBack, animateDismiss])
+  }, [
+    enabled,
+    panelRef,
+    anchor,
+    isHorizontal,
+    getMovement,
+    applyTransform,
+    resetStyles,
+    animateSnapBack,
+    animateDismiss,
+  ])
 }

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>