51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import { Box } from './Box';
|
||
import { Button } from './Button';
|
||
import { Text } from './Text';
|
||
|
||
export interface StepperProps {
|
||
value: number;
|
||
onChange: (value: number) => void;
|
||
min?: number;
|
||
max?: number;
|
||
label?: string;
|
||
disabled?: boolean;
|
||
}
|
||
|
||
export const Stepper = ({
|
||
value,
|
||
onChange,
|
||
min = 1,
|
||
max,
|
||
label,
|
||
disabled = false
|
||
}: StepperProps) => {
|
||
return (
|
||
<Box display="flex" alignItems="center" gap={2}>
|
||
{label && <Text size="xs" variant="low" weight="bold" uppercase>{label}</Text>}
|
||
<Box display="flex" alignItems="center" gap={1}>
|
||
<Button
|
||
variant="secondary"
|
||
size="sm"
|
||
onClick={() => onChange(value - 1)}
|
||
disabled={disabled || value <= min}
|
||
style={{ width: '2rem', height: '2rem', padding: 0 }}
|
||
>
|
||
−
|
||
</Button>
|
||
<Box width={10} height={8} display="flex" alignItems="center" justifyContent="center" bg="var(--ui-color-bg-surface-muted)" style={{ border: '1px solid var(--ui-color-border-default)', borderRadius: 'var(--ui-radius-md)' }}>
|
||
<Text size="sm" weight="bold" variant="high">{value}</Text>
|
||
</Box>
|
||
<Button
|
||
variant="secondary"
|
||
size="sm"
|
||
onClick={() => onChange(value + 1)}
|
||
disabled={disabled || (max !== undefined && value >= max)}
|
||
style={{ width: '2rem', height: '2rem', padding: 0 }}
|
||
>
|
||
+
|
||
</Button>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
};
|