@rynx-ai/ui 0.1.9

package/README.md

@@ -0,0 +1,37 @@
+# @rynx-ai/ui
+
+Shared Rynx Web design tokens and business-agnostic shadcn/Radix primitives.
+`DESIGN.md` is the visual specification; this package is its Web implementation.
+The component recipe is pinned to shadcn `radix-nova` in `components.json`.
+
+```tsx
+import {
+  Button,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@rynx-ai/ui";
+```
+
+Import the shared theme after Tailwind in the consuming application:
+
+```css
+@import "tailwindcss";
+@import "@rynx-ai/ui/styles.css";
+@source "../node_modules/@rynx-ai/ui/dist";
+```
+
+Monorepo applications scan `packages/ui/src` instead because their Vite aliases
+consume source directly.
+
+Run shadcn component commands from this package so the CLI uses the pinned
+recipe and installs components under `src/components`:
+
+```sh
+pnpm dlx shadcn@latest add <component>
+```
+
+The package must stay independent of application state, routing, APIs, protocol
+types, and product-specific compositions. Those belong in the consuming app.

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

@@ -0,0 +1,16 @@
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import * as React from "react";
+export declare function AlertDialog(props: React.ComponentProps<typeof AlertDialogPrimitive.Root>): React.JSX.Element;
+export declare const AlertDialogTrigger: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare function AlertDialogPortal(props: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): React.JSX.Element;
+export declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    size?: "default" | "sm";
+} & React.RefAttributes<HTMLDivElement>>;
+export declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export declare function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & Pick<import("./button.js").ButtonProps & React.RefAttributes<HTMLButtonElement>, "variant" | "size"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & Pick<import("./button.js").ButtonProps & React.RefAttributes<HTMLButtonElement>, "variant" | "size"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/alert-dialog.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+export function AlertDialog(props) {
+    return _jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
+}
+export const AlertDialogTrigger = React.forwardRef((props, ref) => (_jsx(AlertDialogPrimitive.Trigger, { ref: ref, "data-slot": "alert-dialog-trigger", ...props })));
+AlertDialogTrigger.displayName = AlertDialogPrimitive.Trigger.displayName;
+export function AlertDialogPortal(props) {
+    return _jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
+}
+export const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Overlay, { ref: ref, "data-slot": "alert-dialog-overlay", className: cn("fixed inset-0 z-50 bg-black/10 duration-100 supports-[backdrop-filter]:backdrop-blur-xs data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0", className), ...props })));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+export const AlertDialogContent = React.forwardRef(({ className, size = "default", ...props }, ref) => (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, { ref: ref, "data-slot": "alert-dialog-content", "data-size": size, className: cn("group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-[calc(100%-2rem)] min-w-0 -translate-x-1/2 -translate-y-1/2 grid-cols-1 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 [&>*]:min-w-0", className), ...props })] })));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+export 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-4 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 }));
+}
+export function AlertDialogFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-footer", className: cn("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 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 }));
+}
+export function AlertDialogMedia({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-media", className: cn("mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", className), ...props }));
+}
+export const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Title, { ref: ref, "data-slot": "alert-dialog-title", className: cn("text-base 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 })));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+export const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Description, { ref: ref, "data-slot": "alert-dialog-description", className: cn("text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className), ...props })));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+export const AlertDialogAction = React.forwardRef(({ className, variant = "default", size = "default", ...props }, ref) => (_jsx(Button, { variant: variant, size: size, asChild: true, children: _jsx(AlertDialogPrimitive.Action, { ref: ref, "data-slot": "alert-dialog-action", className: cn(className), ...props }) })));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+export const AlertDialogCancel = React.forwardRef(({ className, variant = "outline", size = "default", ...props }, ref) => (_jsx(Button, { variant: variant, size: size, asChild: true, children: _jsx(AlertDialogPrimitive.Cancel, { ref: ref, "data-slot": "alert-dialog-cancel", className: cn(className), ...props }) })));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;

package/dist/components/button.d.ts

@@ -0,0 +1,11 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { buttonVariants };

package/dist/components/button.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-lg border border-transparent bg-clip-padding text-sm font-medium transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground hover:bg-primary/80",
+            destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+            outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+            secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+            ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+            link: "text-primary underline-offset-4 hover:underline",
+        },
+        size: {
+            default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+            xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+            sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+            lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+            icon: "size-8",
+            "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] [&_svg:not([class*='size-'])]:size-3",
+            "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)]",
+            "icon-lg": "size-9",
+        },
+    },
+    defaultVariants: { variant: "default", size: "default" },
+});
+export const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (_jsx(Comp, { ref: ref, "data-slot": "button", "data-variant": variant ?? "default", "data-size": size ?? "default", className: cn(buttonVariants({ variant, size, className })), ...props }));
+});
+Button.displayName = "Button";
+export { buttonVariants };

package/dist/components/dialog.d.ts

@@ -0,0 +1,16 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as React from "react";
+export declare function Dialog(props: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
+export declare const DialogTrigger: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare function DialogPortal(props: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
+export declare const DialogClose: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    showCloseButton?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export declare function DialogFooter({ className, showCloseButton, children, ...props }: React.ComponentProps<"div"> & {
+    showCloseButton?: boolean;
+}): React.JSX.Element;
+export declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;

package/dist/components/dialog.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+export function Dialog(props) {
+    return _jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+export const DialogTrigger = React.forwardRef((props, ref) => _jsx(DialogPrimitive.Trigger, { ref: ref, "data-slot": "dialog-trigger", ...props }));
+DialogTrigger.displayName = DialogPrimitive.Trigger.displayName;
+export function DialogPortal(props) {
+    return _jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+export const DialogClose = React.forwardRef((props, ref) => _jsx(DialogPrimitive.Close, { ref: ref, "data-slot": "dialog-close", ...props }));
+DialogClose.displayName = DialogPrimitive.Close.displayName;
+export const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, "data-slot": "dialog-overlay", className: cn("fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-[backdrop-filter]:backdrop-blur-xs data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0", className), ...props })));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+export const DialogContent = React.forwardRef(({ className, children, showCloseButton = true, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, "data-slot": "dialog-content", className: cn("fixed top-1/2 left-1/2 z-50 grid w-full min-w-0 max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 grid-cols-1 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 [&>*]:min-w-0", className), ...props, children: [children, showCloseButton && (_jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", asChild: true, children: _jsxs(Button, { variant: "ghost", size: "icon-sm", className: "absolute top-2 right-2", children: [_jsx(X, { "aria-hidden": "true" }), _jsx("span", { className: "sr-only", children: "Close" })] }) }))] })] })));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+export function DialogHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2", className), ...props }));
+}
+export function DialogFooter({ className, showCloseButton = false, children, ...props }) {
+    return (_jsxs("div", { "data-slot": "dialog-footer", className: cn("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end", className), ...props, children: [children, showCloseButton && (_jsx(DialogPrimitive.Close, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Close" }) }))] }));
+}
+export const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Title, { ref: ref, "data-slot": "dialog-title", className: cn("text-base leading-none font-medium", className), ...props })));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+export const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Description, { ref: ref, "data-slot": "dialog-description", className: cn("text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className), ...props })));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;

package/dist/components/dropdown-menu.d.ts

@@ -0,0 +1,8 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as React from "react";
+export declare function DropdownMenu(props: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): React.JSX.Element;
+export declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    variant?: "default" | "destructive";
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/dropdown-menu.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+export function DropdownMenu(props) {
+    return _jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+export const DropdownMenuTrigger = React.forwardRef((props, ref) => (_jsx(DropdownMenuPrimitive.Trigger, { ref: ref, "data-slot": "dropdown-menu-trigger", ...props })));
+DropdownMenuTrigger.displayName = DropdownMenuPrimitive.Trigger.displayName;
+export const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, collisionPadding = 8, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { ref: ref, "data-slot": "dropdown-menu-content", sideOffset: sideOffset, collisionPadding: collisionPadding, className: cn("cn-menu-translucent z-50 min-w-36 origin-[var(--radix-dropdown-menu-content-transform-origin)] overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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", className), ...props }) })));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+export const DropdownMenuItem = React.forwardRef(({ className, variant = "default", ...props }, ref) => (_jsx(DropdownMenuPrimitive.Item, { ref: ref, "data-slot": "dropdown-menu-item", "data-variant": variant, className: cn("relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", variant === "destructive" &&
+        "text-destructive focus:bg-destructive/10 focus:text-destructive dark:focus:bg-destructive/20", className), ...props })));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;

package/dist/components/input.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare const Input: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;

package/dist/components/input.js

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

package/dist/components/interaction-question.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+export interface InteractionQuestionOption {
+    value: string;
+    label: string;
+    description?: string;
+}
+export type InteractionQuestionField = {
+    id: string;
+    type: "text";
+    label: string;
+    description?: string;
+    required?: boolean;
+    secret?: boolean;
+    multiline?: boolean;
+    placeholder?: string;
+} | {
+    id: string;
+    type: "select";
+    label: string;
+    description?: string;
+    required?: boolean;
+    multiple?: boolean;
+    allowOther?: boolean;
+    options: InteractionQuestionOption[];
+};
+export type InteractionQuestionAnswer = string | string[];
+export interface InteractionQuestionProps {
+    idPrefix: string;
+    fields: readonly InteractionQuestionField[];
+    activeFieldId?: string;
+    answers: Record<string, InteractionQuestionAnswer>;
+    otherValues: Record<string, string>;
+    otherSelections: Record<string, boolean>;
+    errors?: Record<string, string | undefined>;
+    disabled?: boolean;
+    onNavigate: (fieldId: string) => void;
+    onAnswerChange: (fieldId: string, answer: InteractionQuestionAnswer) => void;
+    onOtherValueChange: (fieldId: string, value: string) => void;
+    onOtherSelectionChange: (fieldId: string, selected: boolean) => void;
+}
+/** Shared one-question-at-a-time editor used by every Rynx web surface. */
+export declare function InteractionQuestion({ idPrefix, fields, activeFieldId, answers, otherValues, otherSelections, errors, disabled, onNavigate, onAnswerChange, onOtherValueChange, onOtherSelectionChange, }: InteractionQuestionProps): React.JSX.Element | null;

package/dist/components/interaction-question.js

@@ -0,0 +1,79 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Check, ChevronLeft, ChevronRight } from "lucide-react";
+import * as React from "react";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Textarea } from "./textarea.js";
+import { cn } from "../lib/utils.js";
+/** Shared one-question-at-a-time editor used by every Rynx web surface. */
+export function InteractionQuestion({ idPrefix, fields, activeFieldId, answers, otherValues, otherSelections, errors = {}, disabled = false, onNavigate, onAnswerChange, onOtherValueChange, onOtherSelectionChange, }) {
+    const questionRef = React.useRef(null);
+    const previousFieldIdRef = React.useRef(undefined);
+    const previousErrorRef = React.useRef(undefined);
+    const requestedIndex = fields.findIndex((candidate) => candidate.id === activeFieldId);
+    const index = requestedIndex >= 0 ? requestedIndex : 0;
+    const field = fields[index];
+    const error = field ? errors[field.id] : undefined;
+    const currentAnswer = field ? answers[field.id] : undefined;
+    React.useEffect(() => {
+        if (!field)
+            return;
+        const fieldChanged = previousFieldIdRef.current !== undefined
+            && previousFieldIdRef.current !== field.id;
+        const errorAppeared = Boolean(error) && previousErrorRef.current !== error;
+        previousFieldIdRef.current = field.id;
+        previousErrorRef.current = error;
+        if (!fieldChanged && !errorAppeared)
+            return;
+        const container = questionRef.current;
+        const focusTarget = container?.querySelector('input[aria-invalid="true"]:not([disabled]), textarea[aria-invalid="true"]:not([disabled])') ?? container?.querySelector("input:checked:not([disabled])")
+            ?? container?.querySelector("input:not([disabled]), textarea:not([disabled])");
+        focusTarget?.focus();
+    }, [error, field]);
+    if (!field)
+        return null;
+    const domId = `${idPrefix}-field-${index}`;
+    const descriptionId = field.description ? `${domId}-description` : undefined;
+    const errorId = error ? `${domId}-error` : undefined;
+    const describedBy = [descriptionId, errorId].filter(Boolean).join(" ") || undefined;
+    return (_jsxs("div", { className: "grid gap-3", children: [fields.length > 1 && (_jsxs("div", { className: "grid gap-1.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { "aria-live": "polite", className: "font-mono text-[10px] uppercase tracking-[0.14em] text-muted-foreground", children: ["Question ", index + 1, " of ", fields.length] }), _jsx("div", { className: "text-[11px] text-muted-foreground", children: field.required ? "Required" : "Optional" })] }), _jsx("div", { role: "progressbar", "aria-label": "Question progress", "aria-valuemin": 1, "aria-valuemax": fields.length, "aria-valuenow": index + 1, className: "h-1 overflow-hidden rounded-full bg-muted", children: _jsx("div", { className: "h-full rounded-full bg-primary transition-[width]", style: { width: `${((index + 1) / fields.length) * 100}%` } }) })] })), _jsx("div", { ref: questionRef, children: field.type === "text" ? (_jsxs("div", { className: "grid gap-1.5", children: [_jsxs("label", { htmlFor: domId, className: "text-xs font-medium text-foreground", children: [field.label, field.required && _jsx(RequiredIndicator, {})] }), field.description && (_jsx("p", { id: descriptionId, className: "text-[11px] leading-relaxed text-muted-foreground", children: field.description })), field.multiline && !field.secret ? (_jsx(Textarea, { id: domId, value: typeof currentAnswer === "string" ? currentAnswer : "", disabled: disabled, placeholder: field.placeholder, "aria-invalid": error ? true : undefined, "aria-describedby": describedBy, required: field.required, onChange: (event) => onAnswerChange(field.id, event.target.value) })) : (_jsx(Input, { id: domId, type: field.secret ? "password" : "text", autoComplete: "off", value: typeof currentAnswer === "string" ? currentAnswer : "", disabled: disabled, placeholder: field.placeholder, "aria-invalid": error ? true : undefined, "aria-describedby": describedBy, required: field.required, onChange: (event) => onAnswerChange(field.id, event.target.value) })), _jsx(FieldError, { id: errorId, error: error })] })) : (_jsxs("fieldset", { disabled: disabled, role: field.multiple ? undefined : "radiogroup", "aria-required": !field.multiple && field.required ? true : undefined, "aria-invalid": error ? true : undefined, "aria-describedby": describedBy, className: "grid gap-1.5", children: [_jsxs("legend", { className: "text-xs font-medium text-foreground", children: [field.label, field.required && _jsx(RequiredIndicator, {})] }), field.description && (_jsx("p", { id: descriptionId, className: "text-[11px] leading-relaxed text-muted-foreground", children: field.description })), _jsxs("div", { className: "grid gap-1.5", children: [field.options.map((option, optionIndex) => {
+                                    const optionId = `${domId}-option-${optionIndex}`;
+                                    const checked = field.multiple
+                                        ? Array.isArray(currentAnswer) && currentAnswer.includes(option.value)
+                                        : otherSelections[field.id] !== true && currentAnswer === option.value;
+                                    return (_jsx(ChoiceRow, { id: optionId, name: field.multiple ? undefined : domId, type: field.multiple ? "checkbox" : "radio", checked: checked, label: option.label, description: option.description, onChange: (selected) => {
+                                            if (field.multiple) {
+                                                const values = Array.isArray(currentAnswer) ? currentAnswer : [];
+                                                onAnswerChange(field.id, selected
+                                                    ? [...values.filter((value) => value !== option.value), option.value]
+                                                    : values.filter((value) => value !== option.value));
+                                            }
+                                            else {
+                                                onAnswerChange(field.id, option.value);
+                                                onOtherSelectionChange(field.id, false);
+                                            }
+                                        } }, option.value));
+                                }), field.allowOther && (_jsxs("div", { className: "grid gap-1.5 rounded-lg border border-border bg-background/60 px-2.5 py-2 has-[:checked]:border-primary/50 has-[:checked]:bg-primary/5", children: [_jsx(ChoiceRow, { id: `${domId}-other`, name: field.multiple ? undefined : domId, type: field.multiple ? "checkbox" : "radio", checked: otherSelections[field.id] === true, label: "Other", embedded: true, onChange: (selected) => {
+                                                onOtherSelectionChange(field.id, selected);
+                                                if (selected && !field.multiple)
+                                                    onAnswerChange(field.id, "");
+                                            } }), _jsx(Input, { value: otherValues[field.id] ?? "", disabled: disabled || otherSelections[field.id] !== true, "aria-label": `Other answer for ${field.label}`, "aria-invalid": error ? true : undefined, "aria-describedby": describedBy, placeholder: "Enter another answer", onChange: (event) => onOtherValueChange(field.id, event.target.value) })] })), !field.required
+                                    && !field.multiple
+                                    && (otherSelections[field.id] === true
+                                        || (typeof currentAnswer === "string" && currentAnswer.length > 0)) && (_jsx(Button, { type: "button", size: "xs", variant: "ghost", className: "justify-self-start text-muted-foreground", onClick: () => {
+                                        onAnswerChange(field.id, "");
+                                        onOtherSelectionChange(field.id, false);
+                                    }, children: "Clear selection" }))] }), _jsx(FieldError, { id: errorId, error: error })] })) }), fields.length > 1 && (_jsxs("div", { className: "flex items-center justify-between gap-2 border-t border-border/70 pt-2", children: [_jsxs(Button, { type: "button", size: "xs", variant: "ghost", disabled: disabled || index === 0, onClick: () => onNavigate(fields[index - 1].id), children: [_jsx(ChevronLeft, {}), "Previous"] }), _jsxs(Button, { type: "button", size: "xs", variant: "outline", disabled: disabled || index === fields.length - 1, onClick: () => onNavigate(fields[index + 1].id), children: ["Next", _jsx(ChevronRight, {})] })] }))] }));
+}
+function ChoiceRow({ id, name, type, checked, label, description, embedded = false, onChange, }) {
+    return (_jsxs("label", { htmlFor: id, className: cn("flex cursor-pointer items-start gap-2 text-xs text-foreground", !embedded
+            && "rounded-lg border border-border bg-background/60 px-2.5 py-2 transition-colors hover:bg-muted/60 has-[:checked]:border-primary/50 has-[:checked]:bg-primary/5"), children: [_jsxs("span", { className: "relative mt-0.5 size-4 shrink-0", children: [_jsx("input", { id: id, type: type, name: name, checked: checked, className: "peer size-4 appearance-none rounded-sm border border-input bg-background outline-none transition-colors checked:border-primary checked:bg-primary focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-60", onChange: (event) => onChange(event.target.checked) }), _jsx(Check, { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 size-4 stroke-[3] text-primary-foreground opacity-0 peer-checked:opacity-100" })] }), _jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: "block", children: label }), description && (_jsx("span", { className: "mt-0.5 block text-[11px] leading-relaxed text-muted-foreground", children: description }))] })] }));
+}
+function FieldError({ id, error }) {
+    if (!error)
+        return null;
+    return (_jsx("p", { id: id, role: "alert", className: "text-[11px] text-destructive", children: error }));
+}
+function RequiredIndicator() {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "ml-0.5 text-destructive", children: "*" }), _jsx("span", { className: "sr-only", children: " (required)" })] }));
+}

package/dist/components/native-select.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
+    size?: "sm" | "default";
+};
+export declare function NativeSelect({ className, size, ...props }: NativeSelectProps): React.JSX.Element;
+export declare function NativeSelectOption({ className, ...props }: React.ComponentProps<"option">): React.JSX.Element;
+export declare function NativeSelectOptGroup({ className, ...props }: React.ComponentProps<"optgroup">): React.JSX.Element;

package/dist/components/native-select.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../lib/utils.js";
+export function NativeSelect({ className, size = "default", ...props }) {
+    return (_jsxs("div", { "data-slot": "native-select-wrapper", "data-size": size, className: cn("group/native-select relative w-fit has-[select:disabled]:opacity-50", className), children: [_jsx("select", { "data-slot": "native-select", "data-size": size, className: "h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", ...props }), _jsx(ChevronDown, { "aria-hidden": "true", "data-slot": "native-select-icon", className: "pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none" })] }));
+}
+export function NativeSelectOption({ className, ...props }) {
+    return (_jsx("option", { "data-slot": "native-select-option", className: cn("bg-[Canvas] text-[CanvasText]", className), ...props }));
+}
+export function NativeSelectOptGroup({ className, ...props }) {
+    return (_jsx("optgroup", { "data-slot": "native-select-optgroup", className: cn("bg-[Canvas] text-[CanvasText]", className), ...props }));
+}

package/dist/components/scroll-area.d.ts

@@ -0,0 +1,9 @@
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as React from "react";
+export declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    viewportClassName?: string;
+    viewportRef?: React.Ref<React.ElementRef<typeof ScrollAreaPrimitive.Viewport>>;
+    viewportProps?: Omit<React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Viewport>, "children" | "className">;
+    scrollbars?: "vertical" | "horizontal" | "both";
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/scroll-area.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+export const ScrollArea = React.forwardRef(({ className, children, viewportClassName, viewportRef, viewportProps, scrollbars = "vertical", type = "auto", ...props }, ref) => (_jsxs(ScrollAreaPrimitive.Root, { ref: ref, "data-slot": "scroll-area", type: type, className: cn("relative overflow-hidden", className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { ref: viewportRef, "data-slot": "scroll-area-viewport", className: cn("size-full rounded-[inherit] outline-none transition-[color,box-shadow] focus-visible:ring-2 focus-visible:ring-[var(--ring)]/45", scrollbars === "vertical" && "[&>div]:!block [&>div]:min-w-0 [&>div]:w-full", viewportClassName), ...viewportProps, children: children }), scrollbars !== "horizontal" && _jsx(ScrollBar, { orientation: "vertical" }), scrollbars !== "vertical" && _jsx(ScrollBar, { orientation: "horizontal" }), _jsx(ScrollAreaPrimitive.Corner, { "data-slot": "scroll-area-corner" })] })));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+export const ScrollBar = React.forwardRef(({ className, orientation = "vertical", style, ...props }, ref) => (_jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { ref: ref, "data-slot": "scroll-area-scrollbar", orientation: orientation, className: cn("group flex touch-none select-none p-px transition-colors", orientation === "vertical" && "h-full w-2", orientation === "horizontal" && "h-2 flex-col", className), style: {
+        ...(orientation === "vertical" ? { right: 2 } : { bottom: 2 }),
+        ...style,
+    }, ...props, children: _jsx(ScrollAreaPrimitive.ScrollAreaThumb, { "data-slot": "scroll-area-thumb", className: cn("relative flex-1 rounded-full bg-[var(--scrollbar-thumb)] transition-colors group-hover:bg-[var(--scrollbar-thumb-hover)] active:bg-[var(--scrollbar-thumb-active)]", orientation === "vertical" ? "min-h-8 w-full" : "h-full min-w-8") }) })));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;

package/dist/components/select.d.ts

@@ -0,0 +1,14 @@
+import * as SelectPrimitive from "@radix-ui/react-select";
+import * as React from "react";
+export declare function Select(props: React.ComponentProps<typeof SelectPrimitive.Root>): React.JSX.Element;
+export declare const SelectGroup: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectValue: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    size?: "sm" | "default";
+} & React.RefAttributes<HTMLButtonElement>>;
+export declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/select.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+export function Select(props) {
+    return _jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
+}
+export const SelectGroup = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Group, { ref: ref, "data-slot": "select-group", className: cn("scroll-my-1 p-1", className), ...props })));
+SelectGroup.displayName = SelectPrimitive.Group.displayName;
+export const SelectValue = React.forwardRef((props, ref) => _jsx(SelectPrimitive.Value, { ref: ref, "data-slot": "select-value", ...props }));
+SelectValue.displayName = SelectPrimitive.Value.displayName;
+export const SelectTrigger = React.forwardRef(({ className, size = "default", children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, "data-slot": "select-trigger", "data-size": size, className: cn("flex w-full min-w-0 items-center justify-between gap-1.5 whitespace-nowrap rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&>span]:min-w-0 [&>span]:truncate [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { "aria-hidden": "true", className: "pointer-events-none size-4 shrink-0 text-muted-foreground" }) })] })));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+export const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollUpButton, { ref: ref, "data-slot": "select-scroll-up-button", className: cn("z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: _jsx(ChevronUp, { "aria-hidden": "true" }) })));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+export const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollDownButton, { ref: ref, "data-slot": "select-scroll-down-button", className: cn("z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: _jsx(ChevronDown, { "aria-hidden": "true" }) })));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+export const SelectContent = React.forwardRef(({ className, children, position = "popper", align = "center", sideOffset = 4, collisionPadding = 8, ...props }, ref) => (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, "data-slot": "select-content", "data-align-trigger": position === "item-aligned", position: position, align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, className: cn("cn-menu-translucent relative z-50 max-h-[var(--radix-select-content-available-height)] min-w-36 origin-[var(--radix-select-content-transform-origin)] overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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", position === "popper" &&
+            "w-[var(--radix-select-trigger-width)] data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { "data-position": position, className: cn("p-1", position === "popper" &&
+                    "min-w-[var(--radix-select-trigger-width)]"), children: children }), _jsx(SelectScrollDownButton, {})] }) })));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+export const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, "data-slot": "select-label", className: cn("px-1.5 py-1 text-xs text-muted-foreground", className), ...props })));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+export const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, "data-slot": "select-item", className: cn("relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { "aria-hidden": "true", className: "pointer-events-none" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] })));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+export const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Separator, { ref: ref, "data-slot": "select-separator", className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className), ...props })));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;

package/dist/components/tabs.d.ts

@@ -0,0 +1,6 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+export declare function Tabs(props: React.ComponentProps<typeof TabsPrimitive.Root>): React.JSX.Element;
+export declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/tabs.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+export function Tabs(props) {
+    return _jsx(TabsPrimitive.Root, { "data-slot": "tabs", ...props });
+}
+export const TabsList = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.List, { ref: ref, "data-slot": "tabs-list", className: cn("inline-flex h-9 items-center gap-1 rounded-lg bg-muted p-1 text-muted-foreground", className), ...props })));
+TabsList.displayName = "TabsList";
+export const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, "data-slot": "tabs-trigger", className: cn("inline-flex h-7 items-center justify-center whitespace-nowrap rounded-md border border-transparent px-3 text-sm font-medium transition-all outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-border data-[state=active]:bg-background data-[state=active]:text-foreground", className), ...props })));
+TabsTrigger.displayName = "TabsTrigger";
+export const TabsContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, "data-slot": "tabs-content", className: cn("mt-4 outline-none", className), ...props })));
+TabsContent.displayName = "TabsContent";

package/dist/components/textarea.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;

package/dist/components/textarea.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+export function Textarea({ className, ...props }) {
+    return (_jsx("textarea", { "data-slot": "textarea", className: cn("flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className), ...props }));
+}

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export * from "./components/alert-dialog.js";
+export * from "./components/button.js";
+export * from "./components/dialog.js";
+export * from "./components/dropdown-menu.js";
+export * from "./components/input.js";
+export * from "./components/interaction-question.js";
+export * from "./components/native-select.js";
+export * from "./components/scroll-area.js";
+export * from "./components/select.js";
+export * from "./components/tabs.js";
+export * from "./components/textarea.js";
+export * from "./lib/utils.js";

package/dist/index.js

@@ -0,0 +1,12 @@
+export * from "./components/alert-dialog.js";
+export * from "./components/button.js";
+export * from "./components/dialog.js";
+export * from "./components/dropdown-menu.js";
+export * from "./components/input.js";
+export * from "./components/interaction-question.js";
+export * from "./components/native-select.js";
+export * from "./components/scroll-area.js";
+export * from "./components/select.js";
+export * from "./components/tabs.js";
+export * from "./components/textarea.js";
+export * from "./lib/utils.js";

package/dist/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}