@kenlo/kdls-design-system 2.0.0

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { InputFeedback } from '../Input/Input';
+import './Checkbox.css';
+export type CheckboxSize = 'sm' | 'md';
+export interface CheckboxProps {
+    /** Text associated with the checkbox */
+    label?: string;
+    /** Checkbox's visual size */
+    size?: CheckboxSize;
+    /** Width: 'hug' = fits content | 'fill' = 100% */
+    width?: 'hug' | 'fill';
+    /** Label position relative to the box: 'right' (default) | 'left' */
+    labelPosition?: 'right' | 'left';
+    /** Checked state (controlled) */
+    checked?: boolean;
+    /** Indeterminate state — shows a dash instead of a checkmark; maps to aria-checked="mixed" */
+    indeterminate?: boolean;
+    /** Callback fired on click — receives the new checked state */
+    onChange?: (checked: boolean) => void;
+    /** Shows a wrapper with padding and border */
+    container?: boolean;
+    /** Disables interaction and applies disabled visual style */
+    disabled?: boolean;
+    /** Validation visual state — colors the box's border (when unchecked) and the hint */
+    feedback?: InputFeedback;
+    /** Helper text shown below the label — hint or error, color follows the feedback */
+    hint?: string;
+    /** Field name for native form submission — renders an input[type=hidden] with the checked state */
+    name?: string;
+    /** Marks the field as required — asterisk on the label and aria-required on the box */
+    required?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const Checkbox: React.FC<CheckboxProps>;
+export default Checkbox;

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

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

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

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps, CheckboxSize } from './Checkbox';

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import './ColorPicker.css';
+export interface ColorPickerProps {
+    /** Label shown on the trigger — identifies the color field */
+    label: string;
+    /** Trigger width: 'hug' = fits content | 'fill' = 100% */
+    width?: 'hug' | 'fill';
+    /** Controlled HEX value (e.g. "#FF4B4A"). Syncs internal state when changed externally — the picker keeps its own edits until "Apply". null = no color selected */
+    value?: string | null;
+    /** Callback with the selected HEX, fired when clicking Apply on the panel */
+    onChange?: (hex: string) => void;
+    /** Overrides the panel's z-index. Use when the ColorPicker is inside another elevated layer (e.g. a Popover with a high z-index) */
+    zIndex?: number;
+    /** Removes the transparency (alpha) slider and input from the panel */
+    disableAlpha?: boolean;
+    /** Disables the component — prevents opening the panel and applies disabled visual style */
+    disabled?: boolean;
+    /** Additional CSS classes applied to the root element */
+    className?: string;
+}
+export declare const ColorPicker: React.FC<ColorPickerProps>;
+export default ColorPicker;

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

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

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

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

package/dist/components/ColorScheme/ColorScheme.d.ts

@@ -0,0 +1,15 @@
+export interface CustomPalette {
+    10: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    60: string;
+    70: string;
+    80: string;
+    90: string;
+}
+export declare function generatePalette(hex: string): CustomPalette;
+export declare function applyCustomScheme(hex: string): void;
+export declare function clearCustomScheme(): void;
+export declare function useCustomScheme(hex: string | null | undefined): void;

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

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

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,84 @@
+import React from 'react';
+import type { InputFeedback } from '../Input';
+import './DatePicker.css';
+import '../../foundations/Scrollbar/Scrollbar.css';
+export interface DateRange {
+    start: Date | null;
+    end: Date | null;
+}
+interface DatePickerBase {
+    /** Input trigger's label */
+    label?: string;
+    /** Trigger style: 'input' = text field (default) | 'pill' = pill button */
+    trigger?: 'input' | 'pill';
+    /** Trigger width: 'hug' = fits content | 'fill' = 100% */
+    width?: 'hug' | 'fill';
+    /** Single mode: Date | null. isRange mode: { start, end } */
+    value?: Date | null | DateRange;
+    /** Callback on selection. Single mode: Date | null. isRange mode: { start, end } */
+    onChange?: (value: Date | null | DateRange) => void;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Return false to disable a specific date */
+    filterDate?: (date: Date) => boolean;
+    /** Specific disabled dates */
+    excludeDates?: Date[];
+    /** Only these dates stay enabled */
+    includeDates?: Date[];
+    /** Interval in minutes between time slots (default: 60) */
+    timeIntervals?: number;
+    /** Return false to disable a time slot */
+    filterTime?: (date: Date) => boolean;
+    /** These times stay disabled */
+    excludeTimes?: Date[];
+    /** Only these times stay enabled */
+    includeTimes?: Date[];
+    /** Month/year shown initially when there's no selected value */
+    defaultViewDate?: Date;
+    /** Disables all interaction */
+    disabled?: boolean;
+    /** Shows a spinner on the trigger and blocks interaction — use while data is loading */
+    isLoading?: boolean;
+    /** Visual feedback state: 'error' | 'success' | 'alert' | 'none' */
+    feedback?: InputFeedback;
+    /** Message shown below the field (e.g. validation error message) */
+    hint?: string;
+    /** Field name — for native submission via <form> */
+    name?: string;
+    /** Required field — shows asterisk and aria-required */
+    required?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/** isRange=true: hasTime and onlyTime are forbidden — they don't make sense in range mode */
+interface DatePickerRangeProps extends DatePickerBase {
+    isRange: true;
+    hasTime?: never;
+    onlyTime?: never;
+    disablePast?: boolean;
+    disableFuture?: boolean;
+    disableToday?: boolean;
+}
+/** onlyTime=true: disablePast, disableFuture, and disableToday are forbidden — there's no calendar */
+interface DatePickerOnlyTimeProps extends DatePickerBase {
+    isRange?: false;
+    onlyTime: true;
+    hasTime?: boolean;
+    disablePast?: never;
+    disableFuture?: never;
+    disableToday?: never;
+}
+/** Default mode (single date): all props available */
+interface DatePickerDefaultProps extends DatePickerBase {
+    isRange?: false;
+    onlyTime?: false;
+    hasTime?: boolean;
+    disablePast?: boolean;
+    disableFuture?: boolean;
+    disableToday?: boolean;
+}
+export type DatePickerProps = DatePickerRangeProps | DatePickerOnlyTimeProps | DatePickerDefaultProps;
+export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
+export default DatePicker;

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

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

package/dist/components/DatePicker/dateUtils.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Returns a Date to use as minDate.
+ * includeToday=true (default): today counts as 1 of the n days.
+ * includeToday=false: combine with disableToday to exclude today.
+ *
+ * lastDays(3)       → minDate = today-2  → [today-2, today-1, today] = 3 days
+ * lastDays(3, false) → minDate = today-3  → with disableToday: [today-3, today-2, today-1] = 3 days
+ */
+export declare function lastDays(n: number, includeToday?: boolean): Date;
+/**
+ * Returns a Date to use as maxDate.
+ * includeToday=true (default): today counts as 1 of the n days.
+ * includeToday=false: combine with disableToday to exclude today.
+ *
+ * nextDays(30)        → maxDate = today+29 → [today, ..., today+29] = 30 days
+ * nextDays(30, false) → maxDate = today+30 → with disableToday: [today+1, ..., today+30] = 30 days
+ */
+export declare function nextDays(n: number, includeToday?: boolean): Date;

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

@@ -0,0 +1,3 @@
+export { DatePicker } from './DatePicker';
+export type { DatePickerProps, DateRange } from './DatePicker';
+export { lastDays, nextDays } from './dateUtils';

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,90 @@
+import React from 'react';
+import { TooltipPosition } from '../Tooltip';
+import './Drawer.css';
+import '../../foundations/Scrollbar/Scrollbar.css';
+export interface DrawerProps {
+    /** Controls visibility. When false, the drawer is unmounted from the DOM */
+    isOpen: boolean;
+    /** Called when the overlay or the close button is clicked */
+    onClose: () => void;
+    /** Drawer title (Bold 24px). Truncated with ellipsis when long */
+    title: string;
+    /** Tooltip text shown on hover of the info icon (ⓘ) beside the title */
+    titleTooltip?: string;
+    /** Position of the title tooltip — default 'bottom' */
+    titleTooltipPosition?: TooltipPosition;
+    /** Side to slide from (default 'right') */
+    placement?: 'right' | 'left';
+    /** When provided, renders a chevron-left button before the title — use for stacked drawers navigation */
+    onBack?: () => void;
+    /** Label of the link-style button rendered in the header, between title and close button. When absent, the button isn't rendered */
+    headerActionLabel?: string;
+    /** Callback for the header action button. When it returns a Promise, the spinner activates automatically until it resolves */
+    onHeaderAction?: () => void | Promise<void>;
+    /** Shows a loading spinner on the header action button. Also activated automatically when onHeaderAction returns a Promise */
+    headerActionLoading?: boolean;
+    /** Disables the header action button */
+    headerActionDisabled?: boolean;
+    /** Tooltip text shown when hovering the disabled header action button */
+    headerActionDisabledTooltip?: string;
+    /** Position of the header action's disabled tooltip — default 'top' */
+    headerActionDisabledTooltipPosition?: TooltipPosition;
+    /** Drawer body content */
+    children?: React.ReactNode;
+    /** Custom footer — overrides built-in footer buttons */
+    footer?: React.ReactNode;
+    /** Primary (filled) action label. When absent, the button isn't rendered */
+    primaryLabel?: string;
+    /** Callback for the primary button. When it returns a Promise, the spinner activates automatically until it resolves */
+    onPrimary?: () => void | Promise<void>;
+    /** Shows a loading spinner on the primary button. Also activated automatically when onPrimary returns a Promise */
+    primaryLoading?: boolean;
+    /** Disables the primary button */
+    primaryDisabled?: boolean;
+    /** Tooltip text shown when hovering the disabled primary button */
+    primaryDisabledTooltip?: string;
+    /** Position of the primary button's disabled tooltip — default 'top' */
+    primaryDisabledTooltipPosition?: TooltipPosition;
+    /** Secondary (outlined) action label. When absent, the button isn't rendered */
+    secondaryLabel?: string;
+    /** Callback for the secondary button. When it returns a Promise, the spinner activates automatically until it resolves */
+    onSecondary?: () => void | Promise<void>;
+    /** Shows a loading spinner on the secondary button. Also activated automatically when onSecondary returns a Promise */
+    secondaryLoading?: boolean;
+    /** Disables the secondary button */
+    secondaryDisabled?: boolean;
+    /** Tooltip text shown when hovering the disabled secondary button */
+    secondaryDisabledTooltip?: string;
+    /** Position of the secondary button's disabled tooltip — default 'top' */
+    secondaryDisabledTooltipPosition?: TooltipPosition;
+    /** Tertiary (link) action label. When absent, the button isn't rendered */
+    tertiaryLabel?: string;
+    /** Callback for the tertiary button. When it returns a Promise, the spinner activates automatically until it resolves */
+    onTertiary?: () => void | Promise<void>;
+    /** Shows a loading spinner on the tertiary button. Also activated automatically when onTertiary returns a Promise */
+    tertiaryLoading?: boolean;
+    /** Disables the tertiary button */
+    tertiaryDisabled?: boolean;
+    /** Tooltip text shown when hovering the disabled tertiary button */
+    tertiaryDisabledTooltip?: string;
+    /** Position of the tertiary button's disabled tooltip — default 'top' */
+    tertiaryDisabledTooltipPosition?: TooltipPosition;
+    /** aria-label for the close button */
+    closeLabel?: string;
+    /** When true, clicking the overlay does not close the drawer. × button and Escape still work */
+    disableOverlayClose?: boolean;
+    /** Show a confirmation dialog before closing */
+    confirmClose?: boolean;
+    /** Confirmation dialog title */
+    confirmTitle?: string;
+    /** Confirmation dialog body message */
+    confirmMessage?: string;
+    /** Confirmation dialog confirm button label */
+    confirmActionLabel?: string;
+    /** Confirmation dialog cancel button label */
+    confirmCancelLabel?: string;
+    /** Extra className on the container */
+    className?: string;
+}
+export declare const Drawer: React.FC<DrawerProps>;
+export default Drawer;

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

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

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

@@ -0,0 +1,2 @@
+export { Drawer } from './Drawer';
+export type { DrawerProps } from './Drawer';

package/dist/components/Field/Field.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { IconElement } from '../Icon/Icon';
+import './Field.css';
+export type FieldSize = 'sm' | 'md' | 'lg';
+export type FieldFeedback = 'none' | 'success' | 'alert' | 'error';
+export type FieldLabelMode = 'float' | 'placeholder';
+/**
+ * Field — primitive for the field shell (like Floating is for Popover).
+ * Mirrors Input's structure: a flex row with 24px icons as children,
+ * floating label or placeholder, and the native control (<input>/<textarea>)
+ * injected as `children` by the consumer (Input, SearchBar). Doesn't know about
+ * search, tags, password, or phone.
+ */
+export interface FieldProps {
+    /** Height: 'lg' = 56px · 'md' = 48px · 'sm' = 40px */
+    size?: FieldSize;
+    /** Label text */
+    label?: string;
+    /** 'float' = label rises on focus/fill · 'placeholder' = disappears on focus/fill */
+    labelMode?: FieldLabelMode;
+    /** Native control's id — connects the label via htmlFor */
+    htmlFor?: string;
+    /** true when the field has a value — controls the label's float/hide */
+    filled?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Shows a spinner in place of iconRight and signals loading */
+    isLoading?: boolean;
+    /** Border color from validation */
+    feedback?: FieldFeedback;
+    /** Left icon */
+    iconLeft?: IconElement;
+    /** Right icon */
+    iconRight?: IconElement;
+    /** Makes iconRight clickable (hover + cursor) */
+    onClickIconRight?: () => void;
+    /** aria-label for iconRight when clickable (e.g. "Clear search") */
+    iconRightLabel?: string;
+    /** Native control (<input> / <textarea>) — with className="kdls-field__input" */
+    children: React.ReactNode;
+    /** Additional CSS class on the root element */
+    className?: string;
+}
+export declare function Field({ size, label, labelMode, htmlFor, filled, disabled, isLoading, feedback, iconLeft, iconRight, onClickIconRight, iconRightLabel, children, className, }: FieldProps): import("react/jsx-runtime").JSX.Element;

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

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

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

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

package/dist/components/Floating/Floating.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import './Floating.css';
+export type FloatingPlacement = 'top' | 'topLeft' | 'topRight' | 'right' | 'rightTop' | 'rightBottom' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom';
+export type FloatingTriggerMode = 'click' | 'hover' | 'focus' | 'contextMenu';
+export interface FloatingProps {
+    children: React.ReactNode;
+    content: React.ReactNode | ((activePlacement: FloatingPlacement) => React.ReactNode);
+    placement?: FloatingPlacement;
+    gap?: number;
+    trigger?: FloatingTriggerMode | FloatingTriggerMode[];
+    mouseEnterDelay?: number;
+    mouseLeaveDelay?: number;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    defaultOpen?: boolean;
+    destroyOnClose?: boolean;
+    getPopupContainer?: () => HTMLElement;
+    zIndex?: number;
+    matchTriggerWidth?: boolean;
+    className?: string;
+    openClassName?: string;
+    triggerClassName?: string;
+}
+export declare const Floating: React.FC<FloatingProps>;
+export default Floating;

package/dist/components/Form/Form.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export type FormValidateOn = 'change' | 'blur' | 'submit';
+export interface FormContextValue {
+    validateOn: FormValidateOn;
+    submitted: boolean;
+}
+export declare const FormContext: React.Context<FormContextValue>;
+export declare function useFormContext(): FormContextValue;
+export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
+    /** Defines when child inputs' validation rules are evaluated */
+    validateOn?: FormValidateOn;
+}
+export declare function Form({ validateOn, onSubmit, children, ...rest }: FormProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,3 @@
+export { Form } from './Form';
+export type { FormProps, FormValidateOn, FormContextValue } from './Form';
+export { useFormContext } from './Form';

package/dist/components/Grid/Grid.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import './Grid.css';
+export type SpacingScale = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 14 | 16;
+export interface GridProps {
+    /** Number of columns (default: 12) */
+    cols?: 1 | 2 | 3 | 4 | 6 | 12;
+    /** Uniform gap — DS spacing scale (default: 4 = 16px) */
+    gap?: SpacingScale;
+    /** Vertical gap — DS spacing scale (overrides gap) */
+    rowGap?: SpacingScale;
+    /** Horizontal gap — DS spacing scale (overrides gap) */
+    colGap?: SpacingScale;
+    /** Vertical alignment of items */
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    className?: string;
+    children?: React.ReactNode;
+}
+export interface ColProps {
+    /** Default span: 1–12 (default: 12) */
+    span?: number;
+    /** Span at xs — < 800px */
+    xs?: number;
+    /** Span at sm — 800px+ */
+    sm?: number;
+    /** Span at md — 1024px+ */
+    md?: number;
+    /** Span at lg — 1280px+ */
+    lg?: number;
+    /** Span at xl — 1440px+ */
+    xl?: number;
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare function Grid({ cols, gap, rowGap, colGap, align, className, children, }: GridProps): import("react/jsx-runtime").JSX.Element;
+export declare function Col({ span, xs, sm, md, lg, xl, className, children, }: ColProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Grid, Col } from './Grid';
+export type { GridProps, ColProps, SpacingScale } from './Grid';

package/dist/components/Header/Header.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import './Header.css';
+import type { KenloLogoProduct } from '../KenloLogo';
+import '../../foundations/Scrollbar/Scrollbar.css';
+export interface HeaderNavItem {
+    label: string;
+    href?: string;
+    isNew?: boolean;
+    children?: {
+        label: string;
+        href?: string;
+    }[];
+    onClick?: () => void;
+}
+export interface HeaderNotification {
+    id: string;
+    title: string;
+    description?: string;
+    time: string;
+    read?: boolean;
+}
+export interface HeaderProps {
+    /** Kenlo product that determines the logo */
+    product?: KenloLogoProduct;
+    /** Main navigation items */
+    navItems?: HeaderNavItem[];
+    /** Active items (by label) */
+    activeNav?: string;
+    /** Notifications */
+    notifications?: HeaderNotification[];
+    onClearNotifications?: () => void;
+    /** User data */
+    user?: {
+        name: string;
+        code?: string;
+        company?: string;
+        avatarSrc?: string;
+        initials?: string;
+    };
+    /** Slot for context selector (unit/site) */
+    contextSelector?: React.ReactNode;
+    /** FAQs callback */
+    onFAQs?: () => void;
+    showFAQs?: boolean;
+    className?: string;
+}
+export declare const Header: React.FC<HeaderProps>;
+export default Header;

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

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

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

@@ -0,0 +1,2 @@
+export { Header } from './Header';
+export type { HeaderProps, HeaderNavItem, HeaderNotification } from './Header';

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import './Icon.css';
+/** An already-instantiated icon element — from @fluentui/react-icons (e.g. <SearchRegular />),
+ *  a KDLS custom icon (e.g. <LyaEditorIcon />), or the consumer's own SVG. */
+export type IconElement = React.ReactElement;
+/** Any color-family token that follows the `--color-{family}-{step}` scale — same set and
+ *  same order used everywhere else in the DS (tokens.scss / tokens-reference.md). */
+export type IconColor = 'neutral' | 'primary' | 'secondary' | 'tertiary' | 'lya' | 'success' | 'alert' | 'error' | 'leaf' | 'sand' | 'wood' | 'clay' | 'flower' | 'dusk' | 'sky' | 'sea' | 'lake';
+export interface IconProps {
+    /** Icon element to render — e.g. <SearchRegular /> (@fluentui/react-icons) or <LyaEditorIcon /> (KDLS) */
+    icon: IconElement;
+    /** Size: 'sm' 16px · 'md' 24px (default) · 'lg' 32px */
+    size?: 'sm' | 'md' | 'lg';
+    /** Solid color from any scheme color-family token (e.g. "dusk", "error") — resolves to that
+     *  family's -50 step. `color="lya"` is the one special case: activates the Lya gradient
+     *  instead of a solid fill. For anything outside these families, use `style` instead. */
+    color?: IconColor;
+    /** Accessible label — use when the icon carries meaning with no visible text next to it */
+    'aria-label'?: string;
+    /** Custom ARIA role for interactive icons */
+    role?: string;
+    /** When passed, the icon becomes clickable (cursor pointer) */
+    onClick?: React.MouseEventHandler<HTMLSpanElement>;
+    /** Additional inline style (e.g. cursor, or any color outside the `IconColor` families) */
+    style?: React.CSSProperties;
+    /** Hides the icon from assistive technology — use on purely decorative icons */
+    'aria-hidden'?: boolean;
+    /** Additional CSS class */
+    className?: string;
+}
+export declare const Icon: React.FC<IconProps>;

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

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

package/dist/components/Icon/custom/index.d.ts

@@ -0,0 +1,10 @@
+interface CustomIconProps {
+    className?: string;
+}
+export declare function VideoHorizontalFilled({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function VideoHorizontalRegular({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function VideoTour3DFilled({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function VideoTour3DRegular({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function VideoVerticalFilled({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function VideoVerticalRegular({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/products/index.d.ts

@@ -0,0 +1,27 @@
+interface CustomIconProps {
+    className?: string;
+}
+export declare function KenloKFilled({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function KenloKRegular({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function LeadDoubleFilled({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function LeadDoubleRegular({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function LeadInfoFilled({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function LeadInfoRegular({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function LeadSingleFilled({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function LeadSingleRegular({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function LeadUndefinedFilled({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function LeadUndefinedRegular({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function LeadVerifiedFilled({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function LeadVerifiedRegular({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function LyaDoubleFilled({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function LyaDoubleRegular({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function LyaEditor({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function LyaFichaLimpa({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function LyaKoin({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function LyaOmni({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function LyaOraculo({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function LyaSdr({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function LyaSingleFilled({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function LyaSingleRegular({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function LyaStudio({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/social/index.d.ts

@@ -0,0 +1,24 @@
+interface CustomIconProps {
+    className?: string;
+}
+export declare function Facebook({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function FacebookColor({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function Google({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function GoogleColor({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function Instagram({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function InstagramColor({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function LinkedIn({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function LinkedInColor({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function Messenger({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function MessengerColor({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function Pinterest({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function PinterestColor({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function Telegram({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function TelegramColor({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function WhatsApp({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function WhatsAppColor({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function X({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function XColor({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function YouTube({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function YouTubeColor({ className }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/IconButton/IconButton.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import './IconButton.css';
+import { IconElement } from '../Icon/Icon';
+export type IconButtonSize = 'sm' | 'md' | 'lg';
+export interface IconButtonProps {
+    /** Icon to display — e.g. <DeleteRegular /> */
+    icon: IconElement;
+    /** Callback fired when clicking the button. Not called when disabled or isLoading are active */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /** 'primary' = theme color (default) · 'neutral' = gray. Use 'neutral' for chevrons and secondary actions */
+    variant?: 'neutral' | 'primary';
+    /** Click-area size — 'sm' 32px (default) · 'md' 40px · 'lg' 48px. The icon itself is always 24px */
+    size?: IconButtonSize;
+    /** Shows a spinner in place of the icon and blocks clicks while an async action is in progress */
+    isLoading?: boolean;
+    /** Disabled state — only the icon color changes to neutral-40, the background is never touched */
+    disabled?: boolean;
+    /** Accessible label — required: there's no way to derive an automatic label from an arbitrary icon */
+    'aria-label': string;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const IconButton: React.FC<IconButtonProps>;
+export default IconButton;

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

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

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

@@ -0,0 +1,2 @@
+export { IconButton } from './IconButton';
+export type { IconButtonProps, IconButtonSize } from './IconButton';