"use client"; import * as React from "react"; import { Dialog as DialogPrimitive } from "radix-ui"; import { AnimatePresence, motion } from "motion/react"; import { cn } from "@kineticui/core"; export type ActionSheetAction = { label: string; icon?: React.ReactNode; description?: string; destructive?: boolean; disabled?: boolean; onSelect: () => void; }; export type ActionSheetProps = { open: boolean; onOpenChange: (open: boolean) => void; title?: string; description?: string; actions: ActionSheetAction[]; cancelLabel?: string; }; /** Mobile bottom sheet of actions. Drag down or tap outside to dismiss. */ export function ActionSheet({ open, onOpenChange, title, description, actions, cancelLabel = "Cancel" }: ActionSheetProps) { return ( {open ? ( { if (info.offset.y > 90 || info.velocity.y > 500) onOpenChange(false); }} className="fixed inset-x-0 bottom-0 z-50 mx-auto flex w-full max-w-md flex-col gap-2 p-3 pb-[max(env(safe-area-inset-bottom),12px)] outline-none" >

{title || description ? (

{title ? {title} : Actions} {description ? {description} : null}

) : ( Actions )}

{actions.map((a) => ( ))}

{cancelLabel} ) : null} ); }

Action Sheet

Installation

Exports