@kenlo/kdls-design-system 2.0.0

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

@@ -0,0 +1,47 @@
+import type { ToastFeedback } from './Toast';
+import type { TooltipPosition } from '../Tooltip';
+/** Must match the exit animation in Toast.css (.kdls-toast--leaving) */
+export declare const TOAST_EXIT_MS = 220;
+export interface ToastOptions {
+    /** Visual state — defines icon and color */
+    feedback?: ToastFeedback;
+    /** Action button label shown to the right of the message */
+    actionLabel?: string;
+    /** Callback for the action button click */
+    onAction?: () => void;
+    /** Disables the action button */
+    actionDisabled?: boolean;
+    /** Tooltip text shown when the action button is disabled */
+    actionDisabledTooltip?: string;
+    /** Position of the disabled action button's tooltip — default 'top' */
+    actionDisabledTooltipPosition?: TooltipPosition;
+    /** Shows the close (✕) button — on by default */
+    showDismiss?: boolean;
+}
+export interface ToastItem {
+    id: number;
+    message: string;
+    feedback: ToastFeedback;
+    actionLabel?: string;
+    onAction?: () => void;
+    actionDisabled?: boolean;
+    actionDisabledTooltip?: string;
+    actionDisabledTooltipPosition?: TooltipPosition;
+    showDismiss: boolean;
+    /** true while the exit animates, before leaving the list */
+    leaving: boolean;
+}
+type Listener = (toasts: ToastItem[]) => void;
+/** Subscribes to list changes. Calls immediately with the current state. Returns the unsubscribe function. */
+export declare function subscribe(listener: Listener): () => void;
+/** Adds a toast and schedules the auto-dismiss (4s; 8s if error). Returns the id. */
+export declare function addToast(message: string, opts?: ToastOptions): number;
+/** Closes a toast manually (triggers the exit animation). */
+export declare function dismissToast(id: number): void;
+/** Pauses the timers for all toasts (used on container hover). */
+export declare function pauseAll(): void;
+/** Resumes paused timers with their remaining time. */
+export declare function resumeAll(): void;
+/** Test-only — clears the list and timers. */
+export declare function _resetToasts(): void;
+export {};

package/dist/components/Toggle/Toggle.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { IconElement } from '../Icon/Icon';
+import './Toggle.css';
+export interface ToggleItem {
+    /** Item's unique identifier — used as `value` in onChange */
+    value: string;
+    /** Item text (optional when there's only an icon) */
+    label?: string;
+    /** Icon to the left of the label (24px) */
+    iconLeft?: IconElement;
+    /** Icon to the right of the label (24px) */
+    iconRight?: IconElement;
+    /** Disables only this item */
+    disabled?: boolean;
+}
+export interface ToggleProps {
+    /** List of options — minimum 2 items */
+    items: [ToggleItem, ToggleItem, ...ToggleItem[]];
+    /** Width: 'hug' = fits content | 'fill' = 100% of the container */
+    width?: 'hug' | 'fill';
+    /** Active item's value (controlled) — must match an `item.value`. Use with onChange */
+    value?: string;
+    /** Initial value (uncontrolled) — ignored when value is passed */
+    defaultValue?: string;
+    /** Callback fired when selecting an item — receives the item's `value` */
+    onChange?: (value: string) => void;
+    /** Disables all items */
+    disabled?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const Toggle: React.FC<ToggleProps>;
+export default Toggle;

package/dist/components/Toggle/Toggle.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Toggle/index.d.ts

@@ -0,0 +1,2 @@
+export { Toggle } from './Toggle';
+export type { ToggleProps, ToggleItem } from './Toggle';

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import './Tooltip.css';
+export type TooltipPosition = 'top' | 'topLeft' | 'topRight' | 'right' | 'rightTop' | 'rightBottom' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom';
+export interface TooltipProps {
+    /** Text shown inside the tooltip on hovering or focusing the trigger. */
+    content: string;
+    /** Trigger element — receives hover/focus to show the tooltip (button, text, etc.). When omitted, renders the DS's default info icon (fixed — the icon and color can't be changed). */
+    children?: React.ReactNode;
+    /** Tooltip position relative to the trigger. Automatically flips to the opposite side when there's no space in the requested direction. */
+    placement?: TooltipPosition;
+    /** Additional CSS class applied to the trigger's wrapper. */
+    className?: string;
+}
+export declare const Tooltip: React.FC<TooltipProps>;
+export default Tooltip;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { Tooltip } from './Tooltip';
+export type { TooltipProps, TooltipPosition } from './Tooltip';

package/dist/components/Uploader/Uploader.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import './Uploader.css';
+export type UploaderMode = 'image' | 'document';
+/**
+ * Crop constraint for the image editor.
+ * - `string`           — aspect ratio, e.g. `"16:9"`, `"4:3"`, `"1:1"`
+ * - `{ width, height }` — fixed pixel dimensions, e.g. `{ width: 400, height: 300 }`
+ *
+ * When provided a draggable/resizable crop overlay is shown in the edit modal.
+ * Corner handles maintain the ratio when `crop` is a string;
+ * free resize when `crop` is a pixel object with no forced ratio.
+ */
+export type CropRatio = string;
+export type CropSizePx = {
+    width: number;
+    height: number;
+};
+export type CropConstraint = CropRatio | CropSizePx;
+export interface UploaderProps {
+    mode?: UploaderMode;
+    /** Data URL or src URL of the uploaded file (controlled) */
+    value?: string | null;
+    /** Fired with the new data URL when a file is selected, or null when removed */
+    onChange?: (dataUrl: string | null) => void;
+    /**
+     * Crop constraint. Pass a ratio string (`"16:9"`) or pixel dimensions
+     * (`{ width: 400, height: 300 }`) to display a crop overlay in the editor.
+     * Omit for free-form editing without a crop frame.
+     */
+    crop?: CropConstraint;
+    className?: string;
+}
+export declare const Uploader: React.FC<UploaderProps>;
+export default Uploader;

package/dist/components/Uploader/Uploader.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Uploader/index.d.ts

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

package/dist/components/getVisibleBounds.d.ts

@@ -0,0 +1,6 @@
+export declare function getVisibleBounds(el: Element | null, scrollOnly?: boolean): {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};

package/dist/components/index.d.ts

@@ -0,0 +1,51 @@
+import '../foundations/tokens.css';
+export * from './ColorScheme';
+export * from './Form';
+export * from './Accordion';
+export * from './AccordionGroup';
+export * from './Grid';
+export * from './AttachmentList';
+export * from './Avatar';
+export * from './Badge';
+export * from './Icon/Icon';
+export * from './Icon/products';
+export * from './Icon/social';
+export * from './Icon/custom';
+export * from './Alert';
+export * from './BottomSheet';
+export * from './Button';
+export * from './Checkbox';
+export * from './ColorPicker';
+export * from './DatePicker';
+export * from './Separator';
+export * from './Select';
+export * from './Drawer';
+export * from './Header';
+export * from './Uploader';
+export * from './IconButton';
+export * from './Incrementer';
+export * from './Input';
+export * from './SearchBar';
+export * from './Skeleton';
+export * from './Spinner';
+export * from './KenloLogo';
+export * from './LyaLogo';
+export * from './Menu';
+export * from './Nav';
+export * from './Modal';
+export * from './Notification';
+export * from './Pill';
+export * from './Popover';
+export * from './RadioGroup';
+export * from '../foundations/Scrollbar';
+export * from './Switch';
+export * from './Text';
+export * from './TextEditor';
+export * from './Toast';
+export * from './Toggle';
+export * from './Tooltip';
+export * from './BulkActionBar';
+export * from './Card';
+export * from './Table';
+export * from './Pagination';
+export * from './StatCard';

package/dist/components/useFloatingPosition.d.ts

@@ -0,0 +1,54 @@
+export type FloatingSide = 'top' | 'bottom' | 'left' | 'right';
+export type FloatingAlign = 'start' | 'center' | 'end';
+export interface FloatingBounds {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}
+export interface FloatingSize {
+    width: number;
+    height: number;
+}
+export interface FloatingPositionResult {
+    style: React.CSSProperties;
+    effectiveSide: FloatingSide;
+}
+export declare function parseFloatingPlacement(placement: string): {
+    side: FloatingSide;
+    align: FloatingAlign;
+};
+export declare function joinFloatingPlacement(side: FloatingSide, align: FloatingAlign): string;
+export declare function camelToKebab(s: string): string;
+/**
+ * Style for an already-decided side/align — uses `transform` (percentages relative to the
+ * panel itself) to center/align, so it doesn't need the panel size.
+ */
+export declare function floatingStyleFor(anchor: DOMRect, side: FloatingSide, align: FloatingAlign, gap: number): React.CSSProperties;
+/**
+ * Pure floating-position function — decides the effective side (flips when it doesn't fit)
+ * and the final style (position: fixed already included by the caller). No DOM reads.
+ */
+export declare function computeFloatingPosition(anchor: DOMRect, panelSize: FloatingSize, side: FloatingSide, align: FloatingAlign, gap: number, bounds: FloatingBounds): FloatingPositionResult;
+export interface UseFloatingPositionOptions {
+    triggerRef: React.RefObject<HTMLElement | null>;
+    panelRef: React.RefObject<HTMLElement | null>;
+    side: FloatingSide;
+    align: FloatingAlign;
+    gap: number;
+    open: boolean;
+    /** Observes resize of the panel itself (dynamic content) — default false. */
+    observePanel?: boolean;
+}
+/**
+ * Floating-position hook anchored to the trigger — measures the trigger, projects the panel
+ * size (0 before the first measurement), decides the flip, and repositions on scroll/resize
+ * while `open`. Used by components that decide the position BEFORE revealing the panel
+ * (Floating, Menu). Tooltip measures its own already-rendered panel — it doesn't use this hook,
+ * it uses `computeFloatingPosition` directly.
+ */
+export declare function useFloatingPosition({ triggerRef, panelRef, side, align, gap, open, observePanel, }: UseFloatingPositionOptions): {
+    style: React.CSSProperties;
+    effectiveSide: FloatingSide;
+    positioned: boolean;
+};

package/dist/components/useFloatingPosition.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/useIsMobile.d.ts

@@ -0,0 +1 @@
+export declare function useIsMobile(): boolean;

package/dist/foundations/Scrollbar/index.d.ts

@@ -0,0 +1,5 @@
+export declare const SCROLLBAR_CLASSES: {
+    readonly auto: "kdls-scroll";
+    readonly thin: "kdls-scroll kdls-scroll--thin";
+};
+export type ScrollbarVariant = keyof typeof SCROLLBAR_CLASSES;