@nimbus-ds/components 5.13.0 → 5.14.0-rc.1

package/dist/index.d.ts

@@ -3321,6 +3321,90 @@ export interface PaginationProperties {
 }
 export type PaginationProps = PaginationProperties & HTMLAttributes<HTMLElement>;
 export declare const Pagination: React.FC<PaginationProps>;
+export interface ScrollPaneItemProperties {
+	/**
+	 * The content to be rendered inside the scroll pane item
+	 */
+	children: ReactNode;
+	/**
+	 * Custom class name for styling
+	 */
+	className?: string;
+	/**
+	 * Custom inline styles
+	 */
+	style?: React.CSSProperties;
+	/**
+	 * Callback fired when the item is clicked
+	 */
+	onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+export type ScrollPaneItemProps = ScrollPaneItemProperties & Omit<BoxProps, "children">;
+export type ScrollPaneArrowProperties = {
+	children: ReactNode;
+};
+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 interface ScrollPaneProperties {
+	/**
+	 * The content to be rendered inside the scroll pane
+	 */
+	children: ReactNode;
+	/**
+	 * Whether to show gradient overlays when content overflows
+	 * @default true
+	 */
+	showGradients?: boolean;
+	/**
+	 * Whether to show navigation arrows for scrolling
+	 * @default false
+	 */
+	showArrows?: boolean;
+	/**
+	 * Whether to show the scrollbar
+	 * @default true
+	 */
+	showScrollbar?: boolean;
+	/**
+	 * The direction of the scroll (horizontal or vertical)
+	 * @default "horizontal"
+	 */
+	direction?: "horizontal" | "vertical";
+	/**
+	 * Whether items should scroll into view when clicked
+	 * @default true
+	 */
+	scrollToItemOnClick?: boolean;
+	/**
+	 * Custom arrow component to render at the start of the scroll area
+	 */
+	scrollPaneArrowStart?: React.ReactNode;
+	/**
+	 * Custom arrow component to render at the end of the scroll area
+	 */
+	scrollPaneArrowEnd?: React.ReactNode;
+}
+export type ScrollPaneProps = ScrollPaneProperties & Omit<BoxProps, "children">;
+/**
+ * ScrollPane component handles responsive scrolls in lists that are overflowing inside a container.
+ * It provides gradient overlays, optional navigation arrows, and scroll-to-item functionality.
+ *
+ * @example
+ * <ScrollPane showArrows showGradients showScrollbar>
+ *   <ScrollPane.Item>Item 1</ScrollPane.Item>
+ *   <ScrollPane.Item>Item 2</ScrollPane.Item>
+ * </ScrollPane>
+ */
+export declare const ScrollPane: React.FC<ScrollPaneProps> & ScrollPaneComponents;
 export interface SidebarBodyProperties {
 	/**
 	 * The content of the sidebar body.
@@ -3650,14 +3734,14 @@ export interface SegmentedControlButtonSkeletonProps {
 }
 export type SegmentedControlButtonProperties = PropsWithChildren<{
 	/**
-	 * Label of the segment.
+	 * Unique identifier for the segment button.
+	 * Required for proper state management and accessibility.
 	 */
-	label: string;
+	id: string;
 	/**
-	 * Determines if segment is active.
-	 * @default false
+	 * Label of the segment used for accessibility.
 	 */
-	selected?: boolean;
+	label?: string;
 	/**
 	 * Determines if segment spans all available width.
 	 * @default false
@@ -3673,9 +3757,9 @@ declare const SegmentedControlButtonSkeleton: React.FC<SegmentedControlButtonSke
 export interface SegmentedControlBaseProps {
 	/**
 	 * The content of the segmented control.
-	 * @TJS-type ReactElement<SegmentedControlButtonProps | SegmentedControlButtonSkeletonProps>[];
+	 * Should contain SegmentedControlButton components with unique id props.
 	 */
-	children: ReactElement<SegmentedControlButtonProps | SegmentedControlButtonSkeletonProps>[];
+	children: ReactNode;
 	/**
 	 * Determines if segments span all available width.
 	 * @default false
@@ -3691,15 +3775,15 @@ export interface SegmentedControlComponents {
 }
 export interface ControlledSegmentedControlProperties extends SegmentedControlBaseProps {
 	/**
-	 * The currently selected segment indices.
+	 * The currently selected segment IDs.
 	 * Allows for single or multiple selection.
 	 */
-	selectedSegments: number[];
+	selectedSegments: string[];
 	/**
 	 * Callback fired when the selected segments change.
-	 * This will only be called if the change results in at least one selected segment.
+	 * @param selectedIds Array of selected segment IDs
 	 */
-	onSegmentsSelect: (indices: number[]) => void;
+	onSegmentsSelect: (selectedIds: string[]) => void;
 }
 /**
  * Props for the SegmentedControl component, supporting both controlled and uncontrolled modes
@@ -3709,5 +3793,36 @@ export type SegmentedControlProps = (SegmentedControlBaseProps | ControlledSegme
  * SegmentedControl component for grouped selection controls
  */
 export declare const SegmentedControl: React.FC<SegmentedControlProps> & SegmentedControlComponents;
+export interface SegmentedControlContextValue {
+	/**
+	 * Register a button with its unique identifier
+	 * @param id The unique identifier for the button
+	 */
+	registerButton: (id: string) => void;
+	/**
+	 * Unregister a button by its identifier
+	 * @param id The identifier of the button to unregister
+	 */
+	unregisterButton: (id: string) => void;
+	/**
+	 * Toggle a segment's state by ID
+	 * @param id The unique identifier of the segment to toggle
+	 */
+	toggleSegment: (id: string) => void;
+	/**
+	 * Check if a segment is currently selected by ID
+	 * @param id The unique identifier of the segment to check
+	 */
+	isSelected: (id: string) => boolean;
+	/**
+	 * Whether buttons should span full width
+	 */
+	fullWidth: boolean;
+}
+/**
+ * Hook to use SegmentedControl context with error if not found
+ * @throws Error if not within a SegmentedControl
+ */
+export declare const useSegmentedControlContext: () => SegmentedControlContextValue;
 
 export {};