adilallo
73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import Incrementer, { type IncrementerProps } from "./Incrementer";
|
|
import InputLabel from "../../utility/InputLabel";
|
|
import type {
|
|
InputLabelPaletteValue,
|
|
InputLabelSizeValue,
|
|
} from "../../utility/InputLabel/InputLabel.types";
|
|
|
|
export interface IncrementerBlockProps extends IncrementerProps {
|
|
/** Label text displayed above the incrementer. */
|
|
label: string;
|
|
/** Show the help "?" icon next to the label. Defaults to `true`. */
|
|
helpIcon?: boolean;
|
|
/**
|
|
* Helper text shown to the right of the label. Pass a string or `true` to
|
|
* render the default "Optional text".
|
|
*/
|
|
helperText?: boolean | string;
|
|
/** Show an asterisk indicating a required field. */
|
|
asterisk?: boolean;
|
|
/**
|
|
* Size of the label (`"s"` or `"m"`). Defaults to `"s"` to match the Figma
|
|
* "Incrementer Block" spec.
|
|
*/
|
|
labelSize?: InputLabelSizeValue;
|
|
/** Palette. Defaults to `"default"`. */
|
|
palette?: InputLabelPaletteValue;
|
|
/**
|
|
* Class applied to the root `<div>` wrapping the label + incrementer. Use
|
|
* this to control the block's layout width (e.g. `w-full`).
|
|
*/
|
|
blockClassName?: string;
|
|
}
|
|
|
|
/**
|
|
* Figma: "Control / Incrementer Block" (`19883:13283`). An `InputLabel` plus
|
|
* an {@link Incrementer} row, stacked with a 12px gap.
|
|
*/
|
|
function IncrementerBlockComponent({
|
|
label,
|
|
helpIcon = true,
|
|
helperText,
|
|
asterisk,
|
|
labelSize = "s",
|
|
palette = "default",
|
|
blockClassName = "",
|
|
className,
|
|
...incrementerProps
|
|
}: IncrementerBlockProps) {
|
|
return (
|
|
<div
|
|
className={`flex flex-col items-start gap-[var(--measures-spacing-300,12px)] py-[8px] ${blockClassName}`.trim()}
|
|
data-figma-node="19883:13283"
|
|
>
|
|
<InputLabel
|
|
label={label}
|
|
helpIcon={helpIcon}
|
|
helperText={helperText}
|
|
asterisk={asterisk}
|
|
size={labelSize}
|
|
palette={palette}
|
|
/>
|
|
<Incrementer {...incrementerProps} className={className} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
IncrementerBlockComponent.displayName = "IncrementerBlock";
|
|
|
|
export default memo(IncrementerBlockComponent);
|