@kenlo/kdls-design-system 2.0.2 → 2.0.5

package/README.md

@@ -24,4 +24,4 @@ Os tokens ficam em `foundations/tokens.css` como CSS custom properties (`var(--s
 
 ## Status
 
-Em construção — ainda não publicado no npm.
+Publicado no npm como [`@kenlo/kdls-design-system`](https://www.npmjs.com/package/@kenlo/kdls-design-system).

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/Theme/Theme.d.ts

@@ -0,0 +1,11 @@
+export type ColorScheme = 'primary' | 'neutral' | 'secondary' | 'tertiary' | 'lya' | 'leaf' | 'sand' | 'wood' | 'clay' | 'flower' | 'dusk' | 'sky' | 'sea' | 'lake';
+export type RadiusScheme = 'default' | 'soft' | 'flat' | 'rounded';
+export type FontScheme = 'manrope' | 'inter' | 'helvetica' | 'source-sans' | 'nunito' | 'montserrat';
+export type ThemeMode = 'light' | 'dark' | 'system';
+export interface KdlsConfig {
+    theme?: ThemeMode;
+    colorScheme?: ColorScheme;
+    radius?: RadiusScheme;
+    font?: FontScheme;
+}
+export declare function configureKdls(config: KdlsConfig, root?: HTMLElement): void;

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

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

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

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

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
 import '../foundations/tokens.css';
 export * from './ColorScheme';
+export * from './Theme';
 export * from './Form';
 export * from './Accordion';
 export * from './AccordionGroup';