@ciridae/ui 0.2.0

package/dist/components/agentic/voice-selector.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable max-lines, react-refresh/only-export-components */
+import { CircleSmallIcon, MarsIcon, PauseIcon, PlayIcon, TransgenderIcon, VenusAndMarsIcon, VenusIcon, } from "lucide-react";
+import * as React from "react";
+import { Button } from "@ciridae/ui/button";
+import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, } from "@ciridae/ui/command";
+import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "@ciridae/ui/dialog";
+import { Spinner } from "@ciridae/ui/spinner";
+import { cn } from "@ciridae/ui/utils";
+import { useControllableState } from "./use-controllable-state";
+const VoiceSelectorContext = React.createContext(null);
+function VoiceSelector({ children, defaultOpen = false, defaultValue, onOpenChange, onValueChange, open: openProp, value: valueProp, voices = [], ...props }) {
+    const [value, setValue] = useControllableState({
+        defaultValue,
+        onChange: onValueChange,
+        value: valueProp,
+    });
+    const [open, setOpen] = useControllableState({
+        defaultValue: defaultOpen,
+        onChange: onOpenChange,
+        value: openProp,
+    });
+    const contextValue = React.useMemo(() => ({ open, setOpen, setValue, value, voices }), [open, setOpen, setValue, value, voices]);
+    return (_jsx(VoiceSelectorContext.Provider, { value: contextValue, children: _jsx(Dialog, { onOpenChange: setOpen, open: open, ...props, children: children ?? _jsx(VoiceSelectorDefaultContent, {}) }) }));
+}
+function VoiceSelectorDefaultContent() {
+    const { voices } = useVoiceSelector();
+    return (_jsxs(_Fragment, { children: [_jsx(VoiceSelectorTrigger, { asChild: true, children: _jsx(Button, { className: "w-64 justify-between", variant: "outline", children: _jsx(VoiceSelectorValue, { className: "max-w-52 text-left" }) }) }), _jsxs(VoiceSelectorContent, { children: [_jsx(VoiceSelectorInput, { placeholder: "Search voices..." }), _jsxs(VoiceSelectorList, { children: [_jsx(VoiceSelectorEmpty, { children: "No voices found." }), _jsx(VoiceSelectorGroup, { heading: "Voices", children: voices.map((voice) => (_jsx(VoiceSelectorItem, { voice: voice }, voice.id))) })] })] })] }));
+}
+function useVoiceSelector() {
+    const context = React.useContext(VoiceSelectorContext);
+    if (!context)
+        throw new Error("VoiceSelector components must be used within VoiceSelector");
+    return context;
+}
+function VoiceSelectorTrigger(props) {
+    return _jsx(DialogTrigger, { ...props });
+}
+function VoiceSelectorContent({ children, className, title = "Voice selector", ...props }) {
+    return (_jsxs(DialogContent, { "aria-describedby": undefined, className: cn("overflow-hidden p-0 sm:max-w-xl", className), ...props, children: [_jsx(DialogTitle, { className: "sr-only", children: title }), _jsx(Command, { className: "**:data-[slot=command-input-wrapper]:h-auto", children: children })] }));
+}
+function VoiceSelectorDialog(props) {
+    return _jsx(CommandDialog, { ...props });
+}
+function VoiceSelectorInput({ className, ...props }) {
+    return _jsx(CommandInput, { className: cn("h-auto py-3", className), ...props });
+}
+function VoiceSelectorList(props) {
+    return _jsx(CommandList, { ...props });
+}
+function VoiceSelectorEmpty(props) {
+    return _jsx(CommandEmpty, { ...props });
+}
+function VoiceSelectorGroup(props) {
+    return _jsx(CommandGroup, { ...props });
+}
+function VoiceSelectorItem({ children, onSelect, value, voice, ...props }) {
+    const { setOpen, setValue } = useVoiceSelector();
+    const itemValue = value ?? voice?.id;
+    return (_jsx(CommandItem, { onSelect: (currentValue) => {
+            setValue(itemValue ?? currentValue);
+            setOpen(false);
+            onSelect?.(currentValue);
+        }, value: itemValue, ...props, children: children ?? (voice ? _jsx(VoiceSelectorOption, { voice: voice }) : null) }));
+}
+function VoiceSelectorOption({ voice }) {
+    return (_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [_jsxs("div", { className: "grid min-w-0 flex-1 gap-1", children: [_jsx(VoiceSelectorName, { children: voice.label }), _jsxs(VoiceSelectorAttributes, { children: [voice.gender ? _jsx(VoiceSelectorGender, { value: voice.gender }) : null, voice.accent ? _jsx(VoiceSelectorAccent, { value: voice.accent }) : null, voice.age ? _jsx(VoiceSelectorAge, { children: voice.age }) : null] }), voice.description ? (_jsx(VoiceSelectorDescription, { children: voice.description })) : null] }), voice.previewLabel ? (_jsx(VoiceSelectorShortcut, { children: voice.previewLabel })) : null] }));
+}
+function VoiceSelectorShortcut(props) {
+    return _jsx(CommandShortcut, { ...props });
+}
+function VoiceSelectorSeparator(props) {
+    return _jsx(CommandSeparator, { ...props });
+}
+function VoiceSelectorGender({ className, value, ...props }) {
+    return (_jsx("span", { className: cn("inline-flex items-center gap-1", className), ...props, children: _jsx(VoiceSelectorGenderIcon, { value: value }) }));
+}
+function VoiceSelectorAccent({ children, className, value, ...props }) {
+    return (_jsx("span", { className: cn("font-mono text-[0.6875rem] uppercase", className), ...props, children: children ?? value }));
+}
+function VoiceSelectorAge({ className, ...props }) {
+    return _jsx("span", { className: cn("text-[0.6875rem]", className), ...props });
+}
+function VoiceSelectorName({ className, ...props }) {
+    return _jsx("span", { className: cn("truncate font-medium", className), ...props });
+}
+function VoiceSelectorDescription({ className, ...props }) {
+    return _jsx("span", { className: cn("truncate text-xs text-muted-foreground", className), ...props });
+}
+function VoiceSelectorAttributes({ className, ...props }) {
+    return (_jsx("div", { className: cn("flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground", className), ...props }));
+}
+function VoiceSelectorBullet({ className, ...props }) {
+    return (_jsx("span", { className: cn("text-muted-foreground", className), ...props, children: "-" }));
+}
+function VoiceSelectorValue({ className, placeholder = "Select voice", ...props }) {
+    const { value, voices } = useVoiceSelector();
+    const voice = voices.find((candidate) => candidate.id === value);
+    return (_jsx("span", { className: cn("truncate", className), ...props, children: voice?.label ?? placeholder }));
+}
+function VoiceSelectorPreview({ className, loading, onClick, onPlay, playing, type = "button", ...props }) {
+    const Icon = loading ? Spinner : playing ? PauseIcon : PlayIcon;
+    return (_jsx("button", { "aria-label": playing ? "Pause voice preview" : "Play voice preview", className: cn("inline-flex size-7 shrink-0 items-center justify-center rounded-md border bg-background text-foreground transition-colors hover:bg-accent hover:text-accent-foreground", className), onClick: (event) => {
+            event.stopPropagation();
+            onClick?.(event);
+            if (!event.defaultPrevented)
+                onPlay?.();
+        }, ...props, type: type, children: _jsx(Icon, { className: "size-3.5" }) }));
+}
+function VoiceSelectorGenderIcon({ value }) {
+    if (value === "male")
+        return _jsx(MarsIcon, { className: "size-3.5" });
+    if (value === "female")
+        return _jsx(VenusIcon, { className: "size-3.5" });
+    if (value === "transgender")
+        return _jsx(TransgenderIcon, { className: "size-3.5" });
+    if (value === "androgyne" || value === "intersex") {
+        return _jsx(VenusAndMarsIcon, { className: "size-3.5" });
+    }
+    return _jsx(CircleSmallIcon, { className: "size-3.5" });
+}
+export { VoiceSelector, VoiceSelectorAccent, VoiceSelectorAge, VoiceSelectorAttributes, VoiceSelectorBullet, VoiceSelectorContent, VoiceSelectorDescription, VoiceSelectorDialog, VoiceSelectorEmpty, VoiceSelectorGender, VoiceSelectorGroup, VoiceSelectorInput, VoiceSelectorItem, VoiceSelectorList, VoiceSelectorName, VoiceSelectorPreview, VoiceSelectorSeparator, VoiceSelectorShortcut, VoiceSelectorTrigger, VoiceSelectorValue, useVoiceSelector, };

package/dist/components/agentic/web-preview.d.ts

@@ -0,0 +1,25 @@
+import type * as React from "react";
+import { Button } from "@ciridae/ui/button";
+import { Input } from "@ciridae/ui/input";
+type WebPreviewProps = React.ComponentProps<"div"> & {
+    url: string;
+};
+type WebPreviewNavigationProps = React.ComponentProps<"div">;
+type WebPreviewNavigationButtonProps = React.ComponentProps<typeof Button> & {
+    action?: "back" | "forward" | "reload";
+};
+type WebPreviewUrlProps = Omit<React.ComponentProps<typeof Input>, "value"> & {
+    value?: string;
+};
+type WebPreviewBodyProps = React.ComponentProps<"iframe"> & {
+    src?: string;
+};
+type WebPreviewConsoleProps = React.ComponentProps<"div">;
+declare function WebPreview({ children, className, url, ...props }: WebPreviewProps): import("react/jsx-runtime").JSX.Element;
+declare function WebPreviewNavigation({ className, ...props }: WebPreviewNavigationProps): import("react/jsx-runtime").JSX.Element;
+declare function WebPreviewNavigationButton({ action, children, ...props }: WebPreviewNavigationButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function WebPreviewUrl({ className, value, ...props }: WebPreviewUrlProps): import("react/jsx-runtime").JSX.Element;
+declare function WebPreviewBody({ className, referrerPolicy, sandbox, src, title, ...props }: WebPreviewBodyProps): import("react/jsx-runtime").JSX.Element;
+declare function WebPreviewConsole({ className, ...props }: WebPreviewConsoleProps): import("react/jsx-runtime").JSX.Element;
+export { WebPreview, WebPreviewBody, WebPreviewConsole, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewUrl, };
+export type { WebPreviewBodyProps, WebPreviewConsoleProps, WebPreviewNavigationButtonProps, WebPreviewNavigationProps, WebPreviewProps, WebPreviewUrlProps, };

package/dist/components/agentic/web-preview.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ArrowLeftIcon, ArrowRightIcon, RotateCwIcon } from "lucide-react";
+import { createContext, useContext, useMemo } from "react";
+import { Button } from "@ciridae/ui/button";
+import { Input } from "@ciridae/ui/input";
+import { cn } from "@ciridae/ui/utils";
+const WebPreviewContext = createContext({ url: "" });
+function useWebPreview() {
+    return useContext(WebPreviewContext);
+}
+function WebPreview({ children, className, url, ...props }) {
+    const contextValue = useMemo(() => ({ url }), [url]);
+    return (_jsx(WebPreviewContext.Provider, { value: contextValue, children: _jsx("div", { "data-slot": "web-preview", className: cn("flex min-h-0 w-full flex-col overflow-hidden rounded-lg border bg-card", className), ...props, children: children }) }));
+}
+function WebPreviewNavigation({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "web-preview-navigation", className: cn("flex min-w-0 items-center gap-2 border-b p-2", className), ...props }));
+}
+function WebPreviewNavigationButton({ action = "reload", children, ...props }) {
+    const Icon = action === "back" ? ArrowLeftIcon : action === "forward" ? ArrowRightIcon : RotateCwIcon;
+    return (_jsx(Button, { "aria-label": action, size: "icon", type: "button", variant: "ghost", ...props, children: children ?? _jsx(Icon, { "aria-hidden": "true", className: "size-4" }) }));
+}
+function WebPreviewUrl({ className, value, ...props }) {
+    const { url } = useWebPreview();
+    return (_jsx(Input, { "data-slot": "web-preview-url", readOnly: true, value: value ?? url, className: cn("h-8 flex-1 font-mono text-xs", className), ...props }));
+}
+function WebPreviewBody({ className, referrerPolicy = "no-referrer", sandbox = "allow-scripts", src, title = "Web preview", ...props }) {
+    const { url } = useWebPreview();
+    return (_jsx("iframe", { "data-slot": "web-preview-body", className: cn("min-h-80 w-full flex-1 bg-background", className), referrerPolicy: referrerPolicy, sandbox: sandbox, src: src ?? url, title: title, ...props }));
+}
+function WebPreviewConsole({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "web-preview-console", className: cn("border-t bg-muted/40 p-3 font-mono text-xs text-muted-foreground", className), ...props }));
+}
+export { WebPreview, WebPreviewBody, WebPreviewConsole, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewUrl, };

package/dist/components/ui/accordion.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { Accordion as AccordionPrimitive } from "radix-ui";
+declare function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/components/ui/accordion.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon } from "lucide-react";
+import { Accordion as AccordionPrimitive } from "radix-ui";
+import { cn } from "@ciridae/ui/utils";
+function Accordion({ ...props }) {
+    return _jsx(AccordionPrimitive.Root, { "data-slot": "accordion", ...props });
+}
+function AccordionItem({ className, ...props }) {
+    return (_jsx(AccordionPrimitive.Item, { "data-slot": "accordion-item", className: cn("border-b last:border-b-0", className), ...props }));
+}
+function AccordionTrigger({ className, children, ...props }) {
+    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn("flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180", className), ...props, children: [children, _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" })] }) }));
+}
+function AccordionContent({ className, children, ...props }) {
+    return (_jsx(AccordionPrimitive.Content, { "data-slot": "accordion-content", className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", ...props, children: _jsx("div", { className: cn("pt-0 pb-4", className), children: children }) }));
+}
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/components/ui/alert-dialog.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import { type ButtonVariantProps } from "@ciridae/ui/button-variants";
+declare function AlertDialogPortalContainerProvider({ children, container, }: {
+    children: React.ReactNode;
+    container: HTMLElement | null;
+}): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogPortal({ container, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogContent({ className, size, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+    size?: "default" | "sm";
+}): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogAction({ className, variant, size, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action> & ButtonVariantProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogCancel({ className, variant, size, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> & ButtonVariantProps): import("react/jsx-runtime").JSX.Element;
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogPortalContainerProvider, AlertDialogTitle, AlertDialogTrigger, };

package/dist/components/ui/alert-dialog.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import { cn } from "@ciridae/ui/utils";
+import { buttonVariants } from "@ciridae/ui/button-variants";
+const AlertDialogPortalContainerContext = React.createContext({
+    container: null,
+});
+function AlertDialogPortalContainerProvider({ children, container, }) {
+    const value = React.useMemo(() => ({ container }), [container]);
+    return (_jsx(AlertDialogPortalContainerContext.Provider, { value: value, children: children }));
+}
+function AlertDialog({ ...props }) {
+    return _jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
+}
+function AlertDialogTrigger({ ...props }) {
+    return _jsx(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
+}
+function AlertDialogPortal({ container, ...props }) {
+    const { container: contextualContainer } = React.useContext(AlertDialogPortalContainerContext);
+    return (_jsx(AlertDialogPrimitive.Portal, { container: container ?? contextualContainer ?? undefined, "data-slot": "alert-dialog-portal", ...props }));
+}
+function AlertDialogOverlay({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Overlay, { "data-slot": "alert-dialog-overlay", className: cn("fixed inset-0 z-50 bg-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0", className), ...props }));
+}
+function AlertDialogContent({ className, size = "default", ...props }) {
+    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, { "data-slot": "alert-dialog-content", "data-size": size, className: cn("group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-(--panel-gap) rounded-lg border bg-background p-(--panel-padding) shadow-lg duration-200 data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[size=default]:sm:max-w-lg", className), ...props })] }));
+}
+function AlertDialogHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-header", className: cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className), ...props }));
+}
+function AlertDialogFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-footer", className: cn("flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end", className), ...props }));
+}
+function AlertDialogTitle({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Title, { "data-slot": "alert-dialog-title", className: cn("text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className), ...props }));
+}
+function AlertDialogDescription({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Description, { "data-slot": "alert-dialog-description", className: cn("text-sm text-muted-foreground", className), ...props }));
+}
+function AlertDialogMedia({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-media", className: cn("mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8", className), ...props }));
+}
+function AlertDialogAction({ className, variant = "default", size = "default", ...props }) {
+    return (_jsx(AlertDialogPrimitive.Action, { "data-slot": "alert-dialog-action", className: cn(buttonVariants({ variant, size }), className), ...props }));
+}
+function AlertDialogCancel({ className, variant = "outline", size = "default", ...props }) {
+    return (_jsx(AlertDialogPrimitive.Cancel, { "data-slot": "alert-dialog-cancel", className: cn(buttonVariants({ variant, size }), className), ...props }));
+}
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogPortalContainerProvider, AlertDialogTitle, AlertDialogTrigger, };

package/dist/components/ui/alert.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const alertVariants: (props?: ({
+    variant?: "default" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): import("react/jsx-runtime").JSX.Element;
+declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { Alert, AlertTitle, AlertDescription };

package/dist/components/ui/alert.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "@ciridae/ui/utils";
+const alertVariants = cva("relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-(--panel-padding) py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
+    variants: {
+        variant: {
+            default: "bg-card text-card-foreground",
+            destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function Alert({ className, variant, ...props }) {
+    return (_jsx("div", { "data-slot": "alert", role: "alert", className: cn(alertVariants({ variant }), className), ...props }));
+}
+function AlertTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-title", className: cn("col-start-2 line-clamp-1 min-h-4 font-medium", className), ...props }));
+}
+function AlertDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-description", className: cn("col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed", className), ...props }));
+}
+export { Alert, AlertTitle, AlertDescription };

package/dist/components/ui/aspect-ratio.d.ts

@@ -0,0 +1,3 @@
+import { AspectRatio as AspectRatioPrimitive } from "radix-ui";
+declare function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { AspectRatio };

package/dist/components/ui/aspect-ratio.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AspectRatio as AspectRatioPrimitive } from "radix-ui";
+function AspectRatio({ ...props }) {
+    return _jsx(AspectRatioPrimitive.Root, { "data-slot": "aspect-ratio", ...props });
+}
+export { AspectRatio };

package/dist/components/ui/avatar.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { Avatar as AvatarPrimitive } from "radix-ui";
+declare function Avatar({ className, size, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+    size?: "default" | "sm" | "lg";
+}): import("react/jsx-runtime").JSX.Element;
+declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarBadge({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+declare function AvatarGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount };

package/dist/components/ui/avatar.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Avatar as AvatarPrimitive } from "radix-ui";
+import { cn } from "@ciridae/ui/utils";
+function Avatar({ className, size = "default", ...props }) {
+    return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", "data-size": size, className: cn("group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6", className), ...props }));
+}
+function AvatarImage({ className, ...props }) {
+    return (_jsx(AvatarPrimitive.Image, { "data-slot": "avatar-image", className: cn("aspect-square size-full", className), ...props }));
+}
+function AvatarFallback({ className, ...props }) {
+    return (_jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", className: cn("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs", className), ...props }));
+}
+function AvatarBadge({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "avatar-badge", className: cn("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className), ...props }));
+}
+function AvatarGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "avatar-group", className: cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className), ...props }));
+}
+function AvatarGroupCount({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "avatar-group-count", className: cn("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-[var(--focus-ring-width)] ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className), ...props }));
+}
+export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount };

package/dist/components/ui/badge-variants.d.ts

@@ -0,0 +1,100 @@
+import { type RecipeVariantProps } from "@ciridae/ui/styled-system/css";
+declare const badgeVariants: import("../../styled-system/types").RecipeRuntimeFn<{
+    variant: {
+        default: {
+            backgroundColor: "muted.subtle";
+            borderColor: "border";
+            color: "foreground";
+            "a&:hover": {
+                backgroundColor: string;
+            };
+        };
+        secondary: {
+            backgroundColor: "secondary";
+            color: "secondary.foreground";
+            "a&:hover": {
+                backgroundColor: string;
+            };
+        };
+        success: {
+            backgroundColor: "success.muted";
+            borderColor: "success.border";
+            color: "success";
+            "&:focus-visible": {
+                boxShadow: "focus.success";
+            };
+            _dark: {
+                borderColor: "success.border.dark";
+                "&:focus-visible": {
+                    boxShadow: "focus.success.dark";
+                };
+            };
+        };
+        warning: {
+            backgroundColor: "warning.muted";
+            borderColor: "warning.border";
+            color: "warning";
+            "&:focus-visible": {
+                boxShadow: "focus.warning";
+            };
+            _dark: {
+                borderColor: "warning.border.dark";
+                "&:focus-visible": {
+                    boxShadow: "focus.warning.dark";
+                };
+            };
+        };
+        info: {
+            backgroundColor: "info.muted";
+            borderColor: "info.border";
+            color: "info";
+            "&:focus-visible": {
+                boxShadow: "focus.info";
+            };
+            _dark: {
+                borderColor: "info.border.dark";
+                "&:focus-visible": {
+                    boxShadow: "focus.info.dark";
+                };
+            };
+        };
+        destructive: {
+            backgroundColor: "destructive.subtle";
+            borderColor: "destructive.border";
+            color: "destructive";
+            "&:focus-visible": {
+                boxShadow: "focus.destructive";
+            };
+            _dark: {
+                backgroundColor: "destructive.subtle.dark";
+                borderColor: "destructive.border.dark";
+                "&:focus-visible": {
+                    boxShadow: "focus.destructive.dark";
+                };
+            };
+        };
+        outline: {
+            borderColor: "border";
+            color: "foreground";
+            "a&:hover": {
+                backgroundColor: string;
+                color: string;
+            };
+        };
+        ghost: {
+            "a&:hover": {
+                backgroundColor: string;
+                color: string;
+            };
+        };
+        link: {
+            color: "primary";
+            textUnderlineOffset: "4px";
+            "a&:hover": {
+                textDecorationLine: string;
+            };
+        };
+    };
+}>;
+type BadgeVariantProps = RecipeVariantProps<typeof badgeVariants>;
+export { badgeVariants, type BadgeVariantProps };

package/dist/components/ui/badge-variants.js

@@ -0,0 +1,140 @@
+import { cva } from "@ciridae/ui/styled-system/css";
+const badgeVariants = cva({
+    base: {
+        alignItems: "center",
+        borderColor: "transparent",
+        borderRadius: "badge",
+        borderStyle: "solid",
+        borderWidth: "default",
+        display: "inline-flex",
+        flexShrink: 0,
+        fontSize: "xs",
+        fontWeight: "control",
+        gap: "gap.1",
+        justifyContent: "center",
+        lineHeight: "xs",
+        overflow: "hidden",
+        paddingBlock: "0.125rem",
+        paddingInline: "badge.x",
+        transitionProperty: "color, box-shadow",
+        transitionDuration: "fast",
+        transitionTimingFunction: "standard",
+        whiteSpace: "nowrap",
+        width: "fit-content",
+        "&:focus-visible": {
+            borderColor: "ring",
+            boxShadow: "focus",
+        },
+        "&[aria-invalid='true']": {
+            borderColor: "destructive",
+            boxShadow: "focus.destructive",
+        },
+        _dark: {
+            "&[aria-invalid='true']": {
+                boxShadow: "focus.destructive.dark",
+            },
+        },
+        "& > svg": {
+            height: "icon.xs",
+            pointerEvents: "none",
+            width: "icon.xs",
+        },
+    },
+    variants: {
+        variant: {
+            default: {
+                backgroundColor: "muted.subtle",
+                borderColor: "border",
+                color: "foreground",
+                "a&:hover": { backgroundColor: "accent" },
+            },
+            secondary: {
+                backgroundColor: "secondary",
+                color: "secondary.foreground",
+                "a&:hover": {
+                    backgroundColor: "secondary.hover.anchor",
+                },
+            },
+            success: {
+                backgroundColor: "success.muted",
+                borderColor: "success.border",
+                color: "success",
+                "&:focus-visible": {
+                    boxShadow: "focus.success",
+                },
+                _dark: {
+                    borderColor: "success.border.dark",
+                    "&:focus-visible": {
+                        boxShadow: "focus.success.dark",
+                    },
+                },
+            },
+            warning: {
+                backgroundColor: "warning.muted",
+                borderColor: "warning.border",
+                color: "warning",
+                "&:focus-visible": {
+                    boxShadow: "focus.warning",
+                },
+                _dark: {
+                    borderColor: "warning.border.dark",
+                    "&:focus-visible": {
+                        boxShadow: "focus.warning.dark",
+                    },
+                },
+            },
+            info: {
+                backgroundColor: "info.muted",
+                borderColor: "info.border",
+                color: "info",
+                "&:focus-visible": {
+                    boxShadow: "focus.info",
+                },
+                _dark: {
+                    borderColor: "info.border.dark",
+                    "&:focus-visible": {
+                        boxShadow: "focus.info.dark",
+                    },
+                },
+            },
+            destructive: {
+                backgroundColor: "destructive.subtle",
+                borderColor: "destructive.border",
+                color: "destructive",
+                "&:focus-visible": {
+                    boxShadow: "focus.destructive",
+                },
+                _dark: {
+                    backgroundColor: "destructive.subtle.dark",
+                    borderColor: "destructive.border.dark",
+                    "&:focus-visible": {
+                        boxShadow: "focus.destructive.dark",
+                    },
+                },
+            },
+            outline: {
+                borderColor: "border",
+                color: "foreground",
+                "a&:hover": {
+                    backgroundColor: "accent",
+                    color: "accent.foreground",
+                },
+            },
+            ghost: {
+                "a&:hover": {
+                    backgroundColor: "accent",
+                    color: "accent.foreground",
+                },
+            },
+            link: {
+                color: "primary",
+                textUnderlineOffset: "4px",
+                "a&:hover": { textDecorationLine: "underline" },
+            },
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+export { badgeVariants };

package/dist/components/ui/badge.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { type BadgeVariantProps } from "@ciridae/ui/badge-variants";
+declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & BadgeVariantProps & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Badge };

package/dist/components/ui/badge.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "radix-ui";
+import { cn } from "@ciridae/ui/utils";
+import { badgeVariants } from "@ciridae/ui/badge-variants";
+function Badge({ className, variant = "default", asChild = false, ...props }) {
+    const Comp = asChild ? Slot.Root : "span";
+    return (_jsx(Comp, { "data-slot": "badge", "data-variant": variant, className: cn(badgeVariants({ variant }), className), ...props }));
+}
+export { Badge };