@dfosco/storyboard 0.5.0-alpha.0

package/src/core/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.jsx

@@ -0,0 +1,30 @@
+import { forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, Minus } from "lucide-react";
+import { cn } from "../../../utils/index.js";
+
+const DropdownMenuCheckboxItem = forwardRef(function DropdownMenuCheckboxItem({ className, children, checked, ...props }, ref) {
+return (
+<DropdownMenuPrimitive.CheckboxItem
+ref={ref}
+data-slot="dropdown-menu-checkbox-item"
+className={cn(
+"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-[4px] py-2 pr-8 pl-2.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+className
+)}
+checked={checked}
+{...props}
+>
+<span
+className="absolute right-2 flex items-center justify-center pointer-events-none"
+data-slot="dropdown-menu-checkbox-item-indicator"
+>
+<DropdownMenuPrimitive.ItemIndicator>
+{checked === "indeterminate" ? <Minus /> : <Check />}
+</DropdownMenuPrimitive.ItemIndicator>
+</span>
+{children}
+</DropdownMenuPrimitive.CheckboxItem>
+);
+});
+export default DropdownMenuCheckboxItem;

package/src/core/lib/components/ui/dropdown-menu/dropdown-menu-content.jsx

@@ -0,0 +1,22 @@
+import { forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cn } from "../../../utils/index.js";
+
+const DropdownMenuContent = forwardRef(function DropdownMenuContent({ className, sideOffset = 8, align = "start", ...props }, ref) {
+return (
+<DropdownMenuPrimitive.Portal>
+<DropdownMenuPrimitive.Content
+ref={ref}
+data-slot="dropdown-menu-content"
+sideOffset={sideOffset}
+align={align}
+className={cn(
+"font-sans data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 z-[10000] bg-popover border-3 border-border text-popover-foreground fill-popover-foreground min-w-40 rounded-xl p-2 shadow-xl duration-100 overflow-x-hidden overflow-y-auto",
+className
+)}
+{...props}
+/>
+</DropdownMenuPrimitive.Portal>
+);
+});
+export default DropdownMenuContent;

package/src/core/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.jsx

@@ -0,0 +1,16 @@
+import { forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cn } from "../../../utils/index.js";
+
+const DropdownMenuGroupHeading = forwardRef(function DropdownMenuGroupHeading({ className, inset, ...props }, ref) {
+return (
+<DropdownMenuPrimitive.Label
+ref={ref}
+data-slot="dropdown-menu-group-heading"
+data-inset={inset}
+className={cn("px-2 py-1.5 text-sm font-semibold data-[inset]:ps-8", className)}
+{...props}
+/>
+);
+});
+export default DropdownMenuGroupHeading;

package/src/core/lib/components/ui/dropdown-menu/dropdown-menu-group.jsx

@@ -0,0 +1,7 @@
+import { forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+
+const DropdownMenuGroup = forwardRef(function DropdownMenuGroup(props, ref) {
+return <DropdownMenuPrimitive.Group ref={ref} data-slot="dropdown-menu-group" {...props} />;
+});
+export default DropdownMenuGroup;

package/src/core/lib/components/ui/dropdown-menu/dropdown-menu-item.jsx

@@ -0,0 +1,20 @@
+import { forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cn } from "../../../utils/index.js";
+
+const DropdownMenuItem = forwardRef(function DropdownMenuItem({ className, inset, variant = "default", ...props }, ref) {
+return (
+<DropdownMenuPrimitive.Item
+ref={ref}
+data-slot="dropdown-menu-item"
+data-inset={inset}
+data-variant={variant}
+className={cn(
+"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-[4px] px-2.5 py-2 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+className
+)}
+{...props}
+/>
+);
+});
+export default DropdownMenuItem;

package/src/core/lib/components/ui/dropdown-menu/dropdown-menu-label.jsx

@@ -0,0 +1,17 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const DropdownMenuLabel = forwardRef(function DropdownMenuLabel({ className, inset, children, ...props }, ref) {
+return (
+<div
+ref={ref}
+data-slot="dropdown-menu-label"
+data-inset={inset}
+className={cn("text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7 data-[inset]:pl-8", className)}
+{...props}
+>
+{children}
+</div>
+);
+});
+export default DropdownMenuLabel;

package/src/core/lib/components/ui/dropdown-menu/dropdown-menu-portal.jsx

@@ -0,0 +1,4 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+export default function DropdownMenuPortal(props) {
+return <DropdownMenuPrimitive.Portal {...props} />;
+}

package/src/core/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.jsx

@@ -0,0 +1,7 @@
+import { forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+
+const DropdownMenuRadioGroup = forwardRef(function DropdownMenuRadioGroup(props, ref) {
+return <DropdownMenuPrimitive.RadioGroup ref={ref} data-slot="dropdown-menu-radio-group" {...props} />;
+});
+export default DropdownMenuRadioGroup;

package/src/core/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.jsx

@@ -0,0 +1,29 @@
+import { forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check } from "lucide-react";
+import { cn } from "../../../utils/index.js";
+
+const DropdownMenuRadioItem = forwardRef(function DropdownMenuRadioItem({ className, children, ...props }, ref) {
+return (
+<DropdownMenuPrimitive.RadioItem
+ref={ref}
+data-slot="dropdown-menu-radio-item"
+className={cn(
+"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+className
+)}
+{...props}
+>
+<span
+className="absolute right-2 flex items-center justify-center pointer-events-none"
+data-slot="dropdown-menu-radio-item-indicator"
+>
+<DropdownMenuPrimitive.ItemIndicator>
+<Check />
+</DropdownMenuPrimitive.ItemIndicator>
+</span>
+{children}
+</DropdownMenuPrimitive.RadioItem>
+);
+});
+export default DropdownMenuRadioItem;

package/src/core/lib/components/ui/dropdown-menu/dropdown-menu-separator.jsx

@@ -0,0 +1,15 @@
+import { forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cn } from "../../../utils/index.js";
+
+const DropdownMenuSeparator = forwardRef(function DropdownMenuSeparator({ className, ...props }, ref) {
+return (
+<DropdownMenuPrimitive.Separator
+ref={ref}
+data-slot="dropdown-menu-separator"
+className={cn("bg-border -mx-1.5 my-1 h-px", className)}
+{...props}
+/>
+);
+});
+export default DropdownMenuSeparator;

package/src/core/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.jsx

@@ -0,0 +1,16 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const DropdownMenuShortcut = forwardRef(function DropdownMenuShortcut({ className, children, ...props }, ref) {
+return (
+<span
+ref={ref}
+data-slot="dropdown-menu-shortcut"
+className={cn("text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest", className)}
+{...props}
+>
+{children}
+</span>
+);
+});
+export default DropdownMenuShortcut;

package/src/core/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.jsx

@@ -0,0 +1,15 @@
+import { forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cn } from "../../../utils/index.js";
+
+const DropdownMenuSubContent = forwardRef(function DropdownMenuSubContent({ className, ...props }, ref) {
+return (
+<DropdownMenuPrimitive.SubContent
+ref={ref}
+data-slot="dropdown-menu-sub-content"
+className={cn("font-sans data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[10000] bg-popover border-3 border-border text-popover-foreground fill-popover-foreground min-w-[96px] rounded-xl p-2 shadow-xl duration-100 w-auto", className)}
+{...props}
+/>
+);
+});
+export default DropdownMenuSubContent;

package/src/core/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.jsx

@@ -0,0 +1,23 @@
+import { forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { ChevronRight } from "lucide-react";
+import { cn } from "../../../utils/index.js";
+
+const DropdownMenuSubTrigger = forwardRef(function DropdownMenuSubTrigger({ className, inset, children, ...props }, ref) {
+return (
+<DropdownMenuPrimitive.SubTrigger
+ref={ref}
+data-slot="dropdown-menu-sub-trigger"
+data-inset={inset}
+className={cn(
+"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-2.5 py-2 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+className
+)}
+{...props}
+>
+{children}
+<ChevronRight className="ml-auto" />
+</DropdownMenuPrimitive.SubTrigger>
+);
+});
+export default DropdownMenuSubTrigger;

package/src/core/lib/components/ui/dropdown-menu/dropdown-menu-sub.jsx

@@ -0,0 +1,4 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+export default function DropdownMenuSub({ children, ...props }) {
+return <DropdownMenuPrimitive.Sub {...props}>{children}</DropdownMenuPrimitive.Sub>;
+}

package/src/core/lib/components/ui/dropdown-menu/dropdown-menu-trigger.jsx

@@ -0,0 +1,7 @@
+import { forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+
+const DropdownMenuTrigger = forwardRef(function DropdownMenuTrigger({ children, ...props }, ref) {
+return <DropdownMenuPrimitive.Trigger ref={ref} asChild {...props}>{children}</DropdownMenuPrimitive.Trigger>;
+});
+export default DropdownMenuTrigger;

package/src/core/lib/components/ui/dropdown-menu/dropdown-menu.jsx

@@ -0,0 +1,4 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+export default function DropdownMenu({ children, ...props }) {
+return <DropdownMenuPrimitive.Root {...props}>{children}</DropdownMenuPrimitive.Root>;
+}

package/src/core/lib/components/ui/dropdown-menu/index.js

@@ -0,0 +1,54 @@
+import Root from "./dropdown-menu.jsx";
+import Sub from "./dropdown-menu-sub.jsx";
+import CheckboxGroup from "./dropdown-menu-checkbox-group.jsx";
+import CheckboxItem from "./dropdown-menu-checkbox-item.jsx";
+import Content from "./dropdown-menu-content.jsx";
+import Group from "./dropdown-menu-group.jsx";
+import Item from "./dropdown-menu-item.jsx";
+import Label from "./dropdown-menu-label.jsx";
+import RadioGroup from "./dropdown-menu-radio-group.jsx";
+import RadioItem from "./dropdown-menu-radio-item.jsx";
+import Separator from "./dropdown-menu-separator.jsx";
+import Shortcut from "./dropdown-menu-shortcut.jsx";
+import Trigger from "./dropdown-menu-trigger.jsx";
+import SubContent from "./dropdown-menu-sub-content.jsx";
+import SubTrigger from "./dropdown-menu-sub-trigger.jsx";
+import GroupHeading from "./dropdown-menu-group-heading.jsx";
+import Portal from "./dropdown-menu-portal.jsx";
+
+export {
+CheckboxGroup,
+CheckboxItem,
+Content,
+Portal,
+Root as DropdownMenu,
+CheckboxGroup as DropdownMenuCheckboxGroup,
+CheckboxItem as DropdownMenuCheckboxItem,
+Content as DropdownMenuContent,
+Portal as DropdownMenuPortal,
+Group as DropdownMenuGroup,
+Item as DropdownMenuItem,
+Label as DropdownMenuLabel,
+RadioGroup as DropdownMenuRadioGroup,
+RadioItem as DropdownMenuRadioItem,
+Separator as DropdownMenuSeparator,
+Shortcut as DropdownMenuShortcut,
+Sub as DropdownMenuSub,
+SubContent as DropdownMenuSubContent,
+SubTrigger as DropdownMenuSubTrigger,
+Trigger as DropdownMenuTrigger,
+GroupHeading as DropdownMenuGroupHeading,
+Group,
+GroupHeading,
+Item,
+Label,
+RadioGroup,
+RadioItem,
+Root,
+Separator,
+Shortcut,
+Sub,
+SubContent,
+SubTrigger,
+Trigger,
+};

package/src/core/lib/components/ui/input/index.js

@@ -0,0 +1,7 @@
+import Root from "./input.jsx";
+
+export {
+Root,
+//
+Root as Input,
+};

package/src/core/lib/components/ui/input/input.jsx

@@ -0,0 +1,19 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const Input = forwardRef(function Input({ className, type, "data-slot": dataSlot = "input", ...props }, ref) {
+return (
+<input
+ref={ref}
+data-slot={dataSlot}
+type={type}
+className={cn(
+"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+className
+)}
+{...props}
+/>
+);
+});
+
+export default Input;

package/src/core/lib/components/ui/label/index.js

@@ -0,0 +1,7 @@
+import Root from "./label.jsx";
+
+export {
+Root,
+//
+Root as Label,
+};

package/src/core/lib/components/ui/label/label.jsx

@@ -0,0 +1,19 @@
+import { forwardRef } from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cn } from "../../../utils/index.js";
+
+const Label = forwardRef(function Label({ className, ...props }, ref) {
+return (
+<LabelPrimitive.Root
+ref={ref}
+data-slot="label"
+className={cn(
+"gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
+className
+)}
+{...props}
+/>
+);
+});
+
+export default Label;

package/src/core/lib/components/ui/panel/index.js

@@ -0,0 +1,24 @@
+import Root from "./panel.jsx";
+import Content from "./panel-content.jsx";
+import Header from "./panel-header.jsx";
+import Title from "./panel-title.jsx";
+import Body from "./panel-body.jsx";
+import Footer from "./panel-footer.jsx";
+import Close from "./panel-close.jsx";
+
+export {
+Root,
+Content,
+Header,
+Title,
+Body,
+Footer,
+Close,
+Root as Panel,
+Content as PanelContent,
+Header as PanelHeader,
+Title as PanelTitle,
+Body as PanelBody,
+Footer as PanelFooter,
+Close as PanelClose,
+};

package/src/core/lib/components/ui/panel/panel-body.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const PanelBody = forwardRef(function PanelBody({ className, children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="panel-body" className={cn("flex-1 overflow-auto px-4 py-2", className)} {...props}>
+{children}
+</div>
+);
+});
+export default PanelBody;

package/src/core/lib/components/ui/panel/panel-close.jsx

@@ -0,0 +1,16 @@
+import { forwardRef } from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Button } from "../button/index.js";
+import { X } from "lucide-react";
+
+const PanelClose = forwardRef(function PanelClose({ className, ...props }, ref) {
+return (
+<DialogPrimitive.Close asChild data-slot="panel-close">
+<Button ref={ref} variant="ghost" size="icon-sm" className={className} {...props}>
+<X />
+<span className="sr-only">Close</span>
+</Button>
+</DialogPrimitive.Close>
+);
+});
+export default PanelClose;

package/src/core/lib/components/ui/panel/panel-content.jsx

@@ -0,0 +1,29 @@
+import { forwardRef } from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cn } from "../../../utils/index.js";
+
+const PanelContent = forwardRef(function PanelContent({ className, children, ...props }, ref) {
+return (
+<DialogPrimitive.Portal>
+<DialogPrimitive.Content
+ref={ref}
+data-slot="panel-content"
+onInteractOutside={(e) => e.preventDefault()}
+onFocusOutside={(e) => e.preventDefault()}
+className={cn(
+"font-sans fixed z-[10000] bottom-28 right-6 w-[400px] max-h-[90vh] flex flex-col",
+"bg-popover text-popover-foreground border-3 border-slate-400",
+"rounded-xl shadow-xl overflow-x-hidden overflow-y-auto",
+"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom-4",
+"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-bottom-4",
+"duration-150",
+className
+)}
+{...props}
+>
+{children}
+</DialogPrimitive.Content>
+</DialogPrimitive.Portal>
+);
+});
+export default PanelContent;

package/src/core/lib/components/ui/panel/panel-footer.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const PanelFooter = forwardRef(function PanelFooter({ className, children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="panel-footer" className={cn("flex items-center justify-end gap-2 px-4 pt-2 pb-4", className)} {...props}>
+{children}
+</div>
+);
+});
+export default PanelFooter;

package/src/core/lib/components/ui/panel/panel-header.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const PanelHeader = forwardRef(function PanelHeader({ className, children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="panel-header" className={cn("flex items-center justify-between gap-2 px-4 pt-4 pb-2", className)} {...props}>
+{children}
+</div>
+);
+});
+export default PanelHeader;

package/src/core/lib/components/ui/panel/panel-title.jsx

@@ -0,0 +1,12 @@
+import { forwardRef } from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cn } from "../../../utils/index.js";
+
+const PanelTitle = forwardRef(function PanelTitle({ className, children, ...props }, ref) {
+return (
+<DialogPrimitive.Title ref={ref} data-slot="panel-title" className={cn("text-sm font-semibold", className)} {...props}>
+{children}
+</DialogPrimitive.Title>
+);
+});
+export default PanelTitle;

package/src/core/lib/components/ui/panel/panel.jsx

@@ -0,0 +1,4 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+export default function Panel({ children, ...props }) {
+return <DialogPrimitive.Root {...props}>{children}</DialogPrimitive.Root>;
+}

package/src/core/lib/components/ui/popover/index.js

@@ -0,0 +1,28 @@
+import Root from "./popover.jsx";
+import Close from "./popover-close.jsx";
+import Content from "./popover-content.jsx";
+import Description from "./popover-description.jsx";
+import Header from "./popover-header.jsx";
+import Title from "./popover-title.jsx";
+import Trigger from "./popover-trigger.jsx";
+import Portal from "./popover-portal.jsx";
+
+export {
+Root,
+Content,
+Description,
+Header,
+Title,
+Trigger,
+Close,
+Portal,
+//
+Root as Popover,
+Content as PopoverContent,
+Description as PopoverDescription,
+Header as PopoverHeader,
+Title as PopoverTitle,
+Trigger as PopoverTrigger,
+Close as PopoverClose,
+Portal as PopoverPortal,
+};

package/src/core/lib/components/ui/popover/popover-close.jsx

@@ -0,0 +1,7 @@
+import { forwardRef } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+const PopoverClose = forwardRef(function PopoverClose(props, ref) {
+return <PopoverPrimitive.Close ref={ref} data-slot="popover-close" {...props} />;
+});
+export default PopoverClose;

package/src/core/lib/components/ui/popover/popover-content.jsx

@@ -0,0 +1,22 @@
+import { forwardRef } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cn } from "../../../utils/index.js";
+
+const PopoverContent = forwardRef(function PopoverContent({ className, sideOffset = 4, align = "center", ...props }, ref) {
+return (
+<PopoverPrimitive.Portal>
+<PopoverPrimitive.Content
+ref={ref}
+data-slot="popover-content"
+sideOffset={sideOffset}
+align={align}
+className={cn(
+"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 flex flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100 z-50 w-72 origin-(--transform-origin) outline-hidden",
+className
+)}
+{...props}
+/>
+</PopoverPrimitive.Portal>
+);
+});
+export default PopoverContent;

package/src/core/lib/components/ui/popover/popover-description.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const PopoverDescription = forwardRef(function PopoverDescription({ className, children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="popover-description" className={cn("text-muted-foreground", className)} {...props}>
+{children}
+</div>
+);
+});
+export default PopoverDescription;

package/src/core/lib/components/ui/popover/popover-header.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const PopoverHeader = forwardRef(function PopoverHeader({ className, children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="popover-header" className={cn("flex flex-col gap-0.5 text-sm", className)} {...props}>
+{children}
+</div>
+);
+});
+export default PopoverHeader;

package/src/core/lib/components/ui/popover/popover-portal.jsx

@@ -0,0 +1,4 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+export default function PopoverPortal(props) {
+return <PopoverPrimitive.Portal {...props} />;
+}

package/src/core/lib/components/ui/popover/popover-title.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const PopoverTitle = forwardRef(function PopoverTitle({ className, children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="popover-title" className={cn("font-medium", className)} {...props}>
+{children}
+</div>
+);
+});
+export default PopoverTitle;

package/src/core/lib/components/ui/popover/popover-trigger.jsx

@@ -0,0 +1,8 @@
+import { forwardRef } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cn } from "../../../utils/index.js";
+
+const PopoverTrigger = forwardRef(function PopoverTrigger({ className, ...props }, ref) {
+return <PopoverPrimitive.Trigger ref={ref} data-slot="popover-trigger" className={cn("", className)} {...props} />;
+});
+export default PopoverTrigger;

package/src/core/lib/components/ui/popover/popover.jsx

@@ -0,0 +1,4 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+export default function Popover({ children, ...props }) {
+return <PopoverPrimitive.Root {...props}>{children}</PopoverPrimitive.Root>;
+}