fab

1"use client"
2 
3import type { ComponentProps } from "react"
4import * as FabPrimitive from "@zenithui/fab"
5import { cn } from "@/lib/utils"
6 
7export function FabRoot(props: ComponentProps<typeof FabPrimitive.Root>) {
8  return <FabPrimitive.Root {...props} />
9}
10 
11export function FabTrigger({
12  className,
13  ...props
14}: ComponentProps<typeof FabPrimitive.Trigger>) {
15  return (
16    <FabPrimitive.Trigger
17      className={cn(
18        "flex size-12 items-center justify-center rounded-full shadow-lg transition-all",
19        "bg-primary text-primary-foreground",
20        "focus:outline-primary hover:opacity-90 focus:outline-2 focus:outline-offset-2",
21        className,
22      )}
23      {...props}
24    />
25  )
26}
27 
28export function FabContent({
29  className,
30  ...props
31}: ComponentProps<typeof FabPrimitive.Content>) {
32  return (
33    <FabPrimitive.Content
34      className={cn(
35        "border-border bg-background min-w-[12rem] rounded-xl border p-3 shadow-lg",
36        className,
37      )}
38      {...props}
39    />
40  )
41}
42 
43export function FabGroup({
44  className,
45  ...props
46}: ComponentProps<typeof FabPrimitive.Group>) {
47  return (
48    <FabPrimitive.Group
49      className={cn(className)}
50      {...props}
51    />
52  )
53}
54 
55export function FabLabel({
56  className,
57  ...props
58}: ComponentProps<typeof FabPrimitive.Label>) {
59  return (
60    <FabPrimitive.Label
61      className={cn(
62        "text-muted-foreground mb-2 block text-xs font-semibold tracking-wider uppercase",
63        className,
64      )}
65      {...props}
66    />
67  )
68}
69 
70export function FabSeparator({
71  className,
72  ...props
73}: ComponentProps<typeof FabPrimitive.Separator>) {
74  return (
75    <FabPrimitive.Separator
76      className={cn("bg-border my-2 h-px", className)}
77      {...props}
78    />
79  )
80}
81 
82export function FabItem({
83  className,
84  ...props
85}: ComponentProps<typeof FabPrimitive.Item>) {
86  return (
87    <FabPrimitive.Item
88      className={cn(
89        "flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-left text-sm",
90        "hover:bg-accent hover:text-accent-foreground",
91        "focus:ring-primary/20 focus:ring-2 focus:outline-none",
92        "transition-colors",
93        className,
94      )}
95      {...props}
96    />
97  )
98}
99 
100export function FabItemIndicator({
101  className,
102  ...props
103}: ComponentProps<typeof FabPrimitive.ItemIndicator>) {
104  return (
105    <FabPrimitive.ItemIndicator
106      className={cn(
107        "hidden size-4 shrink-0 group-data-[state=checked]:inline-flex",
108        className,
109      )}
110      {...props}
111// … truncated