@kenlo/kdls-design-system 2.0.3 → 2.5.1

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import './Header.css';
 import type { KenloLogoProduct } from '../KenloLogo';
+import { IconElement } from '../Icon/Icon';
 import '../../foundations/Scrollbar/Scrollbar.css';
 export interface HeaderNavItem {
     label: string;
@@ -9,6 +10,7 @@ export interface HeaderNavItem {
     children?: {
         label: string;
         href?: string;
+        onClick?: () => void;
     }[];
     onClick?: () => void;
 }
@@ -19,6 +21,18 @@ export interface HeaderNotification {
     time: string;
     read?: boolean;
 }
+export interface HeaderProduct {
+    label: string;
+    icon?: IconElement;
+    href?: string;
+    active?: boolean;
+    onClick?: () => void;
+}
+export interface HeaderProfileMenuItem {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+}
 export interface HeaderProps {
     /** Kenlo product that determines the logo */
     product?: KenloLogoProduct;
@@ -29,6 +43,8 @@ export interface HeaderProps {
     /** Notifications */
     notifications?: HeaderNotification[];
     onClearNotifications?: () => void;
+    /** Cross-product navigation list — the grid button only renders when there's more than 1 item (a single item means the product being viewed is the only destination) */
+    products?: HeaderProduct[];
     /** User data */
     user?: {
         name: string;
@@ -39,9 +55,19 @@ export interface HeaderProps {
     };
     /** Slot for context selector (unit/site) */
     contextSelector?: React.ReactNode;
+    /** Free slot on the right, before the avatar — e.g. a version badge */
+    rightSlot?: React.ReactNode;
+    /** Items shown in the profile menu (desktop dropdown + mobile menu), below the user info. Customizable per product — empty by default, nothing decorative is assumed. */
+    profileMenuItems?: HeaderProfileMenuItem[];
+    /** Logout action — renders as the last row (danger-styled) in both the desktop profile panel and the mobile menu. Hidden entirely when omitted. */
+    onLogout?: () => void;
+    /** Label for the logout row — default 'Sair' */
+    logoutLabel?: string;
     /** FAQs callback */
     onFAQs?: () => void;
     showFAQs?: boolean;
+    /** Hides the notifications bell — use when the product has no notifications concept */
+    showNotifications?: boolean;
     className?: string;
 }
 export declare const Header: React.FC<HeaderProps>;

package/dist/components/Select/Select.d.ts

@@ -112,6 +112,18 @@ export type SelectPillWithIcon = SelectBase & SelectWidthProps & SelectNoFormPro
     label?: string;
     iconLeft: IconElement;
 };
-export type SelectProps = SelectInputProps | SelectPillWithLabel | SelectPillWithIcon;
+/** trigger="nav" with label — iconLeft optional, no form props. Visually matches a Nav.Item / Menu navButton — use to build a dropdown that must blend into a Header or Nav row instead of looking like a form field. */
+export type SelectNavWithLabel = SelectBase & SelectWidthProps & SelectNoFormProps & {
+    trigger: 'nav';
+    label: string;
+    iconLeft?: IconElement;
+};
+/** trigger="nav" with icon — label optional, no form props */
+export type SelectNavWithIcon = SelectBase & SelectWidthProps & SelectNoFormProps & {
+    trigger: 'nav';
+    label?: string;
+    iconLeft: IconElement;
+};
+export type SelectProps = SelectInputProps | SelectPillWithLabel | SelectPillWithIcon | SelectNavWithLabel | SelectNavWithIcon;
 export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;
 export default Select;

package/dist/components/Table/Table.d.ts

@@ -19,6 +19,13 @@ export interface TableColumn<T = Record<string, unknown>> {
     ellipsis?: boolean;
     /** true = sortable, sorting done by the backend (the component only reports state via onSortChange, doesn't reorder `rows`) · function = sorts on the frontend using this comparator — handle dates and numbers inside it, don't let the component guess the type */
     sortable?: boolean | ((a: T, b: T) => number);
+    /**
+     * Marks this column as a mobile-only action slot — has no effect above the mobile
+     * breakpoint. `'link'` pulls it out of the stack into a final row shared with any other
+     * `'link'` columns (one button: left-aligned; more than one: split evenly). `'icon'`
+     * (e.g. a chevron or a ••• menu) pins it to the row's top-right corner instead.
+     */
+    mobileAction?: 'link' | 'icon';
     /** Custom cell rendering — when omitted, displays row[key] directly */
     render?: (value: unknown, row: T, index: number) => React.ReactNode;
 }
@@ -31,6 +38,13 @@ export interface TableProps<T extends Record<string, unknown> = Record<string, u
     columns: TableColumn<T>[];
     /** Row data */
     rows: T[];
+    /**
+     * Layout of the table. `'default'` is a flush list — rows have no radius, no gap
+     * between them, divided by a top border only. `'cardLines'` keeps each row as an
+     * individual card instead (own border, radius, gap, plus the container's own padding).
+     * Background, the theme's radius and the bordered stroke behave the same in both.
+     */
+    variant?: 'default' | 'cardLines';
     /**
      * Shows a 1px neutral-20 border around the component. `false` by default.
      * Use `true` when the surrounding background matches the Table's background (--color-neutral-00) —