diff --git a/packages/design-system/src/ui/future.ts b/packages/design-system/src/ui/future.ts index 54ae586..5187c34 100644 --- a/packages/design-system/src/ui/future.ts +++ b/packages/design-system/src/ui/future.ts @@ -21,7 +21,7 @@ export * from './hover-card' export * from './input' export * from './input-otp' export * from './label' -export * from './menubar' +// export * from './menubar' export * from './navigation-menu' export * from './pagination' export * from './popover' diff --git a/packages/design-system/types/future.d.ts b/packages/design-system/types/future.d.ts new file mode 100644 index 0000000..97d5530 --- /dev/null +++ b/packages/design-system/types/future.d.ts @@ -0,0 +1,803 @@ +/// + +import * as AccordionPrimitive from '@radix-ui/react-accordion'; +import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'; +import { AllowInDimension } from 'recharts/types/util/types'; +import { AnimationTiming } from 'recharts/types/util/types'; +import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'; +import * as AvatarPrimitive from '@radix-ui/react-avatar'; +import { CartesianViewBox } from 'recharts/types/util/types'; +import * as CheckboxPrimitive from '@radix-ui/react-checkbox'; +import { ClassProp } from 'class-variance-authority/types'; +import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'; +import { ContentType } from 'recharts/types/component/Tooltip'; +import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'; +import { ControllerProps } from 'react-hook-form'; +import { Coordinate } from 'recharts/types/util/types'; +import { CSSProperties } from 'react'; +import { DayPicker } from 'react-day-picker'; +import { default as default_2 } from 'embla-carousel-react'; +import { DialogCloseProps } from '@radix-ui/react-dialog'; +import { DialogContentProps } from '@radix-ui/react-dialog'; +import { DialogDescriptionProps } from '@radix-ui/react-dialog'; +import { DialogOverlayProps } from '@radix-ui/react-dialog'; +import { DialogPortalProps } from '@radix-ui/react-dialog'; +import * as DialogPrimitive from '@radix-ui/react-dialog'; +import { DialogTitleProps } from '@radix-ui/react-dialog'; +import { DialogTriggerProps } from '@radix-ui/react-dialog'; +import { Drawer as Drawer_2 } from 'vaul'; +import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'; +import { FieldError } from 'react-hook-form'; +import { FieldPath } from 'react-hook-form'; +import { FieldValues } from 'react-hook-form'; +import { FormProviderProps } from 'react-hook-form'; +import { ForwardRefExoticComponent } from 'react'; +import * as HoverCardPrimitive from '@radix-ui/react-hover-card'; +import { HTMLAttributes } from 'react'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; +import * as LabelPrimitive from '@radix-ui/react-label'; +import { NameType } from 'recharts/types/component/DefaultTooltipContent'; +import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'; +import { Payload } from 'recharts/types/component/DefaultTooltipContent'; +import * as PopoverPrimitive from '@radix-ui/react-popover'; +import * as ProgressPrimitive from '@radix-ui/react-progress'; +import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'; +import * as React_2 from 'react'; +import { ReactNode } from 'react'; +import * as RechartsPrimitive from 'recharts'; +import { RefAttributes } from 'react'; +import { RenderProps } from 'input-otp'; +import * as ResizablePrimitive from 'react-resizable-panels'; +import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'; +import * as SelectPrimitive from '@radix-ui/react-select'; +import * as SeparatorPrimitive from '@radix-ui/react-separator'; +import * as SliderPrimitive from '@radix-ui/react-slider'; +import { SlotProps } from '@radix-ui/react-slot'; +import * as SwitchPrimitives from '@radix-ui/react-switch'; +import * as TabsPrimitive from '@radix-ui/react-tabs'; +import { Toaster as Toaster_2 } from 'sonner'; +import * as ToastPrimitives from '@radix-ui/react-toast'; +import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'; +import * as TogglePrimitive from '@radix-ui/react-toggle'; +import * as TooltipPrimitive from '@radix-ui/react-tooltip'; +import { UniqueOption } from 'recharts/types/util/payload/getUniqPayload'; +import { UseEmblaCarouselType } from 'embla-carousel-react'; +import { ValueType } from 'recharts/types/component/DefaultTooltipContent'; +import { VariantProps } from 'class-variance-authority'; + +export declare const Accordion: React_2.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React_2.RefAttributes>; + +export declare const AccordionContent: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const AccordionItem: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const AccordionTrigger: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +declare type Action = { + type: ActionType['ADD_TOAST']; + toast: ToasterToast; +} | { + type: ActionType['UPDATE_TOAST']; + toast: Partial; +} | { + type: ActionType['DISMISS_TOAST']; + toastId?: ToasterToast['id']; +} | { + type: ActionType['REMOVE_TOAST']; + toastId?: ToasterToast['id']; +}; + +declare type ActionType = typeof actionTypes; + +declare const actionTypes: { + readonly ADD_TOAST: "ADD_TOAST"; + readonly UPDATE_TOAST: "UPDATE_TOAST"; + readonly DISMISS_TOAST: "DISMISS_TOAST"; + readonly REMOVE_TOAST: "REMOVE_TOAST"; +}; + +export declare const Alert: React_2.ForwardRefExoticComponent & VariantProps<(props?: ({ + variant?: "default" | "destructive" | null | undefined; +} & ClassProp) | undefined) => string> & React_2.RefAttributes>; + +export declare const AlertDescription: React_2.ForwardRefExoticComponent & React_2.RefAttributes>; + +export declare const AlertDialog: React_2.FC; + +export declare const AlertDialogAction: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const AlertDialogCancel: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const AlertDialogContent: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const AlertDialogDescription: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const AlertDialogFooter: { + ({ className, ...props }: React_2.HTMLAttributes): JSX_2.Element; + displayName: string; +}; + +export declare const AlertDialogHeader: { + ({ className, ...props }: React_2.HTMLAttributes): JSX_2.Element; + displayName: string; +}; + +export declare const AlertDialogOverlay: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const AlertDialogPortal: React_2.FC; + +export declare const AlertDialogTitle: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const AlertDialogTrigger: React_2.ForwardRefExoticComponent>; + +export declare const AlertTitle: React_2.ForwardRefExoticComponent & React_2.RefAttributes>; + +export declare const AspectRatio: ForwardRefExoticComponent>; + +export declare const Avatar: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const AvatarFallback: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const AvatarImage: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare function Badge({ className, variant, ...props }: BadgeProps): JSX_2.Element; + +export declare interface BadgeProps extends React_2.HTMLAttributes, VariantProps { +} + +export declare const badgeVariants: (props?: ({ + variant?: "secondary" | "default" | "destructive" | "outline" | null | undefined; +} & ClassProp) | undefined) => string; + +export declare const Breadcrumb: React_2.ForwardRefExoticComponent, HTMLElement>, "ref"> & { + separator?: React_2.ReactNode; +} & React_2.RefAttributes>; + +export declare const BreadcrumbEllipsis: { + ({ className, ...props }: React_2.ComponentProps<'span'>): JSX_2.Element; + displayName: string; +}; + +export declare const BreadcrumbItem: React_2.ForwardRefExoticComponent, HTMLLIElement>, "ref"> & React_2.RefAttributes>; + +export declare const BreadcrumbLink: React_2.ForwardRefExoticComponent, HTMLAnchorElement>, "ref"> & { + asChild?: boolean | undefined; +} & React_2.RefAttributes>; + +export declare const BreadcrumbList: React_2.ForwardRefExoticComponent, HTMLOListElement>, "ref"> & React_2.RefAttributes>; + +export declare const BreadcrumbPage: React_2.ForwardRefExoticComponent, HTMLSpanElement>, "ref"> & React_2.RefAttributes>; + +export declare const BreadcrumbSeparator: { + ({ children, className, ...props }: React_2.ComponentProps<'li'>): JSX_2.Element; + displayName: string; +}; + +export declare const Button: React_2.ForwardRefExoticComponent>; + +export declare interface ButtonProps extends React_2.ButtonHTMLAttributes, VariantProps { + asChild?: boolean; +} + +export declare const buttonVariants: (props?: ({ + variant?: "link" | "ghost" | "secondary" | "default" | "destructive" | "outline" | null | undefined; + size?: "sm" | "lg" | "icon" | "default" | null | undefined; +} & ClassProp) | undefined) => string; + +export declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): JSX_2.Element; + +export declare namespace Calendar { + var displayName: string; +} + +export declare type CalendarProps = React_2.ComponentProps; + +export declare const Card: React_2.ForwardRefExoticComponent & React_2.RefAttributes>; + +export declare const CardContent: React_2.ForwardRefExoticComponent & React_2.RefAttributes>; + +export declare const CardDescription: React_2.ForwardRefExoticComponent & React_2.RefAttributes>; + +export declare const CardFooter: React_2.ForwardRefExoticComponent & React_2.RefAttributes>; + +export declare const CardHeader: React_2.ForwardRefExoticComponent & React_2.RefAttributes>; + +export declare const CardTitle: React_2.ForwardRefExoticComponent & React_2.RefAttributes>; + +export declare const Carousel: React_2.ForwardRefExoticComponent & CarouselProps & React_2.RefAttributes>; + +export declare type CarouselApi = UseEmblaCarouselType[1]; + +export declare const CarouselContent: React_2.ForwardRefExoticComponent & React_2.RefAttributes>; + +export declare const CarouselItem: React_2.ForwardRefExoticComponent & React_2.RefAttributes>; + +export declare const CarouselNext: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +declare type CarouselOptions = UseCarouselParameters[0]; + +declare type CarouselPlugin = UseCarouselParameters[1]; + +export declare const CarouselPrevious: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +declare type CarouselProps = { + opts?: CarouselOptions; + plugins?: CarouselPlugin; + orientation?: 'horizontal' | 'vertical'; + setApi?: (api: CarouselApi) => void; +}; + +export declare type ChartConfig = { + [k in string]: { + label?: React_2.ReactNode; + icon?: React_2.ComponentType; + } & ({ + color?: string; + theme?: never; + } | { + color?: never; + theme: Record; + }); +}; + +export declare const ChartContainer: React_2.ForwardRefExoticComponent & React_2.HTMLAttributes & { + config: ChartConfig; + children: React_2.ComponentProps['children']; +}, "ref"> & React_2.RefAttributes>; + +export declare const ChartLegend: typeof RechartsPrimitive.Legend; + +export declare const ChartLegendContent: React_2.ForwardRefExoticComponent & React_2.HTMLAttributes & Pick & { + hideIcon?: boolean | undefined; + nameKey?: string | undefined; +}, "ref"> & React_2.RefAttributes>; + +export declare const ChartStyle: ({ id, config }: { + id: string; + config: ChartConfig; +}) => JSX_2.Element | null; + +export declare const ChartTooltip: typeof RechartsPrimitive.Tooltip; + +export declare const ChartTooltipContent: React_2.ForwardRefExoticComponent & { + accessibilityLayer?: boolean | undefined; + active?: boolean | undefined; + includeHidden?: boolean | undefined; + allowEscapeViewBox?: AllowInDimension | undefined; + animationDuration?: number | undefined; + animationEasing?: AnimationTiming | undefined; + content?: ContentType | undefined; + coordinate?: Partial | undefined; + cursor?: boolean | React_2.ReactElement> | React_2.SVGProps | undefined; + filterNull?: boolean | undefined; + defaultIndex?: number | undefined; + isAnimationActive?: boolean | undefined; + offset?: number | undefined; + payloadUniqBy?: UniqueOption> | undefined; + position?: Partial | undefined; + reverseDirection?: AllowInDimension | undefined; + shared?: boolean | undefined; + trigger?: "click" | "hover" | undefined; + useTranslate3d?: boolean | undefined; + viewBox?: CartesianViewBox | undefined; + wrapperStyle?: React_2.CSSProperties | undefined; +} & React_2.ClassAttributes & React_2.HTMLAttributes & { + hideLabel?: boolean | undefined; + hideIndicator?: boolean | undefined; + indicator?: "line" | "dashed" | "dot" | undefined; + nameKey?: string | undefined; + labelKey?: string | undefined; +}, "ref"> & React_2.RefAttributes>; + +export declare const Checkbox: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const Collapsible: ForwardRefExoticComponent>; + +export declare const CollapsibleContent: ForwardRefExoticComponent>; + +export declare const CollapsibleTrigger: ForwardRefExoticComponent>; + +export declare const ContextMenu: React_2.FC; + +export declare const ContextMenuCheckboxItem: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const ContextMenuContent: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const ContextMenuGroup: React_2.ForwardRefExoticComponent>; + +export declare const ContextMenuItem: React_2.ForwardRefExoticComponent, "ref"> & { + inset?: boolean | undefined; +} & React_2.RefAttributes>; + +export declare const ContextMenuLabel: React_2.ForwardRefExoticComponent, "ref"> & { + inset?: boolean | undefined; +} & React_2.RefAttributes>; + +export declare const ContextMenuPortal: React_2.FC; + +export declare const ContextMenuRadioGroup: React_2.ForwardRefExoticComponent>; + +export declare const ContextMenuRadioItem: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const ContextMenuSeparator: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const ContextMenuShortcut: { + ({ className, ...props }: React_2.HTMLAttributes): JSX_2.Element; + displayName: string; +}; + +export declare const ContextMenuSub: React_2.FC; + +export declare const ContextMenuSubContent: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const ContextMenuSubTrigger: React_2.ForwardRefExoticComponent, "ref"> & { + inset?: boolean | undefined; +} & React_2.RefAttributes>; + +export declare const ContextMenuTrigger: React_2.ForwardRefExoticComponent>; + +export declare const Dialog: React_2.FC; + +export declare const DialogClose: React_2.ForwardRefExoticComponent>; + +export declare const DialogContent: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const DialogDescription: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const DialogFooter: { + ({ className, ...props }: React_2.HTMLAttributes): JSX_2.Element; + displayName: string; +}; + +export declare const DialogHeader: { + ({ className, ...props }: React_2.HTMLAttributes): JSX_2.Element; + displayName: string; +}; + +export declare const DialogOverlay: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const DialogPortal: React_2.FC; + +export declare const DialogTitle: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const DialogTrigger: React_2.ForwardRefExoticComponent>; + +export declare const Drawer: { + ({ shouldScaleBackground, ...props }: React_2.ComponentProps): JSX_2.Element; + displayName: string; +}; + +export declare const DrawerClose: React_2.ForwardRefExoticComponent>; + +export declare const DrawerContent: React_2.ForwardRefExoticComponent, "ref"> & { + onAnimationEnd?: ((open: boolean) => void) | undefined; +} & React_2.RefAttributes, "ref"> & React_2.RefAttributes>; + +export declare const DrawerDescription: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const DrawerFooter: { + ({ className, ...props }: React_2.HTMLAttributes): JSX_2.Element; + displayName: string; +}; + +export declare const DrawerHeader: { + ({ className, ...props }: React_2.HTMLAttributes): JSX_2.Element; + displayName: string; +}; + +export declare const DrawerOverlay: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes, "ref"> & React_2.RefAttributes>; + +export declare const DrawerPortal: React_2.FC; + +export declare const DrawerTitle: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const DrawerTrigger: React_2.ForwardRefExoticComponent>; + +export declare const DropdownMenu: React_2.FC; + +export declare const DropdownMenuCheckboxItem: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const DropdownMenuContent: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const DropdownMenuGroup: React_2.ForwardRefExoticComponent>; + +export declare const DropdownMenuItem: React_2.ForwardRefExoticComponent, "ref"> & { + inset?: boolean | undefined; +} & React_2.RefAttributes>; + +export declare const DropdownMenuLabel: React_2.ForwardRefExoticComponent, "ref"> & { + inset?: boolean | undefined; +} & React_2.RefAttributes>; + +export declare const DropdownMenuPortal: React_2.FC; + +export declare const DropdownMenuRadioGroup: React_2.ForwardRefExoticComponent>; + +export declare const DropdownMenuRadioItem: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const DropdownMenuSeparator: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const DropdownMenuShortcut: { + ({ className, ...props }: React_2.HTMLAttributes): JSX_2.Element; + displayName: string; +}; + +export declare const DropdownMenuSub: React_2.FC; + +export declare const DropdownMenuSubContent: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const DropdownMenuSubTrigger: React_2.ForwardRefExoticComponent, "ref"> & { + inset?: boolean | undefined; +} & React_2.RefAttributes>; + +export declare const DropdownMenuTrigger: React_2.ForwardRefExoticComponent>; + +export declare const Form: (props: FormProviderProps) => React_2.JSX.Element; + +export declare const FormControl: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const FormDescription: React_2.ForwardRefExoticComponent & React_2.RefAttributes>; + +export declare const FormField: = FieldPath>({ ...props }: ControllerProps) => JSX_2.Element; + +export declare const FormItem: React_2.ForwardRefExoticComponent & React_2.RefAttributes>; + +export declare const FormLabel: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const FormMessage: React_2.ForwardRefExoticComponent & React_2.RefAttributes>; + +export declare const HoverCard: React_2.FC; + +export declare const HoverCardContent: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const HoverCardTrigger: React_2.ForwardRefExoticComponent>; + +export declare const Input: React_2.ForwardRefExoticComponent>; + +export declare const InputOTP: React_2.ForwardRefExoticComponent<(Omit, "value" | "onChange" | "maxLength" | "onComplete" | "textAlign" | "pushPasswordManagerStrategy" | "containerClassName" | "noScriptCSSFallback"> & { + value?: string | undefined; + onChange?: ((newValue: string) => unknown) | undefined; + maxLength: number; + textAlign?: "center" | "left" | "right" | undefined; + onComplete?: ((...args: any[]) => unknown) | undefined; + pushPasswordManagerStrategy?: "none" | "increase-width" | undefined; + containerClassName?: string | undefined; + noScriptCSSFallback?: string | null | undefined; +} & { + render: (props: RenderProps) => React_2.ReactNode; + children?: undefined; +} & React_2.RefAttributes, "ref"> | Omit, "value" | "onChange" | "maxLength" | "onComplete" | "textAlign" | "pushPasswordManagerStrategy" | "containerClassName" | "noScriptCSSFallback"> & { + value?: string | undefined; + onChange?: ((newValue: string) => unknown) | undefined; + maxLength: number; + textAlign?: "center" | "left" | "right" | undefined; + onComplete?: ((...args: any[]) => unknown) | undefined; + pushPasswordManagerStrategy?: "none" | "increase-width" | undefined; + containerClassName?: string | undefined; + noScriptCSSFallback?: string | null | undefined; +} & { + render?: undefined; + children: React_2.ReactNode; +} & React_2.RefAttributes, "ref">) & React_2.RefAttributes>; + +export declare const InputOTPGroup: React_2.ForwardRefExoticComponent, HTMLDivElement>, "ref"> & React_2.RefAttributes>; + +export declare const InputOTPSeparator: React_2.ForwardRefExoticComponent, HTMLDivElement>, "ref"> & React_2.RefAttributes>; + +export declare const InputOTPSlot: React_2.ForwardRefExoticComponent, HTMLDivElement>, "ref"> & { + index: number; +} & React_2.RefAttributes>; + +export declare interface InputProps extends React_2.InputHTMLAttributes { +} + +export declare const Label: React_2.ForwardRefExoticComponent, "ref"> & VariantProps<(props?: ClassProp | undefined) => string> & React_2.RefAttributes>; + +export declare const NavigationMenu: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const NavigationMenuContent: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const NavigationMenuIndicator: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const NavigationMenuItem: React_2.ForwardRefExoticComponent>; + +export declare const NavigationMenuLink: React_2.ForwardRefExoticComponent>; + +export declare const NavigationMenuList: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const NavigationMenuTrigger: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const navigationMenuTriggerStyle: (props?: ClassProp | undefined) => string; + +export declare const NavigationMenuViewport: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const Pagination: { + ({ className, ...props }: React_2.ComponentProps<'nav'>): JSX_2.Element; + displayName: string; +}; + +export declare const PaginationContent: React_2.ForwardRefExoticComponent, HTMLUListElement>, "ref"> & React_2.RefAttributes>; + +export declare const PaginationEllipsis: { + ({ className, ...props }: React_2.ComponentProps<'span'>): JSX_2.Element; + displayName: string; +}; + +export declare const PaginationItem: React_2.ForwardRefExoticComponent, HTMLLIElement>, "ref"> & React_2.RefAttributes>; + +export declare const PaginationLink: { + ({ className, isActive, size, ...props }: PaginationLinkProps): JSX_2.Element; + displayName: string; +}; + +declare type PaginationLinkProps = { + isActive?: boolean; +} & Pick & React_2.ComponentProps<'a'>; + +export declare const PaginationNext: { + ({ className, ...props }: React_2.ComponentProps): JSX_2.Element; + displayName: string; +}; + +export declare const PaginationPrevious: { + ({ className, ...props }: React_2.ComponentProps): JSX_2.Element; + displayName: string; +}; + +export declare const Popover: React_2.FC; + +export declare const PopoverContent: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const PopoverTrigger: React_2.ForwardRefExoticComponent>; + +export declare const Progress: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const RadioGroup: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const RadioGroupItem: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const reducer: (state: State, action: Action) => State; + +export declare const ResizableHandle: ({ withHandle, className, ...props }: Omit, "id" | "onFocus" | "onBlur"> & { + className?: string | undefined; + disabled?: boolean | undefined; + hitAreaMargins?: ResizablePrimitive.PointerHitAreaMargins | undefined; + id?: string | null | undefined; + onBlur?: (() => void) | undefined; + onDragging?: ResizablePrimitive.PanelResizeHandleOnDragging | undefined; + onFocus?: (() => void) | undefined; + style?: CSSProperties | undefined; + tabIndex?: number | undefined; + tagName?: keyof HTMLElementTagNameMap | undefined; +} & { + children?: ReactNode; +} & { + withHandle?: boolean | undefined; +}) => JSX_2.Element; + +export declare const ResizablePanel: ForwardRefExoticComponent, "id" | "onResize"> & { +className?: string | undefined; +collapsedSize?: number | undefined; +collapsible?: boolean | undefined; +defaultSize?: number | undefined; +id?: string | undefined; +maxSize?: number | undefined; +minSize?: number | undefined; +onCollapse?: ResizablePrimitive.PanelOnCollapse | undefined; +onExpand?: ResizablePrimitive.PanelOnExpand | undefined; +onResize?: ResizablePrimitive.PanelOnResize | undefined; +order?: number | undefined; +style?: object | undefined; +tagName?: keyof HTMLElementTagNameMap | undefined; +} & { +children?: ReactNode; +} & RefAttributes>; + +export declare const ResizablePanelGroup: ({ className, ...props }: React.ComponentProps) => JSX_2.Element; + +export declare const ScrollArea: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const ScrollBar: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const Select: React_2.FC; + +export declare const SelectContent: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const SelectGroup: React_2.ForwardRefExoticComponent>; + +export declare const SelectItem: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const SelectLabel: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const SelectScrollDownButton: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const SelectScrollUpButton: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const SelectSeparator: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const SelectTrigger: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const SelectValue: React_2.ForwardRefExoticComponent>; + +export declare const Separator: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const Sheet: React_2.FC; + +export declare const SheetClose: React_2.ForwardRefExoticComponent>; + +export declare const SheetContent: React_2.ForwardRefExoticComponent>; + +declare interface SheetContentProps extends React_2.ComponentPropsWithoutRef, VariantProps { +} + +export declare const SheetDescription: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const SheetFooter: { + ({ className, ...props }: React_2.HTMLAttributes): JSX_2.Element; + displayName: string; +}; + +export declare const SheetHeader: { + ({ className, ...props }: React_2.HTMLAttributes): JSX_2.Element; + displayName: string; +}; + +export declare const SheetOverlay: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const SheetPortal: React_2.FC; + +export declare const SheetTitle: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const SheetTrigger: React_2.ForwardRefExoticComponent>; + +declare const sheetVariants: (props?: ({ + side?: "left" | "right" | "bottom" | "top" | null | undefined; +} & ClassProp) | undefined) => string; + +export declare function Skeleton({ className, ...props }: React.HTMLAttributes): JSX_2.Element; + +export declare const Slider: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const Sonner: ({ ...props }: ToasterProps) => JSX_2.Element; + +declare interface State { + toasts: ToasterToast[]; +} + +export declare const Switch: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const Table: React_2.ForwardRefExoticComponent & React_2.RefAttributes>; + +export declare const TableBody: React_2.ForwardRefExoticComponent & React_2.RefAttributes>; + +export declare const TableCaption: React_2.ForwardRefExoticComponent & React_2.RefAttributes>; + +export declare const TableCell: React_2.ForwardRefExoticComponent & React_2.RefAttributes>; + +export declare const TableFooter: React_2.ForwardRefExoticComponent & React_2.RefAttributes>; + +export declare const TableHead: React_2.ForwardRefExoticComponent & React_2.RefAttributes>; + +export declare const TableHeader: React_2.ForwardRefExoticComponent & React_2.RefAttributes>; + +export declare const TableRow: React_2.ForwardRefExoticComponent & React_2.RefAttributes>; + +export declare const Tabs: React_2.ForwardRefExoticComponent>; + +export declare const TabsContent: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const TabsList: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const TabsTrigger: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const Textarea: React_2.ForwardRefExoticComponent>; + +export declare interface TextareaProps extends React_2.TextareaHTMLAttributes { +} + +declare const THEMES: { + readonly light: ""; + readonly dark: ".dark"; +}; + +export declare const Toast: React_2.ForwardRefExoticComponent, "ref"> & VariantProps<(props?: ({ + variant?: "default" | "destructive" | null | undefined; +} & ClassProp) | undefined) => string> & React_2.RefAttributes>; + +export declare function toast({ ...props }: Toast_2): { + id: string; + dismiss: () => void; + update: (props: ToasterToast) => void; +}; + +declare type Toast_2 = Omit; + +export declare const ToastAction: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare type ToastActionElement = React_2.ReactElement; + +export declare const ToastClose: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const ToastDescription: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare function Toaster(): JSX_2.Element; + +declare type ToasterProps = React.ComponentProps; + +declare type ToasterToast = ToastProps & { + id: string; + title?: React_2.ReactNode; + description?: React_2.ReactNode; + action?: ToastActionElement; +}; + +export declare type ToastProps = React_2.ComponentPropsWithoutRef; + +export declare const ToastProvider: React_2.FC; + +export declare const ToastTitle: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const ToastViewport: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const Toggle: React_2.ForwardRefExoticComponent, "ref"> & VariantProps<(props?: ({ + variant?: "default" | "outline" | null | undefined; + size?: "sm" | "lg" | "default" | null | undefined; +} & ClassProp) | undefined) => string> & React_2.RefAttributes>; + +export declare const ToggleGroup: React_2.ForwardRefExoticComponent<((Omit, "ref"> | Omit, "ref">) & VariantProps<(props?: ({ + variant?: "default" | "outline" | null | undefined; + size?: "sm" | "lg" | "default" | null | undefined; +} & ClassProp) | undefined) => string>) & React_2.RefAttributes>; + +export declare const ToggleGroupItem: React_2.ForwardRefExoticComponent, "ref"> & VariantProps<(props?: ({ + variant?: "default" | "outline" | null | undefined; + size?: "sm" | "lg" | "default" | null | undefined; +} & ClassProp) | undefined) => string> & React_2.RefAttributes>; + +export declare const toggleVariants: (props?: ({ + variant?: "default" | "outline" | null | undefined; + size?: "sm" | "lg" | "default" | null | undefined; +} & ClassProp) | undefined) => string; + +export declare const Tooltip: React_2.FC; + +export declare const TooltipContent: React_2.ForwardRefExoticComponent, "ref"> & React_2.RefAttributes>; + +export declare const TooltipProvider: React_2.FC; + +export declare const TooltipTrigger: React_2.ForwardRefExoticComponent>; + +declare type UseCarouselParameters = Parameters; + +export declare const useFormField: () => { + invalid: boolean; + isDirty: boolean; + isTouched: boolean; + isValidating: boolean; + error?: FieldError | undefined; + id: string; + name: string; + formItemId: string; + formDescriptionId: string; + formMessageId: string; +}; + +export declare function useToast(): { + toast: typeof toast; + dismiss: (toastId?: string) => void; + toasts: ToasterToast[]; +}; + +export { } + + +declare namespace Calendar { + var displayName: string; +} + + +declare namespace Tabs { + var Tab: typeof import("@/Tabs").Tab; + var TabList: typeof import("@/Tabs").TabList; + var TabContent: typeof import("@/Tabs").TabContent; +} diff --git a/packages/design-system/types/index.d.ts b/packages/design-system/types/index.d.ts new file mode 100644 index 0000000..3828018 --- /dev/null +++ b/packages/design-system/types/index.d.ts @@ -0,0 +1,2841 @@ +import { default as default_2 } from 'react'; +import { Dispatch } from 'react'; +import { FieldInputProps } from 'formik'; +import { IconDefinition } from '@fortawesome/free-regular-svg-icons'; +import { IconDefinition as IconDefinition_2 } from '@fortawesome/free-solid-svg-icons'; +import { IconDefinition as IconDefinition_3 } from '@fortawesome/fontawesome-svg-core'; +import { IconProp } from '@fortawesome/fontawesome-svg-core'; +import { JSX as JSX_2 } from 'react/jsx-runtime'; +import { PropsWithChildren } from 'react'; +import { default as React_2 } from 'react'; +import * as React_3 from 'react'; + +declare type BaseRowType = { + className?: string; +}; + +/** + * This function returns a pre-styled Button component based on the custom theme. + * + * @param id - The id of the button. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param children - The content of the button. + * @param active - Indicate whether the button is active or not. Conditional styling is applied, if this is true. + * @param disabled - Indicate whether the button is disabled or not. Conditional styling is applied, if this is true. + * @param fluid - Indicate whether the button should be fluid or not. Conditional styling is applied, if this is true. + * @param basic - This attribute allows to directly remove significant pre-styling and only applies basic styles and functionally required attributes. + * @param type - The html type of the button. + * @param loading - Indicate whether the button is loading or not. Conditional styling / loading symbol is applied, if this is true. + * @param onClick - Function that is applied when the button is clicked. + * @param className - The optional className object allows you to override the default styling. + * @returns Button component + */ +export declare function Button({ id, children, onClick, disabled, active, fluid, basic, loading, type, className, data, ...props }: ButtonProps): JSX_2.Element; + +export declare namespace Button { + var Icon: ({ className, children, }: { + className?: { + root?: string | undefined; + } | undefined; + children: default_2.ReactNode; + }) => JSX_2.Element; + var Label: ({ className, children, }: { + className?: { + root?: string | undefined; + } | undefined; + children: default_2.ReactNode; + }) => JSX_2.Element; + var IconGroup: ({ state, setState, className, children, }: ButtonIconGroupProps) => JSX_2.Element; +} + +export declare interface ButtonIconGroupProps { + state: number | undefined; + setState: Dispatch>; + className?: { + root?: string; + children?: string; + }; + children: default_2.ReactNode[]; +} + +declare interface ButtonItemProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + label: string; + disabled?: boolean; + icon?: default_2.ReactNode; + className?: { + root?: string; + label?: string; + icon?: string; + disabled?: string; + }; + style?: { + root?: default_2.CSSProperties; + label?: default_2.CSSProperties; + icon?: default_2.CSSProperties; + disabled?: default_2.CSSProperties; + }; +} + +export declare interface ButtonItemWithHrefProps extends ButtonItemProps { + href: string; + onClick?: never; +} + +export declare interface ButtonItemWithOnClickProps extends ButtonItemProps { + href?: never; + onClick: default_2.MouseEventHandler; +} + +export declare interface ButtonProps { + id?: string; + active?: boolean; + children?: default_2.ReactNode; + disabled?: boolean; + fluid?: boolean; + basic?: boolean; + type?: 'button' | 'submit' | 'reset'; + loading?: boolean; + onClick?: (e?: default_2.MouseEvent) => void; + className?: { + root?: string; + active?: string; + }; + data?: { + cy?: string; + test?: string; + }; + [x: string]: unknown; +} + +/** + * This function returns a pre-styled Checkbox component based on the RadixUI Checkbox component and the custom theme. + * State is not managed internally and needs to be passed to the component through the checked and onCheck props. + * + * @param id - The id of the checkbox. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param children - Optional content of the checkbox that is shown when the checked attribute is true. By default, this is just replaced by a tick symbol. + * @param checked - Indicate whether the checkbox is checked or not. + * @param partial - Indicate whether the checkbox is partially checked or not. If the checked attribute is true, it will alwawys override the partial condition simplified logic. + * @param onCheck - The function that is called when the checkbox is checked or unchecked. + * @param disabled - Indicate whether the checkbox is disabled or not. + * @param label - The label of the checkbox. + * @param size - The size of the checkbox (can be small, medium, large or extra large). + * @param className - The optional className object allows you to override the default styling. + * @returns Checkbox component + */ +export declare function Checkbox({ id, data, children, checked, partial, disabled, label, onCheck, size, className, }: CheckboxProps): default_2.ReactElement; + +export declare interface CheckboxProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + children?: default_2.ReactNode; + checked: boolean | 'indeterminate'; + partial?: boolean; + disabled?: boolean; + onCheck: () => void; + label?: string | default_2.ReactNode; + size?: 'sm' | 'md' | 'lg' | 'xl'; + className?: { + root?: string; + label?: string; + }; +} + +/** + * This function returns a pre-styled collapsible component based on the RadixUI collapsible component and the implemented theme. + * State need to be managed by the parent component. + * + * @param id - The id of the collapsible. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param open - Indicate whether the collapsible is open or not. + * @param onChange - Function that is called when the collapsible is toggled. + * @param staticContent - The static content that is always shown. + * @param closedContent - The optional content that is only shown when the collapsible is closed. + * @param customTrigger - The optional custom trigger that is shown instead of the default arrow trigger. + * @param primary - An optional text that will be displayed on a button in the right bottom corner of the collapsible. Alternatively, it is also possible to pass a React node instead. + * @param onPrimaryClick - Function that will be called once the primary button is clicked (no function for custom primary nodes) + * @param secondary - An optional text that will be displayed on a button in the left bottom corner of the collapsible. Alternatively, it is also possible to pass a React node instead. + * @param onSecondaryClick - Function that will be called once the secondary button is clicked (no function for custom secondary nodes) + * @param className - The optional className object allows you to override the default styling. + * @param children - The content of the collapsible that is shown when the collapsible is open. + * @returns Collapsible component + */ +export declare function Collapsible({ id, data, open, onChange, staticContent, closedContent, customTrigger, primary, onPrimaryClick, secondary, onSecondaryClick, className, children, }: CollapsibleProps): JSX_2.Element; + +export declare interface CollapsibleProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + open: boolean; + onChange: () => void; + staticContent: default_2.ReactNode | string; + closedContent?: default_2.ReactNode | string; + customTrigger?: default_2.ReactNode; + primary?: string | default_2.ReactNode; + onPrimaryClick?: () => void; + secondary?: string | default_2.ReactNode; + onSecondaryClick?: () => void; + className?: { + root?: string; + staticContent?: string; + closedContent?: string; + content?: string; + trigger?: string; + primary?: string; + primaryButton?: string; + secondary?: string; + secondaryButton?: string; + bottomWrapper?: string; + }; + children: default_2.ReactNode; +} + +export declare function ColorPicker({ color, onSubmit, disabled, triggerIcon, presetColors, position, submitText, colorLabel, tooltip, dataTrigger, dataHexInput, dataSubmit, className, }: ColorPickerProps): JSX_2.Element; + +export declare interface ColorPickerClassName { + root?: string; + trigger?: string; + popover?: string; + presetButtons?: string; + inputLabel?: string; + inputTooltip?: string; + input?: string; + abort?: string; + submit?: string; +} + +export declare interface ColorPickerProps { + color: string; + onSubmit: (newColor: string) => void; + disabled?: boolean; + triggerIcon?: IconDefinition_2; + presetColors?: string[]; + position?: 'bottom' | 'top'; + submitText: string; + colorLabel: string; + tooltip?: string; + dataTrigger?: { + cy?: string; + test?: string; + }; + dataHexInput?: { + cy?: string; + test?: string; + }; + dataSubmit?: { + cy?: string; + test?: string; + }; + className?: ColorPickerClassName; +} + +export declare type ColumnType = { + className?: string; + label: string; + accessor: string; + sortable?: boolean; + transformer?: ({ row, ix, }: { + row: RowType; + ix?: number; + }) => string | number | boolean; + formatter?: ({ row, ix, }: { + row: RowType; + ix?: number; + }) => string | number | default_2.ReactElement; +}; + +/** + * This function creates a simple text countdown component (without any additional features or styling) + * + * @param isStatic - If true, the countdown will not be running, but instead show the initial value. However, as the end value is given by a date, reloading can modify the displayed countdown value + * @param expiresAt - Date when the countdown should expire + * @param formatter - Function to format the countdown value + * @param onExpire - Function that is executed when the countdown expires + * @param onUpdate - Function that is executed when the countdown is updated (not when it expires) + * @param data - Optional data object that can be used for testing (e.g. data-test or data-cy) + * @param className - Optional className object allows you to override the default styling + * @returns A simple text countdown component + */ +export declare function Countdown({ isStatic, expiresAt, formatter, onExpire, onUpdate, data, className, }: CountdownProps): JSX_2.Element; + +export declare interface CountdownProps { + isStatic?: boolean; + expiresAt: Date; + formatter?: (value: any) => any; + onExpire?: () => void; + onUpdate?: (timeRemaining: number) => void; + data?: { + cy?: string; + test?: string; + }; + className?: { + root?: string; + }; +} + +declare type CustomItemProps = { + id?: string; + data?: { + cy?: string; + test?: string; + }; + children: default_2.ReactNode; + className?: { + root?: string; + }; + style?: { + root?: default_2.CSSProperties; + }; +}; + +/** + * This function combines the CycleProgress and Countdown components to create a circular progress bar with a countdown in the middle + * + * @param expiresAt - Date when the countdown should expire + * @param totalDuration - Total duration of the countdown in seconds, which is needed to compute the progress in percent + * @param size - Size of the progress bar, can be 'sm' or 'md' + * @param overrideSize - Optional override for the size of the progress bar + * @param color - Color of the progress bar (static for the moment) + * @param strokeWidthRem - Width of the progress bar. For small size, a smaller value is recommended + * @param isStatic - If true, the countdown will not be running, but instead show the initial value. However, as the end value is given by a date, reloading can modify the displayed countdown value + * @param terminalColor - Color of the progress bar when the countdown is expired (total Duration 0 or expiration in the past) + * @param terminalPercentage - Percentage of the progress bar when the countdown is expired (totalDuration 0 or expiration in the past) + * @param formatter - Function to format the countdown value + * @param onExpire - Function that is executed when the countdown expires + * @param onUpdate - Function that is executed when the countdown is updated (not when it expires) + * @param data - Optional data object that can be used for testing (e.g. data-test or data-cy) + * @param className - Optional className object allows you to override the default styling + * @returns A circular progress bar with a countdown in the middle + */ +export declare function CycleCountdown({ expiresAt, totalDuration, size, overrideSize, color, strokeWidthRem, isStatic, terminalColor, terminalPercentage, formatter, onExpire, onUpdate, data, className, }: CycleCountdownProps): JSX_2.Element; + +export declare interface CycleCountdownProps { + expiresAt: Date; + totalDuration: number; + size?: 'sm' | 'md'; + overrideSize?: number; + color?: string; + strokeWidthRem?: number; + isStatic?: boolean; + terminalColor?: string; + terminalPercentage?: number; + formatter?: (value: any) => any; + onExpire?: () => void; + onUpdate?: (timeRemaining: number) => void; + data?: { + cy?: string; + test?: string; + }; + className?: { + root?: string; + countdownWrapper?: string; + countdown?: string; + }; +} + +/** + * This function create a circular progress bar with custom content in the middle (children) + * + * @param size - Size of the progress bar, can be 'sm' or 'md' + * @param overrideSize - If size adjustments of the relative placement are required due to font changes, this value can be used to override the circle size + * @param percentage - Percentage of the progress bar (0-100) + * @param color - Color of the progress bar (static for the moment) + * @param strokeWidthRem - Width of the progress bar. For small size, a smaller value is recommended + * @param children - Content of the progress bar, displayed in the center + * @param data - Optional data object that can be used for testing (e.g. data-test or data-cy) + * @param className - Optional className object allows you to override the default styling + * @returns A circular progress bar with children content in the middle + */ +export declare function CycleProgress({ size, overrideSize, percentage, color, strokeWidthRem, children, data, className, }: CycleProgressProps): JSX_2.Element; + +export declare interface CycleProgressProps { + size?: 'sm' | 'md'; + overrideSize?: number; + percentage: number; + color?: string; + strokeWidthRem?: number; + children?: default_2.ReactNode; + data?: { + cy?: string; + test?: string; + }; + className?: { + root?: string; + children?: string; + }; +} + +/** + * This component provides a simple date changer with a label and a button to edit the date (not coupled to a formik context). + * + * @param id - The id of the date changer + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param dataButton - The object of data attributes that can be used for testing (e.g. data-test or data-cy) for the button + * @param label - The label of the date changer + * @param labelType - The type of the label (small or large) + * @param tooltip - The tooltip of the date changer (is only shown if a label is given) + * @param required - Whether the date label should contain a required symbol + * @param disabled - Whether the date changer is disabled or not + * @param error - The error message to be displayed + * @param hideError - Whether the error message should be hidden + * @param isTouched - Whether the date changer has been touched + * @param format - The format of the date when the edit mode is not active (then the display is up to the browser implementation) + * @param edit - Whether the date changer is in edit mode or not + * @param date - The date to be displayed + * @param onEdit - The function to be called when the edit button is clicked (external state management) + * @param onSave - The function to be called when the save button is clicked (external state management) + * @param editIcon - The icon to be displayed on the edit button + * @param className - The optional className object allows you to override the default styling. + * @returns Date changer component with optional label, edit button and save button. + */ +export declare function DateChanger({ id, data, dataButton, label, labelType, tooltip, required, disabled, error, hideError, isTouched, format, edit, date, onEdit, onSave, editIcon, className, }: DateChangerProps): JSX_2.Element; + +export declare interface DateChangerClassName { + root?: string; + label?: string; + field?: string; + input?: string; + disabled?: string; + editButton?: string; + saveButton?: string; + tooltip?: string; +} + +export declare interface DateChangerProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + dataButton?: { + cy?: string; + test?: string; + }; + label?: string; + labelType?: 'small' | 'large'; + required?: boolean; + tooltip?: string | default_2.ReactNode; + disabled?: boolean; + error?: string; + hideError?: boolean; + isTouched?: boolean; + format?: string; + edit: boolean; + date: string; + onEdit: () => void; + onSave: (date: string) => void; + editIcon?: IconDefinition_2; + className?: DateChangerClassName; +} + +export declare interface DateFieldProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + label?: string; + labelType?: 'small' | 'normal'; + placeholder?: string; + tooltip?: string | default_2.ReactNode; + required?: boolean; + hideError?: boolean; + disabled?: boolean; + className?: { + root?: string; + field?: string; + label?: string; + input?: string; + error?: string; + tooltip?: string; + }; + name: string; + [key: string]: any; +} + +/** + * This function returns a pre-styled Dropdown component based on the RadixUI dropdown component and the custom theme. + * + * @param id - The id of the dropdown. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param trigger - The content of the trigger button or a custom trigger component to replace the default button. + * @param triggerIcon - The icon that is displayed next to the trigger content. + * @param items - The items that are displayed in the dropdown menu. This attribute should not be set, if groups are used. + * @param activeItems - List of labels that should be considered active. This attribute has a similar function as the "select" attribute on the item props and should not be used at the same time. + * @param groups - The groups of items that are displayed in the dropdown menu. This attribute should not be set, if items are used. + * @param className - The optional className object allows you to override the default styling. + * @param disabled - Indicate whether the dropdown is disabled or not. Conditional styling is applied, if this is true. + * @returns Dropdown component + */ +export declare function Dropdown({ id, data, trigger, triggerIcon, items, activeItems, groups, className, disabled, }: DropdownWithItemsProps | DropdownWithGroupsProps): JSX_2.Element; + +declare interface DropdownItemProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + title: string; + subtitle?: string; + icon?: default_2.ReactNode; + className?: { + root?: string; + title?: string; + icon?: string; + subtitle?: string; + }; + style?: { + root?: default_2.CSSProperties; + title?: default_2.CSSProperties; + icon?: default_2.CSSProperties; + subtitle?: default_2.CSSProperties; + }; +} + +export declare interface DropdownItemWithHrefProps extends DropdownItemProps { + href: string; + onClick?: never; +} + +export declare interface DropdownItemWithOnClickProps extends DropdownItemProps { + href?: never; + onClick: default_2.MouseEventHandler; +} + +declare interface DropdownProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + trigger: string | default_2.ReactNode; + triggerIcon?: IconDefinition_2; + items?: Item[]; + activeItems?: string[]; + groups?: Item[][]; + className?: { + trigger?: string; + triggerDisabled?: string; + viewport?: string; + item?: string; + activeItem?: string; + group?: string; + arrow?: string; + }; + disabled?: boolean; +} + +export declare interface DropdownWithGroupsProps extends DropdownProps { + items?: never; + groups: Item[][]; +} + +export declare interface DropdownWithItemsProps extends DropdownProps { + items: Item[]; + groups?: never; +} + +export declare interface FormatterArgs { + element: StepItem; + ix: number; +} + +export declare function FormikColorPicker({ id, name, label, labelType, tooltip, required, hideError, disabled, triggerIcon, presetColors, position, submitText, className, dataTrigger, dataHexInput, dataSubmit, }: FormikColorPickerProps): JSX_2.Element; + +export declare interface FormikColorPickerProps { + id?: string; + name: string; + label?: string; + labelType?: 'small' | 'normal'; + tooltip?: string | default_2.ReactNode; + required?: boolean; + hideError?: boolean; + disabled?: boolean; + triggerIcon?: IconDefinition_3; + presetColors?: string[]; + position?: 'bottom' | 'top'; + abortText?: string; + submitText?: string; + className?: { + root?: string; + label?: string; + field?: string; + tooltip?: string; + error?: string; + colorPicker?: ColorPickerClassName; + }; + dataTrigger?: { + cy?: string; + test?: string; + }; + dataHexInput?: { + cy?: string; + test?: string; + }; + dataAbort?: { + cy?: string; + test?: string; + }; + dataSubmit?: { + cy?: string; + test?: string; + }; +} + +/** + * This function returns a date field that works as to be expected in a Formik environment. + * State is managed by Formik through the name attribute. + * + * @param id - The id of the field. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param dataButton - The object of data attributes that can be used for testing (e.g. data-test or data-cy) for the button + * @param name - The name of the field as used to keep track of the state in Formik. + * @param label - The optional label is shown next to the field in the form. + * @param tooltip - The optional tooltip is shown on hover next to the label. + * @param required - Indicate whether the field is required or not. + * @param hideError - Hide the error message below this component as is might be more appropriate to show it somewhere else. + * @param disabled - Disable the field. + * @param className - The optional className object allows you to override the default styling. + * @returns Date field component with Formik state management. + */ +export declare function FormikDateChanger({ id, data, dataButton, name, label, tooltip, required, hideError, disabled, className, }: FormikDateChangerProps): JSX_2.Element; + +export declare interface FormikDateChangerProps { + id?: string; + name: string; + data?: { + cy?: string; + test?: string; + }; + dataButton?: { + cy?: string; + test?: string; + }; + label?: string; + tooltip?: string; + required?: boolean; + hideError?: boolean; + disabled?: boolean; + className?: { + root?: string; + dateChanger?: DateChangerClassName; + }; +} + +declare interface FormikDateChangerProps_2 { + id?: string; + name: string; + label?: string; + labelType?: 'small' | 'large'; + required?: boolean; + tooltip?: string | default_2.ReactNode; + disabled?: boolean; + hideError?: boolean; + format?: string; + editIcon?: IconDefinition; + validateField?: () => void; + data?: { + cy?: string; + test?: string; + }; + dataButton?: { + cy?: string; + test?: string; + }; + className?: DateChangerClassName; +} + +/** + * This function returns a date field that works as to be expected in a Formik environment. + * State is managed by Formik through the name attribute. + * + * @param id - The id of the field. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param name - The name of the field as used to keep track of the state in Formik. + * @param label - The optional label is shown next to the field in the form. + * @param labelType - The optional labelType can be used to change the size and position of the label according to pre-defined standards. + * @param placeholder - The optional placeholder is shown when the field is empty. + * @param tooltip - The optional tooltip is shown on hover next to the label. + * @param required - Indicate whether the field is required or not. + * @param hideError - Hide the error message below this component as is might be more appropriate to show it somewhere else. + * @param disabled - Disable the field. + * @param className - The optional className object allows you to override the default styling. + * @returns Date field component with Formik state management. + */ +export declare function FormikDateField({ id, data, name, label, labelType, placeholder, tooltip, required, hideError, disabled, className, ...props }: DateFieldProps): JSX_2.Element; + +/** + * This function returns a text field that works as to be expected in a Formik environment. + * State can be managed either through Formik or internally by passing a value and onChange function. + * + * @param id - The id of the field. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param name - The name of the field as used to keep track of the state in Formik. If no value and onChange function are provided, this field is required. + * @param label - The optional label is shown next to the field in the form. + * @param labelType - The optional labelType can be used to change the size and position of the label according to pre-defined standards. + * @param placeholder - The optional placeholder is shown when the field is empty. + * @param tooltip - The optional tooltip is shown on hover next to the label. + * @param required - Indicate whether the field is required or not. + * @param hideError - Hide the error message below this component as is might be more appropriate to show it somewhere else. + * @param precision - The optional precision defines the number of decimal places that are allowed. + * @param min - The optional min defines the minimum value that is allowed. + * @param max - The optional max defines the maximum value that is allowed. + * @param disabled - Disables the field. + * @param className - The optional className object allows you to override the default styling. + * @returns Text field component with Formik state management. + */ +export declare function FormikNumberField({ id, data, name, label, labelType, placeholder, tooltip, required, hideError, precision, min, max, disabled, className, }: FormikNumberFieldProps): JSX_2.Element; + +declare interface FormikNumberFieldNameProps extends FormikNumberFieldProps_2 { + name: string; + value?: never; + onChange?: never; + isTouched?: never; +} + +declare interface FormikNumberFieldOnChangeProps extends FormikNumberFieldProps_2 { + name?: never; + value: string; + onChange: (newValue: string) => void; + isTouched?: boolean; +} + +export declare interface FormikNumberFieldProps { + id?: string; + name: string; + data?: { + cy?: string; + test?: string; + }; + label?: string; + labelType?: 'small' | 'normal'; + placeholder?: string; + tooltip?: string | default_2.ReactNode; + required?: boolean; + hideError?: boolean; + precision?: number; + min?: number; + max?: number; + disabled?: boolean; + className?: { + root?: string; + field?: string; + label?: string; + tooltip?: string; + error?: string; + numberField?: NumberFieldClassName; + }; +} + +declare interface FormikNumberFieldProps_2 { + id?: string; + label?: string; + labelType?: 'small' | 'large'; + placeholder?: string; + precision?: number; + min?: number; + max?: number; + tooltip?: string | default_2.ReactNode; + required?: boolean; + hideError?: boolean; + error?: string; + disabled?: boolean; + onBlur?: () => void; + data?: { + cy?: string; + test?: string; + }; + className?: NumberFieldClassName & { + root?: string; + }; + [key: string]: any; +} + +declare interface FormikPinFieldProps { + id?: string; + name: string; + required?: boolean; + label?: string; + labelType?: 'small' | 'large'; + tooltip?: string | default_2.ReactNode; + className?: TextFieldClassName & { + root?: string; + }; + data?: { + cy?: string; + test?: string; + }; +} + +/** + * This component returns a select field that works as to be expected in a Formik environment. + * State is managed by Formik through the name attribute. + * + * @param id - The id of the field. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param name - The name of the field. This is used to identify the field in Formik. + * @param items - The array of items that should be available on the select component. + * @param groups - The optional groups array can be used to group items in the select component. + * @param label - The optional label is shown next to the field in the form. + * @param labelType - The optional labelType can be used to change the size and position of the label according to pre-defined standards. + * @param placeholder - The optional placeholder is shown when no value is selected / initialization with 'undefined' is chosen. + * @param disabled - The optional disabled prop disables the select component. + * @param hideError - Hide the error message below this component as is might be more appropriate to show it somewhere else. + * @param contentPosition - The position of the content of the select component. Currently only 'item-aligned' and 'popper' are supported. + * @param tooltip - The optional tooltip is shown on hover next to the label. + * @param required - Indicate whether the field is required or not. + * @param className - The optional className object allows you to override the default styling. + * @returns Select component with formik state management. + */ +export declare function FormikSelectField({ id, data, name, items, groups, label, labelType, placeholder, tooltip, required, disabled, hideError, contentPosition, className, ...props }: FormikSelectFieldItemsProps | FormikSelectFieldGroupsProps): JSX_2.Element; + +export declare interface FormikSelectFieldGroupsProps extends FormikSelectFieldProps_2 { + groups: SelectGroup[]; + items?: never; +} + +declare interface FormikSelectFieldGroupsProps_2 extends FormikSelectFieldProps { + groups: SelectGroup[]; + items?: never; +} + +export declare interface FormikSelectFieldItemsProps extends FormikSelectFieldProps_2 { + items: SelectItem[]; + groups?: never; +} + +declare interface FormikSelectFieldItemsProps_2 extends FormikSelectFieldProps { + items: SelectItem[]; + groups?: never; +} + +declare interface FormikSelectFieldProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + name: string; + label?: string; + labelType?: 'small' | 'large'; + placeholder?: string; + tooltip?: string | default_2.ReactNode; + required?: boolean; + disabled?: boolean; + error?: string; + hideError?: boolean; + contentPosition?: 'item-aligned' | 'popper'; + className?: { + root?: string; + label?: string; + error?: string; + tooltip?: string; + select?: SelectClassName; + }; +} + +declare interface FormikSelectFieldProps_2 { + id?: string; + data?: { + cy?: string; + test?: string; + }; + name: string; + label?: string; + labelType?: 'small' | 'normal'; + placeholder?: string; + tooltip?: string | default_2.ReactNode; + required?: boolean; + disabled?: boolean; + hideError?: boolean; + contentPosition?: 'item-aligned' | 'popper'; + className?: { + root?: string; + label?: string; + error?: string; + tooltip?: string; + select?: SelectClassName; + }; +} + +/** + * This function extends the pre-styled Switch component so that it works as to be expected in a Formik environment. + * State, in this case, is managed by Formik through the name attribute. + * + * @param id - The id of the switch. + * @param name - The name of the field. This is used to identify the field in Formik. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param label - The label that is displayed next to the switch. + * @param disabled - Indicator whether the switch is disabled or not. + * @param hideError - Indicator whether the error message is displayed or not. + * @param size - The size of the switch. The size can be small, medium or large. + * @param standardLabel - Indicator whether the label is displayed in the standard format (left of the component) instead of being optimized to a switch. + * @param tooltip - The tooltip that is displayed when hovering over the label. Tooltips are only available with the standardLabel setting. + * @param required - Indicator whether the field is required or not. This is only available with the standardLabel setting. + * @param className - The optional className object allows you to override the default styling. + * @returns Switch component with formik state management + */ +export declare function FormikSwitchField({ id, name, data, disabled, hideError, label, size, standardLabel, required, tooltip, className, }: FormikSwitchFieldProps): JSX_2.Element; + +export declare interface FormikSwitchFieldProps { + id?: string; + name: string; + data?: { + cy?: string; + test?: string; + }; + disabled?: boolean; + hideError?: boolean; + label?: string; + size?: 'sm' | 'md' | 'lg'; + standardLabel?: boolean; + tooltip?: string | default_2.ReactNode; + required?: boolean; + className?: { + root?: string; + label?: string; + tooltip?: string; + error?: string; + switch?: SwitchClassName; + }; +} + +declare interface FormikSwitchFieldProps_2 { + id?: string; + name: string; + data?: { + cy?: string; + test?: string; + }; + disabled?: boolean; + error?: string; + hideError?: boolean; + label?: string; + size?: 'sm' | 'md' | 'lg'; + tooltip?: string | default_2.ReactNode; + required?: boolean; + className?: SwitchClassName; +} + +/** + * This component returns a textarea field that works as to be expected in a Formik environment. + * State can be managed either through Formik or internally by passing a value and onChange function. + * + * @param id - The id of the field. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param name - The name of the field as used to keep track of the state in Formik. If no value and onChange function are provided, this field is required. + * @param label - The optional label is shown next to the field in the form. + * @param labelType - The optional labelType can be used to change the size and position of the label according to pre-defined standards. + * @param tooltip - The optional tooltip is shown on hover next to the label. + * @param required - Indicate whether the field is required or not. + * @param placeholder - The optional placeholder is shown when the field is empty. + * @param value - The value of the field. This is used to manage the state internally. If no name is provided, this field is required. + * @param onChange - The onChange function is called when the value of the field changes. This is used to manage the state internally. If no name is provided, this field is required. + * @param maxLength - The optional maxLength is used to limit the number of characters that can be entered in the field. + * @param maxLengthLabel - This optional label allows to specify a custom label for the maxLength indicator (e.g. "characters left" supporting internationalization). + * @param hideError - Hide the error message below this component as is might be more appropriate to show it somewhere else. + * @param disabled - Disable the field. + * @param className - The optional className object allows you to override the default styling. + * @returns Textarea component with Formik state management. + */ +export declare function FormikTextareaField({ id, data, name, value, onChange, label, labelType, placeholder, tooltip, required, maxLength, maxLengthLabel, hideError, disabled, className, ...props }: TextareaFieldWithNameProps | TextareaFieldWithOnChangeProps): JSX_2.Element; + +declare interface FormikTextareaFieldProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + label?: string; + labelType?: 'small' | 'large'; + placeholder?: string; + tooltip?: string | default_2.ReactNode; + maxLength?: number; + maxLengthUnit?: string; + hideMaxLength?: boolean; + required?: boolean; + hideError?: boolean; + disabled?: boolean; + className?: { + root?: string; + field?: string; + icon?: string; + label?: string; + input?: string; + error?: string; + tooltip?: string; + }; +} + +declare interface FormikTextareaFieldWithNameProps extends FormikTextareaFieldProps { + name: string; + value?: never; + onChange?: never; + error?: never; + [key: string]: any; +} + +declare interface FormikTextareaFieldWithOnChangeProps extends FormikTextareaFieldProps { + name?: never; + value: string; + onChange: (newValue: string) => void; + error?: string; + [key: string]: any; +} + +/** + * This function returns a text field that works as to be expected in a Formik environment. + * State can be managed either through Formik or internally by passing a value and onChange function. + * + * @param id - The id of the field. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param name - The name of the field as used to keep track of the state in Formik. If no value and onChange function are provided, this field is required. + * @param value - The value of the field. This is used to manage the state internally. If no name is provided, this field is required. + * @param onChange - The onChange function is called when the value of the field changes. This is used to manage the state internally. If no name is provided, this field is required. + * @param error - The error message that is shown below the field. If a name is provided, this prop will not be used. + * @param label - The optional label is shown next to the field in the form. + * @param labelType - The optional labelType can be used to change the size and position of the label according to pre-defined standards. + * @param icon - An optional icon (FontAwesomeIcon IconDefinition) that is shown on the right side of the text input component + * @param onIconClick - An optional function that is called when the icon (previous prop) is clicked + * @param placeholder - The optional placeholder is shown when the field is empty. + * @param tooltip - The optional tooltip is shown on hover next to the label. + * @param required - Indicate whether the field is required or not. + * @param hideError - Hide the error message below this component as is might be more appropriate to show it somewhere else. + * @param disabled - Disable the field. + * @param className - The optional className object allows you to override the default styling. + * @returns Text field component with Formik state management. + */ +export declare function FormikTextField({ id, data, name, value, onChange, error, label, labelType, icon, onIconClick, placeholder, tooltip, required, hideError, disabled, className, ...props }: TextFieldWithNameProps | TextFieldWithOnChangeProps): JSX_2.Element; + +declare interface FormikTextFieldProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + label?: string; + labelType?: 'small' | 'large'; + icon?: IconDefinition_2; + onIconClick?: () => void; + placeholder?: string; + tooltip?: string | default_2.ReactNode; + required?: boolean; + hideError?: boolean; + disabled?: boolean; + onPaste?: (e: any) => void; + className?: TextFieldClassName & { + root?: string; + }; +} + +declare interface FormikTextFieldWithNameProps extends FormikTextFieldProps { + name: string; + value?: never; + onChange?: never; + error?: never; + isTouched?: never; + [key: string]: any; +} + +declare interface FormikTextFieldWithOnChangeProps extends FormikTextFieldProps { + name?: never; + value: string; + onChange: (newValue: string) => void; + error?: string; + isTouched?: boolean; + [key: string]: any; +} + +/** + * This function returns a pre-styled header component with custom font similarly sized to the default h1 tag. + * + * @param id - The id of the header. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param className - The optional className object allows you to override the default styling. + * @param children - The content of the header. + * @returns Header H1 component + */ +export declare function H1({ id, data, className, children }: HeaderProps): JSX_2.Element; + +/** + * This function returns a pre-styled header component with custom font similarly sized to the default h2 tag. + * + * @param id - The id of the header. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param className - The optional className object allows you to override the default styling. + * @param children - The content of the header. + * @returns Header H2 component + */ +export declare function H2({ id, data, className, children }: HeaderProps): JSX_2.Element; + +/** + * This function returns a pre-styled header component with custom font similarly sized to the default h3 tag. + * + * @param id - The id of the header. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param className - The optional className object allows you to override the default styling. + * @param children - The content of the header. + * @returns Header H3 component + */ +export declare function H3({ id, data, className, children }: HeaderProps): JSX_2.Element; + +/** + * This function returns a pre-styled header component with custom font similarly sized to the default h4 tag. + * + * @param id - The id of the header. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param className - The optional className object allows you to override the default styling. + * @param children - The content of the header. + * @returns Header H4 component + */ +export declare function H4({ id, data, className, children }: HeaderProps): JSX_2.Element; + +declare interface HeaderProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + className?: { + root?: string; + }; + children: default_2.ReactNode; +} + +declare interface IconItemProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + icon: default_2.ReactNode; + disabled?: boolean; + className?: { + root?: string; + disabled?: string; + }; + style?: { + root?: default_2.CSSProperties; + disabled?: default_2.CSSProperties; + }; +} + +export declare interface IconItemWithHrefProps extends IconItemProps { + href: string; + onClick?: never; +} + +export declare interface IconItemWithOnClickProps extends IconItemProps { + href?: never; + onClick: default_2.MouseEventHandler; +} + +declare interface Item { + id?: string; + data?: { + cy?: string; + test?: string; + }; + label: string | default_2.ReactNode; + onClick: () => void; + shorting?: string; + selected?: boolean; +} + +/** + * This function returns a label component based on the RadixUI label. + * + * @param id - The id of the label. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param forId - The id of the element that the label is for. + * @param label - The text displayed as label. + * @param required - Indicate whether the field is required or not. + * @param tooltip - The optional tooltip is shown on hover over the label. + * @param showTooltipSymbol - Indicate whether the tooltip symbol should be shown or not. + * @param tooltipSymbolSize - The size of the tooltip symbol. + * @param className - The optional className object allows you to override the default styling. + * @returns Label component with optional tooltip and required symbol. + */ +export declare function Label({ id, data, forId, label, required, tooltip, showTooltipSymbol, tooltipSymbolSize, className, }: LabelProps): default_2.ReactElement; + +export declare interface LabelProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + forId?: string; + label: string; + required?: boolean; + tooltip?: string | default_2.ReactNode; + showTooltipSymbol?: boolean; + tooltipSymbolSize?: 'sm' | 'md' | 'lg' | 'xl'; + className?: { + root?: string; + tooltip?: string; + tooltipSymbol?: string; + arrow?: string; + }; +} + +/** + * This function returns a pre-styled modal component based on the RadixUI dialog component and the custom theme. + * + * @param id - The id of the modal. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param dataOverlay - The object of data attributes that can be used for testing (e.g. data-test or data-cy) for the overlay + * @param dataContent - The object of data attributes that can be used for testing (e.g. data-test or data-cy) for the content + * @param dataCloseButton - The object of data attributes that can be used for testing (e.g. data-test or data-cy) for the close button + * @param dataNextButton - The object of data attributes that can be used for testing (e.g. data-test or data-cy) for the next button + * @param dataPrevButton - The object of data attributes that can be used for testing (e.g. data-test or data-cy) for the previous button + * @param trigger - The optional trigger that opens the modal, if the state is not managed by some parent component already. + * @param title - The optional title of the modal. + * @param children - The content of the modal. + * @param onClose - Function that is called when the modal is closed. + * @param onPrev - Function that is called when the optional previous button is clicked. + * @param onNext - Function that is called when the optional next button is clicked. + * @param open - Indicate whether the modal is open or not. This state is managed outside of the component. + * @param onOpenChange - Function that is called when the modal is opened or closed. + * @param fullScreen - Indicate whether the modal should be full screen or not. + * @param onPrimaryAction - The optional primary action button. + * @param onSecondaryAction - The optional secondary action button. + * @param escapeDisabled - Indicate whether the modal should be closed when the escape key is pressed. + * @param hideCloseButton - Indicate whether the close button should be hidden. + * @param className - The optional className object allows you to override the default styling. + * @param asPortal - Whether the contents are rendered in a portal. + * @returns Modal component + */ +export declare function Modal({ id, data, dataOverlay, dataContent, dataCloseButton, dataNextButton, dataPrevButton, trigger, title, children, onClose, onPrev, onNext, open, onOpenChange, fullScreen, className, onPrimaryAction, onSecondaryAction, escapeDisabled, hideCloseButton, asPortal, }: ModalProps): JSX_2.Element; + +export declare interface ModalProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + dataOverlay?: { + cy?: string; + test?: string; + }; + dataContent?: { + cy?: string; + test?: string; + }; + dataCloseButton?: { + cy?: string; + test?: string; + }; + dataNextButton?: { + cy?: string; + test?: string; + }; + dataPrevButton?: { + cy?: string; + test?: string; + }; + className?: { + overlay?: string; + content?: string; + title?: string; + children?: string; + onPrev?: string; + onNext?: string; + }; + children: default_2.ReactNode; + fullScreen?: boolean; + open: boolean; + title?: string | default_2.ReactNode; + trigger?: default_2.ReactNode; + escapeDisabled?: boolean; + hideCloseButton?: boolean; + asPortal?: boolean; + onClose: () => void; + onNext?: () => void; + onOpenChange?: () => void; + onPrev?: () => void; + onPrimaryAction?: default_2.ReactNode; + onSecondaryAction?: default_2.ReactNode; +} + +/** + * This function returns a pre-styled Navigation component based on the RadixUI navigation component and the custom theme. + * + * @param id - The id of the navigation. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param children - The content of the navigation. Children should be subcomponents of the Navigation component like TriggerItem / ButtonItem / CustomItem for the correct functionality. + * @param className - The optional className object allows you to override the default styling. + * @param style - The optional style object allows you to override the default styling using CSS key-value styles. + * @returns Navigation component + */ +export declare function Navigation({ id, data, children, className, style, }: NavigationProps): JSX_2.Element; + +export declare namespace Navigation { + var TriggerItem: ({ id, data, label, icon, dropdownWidth, children, disabled, className, style, }: TriggerIconProps | TriggerLabelProps) => JSX_2.Element; + var DropdownItem: ({ id, data, title, href, onClick, subtitle, icon, className, style, }: DropdownItemWithHrefProps | DropdownItemWithOnClickProps) => JSX_2.Element; + var ButtonItem: ({ id, data, label, disabled, icon, href, onClick, className, style, }: ButtonItemWithHrefProps | ButtonItemWithOnClickProps) => JSX_2.Element; + var IconItem: ({ id, data, icon, disabled, href, onClick, className, style, }: IconItemWithHrefProps | IconItemWithOnClickProps) => JSX_2.Element; + var CustomItem: ({ id, data, children, className, style, }: CustomItemProps) => JSX_2.Element; +} + +export declare interface NavigationProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + children: default_2.ReactNode; + className?: { + root?: string; + indicator?: string; + viewport?: string; + }; + style?: { + root?: default_2.CSSProperties; + indicator?: default_2.CSSProperties; + viewport?: default_2.CSSProperties; + }; +} + +/** + * This component provides a simple date changer with a label and a button to edit the date (not coupled to a formik context). + * + * @param id - The id of the date changer + * @param name - The name of the field as used to keep track of the state in Formik. + * @param label - The label of the date changer + * @param labelType - The type of the label (small or large) + * @param tooltip - The tooltip of the date changer (is only shown if a label is given) + * @param required - Whether the date label should contain a required symbol + * @param disabled - Whether the date changer is disabled or not + * @param hideError - Whether the error message should be hidden + * @param format - The format of the date when the edit mode is not active (then the display is up to the browser implementation) + * @param date - The date to be displayed + * @param editIcon - The icon to be displayed on the edit button + * @param validateField - Function to trigger validation of the field under consideration + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param dataButton - The object of data attributes that can be used for testing (e.g. data-test or data-cy) for the button + * @param className - The optional className object allows you to override the default styling. + * @returns Date changer component with optional label, edit button and save button. + */ +export declare function NewFormikDateChanger({ id, name, label, labelType, tooltip, required, disabled, hideError, format, editIcon, validateField, data, dataButton, className, }: FormikDateChangerProps_2): JSX_2.Element; + +/** + * This function returns a date field that works as to be expected in a Formik environment. + * State is managed by Formik through the name attribute. + * + * @param id - The id of the field. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param name - The name of the field as used to keep track of the state in Formik. + * @param label - The optional label is shown next to the field in the form. + * @param labelType - The optional labelType can be used to change the size and position of the label according to pre-defined standards. + * @param placeholder - The optional placeholder is shown when the field is empty. + * @param tooltip - The optional tooltip is shown on hover next to the label. + * @param required - Indicate whether the field is required or not. + * @param hideError - Hide the error message below this component as is might be more appropriate to show it somewhere else. + * @param disabled - Disable the field. + * @param className - The optional className object allows you to override the default styling. + * @returns Date field component with Formik state management. + */ +export declare function NewFormikDateField({ id, data, name, label, labelType, placeholder, tooltip, required, hideError, disabled, className, ...props }: NewFormikDateFieldProps): JSX_2.Element; + +declare interface NewFormikDateFieldProps { + id?: string; + name: string; + data?: { + cy?: string; + test?: string; + }; + label?: string; + labelType?: 'small' | 'large'; + placeholder?: string; + tooltip?: string | default_2.ReactNode; + required?: boolean; + hideError?: boolean; + disabled?: boolean; + className?: { + root?: string; + field?: string; + label?: string; + input?: string; + error?: string; + tooltip?: string; + }; + [key: string]: any; +} + +export declare function NewFormikPinField({ id, name, required, label, labelType, tooltip, className, data, }: FormikPinFieldProps): JSX_2.Element; + +/** + * This component returns a select field that works as to be expected in a Formik environment. + * State is managed by Formik through the name attribute. + * + * @param id - The id of the field. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param name - The name of the field. + * @param items - The array of items that should be available on the select component. + * @param groups - The optional groups array can be used to group items in the select component. + * @param label - The optional label is shown next to the field in the form. + * @param labelType - The optional labelType can be used to change the size and position of the label according to pre-defined standards. + * @param placeholder - The optional placeholder is shown when no value is selected / initialization with 'undefined' is chosen. + * @param disabled - The optional disabled prop disables the select component. + * @param error - The optional error message is shown next to the component. + * @param hideError - Hide the error message below this component as is might be more appropriate to show it somewhere else. + * @param contentPosition - The position of the content of the select component. Currently only 'item-aligned' and 'popper' are supported. + * @param tooltip - The optional tooltip is shown on hover next to the label. + * @param required - Indicate whether the field is required or not. + * @param className - The optional className object allows you to override the default styling. + * @returns Select component with formik state management. + */ +export declare function NewFormikSelectField({ id, data, name, items, groups, label, labelType, placeholder, tooltip, required, disabled, error, hideError, contentPosition, className, ...props }: FormikSelectFieldItemsProps_2 | FormikSelectFieldGroupsProps_2): JSX_2.Element; + +/** + * This function extends the pre-styled Switch component so that it works as to be expected in a Formik environment. + * State, in this case, is managed by Formik through the name attribute. + * + * @param id - The id of the switch. + * @param name - The name of the field. This is used to identify the field in Formik. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param label - The label that is displayed next to the switch. + * @param disabled - Indicator whether the switch is disabled or not. + * @param error - The error message that is shown below the switch. + * @param hideError - Indicator whether the error message is displayed or not. + * @param size - The size of the switch. The size can be small, medium or large. + * @param tooltip - The tooltip that is displayed when hovering over the label. Tooltips are only available with the standardLabel setting. + * @param required - Indicator whether the field is required or not. This is only available with the standardLabel setting. + * @param className - The optional className object allows you to override the default styling. + * @returns Switch component with formik state management + */ +export declare function NewFormikSwitchField({ id, name, data, disabled, error, hideError, label, size, required, tooltip, className, }: FormikSwitchFieldProps_2): JSX_2.Element; + +/** + * This function returns a text field that works as to be expected in a Formik environment. + * State can be managed either through Formik or internally by passing a value and onChange function. + * + * @param id - The id of the field. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param name - The name of the field as used to keep track of the state in Formik. If no value and onChange function are provided, this field is required. + * @param value - The value of the field. This is used to manage the state internally. If no name is provided, this field is required. + * @param onChange - The onChange function is called when the value of the field changes. This is used to manage the state internally. If no name is provided, this field is required. + * @param error - The error message that is shown below the field. If a name is provided, this prop will not be used. + * @param label - The optional label is shown next to the field in the form. + * @param labelType - The optional labelType can be used to change the size and position of the label according to pre-defined standards. + * @param placeholder - The optional placeholder is shown when the field is empty. + * @param tooltip - The optional tooltip is shown on hover next to the label. + * @param maxLength - The optional maxLength is shown below the field to indicate the maximum number of characters allowed. + * @param maxLengthUnit - The optional maxLengthUnit is shown next to the maxLength to indicate the unit of the maximum number of characters allowed. + * @param hideMaxLength - Indicate whether the maxLength should be hidden or not. + * @param required - Indicate whether the field is required or not. + * @param hideError - Hide the error message below this component as is might be more appropriate to show it somewhere else. + * @param disabled - Disable the field. + * @param className - The optional className object allows you to override the default styling. + * @returns Text field component with Formik state management. + */ +export declare function NewFormikTextareaField({ id, data, name, value, onChange, error, label, labelType, icon, onIconClick, placeholder, tooltip, required, hideError, disabled, className, ...props }: FormikTextareaFieldWithNameProps | FormikTextareaFieldWithOnChangeProps): JSX_2.Element; + +/** + * This function returns a text field that works as to be expected in a Formik environment. + * State can be managed either through Formik or internally by passing a value and onChange function. + * + * @param id - The id of the field. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param name - The name of the field as used to keep track of the state in Formik. If no value and onChange function are provided, this field is required. + * @param value - The value of the field. This is used to manage the state internally. If no name is provided, this field is required. + * @param onChange - The onChange function is called when the value of the field changes. This is used to manage the state internally. If no name is provided, this field is required. + * @param error - The error message that is shown below the field. If a name is provided, this prop will not be used. + * @param label - The optional label is shown next to the field in the form. + * @param labelType - The optional labelType can be used to change the size and position of the label according to pre-defined standards. + * @param icon - An optional icon (FontAwesomeIcon IconDefinition) that is shown on the right side of the text input component + * @param onIconClick - An optional function that is called when the icon (previous prop) is clicked + * @param placeholder - The optional placeholder is shown when the field is empty. + * @param tooltip - The optional tooltip is shown on hover next to the label. + * @param required - Indicate whether the field is required or not. + * @param hideError - Hide the error message below this component as is might be more appropriate to show it somewhere else. + * @param disabled - Disable the field. + * @param onPaste - An optional function that is called when the user pastes text into the field. + * @param className - The optional className object allows you to override the default styling. + * @returns Text field component with Formik state management. + */ +export declare function NewFormikTextField({ id, data, name, value, onChange, error, label, labelType, icon, onIconClick, placeholder, tooltip, required, hideError, isTouched, disabled, onPaste, className, ...props }: FormikTextFieldWithNameProps | FormikTextFieldWithOnChangeProps): JSX_2.Element; + +/** + * This function returns a text field component for use without formik + * + * @param id - The id of the input field. + * @param value - The value of the input field (external state management). + * @param onChange - The onChange function of the input field (external state management). + * @param label - The text displayed as label. + * @param labelType - The optional labelType can be used to change the size and position of the label according to pre-defined standards. + * @param placeholder - The placeholder text for the input field. + * @param precision - The optional precision defines the number of decimal places that are allowed. + * @param min - The optional min defines the minimum value that is allowed. + * @param max - The optional max defines the maximum value that is allowed. + * @param tooltip - The optional tooltip is shown on hover over the tooltip next to the label. + * @param required - Indicate whether the field is required or not. + * @param hideError - Indicate whether the error message should be hidden or not. + * @param error - The error message that is displayed below the input field. + * @param isTouched - Indicate whether the field has been touched or not (validation is not handled by this component). + * @param disabled - Indicate whether the field is disabled or not. + * @param onBlur - The onBlur function of the input field. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param className - The optional className object allows you to override the default styling. + */ +export declare function NewFromikNumberField({ id, name, value, onChange, label, labelType, placeholder, precision, min, max, tooltip, required, hideError, error, isTouched, disabled, onBlur, data, className, ...props }: FormikNumberFieldNameProps | FormikNumberFieldOnChangeProps): JSX_2.Element; + +/** + * This function returns a pre-styled wrapper for some custom component with navigation badge on it. + * + * @param id - The id of the notification badge wrapper. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param count - The number of notifications to be displayed on the badge. If no count is provided, the badge will be displayed as a simple red notification dot. + * @param showBadge - If true, the badge will be displayed as a red dot, even if the number notifications is undefined. + * @param size - The size of the badge (can be small, medium, large or extra large). + * @param className - The optional className object allows you to override the default styling. + * @param children - The component the notification badge should be placed on. + * @returns Notification badge wrapper component + */ +export declare function NotificationBadgeWrapper({ id, data, count, showBadge, size, className, children, }: NotificationBadgeWrapperProps): default_2.ReactElement; + +declare interface NotificationBadgeWrapperProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + count?: number; + showBadge?: boolean; + size?: 'sm' | 'md' | 'lg' | 'xl'; + className?: { + root?: string; + badge?: string; + }; + children: default_2.ReactNode; +} + +/** + * This function returns a text field component for use without formik + * + * @param id - The id of the input field. + * @param value - The value of the input field (external state management). + * @param onChange - The onChange function of the input field (external state management). + * @param label - The text displayed as label. + * @param labelType - The optional labelType can be used to change the size and position of the label according to pre-defined standards. + * @param placeholder - The placeholder text for the input field. + * @param precision - The optional precision defines the number of decimal places that are allowed. + * @param min - The optional min defines the minimum value that is allowed. + * @param max - The optional max defines the maximum value that is allowed. + * @param tooltip - The optional tooltip is shown on hover over the tooltip next to the label. + * @param required - Indicate whether the field is required or not. + * @param hideError - Indicate whether the error message should be hidden or not. + * @param error - The error message that is displayed below the input field. + * @param isTouched - Indicate whether the field has been touched or not (validation is not handled by this component). + * @param disabled - Indicate whether the field is disabled or not. + * @param onBlur - The onBlur function of the input field. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param className - The optional className object allows you to override the default styling. + */ +export declare function NumberField({ id, value, onChange, label, labelType, placeholder, precision, min, max, tooltip, required, hideError, error, isTouched, disabled, onBlur, data, className, ...props }: NumberFieldProps): default_2.ReactElement; + +export declare interface NumberFieldClassName { + field?: string; + label?: string; + input?: string; + error?: string; + tooltip?: string; +} + +export declare interface NumberFieldProps { + id?: string; + value: string | number; + onChange: (newValue: string) => void; + label?: string; + labelType?: 'small' | 'large'; + placeholder?: string; + precision?: number; + min?: number; + max?: number; + tooltip?: string | default_2.ReactNode; + required?: boolean; + hideError?: boolean; + error?: string; + isTouched?: boolean; + disabled?: boolean; + onBlur?: () => void; + data?: { + cy?: string; + test?: string; + }; + className?: NumberFieldClassName; + [key: string]: any; +} + +export declare function PinField({ id, name, required, label, labelType, tooltip, className, data, }: PinFieldProps): JSX_2.Element; + +export declare interface PinFieldProps { + id?: string; + name: string; + required?: boolean; + label?: string; + labelType?: 'small' | 'normal'; + tooltip?: string | default_2.ReactNode; + className?: { + root?: string; + field?: string; + label?: string; + error?: string; + tooltip?: string; + }; + data?: { + cy?: string; + test?: string; + }; +} + +/** + * This function returns a pre-styled Progress component based on the RadixUI progress component and the custom theme. + * + * @param id - The id of the progress bar. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param value - The value of the progress bar. The value should be between 0 and an optionally provided max value. + * @param offset - The number that determines the offset of the progress bar. The offset is subtracted from the value. + * @param max - The maximum value of the progress bar. + * @param formatter - The function that formats the value of the progress bar. + * @param isMaxVisible - The boolean that determines if the maximum value should be displayed. + * @param className - The optional className object allows you to override the default styling. + * @return Progress component + */ +export declare function Progress({ id, data, formatter, value, offset, max, className, isMaxVisible, ...props }: ProgressProps): JSX_2.Element; + +export declare interface ProgressProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + value: number; + offset?: number; + max: number; + formatter: (value: any) => any; + isMaxVisible?: boolean; + className?: { + root?: string; + indicator?: string; + }; + [x: string]: any; +} + +/** + * This function returns a pre-styled prose component based on TailwindCSS prose and the custom theme. + * + * @param id - The id of the prose component. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param children - The content of the prose component. + * @param className - The optional className object allows you to override the default styling. + * @returns Children with the standard prose and some custom styling applied to them. + */ +export declare function Prose({ id, data, className, children }: ProseProps): JSX_2.Element; + +export declare interface ProseProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + className?: { + root?: string; + }; + children: default_2.ReactNode; +} + +/** + * This function returns a pre-styled Select component based on the RadixUI select component and the custom theme. + * While the open state of the component is managed internally, the value of the component is managed externally and passed to the function. + * + * @param id - The id of the select component. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param items - The array of items that are displayed in the select component. This prop is mutually exclusive with the groups prop. If items are provided, the component does not look for groups anymore. + * @param groups - The array of groups that are displayed in the select component. This prop is mutually exclusive with the items prop. + * @param name - The name attribute of the select component needed for Formik integration --> see FormikSelectField + * @param onChange - The function that is called when the value of the select component changes (changes externally managed value). + * @param onBlur - The function that is called when the viewport of the select component is closed. + * @param value - The current value of the select component (managed externally). + * @param defaultValue - The default value of the select component set initially. + * @param placeholder - The placeholder text that is displayed when no value is selected. + * @param disabled - Specifies whether the select component is disabled or not. + * @param size - The size of the select component. Currently only medium and small are supported. + * @param basic - Specifies whether the select component is basic or not. A basic select component does only have minimal styling of the trigger. + * @param className - The optional className object allows you to override the default styling. + * @param asPortal - If true, the select component is rendered as a portal. + * @param contentPosition - The position of the content of the select component. Currently only 'item-aligned' and 'popper' are supported. + * @return Select component + */ +export declare function Select({ id, data, items, groups, onChange, onBlur, value, disabled, size, className, name, placeholder, defaultValue, basic, asPortal, contentPosition, }: SelectWithItemsProps | SelectWithGroupsProps): JSX_2.Element; + +export declare interface SelectClassName { + root?: string; + trigger?: string; + content?: string; + item?: string; + text?: string; + scrollButton?: string; + groupLabel?: string; + separator?: string; +} + +/** + * This component returns a select field that works as to be expected in a Formik environment. + * State is managed by Formik through the name attribute. + * + * @param id - The id of the field. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param name - The name of the field. + * @param items - The array of items that should be available on the select component. + * @param groups - The optional groups array can be used to group items in the select component. + * @param value - The value of the field (external state management). + * @param onChange - The onChange function of the field (external state management). + * @param onBlur - The onBlur function of the field (external state management). + * @param label - The optional label is shown next to the field in the form. + * @param labelType - The optional labelType can be used to change the size and position of the label according to pre-defined standards. + * @param placeholder - The optional placeholder is shown when no value is selected / initialization with 'undefined' is chosen. + * @param disabled - The optional disabled prop disables the select component. + * @param error - The optional error message is shown next to the component. + * @param hideError - Hide the error message below this component as is might be more appropriate to show it somewhere else. + * @param contentPosition - The position of the content of the select component. Currently only 'item-aligned' and 'popper' are supported. + * @param tooltip - The optional tooltip is shown on hover next to the label. + * @param required - Indicate whether the field is required or not. + * @param className - The optional className object allows you to override the default styling. + * @returns Select component with formik state management. + */ +export declare function SelectField({ id, data, name, items, groups, value, onChange, onBlur, label, labelType, placeholder, tooltip, required, disabled, error, hideError, contentPosition, className, ...props }: SelectFieldItemsProps | SelectFieldGroupsProps): JSX_2.Element; + +export declare interface SelectFieldGroupsProps extends SelectFieldProps { + groups: SelectGroup[]; + items?: never; +} + +export declare interface SelectFieldItemsProps extends SelectFieldProps { + items: SelectItem[]; + groups?: never; +} + +declare interface SelectFieldProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + name?: string; + value: string; + onChange: (newValue: string) => void; + onBlur?: () => void; + label?: string; + labelType?: 'small' | 'large'; + placeholder?: string; + tooltip?: string | default_2.ReactNode; + required?: boolean; + disabled?: boolean; + error?: string; + hideError?: boolean; + contentPosition?: 'item-aligned' | 'popper'; + className?: { + root?: string; + label?: string; + error?: string; + tooltip?: string; + select?: SelectClassName; + }; +} + +export declare interface SelectGroup { + label?: string; + showSeparator?: boolean; + items: SelectItem[]; +} + +export declare interface SelectItem { + id?: string; + data?: { + cy?: string; + test?: string; + }; + value: string; + disabled?: boolean; + label: string; + shortLabel?: string; +} + +declare interface SelectProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + name?: string; + onChange: (newValue: string) => void; + onBlur?: () => void; + value?: string; + disabled?: boolean; + size?: 'md' | 'sm'; + className?: SelectClassName; + placeholder?: string; + defaultValue?: string; + basic?: boolean; + asPortal?: boolean; + contentPosition?: 'item-aligned' | 'popper'; +} + +export declare interface SelectWithGroupsProps extends SelectProps { + groups: SelectGroup[]; + items?: never; +} + +export declare interface SelectWithItemsProps extends SelectProps { + items: SelectItem[]; + groups?: never; +} + +/** + * This function returns a pre-styled Slider component based on the RadixUI slider component and the custom theme. + * + * @param id - The id of the slider. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param value - The value of the slider. The value should be between the min and max value and is maintained by the parent component. + * @param labels - The labels that are displayed on the slider. The labels and icons props should be mutually exclusive. + * @param icons - The icons that are displayed on the slider. The labels and icons props should be mutually exclusive. + * @param handleChange - The function that is called when the slider value is changed. The new value is passed as a parameter. + * @param min - The minimum value of the slider. + * @param max - The maximum value of the slider. + * @param step - The step size of the slider. + * @param disabled - Indicator whether the slider is disabled or not. + * @param rangeColorMap - A map that maps a range of values to colors. The color is used to color the range of the slider. The length of the map should be equal to the number of steps and the keys should correspond to the possible values of the slider. + * @param borderColorMap - A map that maps a range of values to colors. The color is used to color the thumb of the slider. The length of the map should be equal to the number of steps and the keys should correspond to the possible values of the slider. + * @param className - The optional className object allows you to override the default styling. + * @returns Slider component. + */ +export declare function Slider({ id, data, value, labels, handleChange, min, max, step, disabled, icons, rangeColorMap, borderColorMap, className, }: SliderWithLabelProps | SliderWithIconsProps): default_2.ReactElement; + +declare interface SliderProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + value: number; + handleChange: (newValue: number) => void; + min: number; + max: number; + step: number; + disabled?: boolean; + rangeColorMap?: Record; + borderColorMap?: Record; + className?: { + root?: string; + icons?: string; + labels?: string; + range?: string; + thumb?: string; + }; +} + +export declare interface SliderWithIconsProps extends SliderProps { + icons: { + min: default_2.ReactNode; + mid: default_2.ReactNode; + max: default_2.ReactNode; + }; + labels?: never; +} + +export declare interface SliderWithLabelProps extends SliderProps { + labels: { + min: string; + mid: string; + max: string; + }; + icons?: never; +} + +declare interface StepBaseProps { + title: string; + description?: string; + tooltip?: string; + tooltipDisabled?: string; + progress?: number; + completed?: boolean; + [x: string]: unknown; +} + +export declare interface StepItem { + [x: string]: any; +} + +/** + * This function returns a pre-styled Progress component based on the RadixUI progress component and the custom theme. + * + * @param id - The id of the progress bar. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param value - The value of the progress bar. The value should be between 0 and an optionally provided max value. + * @param max - The maximum value of the progress bar. + * @param items - The array of items that are displayed in the step progress bar. + * @param onItemClick - The function that is called when an item is clicked. + * @param displayOffsetLeft - The number that determines the maximum number of elements that are shown to the left of the current value on the step progress bar. + * @param displayOffsetRight - The number that determines the maximum number of elements that are shown to the right of the current value on the step progress bar. + * @param className - The optional className object allows you to override the default styling. + * @param formatter - The optional formatter function allows you to override the rendering of each item. + * @return Step progress component + */ +export declare function StepProgress({ id, data, value, max, items, onItemClick, displayOffsetLeft, displayOffsetRight, className, formatter, }: StepProgressProps | StepProgressItemProps): JSX_2.Element; + +declare interface StepProgressBaseProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + value?: number; + onItemClick: (ix: number, item?: StepItem) => void; + displayOffsetLeft?: number; + displayOffsetRight?: number; + className?: { + root?: string; + }; + formatter?: ({ element, ix }: { + element: StepItem; + ix: number; + }) => { + className?: string; + element: default_2.ReactNode; + }; +} + +export declare interface StepProgressItemProps extends StepProgressBaseProps { + max?: never; + items: StepItem[]; +} + +export declare interface StepProgressProps extends StepProgressBaseProps { + max: number; + items?: never; +} + +declare interface StepProgressProps_2 extends StepBaseProps { + progress: number; + completed?: boolean; +} + +declare interface StepProps extends StepBaseProps { + progress?: never; + completed?: never; +} + +/** + * This function returns a pre-styled Switch component based on the RadixUI switch component and the custom theme. + * The state of the switch is maintained by the parent component. + * + * @param id - The id of the switch. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param label - The label that is displayed next to the switch. + * @param tooltip - The tooltip that is displayed when hovering over the label. + * @param checked - Indicator whether the switch is checked or not (or indefinite if undefined value). State is managed by the parent component. + * @param onCheckedChange - The function that is called when the switch is checked or unchecked. The new value is passed as a parameter. + * @param onBlur - The function that is called when the switch loses focus. + * @param disabled - Indicator whether the switch is disabled or not. + * @param fluid - Indicator whether the switch should be fluid or not. + * @param error - The error message that is shown next the switch. + * @param hideError - Indicator whether the error message should be hidden or not. + * @param required - Indicator whether the switch is required or not. + * @param labelLeft - Indicator whether the label should be displayed on the left or right side of the switch. + * @param size - The size of the switch. The size can be small, medium or large. + * @param className - The optional className object allows you to override the default styling. + * @returns Switch component + */ +export declare function Switch({ id, data, disabled, label, tooltip, checked, onCheckedChange, onBlur, fluid, error, hideError, required, labelLeft, size, className, }: SwitchProps): JSX_2.Element; + +export declare interface SwitchClassName { + root?: string; + element?: string; + thumb?: string; + label?: string; +} + +export declare interface SwitchProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + checked?: boolean; + onCheckedChange: (newValue: boolean) => void; + onBlur?: () => void; + disabled?: boolean; + label?: string; + tooltip?: string | default_2.ReactNode; + fluid?: boolean; + error?: string; + hideError?: boolean; + required?: boolean; + labelLeft?: boolean; + size?: 'sm' | 'md' | 'lg'; + className?: SwitchClassName; +} + +/** + * This function returns a pre-styled Tab trigger component to be used inside a Tabs.Tablist. + * The value of this tab is required for both the internally and externally controlled state. + * + * @param id - The id of the tab. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param key - The key of the tab. + * @param value - The value of the tab. This is required for the internal and external state. + * @param label - The label of the tab. + * @param children - A child component of the tab header, which can optionally replace the label + * @param disabled - The optional disabled property allows you to disable the tab. + * @param className - The optional className object allows you to override the default styling. + * @returns Tab trigger component + */ +export declare function Tab({ id, data, key, value, label, children, disabled, className, }: TabPropsWithLabel_2 | TabPropsWithChildren_2): JSX_2.Element; + +/** + * This function returns a pre-styled Tab trigger component to be used inside a Tabs.Tablist. + * The value of this tab is required for both the internally and externally controlled state. + * + * @param id - The id of the tab. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param key - The key of the tab. + * @param value - The value of the tab. This is required for the internal and external state. + * @param label - The label of the tab. + * @param children - A child component of the tab header, which can optionally replace the label + * @param disabled - The optional disabled property allows you to disable the tab. + * @param className - The optional className object allows you to override the default styling. + * @returns Tab trigger component + */ +declare function Tab_2({ + id, + data, + key, + value, + label, + children, + disabled, + className, +}: TabPropsWithLabel | TabPropsWithChildren) { + return ( + + + {label ?? children} + + + ) +} + +/** + * This function returns a pre-styled TabContent component to be used inside a Tabs component. + * The value of this tab is required for both the internally and externally controlled state. + * + * @param id The id of the tab content. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param key The key of the tab. + * @param value The value of the tab. This is required for the internal and external state. + * @param children The content of the tab should be passed as children to this component. + * @param className The optional className object allows you to override the default styling. + * @returns Tab Content component + */ +export declare function TabContent({ id, data, key, value, children, className, }: PropsWithChildren): JSX_2.Element; + +/** + * This function returns a pre-styled TabContent component to be used inside a Tabs component. + * The value of this tab is required for both the internally and externally controlled state. + * + * @param id The id of the tab content. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param key The key of the tab. + * @param value The value of the tab. This is required for the internal and external state. + * @param children The content of the tab should be passed as children to this component. + * @param className The optional className object allows you to override the default styling. + * @returns Tab Content component + */ +declare function TabContent_2({ + id, + data, + key, + value, + children, + className, +}: PropsWithChildren) { + return ( + + {children} + + ) +} + +declare interface TabContentProps { + id?: string + data?: { + cy?: string + test?: string + } + key: string + value: string + className?: { + root?: string + } +} + +declare interface TabContentProps_2 { + id?: string; + data?: { + cy?: string; + test?: string; + }; + key: string; + value: string; + className?: { + root?: string; + }; +} + +/** + * This function returns a pre-styled Table component based on the RadixUI table component and the custom theme. + * The table is sortable by clicking on the column header. + * Before the table is being sorted according to the sorting parameters, the transformer will be applied to the data. + * The formatter is meant to be used for visual modifications of the fields and applied after sorting. + * + * @param id - The id of the table. + * @param dataAttributes - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param columns - The columns of the table. The columns are defined by an array of objects where each object has a label, an accessor and optional transformer and formatters. + * @param data - The data of the table. The data is defined by an array of objects where each object has a key-value pair for each column. + * @param caption - The optional caption of the table. + * @param ref - The optional ref object allows you to access the table methods. + * @param className - The optional className object allows you to override the default styling. + * @param forwardedRef - The optional forwardedRef object allows you to access table methods from the parent component. + * @param emptyCellText - The optional emptyCellText allows you to define the text that should be displayed in empty cells. + * @param defaultSortField - The optional defaultSortField allows you to define the default sorting field. + * @param defaultSortOrder - The optional defaultSortOrder allows you to define the default sorting order. + * @returns Table component + */ +export declare function Table>({ id, dataAttributes, columns, data, caption, className, forwardedRef, emptyCellText, defaultSortField, defaultSortOrder, }: TableProps): JSX_2.Element; + +export declare interface TableProps { + id?: string; + dataAttributes?: { + cy?: string; + test?: string; + }; + columns: ColumnType[]; + data: RowType[]; + caption?: string; + className?: { + root?: string; + tableHeader?: string; + body?: string; + row?: string; + }; + forwardedRef?: default_2.Ref; + emptyCellText?: string; + defaultSortField?: string; + defaultSortOrder?: 'asc' | 'desc'; +} + +/** + * This function returns a pre-styled TabList component to be used inside a Tabs component. + * + * @param id The id of the tab list. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param children The tab triggers should be passed as children to this component. + * @param className The optional className object allows you to override the default styling. + * @returns TabList component + */ +export declare function TabList({ id, data, children, className, }: PropsWithChildren): JSX_2.Element; + +/** + * This function returns a pre-styled TabList component to be used inside a Tabs component. + * + * @param id The id of the tab list. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param children The tab triggers should be passed as children to this component. + * @param className The optional className object allows you to override the default styling. + * @returns TabList component + */ +declare function TabList_2({ + id, + data, + children, + className, +}: PropsWithChildren) { + return ( + + {children} + + ) +} + +declare interface TabListProps { + id?: string + data?: { + cy?: string + test?: string + } + className?: { + root?: string + } +} + +declare interface TabListProps_2 { + id?: string; + data?: { + cy?: string; + test?: string; + }; + className?: { + root?: string; + }; +} + +declare interface TabProps { + id?: string + data?: { + cy?: string + test?: string + } + key?: string + value: string + label?: string + children?: React_2.ReactNode + disabled?: boolean + className?: { + root?: string + label?: string + disabled?: string + } +} + +declare interface TabProps_2 { + id?: string; + data?: { + cy?: string; + test?: string; + }; + key?: string; + value: string; + label?: string; + children?: default_2.ReactNode; + disabled?: boolean; + className?: { + root?: string; + label?: string; + disabled?: string; + }; +} + +declare interface TabPropsWithChildren extends TabProps { + label?: never + children: React_2.ReactNode +} + +declare interface TabPropsWithChildren_2 extends TabProps_2 { + label?: never; + children: default_2.ReactNode; +} + +declare interface TabPropsWithLabel extends TabProps { + label: string + children?: never +} + +declare interface TabPropsWithLabel_2 extends TabProps_2 { + label: string; + children?: never; +} + +/** + * This function returns a pre-styled TabList component based on the RadixUI TabList component and the custom theme. + * The active tab / component state can be either controlled internally or controlled through the parent component. + * + * @param id The id of the tab list. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param defaultValue The default value of the tab that is active when the component is initially rendered. + * @param value The value of the tab that is active. This value is required, if the state is controlled by the parent component. + * @param onValueChange The function that is called when the active tab is changed. The new value is passed as a parameter. This function is required, if the state is controlled by the parent component. + * @param children The tab list and content should be passed as children to this component. + * @param className The optional className object allows you to override the default styling. + * @returns Tabs wrapper component + */ +export declare function Tabs({ id, data, defaultValue, value, children, onValueChange, className, }: PropsWithChildren): JSX_2.Element; + +export declare namespace Tabs { + var Tab: Tab_2; + var TabList: TabList_2; + var TabContent: TabContent_2; +} + +declare interface TabsProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + defaultValue: string; + value?: string; + onValueChange?: (newValue: string) => void; + className?: { + root?: string; + }; +} + +/** + * This function returns a pre-styled tag component + * + * @param id - The id of the tag. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param label - The label of the tag. + * @param className - The optional className object allows you to override the default styling. + * @returns Tag component + */ +export declare function Tag({ id, data, className, label }: TagProps): JSX_2.Element; + +export declare interface TagProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + className?: { + root?: string; + }; + label: string; +} + +/** + * This function returns a text field component for use without formik + * + * @param id - The id of the input field. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param name - The name of the input field. + * @param field - The field object from formik. + * @param value - The value of the input field (external state management). + * @param onChange - The onChange function of the input field (external state management). + * @param label - The text displayed as label. + * @param labelType - The optional labelType can be used to change the size and position of the label according to pre-defined standards. + * @param placeholder - The placeholder text for the input field. + * @param tooltip - The optional tooltip is shown on hover over the tooltip next to the label. + * @param maxLength - The optional maxLength is used to limit the number of characters that can be entered in the field. + * @param maxLengthUnit - This optional label allows to specify a custom label for the maxLength indicator (e.g. "characters left" supporting internationalization). + * @param hideMaxLength - Indicate whether the maxLength indicator should be hidden or not. + * @param required - Indicate whether the field is required or not. + * @param isTouched - Indicate whether the field has been touched or not (validation is not handled by this component). + * @param hideError - Indicate whether the error message should be hidden or not. + * @param error - The error message that is shown below the field. + * @param disabled - Indicate whether the field is disabled or not. + * @param className - The optional className object allows you to override the default styling. + * @returns Text field component with optional label, tooltip, error message and icon. + */ +export declare function TextareaField({ id, data, name, field, value, onChange, label, labelType, placeholder, tooltip, maxLength, maxLengthUnit, hideMaxLength, required, isTouched, hideError, error, disabled, className, ...props }: TextareaFieldNameProps | TextareaFieldOnChangeProps): JSX_2.Element; + +export declare interface TextareaFieldNameProps extends TextareaFieldProps_2 { + name: string; + field: FieldInputProps; + value?: never; + onChange?: never; + [key: string]: any; +} + +export declare interface TextareaFieldOnChangeProps extends TextareaFieldProps_2 { + name?: never; + field?: never; + value: string; + onChange: (newValue: string) => void; + [key: string]: any; +} + +export declare interface TextareaFieldProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + label?: string; + labelType?: 'small' | 'normal'; + placeholder?: string; + tooltip?: string | default_2.ReactNode; + required?: boolean; + maxLength?: number; + maxLengthLabel?: string; + hideError?: boolean; + disabled?: boolean; + className?: { + root?: string; + field?: string; + label?: string; + input?: string; + error?: string; + tooltip?: string; + }; +} + +declare interface TextareaFieldProps_2 { + id?: string; + data?: { + cy?: string; + test?: string; + }; + label?: string; + labelType?: 'small' | 'large'; + placeholder?: string; + tooltip?: string | default_2.ReactNode; + maxLength?: number; + maxLengthUnit?: string; + hideMaxLength?: boolean; + required?: boolean; + hideError?: boolean; + error?: string; + isTouched?: boolean; + disabled?: boolean; + className?: { + root?: string; + field?: string; + label?: string; + input?: string; + error?: string; + tooltip?: string; + }; +} + +export declare interface TextareaFieldWithNameProps extends TextareaFieldProps { + name: string; + value?: never; + onChange?: never; + [key: string]: any; +} + +export declare interface TextareaFieldWithOnChangeProps extends TextareaFieldProps { + name?: never; + value: string; + onChange: (newValue: string) => void; + [key: string]: any; +} + +/** + * This function returns a text field component for use without formik + * + * @param id - The id of the input field. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param name - The name of the input field. + * @param field - The field object from formik. + * @param value - The value of the input field (external state management). + * @param onChange - The onChange function of the input field (external state management). + * @param label - The text displayed as label. + * @param labelType - The optional labelType can be used to change the size and position of the label according to pre-defined standards. + * @param placeholder - The placeholder text for the input field. + * @param tooltip - The optional tooltip is shown on hover over the tooltip next to the label. + * @param required - Indicate whether the field is required or not. + * @param isTouched - Indicate whether the field has been touched or not (validation is not handled by this component). + * @param hideError - Indicate whether the error message should be hidden or not. + * @param error - The error message that is shown below the field. + * @param disabled - Indicate whether the field is disabled or not. + * @param onPaste - The optional onPaste function is called when the user pastes text into the input field. + * @param className - The optional className object allows you to override the default styling. + * @param icon - The optional icon is shown on the right side of the input field. + * @returns Text field component with optional label, tooltip, error message and icon. + */ +export declare function TextField({ id, data, name, field, value, onChange, label, labelType, placeholder, tooltip, required, isTouched, hideError, error, disabled, onPaste, className, icon, ...props }: TextFieldNameProps | TextFieldOnChangeProps): JSX_2.Element; + +export declare interface TextFieldClassName { + field?: string; + label?: string; + input?: string; + error?: string; + tooltip?: string; +} + +export declare interface TextFieldNameProps extends TextFieldProps_2 { + name: string; + field: FieldInputProps; + value?: never; + onChange?: never; + [key: string]: any; +} + +export declare interface TextFieldOnChangeProps extends TextFieldProps_2 { + name?: never; + field?: never; + value: string; + onChange: (newValue: string) => void; + [key: string]: any; +} + +declare interface TextFieldProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + label?: string; + labelType?: 'small' | 'normal'; + icon?: IconDefinition_2; + onIconClick?: () => void; + placeholder?: string; + tooltip?: string | default_2.ReactNode; + required?: boolean; + hideError?: boolean; + disabled?: boolean; + className?: { + root?: string; + field?: string; + icon?: string; + label?: string; + input?: string; + error?: string; + tooltip?: string; + }; +} + +declare interface TextFieldProps_2 { + id?: string; + data?: { + cy?: string; + test?: string; + }; + label?: string; + labelType?: 'small' | 'large'; + placeholder?: string; + tooltip?: string | default_2.ReactNode; + required?: boolean; + hideError?: boolean; + error?: string; + isTouched?: boolean; + disabled?: boolean; + onPaste?: (e: any) => void; + className?: TextFieldClassName; + icon?: IconProp; +} + +export declare interface TextFieldWithNameProps extends TextFieldProps { + name: string; + value?: never; + onChange?: never; + error?: never; + [key: string]: any; +} + +export declare interface TextFieldWithOnChangeProps extends TextFieldProps { + name?: never; + value: string; + onChange: (newValue: string) => void; + error?: string; + [key: string]: any; +} + +export declare function Toast({ title, description, duration, dismissible, triggerText, actionText, actionOnClick, position, openExternal, setOpenExternal, type, children, className, }: ToastPropsWithTitleTrigger | ToastPropsWithTitleNoTrigger | ToastPropsWithChildrenTrigger | ToastPropsWithChildrenNoTrigger): React_3.ReactElement; + +declare interface ToastProps { + title?: string; + description?: string; + duration?: number; + dismissible?: boolean; + triggerText?: string; + actionText?: string; + actionOnClick?: () => void; + position?: string; + openExternal?: boolean; + setOpenExternal?: (open: boolean) => void; + type?: 'default' | 'success' | 'warning' | 'error'; + children?: React_3.ReactNode; + className?: { + root?: string; + viewport?: string; + trigger?: string; + title?: string; + description?: string; + children?: string; + action?: string; + }; +} + +declare interface ToastPropsWithChildren extends ToastProps { + title?: never; + description?: never; + children: React_3.ReactNode; +} + +export declare interface ToastPropsWithChildrenNoTrigger extends ToastPropsWithChildren { + triggerText?: never; + openExternal: boolean; + setOpenExternal: (open: boolean) => void; +} + +export declare interface ToastPropsWithChildrenTrigger extends ToastPropsWithChildren { + triggerText: string; + openExternal?: never; + setOpenExternal?: never; +} + +declare interface ToastPropsWithTitle extends ToastProps { + title: string; + description?: string; + children?: never; +} + +export declare interface ToastPropsWithTitleNoTrigger extends ToastPropsWithTitle { + triggerText?: never; + openExternal: boolean; + setOpenExternal: (open: boolean) => void; +} + +export declare interface ToastPropsWithTitleTrigger extends ToastPropsWithTitle { + triggerText: string; + openExternal?: never; + setOpenExternal?: never; +} + +/** + * This function returns a pre-styled Tooltip component based on the RadixUI tooltip component and the custom theme. + * + * @param id - The id of the tooltip. + * @param contentId - The id of the tooltip content. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param dataContent - The object of data attributes that can be used for testing (e.g. data-test or data-cy) of the content + * @param tooltip - The content of the tooltip. + * @param delay - The delay in milliseconds before the tooltip is shown. + * @param withIndicator - Determines whether the tooltip should have a small indicator or not. + * @param children - The child component that triggers the tooltip. + * @param className - The optional className object allows you to override the default styling. + * @returns Tooltip component + */ +export declare function Tooltip({ id, contentId, data, dataContent, tooltip, delay, withIndicator, children, className, }: TooltipProps): default_2.ReactElement; + +export declare interface TooltipProps { + id?: string; + contentId?: string; + data?: { + cy?: string; + test?: string; + }; + dataContent?: { + cy?: string; + test?: string; + }; + tooltip: default_2.ReactNode | string; + delay?: number; + withIndicator?: boolean; + children: default_2.ReactNode; + className?: { + tooltip?: string; + trigger?: string; + arrow?: string; + }; +} + +export declare interface TriggerIconProps extends TriggerProps { + icon: default_2.ReactNode; + label?: never; +} + +export declare interface TriggerLabelProps extends TriggerProps { + label: string; + icon?: default_2.ReactNode; +} + +declare interface TriggerProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + dropdownWidth: string; + children: default_2.ReactNode; + disabled?: boolean; + className?: { + root?: string; + label?: string; + icon?: string; + dropdown?: string; + disabled?: string; + }; + style?: { + root?: default_2.CSSProperties; + label?: default_2.CSSProperties; + icon?: default_2.CSSProperties; + dropdown?: default_2.CSSProperties; + disabled?: default_2.CSSProperties; + }; +} + +export declare function useArrowNavigation({ onArrowLeft, onArrowRight, onArrowUp, onArrowDown, }: useArrowNavigationProps): void; + +export declare interface useArrowNavigationProps { + onArrowLeft?: () => void; + onArrowRight?: () => void; + onArrowUp?: () => void; + onArrowDown?: () => void; +} + +/** + * This function returns a pre-styled UserNotification component based on the custom theme. + * + * @param id - The id of the notification. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param message - The message that is displayed in the notification. + * @param type - The type of the notification. This can be either 'success', 'info' or 'error'. This determines the icon that is displayed and some conditional styling. If not type is provided, the information icon is displayed. + * @param children - The optional children are displayed in the notification in addition to the provided message icon. + * @param className - The optional className object allows you to override the default styling. + * @returns UserNotification component + */ +export declare function UserNotification({ id, data, message, type, children, className, }: UserNotificationMessageProps | UserNotificationChildrenProps): JSX_2.Element; + +export declare interface UserNotificationChildrenProps extends UserNotificationProps { + message?: never; + children: default_2.ReactNode; +} + +export declare interface UserNotificationMessageProps extends UserNotificationProps { + message: string; + children?: default_2.ReactNode; +} + +export declare interface UserNotificationProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + message?: string; + type?: 'default' | 'info' | 'success' | 'warning' | 'error'; + children?: default_2.ReactNode; + className?: { + root?: string; + icon?: string; + message?: string; + content?: string; + }; +} + +/** + * This function returns a pre-styled Workflow component. Theme-based styling is not available for this component at the moment, use the twStyles or className objects instead to override default styling. + * + * @param items - The array of steps that should be displayed in the workflow. + * @param onClick - The function that is called when a step is clicked. The step object is passed as an argument. + * @param activeIx - The index of the active step. State management is not handled by this component. + * @param twStyles - The optional twStyles object allows you to override the default styling. + * @param minimal - The optional minimal boolean allows you to render the workflow with minimal space requirements. + * @param disabledFrom - The optional disabledFrom number allows you to disable steps from a certain index onwards. + * @param showTooltipSymbols - The optional showTooltipSymbols boolean allows you to show the tooltip symbols. + * @param className - The optional className object allows you to override the default styling. + * @returns Workflow component + */ +export declare function Workflow({ items, onClick, activeIx, twStyles, minimal, disabledFrom, showTooltipSymbols, className, }: WorkflowProps | WorkflowProgressProps): JSX_2.Element; + +declare interface WorkflowBaseProps { + activeIx?: number; + twStyles?: { + bgHover: string; + bgActive: string; + bgPast: string; + }; + minimal?: boolean; + disabledFrom?: number; + showTooltipSymbols?: boolean; + className?: { + root?: string; + item?: string; + active?: string; + past?: string; + title?: string; + description?: string; + }; +} + +export declare function WorkflowItem({ item, ix, hasDescription, minimal, activeIx, disabled, tooltip, showTooltipSymbols, onClick, numItems, twStyles, className, }: WorkflowItemProps): JSX_2.Element; + +declare interface WorkflowItemProps { + item: StepProps | StepProgressProps_2; + onClick: (item: StepProps | StepProgressProps_2, ix: number) => void; + ix: number; + hasDescription: boolean; + minimal: boolean; + activeIx?: number; + disabled: boolean; + tooltip?: string; + showTooltipSymbols?: boolean; + numItems: number; + twStyles: { + bgHover: string; + bgActive: string; + bgPast: string; + }; + className?: { + root?: string; + item?: string; + active?: string; + past?: string; + title?: string; + description?: string; + }; +} + +export declare interface WorkflowProgressProps extends WorkflowBaseProps { + activeIx?: never; + items: StepProgressProps_2[]; + onClick: (item: StepProps | StepProgressProps_2, ix: number) => void; +} + +export declare interface WorkflowProps extends WorkflowBaseProps { + activeIx: number; + items: StepProps[]; + onClick: (item: StepProps | StepProgressProps_2, ix: number) => void; +} + +export { } + + +declare namespace Calendar { + var displayName: string; +} + + +declare namespace Tabs { + var Tab: typeof import("@/Tabs").Tab; + var TabList: typeof import("@/Tabs").TabList; + var TabContent: typeof import("@/Tabs").TabContent; +} diff --git a/packages/design-system/types/src/Button.d.ts b/packages/design-system/types/src/Button.d.ts new file mode 100644 index 0000000..b87c18c --- /dev/null +++ b/packages/design-system/types/src/Button.d.ts @@ -0,0 +1,63 @@ +import { default as React, Dispatch } from 'react'; +export interface ButtonProps { + id?: string; + active?: boolean; + children?: React.ReactNode; + disabled?: boolean; + fluid?: boolean; + basic?: boolean; + type?: 'button' | 'submit' | 'reset'; + loading?: boolean; + onClick?: (e?: React.MouseEvent) => void; + className?: { + root?: string; + active?: string; + }; + data?: { + cy?: string; + test?: string; + }; + [x: string]: unknown; +} +/** + * This function returns a pre-styled Button component based on the custom theme. + * + * @param id - The id of the button. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param children - The content of the button. + * @param active - Indicate whether the button is active or not. Conditional styling is applied, if this is true. + * @param disabled - Indicate whether the button is disabled or not. Conditional styling is applied, if this is true. + * @param fluid - Indicate whether the button should be fluid or not. Conditional styling is applied, if this is true. + * @param basic - This attribute allows to directly remove significant pre-styling and only applies basic styles and functionally required attributes. + * @param type - The html type of the button. + * @param loading - Indicate whether the button is loading or not. Conditional styling / loading symbol is applied, if this is true. + * @param onClick - Function that is applied when the button is clicked. + * @param className - The optional className object allows you to override the default styling. + * @returns Button component + */ +export declare function Button({ id, children, onClick, disabled, active, fluid, basic, loading, type, className, data, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element; +export declare namespace Button { + var Icon: ({ className, children, }: { + className?: { + root?: string | undefined; + } | undefined; + children: React.ReactNode; + }) => import("react/jsx-runtime").JSX.Element; + var Label: ({ className, children, }: { + className?: { + root?: string | undefined; + } | undefined; + children: React.ReactNode; + }) => import("react/jsx-runtime").JSX.Element; + var IconGroup: ({ state, setState, className, children, }: ButtonIconGroupProps) => import("react/jsx-runtime").JSX.Element; +} +export interface ButtonIconGroupProps { + state: number | undefined; + setState: Dispatch>; + className?: { + root?: string; + children?: string; + }; + children: React.ReactNode[]; +} +export default Button; diff --git a/packages/design-system/types/src/Checkbox.d.ts b/packages/design-system/types/src/Checkbox.d.ts new file mode 100644 index 0000000..0c0f72b --- /dev/null +++ b/packages/design-system/types/src/Checkbox.d.ts @@ -0,0 +1,37 @@ +import { default as React } from 'react'; +export interface CheckboxProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + children?: React.ReactNode; + checked: boolean | 'indeterminate'; + partial?: boolean; + disabled?: boolean; + onCheck: () => void; + label?: string | React.ReactNode; + size?: 'sm' | 'md' | 'lg' | 'xl'; + className?: { + root?: string; + label?: string; + }; +} +/** + * This function returns a pre-styled Checkbox component based on the RadixUI Checkbox component and the custom theme. + * State is not managed internally and needs to be passed to the component through the checked and onCheck props. + * + * @param id - The id of the checkbox. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param children - Optional content of the checkbox that is shown when the checked attribute is true. By default, this is just replaced by a tick symbol. + * @param checked - Indicate whether the checkbox is checked or not. + * @param partial - Indicate whether the checkbox is partially checked or not. If the checked attribute is true, it will alwawys override the partial condition simplified logic. + * @param onCheck - The function that is called when the checkbox is checked or unchecked. + * @param disabled - Indicate whether the checkbox is disabled or not. + * @param label - The label of the checkbox. + * @param size - The size of the checkbox (can be small, medium, large or extra large). + * @param className - The optional className object allows you to override the default styling. + * @returns Checkbox component + */ +export declare function Checkbox({ id, data, children, checked, partial, disabled, label, onCheck, size, className, }: CheckboxProps): React.ReactElement; +export default Checkbox; diff --git a/packages/design-system/types/src/Collapsible.d.ts b/packages/design-system/types/src/Collapsible.d.ts new file mode 100644 index 0000000..3615978 --- /dev/null +++ b/packages/design-system/types/src/Collapsible.d.ts @@ -0,0 +1,51 @@ +import { default as React } from 'react'; +export interface CollapsibleProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + open: boolean; + onChange: () => void; + staticContent: React.ReactNode | string; + closedContent?: React.ReactNode | string; + customTrigger?: React.ReactNode; + primary?: string | React.ReactNode; + onPrimaryClick?: () => void; + secondary?: string | React.ReactNode; + onSecondaryClick?: () => void; + className?: { + root?: string; + staticContent?: string; + closedContent?: string; + content?: string; + trigger?: string; + primary?: string; + primaryButton?: string; + secondary?: string; + secondaryButton?: string; + bottomWrapper?: string; + }; + children: React.ReactNode; +} +/** + * This function returns a pre-styled collapsible component based on the RadixUI collapsible component and the implemented theme. + * State need to be managed by the parent component. + * + * @param id - The id of the collapsible. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param open - Indicate whether the collapsible is open or not. + * @param onChange - Function that is called when the collapsible is toggled. + * @param staticContent - The static content that is always shown. + * @param closedContent - The optional content that is only shown when the collapsible is closed. + * @param customTrigger - The optional custom trigger that is shown instead of the default arrow trigger. + * @param primary - An optional text that will be displayed on a button in the right bottom corner of the collapsible. Alternatively, it is also possible to pass a React node instead. + * @param onPrimaryClick - Function that will be called once the primary button is clicked (no function for custom primary nodes) + * @param secondary - An optional text that will be displayed on a button in the left bottom corner of the collapsible. Alternatively, it is also possible to pass a React node instead. + * @param onSecondaryClick - Function that will be called once the secondary button is clicked (no function for custom secondary nodes) + * @param className - The optional className object allows you to override the default styling. + * @param children - The content of the collapsible that is shown when the collapsible is open. + * @returns Collapsible component + */ +export declare function Collapsible({ id, data, open, onChange, staticContent, closedContent, customTrigger, primary, onPrimaryClick, secondary, onSecondaryClick, className, children, }: CollapsibleProps): import("react/jsx-runtime").JSX.Element; +export default Collapsible; diff --git a/packages/design-system/types/src/ColorPicker.d.ts b/packages/design-system/types/src/ColorPicker.d.ts new file mode 100644 index 0000000..b4a9f17 --- /dev/null +++ b/packages/design-system/types/src/ColorPicker.d.ts @@ -0,0 +1,38 @@ +import { IconDefinition } from '@fortawesome/free-solid-svg-icons'; +export interface ColorPickerClassName { + root?: string; + trigger?: string; + popover?: string; + presetButtons?: string; + inputLabel?: string; + inputTooltip?: string; + input?: string; + abort?: string; + submit?: string; +} +export interface ColorPickerProps { + color: string; + onSubmit: (newColor: string) => void; + disabled?: boolean; + triggerIcon?: IconDefinition; + presetColors?: string[]; + position?: 'bottom' | 'top'; + submitText: string; + colorLabel: string; + tooltip?: string; + dataTrigger?: { + cy?: string; + test?: string; + }; + dataHexInput?: { + cy?: string; + test?: string; + }; + dataSubmit?: { + cy?: string; + test?: string; + }; + className?: ColorPickerClassName; +} +export declare function ColorPicker({ color, onSubmit, disabled, triggerIcon, presetColors, position, submitText, colorLabel, tooltip, dataTrigger, dataHexInput, dataSubmit, className, }: ColorPickerProps): import("react/jsx-runtime").JSX.Element; +export default ColorPicker; diff --git a/packages/design-system/types/src/Countdown.d.ts b/packages/design-system/types/src/Countdown.d.ts new file mode 100644 index 0000000..80863bb --- /dev/null +++ b/packages/design-system/types/src/Countdown.d.ts @@ -0,0 +1,28 @@ +export interface CountdownProps { + isStatic?: boolean; + expiresAt: Date; + formatter?: (value: any) => any; + onExpire?: () => void; + onUpdate?: (timeRemaining: number) => void; + data?: { + cy?: string; + test?: string; + }; + className?: { + root?: string; + }; +} +/** + * This function creates a simple text countdown component (without any additional features or styling) + * + * @param isStatic - If true, the countdown will not be running, but instead show the initial value. However, as the end value is given by a date, reloading can modify the displayed countdown value + * @param expiresAt - Date when the countdown should expire + * @param formatter - Function to format the countdown value + * @param onExpire - Function that is executed when the countdown expires + * @param onUpdate - Function that is executed when the countdown is updated (not when it expires) + * @param data - Optional data object that can be used for testing (e.g. data-test or data-cy) + * @param className - Optional className object allows you to override the default styling + * @returns A simple text countdown component + */ +export declare function Countdown({ isStatic, expiresAt, formatter, onExpire, onUpdate, data, className, }: CountdownProps): import("react/jsx-runtime").JSX.Element; +export default Countdown; diff --git a/packages/design-system/types/src/CycleCountdown.d.ts b/packages/design-system/types/src/CycleCountdown.d.ts new file mode 100644 index 0000000..31b0a41 --- /dev/null +++ b/packages/design-system/types/src/CycleCountdown.d.ts @@ -0,0 +1,44 @@ +export interface CycleCountdownProps { + expiresAt: Date; + totalDuration: number; + size?: 'sm' | 'md'; + overrideSize?: number; + color?: string; + strokeWidthRem?: number; + isStatic?: boolean; + terminalColor?: string; + terminalPercentage?: number; + formatter?: (value: any) => any; + onExpire?: () => void; + onUpdate?: (timeRemaining: number) => void; + data?: { + cy?: string; + test?: string; + }; + className?: { + root?: string; + countdownWrapper?: string; + countdown?: string; + }; +} +/** + * This function combines the CycleProgress and Countdown components to create a circular progress bar with a countdown in the middle + * + * @param expiresAt - Date when the countdown should expire + * @param totalDuration - Total duration of the countdown in seconds, which is needed to compute the progress in percent + * @param size - Size of the progress bar, can be 'sm' or 'md' + * @param overrideSize - Optional override for the size of the progress bar + * @param color - Color of the progress bar (static for the moment) + * @param strokeWidthRem - Width of the progress bar. For small size, a smaller value is recommended + * @param isStatic - If true, the countdown will not be running, but instead show the initial value. However, as the end value is given by a date, reloading can modify the displayed countdown value + * @param terminalColor - Color of the progress bar when the countdown is expired (total Duration 0 or expiration in the past) + * @param terminalPercentage - Percentage of the progress bar when the countdown is expired (totalDuration 0 or expiration in the past) + * @param formatter - Function to format the countdown value + * @param onExpire - Function that is executed when the countdown expires + * @param onUpdate - Function that is executed when the countdown is updated (not when it expires) + * @param data - Optional data object that can be used for testing (e.g. data-test or data-cy) + * @param className - Optional className object allows you to override the default styling + * @returns A circular progress bar with a countdown in the middle + */ +export declare function CycleCountdown({ expiresAt, totalDuration, size, overrideSize, color, strokeWidthRem, isStatic, terminalColor, terminalPercentage, formatter, onExpire, onUpdate, data, className, }: CycleCountdownProps): import("react/jsx-runtime").JSX.Element; +export default CycleCountdown; diff --git a/packages/design-system/types/src/CycleProgress.d.ts b/packages/design-system/types/src/CycleProgress.d.ts new file mode 100644 index 0000000..e393d73 --- /dev/null +++ b/packages/design-system/types/src/CycleProgress.d.ts @@ -0,0 +1,32 @@ +import { default as React } from 'react'; +export interface CycleProgressProps { + size?: 'sm' | 'md'; + overrideSize?: number; + percentage: number; + color?: string; + strokeWidthRem?: number; + children?: React.ReactNode; + data?: { + cy?: string; + test?: string; + }; + className?: { + root?: string; + children?: string; + }; +} +/** + * This function create a circular progress bar with custom content in the middle (children) + * + * @param size - Size of the progress bar, can be 'sm' or 'md' + * @param overrideSize - If size adjustments of the relative placement are required due to font changes, this value can be used to override the circle size + * @param percentage - Percentage of the progress bar (0-100) + * @param color - Color of the progress bar (static for the moment) + * @param strokeWidthRem - Width of the progress bar. For small size, a smaller value is recommended + * @param children - Content of the progress bar, displayed in the center + * @param data - Optional data object that can be used for testing (e.g. data-test or data-cy) + * @param className - Optional className object allows you to override the default styling + * @returns A circular progress bar with children content in the middle + */ +export declare function CycleProgress({ size, overrideSize, percentage, color, strokeWidthRem, children, data, className, }: CycleProgressProps): import("react/jsx-runtime").JSX.Element; +export default CycleProgress; diff --git a/packages/design-system/types/src/DateChanger.d.ts b/packages/design-system/types/src/DateChanger.d.ts new file mode 100644 index 0000000..ef00c08 --- /dev/null +++ b/packages/design-system/types/src/DateChanger.d.ts @@ -0,0 +1,63 @@ +import { IconDefinition } from '@fortawesome/free-solid-svg-icons'; +import { default as React } from 'react'; +export interface DateChangerClassName { + root?: string; + label?: string; + field?: string; + input?: string; + disabled?: string; + editButton?: string; + saveButton?: string; + tooltip?: string; +} +export interface DateChangerProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + dataButton?: { + cy?: string; + test?: string; + }; + label?: string; + labelType?: 'small' | 'large'; + required?: boolean; + tooltip?: string | React.ReactNode; + disabled?: boolean; + error?: string; + hideError?: boolean; + isTouched?: boolean; + format?: string; + edit: boolean; + date: string; + onEdit: () => void; + onSave: (date: string) => void; + editIcon?: IconDefinition; + className?: DateChangerClassName; +} +/** + * This component provides a simple date changer with a label and a button to edit the date (not coupled to a formik context). + * + * @param id - The id of the date changer + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param dataButton - The object of data attributes that can be used for testing (e.g. data-test or data-cy) for the button + * @param label - The label of the date changer + * @param labelType - The type of the label (small or large) + * @param tooltip - The tooltip of the date changer (is only shown if a label is given) + * @param required - Whether the date label should contain a required symbol + * @param disabled - Whether the date changer is disabled or not + * @param error - The error message to be displayed + * @param hideError - Whether the error message should be hidden + * @param isTouched - Whether the date changer has been touched + * @param format - The format of the date when the edit mode is not active (then the display is up to the browser implementation) + * @param edit - Whether the date changer is in edit mode or not + * @param date - The date to be displayed + * @param onEdit - The function to be called when the edit button is clicked (external state management) + * @param onSave - The function to be called when the save button is clicked (external state management) + * @param editIcon - The icon to be displayed on the edit button + * @param className - The optional className object allows you to override the default styling. + * @returns Date changer component with optional label, edit button and save button. + */ +export declare function DateChanger({ id, data, dataButton, label, labelType, tooltip, required, disabled, error, hideError, isTouched, format, edit, date, onEdit, onSave, editIcon, className, }: DateChangerProps): import("react/jsx-runtime").JSX.Element; +export default DateChanger; diff --git a/packages/design-system/types/src/Dropdown.d.ts b/packages/design-system/types/src/Dropdown.d.ts new file mode 100644 index 0000000..bfcf916 --- /dev/null +++ b/packages/design-system/types/src/Dropdown.d.ts @@ -0,0 +1,59 @@ +import { IconDefinition } from '@fortawesome/free-solid-svg-icons'; +import { default as React } from 'react'; +interface Item { + id?: string; + data?: { + cy?: string; + test?: string; + }; + label: string | React.ReactNode; + onClick: () => void; + shorting?: string; + selected?: boolean; +} +interface DropdownProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + trigger: string | React.ReactNode; + triggerIcon?: IconDefinition; + items?: Item[]; + activeItems?: string[]; + groups?: Item[][]; + className?: { + trigger?: string; + triggerDisabled?: string; + viewport?: string; + item?: string; + activeItem?: string; + group?: string; + arrow?: string; + }; + disabled?: boolean; +} +export interface DropdownWithItemsProps extends DropdownProps { + items: Item[]; + groups?: never; +} +export interface DropdownWithGroupsProps extends DropdownProps { + items?: never; + groups: Item[][]; +} +/** + * This function returns a pre-styled Dropdown component based on the RadixUI dropdown component and the custom theme. + * + * @param id - The id of the dropdown. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param trigger - The content of the trigger button or a custom trigger component to replace the default button. + * @param triggerIcon - The icon that is displayed next to the trigger content. + * @param items - The items that are displayed in the dropdown menu. This attribute should not be set, if groups are used. + * @param activeItems - List of labels that should be considered active. This attribute has a similar function as the "select" attribute on the item props and should not be used at the same time. + * @param groups - The groups of items that are displayed in the dropdown menu. This attribute should not be set, if items are used. + * @param className - The optional className object allows you to override the default styling. + * @param disabled - Indicate whether the dropdown is disabled or not. Conditional styling is applied, if this is true. + * @returns Dropdown component + */ +export declare function Dropdown({ id, data, trigger, triggerIcon, items, activeItems, groups, className, disabled, }: DropdownWithItemsProps | DropdownWithGroupsProps): import("react/jsx-runtime").JSX.Element; +export default Dropdown; diff --git a/packages/design-system/types/src/Header.d.ts b/packages/design-system/types/src/Header.d.ts new file mode 100644 index 0000000..7d3bb29 --- /dev/null +++ b/packages/design-system/types/src/Header.d.ts @@ -0,0 +1,62 @@ +import { default as React } from 'react'; +interface HeaderProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + className?: { + root?: string; + }; + children: React.ReactNode; +} +/** + * This function returns a pre-styled header component with custom font similarly sized to the default h1 tag. + * + * @param id - The id of the header. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param className - The optional className object allows you to override the default styling. + * @param children - The content of the header. + * @returns Header H1 component + */ +export declare function H1({ id, data, className, children }: HeaderProps): import("react/jsx-runtime").JSX.Element; +/** + * This function returns a pre-styled header component with custom font similarly sized to the default h2 tag. + * + * @param id - The id of the header. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param className - The optional className object allows you to override the default styling. + * @param children - The content of the header. + * @returns Header H2 component + */ +export declare function H2({ id, data, className, children }: HeaderProps): import("react/jsx-runtime").JSX.Element; +/** + * This function returns a pre-styled header component with custom font similarly sized to the default h3 tag. + * + * @param id - The id of the header. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param className - The optional className object allows you to override the default styling. + * @param children - The content of the header. + * @returns Header H3 component + */ +export declare function H3({ id, data, className, children }: HeaderProps): import("react/jsx-runtime").JSX.Element; +/** + * This function returns a pre-styled header component with custom font similarly sized to the default h4 tag. + * + * @param id - The id of the header. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param className - The optional className object allows you to override the default styling. + * @param children - The content of the header. + * @returns Header H4 component + */ +export declare function H4({ id, data, className, children }: HeaderProps): import("react/jsx-runtime").JSX.Element; +/** + * This function returns a pre-styled header component with custom font similarly sized to the chosen h* tag. + */ +declare const Header: { + H1: typeof H1; + H2: typeof H2; + H3: typeof H3; + H4: typeof H4; +}; +export default Header; diff --git a/packages/design-system/types/src/Modal.d.ts b/packages/design-system/types/src/Modal.d.ts new file mode 100644 index 0000000..360eb44 --- /dev/null +++ b/packages/design-system/types/src/Modal.d.ts @@ -0,0 +1,79 @@ +import { default as React } from 'react'; +export interface ModalProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + dataOverlay?: { + cy?: string; + test?: string; + }; + dataContent?: { + cy?: string; + test?: string; + }; + dataCloseButton?: { + cy?: string; + test?: string; + }; + dataNextButton?: { + cy?: string; + test?: string; + }; + dataPrevButton?: { + cy?: string; + test?: string; + }; + className?: { + overlay?: string; + content?: string; + title?: string; + children?: string; + onPrev?: string; + onNext?: string; + }; + children: React.ReactNode; + fullScreen?: boolean; + open: boolean; + title?: string | React.ReactNode; + trigger?: React.ReactNode; + escapeDisabled?: boolean; + hideCloseButton?: boolean; + asPortal?: boolean; + onClose: () => void; + onNext?: () => void; + onOpenChange?: () => void; + onPrev?: () => void; + onPrimaryAction?: React.ReactNode; + onSecondaryAction?: React.ReactNode; +} +/** + * This function returns a pre-styled modal component based on the RadixUI dialog component and the custom theme. + * + * @param id - The id of the modal. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param dataOverlay - The object of data attributes that can be used for testing (e.g. data-test or data-cy) for the overlay + * @param dataContent - The object of data attributes that can be used for testing (e.g. data-test or data-cy) for the content + * @param dataCloseButton - The object of data attributes that can be used for testing (e.g. data-test or data-cy) for the close button + * @param dataNextButton - The object of data attributes that can be used for testing (e.g. data-test or data-cy) for the next button + * @param dataPrevButton - The object of data attributes that can be used for testing (e.g. data-test or data-cy) for the previous button + * @param trigger - The optional trigger that opens the modal, if the state is not managed by some parent component already. + * @param title - The optional title of the modal. + * @param children - The content of the modal. + * @param onClose - Function that is called when the modal is closed. + * @param onPrev - Function that is called when the optional previous button is clicked. + * @param onNext - Function that is called when the optional next button is clicked. + * @param open - Indicate whether the modal is open or not. This state is managed outside of the component. + * @param onOpenChange - Function that is called when the modal is opened or closed. + * @param fullScreen - Indicate whether the modal should be full screen or not. + * @param onPrimaryAction - The optional primary action button. + * @param onSecondaryAction - The optional secondary action button. + * @param escapeDisabled - Indicate whether the modal should be closed when the escape key is pressed. + * @param hideCloseButton - Indicate whether the close button should be hidden. + * @param className - The optional className object allows you to override the default styling. + * @param asPortal - Whether the contents are rendered in a portal. + * @returns Modal component + */ +export declare function Modal({ id, data, dataOverlay, dataContent, dataCloseButton, dataNextButton, dataPrevButton, trigger, title, children, onClose, onPrev, onNext, open, onOpenChange, fullScreen, className, onPrimaryAction, onSecondaryAction, escapeDisabled, hideCloseButton, asPortal, }: ModalProps): import("react/jsx-runtime").JSX.Element; +export default Modal; diff --git a/packages/design-system/types/src/Navigation.d.ts b/packages/design-system/types/src/Navigation.d.ts new file mode 100644 index 0000000..c54680b --- /dev/null +++ b/packages/design-system/types/src/Navigation.d.ts @@ -0,0 +1,169 @@ +import { default as React } from 'react'; +export interface NavigationProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + children: React.ReactNode; + className?: { + root?: string; + indicator?: string; + viewport?: string; + }; + style?: { + root?: React.CSSProperties; + indicator?: React.CSSProperties; + viewport?: React.CSSProperties; + }; +} +/** + * This function returns a pre-styled Navigation component based on the RadixUI navigation component and the custom theme. + * + * @param id - The id of the navigation. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param children - The content of the navigation. Children should be subcomponents of the Navigation component like TriggerItem / ButtonItem / CustomItem for the correct functionality. + * @param className - The optional className object allows you to override the default styling. + * @param style - The optional style object allows you to override the default styling using CSS key-value styles. + * @returns Navigation component + */ +export declare function Navigation({ id, data, children, className, style, }: NavigationProps): import("react/jsx-runtime").JSX.Element; +export declare namespace Navigation { + var TriggerItem: ({ id, data, label, icon, dropdownWidth, children, disabled, className, style, }: TriggerIconProps | TriggerLabelProps) => import("react/jsx-runtime").JSX.Element; + var DropdownItem: ({ id, data, title, href, onClick, subtitle, icon, className, style, }: DropdownItemWithHrefProps | DropdownItemWithOnClickProps) => import("react/jsx-runtime").JSX.Element; + var ButtonItem: ({ id, data, label, disabled, icon, href, onClick, className, style, }: ButtonItemWithHrefProps | ButtonItemWithOnClickProps) => import("react/jsx-runtime").JSX.Element; + var IconItem: ({ id, data, icon, disabled, href, onClick, className, style, }: IconItemWithHrefProps | IconItemWithOnClickProps) => import("react/jsx-runtime").JSX.Element; + var CustomItem: ({ id, data, children, className, style, }: CustomItemProps) => import("react/jsx-runtime").JSX.Element; +} +interface TriggerProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + dropdownWidth: string; + children: React.ReactNode; + disabled?: boolean; + className?: { + root?: string; + label?: string; + icon?: string; + dropdown?: string; + disabled?: string; + }; + style?: { + root?: React.CSSProperties; + label?: React.CSSProperties; + icon?: React.CSSProperties; + dropdown?: React.CSSProperties; + disabled?: React.CSSProperties; + }; +} +export interface TriggerIconProps extends TriggerProps { + icon: React.ReactNode; + label?: never; +} +export interface TriggerLabelProps extends TriggerProps { + label: string; + icon?: React.ReactNode; +} +interface DropdownItemProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + title: string; + subtitle?: string; + icon?: React.ReactNode; + className?: { + root?: string; + title?: string; + icon?: string; + subtitle?: string; + }; + style?: { + root?: React.CSSProperties; + title?: React.CSSProperties; + icon?: React.CSSProperties; + subtitle?: React.CSSProperties; + }; +} +export interface DropdownItemWithHrefProps extends DropdownItemProps { + href: string; + onClick?: never; +} +export interface DropdownItemWithOnClickProps extends DropdownItemProps { + href?: never; + onClick: React.MouseEventHandler; +} +interface ButtonItemProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + label: string; + disabled?: boolean; + icon?: React.ReactNode; + className?: { + root?: string; + label?: string; + icon?: string; + disabled?: string; + }; + style?: { + root?: React.CSSProperties; + label?: React.CSSProperties; + icon?: React.CSSProperties; + disabled?: React.CSSProperties; + }; +} +export interface ButtonItemWithHrefProps extends ButtonItemProps { + href: string; + onClick?: never; +} +export interface ButtonItemWithOnClickProps extends ButtonItemProps { + href?: never; + onClick: React.MouseEventHandler; +} +interface IconItemProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + icon: React.ReactNode; + disabled?: boolean; + className?: { + root?: string; + disabled?: string; + }; + style?: { + root?: React.CSSProperties; + disabled?: React.CSSProperties; + }; +} +export interface IconItemWithHrefProps extends IconItemProps { + href: string; + onClick?: never; +} +export interface IconItemWithOnClickProps extends IconItemProps { + href?: never; + onClick: React.MouseEventHandler; +} +type CustomItemProps = { + id?: string; + data?: { + cy?: string; + test?: string; + }; + children: React.ReactNode; + className?: { + root?: string; + }; + style?: { + root?: React.CSSProperties; + }; +}; +export default Navigation; diff --git a/packages/design-system/types/src/NotificationBadgeWrapper.d.ts b/packages/design-system/types/src/NotificationBadgeWrapper.d.ts new file mode 100644 index 0000000..88dd585 --- /dev/null +++ b/packages/design-system/types/src/NotificationBadgeWrapper.d.ts @@ -0,0 +1,30 @@ +import { default as React } from 'react'; +interface NotificationBadgeWrapperProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + count?: number; + showBadge?: boolean; + size?: 'sm' | 'md' | 'lg' | 'xl'; + className?: { + root?: string; + badge?: string; + }; + children: React.ReactNode; +} +/** + * This function returns a pre-styled wrapper for some custom component with navigation badge on it. + * + * @param id - The id of the notification badge wrapper. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param count - The number of notifications to be displayed on the badge. If no count is provided, the badge will be displayed as a simple red notification dot. + * @param showBadge - If true, the badge will be displayed as a red dot, even if the number notifications is undefined. + * @param size - The size of the badge (can be small, medium, large or extra large). + * @param className - The optional className object allows you to override the default styling. + * @param children - The component the notification badge should be placed on. + * @returns Notification badge wrapper component + */ +export declare function NotificationBadgeWrapper({ id, data, count, showBadge, size, className, children, }: NotificationBadgeWrapperProps): React.ReactElement; +export default NotificationBadgeWrapper; diff --git a/packages/design-system/types/src/Progress.d.ts b/packages/design-system/types/src/Progress.d.ts new file mode 100644 index 0000000..667ce24 --- /dev/null +++ b/packages/design-system/types/src/Progress.d.ts @@ -0,0 +1,32 @@ +export interface ProgressProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + value: number; + offset?: number; + max: number; + formatter: (value: any) => any; + isMaxVisible?: boolean; + className?: { + root?: string; + indicator?: string; + }; + [x: string]: any; +} +/** + * This function returns a pre-styled Progress component based on the RadixUI progress component and the custom theme. + * + * @param id - The id of the progress bar. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param value - The value of the progress bar. The value should be between 0 and an optionally provided max value. + * @param offset - The number that determines the offset of the progress bar. The offset is subtracted from the value. + * @param max - The maximum value of the progress bar. + * @param formatter - The function that formats the value of the progress bar. + * @param isMaxVisible - The boolean that determines if the maximum value should be displayed. + * @param className - The optional className object allows you to override the default styling. + * @return Progress component + */ +export declare function Progress({ id, data, formatter, value, offset, max, className, isMaxVisible, ...props }: ProgressProps): import("react/jsx-runtime").JSX.Element; +export default Progress; diff --git a/packages/design-system/types/src/Prose.d.ts b/packages/design-system/types/src/Prose.d.ts new file mode 100644 index 0000000..a3fe32b --- /dev/null +++ b/packages/design-system/types/src/Prose.d.ts @@ -0,0 +1,23 @@ +import { default as React } from 'react'; +export interface ProseProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + className?: { + root?: string; + }; + children: React.ReactNode; +} +/** + * This function returns a pre-styled prose component based on TailwindCSS prose and the custom theme. + * + * @param id - The id of the prose component. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param children - The content of the prose component. + * @param className - The optional className object allows you to override the default styling. + * @returns Children with the standard prose and some custom styling applied to them. + */ +export declare function Prose({ id, data, className, children }: ProseProps): import("react/jsx-runtime").JSX.Element; +export default Prose; diff --git a/packages/design-system/types/src/Select.d.ts b/packages/design-system/types/src/Select.d.ts new file mode 100644 index 0000000..275b502 --- /dev/null +++ b/packages/design-system/types/src/Select.d.ts @@ -0,0 +1,77 @@ +export interface SelectClassName { + root?: string; + trigger?: string; + content?: string; + item?: string; + text?: string; + scrollButton?: string; + groupLabel?: string; + separator?: string; +} +interface SelectProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + name?: string; + onChange: (newValue: string) => void; + onBlur?: () => void; + value?: string; + disabled?: boolean; + size?: 'md' | 'sm'; + className?: SelectClassName; + placeholder?: string; + defaultValue?: string; + basic?: boolean; + asPortal?: boolean; + contentPosition?: 'item-aligned' | 'popper'; +} +export interface SelectItem { + id?: string; + data?: { + cy?: string; + test?: string; + }; + value: string; + disabled?: boolean; + label: string; + shortLabel?: string; +} +export interface SelectGroup { + label?: string; + showSeparator?: boolean; + items: SelectItem[]; +} +export interface SelectWithItemsProps extends SelectProps { + items: SelectItem[]; + groups?: never; +} +export interface SelectWithGroupsProps extends SelectProps { + groups: SelectGroup[]; + items?: never; +} +/** + * This function returns a pre-styled Select component based on the RadixUI select component and the custom theme. + * While the open state of the component is managed internally, the value of the component is managed externally and passed to the function. + * + * @param id - The id of the select component. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param items - The array of items that are displayed in the select component. This prop is mutually exclusive with the groups prop. If items are provided, the component does not look for groups anymore. + * @param groups - The array of groups that are displayed in the select component. This prop is mutually exclusive with the items prop. + * @param name - The name attribute of the select component needed for Formik integration --> see FormikSelectField + * @param onChange - The function that is called when the value of the select component changes (changes externally managed value). + * @param onBlur - The function that is called when the viewport of the select component is closed. + * @param value - The current value of the select component (managed externally). + * @param defaultValue - The default value of the select component set initially. + * @param placeholder - The placeholder text that is displayed when no value is selected. + * @param disabled - Specifies whether the select component is disabled or not. + * @param size - The size of the select component. Currently only medium and small are supported. + * @param basic - Specifies whether the select component is basic or not. A basic select component does only have minimal styling of the trigger. + * @param className - The optional className object allows you to override the default styling. + * @param asPortal - If true, the select component is rendered as a portal. + * @param contentPosition - The position of the content of the select component. Currently only 'item-aligned' and 'popper' are supported. + * @return Select component + */ +export declare function Select({ id, data, items, groups, onChange, onBlur, value, disabled, size, className, name, placeholder, defaultValue, basic, asPortal, contentPosition, }: SelectWithItemsProps | SelectWithGroupsProps): import("react/jsx-runtime").JSX.Element; +export default Select; diff --git a/packages/design-system/types/src/Slider.d.ts b/packages/design-system/types/src/Slider.d.ts new file mode 100644 index 0000000..1a5dce5 --- /dev/null +++ b/packages/design-system/types/src/Slider.d.ts @@ -0,0 +1,59 @@ +import { default as React } from 'react'; +interface SliderProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + value: number; + handleChange: (newValue: number) => void; + min: number; + max: number; + step: number; + disabled?: boolean; + rangeColorMap?: Record; + borderColorMap?: Record; + className?: { + root?: string; + icons?: string; + labels?: string; + range?: string; + thumb?: string; + }; +} +export interface SliderWithLabelProps extends SliderProps { + labels: { + min: string; + mid: string; + max: string; + }; + icons?: never; +} +export interface SliderWithIconsProps extends SliderProps { + icons: { + min: React.ReactNode; + mid: React.ReactNode; + max: React.ReactNode; + }; + labels?: never; +} +/** + * This function returns a pre-styled Slider component based on the RadixUI slider component and the custom theme. + * + * @param id - The id of the slider. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param value - The value of the slider. The value should be between the min and max value and is maintained by the parent component. + * @param labels - The labels that are displayed on the slider. The labels and icons props should be mutually exclusive. + * @param icons - The icons that are displayed on the slider. The labels and icons props should be mutually exclusive. + * @param handleChange - The function that is called when the slider value is changed. The new value is passed as a parameter. + * @param min - The minimum value of the slider. + * @param max - The maximum value of the slider. + * @param step - The step size of the slider. + * @param disabled - Indicator whether the slider is disabled or not. + * @param rangeColorMap - A map that maps a range of values to colors. The color is used to color the range of the slider. The length of the map should be equal to the number of steps and the keys should correspond to the possible values of the slider. + * @param borderColorMap - A map that maps a range of values to colors. The color is used to color the thumb of the slider. The length of the map should be equal to the number of steps and the keys should correspond to the possible values of the slider. + * @param className - The optional className object allows you to override the default styling. + * @returns Slider component. + */ +export declare function Slider({ id, data, value, labels, handleChange, min, max, step, disabled, icons, rangeColorMap, borderColorMap, className, }: SliderWithLabelProps | SliderWithIconsProps): React.ReactElement; +export default Slider; diff --git a/packages/design-system/types/src/StepProgress.d.ts b/packages/design-system/types/src/StepProgress.d.ts new file mode 100644 index 0000000..1927970 --- /dev/null +++ b/packages/design-system/types/src/StepProgress.d.ts @@ -0,0 +1,54 @@ +import { default as React } from 'react'; +export interface FormatterArgs { + element: StepItem; + ix: number; +} +export interface StepItem { + [x: string]: any; +} +interface StepProgressBaseProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + value?: number; + onItemClick: (ix: number, item?: StepItem) => void; + displayOffsetLeft?: number; + displayOffsetRight?: number; + className?: { + root?: string; + }; + formatter?: ({ element, ix }: { + element: StepItem; + ix: number; + }) => { + className?: string; + element: React.ReactNode; + }; +} +export interface StepProgressProps extends StepProgressBaseProps { + max: number; + items?: never; +} +export interface StepProgressItemProps extends StepProgressBaseProps { + max?: never; + items: StepItem[]; +} +/** + * This function returns a pre-styled Progress component based on the RadixUI progress component and the custom theme. + * + * @param id - The id of the progress bar. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param value - The value of the progress bar. The value should be between 0 and an optionally provided max value. + * @param max - The maximum value of the progress bar. + * @param items - The array of items that are displayed in the step progress bar. + * @param onItemClick - The function that is called when an item is clicked. + * @param displayOffsetLeft - The number that determines the maximum number of elements that are shown to the left of the current value on the step progress bar. + * @param displayOffsetRight - The number that determines the maximum number of elements that are shown to the right of the current value on the step progress bar. + * @param className - The optional className object allows you to override the default styling. + * @param formatter - The optional formatter function allows you to override the rendering of each item. + * @return Step progress component + */ +export declare function StepProgress({ id, data, value, max, items, onItemClick, displayOffsetLeft, displayOffsetRight, className, formatter, }: StepProgressProps | StepProgressItemProps): import("react/jsx-runtime").JSX.Element; +export default StepProgress; diff --git a/packages/design-system/types/src/Switch.d.ts b/packages/design-system/types/src/Switch.d.ts new file mode 100644 index 0000000..eadaf0c --- /dev/null +++ b/packages/design-system/types/src/Switch.d.ts @@ -0,0 +1,50 @@ +import { default as React } from 'react'; +export interface SwitchClassName { + root?: string; + element?: string; + thumb?: string; + label?: string; +} +export interface SwitchProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + checked?: boolean; + onCheckedChange: (newValue: boolean) => void; + onBlur?: () => void; + disabled?: boolean; + label?: string; + tooltip?: string | React.ReactNode; + fluid?: boolean; + error?: string; + hideError?: boolean; + required?: boolean; + labelLeft?: boolean; + size?: 'sm' | 'md' | 'lg'; + className?: SwitchClassName; +} +/** + * This function returns a pre-styled Switch component based on the RadixUI switch component and the custom theme. + * The state of the switch is maintained by the parent component. + * + * @param id - The id of the switch. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param label - The label that is displayed next to the switch. + * @param tooltip - The tooltip that is displayed when hovering over the label. + * @param checked - Indicator whether the switch is checked or not (or indefinite if undefined value). State is managed by the parent component. + * @param onCheckedChange - The function that is called when the switch is checked or unchecked. The new value is passed as a parameter. + * @param onBlur - The function that is called when the switch loses focus. + * @param disabled - Indicator whether the switch is disabled or not. + * @param fluid - Indicator whether the switch should be fluid or not. + * @param error - The error message that is shown next the switch. + * @param hideError - Indicator whether the error message should be hidden or not. + * @param required - Indicator whether the switch is required or not. + * @param labelLeft - Indicator whether the label should be displayed on the left or right side of the switch. + * @param size - The size of the switch. The size can be small, medium or large. + * @param className - The optional className object allows you to override the default styling. + * @returns Switch component + */ +export declare function Switch({ id, data, disabled, label, tooltip, checked, onCheckedChange, onBlur, fluid, error, hideError, required, labelLeft, size, className, }: SwitchProps): import("react/jsx-runtime").JSX.Element; +export default Switch; diff --git a/packages/design-system/types/src/Table.d.ts b/packages/design-system/types/src/Table.d.ts new file mode 100644 index 0000000..a207b26 --- /dev/null +++ b/packages/design-system/types/src/Table.d.ts @@ -0,0 +1,59 @@ +import { default as React } from 'react'; +type BaseRowType = { + className?: string; +}; +export type ColumnType = { + className?: string; + label: string; + accessor: string; + sortable?: boolean; + transformer?: ({ row, ix, }: { + row: RowType; + ix?: number; + }) => string | number | boolean; + formatter?: ({ row, ix, }: { + row: RowType; + ix?: number; + }) => string | number | React.ReactElement; +}; +export interface TableProps { + id?: string; + dataAttributes?: { + cy?: string; + test?: string; + }; + columns: ColumnType[]; + data: RowType[]; + caption?: string; + className?: { + root?: string; + tableHeader?: string; + body?: string; + row?: string; + }; + forwardedRef?: React.Ref; + emptyCellText?: string; + defaultSortField?: string; + defaultSortOrder?: 'asc' | 'desc'; +} +/** + * This function returns a pre-styled Table component based on the RadixUI table component and the custom theme. + * The table is sortable by clicking on the column header. + * Before the table is being sorted according to the sorting parameters, the transformer will be applied to the data. + * The formatter is meant to be used for visual modifications of the fields and applied after sorting. + * + * @param id - The id of the table. + * @param dataAttributes - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param columns - The columns of the table. The columns are defined by an array of objects where each object has a label, an accessor and optional transformer and formatters. + * @param data - The data of the table. The data is defined by an array of objects where each object has a key-value pair for each column. + * @param caption - The optional caption of the table. + * @param ref - The optional ref object allows you to access the table methods. + * @param className - The optional className object allows you to override the default styling. + * @param forwardedRef - The optional forwardedRef object allows you to access table methods from the parent component. + * @param emptyCellText - The optional emptyCellText allows you to define the text that should be displayed in empty cells. + * @param defaultSortField - The optional defaultSortField allows you to define the default sorting field. + * @param defaultSortOrder - The optional defaultSortOrder allows you to define the default sorting order. + * @returns Table component + */ +export declare function Table>({ id, dataAttributes, columns, data, caption, className, forwardedRef, emptyCellText, defaultSortField, defaultSortOrder, }: TableProps): import("react/jsx-runtime").JSX.Element; +export default Table; diff --git a/packages/design-system/types/src/Tabs.d.ts b/packages/design-system/types/src/Tabs.d.ts new file mode 100644 index 0000000..ef2179d --- /dev/null +++ b/packages/design-system/types/src/Tabs.d.ts @@ -0,0 +1,119 @@ +import { default as React, PropsWithChildren } from 'react'; +interface TabProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + key?: string; + value: string; + label?: string; + children?: React.ReactNode; + disabled?: boolean; + className?: { + root?: string; + label?: string; + disabled?: string; + }; +} +interface TabPropsWithLabel extends TabProps { + label: string; + children?: never; +} +interface TabPropsWithChildren extends TabProps { + label?: never; + children: React.ReactNode; +} +/** + * This function returns a pre-styled Tab trigger component to be used inside a Tabs.Tablist. + * The value of this tab is required for both the internally and externally controlled state. + * + * @param id - The id of the tab. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param key - The key of the tab. + * @param value - The value of the tab. This is required for the internal and external state. + * @param label - The label of the tab. + * @param children - A child component of the tab header, which can optionally replace the label + * @param disabled - The optional disabled property allows you to disable the tab. + * @param className - The optional className object allows you to override the default styling. + * @returns Tab trigger component + */ +export declare function Tab({ id, data, key, value, label, children, disabled, className, }: TabPropsWithLabel | TabPropsWithChildren): import("react/jsx-runtime").JSX.Element; +interface TabListProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + className?: { + root?: string; + }; +} +/** + * This function returns a pre-styled TabList component to be used inside a Tabs component. + * + * @param id The id of the tab list. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param children The tab triggers should be passed as children to this component. + * @param className The optional className object allows you to override the default styling. + * @returns TabList component + */ +export declare function TabList({ id, data, children, className, }: PropsWithChildren): import("react/jsx-runtime").JSX.Element; +interface TabContentProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + key: string; + value: string; + className?: { + root?: string; + }; +} +/** + * This function returns a pre-styled TabContent component to be used inside a Tabs component. + * The value of this tab is required for both the internally and externally controlled state. + * + * @param id The id of the tab content. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param key The key of the tab. + * @param value The value of the tab. This is required for the internal and external state. + * @param children The content of the tab should be passed as children to this component. + * @param className The optional className object allows you to override the default styling. + * @returns Tab Content component + */ +export declare function TabContent({ id, data, key, value, children, className, }: PropsWithChildren): import("react/jsx-runtime").JSX.Element; +interface TabsProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + defaultValue: string; + value?: string; + onValueChange?: (newValue: string) => void; + className?: { + root?: string; + }; +} +/** + * This function returns a pre-styled TabList component based on the RadixUI TabList component and the custom theme. + * The active tab / component state can be either controlled internally or controlled through the parent component. + * + * @param id The id of the tab list. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param defaultValue The default value of the tab that is active when the component is initially rendered. + * @param value The value of the tab that is active. This value is required, if the state is controlled by the parent component. + * @param onValueChange The function that is called when the active tab is changed. The new value is passed as a parameter. This function is required, if the state is controlled by the parent component. + * @param children The tab list and content should be passed as children to this component. + * @param className The optional className object allows you to override the default styling. + * @returns Tabs wrapper component + */ +declare function Tabs({ id, data, defaultValue, value, children, onValueChange, className, }: PropsWithChildren): import("react/jsx-runtime").JSX.Element; +declare namespace Tabs { + var Tab: typeof import("@/Tabs").Tab; + var TabList: typeof import("@/Tabs").TabList; + var TabContent: typeof import("@/Tabs").TabContent; +} +export default Tabs; diff --git a/packages/design-system/types/src/Tag.d.ts b/packages/design-system/types/src/Tag.d.ts new file mode 100644 index 0000000..db6993f --- /dev/null +++ b/packages/design-system/types/src/Tag.d.ts @@ -0,0 +1,22 @@ +export interface TagProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + className?: { + root?: string; + }; + label: string; +} +/** + * This function returns a pre-styled tag component + * + * @param id - The id of the tag. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param label - The label of the tag. + * @param className - The optional className object allows you to override the default styling. + * @returns Tag component + */ +export declare function Tag({ id, data, className, label }: TagProps): import("react/jsx-runtime").JSX.Element; +export default Tag; diff --git a/packages/design-system/types/src/Toast.d.ts b/packages/design-system/types/src/Toast.d.ts new file mode 100644 index 0000000..dc09475 --- /dev/null +++ b/packages/design-system/types/src/Toast.d.ts @@ -0,0 +1,56 @@ +import * as React from 'react'; +interface ToastProps { + title?: string; + description?: string; + duration?: number; + dismissible?: boolean; + triggerText?: string; + actionText?: string; + actionOnClick?: () => void; + position?: string; + openExternal?: boolean; + setOpenExternal?: (open: boolean) => void; + type?: 'default' | 'success' | 'warning' | 'error'; + children?: React.ReactNode; + className?: { + root?: string; + viewport?: string; + trigger?: string; + title?: string; + description?: string; + children?: string; + action?: string; + }; +} +interface ToastPropsWithTitle extends ToastProps { + title: string; + description?: string; + children?: never; +} +interface ToastPropsWithChildren extends ToastProps { + title?: never; + description?: never; + children: React.ReactNode; +} +export interface ToastPropsWithTitleTrigger extends ToastPropsWithTitle { + triggerText: string; + openExternal?: never; + setOpenExternal?: never; +} +export interface ToastPropsWithTitleNoTrigger extends ToastPropsWithTitle { + triggerText?: never; + openExternal: boolean; + setOpenExternal: (open: boolean) => void; +} +export interface ToastPropsWithChildrenTrigger extends ToastPropsWithChildren { + triggerText: string; + openExternal?: never; + setOpenExternal?: never; +} +export interface ToastPropsWithChildrenNoTrigger extends ToastPropsWithChildren { + triggerText?: never; + openExternal: boolean; + setOpenExternal: (open: boolean) => void; +} +export declare function Toast({ title, description, duration, dismissible, triggerText, actionText, actionOnClick, position, openExternal, setOpenExternal, type, children, className, }: ToastPropsWithTitleTrigger | ToastPropsWithTitleNoTrigger | ToastPropsWithChildrenTrigger | ToastPropsWithChildrenNoTrigger): React.ReactElement; +export default Toast; diff --git a/packages/design-system/types/src/Tooltip.d.ts b/packages/design-system/types/src/Tooltip.d.ts new file mode 100644 index 0000000..c07d816 --- /dev/null +++ b/packages/design-system/types/src/Tooltip.d.ts @@ -0,0 +1,38 @@ +import { default as React } from 'react'; +export interface TooltipProps { + id?: string; + contentId?: string; + data?: { + cy?: string; + test?: string; + }; + dataContent?: { + cy?: string; + test?: string; + }; + tooltip: React.ReactNode | string; + delay?: number; + withIndicator?: boolean; + children: React.ReactNode; + className?: { + tooltip?: string; + trigger?: string; + arrow?: string; + }; +} +/** + * This function returns a pre-styled Tooltip component based on the RadixUI tooltip component and the custom theme. + * + * @param id - The id of the tooltip. + * @param contentId - The id of the tooltip content. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param dataContent - The object of data attributes that can be used for testing (e.g. data-test or data-cy) of the content + * @param tooltip - The content of the tooltip. + * @param delay - The delay in milliseconds before the tooltip is shown. + * @param withIndicator - Determines whether the tooltip should have a small indicator or not. + * @param children - The child component that triggers the tooltip. + * @param className - The optional className object allows you to override the default styling. + * @returns Tooltip component + */ +export declare function Tooltip({ id, contentId, data, dataContent, tooltip, delay, withIndicator, children, className, }: TooltipProps): React.ReactElement; +export default Tooltip; diff --git a/packages/design-system/types/src/UserNotification.d.ts b/packages/design-system/types/src/UserNotification.d.ts new file mode 100644 index 0000000..f009923 --- /dev/null +++ b/packages/design-system/types/src/UserNotification.d.ts @@ -0,0 +1,38 @@ +import { default as React } from 'react'; +export interface UserNotificationProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + message?: string; + type?: 'default' | 'info' | 'success' | 'warning' | 'error'; + children?: React.ReactNode; + className?: { + root?: string; + icon?: string; + message?: string; + content?: string; + }; +} +export interface UserNotificationMessageProps extends UserNotificationProps { + message: string; + children?: React.ReactNode; +} +export interface UserNotificationChildrenProps extends UserNotificationProps { + message?: never; + children: React.ReactNode; +} +/** + * This function returns a pre-styled UserNotification component based on the custom theme. + * + * @param id - The id of the notification. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param message - The message that is displayed in the notification. + * @param type - The type of the notification. This can be either 'success', 'info' or 'error'. This determines the icon that is displayed and some conditional styling. If not type is provided, the information icon is displayed. + * @param children - The optional children are displayed in the notification in addition to the provided message icon. + * @param className - The optional className object allows you to override the default styling. + * @returns UserNotification component + */ +export declare function UserNotification({ id, data, message, type, children, className, }: UserNotificationMessageProps | UserNotificationChildrenProps): import("react/jsx-runtime").JSX.Element; +export default UserNotification; diff --git a/packages/design-system/types/src/Workflow.d.ts b/packages/design-system/types/src/Workflow.d.ts new file mode 100644 index 0000000..e42f68e --- /dev/null +++ b/packages/design-system/types/src/Workflow.d.ts @@ -0,0 +1,87 @@ +interface StepBaseProps { + title: string; + description?: string; + tooltip?: string; + tooltipDisabled?: string; + progress?: number; + completed?: boolean; + [x: string]: unknown; +} +interface StepProps extends StepBaseProps { + progress?: never; + completed?: never; +} +interface StepProgressProps extends StepBaseProps { + progress: number; + completed?: boolean; +} +interface WorkflowBaseProps { + activeIx?: number; + twStyles?: { + bgHover: string; + bgActive: string; + bgPast: string; + }; + minimal?: boolean; + disabledFrom?: number; + showTooltipSymbols?: boolean; + className?: { + root?: string; + item?: string; + active?: string; + past?: string; + title?: string; + description?: string; + }; +} +export interface WorkflowProps extends WorkflowBaseProps { + activeIx: number; + items: StepProps[]; + onClick: (item: StepProps | StepProgressProps, ix: number) => void; +} +export interface WorkflowProgressProps extends WorkflowBaseProps { + activeIx?: never; + items: StepProgressProps[]; + onClick: (item: StepProps | StepProgressProps, ix: number) => void; +} +/** + * This function returns a pre-styled Workflow component. Theme-based styling is not available for this component at the moment, use the twStyles or className objects instead to override default styling. + * + * @param items - The array of steps that should be displayed in the workflow. + * @param onClick - The function that is called when a step is clicked. The step object is passed as an argument. + * @param activeIx - The index of the active step. State management is not handled by this component. + * @param twStyles - The optional twStyles object allows you to override the default styling. + * @param minimal - The optional minimal boolean allows you to render the workflow with minimal space requirements. + * @param disabledFrom - The optional disabledFrom number allows you to disable steps from a certain index onwards. + * @param showTooltipSymbols - The optional showTooltipSymbols boolean allows you to show the tooltip symbols. + * @param className - The optional className object allows you to override the default styling. + * @returns Workflow component + */ +export declare function Workflow({ items, onClick, activeIx, twStyles, minimal, disabledFrom, showTooltipSymbols, className, }: WorkflowProps | WorkflowProgressProps): import("react/jsx-runtime").JSX.Element; +interface WorkflowItemProps { + item: StepProps | StepProgressProps; + onClick: (item: StepProps | StepProgressProps, ix: number) => void; + ix: number; + hasDescription: boolean; + minimal: boolean; + activeIx?: number; + disabled: boolean; + tooltip?: string; + showTooltipSymbols?: boolean; + numItems: number; + twStyles: { + bgHover: string; + bgActive: string; + bgPast: string; + }; + className?: { + root?: string; + item?: string; + active?: string; + past?: string; + title?: string; + description?: string; + }; +} +export declare function WorkflowItem({ item, ix, hasDescription, minimal, activeIx, disabled, tooltip, showTooltipSymbols, onClick, numItems, twStyles, className, }: WorkflowItemProps): import("react/jsx-runtime").JSX.Element; +export default Workflow; diff --git a/packages/design-system/types/src/copy.d.ts b/packages/design-system/types/src/copy.d.ts new file mode 100644 index 0000000..cb0ff5c --- /dev/null +++ b/packages/design-system/types/src/copy.d.ts @@ -0,0 +1 @@ +export {}; diff --git a/packages/design-system/types/src/forms/FormikColorPicker.d.ts b/packages/design-system/types/src/forms/FormikColorPicker.d.ts new file mode 100644 index 0000000..3f5f412 --- /dev/null +++ b/packages/design-system/types/src/forms/FormikColorPicker.d.ts @@ -0,0 +1,44 @@ +import { IconDefinition } from '@fortawesome/fontawesome-svg-core'; +import { default as React } from 'react'; +import { ColorPickerClassName } from '../ColorPicker'; +export interface FormikColorPickerProps { + id?: string; + name: string; + label?: string; + labelType?: 'small' | 'normal'; + tooltip?: string | React.ReactNode; + required?: boolean; + hideError?: boolean; + disabled?: boolean; + triggerIcon?: IconDefinition; + presetColors?: string[]; + position?: 'bottom' | 'top'; + abortText?: string; + submitText?: string; + className?: { + root?: string; + label?: string; + field?: string; + tooltip?: string; + error?: string; + colorPicker?: ColorPickerClassName; + }; + dataTrigger?: { + cy?: string; + test?: string; + }; + dataHexInput?: { + cy?: string; + test?: string; + }; + dataAbort?: { + cy?: string; + test?: string; + }; + dataSubmit?: { + cy?: string; + test?: string; + }; +} +export declare function FormikColorPicker({ id, name, label, labelType, tooltip, required, hideError, disabled, triggerIcon, presetColors, position, submitText, className, dataTrigger, dataHexInput, dataSubmit, }: FormikColorPickerProps): import("react/jsx-runtime").JSX.Element; +export default FormikColorPicker; diff --git a/packages/design-system/types/src/forms/FormikDateChanger.d.ts b/packages/design-system/types/src/forms/FormikDateChanger.d.ts new file mode 100644 index 0000000..9b82000 --- /dev/null +++ b/packages/design-system/types/src/forms/FormikDateChanger.d.ts @@ -0,0 +1,40 @@ +import { DateChangerClassName } from '../DateChanger'; +export interface FormikDateChangerProps { + id?: string; + name: string; + data?: { + cy?: string; + test?: string; + }; + dataButton?: { + cy?: string; + test?: string; + }; + label?: string; + tooltip?: string; + required?: boolean; + hideError?: boolean; + disabled?: boolean; + className?: { + root?: string; + dateChanger?: DateChangerClassName; + }; +} +/** + * This function returns a date field that works as to be expected in a Formik environment. + * State is managed by Formik through the name attribute. + * + * @param id - The id of the field. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param dataButton - The object of data attributes that can be used for testing (e.g. data-test or data-cy) for the button + * @param name - The name of the field as used to keep track of the state in Formik. + * @param label - The optional label is shown next to the field in the form. + * @param tooltip - The optional tooltip is shown on hover next to the label. + * @param required - Indicate whether the field is required or not. + * @param hideError - Hide the error message below this component as is might be more appropriate to show it somewhere else. + * @param disabled - Disable the field. + * @param className - The optional className object allows you to override the default styling. + * @returns Date field component with Formik state management. + */ +export declare function FormikDateChanger({ id, data, dataButton, name, label, tooltip, required, hideError, disabled, className, }: FormikDateChangerProps): import("react/jsx-runtime").JSX.Element; +export default FormikDateChanger; diff --git a/packages/design-system/types/src/forms/FormikDateField.d.ts b/packages/design-system/types/src/forms/FormikDateField.d.ts new file mode 100644 index 0000000..62ffa42 --- /dev/null +++ b/packages/design-system/types/src/forms/FormikDateField.d.ts @@ -0,0 +1,44 @@ +import { default as React } from 'react'; +export interface DateFieldProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + label?: string; + labelType?: 'small' | 'normal'; + placeholder?: string; + tooltip?: string | React.ReactNode; + required?: boolean; + hideError?: boolean; + disabled?: boolean; + className?: { + root?: string; + field?: string; + label?: string; + input?: string; + error?: string; + tooltip?: string; + }; + name: string; + [key: string]: any; +} +/** + * This function returns a date field that works as to be expected in a Formik environment. + * State is managed by Formik through the name attribute. + * + * @param id - The id of the field. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param name - The name of the field as used to keep track of the state in Formik. + * @param label - The optional label is shown next to the field in the form. + * @param labelType - The optional labelType can be used to change the size and position of the label according to pre-defined standards. + * @param placeholder - The optional placeholder is shown when the field is empty. + * @param tooltip - The optional tooltip is shown on hover next to the label. + * @param required - Indicate whether the field is required or not. + * @param hideError - Hide the error message below this component as is might be more appropriate to show it somewhere else. + * @param disabled - Disable the field. + * @param className - The optional className object allows you to override the default styling. + * @returns Date field component with Formik state management. + */ +export declare function FormikDateField({ id, data, name, label, labelType, placeholder, tooltip, required, hideError, disabled, className, ...props }: DateFieldProps): import("react/jsx-runtime").JSX.Element; +export default FormikDateField; diff --git a/packages/design-system/types/src/forms/FormikNumberField.d.ts b/packages/design-system/types/src/forms/FormikNumberField.d.ts new file mode 100644 index 0000000..013e5eb --- /dev/null +++ b/packages/design-system/types/src/forms/FormikNumberField.d.ts @@ -0,0 +1,50 @@ +import { default as React } from 'react'; +import { NumberFieldClassName } from './NumberField'; +export interface FormikNumberFieldProps { + id?: string; + name: string; + data?: { + cy?: string; + test?: string; + }; + label?: string; + labelType?: 'small' | 'normal'; + placeholder?: string; + tooltip?: string | React.ReactNode; + required?: boolean; + hideError?: boolean; + precision?: number; + min?: number; + max?: number; + disabled?: boolean; + className?: { + root?: string; + field?: string; + label?: string; + tooltip?: string; + error?: string; + numberField?: NumberFieldClassName; + }; +} +/** + * This function returns a text field that works as to be expected in a Formik environment. + * State can be managed either through Formik or internally by passing a value and onChange function. + * + * @param id - The id of the field. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param name - The name of the field as used to keep track of the state in Formik. If no value and onChange function are provided, this field is required. + * @param label - The optional label is shown next to the field in the form. + * @param labelType - The optional labelType can be used to change the size and position of the label according to pre-defined standards. + * @param placeholder - The optional placeholder is shown when the field is empty. + * @param tooltip - The optional tooltip is shown on hover next to the label. + * @param required - Indicate whether the field is required or not. + * @param hideError - Hide the error message below this component as is might be more appropriate to show it somewhere else. + * @param precision - The optional precision defines the number of decimal places that are allowed. + * @param min - The optional min defines the minimum value that is allowed. + * @param max - The optional max defines the maximum value that is allowed. + * @param disabled - Disables the field. + * @param className - The optional className object allows you to override the default styling. + * @returns Text field component with Formik state management. + */ +export declare function FormikNumberField({ id, data, name, label, labelType, placeholder, tooltip, required, hideError, precision, min, max, disabled, className, }: FormikNumberFieldProps): import("react/jsx-runtime").JSX.Element; +export default FormikNumberField; diff --git a/packages/design-system/types/src/forms/FormikPinField.d.ts b/packages/design-system/types/src/forms/FormikPinField.d.ts new file mode 100644 index 0000000..6893b17 --- /dev/null +++ b/packages/design-system/types/src/forms/FormikPinField.d.ts @@ -0,0 +1,22 @@ +import { default as React } from 'react'; +export interface PinFieldProps { + id?: string; + name: string; + required?: boolean; + label?: string; + labelType?: 'small' | 'normal'; + tooltip?: string | React.ReactNode; + className?: { + root?: string; + field?: string; + label?: string; + error?: string; + tooltip?: string; + }; + data?: { + cy?: string; + test?: string; + }; +} +export declare function PinField({ id, name, required, label, labelType, tooltip, className, data, }: PinFieldProps): import("react/jsx-runtime").JSX.Element; +export default PinField; diff --git a/packages/design-system/types/src/forms/FormikSelectField.d.ts b/packages/design-system/types/src/forms/FormikSelectField.d.ts new file mode 100644 index 0000000..18c0c6b --- /dev/null +++ b/packages/design-system/types/src/forms/FormikSelectField.d.ts @@ -0,0 +1,55 @@ +import { default as React } from 'react'; +import { SelectClassName, SelectGroup, SelectItem } from '../Select'; +interface FormikSelectFieldProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + name: string; + label?: string; + labelType?: 'small' | 'normal'; + placeholder?: string; + tooltip?: string | React.ReactNode; + required?: boolean; + disabled?: boolean; + hideError?: boolean; + contentPosition?: 'item-aligned' | 'popper'; + className?: { + root?: string; + label?: string; + error?: string; + tooltip?: string; + select?: SelectClassName; + }; +} +export interface FormikSelectFieldItemsProps extends FormikSelectFieldProps { + items: SelectItem[]; + groups?: never; +} +export interface FormikSelectFieldGroupsProps extends FormikSelectFieldProps { + groups: SelectGroup[]; + items?: never; +} +/** + * This component returns a select field that works as to be expected in a Formik environment. + * State is managed by Formik through the name attribute. + * + * @param id - The id of the field. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param name - The name of the field. This is used to identify the field in Formik. + * @param items - The array of items that should be available on the select component. + * @param groups - The optional groups array can be used to group items in the select component. + * @param label - The optional label is shown next to the field in the form. + * @param labelType - The optional labelType can be used to change the size and position of the label according to pre-defined standards. + * @param placeholder - The optional placeholder is shown when no value is selected / initialization with 'undefined' is chosen. + * @param disabled - The optional disabled prop disables the select component. + * @param hideError - Hide the error message below this component as is might be more appropriate to show it somewhere else. + * @param contentPosition - The position of the content of the select component. Currently only 'item-aligned' and 'popper' are supported. + * @param tooltip - The optional tooltip is shown on hover next to the label. + * @param required - Indicate whether the field is required or not. + * @param className - The optional className object allows you to override the default styling. + * @returns Select component with formik state management. + */ +export declare function FormikSelectField({ id, data, name, items, groups, label, labelType, placeholder, tooltip, required, disabled, hideError, contentPosition, className, ...props }: FormikSelectFieldItemsProps | FormikSelectFieldGroupsProps): import("react/jsx-runtime").JSX.Element; +export default FormikSelectField; diff --git a/packages/design-system/types/src/forms/FormikSwitchField.d.ts b/packages/design-system/types/src/forms/FormikSwitchField.d.ts new file mode 100644 index 0000000..a01b9ce --- /dev/null +++ b/packages/design-system/types/src/forms/FormikSwitchField.d.ts @@ -0,0 +1,43 @@ +import { default as React } from 'react'; +import { SwitchClassName } from '../Switch'; +export interface FormikSwitchFieldProps { + id?: string; + name: string; + data?: { + cy?: string; + test?: string; + }; + disabled?: boolean; + hideError?: boolean; + label?: string; + size?: 'sm' | 'md' | 'lg'; + standardLabel?: boolean; + tooltip?: string | React.ReactNode; + required?: boolean; + className?: { + root?: string; + label?: string; + tooltip?: string; + error?: string; + switch?: SwitchClassName; + }; +} +/** + * This function extends the pre-styled Switch component so that it works as to be expected in a Formik environment. + * State, in this case, is managed by Formik through the name attribute. + * + * @param id - The id of the switch. + * @param name - The name of the field. This is used to identify the field in Formik. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param label - The label that is displayed next to the switch. + * @param disabled - Indicator whether the switch is disabled or not. + * @param hideError - Indicator whether the error message is displayed or not. + * @param size - The size of the switch. The size can be small, medium or large. + * @param standardLabel - Indicator whether the label is displayed in the standard format (left of the component) instead of being optimized to a switch. + * @param tooltip - The tooltip that is displayed when hovering over the label. Tooltips are only available with the standardLabel setting. + * @param required - Indicator whether the field is required or not. This is only available with the standardLabel setting. + * @param className - The optional className object allows you to override the default styling. + * @returns Switch component with formik state management + */ +export declare function FormikSwitchField({ id, name, data, disabled, hideError, label, size, standardLabel, required, tooltip, className, }: FormikSwitchFieldProps): import("react/jsx-runtime").JSX.Element; +export default FormikSwitchField; diff --git a/packages/design-system/types/src/forms/FormikTextField.d.ts b/packages/design-system/types/src/forms/FormikTextField.d.ts new file mode 100644 index 0000000..2fe7e92 --- /dev/null +++ b/packages/design-system/types/src/forms/FormikTextField.d.ts @@ -0,0 +1,65 @@ +import { IconDefinition } from '@fortawesome/free-solid-svg-icons'; +import { default as React } from 'react'; +interface TextFieldProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + label?: string; + labelType?: 'small' | 'normal'; + icon?: IconDefinition; + onIconClick?: () => void; + placeholder?: string; + tooltip?: string | React.ReactNode; + required?: boolean; + hideError?: boolean; + disabled?: boolean; + className?: { + root?: string; + field?: string; + icon?: string; + label?: string; + input?: string; + error?: string; + tooltip?: string; + }; +} +export interface TextFieldWithNameProps extends TextFieldProps { + name: string; + value?: never; + onChange?: never; + error?: never; + [key: string]: any; +} +export interface TextFieldWithOnChangeProps extends TextFieldProps { + name?: never; + value: string; + onChange: (newValue: string) => void; + error?: string; + [key: string]: any; +} +/** + * This function returns a text field that works as to be expected in a Formik environment. + * State can be managed either through Formik or internally by passing a value and onChange function. + * + * @param id - The id of the field. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param name - The name of the field as used to keep track of the state in Formik. If no value and onChange function are provided, this field is required. + * @param value - The value of the field. This is used to manage the state internally. If no name is provided, this field is required. + * @param onChange - The onChange function is called when the value of the field changes. This is used to manage the state internally. If no name is provided, this field is required. + * @param error - The error message that is shown below the field. If a name is provided, this prop will not be used. + * @param label - The optional label is shown next to the field in the form. + * @param labelType - The optional labelType can be used to change the size and position of the label according to pre-defined standards. + * @param icon - An optional icon (FontAwesomeIcon IconDefinition) that is shown on the right side of the text input component + * @param onIconClick - An optional function that is called when the icon (previous prop) is clicked + * @param placeholder - The optional placeholder is shown when the field is empty. + * @param tooltip - The optional tooltip is shown on hover next to the label. + * @param required - Indicate whether the field is required or not. + * @param hideError - Hide the error message below this component as is might be more appropriate to show it somewhere else. + * @param disabled - Disable the field. + * @param className - The optional className object allows you to override the default styling. + * @returns Text field component with Formik state management. + */ +export declare function FormikTextField({ id, data, name, value, onChange, error, label, labelType, icon, onIconClick, placeholder, tooltip, required, hideError, disabled, className, ...props }: TextFieldWithNameProps | TextFieldWithOnChangeProps): import("react/jsx-runtime").JSX.Element; +export default FormikTextField; diff --git a/packages/design-system/types/src/forms/FormikTextareaField.d.ts b/packages/design-system/types/src/forms/FormikTextareaField.d.ts new file mode 100644 index 0000000..0ce9b45 --- /dev/null +++ b/packages/design-system/types/src/forms/FormikTextareaField.d.ts @@ -0,0 +1,60 @@ +import { default as React } from 'react'; +export interface TextareaFieldProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + label?: string; + labelType?: 'small' | 'normal'; + placeholder?: string; + tooltip?: string | React.ReactNode; + required?: boolean; + maxLength?: number; + maxLengthLabel?: string; + hideError?: boolean; + disabled?: boolean; + className?: { + root?: string; + field?: string; + label?: string; + input?: string; + error?: string; + tooltip?: string; + }; +} +export interface TextareaFieldWithNameProps extends TextareaFieldProps { + name: string; + value?: never; + onChange?: never; + [key: string]: any; +} +export interface TextareaFieldWithOnChangeProps extends TextareaFieldProps { + name?: never; + value: string; + onChange: (newValue: string) => void; + [key: string]: any; +} +/** + * This component returns a textarea field that works as to be expected in a Formik environment. + * State can be managed either through Formik or internally by passing a value and onChange function. + * + * @param id - The id of the field. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param name - The name of the field as used to keep track of the state in Formik. If no value and onChange function are provided, this field is required. + * @param label - The optional label is shown next to the field in the form. + * @param labelType - The optional labelType can be used to change the size and position of the label according to pre-defined standards. + * @param tooltip - The optional tooltip is shown on hover next to the label. + * @param required - Indicate whether the field is required or not. + * @param placeholder - The optional placeholder is shown when the field is empty. + * @param value - The value of the field. This is used to manage the state internally. If no name is provided, this field is required. + * @param onChange - The onChange function is called when the value of the field changes. This is used to manage the state internally. If no name is provided, this field is required. + * @param maxLength - The optional maxLength is used to limit the number of characters that can be entered in the field. + * @param maxLengthLabel - This optional label allows to specify a custom label for the maxLength indicator (e.g. "characters left" supporting internationalization). + * @param hideError - Hide the error message below this component as is might be more appropriate to show it somewhere else. + * @param disabled - Disable the field. + * @param className - The optional className object allows you to override the default styling. + * @returns Textarea component with Formik state management. + */ +export declare function FormikTextareaField({ id, data, name, value, onChange, label, labelType, placeholder, tooltip, required, maxLength, maxLengthLabel, hideError, disabled, className, ...props }: TextareaFieldWithNameProps | TextareaFieldWithOnChangeProps): import("react/jsx-runtime").JSX.Element; +export default FormikTextareaField; diff --git a/packages/design-system/types/src/forms/Label.d.ts b/packages/design-system/types/src/forms/Label.d.ts new file mode 100644 index 0000000..fca350e --- /dev/null +++ b/packages/design-system/types/src/forms/Label.d.ts @@ -0,0 +1,36 @@ +import { default as React } from 'react'; +export interface LabelProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + forId?: string; + label: string; + required?: boolean; + tooltip?: string | React.ReactNode; + showTooltipSymbol?: boolean; + tooltipSymbolSize?: 'sm' | 'md' | 'lg' | 'xl'; + className?: { + root?: string; + tooltip?: string; + tooltipSymbol?: string; + arrow?: string; + }; +} +/** + * This function returns a label component based on the RadixUI label. + * + * @param id - The id of the label. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param forId - The id of the element that the label is for. + * @param label - The text displayed as label. + * @param required - Indicate whether the field is required or not. + * @param tooltip - The optional tooltip is shown on hover over the label. + * @param showTooltipSymbol - Indicate whether the tooltip symbol should be shown or not. + * @param tooltipSymbolSize - The size of the tooltip symbol. + * @param className - The optional className object allows you to override the default styling. + * @returns Label component with optional tooltip and required symbol. + */ +export declare function Label({ id, data, forId, label, required, tooltip, showTooltipSymbol, tooltipSymbolSize, className, }: LabelProps): React.ReactElement; +export default Label; diff --git a/packages/design-system/types/src/forms/NewFormikColorPicker.d.ts b/packages/design-system/types/src/forms/NewFormikColorPicker.d.ts new file mode 100644 index 0000000..34f1dca --- /dev/null +++ b/packages/design-system/types/src/forms/NewFormikColorPicker.d.ts @@ -0,0 +1,38 @@ +import { IconDefinition } from '@fortawesome/free-regular-svg-icons'; +import { default as React } from 'react'; +import { ColorPickerClassName } from '../ColorPicker'; +export interface FormikColorPickerProps { + name: string; + label?: string; + labelType?: 'small' | 'large'; + validateForm?: () => void; + tooltip?: string | React.ReactNode; + required?: boolean; + disabled?: boolean; + triggerIcon?: IconDefinition; + presetColors?: string[]; + position?: 'bottom' | 'top'; + submitText: string; + colorLabel: string; + colorTooltip?: string; + dataTrigger?: { + cy?: string; + test?: string; + }; + dataHexInput?: { + cy?: string; + test?: string; + }; + dataSubmit?: { + cy?: string; + test?: string; + }; + className?: { + root?: string; + label?: string; + tooltip?: string; + picker?: ColorPickerClassName; + }; +} +export declare function FormikColorPicker({ name, label, labelType, validateForm, tooltip, required, disabled, triggerIcon, presetColors, position, submitText, colorLabel, colorTooltip, dataTrigger, dataHexInput, dataSubmit, className, }: FormikColorPickerProps): import("react/jsx-runtime").JSX.Element; +export default FormikColorPicker; diff --git a/packages/design-system/types/src/forms/NewFormikDateChanger.d.ts b/packages/design-system/types/src/forms/NewFormikDateChanger.d.ts new file mode 100644 index 0000000..5aad96f --- /dev/null +++ b/packages/design-system/types/src/forms/NewFormikDateChanger.d.ts @@ -0,0 +1,47 @@ +import { IconDefinition } from '@fortawesome/free-regular-svg-icons'; +import { default as React } from 'react'; +import { DateChangerClassName } from '../DateChanger'; +export interface FormikDateChangerProps { + id?: string; + name: string; + label?: string; + labelType?: 'small' | 'large'; + required?: boolean; + tooltip?: string | React.ReactNode; + disabled?: boolean; + hideError?: boolean; + format?: string; + editIcon?: IconDefinition; + validateField?: () => void; + data?: { + cy?: string; + test?: string; + }; + dataButton?: { + cy?: string; + test?: string; + }; + className?: DateChangerClassName; +} +/** + * This component provides a simple date changer with a label and a button to edit the date (not coupled to a formik context). + * + * @param id - The id of the date changer + * @param name - The name of the field as used to keep track of the state in Formik. + * @param label - The label of the date changer + * @param labelType - The type of the label (small or large) + * @param tooltip - The tooltip of the date changer (is only shown if a label is given) + * @param required - Whether the date label should contain a required symbol + * @param disabled - Whether the date changer is disabled or not + * @param hideError - Whether the error message should be hidden + * @param format - The format of the date when the edit mode is not active (then the display is up to the browser implementation) + * @param date - The date to be displayed + * @param editIcon - The icon to be displayed on the edit button + * @param validateField - Function to trigger validation of the field under consideration + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param dataButton - The object of data attributes that can be used for testing (e.g. data-test or data-cy) for the button + * @param className - The optional className object allows you to override the default styling. + * @returns Date changer component with optional label, edit button and save button. + */ +declare function FormikDateChanger({ id, name, label, labelType, tooltip, required, disabled, hideError, format, editIcon, validateField, data, dataButton, className, }: FormikDateChangerProps): import("react/jsx-runtime").JSX.Element; +export default FormikDateChanger; diff --git a/packages/design-system/types/src/forms/NewFormikDateField.d.ts b/packages/design-system/types/src/forms/NewFormikDateField.d.ts new file mode 100644 index 0000000..1b5704c --- /dev/null +++ b/packages/design-system/types/src/forms/NewFormikDateField.d.ts @@ -0,0 +1,44 @@ +import { default as React } from 'react'; +export interface NewFormikDateFieldProps { + id?: string; + name: string; + data?: { + cy?: string; + test?: string; + }; + label?: string; + labelType?: 'small' | 'large'; + placeholder?: string; + tooltip?: string | React.ReactNode; + required?: boolean; + hideError?: boolean; + disabled?: boolean; + className?: { + root?: string; + field?: string; + label?: string; + input?: string; + error?: string; + tooltip?: string; + }; + [key: string]: any; +} +/** + * This function returns a date field that works as to be expected in a Formik environment. + * State is managed by Formik through the name attribute. + * + * @param id - The id of the field. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param name - The name of the field as used to keep track of the state in Formik. + * @param label - The optional label is shown next to the field in the form. + * @param labelType - The optional labelType can be used to change the size and position of the label according to pre-defined standards. + * @param placeholder - The optional placeholder is shown when the field is empty. + * @param tooltip - The optional tooltip is shown on hover next to the label. + * @param required - Indicate whether the field is required or not. + * @param hideError - Hide the error message below this component as is might be more appropriate to show it somewhere else. + * @param disabled - Disable the field. + * @param className - The optional className object allows you to override the default styling. + * @returns Date field component with Formik state management. + */ +export declare function NewFormikDateField({ id, data, name, label, labelType, placeholder, tooltip, required, hideError, disabled, className, ...props }: NewFormikDateFieldProps): import("react/jsx-runtime").JSX.Element; +export default NewFormikDateField; diff --git a/packages/design-system/types/src/forms/NewFormikNumberField.d.ts b/packages/design-system/types/src/forms/NewFormikNumberField.d.ts new file mode 100644 index 0000000..54c9060 --- /dev/null +++ b/packages/design-system/types/src/forms/NewFormikNumberField.d.ts @@ -0,0 +1,61 @@ +import { default as React } from 'react'; +import { NumberFieldClassName } from './NumberField'; +interface FormikNumberFieldProps { + id?: string; + label?: string; + labelType?: 'small' | 'large'; + placeholder?: string; + precision?: number; + min?: number; + max?: number; + tooltip?: string | React.ReactNode; + required?: boolean; + hideError?: boolean; + error?: string; + disabled?: boolean; + onBlur?: () => void; + data?: { + cy?: string; + test?: string; + }; + className?: NumberFieldClassName & { + root?: string; + }; + [key: string]: any; +} +export interface FormikNumberFieldNameProps extends FormikNumberFieldProps { + name: string; + value?: never; + onChange?: never; + isTouched?: never; +} +export interface FormikNumberFieldOnChangeProps extends FormikNumberFieldProps { + name?: never; + value: string; + onChange: (newValue: string) => void; + isTouched?: boolean; +} +/** + * This function returns a text field component for use without formik + * + * @param id - The id of the input field. + * @param value - The value of the input field (external state management). + * @param onChange - The onChange function of the input field (external state management). + * @param label - The text displayed as label. + * @param labelType - The optional labelType can be used to change the size and position of the label according to pre-defined standards. + * @param placeholder - The placeholder text for the input field. + * @param precision - The optional precision defines the number of decimal places that are allowed. + * @param min - The optional min defines the minimum value that is allowed. + * @param max - The optional max defines the maximum value that is allowed. + * @param tooltip - The optional tooltip is shown on hover over the tooltip next to the label. + * @param required - Indicate whether the field is required or not. + * @param hideError - Indicate whether the error message should be hidden or not. + * @param error - The error message that is displayed below the input field. + * @param isTouched - Indicate whether the field has been touched or not (validation is not handled by this component). + * @param disabled - Indicate whether the field is disabled or not. + * @param onBlur - The onBlur function of the input field. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param className - The optional className object allows you to override the default styling. + */ +export declare function FormikNumberField({ id, name, value, onChange, label, labelType, placeholder, precision, min, max, tooltip, required, hideError, error, isTouched, disabled, onBlur, data, className, ...props }: FormikNumberFieldNameProps | FormikNumberFieldOnChangeProps): import("react/jsx-runtime").JSX.Element; +export default FormikNumberField; diff --git a/packages/design-system/types/src/forms/NewFormikPinField.d.ts b/packages/design-system/types/src/forms/NewFormikPinField.d.ts new file mode 100644 index 0000000..cbcf985 --- /dev/null +++ b/packages/design-system/types/src/forms/NewFormikPinField.d.ts @@ -0,0 +1,19 @@ +import { default as React } from 'react'; +import { TextFieldClassName } from './TextField'; +export interface FormikPinFieldProps { + id?: string; + name: string; + required?: boolean; + label?: string; + labelType?: 'small' | 'large'; + tooltip?: string | React.ReactNode; + className?: TextFieldClassName & { + root?: string; + }; + data?: { + cy?: string; + test?: string; + }; +} +export declare function FormikPinField({ id, name, required, label, labelType, tooltip, className, data, }: FormikPinFieldProps): import("react/jsx-runtime").JSX.Element; +export default FormikPinField; diff --git a/packages/design-system/types/src/forms/NewFormikSelectField.d.ts b/packages/design-system/types/src/forms/NewFormikSelectField.d.ts new file mode 100644 index 0000000..777be19 --- /dev/null +++ b/packages/design-system/types/src/forms/NewFormikSelectField.d.ts @@ -0,0 +1,57 @@ +import { default as React } from 'react'; +import { SelectClassName, SelectGroup, SelectItem } from '../Select'; +interface FormikSelectFieldProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + name: string; + label?: string; + labelType?: 'small' | 'large'; + placeholder?: string; + tooltip?: string | React.ReactNode; + required?: boolean; + disabled?: boolean; + error?: string; + hideError?: boolean; + contentPosition?: 'item-aligned' | 'popper'; + className?: { + root?: string; + label?: string; + error?: string; + tooltip?: string; + select?: SelectClassName; + }; +} +export interface FormikSelectFieldItemsProps extends FormikSelectFieldProps { + items: SelectItem[]; + groups?: never; +} +export interface FormikSelectFieldGroupsProps extends FormikSelectFieldProps { + groups: SelectGroup[]; + items?: never; +} +/** + * This component returns a select field that works as to be expected in a Formik environment. + * State is managed by Formik through the name attribute. + * + * @param id - The id of the field. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param name - The name of the field. + * @param items - The array of items that should be available on the select component. + * @param groups - The optional groups array can be used to group items in the select component. + * @param label - The optional label is shown next to the field in the form. + * @param labelType - The optional labelType can be used to change the size and position of the label according to pre-defined standards. + * @param placeholder - The optional placeholder is shown when no value is selected / initialization with 'undefined' is chosen. + * @param disabled - The optional disabled prop disables the select component. + * @param error - The optional error message is shown next to the component. + * @param hideError - Hide the error message below this component as is might be more appropriate to show it somewhere else. + * @param contentPosition - The position of the content of the select component. Currently only 'item-aligned' and 'popper' are supported. + * @param tooltip - The optional tooltip is shown on hover next to the label. + * @param required - Indicate whether the field is required or not. + * @param className - The optional className object allows you to override the default styling. + * @returns Select component with formik state management. + */ +export declare function FormikSelectField({ id, data, name, items, groups, label, labelType, placeholder, tooltip, required, disabled, error, hideError, contentPosition, className, ...props }: FormikSelectFieldItemsProps | FormikSelectFieldGroupsProps): import("react/jsx-runtime").JSX.Element; +export default FormikSelectField; diff --git a/packages/design-system/types/src/forms/NewFormikSwitchField.d.ts b/packages/design-system/types/src/forms/NewFormikSwitchField.d.ts new file mode 100644 index 0000000..cd0f047 --- /dev/null +++ b/packages/design-system/types/src/forms/NewFormikSwitchField.d.ts @@ -0,0 +1,37 @@ +import { default as React } from 'react'; +import { SwitchClassName } from '../Switch'; +export interface FormikSwitchFieldProps { + id?: string; + name: string; + data?: { + cy?: string; + test?: string; + }; + disabled?: boolean; + error?: string; + hideError?: boolean; + label?: string; + size?: 'sm' | 'md' | 'lg'; + tooltip?: string | React.ReactNode; + required?: boolean; + className?: SwitchClassName; +} +/** + * This function extends the pre-styled Switch component so that it works as to be expected in a Formik environment. + * State, in this case, is managed by Formik through the name attribute. + * + * @param id - The id of the switch. + * @param name - The name of the field. This is used to identify the field in Formik. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param label - The label that is displayed next to the switch. + * @param disabled - Indicator whether the switch is disabled or not. + * @param error - The error message that is shown below the switch. + * @param hideError - Indicator whether the error message is displayed or not. + * @param size - The size of the switch. The size can be small, medium or large. + * @param tooltip - The tooltip that is displayed when hovering over the label. Tooltips are only available with the standardLabel setting. + * @param required - Indicator whether the field is required or not. This is only available with the standardLabel setting. + * @param className - The optional className object allows you to override the default styling. + * @returns Switch component with formik state management + */ +export declare function FormikSwitchField({ id, name, data, disabled, error, hideError, label, size, required, tooltip, className, }: FormikSwitchFieldProps): import("react/jsx-runtime").JSX.Element; +export default FormikSwitchField; diff --git a/packages/design-system/types/src/forms/NewFormikTextField.d.ts b/packages/design-system/types/src/forms/NewFormikTextField.d.ts new file mode 100644 index 0000000..7d8ccae --- /dev/null +++ b/packages/design-system/types/src/forms/NewFormikTextField.d.ts @@ -0,0 +1,64 @@ +import { IconDefinition } from '@fortawesome/free-solid-svg-icons'; +import { default as React } from 'react'; +import { TextFieldClassName } from './TextField'; +interface FormikTextFieldProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + label?: string; + labelType?: 'small' | 'large'; + icon?: IconDefinition; + onIconClick?: () => void; + placeholder?: string; + tooltip?: string | React.ReactNode; + required?: boolean; + hideError?: boolean; + disabled?: boolean; + onPaste?: (e: any) => void; + className?: TextFieldClassName & { + root?: string; + }; +} +export interface FormikTextFieldWithNameProps extends FormikTextFieldProps { + name: string; + value?: never; + onChange?: never; + error?: never; + isTouched?: never; + [key: string]: any; +} +export interface FormikTextFieldWithOnChangeProps extends FormikTextFieldProps { + name?: never; + value: string; + onChange: (newValue: string) => void; + error?: string; + isTouched?: boolean; + [key: string]: any; +} +/** + * This function returns a text field that works as to be expected in a Formik environment. + * State can be managed either through Formik or internally by passing a value and onChange function. + * + * @param id - The id of the field. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param name - The name of the field as used to keep track of the state in Formik. If no value and onChange function are provided, this field is required. + * @param value - The value of the field. This is used to manage the state internally. If no name is provided, this field is required. + * @param onChange - The onChange function is called when the value of the field changes. This is used to manage the state internally. If no name is provided, this field is required. + * @param error - The error message that is shown below the field. If a name is provided, this prop will not be used. + * @param label - The optional label is shown next to the field in the form. + * @param labelType - The optional labelType can be used to change the size and position of the label according to pre-defined standards. + * @param icon - An optional icon (FontAwesomeIcon IconDefinition) that is shown on the right side of the text input component + * @param onIconClick - An optional function that is called when the icon (previous prop) is clicked + * @param placeholder - The optional placeholder is shown when the field is empty. + * @param tooltip - The optional tooltip is shown on hover next to the label. + * @param required - Indicate whether the field is required or not. + * @param hideError - Hide the error message below this component as is might be more appropriate to show it somewhere else. + * @param disabled - Disable the field. + * @param onPaste - An optional function that is called when the user pastes text into the field. + * @param className - The optional className object allows you to override the default styling. + * @returns Text field component with Formik state management. + */ +export declare function FormikTextField({ id, data, name, value, onChange, error, label, labelType, icon, onIconClick, placeholder, tooltip, required, hideError, isTouched, disabled, onPaste, className, ...props }: FormikTextFieldWithNameProps | FormikTextFieldWithOnChangeProps): import("react/jsx-runtime").JSX.Element; +export default FormikTextField; diff --git a/packages/design-system/types/src/forms/NewFormikTextareaField.d.ts b/packages/design-system/types/src/forms/NewFormikTextareaField.d.ts new file mode 100644 index 0000000..72394e8 --- /dev/null +++ b/packages/design-system/types/src/forms/NewFormikTextareaField.d.ts @@ -0,0 +1,66 @@ +import { default as React } from 'react'; +interface FormikTextareaFieldProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + label?: string; + labelType?: 'small' | 'large'; + placeholder?: string; + tooltip?: string | React.ReactNode; + maxLength?: number; + maxLengthUnit?: string; + hideMaxLength?: boolean; + required?: boolean; + hideError?: boolean; + disabled?: boolean; + className?: { + root?: string; + field?: string; + icon?: string; + label?: string; + input?: string; + error?: string; + tooltip?: string; + }; +} +export interface FormikTextareaFieldWithNameProps extends FormikTextareaFieldProps { + name: string; + value?: never; + onChange?: never; + error?: never; + [key: string]: any; +} +export interface FormikTextareaFieldWithOnChangeProps extends FormikTextareaFieldProps { + name?: never; + value: string; + onChange: (newValue: string) => void; + error?: string; + [key: string]: any; +} +/** + * This function returns a text field that works as to be expected in a Formik environment. + * State can be managed either through Formik or internally by passing a value and onChange function. + * + * @param id - The id of the field. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param name - The name of the field as used to keep track of the state in Formik. If no value and onChange function are provided, this field is required. + * @param value - The value of the field. This is used to manage the state internally. If no name is provided, this field is required. + * @param onChange - The onChange function is called when the value of the field changes. This is used to manage the state internally. If no name is provided, this field is required. + * @param error - The error message that is shown below the field. If a name is provided, this prop will not be used. + * @param label - The optional label is shown next to the field in the form. + * @param labelType - The optional labelType can be used to change the size and position of the label according to pre-defined standards. + * @param placeholder - The optional placeholder is shown when the field is empty. + * @param tooltip - The optional tooltip is shown on hover next to the label. + * @param maxLength - The optional maxLength is shown below the field to indicate the maximum number of characters allowed. + * @param maxLengthUnit - The optional maxLengthUnit is shown next to the maxLength to indicate the unit of the maximum number of characters allowed. + * @param hideMaxLength - Indicate whether the maxLength should be hidden or not. + * @param required - Indicate whether the field is required or not. + * @param hideError - Hide the error message below this component as is might be more appropriate to show it somewhere else. + * @param disabled - Disable the field. + * @param className - The optional className object allows you to override the default styling. + * @returns Text field component with Formik state management. + */ +export declare function FormikTextareaField({ id, data, name, value, onChange, error, label, labelType, icon, onIconClick, placeholder, tooltip, required, hideError, disabled, className, ...props }: FormikTextareaFieldWithNameProps | FormikTextareaFieldWithOnChangeProps): import("react/jsx-runtime").JSX.Element; +export default FormikTextareaField; diff --git a/packages/design-system/types/src/forms/NumberField.d.ts b/packages/design-system/types/src/forms/NumberField.d.ts new file mode 100644 index 0000000..6b16d21 --- /dev/null +++ b/packages/design-system/types/src/forms/NumberField.d.ts @@ -0,0 +1,56 @@ +import { default as React } from 'react'; +export interface NumberFieldClassName { + field?: string; + label?: string; + input?: string; + error?: string; + tooltip?: string; +} +export interface NumberFieldProps { + id?: string; + value: string | number; + onChange: (newValue: string) => void; + label?: string; + labelType?: 'small' | 'large'; + placeholder?: string; + precision?: number; + min?: number; + max?: number; + tooltip?: string | React.ReactNode; + required?: boolean; + hideError?: boolean; + error?: string; + isTouched?: boolean; + disabled?: boolean; + onBlur?: () => void; + data?: { + cy?: string; + test?: string; + }; + className?: NumberFieldClassName; + [key: string]: any; +} +/** + * This function returns a text field component for use without formik + * + * @param id - The id of the input field. + * @param value - The value of the input field (external state management). + * @param onChange - The onChange function of the input field (external state management). + * @param label - The text displayed as label. + * @param labelType - The optional labelType can be used to change the size and position of the label according to pre-defined standards. + * @param placeholder - The placeholder text for the input field. + * @param precision - The optional precision defines the number of decimal places that are allowed. + * @param min - The optional min defines the minimum value that is allowed. + * @param max - The optional max defines the maximum value that is allowed. + * @param tooltip - The optional tooltip is shown on hover over the tooltip next to the label. + * @param required - Indicate whether the field is required or not. + * @param hideError - Indicate whether the error message should be hidden or not. + * @param error - The error message that is displayed below the input field. + * @param isTouched - Indicate whether the field has been touched or not (validation is not handled by this component). + * @param disabled - Indicate whether the field is disabled or not. + * @param onBlur - The onBlur function of the input field. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param className - The optional className object allows you to override the default styling. + */ +export declare function NumberField({ id, value, onChange, label, labelType, placeholder, precision, min, max, tooltip, required, hideError, error, isTouched, disabled, onBlur, data, className, ...props }: NumberFieldProps): React.ReactElement; +export default NumberField; diff --git a/packages/design-system/types/src/forms/SelectField.d.ts b/packages/design-system/types/src/forms/SelectField.d.ts new file mode 100644 index 0000000..eb91555 --- /dev/null +++ b/packages/design-system/types/src/forms/SelectField.d.ts @@ -0,0 +1,63 @@ +import { default as React } from 'react'; +import { SelectClassName, SelectGroup, SelectItem } from '../Select'; +interface SelectFieldProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + name?: string; + value: string; + onChange: (newValue: string) => void; + onBlur?: () => void; + label?: string; + labelType?: 'small' | 'large'; + placeholder?: string; + tooltip?: string | React.ReactNode; + required?: boolean; + disabled?: boolean; + error?: string; + hideError?: boolean; + contentPosition?: 'item-aligned' | 'popper'; + className?: { + root?: string; + label?: string; + error?: string; + tooltip?: string; + select?: SelectClassName; + }; +} +export interface SelectFieldItemsProps extends SelectFieldProps { + items: SelectItem[]; + groups?: never; +} +export interface SelectFieldGroupsProps extends SelectFieldProps { + groups: SelectGroup[]; + items?: never; +} +/** + * This component returns a select field that works as to be expected in a Formik environment. + * State is managed by Formik through the name attribute. + * + * @param id - The id of the field. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param name - The name of the field. + * @param items - The array of items that should be available on the select component. + * @param groups - The optional groups array can be used to group items in the select component. + * @param value - The value of the field (external state management). + * @param onChange - The onChange function of the field (external state management). + * @param onBlur - The onBlur function of the field (external state management). + * @param label - The optional label is shown next to the field in the form. + * @param labelType - The optional labelType can be used to change the size and position of the label according to pre-defined standards. + * @param placeholder - The optional placeholder is shown when no value is selected / initialization with 'undefined' is chosen. + * @param disabled - The optional disabled prop disables the select component. + * @param error - The optional error message is shown next to the component. + * @param hideError - Hide the error message below this component as is might be more appropriate to show it somewhere else. + * @param contentPosition - The position of the content of the select component. Currently only 'item-aligned' and 'popper' are supported. + * @param tooltip - The optional tooltip is shown on hover next to the label. + * @param required - Indicate whether the field is required or not. + * @param className - The optional className object allows you to override the default styling. + * @returns Select component with formik state management. + */ +export declare function SelectField({ id, data, name, items, groups, value, onChange, onBlur, label, labelType, placeholder, tooltip, required, disabled, error, hideError, contentPosition, className, ...props }: SelectFieldItemsProps | SelectFieldGroupsProps): import("react/jsx-runtime").JSX.Element; +export default SelectField; diff --git a/packages/design-system/types/src/forms/TextField.d.ts b/packages/design-system/types/src/forms/TextField.d.ts new file mode 100644 index 0000000..c12c491 --- /dev/null +++ b/packages/design-system/types/src/forms/TextField.d.ts @@ -0,0 +1,68 @@ +import { IconProp } from '@fortawesome/fontawesome-svg-core'; +import { FieldInputProps } from 'formik'; +import { default as React } from 'react'; +export interface TextFieldClassName { + field?: string; + label?: string; + input?: string; + error?: string; + tooltip?: string; +} +interface TextFieldProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + label?: string; + labelType?: 'small' | 'large'; + placeholder?: string; + tooltip?: string | React.ReactNode; + required?: boolean; + hideError?: boolean; + error?: string; + isTouched?: boolean; + disabled?: boolean; + onPaste?: (e: any) => void; + className?: TextFieldClassName; + icon?: IconProp; +} +export interface TextFieldNameProps extends TextFieldProps { + name: string; + field: FieldInputProps; + value?: never; + onChange?: never; + [key: string]: any; +} +export interface TextFieldOnChangeProps extends TextFieldProps { + name?: never; + field?: never; + value: string; + onChange: (newValue: string) => void; + [key: string]: any; +} +/** + * This function returns a text field component for use without formik + * + * @param id - The id of the input field. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param name - The name of the input field. + * @param field - The field object from formik. + * @param value - The value of the input field (external state management). + * @param onChange - The onChange function of the input field (external state management). + * @param label - The text displayed as label. + * @param labelType - The optional labelType can be used to change the size and position of the label according to pre-defined standards. + * @param placeholder - The placeholder text for the input field. + * @param tooltip - The optional tooltip is shown on hover over the tooltip next to the label. + * @param required - Indicate whether the field is required or not. + * @param isTouched - Indicate whether the field has been touched or not (validation is not handled by this component). + * @param hideError - Indicate whether the error message should be hidden or not. + * @param error - The error message that is shown below the field. + * @param disabled - Indicate whether the field is disabled or not. + * @param onPaste - The optional onPaste function is called when the user pastes text into the input field. + * @param className - The optional className object allows you to override the default styling. + * @param icon - The optional icon is shown on the right side of the input field. + * @returns Text field component with optional label, tooltip, error message and icon. + */ +export declare function TextField({ id, data, name, field, value, onChange, label, labelType, placeholder, tooltip, required, isTouched, hideError, error, disabled, onPaste, className, icon, ...props }: TextFieldNameProps | TextFieldOnChangeProps): import("react/jsx-runtime").JSX.Element; +export default TextField; diff --git a/packages/design-system/types/src/forms/TextareaField.d.ts b/packages/design-system/types/src/forms/TextareaField.d.ts new file mode 100644 index 0000000..456839e --- /dev/null +++ b/packages/design-system/types/src/forms/TextareaField.d.ts @@ -0,0 +1,69 @@ +import { FieldInputProps } from 'formik'; +import { default as React } from 'react'; +interface TextareaFieldProps { + id?: string; + data?: { + cy?: string; + test?: string; + }; + label?: string; + labelType?: 'small' | 'large'; + placeholder?: string; + tooltip?: string | React.ReactNode; + maxLength?: number; + maxLengthUnit?: string; + hideMaxLength?: boolean; + required?: boolean; + hideError?: boolean; + error?: string; + isTouched?: boolean; + disabled?: boolean; + className?: { + root?: string; + field?: string; + label?: string; + input?: string; + error?: string; + tooltip?: string; + }; +} +export interface TextareaFieldNameProps extends TextareaFieldProps { + name: string; + field: FieldInputProps; + value?: never; + onChange?: never; + [key: string]: any; +} +export interface TextareaFieldOnChangeProps extends TextareaFieldProps { + name?: never; + field?: never; + value: string; + onChange: (newValue: string) => void; + [key: string]: any; +} +/** + * This function returns a text field component for use without formik + * + * @param id - The id of the input field. + * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy) + * @param name - The name of the input field. + * @param field - The field object from formik. + * @param value - The value of the input field (external state management). + * @param onChange - The onChange function of the input field (external state management). + * @param label - The text displayed as label. + * @param labelType - The optional labelType can be used to change the size and position of the label according to pre-defined standards. + * @param placeholder - The placeholder text for the input field. + * @param tooltip - The optional tooltip is shown on hover over the tooltip next to the label. + * @param maxLength - The optional maxLength is used to limit the number of characters that can be entered in the field. + * @param maxLengthUnit - This optional label allows to specify a custom label for the maxLength indicator (e.g. "characters left" supporting internationalization). + * @param hideMaxLength - Indicate whether the maxLength indicator should be hidden or not. + * @param required - Indicate whether the field is required or not. + * @param isTouched - Indicate whether the field has been touched or not (validation is not handled by this component). + * @param hideError - Indicate whether the error message should be hidden or not. + * @param error - The error message that is shown below the field. + * @param disabled - Indicate whether the field is disabled or not. + * @param className - The optional className object allows you to override the default styling. + * @returns Text field component with optional label, tooltip, error message and icon. + */ +export declare function TextareaField({ id, data, name, field, value, onChange, label, labelType, placeholder, tooltip, maxLength, maxLengthUnit, hideMaxLength, required, isTouched, hideError, error, disabled, className, ...props }: TextareaFieldNameProps | TextareaFieldOnChangeProps): import("react/jsx-runtime").JSX.Element; +export default TextareaField; diff --git a/packages/design-system/types/src/hooks/useArrowNavigation.d.ts b/packages/design-system/types/src/hooks/useArrowNavigation.d.ts new file mode 100644 index 0000000..a3502cf --- /dev/null +++ b/packages/design-system/types/src/hooks/useArrowNavigation.d.ts @@ -0,0 +1,8 @@ +export interface useArrowNavigationProps { + onArrowLeft?: () => void; + onArrowRight?: () => void; + onArrowUp?: () => void; + onArrowDown?: () => void; +} +export declare function useArrowNavigation({ onArrowLeft, onArrowRight, onArrowUp, onArrowDown, }: useArrowNavigationProps): void; +export default useArrowNavigation; diff --git a/packages/design-system/types/src/index.d.ts b/packages/design-system/types/src/index.d.ts new file mode 100644 index 0000000..df1c0b4 --- /dev/null +++ b/packages/design-system/types/src/index.d.ts @@ -0,0 +1,50 @@ +export * from './Button'; +export * from './Checkbox'; +export * from './Collapsible'; +export * from './ColorPicker'; +export * from './Countdown'; +export * from './CycleCountdown'; +export * from './CycleProgress'; +export * from './DateChanger'; +export * from './Dropdown'; +export * from './Header'; +export * from './Modal'; +export * from './Navigation'; +export * from './NotificationBadgeWrapper'; +export * from './Progress'; +export * from './Prose'; +export * from './Select'; +export * from './Slider'; +export * from './StepProgress'; +export * from './Switch'; +export * from './Table'; +export * from './Tabs'; +export { default as Tabs } from './Tabs'; +export * from './Tag'; +export * from './Toast'; +export * from './Tooltip'; +export * from './UserNotification'; +export * from './Workflow'; +export * from './forms/FormikColorPicker'; +export * from './forms/FormikDateChanger'; +export * from './forms/FormikDateField'; +export * from './forms/FormikNumberField'; +export * from './forms/FormikPinField'; +export * from './forms/FormikSelectField'; +export * from './forms/FormikSwitchField'; +export * from './forms/FormikTextField'; +export * from './forms/FormikTextareaField'; +export * from './forms/Label'; +export { default as NewFormikDateChanger } from './forms/NewFormikDateChanger'; +export { default as NewFormikDateField } from './forms/NewFormikDateField'; +export { default as NewFromikNumberField } from './forms/NewFormikNumberField'; +export { default as NewFormikPinField } from './forms/NewFormikPinField'; +export { default as NewFormikSelectField } from './forms/NewFormikSelectField'; +export { default as NewFormikSwitchField } from './forms/NewFormikSwitchField'; +export { default as NewFormikTextField } from './forms/NewFormikTextField'; +export { default as NewFormikTextareaField } from './forms/NewFormikTextareaField'; +export * from './forms/NumberField'; +export * from './forms/SelectField'; +export * from './forms/TextField'; +export * from './forms/TextareaField'; +export * from './hooks/useArrowNavigation'; diff --git a/packages/design-system/types/src/lib/utils.d.ts b/packages/design-system/types/src/lib/utils.d.ts new file mode 100644 index 0000000..86f4720 --- /dev/null +++ b/packages/design-system/types/src/lib/utils.d.ts @@ -0,0 +1,2 @@ +import { ClassValue } from 'clsx'; +export declare function cn(...inputs: ClassValue[]): string; diff --git a/packages/design-system/types/src/tableData.d.ts b/packages/design-system/types/src/tableData.d.ts new file mode 100644 index 0000000..c515a8d --- /dev/null +++ b/packages/design-system/types/src/tableData.d.ts @@ -0,0 +1,7 @@ +export declare const data: { + count: number; + first_name: string; + last_name: string; + answer: string; + username: string; +}[]; diff --git a/packages/design-system/types/src/ui/accordion.d.ts b/packages/design-system/types/src/ui/accordion.d.ts new file mode 100644 index 0000000..2eac3ee --- /dev/null +++ b/packages/design-system/types/src/ui/accordion.d.ts @@ -0,0 +1,7 @@ +import * as AccordionPrimitive from '@radix-ui/react-accordion'; +import * as React from 'react'; +declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes>; +declare const AccordionItem: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const AccordionTrigger: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const AccordionContent: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }; diff --git a/packages/design-system/types/src/ui/alert-dialog.d.ts b/packages/design-system/types/src/ui/alert-dialog.d.ts new file mode 100644 index 0000000..0785888 --- /dev/null +++ b/packages/design-system/types/src/ui/alert-dialog.d.ts @@ -0,0 +1,20 @@ +import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'; +import * as React from 'react'; +declare const AlertDialog: React.FC; +declare const AlertDialogTrigger: React.ForwardRefExoticComponent>; +declare const AlertDialogPortal: React.FC; +declare const AlertDialogOverlay: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const AlertDialogContent: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const AlertDialogHeader: { + ({ className, ...props }: React.HTMLAttributes): import("react/jsx-runtime").JSX.Element; + displayName: string; +}; +declare const AlertDialogFooter: { + ({ className, ...props }: React.HTMLAttributes): import("react/jsx-runtime").JSX.Element; + displayName: string; +}; +declare const AlertDialogTitle: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const AlertDialogDescription: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const AlertDialogAction: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const AlertDialogCancel: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, }; diff --git a/packages/design-system/types/src/ui/alert.d.ts b/packages/design-system/types/src/ui/alert.d.ts new file mode 100644 index 0000000..272179b --- /dev/null +++ b/packages/design-system/types/src/ui/alert.d.ts @@ -0,0 +1,9 @@ +import { VariantProps } from 'class-variance-authority'; +import { ClassProp } from 'class-variance-authority/types'; +import * as React from 'react'; +declare const Alert: React.ForwardRefExoticComponent & VariantProps<(props?: ({ + variant?: "default" | "destructive" | null | undefined; +} & ClassProp) | undefined) => string> & React.RefAttributes>; +declare const AlertTitle: React.ForwardRefExoticComponent & React.RefAttributes>; +declare const AlertDescription: React.ForwardRefExoticComponent & React.RefAttributes>; +export { Alert, AlertDescription, AlertTitle }; diff --git a/packages/design-system/types/src/ui/aspect-ratio.d.ts b/packages/design-system/types/src/ui/aspect-ratio.d.ts new file mode 100644 index 0000000..667d9dc --- /dev/null +++ b/packages/design-system/types/src/ui/aspect-ratio.d.ts @@ -0,0 +1,5 @@ +import { ForwardRefExoticComponent, RefAttributes } from 'react'; +/// +import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'; +declare const AspectRatio: ForwardRefExoticComponent>; +export { AspectRatio }; diff --git a/packages/design-system/types/src/ui/avatar.d.ts b/packages/design-system/types/src/ui/avatar.d.ts new file mode 100644 index 0000000..96ce376 --- /dev/null +++ b/packages/design-system/types/src/ui/avatar.d.ts @@ -0,0 +1,6 @@ +import * as AvatarPrimitive from '@radix-ui/react-avatar'; +import * as React from 'react'; +declare const Avatar: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const AvatarImage: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const AvatarFallback: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +export { Avatar, AvatarFallback, AvatarImage }; diff --git a/packages/design-system/types/src/ui/badge.d.ts b/packages/design-system/types/src/ui/badge.d.ts new file mode 100644 index 0000000..68c5fe7 --- /dev/null +++ b/packages/design-system/types/src/ui/badge.d.ts @@ -0,0 +1,10 @@ +import { VariantProps } from 'class-variance-authority'; +import { ClassProp } from 'class-variance-authority/types'; +import * as React from 'react'; +declare const badgeVariants: (props?: ({ + variant?: "secondary" | "default" | "destructive" | "outline" | null | undefined; +} & ClassProp) | undefined) => string; +export interface BadgeProps extends React.HTMLAttributes, VariantProps { +} +declare function Badge({ className, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element; +export { Badge, badgeVariants }; diff --git a/packages/design-system/types/src/ui/breadcrumb.d.ts b/packages/design-system/types/src/ui/breadcrumb.d.ts new file mode 100644 index 0000000..a69c265 --- /dev/null +++ b/packages/design-system/types/src/ui/breadcrumb.d.ts @@ -0,0 +1,19 @@ +import * as React from 'react'; +declare const Breadcrumb: React.ForwardRefExoticComponent, HTMLElement>, "ref"> & { + separator?: React.ReactNode; +} & React.RefAttributes>; +declare const BreadcrumbList: React.ForwardRefExoticComponent, HTMLOListElement>, "ref"> & React.RefAttributes>; +declare const BreadcrumbItem: React.ForwardRefExoticComponent, HTMLLIElement>, "ref"> & React.RefAttributes>; +declare const BreadcrumbLink: React.ForwardRefExoticComponent, HTMLAnchorElement>, "ref"> & { + asChild?: boolean | undefined; +} & React.RefAttributes>; +declare const BreadcrumbPage: React.ForwardRefExoticComponent, HTMLSpanElement>, "ref"> & React.RefAttributes>; +declare const BreadcrumbSeparator: { + ({ children, className, ...props }: React.ComponentProps<'li'>): import("react/jsx-runtime").JSX.Element; + displayName: string; +}; +declare const BreadcrumbEllipsis: { + ({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element; + displayName: string; +}; +export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, }; diff --git a/packages/design-system/types/src/ui/button.d.ts b/packages/design-system/types/src/ui/button.d.ts new file mode 100644 index 0000000..e86f120 --- /dev/null +++ b/packages/design-system/types/src/ui/button.d.ts @@ -0,0 +1,12 @@ +import { VariantProps } from 'class-variance-authority'; +import { ClassProp } from 'class-variance-authority/types'; +import * as React from 'react'; +declare const buttonVariants: (props?: ({ + variant?: "link" | "ghost" | "secondary" | "default" | "destructive" | "outline" | null | undefined; + size?: "sm" | "lg" | "icon" | "default" | null | undefined; +} & ClassProp) | undefined) => string; +export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { + asChild?: boolean; +} +declare const Button: React.ForwardRefExoticComponent>; +export { Button, buttonVariants }; diff --git a/packages/design-system/types/src/ui/calendar.d.ts b/packages/design-system/types/src/ui/calendar.d.ts new file mode 100644 index 0000000..5446b42 --- /dev/null +++ b/packages/design-system/types/src/ui/calendar.d.ts @@ -0,0 +1,8 @@ +import { DayPicker } from 'react-day-picker'; +import * as React from 'react'; +export type CalendarProps = React.ComponentProps; +declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element; +declare namespace Calendar { + var displayName: string; +} +export { Calendar }; diff --git a/packages/design-system/types/src/ui/card.d.ts b/packages/design-system/types/src/ui/card.d.ts new file mode 100644 index 0000000..1c62140 --- /dev/null +++ b/packages/design-system/types/src/ui/card.d.ts @@ -0,0 +1,8 @@ +import * as React from 'react'; +declare const Card: React.ForwardRefExoticComponent & React.RefAttributes>; +declare const CardHeader: React.ForwardRefExoticComponent & React.RefAttributes>; +declare const CardTitle: React.ForwardRefExoticComponent & React.RefAttributes>; +declare const CardDescription: React.ForwardRefExoticComponent & React.RefAttributes>; +declare const CardContent: React.ForwardRefExoticComponent & React.RefAttributes>; +declare const CardFooter: React.ForwardRefExoticComponent & React.RefAttributes>; +export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }; diff --git a/packages/design-system/types/src/ui/carousel.d.ts b/packages/design-system/types/src/ui/carousel.d.ts new file mode 100644 index 0000000..a41cd27 --- /dev/null +++ b/packages/design-system/types/src/ui/carousel.d.ts @@ -0,0 +1,19 @@ +import { default as useEmblaCarousel, UseEmblaCarouselType } from 'embla-carousel-react'; +import { ButtonProps } from './button'; +import * as React from 'react'; +type CarouselApi = UseEmblaCarouselType[1]; +type UseCarouselParameters = Parameters; +type CarouselOptions = UseCarouselParameters[0]; +type CarouselPlugin = UseCarouselParameters[1]; +type CarouselProps = { + opts?: CarouselOptions; + plugins?: CarouselPlugin; + orientation?: 'horizontal' | 'vertical'; + setApi?: (api: CarouselApi) => void; +}; +declare const Carousel: React.ForwardRefExoticComponent & CarouselProps & React.RefAttributes>; +declare const CarouselContent: React.ForwardRefExoticComponent & React.RefAttributes>; +declare const CarouselItem: React.ForwardRefExoticComponent & React.RefAttributes>; +declare const CarouselPrevious: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const CarouselNext: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CarouselApi, }; diff --git a/packages/design-system/types/src/ui/chart.d.ts b/packages/design-system/types/src/ui/chart.d.ts new file mode 100644 index 0000000..4e49290 --- /dev/null +++ b/packages/design-system/types/src/ui/chart.d.ts @@ -0,0 +1,66 @@ +import { ValueType, NameType, Payload } from 'recharts/types/component/DefaultTooltipContent'; +import { AllowInDimension, AnimationTiming, Coordinate, CartesianViewBox } from 'recharts/types/util/types'; +import { ContentType } from 'recharts/types/component/Tooltip'; +import { UniqueOption } from 'recharts/types/util/payload/getUniqPayload'; +import * as React from 'react'; +import * as RechartsPrimitive from 'recharts'; +declare const THEMES: { + readonly light: ""; + readonly dark: ".dark"; +}; +export type ChartConfig = { + [k in string]: { + label?: React.ReactNode; + icon?: React.ComponentType; + } & ({ + color?: string; + theme?: never; + } | { + color?: never; + theme: Record; + }); +}; +declare const ChartContainer: React.ForwardRefExoticComponent & React.HTMLAttributes & { + config: ChartConfig; + children: React.ComponentProps['children']; +}, "ref"> & React.RefAttributes>; +declare const ChartStyle: ({ id, config }: { + id: string; + config: ChartConfig; +}) => import("react/jsx-runtime").JSX.Element | null; +declare const ChartTooltip: typeof RechartsPrimitive.Tooltip; +declare const ChartTooltipContent: React.ForwardRefExoticComponent & { + accessibilityLayer?: boolean | undefined; + active?: boolean | undefined; + includeHidden?: boolean | undefined; + allowEscapeViewBox?: AllowInDimension | undefined; + animationDuration?: number | undefined; + animationEasing?: AnimationTiming | undefined; + content?: ContentType | undefined; + coordinate?: Partial< Coordinate> | undefined; + cursor?: boolean | React.ReactElement> | React.SVGProps | undefined; + filterNull?: boolean | undefined; + defaultIndex?: number | undefined; + isAnimationActive?: boolean | undefined; + offset?: number | undefined; + payloadUniqBy?: UniqueOption> | undefined; + position?: Partial< Coordinate> | undefined; + reverseDirection?: AllowInDimension | undefined; + shared?: boolean | undefined; + trigger?: "click" | "hover" | undefined; + useTranslate3d?: boolean | undefined; + viewBox?: CartesianViewBox | undefined; + wrapperStyle?: React.CSSProperties | undefined; +} & React.ClassAttributes & React.HTMLAttributes & { + hideLabel?: boolean | undefined; + hideIndicator?: boolean | undefined; + indicator?: "line" | "dashed" | "dot" | undefined; + nameKey?: string | undefined; + labelKey?: string | undefined; +}, "ref"> & React.RefAttributes>; +declare const ChartLegend: typeof RechartsPrimitive.Legend; +declare const ChartLegendContent: React.ForwardRefExoticComponent & React.HTMLAttributes & Pick & { + hideIcon?: boolean | undefined; + nameKey?: string | undefined; +}, "ref"> & React.RefAttributes>; +export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, }; diff --git a/packages/design-system/types/src/ui/checkbox.d.ts b/packages/design-system/types/src/ui/checkbox.d.ts new file mode 100644 index 0000000..1c7c3d3 --- /dev/null +++ b/packages/design-system/types/src/ui/checkbox.d.ts @@ -0,0 +1,4 @@ +import * as CheckboxPrimitive from '@radix-ui/react-checkbox'; +import * as React from 'react'; +declare const Checkbox: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +export { Checkbox }; diff --git a/packages/design-system/types/src/ui/collapsible.d.ts b/packages/design-system/types/src/ui/collapsible.d.ts new file mode 100644 index 0000000..d954e12 --- /dev/null +++ b/packages/design-system/types/src/ui/collapsible.d.ts @@ -0,0 +1,7 @@ +import { ForwardRefExoticComponent, RefAttributes } from 'react'; +/// +import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'; +declare const Collapsible: ForwardRefExoticComponent>; +declare const CollapsibleTrigger: ForwardRefExoticComponent>; +declare const CollapsibleContent: ForwardRefExoticComponent>; +export { Collapsible, CollapsibleContent, CollapsibleTrigger }; diff --git a/packages/design-system/types/src/ui/command.d.ts b/packages/design-system/types/src/ui/command.d.ts new file mode 100644 index 0000000..b402f90 --- /dev/null +++ b/packages/design-system/types/src/ui/command.d.ts @@ -0,0 +1,82 @@ +import { DialogProps } from '@radix-ui/react-dialog'; +import * as React from 'react'; +declare const Command: React.ForwardRefExoticComponent, HTMLDivElement>, "key" | keyof React.HTMLAttributes> & { + ref?: React.Ref | undefined; +} & { + asChild?: boolean | undefined; +}, "key" | "asChild" | keyof React.HTMLAttributes> & { + label?: string | undefined; + shouldFilter?: boolean | undefined; + filter?: ((value: string, search: string, keywords?: string[] | undefined) => number) | undefined; + defaultValue?: string | undefined; + value?: string | undefined; + onValueChange?: ((value: string) => void) | undefined; + loop?: boolean | undefined; + disablePointerSelection?: boolean | undefined; + vimBindings?: boolean | undefined; +} & React.RefAttributes, "ref"> & React.RefAttributes>; +interface CommandDialogProps extends DialogProps { +} +declare const CommandDialog: ({ children, ...props }: CommandDialogProps) => import("react/jsx-runtime").JSX.Element; +declare const CommandInput: React.ForwardRefExoticComponent, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes> & { + ref?: React.Ref | undefined; +} & { + asChild?: boolean | undefined; +}, "key" | "asChild" | keyof React.InputHTMLAttributes>, "type" | "value" | "onChange"> & { + value?: string | undefined; + onValueChange?: ((search: string) => void) | undefined; +} & React.RefAttributes, "ref"> & React.RefAttributes>; +declare const CommandList: React.ForwardRefExoticComponent, HTMLDivElement>, "key" | keyof React.HTMLAttributes> & { + ref?: React.Ref | undefined; +} & { + asChild?: boolean | undefined; +}, "key" | "asChild" | keyof React.HTMLAttributes> & { + label?: string | undefined; +} & React.RefAttributes, "ref"> & React.RefAttributes>; +declare const CommandEmpty: React.ForwardRefExoticComponent, HTMLDivElement>, "key" | keyof React.HTMLAttributes> & { + ref?: React.Ref | undefined; +} & { + asChild?: boolean | undefined; +}, "key" | "asChild" | keyof React.HTMLAttributes> & React.RefAttributes, "ref"> & React.RefAttributes>; +declare const CommandGroup: React.ForwardRefExoticComponent, HTMLDivElement>, "key" | keyof React.HTMLAttributes> & { + ref?: React.Ref | undefined; +} & { + asChild?: boolean | undefined; +}, "key" | "asChild" | keyof React.HTMLAttributes>, "value" | "heading"> & { + heading?: React.ReactNode; + value?: string | undefined; + forceMount?: boolean | undefined; +} & React.RefAttributes, "ref"> & React.RefAttributes>; +declare const CommandSeparator: React.ForwardRefExoticComponent, HTMLDivElement>, "key" | keyof React.HTMLAttributes> & { + ref?: React.Ref | undefined; +} & { + asChild?: boolean | undefined; +}, "key" | "asChild" | keyof React.HTMLAttributes> & { + alwaysRender?: boolean | undefined; +} & React.RefAttributes, "ref"> & React.RefAttributes>; +declare const CommandItem: React.ForwardRefExoticComponent, HTMLDivElement>, "key" | keyof React.HTMLAttributes> & { + ref?: React.Ref | undefined; +} & { + asChild?: boolean | undefined; +}, "key" | "asChild" | keyof React.HTMLAttributes>, "disabled" | "value" | "onSelect"> & { + disabled?: boolean | undefined; + onSelect?: ((value: string) => void) | undefined; + value?: string | undefined; + keywords?: string[] | undefined; + forceMount?: boolean | undefined; +} & React.RefAttributes, "ref"> & React.RefAttributes>; +declare const CommandShortcut: { + ({ className, ...props }: React.HTMLAttributes): import("react/jsx-runtime").JSX.Element; + displayName: string; +}; +export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, }; diff --git a/packages/design-system/types/src/ui/context-menu.d.ts b/packages/design-system/types/src/ui/context-menu.d.ts new file mode 100644 index 0000000..ed0ef06 --- /dev/null +++ b/packages/design-system/types/src/ui/context-menu.d.ts @@ -0,0 +1,27 @@ +import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'; +import * as React from 'react'; +declare const ContextMenu: React.FC; +declare const ContextMenuTrigger: React.ForwardRefExoticComponent>; +declare const ContextMenuGroup: React.ForwardRefExoticComponent>; +declare const ContextMenuPortal: React.FC; +declare const ContextMenuSub: React.FC; +declare const ContextMenuRadioGroup: React.ForwardRefExoticComponent>; +declare const ContextMenuSubTrigger: React.ForwardRefExoticComponent, "ref"> & { + inset?: boolean | undefined; +} & React.RefAttributes>; +declare const ContextMenuSubContent: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const ContextMenuContent: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const ContextMenuItem: React.ForwardRefExoticComponent, "ref"> & { + inset?: boolean | undefined; +} & React.RefAttributes>; +declare const ContextMenuCheckboxItem: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const ContextMenuRadioItem: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const ContextMenuLabel: React.ForwardRefExoticComponent, "ref"> & { + inset?: boolean | undefined; +} & React.RefAttributes>; +declare const ContextMenuSeparator: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const ContextMenuShortcut: { + ({ className, ...props }: React.HTMLAttributes): import("react/jsx-runtime").JSX.Element; + displayName: string; +}; +export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, }; diff --git a/packages/design-system/types/src/ui/dialog.d.ts b/packages/design-system/types/src/ui/dialog.d.ts new file mode 100644 index 0000000..651b49e --- /dev/null +++ b/packages/design-system/types/src/ui/dialog.d.ts @@ -0,0 +1,19 @@ +import * as DialogPrimitive from '@radix-ui/react-dialog'; +import * as React from 'react'; +declare const Dialog: React.FC; +declare const DialogTrigger: React.ForwardRefExoticComponent>; +declare const DialogPortal: React.FC; +declare const DialogClose: React.ForwardRefExoticComponent>; +declare const DialogOverlay: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const DialogContent: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const DialogHeader: { + ({ className, ...props }: React.HTMLAttributes): import("react/jsx-runtime").JSX.Element; + displayName: string; +}; +declare const DialogFooter: { + ({ className, ...props }: React.HTMLAttributes): import("react/jsx-runtime").JSX.Element; + displayName: string; +}; +declare const DialogTitle: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const DialogDescription: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, }; diff --git a/packages/design-system/types/src/ui/drawer.d.ts b/packages/design-system/types/src/ui/drawer.d.ts new file mode 100644 index 0000000..b6dcaaa --- /dev/null +++ b/packages/design-system/types/src/ui/drawer.d.ts @@ -0,0 +1,25 @@ +import { Drawer as DrawerPrimitive } from 'vaul'; +import { DialogTriggerProps, DialogPortalProps, DialogCloseProps, DialogOverlayProps, DialogContentProps, DialogTitleProps, DialogDescriptionProps } from '@radix-ui/react-dialog'; +import * as React from 'react'; +declare const Drawer: { + ({ shouldScaleBackground, ...props }: React.ComponentProps): import("react/jsx-runtime").JSX.Element; + displayName: string; +}; +declare const DrawerTrigger: React.ForwardRefExoticComponent< DialogTriggerProps & React.RefAttributes>; +declare const DrawerPortal: React.FC< DialogPortalProps>; +declare const DrawerClose: React.ForwardRefExoticComponent< DialogCloseProps & React.RefAttributes>; +declare const DrawerOverlay: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes, "ref"> & React.RefAttributes>; +declare const DrawerContent: React.ForwardRefExoticComponent, "ref"> & { + onAnimationEnd?: ((open: boolean) => void) | undefined; +} & React.RefAttributes, "ref"> & React.RefAttributes>; +declare const DrawerHeader: { + ({ className, ...props }: React.HTMLAttributes): import("react/jsx-runtime").JSX.Element; + displayName: string; +}; +declare const DrawerFooter: { + ({ className, ...props }: React.HTMLAttributes): import("react/jsx-runtime").JSX.Element; + displayName: string; +}; +declare const DrawerTitle: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const DrawerDescription: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, }; diff --git a/packages/design-system/types/src/ui/dropdown-menu.d.ts b/packages/design-system/types/src/ui/dropdown-menu.d.ts new file mode 100644 index 0000000..9d2bcf4 --- /dev/null +++ b/packages/design-system/types/src/ui/dropdown-menu.d.ts @@ -0,0 +1,27 @@ +import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'; +import * as React from 'react'; +declare const DropdownMenu: React.FC; +declare const DropdownMenuTrigger: React.ForwardRefExoticComponent>; +declare const DropdownMenuGroup: React.ForwardRefExoticComponent>; +declare const DropdownMenuPortal: React.FC; +declare const DropdownMenuSub: React.FC; +declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent>; +declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent, "ref"> & { + inset?: boolean | undefined; +} & React.RefAttributes>; +declare const DropdownMenuSubContent: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const DropdownMenuContent: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const DropdownMenuItem: React.ForwardRefExoticComponent, "ref"> & { + inset?: boolean | undefined; +} & React.RefAttributes>; +declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const DropdownMenuLabel: React.ForwardRefExoticComponent, "ref"> & { + inset?: boolean | undefined; +} & React.RefAttributes>; +declare const DropdownMenuSeparator: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const DropdownMenuShortcut: { + ({ className, ...props }: React.HTMLAttributes): import("react/jsx-runtime").JSX.Element; + displayName: string; +}; +export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, }; diff --git a/packages/design-system/types/src/ui/form.d.ts b/packages/design-system/types/src/ui/form.d.ts new file mode 100644 index 0000000..3202ea8 --- /dev/null +++ b/packages/design-system/types/src/ui/form.d.ts @@ -0,0 +1,24 @@ +import { ControllerProps, FieldPath, FieldValues, FormProviderProps, FieldError } from 'react-hook-form'; +import { SlotProps } from '@radix-ui/react-slot'; +import * as LabelPrimitive from '@radix-ui/react-label'; +import * as React from 'react'; +declare const Form: (props: FormProviderProps) => React.JSX.Element; +declare const FormField: = FieldPath>({ ...props }: ControllerProps) => import("react/jsx-runtime").JSX.Element; +declare const useFormField: () => { + invalid: boolean; + isDirty: boolean; + isTouched: boolean; + isValidating: boolean; + error?: FieldError | undefined; + id: string; + name: string; + formItemId: string; + formDescriptionId: string; + formMessageId: string; +}; +declare const FormItem: React.ForwardRefExoticComponent & React.RefAttributes>; +declare const FormLabel: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const FormControl: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const FormDescription: React.ForwardRefExoticComponent & React.RefAttributes>; +declare const FormMessage: React.ForwardRefExoticComponent & React.RefAttributes>; +export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField, }; diff --git a/packages/design-system/types/src/ui/future.d.ts b/packages/design-system/types/src/ui/future.d.ts new file mode 100644 index 0000000..9737f80 --- /dev/null +++ b/packages/design-system/types/src/ui/future.d.ts @@ -0,0 +1,47 @@ +export * from './accordion'; +export * from './alert'; +export * from './alert-dialog'; +export * from './aspect-ratio'; +export * from './avatar'; +export * from './badge'; +export * from './breadcrumb'; +export * from './button'; +export * from './calendar'; +export * from './card'; +export * from './carousel'; +export * from './chart'; +export * from './checkbox'; +export * from './collapsible'; +export * from './context-menu'; +export * from './dialog'; +export * from './drawer'; +export * from './dropdown-menu'; +export * from './form'; +export * from './hover-card'; +export * from './input'; +export * from './input-otp'; +export * from './label'; +export * from './menubar'; +export * from './navigation-menu'; +export * from './pagination'; +export * from './popover'; +export * from './progress'; +export * from './radio-group'; +export * from './resizable'; +export * from './scroll-area'; +export * from './select'; +export * from './separator'; +export * from './sheet'; +export * from './skeleton'; +export * from './slider'; +export { Toaster as Sonner } from './sonner'; +export * from './switch'; +export * from './table'; +export * from './tabs'; +export * from './textarea'; +export * from './toast'; +export * from './toaster'; +export * from './toggle'; +export * from './toggle-group'; +export * from './tooltip'; +export * from './use-toast'; diff --git a/packages/design-system/types/src/ui/hover-card.d.ts b/packages/design-system/types/src/ui/hover-card.d.ts new file mode 100644 index 0000000..afe7620 --- /dev/null +++ b/packages/design-system/types/src/ui/hover-card.d.ts @@ -0,0 +1,6 @@ +import * as HoverCardPrimitive from '@radix-ui/react-hover-card'; +import * as React from 'react'; +declare const HoverCard: React.FC; +declare const HoverCardTrigger: React.ForwardRefExoticComponent>; +declare const HoverCardContent: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +export { HoverCard, HoverCardContent, HoverCardTrigger }; diff --git a/packages/design-system/types/src/ui/input-otp.d.ts b/packages/design-system/types/src/ui/input-otp.d.ts new file mode 100644 index 0000000..0e85ba5 --- /dev/null +++ b/packages/design-system/types/src/ui/input-otp.d.ts @@ -0,0 +1,33 @@ +import { RenderProps } from 'input-otp'; +import * as React from 'react'; +declare const InputOTP: React.ForwardRefExoticComponent<(Omit, "value" | "onChange" | "maxLength" | "onComplete" | "textAlign" | "pushPasswordManagerStrategy" | "containerClassName" | "noScriptCSSFallback"> & { + value?: string | undefined; + onChange?: ((newValue: string) => unknown) | undefined; + maxLength: number; + textAlign?: "center" | "left" | "right" | undefined; + onComplete?: ((...args: any[]) => unknown) | undefined; + pushPasswordManagerStrategy?: "none" | "increase-width" | undefined; + containerClassName?: string | undefined; + noScriptCSSFallback?: string | null | undefined; +} & { + render: (props: RenderProps) => React.ReactNode; + children?: undefined; +} & React.RefAttributes, "ref"> | Omit, "value" | "onChange" | "maxLength" | "onComplete" | "textAlign" | "pushPasswordManagerStrategy" | "containerClassName" | "noScriptCSSFallback"> & { + value?: string | undefined; + onChange?: ((newValue: string) => unknown) | undefined; + maxLength: number; + textAlign?: "center" | "left" | "right" | undefined; + onComplete?: ((...args: any[]) => unknown) | undefined; + pushPasswordManagerStrategy?: "none" | "increase-width" | undefined; + containerClassName?: string | undefined; + noScriptCSSFallback?: string | null | undefined; +} & { + render?: undefined; + children: React.ReactNode; +} & React.RefAttributes, "ref">) & React.RefAttributes>; +declare const InputOTPGroup: React.ForwardRefExoticComponent, HTMLDivElement>, "ref"> & React.RefAttributes>; +declare const InputOTPSlot: React.ForwardRefExoticComponent, HTMLDivElement>, "ref"> & { + index: number; +} & React.RefAttributes>; +declare const InputOTPSeparator: React.ForwardRefExoticComponent, HTMLDivElement>, "ref"> & React.RefAttributes>; +export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot }; diff --git a/packages/design-system/types/src/ui/input.d.ts b/packages/design-system/types/src/ui/input.d.ts new file mode 100644 index 0000000..740f26a --- /dev/null +++ b/packages/design-system/types/src/ui/input.d.ts @@ -0,0 +1,5 @@ +import * as React from 'react'; +export interface InputProps extends React.InputHTMLAttributes { +} +declare const Input: React.ForwardRefExoticComponent>; +export { Input }; diff --git a/packages/design-system/types/src/ui/label.d.ts b/packages/design-system/types/src/ui/label.d.ts new file mode 100644 index 0000000..1db1861 --- /dev/null +++ b/packages/design-system/types/src/ui/label.d.ts @@ -0,0 +1,6 @@ +import { VariantProps } from 'class-variance-authority'; +import { ClassProp } from 'class-variance-authority/types'; +import * as LabelPrimitive from '@radix-ui/react-label'; +import * as React from 'react'; +declare const Label: React.ForwardRefExoticComponent, "ref"> & VariantProps<(props?: ClassProp | undefined) => string> & React.RefAttributes>; +export { Label }; diff --git a/packages/design-system/types/src/ui/navigation-menu.d.ts b/packages/design-system/types/src/ui/navigation-menu.d.ts new file mode 100644 index 0000000..fe6a262 --- /dev/null +++ b/packages/design-system/types/src/ui/navigation-menu.d.ts @@ -0,0 +1,13 @@ +import { ClassProp } from 'class-variance-authority/types'; +import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'; +import * as React from 'react'; +declare const NavigationMenu: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const NavigationMenuList: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const NavigationMenuItem: React.ForwardRefExoticComponent>; +declare const navigationMenuTriggerStyle: (props?: ClassProp | undefined) => string; +declare const NavigationMenuTrigger: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const NavigationMenuContent: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const NavigationMenuLink: React.ForwardRefExoticComponent>; +declare const NavigationMenuViewport: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const NavigationMenuIndicator: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle, }; diff --git a/packages/design-system/types/src/ui/pagination.d.ts b/packages/design-system/types/src/ui/pagination.d.ts new file mode 100644 index 0000000..5dd9a06 --- /dev/null +++ b/packages/design-system/types/src/ui/pagination.d.ts @@ -0,0 +1,28 @@ +import { ButtonProps } from './button'; +import * as React from 'react'; +declare const Pagination: { + ({ className, ...props }: React.ComponentProps<'nav'>): import("react/jsx-runtime").JSX.Element; + displayName: string; +}; +declare const PaginationContent: React.ForwardRefExoticComponent, HTMLUListElement>, "ref"> & React.RefAttributes>; +declare const PaginationItem: React.ForwardRefExoticComponent, HTMLLIElement>, "ref"> & React.RefAttributes>; +type PaginationLinkProps = { + isActive?: boolean; +} & Pick & React.ComponentProps<'a'>; +declare const PaginationLink: { + ({ className, isActive, size, ...props }: PaginationLinkProps): import("react/jsx-runtime").JSX.Element; + displayName: string; +}; +declare const PaginationPrevious: { + ({ className, ...props }: React.ComponentProps): import("react/jsx-runtime").JSX.Element; + displayName: string; +}; +declare const PaginationNext: { + ({ className, ...props }: React.ComponentProps): import("react/jsx-runtime").JSX.Element; + displayName: string; +}; +declare const PaginationEllipsis: { + ({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element; + displayName: string; +}; +export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, }; diff --git a/packages/design-system/types/src/ui/popover.d.ts b/packages/design-system/types/src/ui/popover.d.ts new file mode 100644 index 0000000..96c04f0 --- /dev/null +++ b/packages/design-system/types/src/ui/popover.d.ts @@ -0,0 +1,6 @@ +import * as PopoverPrimitive from '@radix-ui/react-popover'; +import * as React from 'react'; +declare const Popover: React.FC; +declare const PopoverTrigger: React.ForwardRefExoticComponent>; +declare const PopoverContent: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +export { Popover, PopoverContent, PopoverTrigger }; diff --git a/packages/design-system/types/src/ui/progress.d.ts b/packages/design-system/types/src/ui/progress.d.ts new file mode 100644 index 0000000..221a298 --- /dev/null +++ b/packages/design-system/types/src/ui/progress.d.ts @@ -0,0 +1,4 @@ +import * as ProgressPrimitive from '@radix-ui/react-progress'; +import * as React from 'react'; +declare const Progress: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +export { Progress }; diff --git a/packages/design-system/types/src/ui/radio-group.d.ts b/packages/design-system/types/src/ui/radio-group.d.ts new file mode 100644 index 0000000..0f0c917 --- /dev/null +++ b/packages/design-system/types/src/ui/radio-group.d.ts @@ -0,0 +1,5 @@ +import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'; +import * as React from 'react'; +declare const RadioGroup: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const RadioGroupItem: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +export { RadioGroup, RadioGroupItem }; diff --git a/packages/design-system/types/src/ui/resizable.d.ts b/packages/design-system/types/src/ui/resizable.d.ts new file mode 100644 index 0000000..a1d6454 --- /dev/null +++ b/packages/design-system/types/src/ui/resizable.d.ts @@ -0,0 +1,38 @@ +import { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes, CSSProperties } from 'react'; +/// +import * as ResizablePrimitive from 'react-resizable-panels'; +declare const ResizablePanelGroup: ({ className, ...props }: React.ComponentProps) => import("react/jsx-runtime").JSX.Element; +declare const ResizablePanel: ForwardRefExoticComponent, "id" | "onResize"> & { + className?: string | undefined; + collapsedSize?: number | undefined; + collapsible?: boolean | undefined; + defaultSize?: number | undefined; + id?: string | undefined; + maxSize?: number | undefined; + minSize?: number | undefined; + onCollapse?: ResizablePrimitive.PanelOnCollapse | undefined; + onExpand?: ResizablePrimitive.PanelOnExpand | undefined; + onResize?: ResizablePrimitive.PanelOnResize | undefined; + order?: number | undefined; + style?: object | undefined; + tagName?: keyof HTMLElementTagNameMap | undefined; +} & { + children?: ReactNode; +} & RefAttributes>; +declare const ResizableHandle: ({ withHandle, className, ...props }: Omit< HTMLAttributes, "id" | "onFocus" | "onBlur"> & { + className?: string | undefined; + disabled?: boolean | undefined; + hitAreaMargins?: ResizablePrimitive.PointerHitAreaMargins | undefined; + id?: string | null | undefined; + onBlur?: (() => void) | undefined; + onDragging?: ResizablePrimitive.PanelResizeHandleOnDragging | undefined; + onFocus?: (() => void) | undefined; + style?: CSSProperties | undefined; + tabIndex?: number | undefined; + tagName?: keyof HTMLElementTagNameMap | undefined; +} & { + children?: ReactNode; +} & { + withHandle?: boolean | undefined; +}) => import("react/jsx-runtime").JSX.Element; +export { ResizableHandle, ResizablePanel, ResizablePanelGroup }; diff --git a/packages/design-system/types/src/ui/scroll-area.d.ts b/packages/design-system/types/src/ui/scroll-area.d.ts new file mode 100644 index 0000000..937185e --- /dev/null +++ b/packages/design-system/types/src/ui/scroll-area.d.ts @@ -0,0 +1,5 @@ +import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'; +import * as React from 'react'; +declare const ScrollArea: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const ScrollBar: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +export { ScrollArea, ScrollBar }; diff --git a/packages/design-system/types/src/ui/select.d.ts b/packages/design-system/types/src/ui/select.d.ts new file mode 100644 index 0000000..89d5ec7 --- /dev/null +++ b/packages/design-system/types/src/ui/select.d.ts @@ -0,0 +1,13 @@ +import * as SelectPrimitive from '@radix-ui/react-select'; +import * as React from 'react'; +declare const Select: React.FC; +declare const SelectGroup: React.ForwardRefExoticComponent>; +declare const SelectValue: React.ForwardRefExoticComponent>; +declare const SelectTrigger: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const SelectScrollUpButton: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const SelectScrollDownButton: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const SelectContent: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const SelectLabel: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const SelectItem: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const SelectSeparator: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, }; diff --git a/packages/design-system/types/src/ui/separator.d.ts b/packages/design-system/types/src/ui/separator.d.ts new file mode 100644 index 0000000..2427836 --- /dev/null +++ b/packages/design-system/types/src/ui/separator.d.ts @@ -0,0 +1,4 @@ +import * as SeparatorPrimitive from '@radix-ui/react-separator'; +import * as React from 'react'; +declare const Separator: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +export { Separator }; diff --git a/packages/design-system/types/src/ui/sheet.d.ts b/packages/design-system/types/src/ui/sheet.d.ts new file mode 100644 index 0000000..c3bd533 --- /dev/null +++ b/packages/design-system/types/src/ui/sheet.d.ts @@ -0,0 +1,26 @@ +import { VariantProps } from 'class-variance-authority'; +import { ClassProp } from 'class-variance-authority/types'; +import * as SheetPrimitive from '@radix-ui/react-dialog'; +import * as React from 'react'; +declare const Sheet: React.FC; +declare const SheetTrigger: React.ForwardRefExoticComponent>; +declare const SheetClose: React.ForwardRefExoticComponent>; +declare const SheetPortal: React.FC; +declare const SheetOverlay: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const sheetVariants: (props?: ({ + side?: "left" | "right" | "bottom" | "top" | null | undefined; +} & ClassProp) | undefined) => string; +interface SheetContentProps extends React.ComponentPropsWithoutRef, VariantProps { +} +declare const SheetContent: React.ForwardRefExoticComponent>; +declare const SheetHeader: { + ({ className, ...props }: React.HTMLAttributes): import("react/jsx-runtime").JSX.Element; + displayName: string; +}; +declare const SheetFooter: { + ({ className, ...props }: React.HTMLAttributes): import("react/jsx-runtime").JSX.Element; + displayName: string; +}; +declare const SheetTitle: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const SheetDescription: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, }; diff --git a/packages/design-system/types/src/ui/skeleton.d.ts b/packages/design-system/types/src/ui/skeleton.d.ts new file mode 100644 index 0000000..ed6e7e9 --- /dev/null +++ b/packages/design-system/types/src/ui/skeleton.d.ts @@ -0,0 +1,3 @@ +/// +declare function Skeleton({ className, ...props }: React.HTMLAttributes): import("react/jsx-runtime").JSX.Element; +export { Skeleton }; diff --git a/packages/design-system/types/src/ui/slider.d.ts b/packages/design-system/types/src/ui/slider.d.ts new file mode 100644 index 0000000..a9b7d86 --- /dev/null +++ b/packages/design-system/types/src/ui/slider.d.ts @@ -0,0 +1,4 @@ +import * as SliderPrimitive from '@radix-ui/react-slider'; +import * as React from 'react'; +declare const Slider: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +export { Slider }; diff --git a/packages/design-system/types/src/ui/sonner.d.ts b/packages/design-system/types/src/ui/sonner.d.ts new file mode 100644 index 0000000..d4f9296 --- /dev/null +++ b/packages/design-system/types/src/ui/sonner.d.ts @@ -0,0 +1,4 @@ +import { Toaster as Sonner } from 'sonner'; +type ToasterProps = React.ComponentProps; +declare const Toaster: ({ ...props }: ToasterProps) => import("react/jsx-runtime").JSX.Element; +export { Toaster }; diff --git a/packages/design-system/types/src/ui/switch.d.ts b/packages/design-system/types/src/ui/switch.d.ts new file mode 100644 index 0000000..6384c5d --- /dev/null +++ b/packages/design-system/types/src/ui/switch.d.ts @@ -0,0 +1,4 @@ +import * as SwitchPrimitives from '@radix-ui/react-switch'; +import * as React from 'react'; +declare const Switch: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +export { Switch }; diff --git a/packages/design-system/types/src/ui/table.d.ts b/packages/design-system/types/src/ui/table.d.ts new file mode 100644 index 0000000..2c69a87 --- /dev/null +++ b/packages/design-system/types/src/ui/table.d.ts @@ -0,0 +1,10 @@ +import * as React from 'react'; +declare const Table: React.ForwardRefExoticComponent & React.RefAttributes>; +declare const TableHeader: React.ForwardRefExoticComponent & React.RefAttributes>; +declare const TableBody: React.ForwardRefExoticComponent & React.RefAttributes>; +declare const TableFooter: React.ForwardRefExoticComponent & React.RefAttributes>; +declare const TableRow: React.ForwardRefExoticComponent & React.RefAttributes>; +declare const TableHead: React.ForwardRefExoticComponent & React.RefAttributes>; +declare const TableCell: React.ForwardRefExoticComponent & React.RefAttributes>; +declare const TableCaption: React.ForwardRefExoticComponent & React.RefAttributes>; +export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, }; diff --git a/packages/design-system/types/src/ui/tabs.d.ts b/packages/design-system/types/src/ui/tabs.d.ts new file mode 100644 index 0000000..058eca0 --- /dev/null +++ b/packages/design-system/types/src/ui/tabs.d.ts @@ -0,0 +1,7 @@ +import * as TabsPrimitive from '@radix-ui/react-tabs'; +import * as React from 'react'; +declare const Tabs: React.ForwardRefExoticComponent>; +declare const TabsList: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const TabsTrigger: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const TabsContent: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +export { Tabs, TabsContent, TabsList, TabsTrigger }; diff --git a/packages/design-system/types/src/ui/textarea.d.ts b/packages/design-system/types/src/ui/textarea.d.ts new file mode 100644 index 0000000..2efc665 --- /dev/null +++ b/packages/design-system/types/src/ui/textarea.d.ts @@ -0,0 +1,5 @@ +import * as React from 'react'; +export interface TextareaProps extends React.TextareaHTMLAttributes { +} +declare const Textarea: React.ForwardRefExoticComponent>; +export { Textarea }; diff --git a/packages/design-system/types/src/ui/toast.d.ts b/packages/design-system/types/src/ui/toast.d.ts new file mode 100644 index 0000000..c0dde93 --- /dev/null +++ b/packages/design-system/types/src/ui/toast.d.ts @@ -0,0 +1,16 @@ +import { VariantProps } from 'class-variance-authority'; +import { ClassProp } from 'class-variance-authority/types'; +import * as ToastPrimitives from '@radix-ui/react-toast'; +import * as React from 'react'; +declare const ToastProvider: React.FC; +declare const ToastViewport: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const Toast: React.ForwardRefExoticComponent, "ref"> & VariantProps<(props?: ({ + variant?: "default" | "destructive" | null | undefined; +} & ClassProp) | undefined) => string> & React.RefAttributes>; +declare const ToastAction: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const ToastClose: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const ToastTitle: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +declare const ToastDescription: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +type ToastProps = React.ComponentPropsWithoutRef; +type ToastActionElement = React.ReactElement; +export { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, type ToastActionElement, type ToastProps, }; diff --git a/packages/design-system/types/src/ui/toaster.d.ts b/packages/design-system/types/src/ui/toaster.d.ts new file mode 100644 index 0000000..7c67268 --- /dev/null +++ b/packages/design-system/types/src/ui/toaster.d.ts @@ -0,0 +1 @@ +export declare function Toaster(): import("react/jsx-runtime").JSX.Element; diff --git a/packages/design-system/types/src/ui/toggle-group.d.ts b/packages/design-system/types/src/ui/toggle-group.d.ts new file mode 100644 index 0000000..2bc6db7 --- /dev/null +++ b/packages/design-system/types/src/ui/toggle-group.d.ts @@ -0,0 +1,13 @@ +import { VariantProps } from 'class-variance-authority'; +import { ClassProp } from 'class-variance-authority/types'; +import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'; +import * as React from 'react'; +declare const ToggleGroup: React.ForwardRefExoticComponent<((Omit, "ref"> | Omit, "ref">) & VariantProps<(props?: ({ + variant?: "default" | "outline" | null | undefined; + size?: "sm" | "lg" | "default" | null | undefined; +} & ClassProp) | undefined) => string>) & React.RefAttributes>; +declare const ToggleGroupItem: React.ForwardRefExoticComponent, "ref"> & VariantProps<(props?: ({ + variant?: "default" | "outline" | null | undefined; + size?: "sm" | "lg" | "default" | null | undefined; +} & ClassProp) | undefined) => string> & React.RefAttributes>; +export { ToggleGroup, ToggleGroupItem }; diff --git a/packages/design-system/types/src/ui/toggle.d.ts b/packages/design-system/types/src/ui/toggle.d.ts new file mode 100644 index 0000000..0a6ec89 --- /dev/null +++ b/packages/design-system/types/src/ui/toggle.d.ts @@ -0,0 +1,13 @@ +import { VariantProps } from 'class-variance-authority'; +import { ClassProp } from 'class-variance-authority/types'; +import * as TogglePrimitive from '@radix-ui/react-toggle'; +import * as React from 'react'; +declare const toggleVariants: (props?: ({ + variant?: "default" | "outline" | null | undefined; + size?: "sm" | "lg" | "default" | null | undefined; +} & ClassProp) | undefined) => string; +declare const Toggle: React.ForwardRefExoticComponent, "ref"> & VariantProps<(props?: ({ + variant?: "default" | "outline" | null | undefined; + size?: "sm" | "lg" | "default" | null | undefined; +} & ClassProp) | undefined) => string> & React.RefAttributes>; +export { Toggle, toggleVariants }; diff --git a/packages/design-system/types/src/ui/tooltip.d.ts b/packages/design-system/types/src/ui/tooltip.d.ts new file mode 100644 index 0000000..d709066 --- /dev/null +++ b/packages/design-system/types/src/ui/tooltip.d.ts @@ -0,0 +1,7 @@ +import * as TooltipPrimitive from '@radix-ui/react-tooltip'; +import * as React from 'react'; +declare const TooltipProvider: React.FC; +declare const Tooltip: React.FC; +declare const TooltipTrigger: React.ForwardRefExoticComponent>; +declare const TooltipContent: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }; diff --git a/packages/design-system/types/src/ui/use-toast.d.ts b/packages/design-system/types/src/ui/use-toast.d.ts new file mode 100644 index 0000000..c05d635 --- /dev/null +++ b/packages/design-system/types/src/ui/use-toast.d.ts @@ -0,0 +1,44 @@ +import { ToastActionElement, ToastProps } from './toast'; +import * as React from 'react'; +type ToasterToast = ToastProps & { + id: string; + title?: React.ReactNode; + description?: React.ReactNode; + action?: ToastActionElement; +}; +declare const actionTypes: { + readonly ADD_TOAST: "ADD_TOAST"; + readonly UPDATE_TOAST: "UPDATE_TOAST"; + readonly DISMISS_TOAST: "DISMISS_TOAST"; + readonly REMOVE_TOAST: "REMOVE_TOAST"; +}; +type ActionType = typeof actionTypes; +type Action = { + type: ActionType['ADD_TOAST']; + toast: ToasterToast; +} | { + type: ActionType['UPDATE_TOAST']; + toast: Partial; +} | { + type: ActionType['DISMISS_TOAST']; + toastId?: ToasterToast['id']; +} | { + type: ActionType['REMOVE_TOAST']; + toastId?: ToasterToast['id']; +}; +interface State { + toasts: ToasterToast[]; +} +export declare const reducer: (state: State, action: Action) => State; +type Toast = Omit; +declare function toast({ ...props }: Toast): { + id: string; + dismiss: () => void; + update: (props: ToasterToast) => void; +}; +declare function useToast(): { + toast: typeof toast; + dismiss: (toastId?: string) => void; + toasts: ToasterToast[]; +}; +export { toast, useToast }; diff --git a/packages/design-system/vite.config.ts b/packages/design-system/vite.config.ts index af77173..e28dc95 100644 --- a/packages/design-system/vite.config.ts +++ b/packages/design-system/vite.config.ts @@ -8,13 +8,13 @@ export default defineConfig({ plugins: [ react(), dts({ - // outDir: ['dist', 'types'], + outDir: ['dist', 'types'], // include: ['src/index.ts'], // exclude: ['src/ignore'], // aliasesExclude: [/^@components/], - staticImport: true, - // rollupTypes: true, - insertTypesEntry: true, + // staticImport: true, + rollupTypes: true, + // insertTypesEntry: true, tsconfigPath: './tsconfig.build.json', }), ],