@pallamart/pm-core-components 1.0.0

package/dist/ui/alert.js

@@ -0,0 +1,25 @@
+import { createElement } from '../create-element.js';
+import { cn } from '../utils/cn.js';
+const alertVariants = {
+    default: 'border-border bg-card text-card-foreground',
+    destructive: 'border-destructive/40 bg-destructive-muted text-destructive',
+    success: 'border-success/40 bg-success-muted text-success-foreground',
+};
+export function Alert({ className, variant = 'default', ...props }) {
+    return createElement('div', {
+        ...props,
+        className: cn('relative w-full rounded-lg border px-4 py-3 text-body-3', alertVariants[variant], className),
+    });
+}
+export function AlertTitle({ className, ...props }) {
+    return createElement('h5', {
+        ...props,
+        className: cn('mb-1 leading-none tracking-tight', className),
+    });
+}
+export function AlertDescription({ className, ...props }) {
+    return createElement('div', {
+        ...props,
+        className: cn('text-body-3 leading-6 opacity-90', className),
+    });
+}

package/dist/ui/app-header.d.ts

@@ -0,0 +1,21 @@
+interface AppHeaderNavItem {
+    active?: boolean;
+    href: string;
+    id: string;
+    label: string;
+}
+interface AppHeaderProps {
+    appTitle: string;
+    linkComponent?: any;
+    logoAlt?: string;
+    logoSrc: string;
+    navLinkComponent?: any;
+    logoutHref: string;
+    navItems?: AppHeaderNavItem[];
+    user: {
+        avatarUrl?: string | null;
+        displayName: string;
+    } | null;
+}
+export declare function AppHeader({ appTitle, linkComponent, logoAlt, logoSrc, navLinkComponent, logoutHref, navItems, user, }: AppHeaderProps): any;
+export {};

package/dist/ui/app-header.js

@@ -0,0 +1,50 @@
+import { createElement } from '../create-element.js';
+import { cn } from '../utils/cn.js';
+import { Avatar, AvatarFallback, AvatarImage } from './avatar.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from './dropdown-menu.js';
+import { TabsList, TabsTrigger } from './tabs.js';
+export function AppHeader({ appTitle, linkComponent, logoAlt = 'Pallamart logo', logoSrc, navLinkComponent, logoutHref, navItems = [], user, }) {
+    const LinkComponent = linkComponent ?? 'a';
+    const linkDestinationProp = LinkComponent === 'a' ? 'href' : 'to';
+    const NavLinkComponent = navLinkComponent ?? LinkComponent;
+    const navLinkDestinationProp = NavLinkComponent === 'a' ? 'href' : 'to';
+    return createElement('header', { className: 'sticky top-0 z-40 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80' }, createElement('div', {
+        className: 'mx-auto flex w-full max-w-screen-2xl flex-col gap-3 px-4 py-3 sm:px-6',
+    }, createElement('div', { className: 'flex min-w-0 items-center justify-between gap-3' }, createElement('div', { className: 'flex min-w-0 flex-1 items-center gap-2.5' }, createElement('div', {
+        className: 'flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-border bg-muted',
+    }, createElement('img', {
+        alt: logoAlt,
+        className: 'h-6 w-6 object-contain',
+        src: logoSrc,
+    })), createElement('h1', { className: 'min-w-0 truncate text-body-2 text-foreground' }, appTitle)), user
+        ? createElement(DropdownMenu, null, createElement(DropdownMenuTrigger, {
+            className: 'inline-flex min-h-10 max-w-[min(14rem,56vw)] items-center justify-center gap-2 whitespace-nowrap rounded-lg border border-input bg-background px-2.5 py-1.5 pr-3.5 text-body-3 leading-none shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+        }, createElement(Avatar, {
+            'aria-label': user.displayName,
+            className: 'h-8 w-8',
+            title: user.displayName,
+        }, user.avatarUrl
+            ? createElement(AvatarImage, {
+                alt: user.displayName,
+                src: user.avatarUrl,
+            })
+            : createElement(AvatarFallback, null, user.displayName.slice(0, 1).toUpperCase())), createElement('p', { className: 'min-w-0 truncate text-body-3 text-foreground' }, user.displayName)), createElement(DropdownMenuContent, { align: 'end', className: 'min-w-52' }, createElement(DropdownMenuLabel, { className: 'space-y-1 px-3 py-2' }, createElement('p', { className: 'leading-none' }, 'Account'), createElement('p', {
+            className: 'mt-0.5 max-w-48 truncate text-body-3 text-muted-foreground',
+        }, user.displayName)), createElement(DropdownMenuSeparator, null), createElement(DropdownMenuItem, {
+            as: LinkComponent,
+            className: 'px-3',
+            [linkDestinationProp]: logoutHref,
+        }, 'Sign out')))
+        : null), navItems.length
+        ? createElement('nav', { 'aria-label': 'Primary' }, createElement(TabsList, { className: 'max-w-full justify-start overflow-x-auto rounded-lg' }, ...navItems.map((item) => createElement(NavLinkComponent, {
+            'aria-current': item.active ? 'page' : undefined,
+            className: 'shrink-0',
+            end: NavLinkComponent === 'a' ? undefined : true,
+            key: item.id,
+            [navLinkDestinationProp]: item.href,
+        }, createElement(TabsTrigger, {
+            active: item.active,
+            className: cn(item.active ? 'pointer-events-none' : undefined),
+        }, item.label)))))
+        : null));
+}

package/dist/ui/avatar.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+export declare function Avatar({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): any;
+export declare function AvatarImage({ className, ...props }: React.ImgHTMLAttributes<HTMLImageElement>): any;
+export declare function AvatarFallback({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): any;

package/dist/ui/avatar.js

@@ -0,0 +1,20 @@
+import { createElement } from '../create-element.js';
+import { cn } from '../utils/cn.js';
+export function Avatar({ className, ...props }) {
+    return createElement('span', {
+        ...props,
+        className: cn('relative flex h-8 w-8 shrink-0 overflow-hidden rounded-full', className),
+    });
+}
+export function AvatarImage({ className, ...props }) {
+    return createElement('img', {
+        ...props,
+        className: cn('aspect-square h-full w-full object-cover', className),
+    });
+}
+export function AvatarFallback({ className, ...props }) {
+    return createElement('span', {
+        ...props,
+        className: cn('flex h-full w-full items-center justify-center rounded-full bg-muted text-body-3 text-muted-foreground', className),
+    });
+}

package/dist/ui/badge.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+type BadgeVariant = 'default' | 'outline' | 'secondary';
+export declare function Badge({ className, variant, ...props }: Record<string, unknown> & {
+    className?: string;
+    variant?: BadgeVariant;
+} & React.HTMLAttributes<HTMLSpanElement>): any;
+export {};

package/dist/ui/badge.js

@@ -0,0 +1,13 @@
+import { createElement } from '../create-element.js';
+import { cn } from '../utils/cn.js';
+const badgeVariants = {
+    default: 'border-transparent bg-primary text-primary-foreground',
+    outline: 'text-foreground',
+    secondary: 'border-transparent bg-secondary text-secondary-foreground',
+};
+export function Badge({ className, variant = 'secondary', ...props }) {
+    return createElement('span', {
+        ...props,
+        className: cn('inline-flex h-6 items-center rounded-md border px-2.5 text-xs leading-none transition-colors', badgeVariants[variant], className),
+    });
+}

package/dist/ui/breadcrumb.d.ts

@@ -0,0 +1,5 @@
+import type React from 'react';
+export declare function Breadcrumb({ className, ...props }: React.HTMLAttributes<HTMLElement>): any;
+export declare function BreadcrumbList({ className, ...props }: React.OlHTMLAttributes<HTMLOListElement>): any;
+export declare function BreadcrumbItem({ className, ...props }: React.LiHTMLAttributes<HTMLLIElement>): any;
+export declare function BreadcrumbSeparator({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): any;

package/dist/ui/breadcrumb.js

@@ -0,0 +1,29 @@
+import { createElement } from '../create-element.js';
+import { cn } from '../utils/cn.js';
+export function Breadcrumb({ className, ...props }) {
+    return createElement('nav', {
+        ...props,
+        'aria-label': props['aria-label'] ?? 'Breadcrumb',
+        className: cn('flex', className),
+    });
+}
+export function BreadcrumbList({ className, ...props }) {
+    return createElement('ol', {
+        ...props,
+        className: cn('flex flex-wrap items-center gap-1.5 text-body-3 text-muted-foreground', className),
+    });
+}
+export function BreadcrumbItem({ className, ...props }) {
+    return createElement('li', {
+        ...props,
+        className: cn('inline-flex items-center gap-1.5', className),
+    });
+}
+export function BreadcrumbSeparator({ className, ...props }) {
+    return createElement('span', {
+        ...props,
+        'aria-hidden': true,
+        className: cn('text-muted-foreground/70', className),
+        children: props.children ?? '/',
+    });
+}

package/dist/ui/button.d.ts

@@ -0,0 +1,15 @@
+import type React from 'react';
+type ButtonVariant = 'default' | 'destructive' | 'ghost' | 'link' | 'outline' | 'secondary';
+type ButtonSize = 'default' | 'icon' | 'lg' | 'sm';
+export declare function buttonVariants({ className, size, variant, }?: {
+    className?: string;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+}): string;
+export declare function Button({ as, className, size, variant, ...props }: Record<string, unknown> & {
+    as?: any;
+    className?: string;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>): any;
+export {};

package/dist/ui/button.js

@@ -0,0 +1,26 @@
+import { createElement } from '../create-element.js';
+import { cn } from '../utils/cn.js';
+const buttonBase = 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-body-3 leading-none transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50';
+const buttonVariantsByName = {
+    default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+    destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+    ghost: 'hover:bg-accent hover:text-accent-foreground',
+    link: 'text-primary underline-offset-4 hover:underline',
+    outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+    secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+};
+const buttonSizesByName = {
+    default: 'h-10 px-4 py-2',
+    icon: 'h-9 w-9',
+    lg: 'h-11 rounded-md px-8',
+    sm: 'h-8 rounded-md px-3 text-xs',
+};
+export function buttonVariants({ className, size = 'default', variant = 'default', } = {}) {
+    return cn(buttonBase, buttonVariantsByName[variant], buttonSizesByName[size], className);
+}
+export function Button({ as, className, size, variant, ...props }) {
+    return createElement(as ?? 'button', {
+        ...props,
+        className: buttonVariants({ className, size, variant }),
+    });
+}

package/dist/ui/card.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+export declare function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): any;
+export declare function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): any;
+export declare function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): any;
+export declare function CardDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): any;
+export declare function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): any;
+export declare function CardFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): any;

package/dist/ui/card.js

@@ -0,0 +1,38 @@
+import { createElement } from '../create-element.js';
+import { cn } from '../utils/cn.js';
+export function Card({ className, ...props }) {
+    return createElement('div', {
+        ...props,
+        className: cn('rounded-lg border bg-card text-card-foreground shadow-sm', className),
+    });
+}
+export function CardHeader({ className, ...props }) {
+    return createElement('div', {
+        ...props,
+        className: cn('flex flex-col gap-1.5 p-5 sm:p-6', className),
+    });
+}
+export function CardTitle({ className, ...props }) {
+    return createElement('h3', {
+        ...props,
+        className: cn('text-header-4 leading-6 tracking-tight', className),
+    });
+}
+export function CardDescription({ className, ...props }) {
+    return createElement('p', {
+        ...props,
+        className: cn('text-body-3 text-muted-foreground', className),
+    });
+}
+export function CardContent({ className, ...props }) {
+    return createElement('div', {
+        ...props,
+        className: cn('p-5 sm:p-6', className),
+    });
+}
+export function CardFooter({ className, ...props }) {
+    return createElement('div', {
+        ...props,
+        className: cn('flex items-center p-5 sm:p-6', className),
+    });
+}

package/dist/ui/dialog.d.ts

@@ -0,0 +1,16 @@
+import type React from 'react';
+interface DialogProps {
+    children: React.ReactNode;
+    onOpenChange?: (open: boolean) => void;
+    open: boolean;
+}
+export declare function Dialog({ children, onOpenChange, open, }: DialogProps): any;
+export declare function DialogOverlay({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): any;
+export declare function DialogContent({ children, className, side, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    side?: 'center' | 'right';
+}): any;
+export declare function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): any;
+export declare function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): any;
+export declare function DialogTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): any;
+export declare function DialogDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): any;
+export {};

package/dist/ui/dialog.js

@@ -0,0 +1,52 @@
+import { createElement } from '../create-element.js';
+import { cn } from '../utils/cn.js';
+export function Dialog({ children, onOpenChange, open, }) {
+    if (!open) {
+        return null;
+    }
+    return createElement('div', { className: 'fixed inset-0 z-50' }, createElement(DialogOverlay, { onClick: () => onOpenChange?.(false) }), children);
+}
+export function DialogOverlay({ className, ...props }) {
+    return createElement('div', {
+        ...props,
+        className: cn('fixed inset-0 bg-overlay/80 backdrop-blur-sm animate-fade-in', className),
+    });
+}
+export function DialogContent({ children, className, side = 'center', ...props }) {
+    return createElement('div', {
+        'aria-modal': 'true',
+        className: side === 'right'
+            ? 'fixed inset-y-0 right-0 flex w-full justify-end sm:max-w-none'
+            : 'fixed inset-0 flex items-center justify-center p-4',
+        role: 'dialog',
+    }, createElement('div', {
+        ...props,
+        className: cn(side === 'right'
+            ? 'h-full w-full overflow-auto border-l border-border bg-card text-card-foreground shadow-lg animate-slide-fade-in sm:max-w-2xl'
+            : 'max-h-[90vh] w-full overflow-auto rounded-lg border border-border bg-card text-card-foreground shadow-lg animate-slide-fade-in sm:max-w-3xl', className),
+    }, children));
+}
+export function DialogHeader({ className, ...props }) {
+    return createElement('div', {
+        ...props,
+        className: cn('flex flex-col gap-1.5 text-left', className),
+    });
+}
+export function DialogFooter({ className, ...props }) {
+    return createElement('div', {
+        ...props,
+        className: cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className),
+    });
+}
+export function DialogTitle({ className, ...props }) {
+    return createElement('h2', {
+        ...props,
+        className: cn('text-header-4 leading-none tracking-tight', className),
+    });
+}
+export function DialogDescription({ className, ...props }) {
+    return createElement('p', {
+        ...props,
+        className: cn('text-body-3 text-muted-foreground', className),
+    });
+}

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

@@ -0,0 +1,12 @@
+import type React from 'react';
+export declare function DropdownMenu({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): any;
+export declare function DropdownMenuTrigger({ className, ...props }: React.HTMLAttributes<HTMLElement>): any;
+export declare function DropdownMenuContent({ align, className, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    align?: 'end' | 'start';
+}): any;
+export declare function DropdownMenuLabel({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): any;
+export declare function DropdownMenuSeparator({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): any;
+export declare function DropdownMenuItem({ as, className, ...props }: Record<string, unknown> & {
+    as?: any;
+    className?: string;
+} & React.HTMLAttributes<HTMLElement>): any;

package/dist/ui/dropdown-menu.js

@@ -0,0 +1,43 @@
+import { createElement } from '../create-element.js';
+import { cn } from '../utils/cn.js';
+export function DropdownMenu({ className, ...props }) {
+    return createElement('div', {
+        ...props,
+        className: cn('group relative inline-block text-left', className),
+    });
+}
+export function DropdownMenuTrigger({ className, ...props }) {
+    return createElement('button', {
+        ...props,
+        type: props.type ?? 'button',
+        className: cn('flex cursor-pointer items-center', className),
+    });
+}
+export function DropdownMenuContent({ align = 'end', className, ...props }) {
+    return createElement('div', {
+        ...props,
+        className: cn('absolute top-full z-50 hidden min-w-56 pt-2 text-popover-foreground group-hover:block group-focus-within:block', align === 'end' ? 'right-0' : 'left-0', className),
+        children: createElement('div', {
+            className: 'overflow-hidden rounded-md border bg-popover p-1 shadow-lg',
+            children: props.children,
+        }),
+    });
+}
+export function DropdownMenuLabel({ className, ...props }) {
+    return createElement('div', {
+        ...props,
+        className: cn('px-2 py-1.5 text-body-3 leading-none', className),
+    });
+}
+export function DropdownMenuSeparator({ className, ...props }) {
+    return createElement('div', {
+        ...props,
+        className: cn('-mx-1 my-1 h-px bg-muted', className),
+    });
+}
+export function DropdownMenuItem({ as, className, ...props }) {
+    return createElement(as ?? 'div', {
+        ...props,
+        className: cn('relative flex min-h-8 w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-body-3 outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground', className),
+    });
+}

package/dist/ui/empty.d.ts

@@ -0,0 +1,5 @@
+import type React from 'react';
+export declare function Empty({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): any;
+export declare function EmptyTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): any;
+export declare function EmptyDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): any;
+export declare function EmptyPanel({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): any;

package/dist/ui/empty.js

@@ -0,0 +1,26 @@
+import { createElement } from '../create-element.js';
+import { cn } from '../utils/cn.js';
+export function Empty({ className, ...props }) {
+    return createElement('div', {
+        ...props,
+        className: cn('flex min-h-40 flex-col items-center justify-center rounded-lg border border-dashed px-6 py-10 text-center', className),
+    });
+}
+export function EmptyTitle({ className, ...props }) {
+    return createElement('h3', {
+        ...props,
+        className: cn('text-body-3 text-foreground', className),
+    });
+}
+export function EmptyDescription({ className, ...props }) {
+    return createElement('p', {
+        ...props,
+        className: cn('mt-2 text-body-3 text-muted-foreground', className),
+    });
+}
+export function EmptyPanel({ className, ...props }) {
+    return createElement('div', {
+        ...props,
+        className: cn('rounded-lg border border-dashed border-border bg-muted/40 px-4 py-5 text-body-3 text-muted-foreground', className),
+    });
+}

package/dist/ui/file-picker.d.ts

@@ -0,0 +1,20 @@
+import type React from 'react';
+interface FilePickerProps {
+    accept?: string;
+    disabled?: boolean;
+    error?: string;
+    inputId: string;
+    inputRef?: React.Ref<HTMLInputElement>;
+    label?: string;
+    name?: string;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    onClear?: () => void;
+    onClickPicker?: () => void;
+    onDrop?: React.DragEventHandler<HTMLDivElement>;
+    onDragOver?: React.DragEventHandler<HTMLDivElement>;
+    onPickerClick?: React.MouseEventHandler<HTMLLabelElement>;
+    previewName?: string | null;
+    previewUrl?: string | null;
+}
+export declare function FilePicker({ accept, disabled, error, inputId, inputRef, label, name, onChange, onClear, onClickPicker, onDragOver, onDrop, onPickerClick, previewName, previewUrl, }: FilePickerProps): any;
+export {};

package/dist/ui/file-picker.js

@@ -0,0 +1,49 @@
+import { createElement } from '../create-element.js';
+import { Button } from './button.js';
+import { Input, Label } from './form.js';
+export function FilePicker({ accept = 'image/*', disabled, error, inputId, inputRef, label = 'Photo', name, onChange, onClear, onClickPicker, onDragOver, onDrop, onPickerClick, previewName, previewUrl, }) {
+    return createElement('div', { className: 'flex w-full flex-col space-y-2' }, label ? createElement(Label, null, label) : null, createElement('div', {
+        className: 'relative min-h-[12rem] w-full overflow-hidden rounded-lg border-2 border-dashed border-border bg-card transition-colors',
+        onDragOver,
+        onDrop,
+    }, previewName && previewUrl
+        ? createElement('div', { className: 'flex h-full min-h-[12rem] flex-col' }, createElement('div', { className: 'flex flex-1 items-center justify-center bg-card/80 p-4' }, createElement('img', {
+            alt: '',
+            className: 'max-h-48 w-auto rounded-lg border border-border object-contain',
+            src: previewUrl,
+        })), createElement('div', {
+            className: 'flex items-center justify-between gap-3 border-t border-border bg-card px-4 py-3',
+        }, createElement('span', { className: 'min-w-0 flex-1 truncate text-body-3 text-foreground' }, previewName), createElement('div', { className: 'flex shrink-0 items-center gap-2' }, createElement(Button, {
+            'aria-label': 'Change file',
+            disabled,
+            onClick: onClickPicker,
+            size: 'sm',
+            type: 'button',
+            variant: 'outline',
+        }, 'Change'), createElement(Button, {
+            'aria-label': 'Remove file',
+            className: 'h-auto px-0 py-0 text-muted-foreground',
+            disabled,
+            onClick: onClear,
+            type: 'button',
+            variant: 'link',
+        }, 'Remove'))))
+        : createElement(Label, {
+            'aria-disabled': disabled,
+            className: 'absolute inset-0 flex cursor-pointer flex-col items-center justify-center gap-2 p-6 transition-colors hover:bg-primary/5 hover:border-primary/40',
+            htmlFor: inputId,
+            onClick: onPickerClick,
+            style: { cursor: disabled ? 'not-allowed' : 'pointer' },
+        }, createElement('div', { className: 'flex flex-col items-center gap-1 text-center' }, createElement('span', { className: 'text-body-3 text-foreground' }, 'Drag & drop here or click to browse'), createElement('span', { className: 'text-body-3 text-muted-foreground' }, accept === 'image/*' ? 'Images only' : accept))), createElement(Input, {
+        'aria-disabled': disabled,
+        'aria-label': label,
+        accept,
+        className: 'sr-only',
+        disabled,
+        id: inputId,
+        name,
+        onChange,
+        ref: inputRef,
+        type: 'file',
+    })), error ? createElement('p', { className: 'text-body-3 text-destructive' }, error) : null);
+}

package/dist/ui/form.d.ts

@@ -0,0 +1,15 @@
+import type React from 'react';
+export declare function Field({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): any;
+export declare function Label({ className, ...props }: React.LabelHTMLAttributes<HTMLLabelElement>): any;
+export declare function Input({ className, ...props }: React.InputHTMLAttributes<HTMLInputElement> & {
+    ref?: React.Ref<HTMLInputElement>;
+}): any;
+export declare function DatePicker({ className, ...props }: React.InputHTMLAttributes<HTMLInputElement> & {
+    ref?: React.Ref<HTMLInputElement>;
+}): any;
+export declare function Textarea({ className, ...props }: React.TextareaHTMLAttributes<HTMLTextAreaElement>): any;
+export declare function Select({ className, ...props }: React.SelectHTMLAttributes<HTMLSelectElement>): any;
+export declare function Checkbox({ className, ...props }: React.InputHTMLAttributes<HTMLInputElement>): any;
+export declare function Switch({ className, ...props }: React.InputHTMLAttributes<HTMLInputElement>): any;
+export declare function RadioGroup({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): any;
+export declare function Radio({ className, ...props }: React.InputHTMLAttributes<HTMLInputElement>): any;

package/dist/ui/form.js

@@ -0,0 +1,67 @@
+import { createElement } from '../create-element.js';
+import { cn } from '../utils/cn.js';
+export function Field({ className, ...props }) {
+    return createElement('div', {
+        ...props,
+        className: cn('grid gap-2', className),
+    });
+}
+export function Label({ className, ...props }) {
+    return createElement('label', {
+        ...props,
+        className: cn('text-body-3 leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70', className),
+    });
+}
+export function Input({ className, ...props }) {
+    return createElement('input', {
+        ...props,
+        className: cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-body-3 shadow-sm transition-colors file:border-0 file:bg-transparent file:text-body-3 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', className),
+    });
+}
+export function DatePicker({ className, ...props }) {
+    return createElement(Input, {
+        ...props,
+        type: 'date',
+        className,
+    });
+}
+export function Textarea({ className, ...props }) {
+    return createElement('textarea', {
+        ...props,
+        className: cn('flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-body-3 shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', className),
+    });
+}
+export function Select({ className, ...props }) {
+    return createElement('select', {
+        ...props,
+        className: cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-body-3 shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', className),
+    });
+}
+export function Checkbox({ className, ...props }) {
+    return createElement('input', {
+        ...props,
+        type: 'checkbox',
+        className: cn('h-4 w-4 shrink-0 rounded-sm border border-input bg-background text-primary shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', className),
+    });
+}
+export function Switch({ className, ...props }) {
+    return createElement('input', {
+        ...props,
+        type: 'checkbox',
+        className: cn('h-5 w-9 shrink-0 appearance-none rounded-full border border-input bg-input shadow-sm transition-colors checked:bg-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 before:block before:h-4 before:w-4 before:translate-x-0 before:rounded-full before:bg-background before:shadow before:transition-transform checked:before:translate-x-4', className),
+    });
+}
+export function RadioGroup({ className, ...props }) {
+    return createElement('div', {
+        ...props,
+        role: props.role ?? 'radiogroup',
+        className: cn('grid gap-2', className),
+    });
+}
+export function Radio({ className, ...props }) {
+    return createElement('input', {
+        ...props,
+        type: 'radio',
+        className: cn('h-4 w-4 shrink-0 rounded-full border border-input bg-background text-primary shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', className),
+    });
+}

package/dist/ui/icon-button.d.ts

@@ -0,0 +1,11 @@
+import type React from 'react';
+import { type PmIconKey } from '@pallamart/pm-icons';
+type IconButtonVariant = 'default' | 'destructive' | 'ghost' | 'outline' | 'secondary';
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    iconKey: PmIconKey | string;
+    iconLabel: string;
+    iconSize?: number | string;
+    variant?: IconButtonVariant;
+}
+export declare function IconButton({ className, iconKey, iconLabel, iconSize, title, type, variant, ...props }: IconButtonProps): any;
+export {};

package/dist/ui/icon-button.js

@@ -0,0 +1,18 @@
+import { PmIcon } from '@pallamart/pm-icons';
+import { createElement } from '../create-element.js';
+import { cn } from '../utils/cn.js';
+import { buttonVariants } from './button.js';
+const IconComponent = PmIcon;
+export function IconButton({ className, iconKey, iconLabel, iconSize = 16, title, type = 'button', variant = 'ghost', ...props }) {
+    return createElement('button', {
+        ...props,
+        'aria-label': iconLabel,
+        className: cn(buttonVariants({ size: 'icon', variant }), className),
+        title: title ?? iconLabel,
+        type,
+    }, createElement(IconComponent, {
+        'aria-hidden': true,
+        iconKey,
+        size: iconSize,
+    }));
+}

package/dist/ui/misc.d.ts

@@ -0,0 +1,10 @@
+import type React from 'react';
+export declare function AspectRatio({ className, ratio, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    ratio?: number;
+}): any;
+export declare function ButtonGroup({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): any;
+export declare function StatusPanel({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): any;
+export declare function Kbd({ className, ...props }: React.HTMLAttributes<HTMLElement>): any;
+export declare function Pagination({ className, ...props }: React.HTMLAttributes<HTMLElement>): any;
+export declare function PaginationContent({ className, ...props }: React.HTMLAttributes<HTMLUListElement>): any;
+export declare function PaginationItem({ className, ...props }: React.HTMLAttributes<HTMLLIElement>): any;