@nimbus-ds/components 5.42.0-rc.3 → 5.43.0-rc.1

package/dist/index.d.ts

@@ -104,11 +104,15 @@ export type TransitionTiming = "ease" | "ease-in" | "ease-out" | "ease-in-out" |
 export type WordBreak = "normal" | "break-all" | "keep-all" | "break-word";
 export type TextOverflow = "clip" | "ellipsis";
 export type WhiteSpace = "normal" | "nowrap" | "pre" | "pre-wrap" | "pre-line" | "break-spaces";
+export type ScrollbarWidth = "auto" | "none" | "thin";
 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})`;
+		"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-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})`;
@@ -132,7 +136,10 @@ 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})`;
+		"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-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,9 +171,7 @@ declare const propertiesBox: {
 		"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
-		 * The width property specifies the width of a box's content area.
-		 */
+		"primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -200,9 +205,7 @@ declare const propertiesBox: {
 		"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
-		 * The width property specifies the width of a box's content area.
-		 */
+		"primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -240,10 +243,6 @@ declare const propertiesBox: {
 		"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		/**
-		 * The gridArea shorthand property specifies a grid item's size and location within a grid by contributing a line,
-		 * a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.
-		 */
 		"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -265,9 +264,7 @@ declare const propertiesBox: {
 	borderWidth: {
 		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
-		 * The gap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
-		 */
+		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		none: string;
@@ -278,7 +275,10 @@ declare const propertiesBox: {
 	spacing: {
 		none: string;
 		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"1": `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-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})`;
@@ -301,7 +301,10 @@ declare const propertiesBox: {
 	};
 	margin: {
 		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"1": `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-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})`;
@@ -365,7 +368,10 @@ declare const propertiesBox: {
 	};
 	fontSize: {
 		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"1": `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-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})`;
@@ -396,7 +402,10 @@ declare const propertiesBox: {
 	};
 	lineHeight: {
 		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"1": `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-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})`;
@@ -425,6 +434,7 @@ declare const propertiesBox: {
 		h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 	};
+	scrollbarWidth: ScrollbarWidth[];
 };
 export type BoxBorderColorProperties = keyof typeof propertiesBox.borderColor;
 export type BoxBorderRadiusProperties = keyof typeof propertiesBox.borderRadius;
@@ -825,6 +835,10 @@ export interface BoxSprinkle {
 	 * @default left
 	 */
 	textAlign?: TextAlign | BoxConditions<TextAlign>;
+	/**
+	 * The scrollbarWidth property specifies the width of the scrollbar.
+	 */
+	scrollbarWidth?: ScrollbarWidth | BoxConditions<ScrollbarWidth>;
 }
 declare const fileUploader: {
 	sprinkle: ((props: {
@@ -3093,6 +3107,133 @@ export interface SpinnerProperties {
 }
 export type SpinnerProps = SpinnerProperties & SVGAttributes<SVGElement>;
 export declare const Spinner: React.FC<SpinnerProps>;
+/**
+ * Available appearance variants for the slider fill.
+ * Controls the color scheme of the active range portion of the slider.
+ */
+export type SliderAppearance = "primary" | "success" | "warning" | "danger" | "neutral";
+/**
+ * Common properties shared between single and range slider modes.
+ */
+export interface SliderCommonProperties {
+	/**
+	 * The minimum value of the slider range.
+	 * @default 0
+	 */
+	min?: number;
+	/**
+	 * The maximum value of the slider range.
+	 * @default 100
+	 */
+	max?: number;
+	/**
+	 * The step increment between values.
+	 * @default 1
+	 */
+	step?: number;
+	/**
+	 * Visual appearance of the slider fill.
+	 * @default "primary"
+	 */
+	appearance?: SliderAppearance;
+	/**
+	 * Whether the slider is disabled.
+	 * @default false
+	 */
+	disabled?: boolean;
+	/**
+	 * This is an attribute used to identify a DOM node for testing purposes.
+	 */
+	"data-testid"?: string;
+}
+/**
+ * Properties specific to single value slider mode.
+ * Used for documentation generation.
+ */
+export interface SliderProperties extends SliderCommonProperties {
+	/**
+	 * The current value of the slider (single mode).
+	 */
+	value: number;
+	/**
+	 * Callback fired when the value changes.
+	 */
+	onChange?: (value: number) => void;
+	/**
+	 * Callback fired when the user finishes interacting with the slider.
+	 */
+	onChangeEnd?: (value: number) => void;
+	/**
+	 * Accessible label for the slider thumb.
+	 * @default "Value"
+	 */
+	ariaLabel?: string;
+}
+/**
+ * Properties specific to range slider mode (two thumbs).
+ */
+export interface SliderRangeProperties extends SliderCommonProperties {
+	/**
+	 * The current minimum value selected on the slider.
+	 */
+	minValue: number;
+	/**
+	 * The current maximum value selected on the slider.
+	 */
+	maxValue: number;
+	/**
+	 * Callback fired when the min or max value changes.
+	 */
+	onChange?: (minValue: number, maxValue: number) => void;
+	/**
+	 * Callback fired when the min value changes.
+	 */
+	onMinChange?: (value: number) => void;
+	/**
+	 * Callback fired when the max value changes.
+	 */
+	onMaxChange?: (value: number) => void;
+	/**
+	 * Callback fired when the user finishes interacting with the slider.
+	 */
+	onChangeEnd?: (minValue: number, maxValue: number) => void;
+	/**
+	 * Accessible label for the minimum value thumb.
+	 * @default "Minimum value"
+	 */
+	minAriaLabel?: string;
+	/**
+	 * Accessible label for the maximum value thumb.
+	 * @default "Maximum value"
+	 */
+	maxAriaLabel?: string;
+}
+/**
+ * Props for single value slider mode.
+ */
+export type SliderBaseProps = SliderProperties & Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "className" | "style">;
+/**
+ * Props for range slider mode.
+ */
+export type SliderRangeBaseProps = SliderRangeProperties & Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "className" | "style">;
+declare const SliderRange: React.ForwardRefExoticComponent<SliderRangeProperties & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style" | "onChange"> & React.RefAttributes<HTMLDivElement>>;
+export type SliderRangeProps = ComponentPropsWithRef<typeof SliderRange>;
+declare const SliderBase: React.ForwardRefExoticComponent<SliderProperties & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style" | "onChange"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Slider component with Range subcomponent.
+ *
+ * @example
+ * // Single value slider
+ * <Slider value={50} onChange={(value) => console.log(value)} />
+ *
+ * @example
+ * // Range slider
+ * <Slider.Range minValue={25} maxValue={75} onChange={(min, max) => console.log(min, max)} />
+ */
+export declare const Slider: React.ForwardRefExoticComponent<SliderProperties & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style" | "onChange"> & React.RefAttributes<HTMLDivElement>> & {
+	Range: React.ForwardRefExoticComponent<SliderRangeProperties & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style" | "onChange"> & React.RefAttributes<HTMLDivElement>>;
+};
+export type SliderProps = ComponentPropsWithRef<typeof SliderBase>;
 export type TagSkeletonProperties = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<SkeletonProps, "height">> & {
 	/**
 	 * This is an attribute used to identify a DOM node for testing purposes.
@@ -4220,14 +4361,6 @@ export interface TableColumnLayout {
 	 * Only applies when using `grow`. Accepts any valid CSS width value.
 	 */
 	minWidth?: string;
-	/**
-	 * Determines which side the column will be fixed (sticky) to during horizontal scrolling.
-	 * Fixed columns use CSS `position: sticky` and stay visible on the specified side.
-	 * Requires a defined `width` to calculate proper offsets.
-	 * - 'left': Column sticks to the left side of the table
-	 * - 'right': Column sticks to the right side of the table
-	 */
-	fixed?: "left" | "right";
 }
 export interface TableProperties {
 	/**
@@ -4239,16 +4372,6 @@ export interface TableProperties {
 	 * Column sizing definitions applied from left to right. Use `width` for fixed columns and `grow` to distribute the remaining space proportionally.
 	 */
 	columnLayout?: TableColumnLayout[];
-	/**
-	 * Minimum width of the table. When the container is smaller, horizontal scrolling is enabled.
-	 * Accepts any valid CSS width value (e.g., "600px", "50rem").
-	 */
-	minWidth?: string;
-	/**
-	 * Maximum width of the table. The table will not exceed this width.
-	 * Accepts any valid CSS width value (e.g., "1200px", "80rem").
-	 */
-	maxWidth?: string;
 }
 export type TableProps = TableProperties & HTMLAttributes<HTMLTableElement>;
 export declare const Table: React.FC<TableProps> & TableComponents;