@duro-app/ui 0.15.0 → 0.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -38,7 +38,7 @@
     "react-strict-dom": "^0.0.55"
   },
   "dependencies": {
-    "@duro-app/tokens": "^0.15.0"
+    "@duro-app/tokens": "^0.15.1"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/ActionBar/ActionBar.stories.tsx

@@ -113,10 +113,7 @@ function SelectableTable({
           ))}
         </Table.Body>
       </Table.Root>
-      <ActionBar
-        selectedItemCount={selected.size}
-        onClearSelection={clearSelection}
-      >
+      <ActionBar selectedItemCount={selected.size} onClearSelection={clearSelection}>
         <Button variant="secondary" size="small">
           Export
         </Button>
@@ -148,9 +145,7 @@ export const Default: Story = {
 }
 
 export const MultipleSelected: Story = {
-  render: () => (
-    <SelectableTable initialSelected={new Set(['1', '3', '4'])} />
-  ),
+  render: () => <SelectableTable initialSelected={new Set(['1', '3', '4'])} />,
 }
 
 export const Emphasized: Story = {
@@ -253,18 +248,14 @@ export const CustomLabel: Story = {
 }
 
 export const Hidden: Story = {
-  render: () => (
-    <SelectableTable initialSelected={new Set()} />
-  ),
+  render: () => <SelectableTable initialSelected={new Set()} />,
 }
 
 export const AllVariants: Story = {
   render: () => (
     <html.div style={storyStyles.wrapper}>
       <html.div>
-        <html.span style={storyStyles.label}>
-          Default — check boxes to see the ActionBar
-        </html.span>
+        <html.span style={storyStyles.label}>Default — check boxes to see the ActionBar</html.span>
         <SelectableTable initialSelected={new Set(['1'])} />
       </html.div>
     </html.div>

package/src/components/ActionBar/ActionBar.tsx

@@ -29,9 +29,7 @@ function ActionBarInner({
   if (selectedItemCount === 0) return null
 
   const countStr = selectedItemCount === 'all' ? 'All' : `${selectedItemCount}`
-  const label = selectedLabel
-    ? selectedLabel(countStr)
-    : `${countStr} selected`
+  const label = selectedLabel ? selectedLabel(countStr) : `${countStr} selected`
 
   const bar = (
     <html.div
@@ -39,32 +37,24 @@ function ActionBarInner({
       aria-label={label}
       style={[styles.overlay, isEmphasized && styles.overlayEmphasized]}
     >
-      <html.span
-        style={[
-          styles.selectedCount,
-          isEmphasized && styles.selectedCountEmphasized,
-        ]}
-      >
+      <html.span style={[styles.selectedCount, isEmphasized && styles.selectedCountEmphasized]}>
         {label}
       </html.span>
-      <html.div
-        style={[
-          styles.separator,
-          isEmphasized && styles.separatorEmphasized,
-        ]}
-      />
+      <html.div style={[styles.separator, isEmphasized && styles.separatorEmphasized]} />
       <html.div style={styles.actions}>{children}</html.div>
       <html.button
         type="button"
         aria-label="Clear selection"
         onClick={onClearSelection}
-        style={[
-          styles.closeButton,
-          isEmphasized && styles.closeButtonEmphasized,
-        ]}
+        style={[styles.closeButton, isEmphasized && styles.closeButtonEmphasized]}
       >
         <svg width={10} height={10} viewBox="0 0 10 10" fill="none" aria-hidden="true">
-          <path d="M1 1l8 8M9 1l-8 8" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" />
+          <path
+            d="M1 1l8 8M9 1l-8 8"
+            stroke="currentColor"
+            strokeWidth={1.5}
+            strokeLinecap="round"
+          />
         </svg>
       </html.button>
     </html.div>

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

@@ -21,6 +21,7 @@ export const styles = css.create({
     transitionDuration: '150ms',
     transitionTimingFunction: 'ease',
     textDecoration: 'none',
+    whiteSpace: 'nowrap',
     outlineWidth: {
       default: 0,
       ':focus-visible': 2,

package/src/components/Select/Select.tsx

@@ -28,7 +28,13 @@ function Root({name, defaultValue, value, onValueChange, initialLabels, children
 }
 
 // --- Trigger ---
-function Trigger({children, 'aria-label': ariaLabel}: {children: ReactNode; 'aria-label'?: string}) {
+function Trigger({
+  children,
+  'aria-label': ariaLabel,
+}: {
+  children: ReactNode
+  'aria-label'?: string
+}) {
   const {open, toggle, listboxId, highlightedId, triggerRef} = useSelect()
   const localRef = useRef<HTMLButtonElement>(null)
 

package/src/components/Table/Table.tsx

@@ -125,7 +125,13 @@ const CellIndexContext = createContext<{index: number; total: number}>({
 
 // --- HeaderCell ---
 
-function HeaderCell({children, 'aria-label': ariaLabel}: {children?: ReactNode; 'aria-label'?: string}) {
+function HeaderCell({
+  children,
+  'aria-label': ariaLabel,
+}: {
+  children?: ReactNode
+  'aria-label'?: string
+}) {
   const {size, variant} = useTable()
   const {index, total} = useContext(CellIndexContext)
   const isLast = variant === 'bordered' && index === total - 1

package/src/index.ts

@@ -33,7 +33,11 @@ export {
 export {Table, type TableVariant, type TableSize} from './components/Table/Table'
 export {Tabs} from './components/Tabs/Tabs'
 export {Textarea, type TextareaVariant} from './components/Textarea/Textarea'
-export {ThemeProvider, useOverlayContainer, type ThemeName} from './components/ThemeProvider/ThemeProvider'
+export {
+  ThemeProvider,
+  useOverlayContainer,
+  type ThemeName,
+} from './components/ThemeProvider/ThemeProvider'
 export {Text, type TextVariant, type TextColor} from './components/Text/Text'
 export {Toggle, type ToggleSize} from './components/Toggle/Toggle'
 export {ToggleGroup} from './components/ToggleGroup/ToggleGroup'