@braintwopoint0/playback-commons 0.2.6 → 0.2.7

package/dist/ui/index.d.ts

@@ -295,6 +295,45 @@ interface SearchBarProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
 }
 declare function SearchBar({ value, onChange, onClear, className, placeholder, ...props }: SearchBarProps): react_jsx_runtime.JSX.Element;
 
+interface MultiSelectOption {
+    value: string;
+    label: string;
+    /** Optional badge shown after the label (e.g. row count). */
+    count?: number;
+}
+interface MultiSelectProps {
+    options: MultiSelectOption[];
+    selected: string[];
+    onChange: (selected: string[]) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyLabel?: string;
+    /** Hide the search input when there are fewer than this many options. */
+    searchThreshold?: number;
+    /** Show a "Clear all" affordance inside the popover when something is selected. */
+    clearable?: boolean;
+    /** Tailwind classes applied to the trigger button. */
+    className?: string;
+    /** Popover content width. Defaults to w-72. */
+    contentClassName?: string;
+    /** Aria-label for the trigger. */
+    'aria-label'?: string;
+}
+/**
+ * Multi-select dropdown — a search-and-pick alternative to chip lists when
+ * the option count gets unwieldy. Composes the existing Popover + Checkbox
+ * + Input primitives so styling stays consistent with the rest of commons.
+ *
+ * Trigger renders:
+ *   - placeholder when nothing is selected
+ *   - the single option's label when exactly one is selected
+ *   - "N selected" when multiple are selected
+ *
+ * Designed for short-to-medium option lists (~5-100). For very long lists
+ * consider a virtualised picker.
+ */
+declare function MultiSelect({ options, selected, onChange, placeholder, searchPlaceholder, emptyLabel, searchThreshold, clearable, className, contentClassName, 'aria-label': ariaLabel, }: MultiSelectProps): react_jsx_runtime.JSX.Element;
+
 interface DataRowProps extends React$1.HTMLAttributes<HTMLDivElement> {
     status?: 'green' | 'yellow' | 'red' | 'gray';
     primary: string;
@@ -577,4 +616,4 @@ type ResetPasswordFormProps = {
 };
 declare function ResetPasswordForm({ loginHref, initialError, redirectDelayMs, title, subtitle, }: ResetPasswordFormProps): react_jsx_runtime.JSX.Element;
 
-export { AnimatedTooltip, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, DataRow, type DataRowProps, DatePicker, DateTimePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, EmptyState, type EmptyStateProps, FadeIn, type FadeInProps, FlipWords, Footer, type FooterColumnDef, FooterCreditsBar, type FooterCreditsBarProps, type FooterLinkDef, type FooterProps, type FooterSocialDef, type FooterSocialLink, ForgotPasswordForm, type ForgotPasswordFormProps, HeroHighlight, Highlight, HoverCard, HoverCardDescription, HoverCardTitle, HoverEffect, Input, type InputProps, Label, LumaSpin, NewsletterForm, type NewsletterFormProps, PageShell, type PageShellProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ResetPasswordForm, type ResetPasswordFormProps, SearchBar, type SearchBarProps, SectionCard, type SectionCardProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SignInForm, type SignInFormProps, SiteFooter, type SiteFooterProps, Skeleton, type StatItem, StatsGrid, type StatsGridProps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, TimePicker, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, easeSmooth, fadeInDown, fadeInUp, hoverLift, hoverScale, pageTransition, springBounce, staggerContainer, staggerItem };
+export { AnimatedTooltip, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, DataRow, type DataRowProps, DatePicker, DateTimePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, EmptyState, type EmptyStateProps, FadeIn, type FadeInProps, FlipWords, Footer, type FooterColumnDef, FooterCreditsBar, type FooterCreditsBarProps, type FooterLinkDef, type FooterProps, type FooterSocialDef, type FooterSocialLink, ForgotPasswordForm, type ForgotPasswordFormProps, HeroHighlight, Highlight, HoverCard, HoverCardDescription, HoverCardTitle, HoverEffect, Input, type InputProps, Label, LumaSpin, MultiSelect, type MultiSelectOption, type MultiSelectProps, NewsletterForm, type NewsletterFormProps, PageShell, type PageShellProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ResetPasswordForm, type ResetPasswordFormProps, SearchBar, type SearchBarProps, SectionCard, type SectionCardProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SignInForm, type SignInFormProps, SiteFooter, type SiteFooterProps, Skeleton, type StatItem, StatsGrid, type StatsGridProps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, TimePicker, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, easeSmooth, fadeInDown, fadeInUp, hoverLift, hoverScale, pageTransition, springBounce, staggerContainer, staggerItem };