@konstructio/ui 0.1.2-alpha.12 → 0.1.2-alpha.120

package/dist/lib/components/Toast/Toast.types.d.ts

@@ -0,0 +1,80 @@
+import { ReactNode } from 'react';
+import { Theme } from '../../domain/theme';
+export type ToastType = 'success' | 'error' | 'warning' | 'info';
+export type ToastItem = {
+    /** Description text or element */
+    description?: ReactNode;
+    /** Auto-dismiss duration in ms; 0 keeps the toast until dismissed (default: 3000) */
+    duration?: number;
+    /** Stable identifier, also passed to `onDismiss` */
+    id: string;
+    /** Show close button (default: true) */
+    showCloseButton?: boolean;
+    /** Title text or element */
+    title: ReactNode;
+    /** Visual type (default: 'info') */
+    type?: ToastType;
+};
+export type ToastInput = Omit<ToastItem, 'id'>;
+export type ToastHoverBehavior = 'resume' | 'restart';
+export type ToastHeights = Record<string, number>;
+/**
+ * Props for the Toast stack.
+ *
+ * @example
+ * ```tsx
+ * <ToastProvider>
+ *   <App />
+ *   <Toast />
+ * </ToastProvider>
+ * ```
+ */
+export type Props = {
+    /**
+     * Size each toast to its content, growing leftwards up to the viewport
+     * width, instead of the region's fixed width (default: false)
+     */
+    autoWidth?: boolean;
+    /** Additional CSS classes for the fixed region */
+    className?: string;
+    /** Accessible name of every close button (default: 'Close toast') */
+    closeLabel?: string;
+    /** Portal target (default: document.body) */
+    container?: Element | null;
+    /**
+     * Auto-dismiss duration applied to toasts published without one, set on
+     * the store this stack draws from (default: 3000)
+     */
+    duration?: number;
+    /** Render through a portal instead of in place (default: true) */
+    isPortal?: boolean;
+    /**
+     * What happens to the auto-dismiss countdowns after the stack is hovered or
+     * focused: `resume` continues each toast with the time it had left,
+     * `restart` gives every toast its full duration again and dismisses them
+     * one by one, oldest first (default: 'resume')
+     */
+    hoverBehavior?: ToastHoverBehavior;
+    /** Accessible name of the notifications region (default: 'Notifications') */
+    label?: string;
+    /**
+     * Toasts kept in the queue, dropping the oldest past it, set on the store
+     * this stack draws from (default: 5)
+     */
+    limit?: number;
+    /** Toasts kept visible while collapsed; the rest stay hidden behind (default: 3) */
+    maxVisible?: number;
+    /** Theme override for this component */
+    theme?: Theme;
+    /**
+     * Toasts in publish order, oldest first; the newest one is shown in front.
+     * Leave out `toasts` and `onDismiss` to read them from the nearest
+     * `ToastProvider`, or from the built-in store `useToast()` publishes to
+     * when there is none
+     */
+    toasts?: ToastItem[];
+    /** Called when a toast expires or its close button is pressed */
+    onDismiss?: (id: string) => void;
+};
+/** @deprecated Use Props instead */
+export type ToastProps = Props;

package/dist/lib/components/Toast/Toast.variants.d.ts

@@ -0,0 +1,16 @@
+export declare const toastFrameVariants: (props?: ({
+    type?: "success" | "info" | "warning" | "error" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const toastVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const toastTitleVariants: (props?: ({
+    type?: "success" | "info" | "warning" | "error" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const toastDescriptionVariants: (props?: ({
+    type?: "success" | "info" | "warning" | "error" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const toastIconVariants: (props?: ({
+    type?: "success" | "info" | "warning" | "error" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const toastCloseButtonVariants: (props?: ({
+    type?: "success" | "info" | "warning" | "error" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/lib/components/Toast/ToastProvider.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { Props } from './ToastProvider.types';
+/**
+ * Optional scope for the toast queue: everything below it publishes with
+ * `useToast()` into this store and a `<Toast />` inside draws it. Use it to
+ * inject a store shared with other code (`store`) or to isolate a subtree;
+ * without it, `<Toast />` and `useToast()` share one built-in store.
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/in-review-toast-light--docs Storybook}
+ */
+export declare const ToastProvider: FC<Props>;

package/dist/lib/components/Toast/ToastProvider.types.d.ts

@@ -0,0 +1,17 @@
+import { PropsWithChildren } from 'react';
+import { ToastStore, ToastStoreOptions } from './store/create-toast-store.types';
+/**
+ * Props for the ToastProvider.
+ *
+ * @example
+ * ```tsx
+ * <ToastProvider duration={3000} limit={5}>
+ *   <App />
+ *   <Toast />
+ * </ToastProvider>
+ * ```
+ */
+export type Props = PropsWithChildren<ToastStoreOptions & {
+    /** An existing store to share, e.g. one also exposed to other apps */
+    store?: ToastStore;
+}>;

package/dist/lib/components/Toast/components/ToastCard/ToastCard.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from './ToastCard.types';
+export declare const ToastCard: FC<Props>;

package/dist/lib/components/Toast/components/ToastCard/ToastCard.types.d.ts

@@ -0,0 +1,18 @@
+import { ToastItem } from '../../Toast.types';
+export type Props = {
+    autoWidth: boolean;
+    closeLabel: string;
+    expanded: boolean;
+    frontHeight: number;
+    index: number;
+    offset: number;
+    reducedMotion: boolean;
+    restartOnLeave: boolean;
+    resumeDelay: number;
+    toast: ToastItem;
+    total: number;
+    visible: boolean;
+    onDismiss: () => void;
+    onExited: (id: string) => void;
+    onHeightChange: (id: string, height: number) => void;
+};

package/dist/lib/components/Toast/components/index.d.ts

@@ -0,0 +1 @@
+export * from './ToastCard/ToastCard';

package/dist/lib/components/Toast/constants/index.d.ts

@@ -0,0 +1,25 @@
+import { ErrorIcon } from '../../../assets/icons/components';
+import { ToastType } from '../Toast.types';
+export declare const DEFAULT_TOAST_DURATION = 3000;
+export declare const DEFAULT_TOAST_LIMIT = 5;
+export declare const TOAST_DISMISS_STAGGER_MS = 300;
+export declare const DEFAULT_MAX_VISIBLE_TOASTS = 3;
+export declare const COLLAPSED_STEP_PX = 12;
+export declare const COLLAPSED_SCALE_STEP = 0.05;
+export declare const EXPANDED_GAP_PX = 12;
+export declare const TOAST_TRANSITION: {
+    readonly type: "spring";
+    readonly stiffness: 320;
+    readonly damping: 32;
+    readonly mass: 0.9;
+};
+export declare const TOAST_ENTER_TRANSITION: {
+    readonly type: "spring";
+    readonly stiffness: 260;
+    readonly damping: 26;
+};
+export declare const TOAST_EXIT_TRANSITION: {
+    readonly duration: 0.15;
+    readonly ease: "easeOut";
+};
+export declare const TOAST_ICONS: Record<ToastType, typeof ErrorIcon>;

package/dist/lib/components/Toast/contexts/index.d.ts

@@ -0,0 +1 @@
+export * from './toast-store.context';

package/dist/lib/components/Toast/contexts/toast-store.context.d.ts

@@ -0,0 +1,2 @@
+import { ToastStore } from '../store/create-toast-store.types';
+export declare const ToastStoreContext: import('react').Context<ToastStore | null>;

package/dist/lib/components/Toast/hooks/index.d.ts

@@ -0,0 +1,6 @@
+export * from './useStackExpansion/useStackExpansion';
+export * from './useToast/useToast';
+export * from './useToastHeights/useToastHeights';
+export * from './useToastSource/useToastSource';
+export * from './useToastStore/useToastStore';
+export * from './useToastTimer/useToastTimer';

package/dist/lib/components/Toast/hooks/useStackExpansion/useStackExpansion.d.ts

@@ -0,0 +1,2 @@
+import { UseStackExpansionResult } from './useStackExpansion.types';
+export declare const useStackExpansion: () => UseStackExpansionResult;

package/dist/lib/components/Toast/hooks/useStackExpansion/useStackExpansion.types.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from 'react';
+export type StackRegionHandlers = Pick<HTMLAttributes<HTMLElement>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'>;
+export type UseStackExpansionResult = {
+    expanded: boolean;
+    regionHandlers: StackRegionHandlers;
+};

package/dist/lib/components/Toast/hooks/useToast/useToast.d.ts

@@ -0,0 +1,2 @@
+import { ToastActions } from '../../store/create-toast-store.types';
+export declare const useToast: () => ToastActions;

package/dist/lib/components/Toast/hooks/useToastHeights/useToastHeights.d.ts

@@ -0,0 +1,2 @@
+import { UseToastHeightsResult } from './useToastHeights.types';
+export declare const useToastHeights: () => UseToastHeightsResult;

package/dist/lib/components/Toast/hooks/useToastHeights/useToastHeights.types.d.ts

@@ -0,0 +1,6 @@
+import { ToastHeights } from '../../Toast.types';
+export type UseToastHeightsResult = {
+    heights: ToastHeights;
+    removeHeight: (id: string) => void;
+    setHeight: (id: string, height: number) => void;
+};

package/dist/lib/components/Toast/hooks/useToastSource/useToastSource.d.ts

@@ -0,0 +1,2 @@
+import { UseToastSourceOptions, UseToastSourceResult } from './useToastSource.types';
+export declare const useToastSource: ({ toasts, onDismiss, }: UseToastSourceOptions) => UseToastSourceResult;

package/dist/lib/components/Toast/hooks/useToastSource/useToastSource.types.d.ts

@@ -0,0 +1,11 @@
+import { ToastStoreOptions } from '../../store/create-toast-store.types';
+import { ToastItem } from '../../Toast.types';
+export type UseToastSourceOptions = {
+    toasts?: ToastItem[];
+    onDismiss?: (id: string) => void;
+};
+export type UseToastSourceResult = {
+    toasts: ToastItem[];
+    configure: (options: ToastStoreOptions) => void;
+    dismiss: (id: string) => void;
+};

package/dist/lib/components/Toast/hooks/useToastStore/useToastStore.d.ts

@@ -0,0 +1,3 @@
+import { ToastStore, ToastStoreState } from '../../store/create-toast-store.types';
+export declare const useToastStoreApi: () => ToastStore;
+export declare const useToastStore: <T>(selector: (state: ToastStoreState) => T) => T;

package/dist/lib/components/Toast/hooks/useToastTimer/useToastTimer.d.ts

@@ -0,0 +1,2 @@
+import { UseToastTimerOptions } from './useToastTimer.types';
+export declare const useToastTimer: ({ duration, paused, restart, resumeDelay, onExpire, }: UseToastTimerOptions) => void;

package/dist/lib/components/Toast/hooks/useToastTimer/useToastTimer.types.d.ts

@@ -0,0 +1,7 @@
+export type UseToastTimerOptions = {
+    duration: number;
+    paused: boolean;
+    restart: boolean;
+    resumeDelay: number;
+    onExpire: () => void;
+};

package/dist/lib/components/Toast/store/create-toast-store.d.ts

@@ -0,0 +1,2 @@
+import { ToastStore, ToastStoreOptions } from './create-toast-store.types';
+export declare const createToastStore: (initialOptions?: ToastStoreOptions) => ToastStore;

package/dist/lib/components/Toast/store/create-toast-store.types.d.ts

@@ -0,0 +1,24 @@
+import { ToastInput, ToastItem } from '../Toast.types';
+export type ToastStoreState = {
+    toasts: ToastItem[];
+    add: (input: ToastInput) => string;
+    remove: (id: string) => void;
+    clear: () => void;
+};
+export type ToastStoreListener = (state: ToastStoreState, previous: ToastStoreState) => void;
+export type ToastStore = {
+    configure: (options: ToastStoreOptions) => void;
+    getState: () => ToastStoreState;
+    subscribe: (listener: ToastStoreListener) => () => void;
+};
+export type ToastStoreOptions = {
+    /** Auto-dismiss duration applied when a toast has none (default: 3000) */
+    duration?: number;
+    /** Toasts kept in the queue; the oldest is dropped past it (default: 5) */
+    limit?: number;
+};
+export type ToastActions = {
+    addToast: (input: ToastInput) => string;
+    removeToast: (id: string) => void;
+    clearAllToasts: () => void;
+};

package/dist/lib/components/Toast/store/default-toast-store.d.ts

@@ -0,0 +1 @@
+export declare const defaultToastStore: import('./create-toast-store.types').ToastStore;

package/dist/lib/components/Toast/store/index.d.ts

@@ -0,0 +1,2 @@
+export * from './create-toast-store';
+export * from './default-toast-store';

package/dist/lib/components/Toast/utils/compute-stack-layout/compute-stack-layout.d.ts

@@ -0,0 +1,2 @@
+import { StackLayout, StackLayoutInput } from './compute-stack-layout.types';
+export declare const computeStackLayout: ({ expanded, heights, maxVisible, toasts, }: StackLayoutInput) => StackLayout;

package/dist/lib/components/Toast/utils/compute-stack-layout/compute-stack-layout.types.d.ts

@@ -0,0 +1,12 @@
+import { ToastHeights, ToastItem } from '../../Toast.types';
+export type StackLayoutInput = {
+    expanded: boolean;
+    heights: ToastHeights;
+    maxVisible: number;
+    toasts: ToastItem[];
+};
+export type StackLayout = {
+    frontHeight: number;
+    offsets: number[];
+    regionHeight: number;
+};

package/dist/lib/components/Toast/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './compute-stack-layout/compute-stack-layout';

package/dist/lib/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+import { Props } from './Tooltip.types';
+/**
+ * A tooltip component that shows on hover.
+ * Built on Radix UI for accessible, well-positioned tooltips.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="Click to save">
+ *   <Button>Save</Button>
+ * </Tooltip>
+ *
+ * <Tooltip content="More information" side="bottom">
+ *   <InfoIcon />
+ * </Tooltip>
+ *
+ * <Tooltip content="Danger!" bgClassName="bg-red-500">
+ *   <Button variant="danger">Delete</Button>
+ * </Tooltip>
+ *
+ * <Tooltip content="This name is taken" asOverlay overlayClassName="right-0 top-7 h-10 w-8">
+ *   <Input label="Name" />
+ * </Tooltip>
+ * ```
+ */
+export declare const Tooltip: FC<Props>;

package/dist/lib/components/Tooltip/Tooltip.types.d.ts

@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+/**
+ * Props for the Tooltip component.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="Click to edit">
+ *   <Button>Edit</Button>
+ * </Tooltip>
+ *
+ * <Tooltip content="More info here" side="bottom">
+ *   <InfoIcon />
+ * </Tooltip>
+ *
+ * <Tooltip content="Danger!" bgClassName="bg-red-500">
+ *   <Button variant="danger">Delete</Button>
+ * </Tooltip>
+ * ```
+ */
+export interface Props {
+    /** Tooltip text or content */
+    content: ReactNode | string;
+    /** The trigger element */
+    children: ReactNode;
+    /** Render an invisible trigger over the children instead of wrapping them, for fields that cannot be wrapped or are disabled */
+    asOverlay?: boolean;
+    /** Keep the children as they are and never open the tooltip */
+    disabled?: boolean;
+    /** Position and size of the overlay trigger (defaults to `inset-0`) */
+    overlayClassName?: string;
+    /** Accessible name of the overlay trigger; defaults to `content` when it is a string */
+    overlayLabel?: string;
+    /** Additional className for the relative wrapper used in overlay mode */
+    wrapperClassName?: string;
+    /** Tooltip position relative to trigger */
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    /** Distance from trigger in px */
+    sideOffset?: number;
+    /** Background color class for tooltip (e.g. 'bg-slate-700', 'bg-red-500') */
+    bgClassName?: string;
+    /** Arrow fill color class (e.g. 'fill-slate-700', 'fill-red-500'). Should match bgClassName */
+    arrowClassName?: string;
+    /** Text color class (e.g. 'text-white') */
+    textClassName?: string;
+    /** Additional className for tooltip content */
+    className?: string;
+    /** Delay before showing tooltip in ms */
+    delayDuration?: number;
+}
+/** @deprecated Use Props instead */
+export type TooltipProps = Props;

package/dist/lib/components/Typography/Typography.d.ts

@@ -0,0 +1,18 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { Props } from './Typography.types';
+/**
+ * A flexible typography component for consistent text styling.
+ * Automatically selects semantic HTML elements based on variant.
+ *
+ * @example
+ * ```tsx
+ * <Typography variant="h1">Main Heading</Typography>
+ * <Typography variant="body1">Paragraph text</Typography>
+ * <Typography variant="subtitle1" component="span">Inline text</Typography>
+ * <Typography variant="h3" component="label" htmlFor="input">Label</Typography>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-typography--docs Storybook}
+ */
+declare const Typography: ForwardRefExoticComponent<Omit<Props, 'ref'> & RefAttributes<HTMLParagraphElement & HTMLHeadingElement & HTMLLabelElement>>;
+export { Typography };

package/dist/lib/components/Typography/Typography.types.d.ts

@@ -0,0 +1,31 @@
+import { VariantProps } from 'class-variance-authority';
+import { ComponentRef, HTMLAttributes, ReactNode, Ref } from 'react';
+import { Theme } from '../../domain/theme';
+import { typographyVariants } from './Typography.variants';
+/** Valid HTML heading tags */
+export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+/**
+ * Props for the Typography component.
+ * A flexible text component with semantic variants and theming.
+ *
+ * @example
+ * ```tsx
+ * <Typography variant="h1">Page Title</Typography>
+ * <Typography variant="body1">Body text content</Typography>
+ * <Typography variant="h2" component="p">Styled as h2 but renders as p</Typography>
+ * ```
+ */
+export interface Props extends HTMLAttributes<ComponentRef<HeadingTag | 'p' | 'span'>>, VariantProps<typeof typographyVariants> {
+    /** Ref to the underlying DOM element */
+    ref?: Ref<HTMLHeadingElement | HTMLParagraphElement | HTMLSpanElement>;
+    /** Text content to display */
+    children: ReactNode;
+    /** Override the rendered HTML element */
+    component?: HeadingTag | 'p' | 'span' | 'label';
+    /** Theme override for this component */
+    theme?: Theme;
+    /** For use with label component to associate with form input */
+    htmlFor?: string;
+}
+/** @deprecated Use Props instead */
+export type TypographyProps = Props;

package/dist/lib/components/Typography/Typography.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const typographyVariants: (props?: ({
+    variant?: "tooltip" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "subtitle3" | "labelLarge" | "labelMedium" | "labelSmall" | "buttonSmall" | "body1" | "body2" | "body3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/lib/components/VirtualizedTable/VirtualizedTable.d.ts

@@ -0,0 +1,24 @@
+import { JSX } from 'react';
+import { Props, RowData } from './VirtualizedTable.types';
+import { Props as ActionProps } from './components/Actions/Actions.types';
+import { EmptyResults } from './components/EmptyResults/EmptyResults';
+import { EmptyState } from './components/EmptyState/EmptyState';
+import { ErrorState } from './components/ErrorState/ErrorState';
+import { TruncateText } from './components/TruncateText/TruncateText';
+type VirtualizedTableCompound = (<TData extends RowData>(props: Props<TData>) => JSX.Element) & {
+    TruncateText: typeof TruncateText;
+    EmptyState: typeof EmptyState;
+    EmptyResults: typeof EmptyResults;
+    ErrorState: typeof ErrorState;
+    Actions: <TData extends RowData>(props: ActionProps<TData>) => JSX.Element | null;
+    Events: {
+        sendExpandRowEvent: (tableId: string, rowId: string) => void;
+        sendCollapseRowEvent: (tableId: string, rowId: string) => void;
+        sendToggleRowEvent: (tableId: string, rowId: string) => void;
+        sendResetFiltersEvent: (tableId: string) => void;
+        sendRefreshEvent: (tableId?: string) => void;
+    };
+    displayName?: string;
+};
+declare const VirtualizedTable: VirtualizedTableCompound;
+export { EmptyResults, EmptyState, ErrorState, TruncateText, VirtualizedTable };