@konstructio/ui 0.1.2-alpha.11 → 0.1.2-alpha.111

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

@@ -0,0 +1,59 @@
+import { VariantProps } from 'class-variance-authority';
+import { timePickerVariants } from './TimePicker.variants';
+/**
+ * Props for the TimePicker component.
+ * A scrollable time picker with support for 12 and 24 hour formats.
+ *
+ * @example
+ * ```tsx
+ * <TimePicker
+ *   label="Meeting Time"
+ *   name="meetingTime"
+ *   format="12"
+ *   time={new Date()}
+ *   isRequired
+ * />
+ * ```
+ */
+export type Props = VariantProps<typeof timePickerVariants> & {
+    /** Time format: '12' for AM/PM or '24' for military time */
+    format?: '12' | '24';
+    /** Input mode: 'select' for dropdown only, 'input' for typing */
+    mode?: 'select' | 'input';
+    /** Whether to show the dropdown list (default: true) */
+    showList?: boolean;
+    /** Scroll behavior when navigating times */
+    scrollBehavior?: 'smooth' | 'auto';
+    /** Currently selected time */
+    time?: Date;
+    /** Form field name */
+    name?: string;
+    /** Id of the rendered control, for consumer-owned labels */
+    id?: string;
+    /** Label displayed above the picker */
+    label?: string;
+    /** Accessible name, when the visible label is rendered by the consumer */
+    ariaLabel?: string;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** Additional CSS classes for the wrapper */
+    className?: string;
+    /** Additional CSS classes for the scrollable list */
+    listClassName?: string;
+    /** Additional CSS classes for list items */
+    listItemClassName?: string;
+    /** Additional CSS classes for list item buttons */
+    listItemButtonClassName?: string;
+    /** Callback when time changes */
+    onChange?: (time: Date) => void;
+    /** Whether the picker is disabled */
+    disabled?: boolean;
+    /** Error message to display (overrides internal validation error) */
+    error?: string;
+    /** Placeholder text for input mode */
+    placeholder?: string;
+    /** Direction to open the dropdown list (default: 'bottom') */
+    listPosition?: 'top' | 'bottom';
+};
+/** @deprecated Use Props instead */
+export type TimePickerProps = Props;

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

@@ -0,0 +1,4 @@
+export declare const timePickerVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const ulVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const liVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const buttonVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/lib/components/TimePicker/components/HoursList/HoursList.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { HourListProps } from './HoursList.types';
+declare const HoursList: FC<HourListProps>;
+export { HoursList };

package/dist/lib/components/TimePicker/components/HoursList/HoursList.types.d.ts

@@ -0,0 +1,8 @@
+import { Props as TimePickerProps } from '../../TimePicker.types';
+export type HourListProps = {
+    hours: number;
+    scrollBehavior?: TimePickerProps['scrollBehavior'];
+    listClassName?: TimePickerProps['listClassName'];
+    listItemClassName?: TimePickerProps['listItemClassName'];
+    listItemButtonClassName?: TimePickerProps['listItemButtonClassName'];
+};

package/dist/lib/components/TimePicker/components/MeridianList/MeridianList.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { MeridianListProps } from './MeridianList.types';
+declare const MeridianList: FC<MeridianListProps>;
+export { MeridianList };

package/dist/lib/components/TimePicker/components/MeridianList/MeridianList.types.d.ts

@@ -0,0 +1,7 @@
+import { Props as TimePickerProps } from '../../TimePicker.types';
+export type MeridianListProps = {
+    listClassName?: TimePickerProps['listClassName'];
+    listItemClassName?: TimePickerProps['listItemClassName'];
+    listItemButtonClassName?: TimePickerProps['listItemButtonClassName'];
+    onClose?: () => void;
+};

package/dist/lib/components/TimePicker/components/MinutesList/MinutesList.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { MinutesLitProps } from './MinutesList.types';
+declare const MinutesList: FC<MinutesLitProps>;
+export { MinutesList };

package/dist/lib/components/TimePicker/components/MinutesList/MinutesList.types.d.ts

@@ -0,0 +1,9 @@
+import { Props as TimePickerProps } from '../../TimePicker.types';
+export type MinutesLitProps = {
+    minutes: number;
+    scrollBehavior?: TimePickerProps['scrollBehavior'];
+    listClassName?: TimePickerProps['listClassName'];
+    listItemClassName?: TimePickerProps['listItemClassName'];
+    listItemButtonClassName?: TimePickerProps['listItemButtonClassName'];
+    onClose?: () => void;
+};

package/dist/lib/components/TimePicker/components/Wrapper/Wrapper.d.ts

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

package/dist/lib/components/TimePicker/components/Wrapper/Wrapper.types.d.ts

@@ -0,0 +1,6 @@
+import { Props as TimePickerProps } from '../../TimePicker.types';
+export type WrapperProps = Omit<TimePickerProps, 'format' | 'time' | 'onChange'> & {
+    mode?: 'select' | 'input';
+    showList?: boolean;
+    error?: string;
+};

package/dist/lib/components/TimePicker/components/WrapperList/WrapperList.d.ts

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

package/dist/lib/components/TimePicker/components/WrapperList/WrapperList.types.d.ts

@@ -0,0 +1,10 @@
+import { Props as TimePickerProps } from '../../TimePicker.types';
+export type WrapperListProps = {
+    id?: string;
+    isOpen: boolean;
+    scrollBehavior?: TimePickerProps['scrollBehavior'];
+    listClassName?: TimePickerProps['listClassName'];
+    listItemClassName?: TimePickerProps['listItemClassName'];
+    listItemButtonClassName?: TimePickerProps['listItemButtonClassName'];
+    onClose?: () => void;
+};

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

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

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

@@ -0,0 +1,3 @@
+export * from './time-picker.context';
+export * from './time-picker.provider';
+export * from './time-picker.hook';

package/dist/lib/components/TimePicker/contexts/time-picker.context.d.ts

@@ -0,0 +1,15 @@
+import { TimePickerProps } from '../TimePicker.types';
+export type TimePickerContextType = {
+    time: Date | undefined;
+    format: NonNullable<TimePickerProps['format']>;
+    formattedTime: string;
+    isAM: boolean;
+    isTyping: boolean;
+    onSelectHour: (hour: number) => void;
+    onSelectMinute: (minute: number) => void;
+    onSelectAM: () => void;
+    onSelectPM: () => void;
+    setTimeDirectly: (time: Date) => void;
+    setIsTyping: (value: boolean) => void;
+};
+export declare const TimePickerContext: import('react').Context<TimePickerContextType>;

package/dist/lib/components/TimePicker/contexts/time-picker.hook.d.ts

@@ -0,0 +1,2 @@
+import { TimePickerContextType } from './time-picker.context';
+export declare const useTimePickerContext: () => TimePickerContextType;

package/dist/lib/components/TimePicker/contexts/time-picker.provider.d.ts

@@ -0,0 +1,7 @@
+import { FC, PropsWithChildren } from 'react';
+import { TimePickerProps } from '../TimePicker.types';
+export declare const TimePickerProvider: FC<PropsWithChildren & {
+    time?: Date;
+    format: NonNullable<TimePickerProps['format']>;
+    onChange?: (time: Date) => void;
+}>;

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

@@ -0,0 +1,8 @@
+export declare const getFormattedTime: (time: Date, format: "12" | "24") => string;
+export declare const getHours: (time: Date | undefined) => number;
+export declare const getMinutes: (time: Date | undefined) => number;
+/**
+ * Parses a time string and returns a Date object.
+ * Supports formats: "HH:MM", "H:MM", "H:M", "HH:MM AM/PM", "H:MM AM/PM", "H:M AM/PM"
+ */
+export declare const parseTimeString: (value: string, format: "12" | "24") => Date | null;

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

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+import { Props } from './Toast.types';
+/**
+ * A stack of toast notifications anchored to the bottom-right corner.
+ *
+ * The newest toast sits in front; older ones peek out behind it and the whole
+ * stack expands on hover or focus, holding every auto-dismiss countdown until
+ * the pointer leaves, focus moves out or the window loses focus. By default
+ * each toast then resumes with the time it had left; `hoverBehavior="restart"`
+ * gives them their full duration again and dismisses them one by one.
+ * Rendered through a portal on `document.body` so no ancestor can clip or
+ * cover it, and themed through the `data-theme` it lands under.
+ *
+ * @example
+ * ```tsx
+ * <App />
+ * <Toast limit={5} duration={3000} />
+ *
+ * const { addToast } = useToast();
+ * addToast({ title: 'Saved', type: 'success' });
+ * ```
+ *
+ * No `ToastProvider` is needed: the stack and `useToast()` share a built-in
+ * store that `duration` and `limit` configure (`limit={1}` shows one toast at
+ * a time). Wrap a subtree in `ToastProvider` to scope or inject a store, or
+ * pass `toasts` and `onDismiss` to drive the stack from your own state.
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/in-review-toast-light--docs Storybook}
+ */
+export declare const Toast: FC<Props>;

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

@@ -0,0 +1,75 @@
+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 = {
+    /** 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,17 @@
+import { ToastItem } from '../../Toast.types';
+export type Props = {
+    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,22 @@
+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>
+ * ```
+ */
+export declare const Tooltip: FC<Props>;

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

@@ -0,0 +1,41 @@
+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;
+    /** 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 };