dhre-component-lib 0.8.31 → 0.9.0

package/dist/components/Button/ButtonV2.d.ts

@@ -0,0 +1,60 @@
+import React from "react";
+import "./ButtonV2.module.scss";
+/**
+ * `primary` / `secondary` → text buttons (Buttons/Regular)
+ * `dark` / `light` / `blur` / `outlined` → icon-only buttons (Buttons/Icon)
+ *
+ * The icon-only variants are only meaningful when `iconOnly` is true.
+ */
+export type ButtonV2Variant = "primary" | "secondary" | "dark" | "light" | "blur" | "outlined";
+/** `xsmall` is only valid in `iconOnly` mode. Text buttons stop at `small`. */
+export type ButtonV2Size = "large" | "medium" | "small" | "xsmall";
+export interface ButtonV2Props extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+    /** Visible label. If you need richer markup, use `children` instead. Ignored when `iconOnly`. */
+    label?: React.ReactNode;
+    /**
+     * Visual style.
+     * - Text buttons: `primary` (filled) | `secondary` (outlined). Defaults to `primary`.
+     * - Icon-only buttons (when `iconOnly` is true): `dark` | `light` | `blur` | `outlined`.
+     *   If `iconOnly` is set and no variant is provided, defaults to `dark`.
+     */
+    variant?: ButtonV2Variant;
+    /**
+     * Height tier.
+     * - Text buttons: large (48) / medium (40) / small (32). Defaults to `large`.
+     * - Icon-only buttons: large (64) / medium (48) / small (32) / xsmall (20).
+     */
+    size?: ButtonV2Size;
+    /** When true, renders a spinner and blocks interaction. */
+    loading?: boolean;
+    /** Standard HTML disabled. */
+    disabled?: boolean;
+    /** Stretches the button to 100% of its container, always. Ignored when `iconOnly`. */
+    fullWidth?: boolean;
+    /**
+     * Text mode: stretches to 100% on viewports <= 600px (mobile-only).
+     * Icon-only mode: steps the button down to the next-smaller size on viewports <= 600px
+     * (Large → Medium, Medium → Small). Use to honor the "scales with breakpoint" spec.
+     */
+    responsiveFullWidth?: boolean;
+    /** Optional leading icon (start-side, auto-flips in RTL). Ignored when `iconOnly`. */
+    leadIcon?: React.ReactNode;
+    /** Optional trailing icon (end-side, auto-flips in RTL). Ignored when `iconOnly`. */
+    trailIcon?: React.ReactNode;
+    /**
+     * Required when `iconOnly` is true — the single icon rendered centered in the
+     * circular button. Ignored in text mode.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Switches the button to icon-only mode: square, fully circular, no label.
+     * Pair with one of the icon-only variants (`dark` / `light` / `blur` / `outlined`)
+     * and pass an `aria-label` for accessibility.
+     */
+    iconOnly?: boolean;
+    /** HTML button type. Renamed from native `type` to avoid clashing with `variant`. */
+    buttonType?: "button" | "submit" | "reset";
+    className?: string;
+}
+declare const ButtonV2: React.ForwardRefExoticComponent<ButtonV2Props & React.RefAttributes<HTMLButtonElement>>;
+export default ButtonV2;

package/dist/components/Dropdown/Dropdown.d.ts

@@ -18,6 +18,7 @@ export interface DropdownProps {
     searchPlaceholder?: string;
     noResultsText?: string;
     searchClearIcon?: React.ReactNode;
+    isLifestyle?: boolean;
 }
 declare function Dropdown(props: DropdownProps): React.JSX.Element;
 export default Dropdown;

package/dist/components/Modal/ModalV2.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import "./ModalV2.module.scss";
+export interface ModalV2Props {
+    /** Controls modal visibility */
+    isOpen: boolean;
+    /** Callback fired when overlay or close button is clicked */
+    onClose: () => void;
+    /**
+     * Modal heading content.
+     * Figma: H5/MEDIUM on desktop (24px / lh 32px), H6/MEDIUM on mobile (20px / lh 28px).
+     * The consumer should pass a Typography component with the correct variant.
+     */
+    title?: React.ReactNode;
+    /** Body content rendered inside the scrollable content area */
+    children: React.ReactNode;
+    /**
+     * Close icon element (e.g. an SVG wrapped in BrandedSvg).
+     * Rendered inline in the header row alongside the title.
+     */
+    crossIcon: React.ReactNode;
+    /** Optional extra className applied to the modal container for consumer overrides */
+    className?: string;
+}
+declare const ModalV2: React.FC<ModalV2Props>;
+export default ModalV2;

package/dist/components/Search/SearchV2.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import "./SearchV2.module.scss";
+export type SearchV2Size = "large" | "small";
+export type SearchV2Suggestion = {
+    id: string | number;
+    title: string;
+};
+export interface SearchV2Props<T extends SearchV2Suggestion = SearchV2Suggestion> {
+    placeholder: string;
+    searchIcon: React.ReactNode;
+    crossIcon: React.ReactNode;
+    onSearch: (query: string) => void;
+    value?: string;
+    defaultValue?: string;
+    size?: SearchV2Size;
+    disabled?: boolean;
+    suggestions?: T[] | null;
+    onSelectSuggestion?: (suggestion: T | null) => void;
+    shouldShowAll?: boolean;
+    noResultFoundText?: string;
+    debounceMs?: number;
+    className?: string;
+    inputClassName?: string;
+    suggestionClassName?: string;
+    onSearchIconClick?: () => void;
+    onHandleClear?: () => void;
+}
+declare function SearchV2<T extends SearchV2Suggestion = SearchV2Suggestion>({ placeholder, searchIcon, crossIcon, onSearch, value: controlledValue, defaultValue, size, disabled, suggestions, onSelectSuggestion, shouldShowAll, noResultFoundText, debounceMs, className, inputClassName, suggestionClassName, onSearchIconClick, onHandleClear, }: SearchV2Props<T>): React.JSX.Element;
+export default SearchV2;

package/dist/components/Typography/Typography.d.ts

@@ -1,8 +1,24 @@
 import React from 'react';
 import '../../theme/Typography/typography.scss';
+import '../../theme/Typography/lifestyle-lib-typography.scss';
+/**
+ * Weight values and what they mean per brand:
+ *
+ * | Prop      | Meraas/DP/Nakheel | Lifestyle (Inter) |
+ * |-----------|-------------------|-------------------|
+ * | BOLD      | 700               | 700 (Inter-Bold)  |
+ * | SEMI_BOLD | 400               | 500 (Inter-Medium)|
+ * | MEDIUM    | 300               | 500 (Inter-Light) |
+ * | REGULAR   | 400               | 400 (Inter-Regular|
+ * | LIGHT     | 300               | 300 (Inter-Light) |
+ *
+ * No runtime brand detection needed — CSS handles switching via body.Lifestyle class.
+ */
+type TypographyVariant = 'H1' | 'H2' | 'H3' | 'H4' | 'H5' | 'H6' | 'H7' | 'H8' | 'B1' | 'B2' | 'B3' | 'B4' | 'L1' | 'L2' | 'L3';
+type TypographyWeight = 'BOLD' | 'SEMI_BOLD' | 'MEDIUM' | 'REGULAR' | 'LIGHT';
 interface TypographyProps {
-    variant?: 'H1' | 'H2' | 'H3' | 'H4' | 'H5' | 'H6' | 'H7' | 'H8' | 'B1' | 'B2' | 'B3' | 'B4' | 'L1' | 'L2' | 'L3';
-    weight?: 'BOLD' | 'SEMI_BOLD' | 'MEDIUM';
+    variant?: TypographyVariant;
+    weight?: TypographyWeight;
     children: React.ReactNode;
     className?: string;
 }

package/dist/index.d.ts

@@ -47,6 +47,64 @@ type ButtonProps = {
 };
 declare const Button: React.FC<ButtonProps>;
 
+/**
+ * `primary` / `secondary` → text buttons (Buttons/Regular)
+ * `dark` / `light` / `blur` / `outlined` → icon-only buttons (Buttons/Icon)
+ *
+ * The icon-only variants are only meaningful when `iconOnly` is true.
+ */
+type ButtonV2Variant = "primary" | "secondary" | "dark" | "light" | "blur" | "outlined";
+/** `xsmall` is only valid in `iconOnly` mode. Text buttons stop at `small`. */
+type ButtonV2Size = "large" | "medium" | "small" | "xsmall";
+interface ButtonV2Props extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+    /** Visible label. If you need richer markup, use `children` instead. Ignored when `iconOnly`. */
+    label?: React.ReactNode;
+    /**
+     * Visual style.
+     * - Text buttons: `primary` (filled) | `secondary` (outlined). Defaults to `primary`.
+     * - Icon-only buttons (when `iconOnly` is true): `dark` | `light` | `blur` | `outlined`.
+     *   If `iconOnly` is set and no variant is provided, defaults to `dark`.
+     */
+    variant?: ButtonV2Variant;
+    /**
+     * Height tier.
+     * - Text buttons: large (48) / medium (40) / small (32). Defaults to `large`.
+     * - Icon-only buttons: large (64) / medium (48) / small (32) / xsmall (20).
+     */
+    size?: ButtonV2Size;
+    /** When true, renders a spinner and blocks interaction. */
+    loading?: boolean;
+    /** Standard HTML disabled. */
+    disabled?: boolean;
+    /** Stretches the button to 100% of its container, always. Ignored when `iconOnly`. */
+    fullWidth?: boolean;
+    /**
+     * Text mode: stretches to 100% on viewports <= 600px (mobile-only).
+     * Icon-only mode: steps the button down to the next-smaller size on viewports <= 600px
+     * (Large → Medium, Medium → Small). Use to honor the "scales with breakpoint" spec.
+     */
+    responsiveFullWidth?: boolean;
+    /** Optional leading icon (start-side, auto-flips in RTL). Ignored when `iconOnly`. */
+    leadIcon?: React.ReactNode;
+    /** Optional trailing icon (end-side, auto-flips in RTL). Ignored when `iconOnly`. */
+    trailIcon?: React.ReactNode;
+    /**
+     * Required when `iconOnly` is true — the single icon rendered centered in the
+     * circular button. Ignored in text mode.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Switches the button to icon-only mode: square, fully circular, no label.
+     * Pair with one of the icon-only variants (`dark` / `light` / `blur` / `outlined`)
+     * and pass an `aria-label` for accessibility.
+     */
+    iconOnly?: boolean;
+    /** HTML button type. Renamed from native `type` to avoid clashing with `variant`. */
+    buttonType?: "button" | "submit" | "reset";
+    className?: string;
+}
+declare const ButtonV2: React.ForwardRefExoticComponent<ButtonV2Props & React.RefAttributes<HTMLButtonElement>>;
+
 interface AvatarProps {
     src: string;
     alt: string;
@@ -221,9 +279,24 @@ interface OTPInputProps {
 }
 declare const OTPInput: React.FC<OTPInputProps>;
 
+/**
+ * Weight values and what they mean per brand:
+ *
+ * | Prop      | Meraas/DP/Nakheel | Lifestyle (Inter) |
+ * |-----------|-------------------|-------------------|
+ * | BOLD      | 700               | 700 (Inter-Bold)  |
+ * | SEMI_BOLD | 400               | 500 (Inter-Medium)|
+ * | MEDIUM    | 300               | 500 (Inter-Light) |
+ * | REGULAR   | 400               | 400 (Inter-Regular|
+ * | LIGHT     | 300               | 300 (Inter-Light) |
+ *
+ * No runtime brand detection needed — CSS handles switching via body.Lifestyle class.
+ */
+type TypographyVariant = 'H1' | 'H2' | 'H3' | 'H4' | 'H5' | 'H6' | 'H7' | 'H8' | 'B1' | 'B2' | 'B3' | 'B4' | 'L1' | 'L2' | 'L3';
+type TypographyWeight = 'BOLD' | 'SEMI_BOLD' | 'MEDIUM' | 'REGULAR' | 'LIGHT';
 interface TypographyProps {
-    variant?: 'H1' | 'H2' | 'H3' | 'H4' | 'H5' | 'H6' | 'H7' | 'H8' | 'B1' | 'B2' | 'B3' | 'B4' | 'L1' | 'L2' | 'L3';
-    weight?: 'BOLD' | 'SEMI_BOLD' | 'MEDIUM';
+    variant?: TypographyVariant;
+    weight?: TypographyWeight;
     children: React.ReactNode;
     className?: string;
 }
@@ -257,6 +330,33 @@ interface CustomSearchFieldProps {
 }
 declare const Search: React.FC<CustomSearchFieldProps>;
 
+type SearchV2Size = "large" | "small";
+type SearchV2Suggestion = {
+    id: string | number;
+    title: string;
+};
+interface SearchV2Props<T extends SearchV2Suggestion = SearchV2Suggestion> {
+    placeholder: string;
+    searchIcon: React.ReactNode;
+    crossIcon: React.ReactNode;
+    onSearch: (query: string) => void;
+    value?: string;
+    defaultValue?: string;
+    size?: SearchV2Size;
+    disabled?: boolean;
+    suggestions?: T[] | null;
+    onSelectSuggestion?: (suggestion: T | null) => void;
+    shouldShowAll?: boolean;
+    noResultFoundText?: string;
+    debounceMs?: number;
+    className?: string;
+    inputClassName?: string;
+    suggestionClassName?: string;
+    onSearchIconClick?: () => void;
+    onHandleClear?: () => void;
+}
+declare function SearchV2<T extends SearchV2Suggestion = SearchV2Suggestion>({ placeholder, searchIcon, crossIcon, onSearch, value: controlledValue, defaultValue, size, disabled, suggestions, onSelectSuggestion, shouldShowAll, noResultFoundText, debounceMs, className, inputClassName, suggestionClassName, onSearchIconClick, onHandleClear, }: SearchV2Props<T>): React.JSX.Element;
+
 interface ModalProps {
     isOpen: boolean;
     onClose: () => void;
@@ -267,6 +367,29 @@ interface ModalProps {
 }
 declare const Modal: React.FC<ModalProps>;
 
+interface ModalV2Props {
+    /** Controls modal visibility */
+    isOpen: boolean;
+    /** Callback fired when overlay or close button is clicked */
+    onClose: () => void;
+    /**
+     * Modal heading content.
+     * Figma: H5/MEDIUM on desktop (24px / lh 32px), H6/MEDIUM on mobile (20px / lh 28px).
+     * The consumer should pass a Typography component with the correct variant.
+     */
+    title?: React.ReactNode;
+    /** Body content rendered inside the scrollable content area */
+    children: React.ReactNode;
+    /**
+     * Close icon element (e.g. an SVG wrapped in BrandedSvg).
+     * Rendered inline in the header row alongside the title.
+     */
+    crossIcon: React.ReactNode;
+    /** Optional extra className applied to the modal container for consumer overrides */
+    className?: string;
+}
+declare const ModalV2: React.FC<ModalV2Props>;
+
 type AccordionProps = {
     icon?: React.ReactNode;
     title: React.ReactNode;
@@ -313,6 +436,7 @@ interface DropdownProps {
     searchPlaceholder?: string;
     noResultsText?: string;
     searchClearIcon?: React.ReactNode;
+    isLifestyle?: boolean;
 }
 declare function Dropdown(props: DropdownProps): React.JSX.Element;
 
@@ -432,4 +556,5 @@ interface StepperInterface {
 }
 declare const Stepper: React.FC<StepperInterface>;
 
-export { Accordion as Accordian, Avatar, Badge, Breadcrumb as BreadCrumb, Button, ButtonCategory, Carousel, Checkbox, CircularProgress, GetDirectionAction as Directions, CustomDivider as Divider, Drawer, Dropdown, MapComponent as GoogleMap, HoverOptionsWrapper, CustomInputField as InputTextField, Link, MediaType, Menu, Modal, OTPInput as OtpInput, Progress, CustomRadioButton as RadioButton, RangeSlider, Search, Stepper, Tabs, TextArea, Toast, ToastStatus, ToggleSwitch, Typography, PdfView as default };
+export { Accordion as Accordian, Avatar, Badge, Breadcrumb as BreadCrumb, Button, ButtonCategory, ButtonV2, Carousel, Checkbox, CircularProgress, GetDirectionAction as Directions, CustomDivider as Divider, Drawer, Dropdown, MapComponent as GoogleMap, HoverOptionsWrapper, CustomInputField as InputTextField, Link, MediaType, Menu, Modal, ModalV2, OTPInput as OtpInput, Progress, CustomRadioButton as RadioButton, RangeSlider, Search, SearchV2, Stepper, Tabs, TextArea, Toast, ToastStatus, ToggleSwitch, Typography, PdfView as default };
+export type { ButtonV2Props, ButtonV2Size, ButtonV2Variant, ModalV2Props, SearchV2Props, SearchV2Size, SearchV2Suggestion };