@factorialco/f0-react 1.306.4 → 1.308.0

package/dist/f0.d.ts

@@ -728,6 +728,10 @@ export declare type ButtonToggleSize = (typeof buttonToggleSizes)[number];
 
 export declare const buttonToggleSizes: readonly ["sm", "md", "lg"];
 
+export declare type ButtonToggleVariant = (typeof buttonToggleVariants)[number];
+
+export declare const buttonToggleVariants: readonly ["compact", "expanded"];
+
 declare type ButtonType = (typeof buttonTypes)[number];
 
 declare const buttonTypes: readonly ["button", "submit", "reset"];
@@ -2262,15 +2266,7 @@ export declare type F0ButtonProps = Omit<ButtonInternalProps, (typeof privatePro
 
 export declare const F0ButtonToggle: ForwardRefExoticComponent<F0ButtonToggleProps & RefAttributes<HTMLButtonElement>>;
 
-export declare interface F0ButtonToggleProps {
-    /**
-     * Whether the button is in selected/active state.
-     */
-    selected?: boolean;
-    /**
-     * Callback fired when the button is selected.
-     */
-    onSelectedChange?: (selected: boolean) => void;
+declare type F0ButtonToggleInternalProps = {
     /**
      * The accessible label for the button.
      */
@@ -2288,7 +2284,29 @@ export declare interface F0ButtonToggleProps {
      * @default "md"
      */
     size?: ButtonToggleSize;
-}
+    /**
+     * The variant of the button.
+     * @default "compact"
+     * "compact" - The button will only show the icon.
+     * "expanded" - The button will show the icon and the label.
+     */
+    variant?: ButtonToggleVariant;
+    /**
+     * @private
+     * Whether to show a border around the button toggle.
+     */
+    withBorder?: boolean;
+} & ({
+    selected: boolean;
+    onSelectedChange: (selected: boolean) => void;
+    defaultSelected?: undefined;
+} | {
+    defaultSelected?: boolean;
+    selected?: undefined;
+    onSelectedChange?: undefined;
+});
+
+export declare type F0ButtonToggleProps = Omit<F0ButtonToggleInternalProps, (typeof privateProps_2)[number]>;
 
 export declare const F0Card: ForwardRefExoticComponent<F0CardProps & RefAttributes<HTMLDivElement>> & {
     Skeleton: ({ compact }: {
@@ -2296,7 +2314,7 @@ export declare const F0Card: ForwardRefExoticComponent<F0CardProps & RefAttribut
     }) => JSX_2.Element;
 };
 
-export declare type F0CardProps = Omit<CardInternalProps, (typeof privateProps_2)[number]>;
+export declare type F0CardProps = Omit<CardInternalProps, (typeof privateProps_3)[number]>;
 
 /**
  * @experimental This is an experimental component use it at your own risk
@@ -2498,11 +2516,16 @@ export declare const F0TagCompany: ForwardRefExoticComponent<TagCompanyProps & R
 export declare const F0TagDot: ForwardRefExoticComponent<TagDotProps & RefAttributes<HTMLDivElement>>;
 
 export declare const F0TagList: {
-    <T extends TagType>({ type, tags, max, remainingCount: initialRemainingCount, layout, }: TagListProps<T>): JSX_2.Element;
+    <T extends TagType>({ type, tags, max, remainingCount: initialRemainingCount, }: TagListProps<T>): JSX_2.Element;
     displayName: string;
 };
 
-export declare const F0TagPerson: ForwardRefExoticComponent<TagPersonProps & RefAttributes<HTMLDivElement>>;
+export declare const F0TagPerson: ForwardRefExoticComponent<F0TagPersonProps & RefAttributes<HTMLDivElement>>;
+
+export declare type F0TagPersonProps = {
+    src?: string;
+    name: string;
+};
 
 export declare const F0TagRaw: ForwardRefExoticComponent<TagRawProps & RefAttributes<HTMLDivElement>>;
 
@@ -3145,7 +3168,9 @@ declare const layoutVariants: (props?: ({
     className?: ClassValue;
 })) | undefined) => string;
 
-export declare type Level = "info" | "warning" | "critical" | "positive";
+export declare type Level = (typeof levels)[number];
+
+declare const levels: readonly ["info", "warning", "critical", "positive"];
 
 export declare const LineChart: ForwardRefExoticComponent<Omit<LineChartPropsBase<LineChartConfig> & {
 lineType?: "natural" | "linear";
@@ -3315,7 +3340,7 @@ declare type NestedResponseWithType<R extends RecordType> = {
 
 declare type NestedVariant = "basic" | "detailed";
 
-export declare type NewColor = Extract<BaseColor, "viridian" | "malibu" | "yellow" | "purple" | "lilac" | "barbie" | "smoke" | "army" | "flubber" | "indigo" | "camel">;
+export declare type NewColor = Extract<BaseColor, (typeof tagDotColors)[number]>;
 
 export declare interface NextStepsProps {
     title: string;
@@ -3348,6 +3373,14 @@ declare type NumberFilterValue = {
     };
 } | undefined;
 
+declare interface NumericValue {
+    number: number;
+    units?: string;
+    unitsPosition?: "left" | "right";
+    decimalPlaces?: number | undefined;
+    locale?: string;
+}
+
 declare type OnBulkActionCallback<Record extends RecordType, Filters extends FiltersDefinition> = (...args: [
 action: BulkAction,
 ...Parameters<OnSelectItemsCallback<Record, Filters>>
@@ -3535,7 +3568,9 @@ export declare const PrivacyModeProvider: React_2.FC<{
 
 declare const privateProps: readonly ["append", "className", "pressed", "compact", "noTitle", "noAutoTooltip", "style"];
 
-declare const privateProps_2: readonly ["forceVerticalMetadata", "disableOverlayLink"];
+declare const privateProps_2: readonly ["withBorder"];
+
+declare const privateProps_3: readonly ["forceVerticalMetadata", "disableOverlayLink"];
 
 export declare const ProductBlankslate: ForwardRefExoticComponent<ProductBlankslateProps & RefAttributes<HTMLDivElement>>;
 
@@ -3895,7 +3930,11 @@ export declare interface StandardLayoutProps extends VariantProps<typeof layoutV
     children?: default_2.ReactNode;
 }
 
-export declare type Status = "positive" | "neutral" | "negative";
+export declare type Status = (typeof statuses_2)[number];
+
+declare const statuses: readonly ["neutral", "info", "positive", "warning", "critical"];
+
+declare const statuses_2: readonly ["positive", "neutral", "negative"];
 
 export declare type StatusVariant = Variant;
 
@@ -4029,20 +4068,45 @@ declare type TableVisualizationSettings = {
     hidden: ColId[];
 };
 
+export declare const Tag: ({ tag }: {
+    tag: TagVariant;
+}) => ReactNode;
+
 export declare type TagAlertProps<Text extends string = string> = {
     text: Text extends "" ? never : Text;
     level: Level;
 };
 
-export declare interface TagBalanceProps {
-    text: string;
-    status: Status;
-}
+export declare type TagBalanceProps = {
+    /**
+     * Inverts the balance status color. Is useful when a negative percent mean something positive.
+     */
+    invertStatus?: boolean;
+    /**
+     * Hint text to display next to the tag (This text is not displayed when the balance is null or undefined)
+     */
+    hint?: string;
+    /**
+     * Info text to display an i icon and a tooltip next to the tag
+     */
+    info?: string;
+    /**
+     * Text to display when the balance is null or undefined
+     */
+    nullText?: string;
+    /**
+     * Amount to display next to the tag
+     */
+    amount?: number | NumericValue | null;
+} & ({
+    percentage: number | Omit<NumericValue, "units" | "unitsPosition">;
+} | {
+    percentage?: null;
+});
 
 export declare interface TagCompanyProps {
-    companyName: string;
-    companyImageUrl: string;
-    onClick?: () => void;
+    name: string;
+    src?: string;
 }
 
 export declare const TagCounter: {
@@ -4056,7 +4120,7 @@ declare type TagDataType<T extends string> = Omit<Extract<TagVariant, {
     type: T;
 }>, "type" | "description">;
 
-export declare const tagDotColors: NewColor[];
+export declare const tagDotColors: ["viridian", "malibu", "yellow", "purple", "lilac", "barbie", "smoke", "army", "flubber", "indigo", "camel"];
 
 export declare type TagDotProps = {
     text: string;
@@ -4074,7 +4138,7 @@ export declare type TagListProps<T extends TagType> = {
     /**
      * Array of tag data corresponding to the specified type.
      */
-    tags: Array<TagTypeMapping[T] & WithTooltipDescription_2>;
+    tags: Array<TagTypeMapping[T]>;
     /**
      * The maximum number of tags to display.
      * @default 4
@@ -4084,28 +4148,24 @@ export declare type TagListProps<T extends TagType> = {
      * The remaining number to display.
      */
     remainingCount?: number;
-    /**
-     * The layout of the tag list.
-     * - "fill" - Tags will expand to fill the available width, with overflow items shown in a counter
-     * - "compact" - Tags will be stacked together up to the max limit, with remaining shown in counter
-     * @default "compact"
-     */
-    layout?: "fill" | "compact";
 };
 
-export declare interface TagPersonProps {
-    name: string;
-    avatarUrl: string;
-    onClick?: () => void;
-}
-
-export declare interface TagRawProps {
-    text?: string;
-    additionalAccesibleText?: string;
+export declare type TagRawProps = {
+    /**
+     * The label to display in the tag or used for accessible text
+     */
+    text: string;
+    /**
+     * Additional accessible text to display in the tag
+     */
+    additionalAccessibleText?: string;
+} & ({
+    icon: IconType;
+    onlyIcon: true;
+} | {
     icon?: IconType;
-    noBorder?: boolean;
-    className?: string;
-}
+    onlyIcon?: boolean;
+});
 
 export declare interface TagStatusProps {
     text: string;
@@ -4114,16 +4174,15 @@ export declare interface TagStatusProps {
      * Sometimes you need to clarify the status for screen reader users
      * E.g., when showing a tooltip for sighted user, provide the tootip text to this prop because tooltips aren't accessible
      */
-    additionalAccesibleText?: string;
+    additionalAccessibleText?: string;
 }
 
 export declare interface TagTeamProps {
-    teamName: string;
-    teamImageUrl: string;
-    onClick?: () => void;
+    name: string;
+    src?: string;
 }
 
-export declare type TagType = keyof TagTypeMapping;
+export declare type TagType = (typeof tagTypes)[number];
 
 declare type TagTypeMapping = {
     dot: TagDataType<"dot">;
@@ -4136,7 +4195,9 @@ declare type TagTypeMapping = {
     raw: TagDataType<"raw">;
 };
 
-declare type TagVariant = BaseTag<{
+declare const tagTypes: readonly ["dot", "person", "team", "company", "alert", "status", "balance", "raw"];
+
+export declare type TagVariant = BaseTag<{
     type: "dot";
 } & TagDotProps> | BaseTag<{
     type: "person";
@@ -4634,7 +4695,7 @@ declare const valueDisplayRenderers: {
 
 declare type ValueDisplayVisualizationType = "table" | "card" | "list" | (string & {});
 
-export declare type Variant = "neutral" | "info" | "positive" | "warning" | "critical";
+export declare type Variant = (typeof statuses)[number];
 
 export declare const VerticalBarChart: ForwardRefExoticComponent<Omit<ChartPropsBase<ChartConfig_2> & {
 label?: boolean;
@@ -4684,10 +4745,6 @@ declare interface WithTooltipDescription {
     description?: string;
 }
 
-declare type WithTooltipDescription_2 = {
-    description?: string;
-};
-
 export { }