@payfit/unity-components
Version:
157 lines (156 loc) • 5.32 kB
TypeScript
import { VariantProps } from '@payfit/unity-themes';
import { PropsWithChildren } from 'react';
import { AriaButtonProps } from 'react-aria/useButton';
export declare const rawTask: import('tailwind-variants').TVReturnType<{
[key: string]: {
[key: string]: import('tailwind-merge').ClassNameValue | {
number?: import('tailwind-merge').ClassNameValue;
text?: import('tailwind-merge').ClassNameValue;
base?: import('tailwind-merge').ClassNameValue;
lock?: import('tailwind-merge').ClassNameValue;
element?: import('tailwind-merge').ClassNameValue;
};
};
} | {
taskStatus: {
uncompleted: import('tailwind-merge').ClassNameValue | {
number?: import('tailwind-merge').ClassNameValue;
text?: import('tailwind-merge').ClassNameValue;
base?: import('tailwind-merge').ClassNameValue;
lock?: import('tailwind-merge').ClassNameValue;
element?: import('tailwind-merge').ClassNameValue;
};
completed: import('tailwind-merge').ClassNameValue | {
number?: import('tailwind-merge').ClassNameValue;
text?: import('tailwind-merge').ClassNameValue;
base?: import('tailwind-merge').ClassNameValue;
lock?: import('tailwind-merge').ClassNameValue;
element?: import('tailwind-merge').ClassNameValue;
};
locked: import('tailwind-merge').ClassNameValue | {
number?: import('tailwind-merge').ClassNameValue;
text?: import('tailwind-merge').ClassNameValue;
base?: import('tailwind-merge').ClassNameValue;
lock?: import('tailwind-merge').ClassNameValue;
element?: import('tailwind-merge').ClassNameValue;
};
};
}, {
base: never[];
element: string[];
text: string;
lock: string;
number: string;
}, undefined, {
taskStatus: {
uncompleted: string;
completed: string;
locked: string;
};
}, {
base: string[];
number: string[];
element: string[];
text: string[];
lock: string[];
}, import('tailwind-variants').TVReturnType<{
taskStatus: {
uncompleted: string;
completed: string;
locked: string;
};
}, {
base: string[];
number: string[];
element: string[];
text: string[];
lock: string[];
}, undefined, {
taskStatus: {
uncompleted: string;
completed: string;
locked: string;
};
}, {
base: string[];
number: string[];
element: string[];
text: string[];
lock: string[];
}, import('tailwind-variants').TVReturnType<{
taskStatus: {
uncompleted: string;
completed: string;
locked: string;
};
}, {
base: string[];
number: string[];
element: string[];
text: string[];
lock: string[];
}, undefined, unknown, unknown, undefined>>>;
/**
* Props for the Task component, defining the configuration options for individual task items.
* Supports both link-based navigation and button-based interactions with various visual states.
*/
export interface TaskProps extends PropsWithChildren<VariantProps<typeof rawTask>> {
/**
* Unique identifier for the task, used for state management and accessibility.
* This ID is used to track the current selected task and manage focus states.
*/
uniqueId: string;
/**
* The label of the task which will be displayed under the task number
*/
label: string;
/**
* The task number used to identify the task among the task list
*/
taskNumber: number;
/**
* Optional URL for link-based navigation. When provided, the task renders as a link.
* When omitted, the task renders as a button for custom interaction handling.
*/
href?: string;
/** Whether the nav item should exactly match the route's path. */
isExact?: boolean;
/** The click event handler for the nav item. Use it when the item executes an action that does not redirect to another page */
onPress?: AriaButtonProps['onPress'];
}
/**
* The `Task` component represents an individual task item in the task menu that can be either a link or button with different states.
* It supports various visual states including completed, uncompleted, locked, and selected states, with automatic state management
* based on routing context or manual selection. The component adapts its behavior based on whether an href is provided.
*
* ```tsx
* // Link-based task for navigation
* <RawTask
* uniqueId="setup-profile"
* label="Complete Profile Setup"
* taskNumber={1}
* taskStatus="uncompleted"
* href="/profile/setup"
* />
*
* // Button-based task for custom interactions
* <RawTask
* uniqueId="validate-data"
* label="Validate Information"
* taskNumber={2}
* taskStatus="completed"
* onPress={() => handleValidation()}
* />
*
* // Locked task that cannot be interacted with
* <RawTask
* uniqueId="final-review"
* label="Final Review"
* taskNumber={3}
* taskStatus="locked"
* />
* ```
* @see {@link TaskProps} for all available props
*/
declare const RawTask: import('react').ForwardRefExoticComponent<TaskProps & import('react').RefAttributes<HTMLLIElement>>;
export { RawTask };