1import { ColorPicker } from "./ColorPicker.tsx";
2import { FieldLabel } from "./FieldLabel.tsx";
3
4export const Basic = () => (
5 <div style="display: flex; flex-direction: column; gap: 1rem;">
6 <div style="display: flex; gap: 8px; align-items: center">
7 <FieldLabel>Color:</FieldLabel>
8 <ColorPicker value="#ff005b" />
9 </div>
10 </div>
11);
12
13export const WithDataSync = () => (
14 <div style="display: flex; flex-direction: column; gap: 1rem;">
15 <div style="display: flex; gap: 8px; align-items: center">
16 <FieldLabel>Primary:</FieldLabel>
17 <ColorPicker
18 value="#ff005b"
19 data-sync="primaryColor"
20 data-color-picker
21 />
22 </div>
23 <div style="display: flex; gap: 8px; align-items: center">
24 <FieldLabel>Secondary:</FieldLabel>
25 <ColorPicker
26 value="#00ff5b"
27 data-sync="secondaryColor"
28 data-color-picker
29 />
30 </div>
31 </div>
32);
33
34export const meta = {
35 title: "Forms/ColorPicker",
36 description: "Color picker component with hex input",
37 component: ColorPicker,
38};
39