@q1travel/design-system 0.5.1 → 0.6.0

package/dist-pkg/design-system.d.ts

@@ -1,4 +1,5 @@
 import { AnchorHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes } from 'react';
 import { FocusEventHandler } from 'react';
 import { HTMLAttributes } from 'react';
 import { InputHTMLAttributes } from 'react';
@@ -521,6 +522,54 @@ export declare type ContextMenuEntry = {
     type: 'separator';
 };
 
+export declare function ContextSwitcher({ currentContext, groups, open, defaultOpen, onOpenChange, onSelect, pendingId, errorMessage, footerActions, onFooterAction, label, }: ContextSwitcherProps): JSX.Element;
+
+export declare type ContextSwitcherAction = {
+    id: string;
+    label: ReactNode;
+    textValue: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+};
+
+export declare type ContextSwitcherCurrent = {
+    label: ReactNode;
+    description?: ReactNode;
+    avatar?: ReactNode;
+    textValue: string;
+};
+
+export declare type ContextSwitcherGroup = {
+    id: string;
+    label: ReactNode;
+    textValue: string;
+    selectedId?: string;
+    items: ContextSwitcherItem[];
+};
+
+export declare type ContextSwitcherItem = {
+    id: string;
+    label: ReactNode;
+    textValue: string;
+    description?: ReactNode;
+    avatar?: ReactNode;
+    disabled?: boolean;
+};
+
+export declare type ContextSwitcherProps = {
+    currentContext: ContextSwitcherCurrent;
+    groups: ContextSwitcherGroup[];
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onSelect: (item: ContextSwitcherItem) => void;
+    pendingId?: string;
+    errorMessage?: ReactNode;
+    footerActions?: ContextSwitcherAction[];
+    onFooterAction?: (action: ContextSwitcherAction) => void;
+    label?: string;
+};
+
 export declare function ControlOption({ id, label, description, error, indeterminate, ref, type, ...rest }: ControlOptionOwnProps & (FieldShellProps | FieldBareProps) & CheckboxOnlyProps & {
     type: 'checkbox' | 'radio';
 } & NativeInputProps): JSX.Element;
@@ -840,6 +889,74 @@ declare type NativeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'id'
 
 declare type NativeInputProps_2 = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;
 
+export declare function Navigation({ className, ...props }: NavigationProps): JSX.Element;
+
+export declare function NavigationGroup({ label, icon, expanded, defaultExpanded, onExpandedChange, children, }: NavigationGroupProps): JSX.Element;
+
+export declare type NavigationGroupProps = {
+    label: ReactNode;
+    icon?: ReactNode;
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    children: ReactNode;
+};
+
+export declare function NavigationItem(props: NavigationItemProps): JSX.Element;
+
+export declare type NavigationItemAsButton = NavigationItemOwnProps & {
+    href?: undefined;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof NavigationItemOwnProps>;
+
+export declare type NavigationItemAsLink = NavigationItemOwnProps & {
+    href: string;
+} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof NavigationItemOwnProps | 'href'>;
+
+declare type NavigationItemOwnProps = {
+    active?: boolean;
+    disabled?: boolean;
+    icon?: ReactNode;
+    badge?: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+    children: ReactNode;
+    className?: string;
+};
+
+export declare type NavigationItemProps = NavigationItemAsLink | NavigationItemAsButton;
+
+export declare type NavigationProps = HTMLAttributes<HTMLElement> & {
+    'aria-label': string;
+};
+
+export declare function NavigationSection({ label, action, children, className, ...props }: NavigationSectionProps): JSX.Element;
+
+declare type NavigationSectionLabel = Exclude<ReactNode, boolean | null | undefined>;
+
+declare type NavigationSectionNativeProps = Omit<HTMLAttributes<HTMLElement>, keyof NavigationSectionOwnProps>;
+
+declare type NavigationSectionOwnProps = {
+    label?: ReactNode;
+    action?: ReactNode;
+    children: ReactNode;
+    className?: string;
+};
+
+export declare type NavigationSectionProps = NavigationSectionWithLabel | NavigationSectionWithAccessibleName;
+
+declare type NavigationSectionWithAccessibleName = NavigationSectionNativeProps & Omit<NavigationSectionOwnProps, 'action'> & {
+    label?: undefined;
+    action?: never;
+} & ({
+    'aria-label': string;
+} | {
+    'aria-labelledby': string;
+});
+
+declare type NavigationSectionWithLabel = NavigationSectionNativeProps & Omit<NavigationSectionOwnProps, 'label'> & {
+    label: NavigationSectionLabel;
+};
+
 export declare function Note({ tone, size, filled, disabled, label, action, children, }: {
     tone?: NoteTone;
     size?: NoteSize;
@@ -1015,6 +1132,26 @@ export declare function ShowMore({ items, initial, noBorder, initialExpanded, }:
     initialExpanded?: boolean;
 }): JSX.Element;
 
+export declare const Sidebar: typeof SidebarRoot & {
+    Header: typeof SidebarHeader;
+    Content: typeof SidebarContent;
+    Footer: typeof SidebarFooter;
+};
+
+declare function SidebarContent({ className, ...props }: SidebarSlotProps): JSX.Element;
+
+declare function SidebarFooter({ className, ...props }: SidebarSlotProps): JSX.Element;
+
+declare function SidebarHeader({ className, ...props }: SidebarSlotProps): JSX.Element;
+
+export declare type SidebarProps = HTMLAttributes<HTMLElement> & {
+    'aria-label': string;
+};
+
+declare function SidebarRoot({ className, ...props }: SidebarProps): JSX.Element;
+
+export declare type SidebarSlotProps = HTMLAttributes<HTMLDivElement>;
+
 export declare function Skeleton({ shape, animated, show, className, children, }: {
     shape?: SkeletonShape;
     animated?: boolean;