@dynamicnorway/react 1.0.0

package/README.md

@@ -0,0 +1,50 @@
+# @dynamicnorway/react
+
+React component library for Dynamic.
+
+## Requirements
+
+- React 18 or 19
+- [Tailwind CSS](https://tailwindcss.com/) v4
+- [`@dynamicnorway/tokens`](../tokens) for design tokens
+
+## Install
+
+```bash
+pnpm add @dynamicnorway/react @dynamicnorway/tokens tailwindcss react react-dom
+```
+
+## Setup
+
+Import tokens in your global CSS:
+
+```css
+@import "@dynamicnorway/tokens";
+```
+
+For Next.js, add to `transpilePackages`:
+
+```js
+transpilePackages: ["@dynamicnorway/react"],
+```
+
+## Usage
+
+```tsx
+import { Button, Card, Dialog } from "@dynamicnorway/react";
+```
+
+## i18n
+
+Components that previously used app i18n accept labels via props (`SearchBar`, `SearchInput`, `Breadcrumbs`, `FormSlideOver`).
+
+## Development
+
+From the monorepo root:
+
+```bash
+pnpm install
+pnpm dev
+```
+
+Open [http://localhost:6006](http://localhost:6006) to browse components in Storybook. Run tests with `pnpm --filter @dynamicnorway/react test`.

package/dist/index.d.ts

@@ -0,0 +1,432 @@
+import { ClassValue } from 'clsx';
+import * as React from 'react';
+import React__default from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+type ButtonVariant = "primary" | "secondary" | "outline" | "danger" | "destructive" | "ghost";
+type ButtonSize = "sm" | "md" | "lg";
+interface ButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+    fullWidth?: boolean;
+    ref?: React__default.Ref<HTMLButtonElement>;
+}
+declare const Button: React__default.FC<ButtonProps>;
+
+interface FormFieldProps {
+    label?: string;
+    required?: boolean;
+    error?: string;
+    helperText?: string;
+    className?: string;
+    children: React__default.ReactNode;
+    htmlFor?: string;
+}
+declare function FormField({ label, required, error, helperText, className, children, htmlFor, }: FormFieldProps): React__default.JSX.Element;
+
+interface InputProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
+    hasError?: boolean;
+    ref?: React__default.Ref<HTMLInputElement>;
+}
+declare const Input: React__default.FC<InputProps>;
+
+interface TextareaProps extends React__default.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    hasError?: boolean;
+    autoResize?: boolean;
+    ref?: React__default.Ref<HTMLTextAreaElement>;
+}
+declare const Textarea: React__default.FC<TextareaProps>;
+
+interface SelectProps extends React__default.SelectHTMLAttributes<HTMLSelectElement> {
+    hasError?: boolean;
+    placeholder?: string;
+    options?: Array<{
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }>;
+    ref?: React__default.Ref<HTMLSelectElement>;
+}
+declare const Select: React__default.FC<SelectProps>;
+
+interface CheckboxProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type"> {
+    label?: string;
+    ref?: React__default.Ref<HTMLInputElement>;
+}
+declare const Checkbox: React__default.FC<CheckboxProps>;
+
+declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+interface DialogOverlayProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> {
+    ref?: React.Ref<React.ElementRef<typeof DialogPrimitive.Overlay>>;
+}
+declare const DialogOverlay: React.FC<DialogOverlayProps>;
+interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    ref?: React.Ref<React.ElementRef<typeof DialogPrimitive.Content>>;
+    closeLabel?: string;
+}
+declare const DialogContent: React.FC<DialogContentProps>;
+declare const DialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const DialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+interface DialogTitleProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> {
+    ref?: React.Ref<React.ElementRef<typeof DialogPrimitive.Title>>;
+}
+declare const DialogTitle: React.FC<DialogTitleProps>;
+interface DialogDescriptionProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> {
+    ref?: React.Ref<React.ElementRef<typeof DialogPrimitive.Description>>;
+}
+declare const DialogDescription: React.FC<DialogDescriptionProps>;
+interface ConfirmDialogProps {
+    open: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    title: string;
+    message: string;
+    confirmText?: string;
+    cancelText?: string;
+    variant?: "danger" | "default";
+    loading?: boolean;
+    loadingText?: string;
+}
+declare const ConfirmDialog: React.FC<ConfirmDialogProps>;
+
+interface CardProps {
+    children: React__default.ReactNode;
+    variant?: "default" | "interactive";
+    className?: string;
+    onClick?: () => void;
+}
+declare const Card: React__default.ForwardRefExoticComponent<CardProps & React__default.RefAttributes<HTMLButtonElement | HTMLDivElement>>;
+interface CardHeaderProps {
+    children: React__default.ReactNode;
+    className?: string;
+}
+declare const CardHeader: React__default.FC<CardHeaderProps>;
+interface CardBodyProps {
+    children: React__default.ReactNode;
+    className?: string;
+}
+declare const CardBody: React__default.FC<CardBodyProps>;
+interface CardFooterProps {
+    children: React__default.ReactNode;
+    className?: string;
+}
+declare const CardFooter: React__default.FC<CardFooterProps>;
+
+interface LoadingSpinnerProps {
+    size?: "sm" | "md" | "lg";
+    className?: string;
+}
+declare const LoadingSpinner: React__default.FC<LoadingSpinnerProps>;
+declare const LoadingScreen: React__default.FC<{
+    message?: string;
+}>;
+
+interface BadgeProps {
+    children: React__default.ReactNode;
+    variant?: "default" | "success" | "warning" | "error" | "info";
+    size?: "sm" | "md";
+    className?: string;
+}
+declare const Badge: React__default.FC<BadgeProps>;
+
+interface EmptyStateProps {
+    icon?: React__default.ReactNode;
+    title: string;
+    description?: string;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    className?: string;
+}
+declare const EmptyState: React__default.FC<EmptyStateProps>;
+
+interface SlideOverProps {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    description?: string;
+    children: React__default.ReactNode;
+    footer?: React__default.ReactNode;
+    size?: "sm" | "md" | "lg" | "xl" | "full";
+    closeLabel?: string;
+}
+declare function SlideOver({ open, onClose, title, description, children, footer, size, closeLabel, }: SlideOverProps): React__default.JSX.Element;
+interface FormSlideOverProps extends Omit<SlideOverProps, "footer" | "children"> {
+    children: React__default.ReactNode;
+    submitText?: string;
+    cancelText?: string;
+    deleteText?: string;
+    savingText?: string;
+    deletingText?: string;
+    unsavedChangesConfirm?: string;
+    onSubmit: () => void;
+    onDelete?: () => void;
+    isSubmitting?: boolean;
+    isDeleting?: boolean;
+    hasChanges?: boolean;
+}
+declare function FormSlideOver({ open, onClose, title, description, children, submitText, cancelText, deleteText, savingText, deletingText, unsavedChangesConfirm, onSubmit, onDelete, isSubmitting, isDeleting, hasChanges, size, closeLabel, }: FormSlideOverProps): React__default.JSX.Element;
+
+interface EntityFormProps {
+    isEdit?: boolean;
+    isSaving?: boolean;
+    error?: string;
+    onSave: () => void;
+    onCancel: () => void;
+    onDelete?: () => void;
+    saveLabel?: string;
+    cancelLabel?: string;
+    deleteLabel?: string;
+    savingLabel?: string;
+    deleteConfirmMessage?: string;
+    showDelete?: boolean;
+    autoFocus?: boolean;
+    className?: string;
+    children: React__default.ReactNode;
+}
+declare const EntityForm: React__default.FC<EntityFormProps>;
+
+interface SearchInputLabels {
+    placeholder?: string;
+    searchHotkeyHint?: string;
+    openSearch?: string;
+    search?: string;
+    clearSearch?: string;
+}
+interface SearchInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    debounceMs?: number;
+    expandable?: boolean;
+    className?: string;
+    autoFocus?: boolean;
+    size?: "sm" | "md" | "lg";
+    labels?: SearchInputLabels;
+}
+declare function SearchInput({ value, onChange, placeholder, debounceMs, expandable, className, autoFocus, size, labels, }: SearchInputProps): React__default.JSX.Element;
+
+interface SearchBarProps {
+    value: string;
+    onChange: (value: string) => void;
+    onClear?: () => void;
+    placeholder?: string;
+    autoFocus?: boolean;
+    className?: string;
+    showShortcutHint?: boolean;
+    clearSearchLabel?: string;
+}
+declare const SearchBar: React__default.FC<SearchBarProps>;
+
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+interface BreadcrumbsProps {
+    items: BreadcrumbItem[];
+    className?: string;
+    ariaLabel?: string;
+    renderLink?: (props: {
+        href: string;
+        children: React__default.ReactNode;
+        className: string;
+    }) => React__default.ReactNode;
+}
+declare const Breadcrumbs: React__default.FC<BreadcrumbsProps>;
+
+interface TableProps {
+    children: React__default.ReactNode;
+    className?: string;
+}
+declare const Table: React__default.FC<TableProps>;
+interface TableHeaderProps {
+    children: React__default.ReactNode;
+    className?: string;
+}
+declare const TableHeader: React__default.FC<TableHeaderProps>;
+interface TableBodyProps {
+    children: React__default.ReactNode;
+    className?: string;
+}
+declare const TableBody: React__default.FC<TableBodyProps>;
+interface TableRowProps extends React__default.HTMLAttributes<HTMLTableRowElement> {
+    children: React__default.ReactNode;
+    className?: string;
+    onClick?: () => void;
+}
+declare const TableRow: React__default.FC<TableRowProps>;
+interface TableHeadProps {
+    children: React__default.ReactNode;
+    className?: string;
+}
+declare const TableHead: React__default.FC<TableHeadProps>;
+interface TableCellProps {
+    children: React__default.ReactNode;
+    className?: string;
+    onClick?: () => void;
+    colSpan?: number;
+}
+declare const TableCell: React__default.FC<TableCellProps>;
+
+interface TabsProps {
+    children: React__default.ReactNode;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    className?: string;
+}
+interface TabsListProps {
+    children: React__default.ReactNode;
+    className?: string;
+}
+interface TabsTriggerProps {
+    value: string;
+    children: React__default.ReactNode;
+    className?: string;
+}
+interface TabsContentProps {
+    value: string;
+    children: React__default.ReactNode;
+    className?: string;
+}
+declare const Tabs: React__default.FC<TabsProps>;
+declare const TabsList: React__default.FC<TabsListProps>;
+declare const TabsTrigger: React__default.FC<TabsTriggerProps>;
+declare const TabsContent: React__default.FC<TabsContentProps>;
+
+interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> {
+    ref?: React.Ref<React.ElementRef<typeof AvatarPrimitive.Root>>;
+}
+declare const Avatar: React.FC<AvatarProps>;
+interface AvatarImageProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {
+    ref?: React.Ref<React.ElementRef<typeof AvatarPrimitive.Image>>;
+}
+declare const AvatarImage: React.FC<AvatarImageProps>;
+interface AvatarFallbackProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {
+    ref?: React.Ref<React.ElementRef<typeof AvatarPrimitive.Fallback>>;
+}
+declare const AvatarFallback: React.FC<AvatarFallbackProps>;
+
+declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+interface DropdownMenuSubTriggerProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> {
+    inset?: boolean;
+    ref?: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>>;
+}
+declare const DropdownMenuSubTrigger: React.FC<DropdownMenuSubTriggerProps>;
+interface DropdownMenuSubContentProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> {
+    ref?: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.SubContent>>;
+}
+declare const DropdownMenuSubContent: React.FC<DropdownMenuSubContentProps>;
+interface DropdownMenuContentProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {
+    ref?: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.Content>>;
+}
+declare const DropdownMenuContent: React.FC<DropdownMenuContentProps>;
+interface DropdownMenuItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {
+    inset?: boolean;
+    ref?: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.Item>>;
+}
+declare const DropdownMenuItem: React.FC<DropdownMenuItemProps>;
+interface DropdownMenuCheckboxItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> {
+    ref?: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>>;
+}
+declare const DropdownMenuCheckboxItem: React.FC<DropdownMenuCheckboxItemProps>;
+interface DropdownMenuRadioItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> {
+    ref?: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>>;
+}
+declare const DropdownMenuRadioItem: React.FC<DropdownMenuRadioItemProps>;
+interface DropdownMenuLabelProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> {
+    inset?: boolean;
+    ref?: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.Label>>;
+}
+declare const DropdownMenuLabel: React.FC<DropdownMenuLabelProps>;
+interface DropdownMenuSeparatorProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> {
+    ref?: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.Separator>>;
+}
+declare const DropdownMenuSeparator: React.FC<DropdownMenuSeparatorProps>;
+declare const DropdownMenuShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+    displayName: string;
+};
+
+interface CollapsibleProps {
+    /** Whether the section is initially open */
+    defaultOpen?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Trigger element (clickable header) */
+    trigger: React__default.ReactNode;
+    /** Content to show when expanded */
+    children: React__default.ReactNode;
+    /** Additional class names */
+    className?: string;
+    /** Whether to persist state to localStorage */
+    storageKey?: string;
+    /** Disable the collapsible functionality */
+    disabled?: boolean;
+}
+declare function Collapsible({ defaultOpen, open: controlledOpen, onOpenChange, trigger, children, className, storageKey, disabled, }: CollapsibleProps): React__default.JSX.Element;
+interface CollapsibleTriggerProps {
+    /** Title text */
+    title: string;
+    /** Subtitle/description text */
+    subtitle?: string;
+    /** Whether the section is open */
+    isOpen: boolean;
+    /** Additional class names */
+    className?: string;
+    /** Icon to show (optional, defaults to chevron) */
+    icon?: React__default.ReactNode;
+}
+declare function CollapsibleTrigger({ title, subtitle, isOpen, className, icon, }: CollapsibleTriggerProps): React__default.JSX.Element;
+interface DismissibleBannerProps {
+    /** Unique key for localStorage persistence */
+    storageKey: string;
+    /** Banner content */
+    children: React__default.ReactNode;
+    /** Dismiss button text */
+    dismissText?: string;
+    /** Callback when dismissed */
+    onDismiss?: () => void;
+    /** Additional class names */
+    className?: string;
+    /** Variant for styling */
+    variant?: "info" | "success" | "warning" | "neutral" | "hero";
+}
+declare function DismissibleBanner({ storageKey, children, dismissText, onDismiss, className, variant, }: DismissibleBannerProps): React__default.JSX.Element | null;
+interface UseCollapsibleOptions {
+    /** Initial open state */
+    defaultOpen?: boolean;
+    /** Storage key for persistence */
+    storageKey?: string;
+}
+declare function useCollapsible(options?: UseCollapsibleOptions): {
+    isOpen: boolean;
+    toggle: () => void;
+    open: () => void;
+    close: () => void;
+    setIsOpen: React__default.Dispatch<React__default.SetStateAction<boolean>>;
+};
+
+export { Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Checkbox, type CheckboxProps, Collapsible, CollapsibleTrigger, ConfirmDialog, type ConfirmDialogProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DismissibleBanner, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, EntityForm, type EntityFormProps, FormField, FormSlideOver, type FormSlideOverProps, Input, type InputProps, LoadingScreen, LoadingSpinner, type LoadingSpinnerProps, SearchBar, type SearchBarProps, SearchInput, type SearchInputLabels, type SearchInputProps, Select, type SelectProps, SlideOver, type SlideOverProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, cn, useCollapsible };