@duro-app/ui 0.17.1 → 0.19.0

package/src/components/Drawer/useSwipeDismiss.ts

@@ -0,0 +1,295 @@
+import {useRef, useCallback, useEffect} from 'react'
+import type {DrawerAnchor} from './Drawer'
+
+/** Threshold: fraction of panel size the user must drag to dismiss */
+const DISMISS_THRESHOLD = 0.3
+
+/** Minimum velocity (px/ms) to dismiss even below threshold */
+const VELOCITY_THRESHOLD = 0.5
+
+/** Duration for the dismiss slide-out animation (ms) */
+const DISMISS_DURATION = 160
+
+/**
+ * Max pixels the panel visually "grows" when dragged in the opposite direction.
+ * iOS-style: panel stays anchored to its edge, doesn't translate.
+ * Instead we show a subtle shadow/scale hint capped at this value.
+ */
+const OPPOSITE_MAX_OVERSCROLL = 12
+
+interface UseSwipeDismissOptions {
+  anchor: DrawerAnchor
+  enabled: boolean
+  onDismiss: () => void
+  panelRef: React.RefObject<HTMLDivElement | null>
+}
+
+interface SwipeState {
+  startX: number
+  startY: number
+  currentX: number
+  currentY: number
+  startTime: number
+  swiping: boolean
+  panelSize: number
+}
+
+/**
+ * Hook that adds swipe-to-dismiss gesture to a drawer panel.
+ *
+ * Dismiss direction: panel follows finger 1:1, backdrop fades.
+ * Opposite direction: iOS-style — panel stays anchored, shows subtle
+ * overscroll feedback (box-shadow intensifies), then snaps back.
+ */
+export function useSwipeDismiss({anchor, enabled, onDismiss, panelRef}: UseSwipeDismissOptions) {
+  const stateRef = useRef<SwipeState>({
+    startX: 0,
+    startY: 0,
+    currentX: 0,
+    currentY: 0,
+    startTime: 0,
+    swiping: false,
+    panelSize: 0,
+  })
+
+  const isHorizontal = anchor === 'left' || anchor === 'right'
+
+  /** Returns positive = dismiss direction, negative = opposite */
+  const getMovement = useCallback(
+    (state: SwipeState) => {
+      if (isHorizontal) {
+        const dx = state.currentX - state.startX
+        return anchor === 'right' ? dx : -dx
+      }
+      return state.currentY - state.startY
+    },
+    [anchor, isHorizontal],
+  )
+
+  const applyTransform = useCallback(
+    (movement: number, panelEl: HTMLDivElement) => {
+      const size = Number(panelEl.dataset.panelSize) || 1
+
+      if (movement >= 0) {
+        // Dismiss direction — 1:1 tracking
+        const progress = movement / size
+
+        if (isHorizontal) {
+          const sign = anchor === 'right' ? 1 : -1
+          panelEl.style.transform = `translateX(${sign * movement}px)`
+        } else {
+          panelEl.style.transform = `translateY(${movement}px)`
+        }
+
+        // Fade backdrop proportionally
+        const backdrop = panelEl.closest('[data-drawer-viewport]')
+          ?.previousElementSibling as HTMLElement | null
+        if (backdrop) {
+          backdrop.style.opacity = String(Math.max(0, 1 - progress))
+        }
+      } else {
+        // Opposite direction — iOS behavior:
+        // Panel stays anchored (no translate). Show subtle overscroll via box-shadow.
+        // Diminishing resistance: asymptotically approaches OPPOSITE_MAX_OVERSCROLL.
+        const absMovement = Math.abs(movement)
+        const overscroll = (absMovement / (absMovement + size * 0.5)) * OPPOSITE_MAX_OVERSCROLL
+        const shadowSpread = Math.round(overscroll)
+
+        panelEl.style.transform = ''
+        panelEl.style.boxShadow =
+          shadowSpread > 0
+            ? `0 0 ${shadowSpread * 2}px ${shadowSpread}px rgba(0, 0, 0, 0.15)`
+            : ''
+      }
+    },
+    [anchor, isHorizontal],
+  )
+
+  /** Reset all inline styles (snap back) */
+  const resetStyles = useCallback((panelEl: HTMLDivElement) => {
+    panelEl.style.transform = ''
+    panelEl.style.boxShadow = ''
+
+    const backdrop = panelEl.closest('[data-drawer-viewport]')
+      ?.previousElementSibling as HTMLElement | null
+    if (backdrop) {
+      backdrop.style.opacity = ''
+    }
+  }, [])
+
+  /** Animate to fully dismissed position, then call onDismiss */
+  const animateDismiss = useCallback(
+    (panelEl: HTMLDivElement) => {
+      const dismissTransform = isHorizontal
+        ? `translateX(${anchor === 'right' ? '100%' : '-100%'})`
+        : 'translateY(100%)'
+
+      panelEl.style.transition = `transform ${DISMISS_DURATION}ms ease-in`
+      panelEl.style.transform = dismissTransform
+
+      const backdrop = panelEl.closest('[data-drawer-viewport]')
+        ?.previousElementSibling as HTMLElement | null
+      if (backdrop) {
+        backdrop.style.transition = `opacity ${DISMISS_DURATION}ms ease-in`
+        backdrop.style.opacity = '0'
+      }
+
+      // When the slide-out transition finishes, just call onDismiss.
+      // Do NOT reset inline styles before unmount — that causes a 1-frame flash
+      // where the panel appears at its original position. React will unmount the
+      // DOM node entirely, so the inline styles don't need cleanup.
+      let dismissed = false
+      const done = () => {
+        if (dismissed) return
+        dismissed = true
+        onDismiss()
+      }
+      panelEl.addEventListener('transitionend', done, {once: true})
+      setTimeout(done, DISMISS_DURATION + 50)
+    },
+    [anchor, isHorizontal, onDismiss],
+  )
+
+  /** Animate snap-back for dismiss-direction undershoot */
+  const animateSnapBack = useCallback((panelEl: HTMLDivElement) => {
+    panelEl.style.transition = 'transform 200ms cubic-bezier(0.25, 1, 0.5, 1)'
+    panelEl.style.transform = ''
+
+    const backdrop = panelEl.closest('[data-drawer-viewport]')
+      ?.previousElementSibling as HTMLElement | null
+    if (backdrop) {
+      backdrop.style.transition = 'opacity 200ms cubic-bezier(0.25, 1, 0.5, 1)'
+      backdrop.style.opacity = ''
+    }
+
+    const cleanup = () => {
+      panelEl.style.transition = ''
+      if (backdrop) backdrop.style.transition = ''
+    }
+    panelEl.addEventListener('transitionend', cleanup, {once: true})
+    setTimeout(cleanup, 250)
+  }, [])
+
+  useEffect(() => {
+    if (!enabled) return
+    const panel = panelRef.current
+    if (!panel) return
+
+    function handlePointerDown(e: PointerEvent) {
+      if (e.button !== 0) return
+      const target = e.target as HTMLElement
+      if (target.closest('button, a, input, textarea, select, [role="button"]')) {
+        return
+      }
+
+      const rect = panel!.getBoundingClientRect()
+      const state = stateRef.current
+      state.startX = e.clientX
+      state.startY = e.clientY
+      state.currentX = e.clientX
+      state.currentY = e.clientY
+      state.startTime = Date.now()
+      state.swiping = false
+      state.panelSize = isHorizontal ? rect.width : rect.height
+
+      panel!.dataset.panelSize = String(state.panelSize)
+      panel!.setPointerCapture(e.pointerId)
+
+      // Freeze CSS animation — we take over positioning.
+      // Never restore it; the panel is already at its final resting position.
+      panel!.style.animation = 'none'
+    }
+
+    function handlePointerMove(e: PointerEvent) {
+      const state = stateRef.current
+      if (state.startTime === 0) return
+
+      state.currentX = e.clientX
+      state.currentY = e.clientY
+
+      const dx = Math.abs(state.currentX - state.startX)
+      const dy = Math.abs(state.currentY - state.startY)
+
+      if (!state.swiping) {
+        const totalMovement = Math.sqrt(dx * dx + dy * dy)
+        if (totalMovement < 8) return
+
+        if (isHorizontal && dx > dy) {
+          state.swiping = true
+        } else if (!isHorizontal && dy > dx) {
+          state.swiping = true
+        } else {
+          // Wrong axis — abort gesture
+          state.startTime = 0
+          return
+        }
+      }
+
+      if (state.swiping) {
+        e.preventDefault()
+        const movement = getMovement(state)
+        applyTransform(movement, panel!)
+      }
+    }
+
+    function handlePointerUp(_e: PointerEvent) {
+      const state = stateRef.current
+      if (state.startTime === 0) return
+
+      const movement = getMovement(state)
+      const elapsed = Date.now() - state.startTime
+      const velocity = movement / elapsed
+
+      state.startTime = 0
+
+      if (!state.swiping) {
+        return
+      }
+
+      state.swiping = false
+
+      if (movement <= 0) {
+        // Was dragging in opposite direction — just reset (no translate was applied)
+        resetStyles(panel!)
+        return
+      }
+
+      const fraction = movement / state.panelSize
+      const shouldDismiss =
+        fraction > DISMISS_THRESHOLD || velocity > VELOCITY_THRESHOLD
+
+      if (shouldDismiss) {
+        animateDismiss(panel!)
+      } else {
+        animateSnapBack(panel!)
+      }
+    }
+
+    function handlePointerCancel() {
+      const state = stateRef.current
+      state.startTime = 0
+      state.swiping = false
+      resetStyles(panel!)
+    }
+
+    panel.addEventListener('pointerdown', handlePointerDown)
+    panel.addEventListener('pointermove', handlePointerMove)
+    panel.addEventListener('pointerup', handlePointerUp)
+    panel.addEventListener('pointercancel', handlePointerCancel)
+
+    function handleTouchMove(e: TouchEvent) {
+      if (stateRef.current.swiping) {
+        e.preventDefault()
+      }
+    }
+    panel.addEventListener('touchmove', handleTouchMove, {passive: false})
+
+    return () => {
+      panel.removeEventListener('pointerdown', handlePointerDown)
+      panel.removeEventListener('pointermove', handlePointerMove)
+      panel.removeEventListener('pointerup', handlePointerUp)
+      panel.removeEventListener('pointercancel', handlePointerCancel)
+      panel.removeEventListener('touchmove', handleTouchMove)
+    }
+  }, [enabled, panelRef, anchor, isHorizontal, getMovement, applyTransform, resetStyles, animateSnapBack, animateDismiss])
+}

package/src/components/Field/Field.meta.ts

@@ -7,9 +7,7 @@ export const meta: ComponentMeta = {
     'Any form input that needs a label and/or error message',
     'Standalone labeled input (without Form) with manual error display',
   ],
-  whenNotToUse: [
-    'Bare input without label — use Input directly (rare)',
-  ],
+  whenNotToUse: ['Bare input without label — use Input directly (rare)'],
   anatomy: {
     required: ['Root'],
     optional: ['Label', 'Description', 'Error'],

package/src/components/Fieldset/Fieldset.meta.ts

@@ -7,9 +7,7 @@ export const meta: ComponentMeta = {
     'Grouping related fields within a form (e.g., "Personal Info", "Address")',
     'Applying consistent vertical gap between form fields',
   ],
-  whenNotToUse: [
-    'Non-form content grouping — use Stack or Card',
-  ],
+  whenNotToUse: ['Non-form content grouping — use Stack or Card'],
   anatomy: {
     required: ['Root'],
     optional: ['Legend'],

package/src/components/Form/Form.meta.ts

@@ -3,10 +3,7 @@ import type {ComponentMeta} from '../component-meta'
 export const meta: ComponentMeta = {
   description:
     'Form wrapper with Effect Schema validation and react-hook-form integration. Provides FormContext to child Field components.',
-  whenToUse: [
-    'Any form that needs validation',
-    'Multi-field forms with submit handling',
-  ],
+  whenToUse: ['Any form that needs validation', 'Multi-field forms with submit handling'],
   whenNotToUse: [
     'Single standalone field without validation — use Field.Root directly',
     'Non-form interactive UIs — use individual components',

package/src/components/Grid/Grid.meta.ts

@@ -11,9 +11,7 @@ export const meta: ComponentMeta = {
     'Single-column vertical layout — use Stack',
     'Simple horizontal row — use Inline or Cluster',
   ],
-  relatedTo: [
-    {component: 'Stack', relationship: 'Single-column vertical layout'},
-  ],
+  relatedTo: [{component: 'Stack', relationship: 'Single-column vertical layout'}],
   example: `// Responsive: columns auto-fit based on min width
 <Grid minColumnWidth="280px" gap="md">
   <Card>A</Card>

package/src/components/Inline/Inline.meta.ts

@@ -1,8 +1,7 @@
 import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
-  description:
-    'Horizontal flex layout with NO wrapping. Items stay on one line and may overflow.',
+  description: 'Horizontal flex layout with NO wrapping. Items stay on one line and may overflow.',
   whenToUse: [
     'Toolbar or button group that must stay on one row',
     'Horizontal alignment of a known, small number of items',

package/src/components/Input/Input.meta.ts

@@ -3,13 +3,8 @@ import type {ComponentMeta} from '../component-meta'
 export const meta: ComponentMeta = {
   description:
     'Text input with automatic Field/Form integration. Variant auto-switches to error when inside an invalid Field.',
-  whenToUse: [
-    'Single-line text entry (text, email, password, url, tel, number, search)',
-  ],
-  whenNotToUse: [
-    'Multi-line text — use Textarea',
-    'Picking from predefined options — use Select',
-  ],
+  whenToUse: ['Single-line text entry (text, email, password, url, tel, number, search)'],
+  whenNotToUse: ['Multi-line text — use Textarea', 'Picking from predefined options — use Select'],
   relatedTo: [
     {component: 'Field', relationship: 'Wrap in Field.Root for label + error'},
     {component: 'InputGroup', relationship: 'Wrap in InputGroup.Root for prefix/suffix addons'},

package/src/components/LinkButton/LinkButton.meta.ts

@@ -11,9 +11,7 @@ export const meta: ComponentMeta = {
     'Triggering in-page actions — use Button',
     'Plain text links — use a styled <a> tag',
   ],
-  relatedTo: [
-    {component: 'Button', relationship: 'Button for actions; LinkButton for navigation'},
-  ],
+  relatedTo: [{component: 'Button', relationship: 'Button for actions; LinkButton for navigation'}],
   example: `<LinkButton href="/signup" variant="primary">
   Get started
 </LinkButton>

package/src/components/Menu/Menu.meta.ts

@@ -8,10 +8,7 @@ export const meta: ComponentMeta = {
     'Navigation links in a dropdown',
     'Overflow menu for toolbar actions',
   ],
-  whenNotToUse: [
-    'Picking a value — use Select',
-    'Primary navigation — use SideNav or Tabs',
-  ],
+  whenNotToUse: ['Picking a value — use Select', 'Primary navigation — use SideNav or Tabs'],
   anatomy: {
     required: ['Root', 'Trigger', 'Popup', 'Item'],
     optional: ['LinkItem'],

package/src/components/SideNav/SideNav.meta.ts

@@ -3,10 +3,7 @@ import type {ComponentMeta} from '../component-meta'
 export const meta: ComponentMeta = {
   description:
     'Vertical side navigation with collapsible groups. Supports controlled and uncontrolled active item. Compound component — Root is required.',
-  whenToUse: [
-    'App-level sidebar navigation',
-    'Settings navigation with grouped sections',
-  ],
+  whenToUse: ['App-level sidebar navigation', 'Settings navigation with grouped sections'],
   whenNotToUse: [
     'In-page content switching — use Tabs',
     'Top-level horizontal nav — use Inline with LinkButton',

package/src/components/Stack/Stack.meta.ts

@@ -1,8 +1,7 @@
 import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
-  description:
-    'Vertical flex layout. Stacks children top-to-bottom with consistent gap.',
+  description: 'Vertical flex layout. Stacks children top-to-bottom with consistent gap.',
   whenToUse: [
     'Vertically stacking form fields, cards, or sections',
     'Any column-direction layout with uniform spacing',

package/src/components/Switch/Switch.meta.ts

@@ -12,7 +12,10 @@ export const meta: ComponentMeta = {
     'Selecting between multiple options — use Select or ToggleGroup',
   ],
   relatedTo: [
-    {component: 'Checkbox', relationship: 'Checkbox for selection/opt-in; Switch for on/off settings'},
+    {
+      component: 'Checkbox',
+      relationship: 'Checkbox for selection/opt-in; Switch for on/off settings',
+    },
     {component: 'Toggle', relationship: 'Toggle for toolbar pressed state; Switch for settings'},
   ],
   example: `<Switch

package/src/components/Table/Table.stories.tsx

@@ -1,8 +1,12 @@
 import type {Meta, StoryObj} from '@storybook/react'
 import {expect} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
+import {useState} from 'react'
 import {Table} from './Table'
 import {Badge} from '../Badge/Badge'
+import {Checkbox} from '../Checkbox/Checkbox'
+import {Button} from '../Button/Button'
+import {ActionBar} from '../ActionBar/ActionBar'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 
 const meta: Meta = {
@@ -186,6 +190,109 @@ export const Compact: Story = {
   },
 }
 
+// --- WithCheckboxes: demonstrates parent/child cascading selection ---
+
+interface ServiceData {
+  id: string
+  name: string
+  status: string
+  port: string
+  uptime: string
+}
+
+function CheckboxTableDemo() {
+  const items: ServiceData[] = [
+    {id: 's1', name: 'Traefik', status: 'Running', port: '443', uptime: '14d 3h'},
+    {id: 's2', name: 'Pi-hole', status: 'Running', port: '80', uptime: '14d 3h'},
+    {id: 's3', name: 'Portainer', status: 'Stopped', port: '9000', uptime: '\u2014'},
+    {id: 's4', name: 'Grafana', status: 'Running', port: '3000', uptime: '7d 12h'},
+  ]
+
+  const [selected, setSelected] = useState<Set<string>>(new Set())
+
+  const allSelected = items.length > 0 && items.every((i) => selected.has(i.id))
+  const someSelected = items.some((i) => selected.has(i.id))
+
+  const toggleAll = () => {
+    if (allSelected) {
+      setSelected(new Set())
+    } else {
+      setSelected(new Set(items.map((i) => i.id)))
+    }
+  }
+
+  const toggleOne = (id: string) => {
+    setSelected((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+
+  return (
+    <>
+      <Table.Root columns={5}>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell aria-label="Select all">
+              <Checkbox
+                checked={allSelected}
+                onChange={toggleAll}
+                aria-label="Select all services"
+              />
+            </Table.HeaderCell>
+            <Table.HeaderCell>Service</Table.HeaderCell>
+            <Table.HeaderCell>Status</Table.HeaderCell>
+            <Table.HeaderCell>Port</Table.HeaderCell>
+            <Table.HeaderCell>Uptime</Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {items.map((s) => (
+            <Table.Row key={s.id}>
+              <Table.Cell>
+                <Checkbox
+                  checked={selected.has(s.id)}
+                  onChange={() => toggleOne(s.id)}
+                  aria-label={s.name}
+                />
+              </Table.Cell>
+              <Table.Cell>{s.name}</Table.Cell>
+              <Table.Cell>
+                <Badge variant={statusVariant(s.status)} size="sm">
+                  {s.status}
+                </Badge>
+              </Table.Cell>
+              <Table.Cell>{s.port}</Table.Cell>
+              <Table.Cell>{s.uptime}</Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table.Root>
+
+      <ActionBar
+        selectedItemCount={selected.size}
+        onClearSelection={() => setSelected(new Set())}
+      >
+        <Button variant="danger" size="small">
+          Delete
+        </Button>
+      </ActionBar>
+    </>
+  )
+}
+
+export const WithCheckboxes: Story = {
+  render: () => <CheckboxTableDemo />,
+  play: async ({canvas}) => {
+    await expect(canvas.getByRole('table')).toBeInTheDocument()
+    const checkboxes = canvas.getAllByRole('checkbox')
+    await expect(checkboxes.length).toBe(5) // 1 select-all + 4 rows
+    await expect(canvas.getByLabelText('Select all services')).toBeInTheDocument()
+  },
+}
+
 const storyStyles = css.create({
   stack: {display: 'flex', flexDirection: 'column', gap: 24},
   label: {color: colors.textMuted, fontSize: '0.875rem', fontWeight: 600},

package/src/components/Table/Table.tsx

@@ -94,7 +94,6 @@ function Row({children}: {children: ReactNode}) {
   const rowIndex = useContext(RowIndexContext)
   const isEvenRow = rowIndex >= 0 && rowIndex % 2 === 1
   const childArray = Children.toArray(children)
-  const isLastRow = false // handled by CSS or parent
 
   return (
     <html.div

package/src/components/Textarea/Textarea.meta.ts

@@ -3,12 +3,8 @@ import type {ComponentMeta} from '../component-meta'
 export const meta: ComponentMeta = {
   description:
     'Multi-line text input with automatic Field/Form integration. Same Field binding behavior as Input.',
-  whenToUse: [
-    'Multi-line text entry (comments, messages, descriptions)',
-  ],
-  whenNotToUse: [
-    'Single-line input — use Input',
-  ],
+  whenToUse: ['Multi-line text entry (comments, messages, descriptions)'],
+  whenNotToUse: ['Single-line input — use Input'],
   relatedTo: [
     {component: 'Input', relationship: 'Single-line variant'},
     {component: 'Field', relationship: 'Wrap in Field.Root for label + error'},

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -1,4 +1,4 @@
-import {type ReactNode, createContext, useContext, useRef} from 'react'
+import {type ReactNode} from 'react'
 import {css, html} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {lightTheme, lightShadows} from '@duro-app/tokens/themes/light.css'
@@ -27,26 +27,9 @@ const styles = css.create({
 // concrete VarGroup lacks the generic index signature. This is a known typing gap.
 type DivStyle = Parameters<typeof html.div>[0]['style']
 
-/** Context providing a portal target inside the themed tree. */
-const OverlayContainerContext = createContext<React.RefObject<HTMLDivElement | null> | null>(null)
-
-/** Returns the overlay container element for portals (inside the ThemeProvider). */
-export function useOverlayContainer(): HTMLElement {
-  const ref = useContext(OverlayContainerContext)
-  return ref?.current ?? (typeof document !== 'undefined' ? document.body : null!)
-}
-
 export function ThemeProvider({theme = 'dark', children}: ThemeProviderProps) {
-  const overlayRef = useRef<HTMLDivElement>(null)
   const overrides = themeMap[theme]
   const themeStyles = [overrides?.[0], overrides?.[1], styles.root] as DivStyle
 
-  return (
-    <html.div style={themeStyles}>
-      <OverlayContainerContext.Provider value={overlayRef}>
-        {children}
-        <html.div ref={overlayRef} />
-      </OverlayContainerContext.Provider>
-    </html.div>
-  )
+  return <html.div style={themeStyles}>{children}</html.div>
 }

package/src/index.ts

@@ -3,6 +3,7 @@ import './strict.css'
 
 // Components
 export {ActionBar, type ActionBarProps} from './components/ActionBar/ActionBar'
+export {ActionBarProvider} from './components/ActionBar/ActionBarProvider'
 export {Alert, type AlertVariant} from './components/Alert/Alert'
 export {Icon, type IconName} from './components/Icon'
 export {Badge, type BadgeVariant, type BadgeSize} from './components/Badge/Badge'
@@ -10,6 +11,8 @@ export {Button, type ButtonVariant, type ButtonSize} from './components/Button/B
 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 {Drawer, type DrawerAnchor, type DrawerSize} from './components/Drawer/Drawer'
 export {EmptyState} from './components/EmptyState/EmptyState'
 export {Heading, type HeadingVariant} from './components/Heading/Heading'
 export {Field} from './components/Field/Field'
@@ -35,11 +38,7 @@ 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, 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'