@qodo/design-system 0.9.7 → 0.10.0

package/dist/index.d.ts

@@ -6,17 +6,23 @@ import { Column } from '@tanstack/react-table';
 import { ComboboxProps as ComboboxProps_2 } from './types';
 import { Control } from 'react-hook-form';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Dispatch } from 'react';
+import { DropdownMenuContentProps } from '@radix-ui/react-dropdown-menu';
 import { FieldValues } from 'react-hook-form';
 import { FormState } from 'react-hook-form';
+import { ForwardRefExoticComponent } from 'react';
 import { InputProps as InputProps_2 } from './types';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { MouseEvent as MouseEvent_2 } from 'react';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import { PropsWithChildren } from 'react';
 import * as React_2 from 'react';
 import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
 import { RowData } from '@tanstack/react-table';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { SelectProps } from './types';
+import { SetStateAction } from 'react';
 import { Steps as Steps_2 } from '@ark-ui/react/steps';
 import { SubmitHandler } from 'react-hook-form';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
@@ -52,6 +58,16 @@ export declare function AccordionItem({ className, ...props }: React_2.Component
 
 export declare function AccordionTrigger({ className, children, ...props }: React_2.ComponentProps<typeof AccordionPrimitive.Trigger>): JSX_2.Element;
 
+export declare interface ActionItemType extends BaseMenuItemType, TypeGuard<"ActionMenuItem"> {
+    endAndornment?: ReactNode;
+    onClick?: (event: MouseEvent_2<HTMLDivElement>) => void;
+    onSelect?: (event: Event) => void;
+    separator?: boolean;
+    loading?: boolean;
+    tooltip?: string;
+    isHidden?: boolean;
+}
+
 export declare function Badge({ className, variant, size, ...props }: BadgeProps): JSX_2.Element;
 
 export declare const BadgeCell: (props: BadgeCellProps) => JSX_2.Element;
@@ -72,6 +88,12 @@ export declare type BaseCellProps = PropsWithChildren & {
     className?: string;
 };
 
+declare type BaseMenuItemType = {
+    label: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+};
+
 export declare const borderRadius: {
     readonly sm: "0.25rem";
     readonly md: "0.375rem";
@@ -103,6 +125,29 @@ export declare function CardHeader({ className, ...props }: React_2.ComponentPro
 
 export declare function CardTitle({ className, ...props }: React_2.ComponentProps<"div">): JSX_2.Element;
 
+declare interface CheckboxGroupType extends TypeGuard<"CheckboxGroup"> {
+    checkboxes: CheckboxItemType[];
+    separator?: boolean;
+}
+
+declare interface CheckboxItemType extends BaseMenuItemType {
+    checked: boolean;
+    onSelect?: Dispatch<SetStateAction<boolean>>;
+}
+
+/***
+ *
+ *   CLASSHELPER
+ *   Helper function for applying SCSS or Tailwind classes
+ *
+ *   PARAMS
+ *   debug: log the output to the console (boolean, optional)
+ *   props: props object (object, required)
+ *   styles: SCSS or tailwind styles (required)
+ *
+ **********/
+export declare function ClassHelper(styles: any, props: any, debug: boolean): string;
+
 export declare function cn(...inputs: ClassValue[]): string;
 
 export declare const colors: {
@@ -173,6 +218,25 @@ export declare function DialogTitle({ className, ...props }: React_2.ComponentPr
 
 export declare function DialogTrigger({ ...props }: React_2.ComponentProps<typeof DialogPrimitive.Trigger>): JSX_2.Element;
 
+export declare const Dropdown: ({ menuItems, header, footer, triggerElement, size, asChild, side, modal, }: DropdownProps) => JSX_2.Element;
+
+declare type DropdownMenuItem = (RadioGroupType | ActionItemType | CheckboxGroupType | SubMenuItemType | MenuLabelType | SeparatorType) & {
+    isHidden?: boolean;
+};
+
+export declare type DropdownMenuItems = Array<DropdownMenuItem>;
+
+declare interface DropdownProps {
+    menuItems: DropdownMenuItems;
+    header?: HeaderItemType;
+    footer?: FooterItemType;
+    triggerElement: TriggerElement;
+    size?: "s" | "l";
+    asChild?: boolean;
+    side?: DropdownMenuContentProps["side"];
+    modal?: boolean;
+}
+
 export declare interface EmailChipProps {
     email: string;
     isValid: boolean;
@@ -217,10 +281,14 @@ export declare type EmptyStateProps = {
     description?: string;
 };
 
+declare interface FooterItemType extends BaseMenuItemType {
+    action?: () => void;
+}
+
 export declare const Form: {
     <T extends FieldValues>(props: FormProps<T>): JSX_2.Element;
     Button: ({ type, ...rest }: ButtonProps_2) => JSX_2.Element;
-    Input: (props: InputProps_2) => JSX_2.Element;
+    Input: ForwardRefExoticComponent<Omit<InputProps_2, "ref"> & RefAttributes<HTMLInputElement>>;
     Select: (props: SelectProps) => JSX_2.Element;
     Combobox: (props: ComboboxProps_2) => JSX_2.Element;
     Divider: (props: React.HTMLAttributes<HTMLHRElement>) => JSX_2.Element;
@@ -245,6 +313,8 @@ declare type FormProviderProps<T extends FieldValues> = PropsWithChildren<{
     readOnly?: boolean;
 }>;
 
+declare type HeaderItemType = TitleHeaderContentType;
+
 declare type IndicatorProps = React.ComponentProps<typeof Steps_2.Indicator> & {
     index: number;
 };
@@ -259,6 +329,10 @@ declare const inputVariants: (props?: ({
     variant?: "default" | "secondary" | "accent" | "success" | "warning" | "destructive" | null | undefined;
 } & ClassProp) | undefined) => string;
 
+declare interface MenuLabelType extends TypeGuard<"MenuLabel"> {
+    label: ReactNode;
+}
+
 export declare type NoResultProps = {
     title?: string;
 };
@@ -276,6 +350,17 @@ export declare type PaginationStepperProps<T extends RowData> = {
 
 export declare function Progress({ className, value, ...props }: React_2.ComponentProps<typeof ProgressPrimitive.Root>): JSX_2.Element;
 
+declare interface RadioGroupType extends TypeGuard<"RadioGroup"> {
+    value: string;
+    onValueChange: (value: string) => void;
+    radioItems: RadioItemType[];
+    separator?: boolean;
+}
+
+declare interface RadioItemType extends BaseMenuItemType {
+    value: string;
+}
+
 export declare const SearchInput: ({ containerClassName, className: propsClassName, searchSize, disabled, disableFilterIcon, ...rest }: SearchInputProps) => JSX_2.Element;
 
 export declare interface SearchInputProps extends InputProps {
@@ -315,6 +400,9 @@ declare type SeparatorProps = React.ComponentProps<typeof Steps_2.Separator> & {
     index: number;
 };
 
+declare interface SeparatorType extends TypeGuard<"Separator"> {
+}
+
 export declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): JSX_2.Element;
 
 export declare const SortableHeaderCell: <T extends RowData>({ column, children, tooltipContent, }: SortableHeaderCellProps<T>) => JSX_2.Element;
@@ -347,6 +435,11 @@ export declare const Steps: {
     NextTrigger: ({ className: propsClassName, ...rest }: React.ComponentProps<typeof Steps_2.NextTrigger>) => JSX_2.Element;
 };
 
+declare interface SubMenuItemType extends BaseMenuItemType, TypeGuard<"SubMenuItem"> {
+    subItems: DropdownMenuItems;
+    separator?: boolean;
+}
+
 export declare function Switch({ className, ...props }: React_2.ComponentProps<typeof SwitchPrimitive.Root>): JSX_2.Element;
 
 export declare const Table: <T extends RowData>({ table, emptyStateComponent, noResultsComponent, errorComponent, isLoading, isError, onRowClick, emptyStateTitle, emptyStateDescription, noResultsTitle, wrapperClassName, }: TableProps<T>) => JSX_2.Element;
@@ -365,6 +458,11 @@ export declare type TableProps<T extends RowData> = {
     wrapperClassName?: string;
 };
 
+declare interface TitleHeaderContentType extends TypeGuard<"MenuTitleHeader"> {
+    title: string;
+    label: string;
+}
+
 export declare function Toggle({ className, variant, size, ...props }: React_2.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): JSX_2.Element;
 
 export declare function ToggleGroup({ className, variant, size, children, ...props }: React_2.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>): JSX_2.Element;
@@ -388,6 +486,12 @@ declare interface TooltipProps {
     triggerProps?: TooltipTriggerProps;
 }
 
+declare type TriggerElement = React.ReactNode;
+
+declare type TypeGuard<T> = {
+    type: T;
+};
+
 export declare const typography: {
     readonly fontFamily: {
         readonly sans: readonly ["Inter", "system-ui", "sans-serif"];