Sleep Timer Dialog Block for React

So you can see it without a click. On load the drawer is a copy drawn in place over the screen: a native dialog element docked to the foot of the frame that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Sleep timer button opens the real Drawer, with its focus trap, swipe, Escape and focus return, and the copy stays closed until a reload. Both show the same SleepFields component and share the block's state, including a timer that is already running. In your app keep the Drawer and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

From a typed "now" of 22:40 plus the minutes you chose, wrapped at midnight: 30 minutes is "Stops at 23:10" and 90 is "Stops at 00:10, after midnight". The presets and the slider are one value: moving the slider to 45 lights the 45 preset, and any other value lights none. End of episode is the 20 minutes left in the typed episode. In your app use the device's clock when the timer starts, and the player's own position for the end of the episode.

The whole span as one bar read left to right in every language: the solid part is what is left, the quiet part has gone, and with the fade on the last 30 seconds are hatched with fine stripes, so no colour is needed. While the timer runs the bar updates once a second, and under reduced motion it steps instead of gliding while the digits keep running. The fade zone grows to the whole bar when less than 30 seconds are left.

Everything. Nothing plays and nothing stops: Start timer starts the catalog Timer, kept out of sight, and the moon chip on the drawn player and the drawer show what is left; at zero the status says the sound would stop there. In your app pause or fade the player from the Timer's onComplete and from the last 30 seconds, and keep the timer in the player's own state so it survives the drawer closing, as it does here.

Yes. The real drawer is named by its title and described by its sentence, and Escape, Close and a swipe down return focus to the Sleep timer button; a running timer goes on. The presets are one group you move through with the arrow keys, the slider has arrow, Home and End keys and a value text in minutes, and starting or cancelling moves focus to the button that takes its place. The status line speaks when the timer starts, is cancelled or ends, and never counts the seconds. The trigger is passed to DrawerTrigger through render, and the drawer is controlled with open and onOpenChange.

A bottom drawer is already the phone pattern: the copy shown on load and the real drawer both come up from the foot of the screen at full width, with Close and the main button pinned under the content, which scrolls when the screen is short. On larger screens both are a centred panel at the foot of the frame.