@nimbus-ds/components 5.50.0 → 5.51.0

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 // Generated by dts-bundle-generator v7.2.0
 
 import React from 'react';
-import { ButtonHTMLAttributes, ComponentPropsWithRef, DragEvent, HTMLAttributes, ImgHTMLAttributes, InputHTMLAttributes, OptgroupHTMLAttributes, OptionHTMLAttributes, PropsWithChildren, ReactElement, ReactNode, SVGAttributes } from 'react';
+import { ButtonHTMLAttributes, ComponentPropsWithRef, DragEvent, HTMLAttributes, ImgHTMLAttributes, InputHTMLAttributes, OptgroupHTMLAttributes, OptionHTMLAttributes, PropsWithChildren, ReactElement, ReactNode, RefObject, SVGAttributes } from 'react';
 
 export interface SkeletonProperties {
 	/**
@@ -109,10 +109,7 @@ declare const propertiesBox: {
 	gap: {
 		none: string;
 		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
-		 * The display property sets whether an box is treated as a block or inline element and the layout used for its children,
-		 * such as grid or flex.
-		 */
+		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -136,10 +133,7 @@ declare const propertiesBox: {
 	gridGap: {
 		none: string;
 		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
-		 * The display property sets whether an box is treated as a block or inline element and the layout used for its children,
-		 * such as grid or flex.
-		 */
+		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -164,10 +158,7 @@ declare const propertiesBox: {
 	flexDirection: FlexDirection[];
 	flexWrap: FlexWrap[];
 	justifyContent: JustifyContent[];
-	alignItems: AlignItems[]; /**
-	 * The boxSizing property sets how the total width and height of an box is calculated.
-	 * @default border-box
-	 */
+	alignItems: AlignItems[];
 	alignSelf: AlignSelf[];
 	pointerEvents: PointerEvents[];
 	backgroundColor: {
@@ -241,7 +232,9 @@ declare const propertiesBox: {
 		"success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
+		 * The gridTemplateAreas property specifies named grid areas, establishing the cells in the grid and assigning them names.
+		 */
 		"danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -275,14 +268,13 @@ declare const propertiesBox: {
 	};
 	borderStyle: BorderStyle[];
 	boxSizing: BoxSizing[];
-	cursor: Cursor[];
+	cursor: Cursor[]; /**
+	 * The padding properties are used to generate space around an box's content area.
+	 */
 	spacing: {
 		none: string;
 		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
-		 * The display property sets whether an box is treated as a block or inline element and the layout used for its children,
-		 * such as grid or flex.
-		 */
+		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -305,10 +297,7 @@ declare const propertiesBox: {
 	};
 	margin: {
 		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
-		 * The display property sets whether an box is treated as a block or inline element and the layout used for its children,
-		 * such as grid or flex.
-		 */
+		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -364,9 +353,7 @@ declare const propertiesBox: {
 		"800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 	};
-	textAlign: TextAlign[]; /**
-	 * The paddingLeft property sets the width of the padding area to the left of an box.
-	 */
+	textAlign: TextAlign[];
 	fontWeight: {
 		regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -374,10 +361,7 @@ declare const propertiesBox: {
 	};
 	fontSize: {
 		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
-		 * The display property sets whether an box is treated as a block or inline element and the layout used for its children,
-		 * such as grid or flex.
-		 */
+		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -401,17 +385,12 @@ declare const propertiesBox: {
 		h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
-		 * This defines the ability for a flex item to grow if necessary.
-		 */
+		h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 	};
 	lineHeight: {
 		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
-		 * The display property sets whether an box is treated as a block or inline element and the layout used for its children,
-		 * such as grid or flex.
-		 */
+		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -431,9 +410,7 @@ declare const propertiesBox: {
 		"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
-		 * The flexWrap property sets whether flex items are forced onto one line or can wrap onto multiple lines.
-		 */
+		h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -989,9 +966,7 @@ export interface IconButtonSprinkle {
 declare const propertiesText: {
 	color: {
 		"ai-generative": "transparent";
-		currentColor: string; /**
-		 * The amount of lines at which the text will be trimmed, showing an ellipsis when overflowed.
-		 */
+		currentColor: string;
 		"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -1028,7 +1003,9 @@ declare const propertiesText: {
 	};
 	fontSize: {
 		caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
+		 * The overflow property specifies what happens if content overflows an element's box.
+		 */
 		highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 	};
 	wordBreak: WordBreak[];
@@ -2818,7 +2795,7 @@ export interface LinkProperties {
 	 * The textDecoration property specifies the decoration added to link.
 	 * @default neutral
 	 */
-	textDecoration?: typeof link.properties.textDecoration[number];
+	textDecoration?: (typeof link.properties.textDecoration)[number];
 	/**
 	 * The fontSize property sets the size of the link.
 	 * @default base
@@ -3359,7 +3336,7 @@ export interface ThumbnailProperties {
 	 * Permitted aspect ratios for the size of the thumbnail image.
 	 * @default 1/1
 	 */
-	aspectRatio?: typeof thumbnail.properties.aspectRatio[number];
+	aspectRatio?: (typeof thumbnail.properties.aspectRatio)[number];
 	/**
 	 * Width value of the thumbnail image. Defaults to 100%.
 	 * @default 100%
@@ -3960,13 +3937,7 @@ export type ScrollPaneArrowVerticalEndProperties = ScrollPaneArrowProperties;
 export type ScrollPaneArrowVerticalStartProperties = ScrollPaneArrowProperties;
 export type ScrollPaneArrowHorizontalEndProperties = ScrollPaneArrowProperties;
 export type ScrollPaneArrowHorizontalStartProperties = ScrollPaneArrowProperties;
-export interface ScrollPaneComponents {
-	Item: React.FC<ScrollPaneItemProps>;
-	ArrowHorizontalStart: React.FC<ScrollPaneArrowHorizontalStartProperties>;
-	ArrowHorizontalEnd: React.FC<ScrollPaneArrowHorizontalEndProperties>;
-	ArrowVerticalStart: React.FC<ScrollPaneArrowVerticalStartProperties>;
-	ArrowVerticalEnd: React.FC<ScrollPaneArrowVerticalEndProperties>;
-}
+export type ScrollPaneScrollBehavior = "hidden-items" | "always";
 export interface ScrollPaneProperties {
 	/**
 	 * The content to be rendered inside the scroll pane
@@ -3997,6 +3968,13 @@ export interface ScrollPaneProperties {
 	 * @default true
 	 */
 	scrollToItemOnClick?: boolean;
+	/**
+	 * Defines the scroll behavior when clicking on items
+	 * - 'hidden-items': Only scrolls to items that are not fully visible (default)
+	 * - 'always': Always scrolls to items, centering them in the viewport
+	 * @default "hidden-items"
+	 */
+	scrollBehavior?: ScrollPaneScrollBehavior;
 	/**
 	 * Enable grab-to-scroll functionality (click and drag to scroll)
 	 * When enabled, prevents item dragging inside the ScrollPane
@@ -4018,6 +3996,10 @@ export interface ScrollPaneProperties {
 }
 export type ScrollPaneProps = ScrollPaneProperties & Omit<BoxProps, "children"> & {
 	contentContainerProps?: BoxProps;
+	/**
+	 * Ref to the scroll container
+	 */
+	scrollContainerRef?: RefObject<HTMLDivElement | null>;
 };
 /**
  * ScrollPane component handles responsive scrolls in lists that are overflowing inside a container.
@@ -4029,7 +4011,15 @@ export type ScrollPaneProps = ScrollPaneProperties & Omit<BoxProps, "children">
  *   <ScrollPane.Item>Item 2</ScrollPane.Item>
  * </ScrollPane>
  */
-export declare const ScrollPane: React.FC<ScrollPaneProps> & ScrollPaneComponents;
+export declare const ScrollPane: {
+	({ children, showGradients, showArrows, showScrollbar, scrollContainerRef: externalScrollContainerRef, direction, scrollToItemOnClick, scrollBehavior, enableGrabScroll, scrollPaneArrowStart, scrollPaneArrowEnd, contentContainerProps, ...rest }: ScrollPaneProps): React.JSX.Element;
+	displayName: string;
+	Item: React.FC<ScrollPaneItemProps>;
+	ArrowHorizontalStart: React.FC<ScrollPaneArrowProperties>;
+	ArrowHorizontalEnd: React.FC<ScrollPaneArrowProperties>;
+	ArrowVerticalStart: React.FC<ScrollPaneArrowProperties>;
+	ArrowVerticalEnd: React.FC<ScrollPaneArrowProperties>;
+};
 export interface SidebarBodyProperties {
 	/**
 	 * The content of the sidebar body.
@@ -4610,5 +4600,150 @@ export type SplitButtonProps = SplitButtonProperties & Omit<BoxProps, "children"
  * SplitButton component allows users to perform actions by clicking a primary button and displaying a dropdown menu with additional actions.
  */
 export declare const SplitButton: React.FC<SplitButtonProps> & SplitButtonComponents;
+export type TimeFormat = "12h" | "24h";
+export type AmPm = "AM" | "PM";
+export type TimePickerMode = "scroll" | "dropdown";
+/**
+ * Translatable labels for the TimePicker component.
+ * All texts can be customized for localization.
+ */
+export interface TimePickerLabels {
+	/**
+	 * Label for the hours column in 24h format.
+	 * @default "Hours"
+	 */
+	hoursLabel?: string;
+	/**
+	 * Label for the hour column in 12h format.
+	 * @default "Hour"
+	 */
+	hourLabel?: string;
+	/**
+	 * Label for the minutes column.
+	 * @default "Minutes"
+	 */
+	minutesLabel?: string;
+	/**
+	 * Accessible label for the AM/PM selector group.
+	 * @default "AM/PM selector"
+	 */
+	amPmSelectorLabel?: string;
+	/**
+	 * Display text for the AM option.
+	 * @default "AM"
+	 */
+	amLabel?: string;
+	/**
+	 * Display text for the PM option.
+	 * @default "PM"
+	 */
+	pmLabel?: string;
+}
+export interface TimeValue {
+	hours: number;
+	minutes: number;
+	ampm?: AmPm;
+}
+export interface TimePickerProperties {
+	/**
+	 * Display mode for the time picker panel.
+	 * - "scroll": Shows a scroll-based wheel picker with separate hour/minute columns.
+	 * - "dropdown": Shows a single scrollable list of time options.
+	 * @default "scroll"
+	 */
+	mode?: TimePickerMode;
+	/**
+	 * Current time value (HH:mm string format or Date object).
+	 * For 12h format, use "HH:mm AM/PM" or just "HH:mm" (will default to AM).
+	 */
+	value?: string | Date | null;
+	/**
+	 * Callback fired when the time changes.
+	 * @param value - The formatted time string (HH:mm for 24h, hh:mm AM/PM for 12h).
+	 * @param date - A Date object representing the selected time (today's date with selected time).
+	 */
+	onChange?: (value: string | null, date: Date | null) => void;
+	/**
+	 * Time format: 12-hour with AM/PM or 24-hour.
+	 * @default "24h"
+	 */
+	format?: TimeFormat;
+	/**
+	 * Step interval in minutes for the time picker.
+	 * For scroll mode: controls minute increments in the minutes column.
+	 * For dropdown mode: controls the time options shown in the list.
+	 * Common values: 1, 15, 30, 60.
+	 * @default 1 for scroll picker, 30 for dropdown
+	 */
+	step?: number;
+	/**
+	 * Whether the picker is disabled.
+	 * @default false
+	 */
+	disabled?: boolean;
+	/**
+	 * Placeholder text for the input field.
+	 * @default "Select time"
+	 */
+	placeholder?: string;
+	/**
+	 * Controls the open state of the picker panel (controlled mode).
+	 */
+	open?: boolean;
+	/**
+	 * Callback fired when the panel open state changes.
+	 */
+	onOpenChange?: (open: boolean) => void;
+	/**
+	 * Accessible label for the time picker input.
+	 */
+	"aria-label"?: string;
+	/**
+	 * ID of an element that labels the time picker.
+	 */
+	"aria-labelledby"?: string;
+	/**
+	 * ID of an element that describes the time picker.
+	 */
+	"aria-describedby"?: string;
+	/**
+	 * Name attribute for the hidden input (for form submission).
+	 */
+	name?: string;
+	/**
+	 * Whether the input is required.
+	 * @default false
+	 */
+	required?: boolean;
+	/**
+	 * ID attribute for the input element.
+	 */
+	id?: string;
+	/**
+	 * Translatable labels for localization.
+	 * Allows customization of all text content rendered by the component.
+	 */
+	labels?: TimePickerLabels;
+}
+export type OmittedHTMLAttributes = "value" | "onChange" | "placeholder" | "disabled";
+export interface TimePickerProps extends TimePickerProperties, Omit<HTMLAttributes<HTMLDivElement>, OmittedHTMLAttributes> {
+}
+/**
+ * TimePicker allows users to select a time value using either a scroll-based
+ * wheel picker (default) or a dropdown list of time options.
+ *
+ * @example
+ * // Basic 24h scroll picker with 15-minute intervals
+ * <TimePicker value="14:30" onChange={(value) => console.log(value)} step={15} />
+ *
+ * @example
+ * // 12h format scroll picker
+ * <TimePicker format="12h" step={30} />
+ *
+ * @example
+ * // Dropdown mode
+ * <TimePicker mode="dropdown" value="14:30" onChange={(value) => console.log(value)} step={30} />
+ */
+export declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLDivElement>>;
 
 export {};