@pixpilot/shadcn-ui 0.22.0 → 0.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -81,8 +81,14 @@ const commonColors = [
81
81
  }
82
82
  ];
83
83
  const DEFAULT_COLOR = "#000000";
84
+ const DEFAULT_SECTIONS = [
85
+ "swatch",
86
+ "picker",
87
+ "format-select",
88
+ "input"
89
+ ];
84
90
  const ColorPickerBase = (props) => {
85
- const { value: propValue, onChange, onValueChange, layout = "full", presetColors, format, defaultFormat = "hex", onFormatChange, children,...rest } = props;
91
+ const { value: propValue, onChange, onValueChange, layout = "full", presetColors, sections, format, defaultFormat = "hex", onFormatChange, contentProps, children,...rest } = props;
86
92
  const { currentValue, handleValueChange } = require_use_color_picker_base_value.useColorPickerBaseValue({
87
93
  value: propValue,
88
94
  defaultValue: DEFAULT_COLOR,
@@ -97,6 +103,7 @@ const ColorPickerBase = (props) => {
97
103
  handleValueChange
98
104
  });
99
105
  const [open, setOpen] = (0, react.useState)(false);
106
+ const resolvedSections = sections ?? DEFAULT_SECTIONS;
100
107
  let colors = presetColors || commonColors;
101
108
  const handleOpen = (0, react.useCallback)((isOpen) => {
102
109
  setOpen(isOpen);
@@ -119,13 +126,17 @@ const ColorPickerBase = (props) => {
119
126
  isPickerOpen: open
120
127
  })
121
128
  }), layout === "compact" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerCompact.ColorPickerCompact, {
129
+ ...contentProps,
122
130
  onValueChange: handleSwatchSelect,
123
- layout,
124
- presetColors: colors
131
+ presetColors: colors,
132
+ sections: resolvedSections,
133
+ currentValue
125
134
  }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerFull.ColorPickerFull, {
135
+ ...contentProps,
126
136
  onValueChange: handleSwatchSelect,
127
- layout,
128
- presetColors: colors
137
+ presetColors: colors,
138
+ sections: resolvedSections,
139
+ currentValue
129
140
  })]
130
141
  });
131
142
  };
@@ -77,8 +77,14 @@ const commonColors = [
77
77
  }
78
78
  ];
79
79
  const DEFAULT_COLOR = "#000000";
80
+ const DEFAULT_SECTIONS = [
81
+ "swatch",
82
+ "picker",
83
+ "format-select",
84
+ "input"
85
+ ];
80
86
  const ColorPickerBase = (props) => {
81
- const { value: propValue, onChange, onValueChange, layout = "full", presetColors, format, defaultFormat = "hex", onFormatChange, children,...rest } = props;
87
+ const { value: propValue, onChange, onValueChange, layout = "full", presetColors, sections, format, defaultFormat = "hex", onFormatChange, contentProps, children,...rest } = props;
82
88
  const { currentValue, handleValueChange } = useColorPickerBaseValue({
83
89
  value: propValue,
84
90
  defaultValue: DEFAULT_COLOR,
@@ -93,6 +99,7 @@ const ColorPickerBase = (props) => {
93
99
  handleValueChange
94
100
  });
95
101
  const [open, setOpen] = useState(false);
102
+ const resolvedSections = sections ?? DEFAULT_SECTIONS;
96
103
  let colors = presetColors || commonColors;
97
104
  const handleOpen = useCallback((isOpen) => {
98
105
  setOpen(isOpen);
@@ -115,13 +122,17 @@ const ColorPickerBase = (props) => {
115
122
  isPickerOpen: open
116
123
  })
117
124
  }), layout === "compact" ? /* @__PURE__ */ jsx(ColorPickerCompact, {
125
+ ...contentProps,
118
126
  onValueChange: handleSwatchSelect,
119
- layout,
120
- presetColors: colors
127
+ presetColors: colors,
128
+ sections: resolvedSections,
129
+ currentValue
121
130
  }) : /* @__PURE__ */ jsx(ColorPickerFull, {
131
+ ...contentProps,
122
132
  onValueChange: handleSwatchSelect,
123
- layout,
124
- presetColors: colors
133
+ presetColors: colors,
134
+ sections: resolvedSections,
135
+ currentValue
125
136
  })]
126
137
  });
127
138
  };
@@ -14,36 +14,41 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
14
14
 
15
15
  //#region src/ColorPickerBase/ColorPickerCompact.tsx
16
16
  const ColorPickerCompact = react.default.memo((props) => {
17
- const { onValueChange, layout = "full", presetColors } = props;
17
+ const { onValueChange, presetColors, sections, currentValue } = props;
18
+ const enabledSections = new Set(sections);
19
+ const showPicker = enabledSections.has("picker");
20
+ const showSwatch = enabledSections.has("swatch");
21
+ const showFormatSelect = enabledSections.has("format-select");
22
+ const showInput = enabledSections.has("input");
18
23
  const [showFullPicker, setShowFullPicker] = (0, react.useState)(false);
19
- return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ColorPickerContent.ColorPickerContent, {
20
- className: "w-[280px] xs:w-[300px]",
21
- children: [
22
- showFullPicker && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerArea, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
23
- className: "flex items-center gap-2",
24
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerEyeDropper, { className: "hidden xs:flex " }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
25
- className: "flex-1 space-y-2",
26
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerHueSlider, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerAlphaSlider, {})]
27
- })]
28
- })] }),
29
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
30
- className: "gap-2 flex flex-wrap",
31
- children: [presetColors.map((color) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteSwatch.PaletteSwatch, {
32
- color,
33
- onSelect: onValueChange
34
- }, color.value)), layout === "compact" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteButton.PaletteButton, {
35
- onClick: () => setShowFullPicker(!showFullPicker),
36
- "aria-label": "Toggle full color picker",
37
- className: "flex items-center justify-center border-input bg-input hover:bg-accent hover:text-accent-foreground",
38
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Droplet, { className: "h-4 w-4" })
39
- })]
40
- }),
41
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
42
- className: "flex items-center gap-2 w-full",
43
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerFormatSelect, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerInput.ColorPickerInput, {})]
44
- })
45
- ]
46
- });
24
+ const shouldShowPickerUi = showPicker && (showSwatch ? showFullPicker : true);
25
+ const canTogglePickerUi = showPicker && showSwatch;
26
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ColorPickerContent.ColorPickerContent, { children: [
27
+ shouldShowPickerUi && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerArea, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
28
+ className: "flex items-center gap-2",
29
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerEyeDropper, { className: "hidden xs:flex " }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
30
+ className: "flex-1 space-y-2",
31
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerHueSlider, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerAlphaSlider, {})]
32
+ })]
33
+ })] }),
34
+ showSwatch && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
35
+ className: "gap-2 flex flex-wrap",
36
+ children: [presetColors.map((color) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteSwatch.PaletteSwatch, {
37
+ color,
38
+ onSelect: onValueChange,
39
+ selectedValue: currentValue
40
+ }, color.value)), canTogglePickerUi && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteButton.PaletteButton, {
41
+ onClick: () => setShowFullPicker(!showFullPicker),
42
+ "aria-label": "Toggle full color picker",
43
+ className: "flex items-center justify-center border-input bg-input hover:bg-accent hover:text-accent-foreground",
44
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Droplet, { className: "h-4 w-4" })
45
+ })]
46
+ }),
47
+ (showFormatSelect || showInput) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
48
+ className: "flex items-center gap-2 w-full",
49
+ children: [showFormatSelect && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerFormatSelect, {}), showInput && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerInput.ColorPickerInput, {})]
50
+ })
51
+ ] });
47
52
  });
48
53
  ColorPickerCompact.displayName = "ColorPickerCompact";
49
54
 
@@ -9,36 +9,41 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
9
9
 
10
10
  //#region src/ColorPickerBase/ColorPickerCompact.tsx
11
11
  const ColorPickerCompact = React.memo((props) => {
12
- const { onValueChange, layout = "full", presetColors } = props;
12
+ const { onValueChange, presetColors, sections, currentValue } = props;
13
+ const enabledSections = new Set(sections);
14
+ const showPicker = enabledSections.has("picker");
15
+ const showSwatch = enabledSections.has("swatch");
16
+ const showFormatSelect = enabledSections.has("format-select");
17
+ const showInput = enabledSections.has("input");
13
18
  const [showFullPicker, setShowFullPicker] = useState(false);
14
- return /* @__PURE__ */ jsxs(ColorPickerContent$1, {
15
- className: "w-[280px] xs:w-[300px]",
16
- children: [
17
- showFullPicker && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ColorPickerArea, {}), /* @__PURE__ */ jsxs("div", {
18
- className: "flex items-center gap-2",
19
- children: [/* @__PURE__ */ jsx(ColorPickerEyeDropper, { className: "hidden xs:flex " }), /* @__PURE__ */ jsxs("div", {
20
- className: "flex-1 space-y-2",
21
- children: [/* @__PURE__ */ jsx(ColorPickerHueSlider, {}), /* @__PURE__ */ jsx(ColorPickerAlphaSlider, {})]
22
- })]
23
- })] }),
24
- /* @__PURE__ */ jsxs("div", {
25
- className: "gap-2 flex flex-wrap",
26
- children: [presetColors.map((color) => /* @__PURE__ */ jsx(PaletteSwatch, {
27
- color,
28
- onSelect: onValueChange
29
- }, color.value)), layout === "compact" && /* @__PURE__ */ jsx(PaletteButton, {
30
- onClick: () => setShowFullPicker(!showFullPicker),
31
- "aria-label": "Toggle full color picker",
32
- className: "flex items-center justify-center border-input bg-input hover:bg-accent hover:text-accent-foreground",
33
- children: /* @__PURE__ */ jsx(Droplet, { className: "h-4 w-4" })
34
- })]
35
- }),
36
- /* @__PURE__ */ jsxs("div", {
37
- className: "flex items-center gap-2 w-full",
38
- children: [/* @__PURE__ */ jsx(ColorPickerFormatSelect, {}), /* @__PURE__ */ jsx(ColorPickerInput$1, {})]
39
- })
40
- ]
41
- });
19
+ const shouldShowPickerUi = showPicker && (showSwatch ? showFullPicker : true);
20
+ const canTogglePickerUi = showPicker && showSwatch;
21
+ return /* @__PURE__ */ jsxs(ColorPickerContent$1, { children: [
22
+ shouldShowPickerUi && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ColorPickerArea, {}), /* @__PURE__ */ jsxs("div", {
23
+ className: "flex items-center gap-2",
24
+ children: [/* @__PURE__ */ jsx(ColorPickerEyeDropper, { className: "hidden xs:flex " }), /* @__PURE__ */ jsxs("div", {
25
+ className: "flex-1 space-y-2",
26
+ children: [/* @__PURE__ */ jsx(ColorPickerHueSlider, {}), /* @__PURE__ */ jsx(ColorPickerAlphaSlider, {})]
27
+ })]
28
+ })] }),
29
+ showSwatch && /* @__PURE__ */ jsxs("div", {
30
+ className: "gap-2 flex flex-wrap",
31
+ children: [presetColors.map((color) => /* @__PURE__ */ jsx(PaletteSwatch, {
32
+ color,
33
+ onSelect: onValueChange,
34
+ selectedValue: currentValue
35
+ }, color.value)), canTogglePickerUi && /* @__PURE__ */ jsx(PaletteButton, {
36
+ onClick: () => setShowFullPicker(!showFullPicker),
37
+ "aria-label": "Toggle full color picker",
38
+ className: "flex items-center justify-center border-input bg-input hover:bg-accent hover:text-accent-foreground",
39
+ children: /* @__PURE__ */ jsx(Droplet, { className: "h-4 w-4" })
40
+ })]
41
+ }),
42
+ (showFormatSelect || showInput) && /* @__PURE__ */ jsxs("div", {
43
+ className: "flex items-center gap-2 w-full",
44
+ children: [showFormatSelect && /* @__PURE__ */ jsx(ColorPickerFormatSelect, {}), showInput && /* @__PURE__ */ jsx(ColorPickerInput$1, {})]
45
+ })
46
+ ] });
42
47
  });
43
48
  ColorPickerCompact.displayName = "ColorPickerCompact";
44
49
 
@@ -8,9 +8,16 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
8
8
 
9
9
  //#region src/ColorPickerBase/ColorPickerContent.tsx
10
10
  const ColorPickerContent = (props) => {
11
+ const { children, className, width,...rest } = props;
12
+ const handleOpenAutoFocus = react.default.useCallback((event) => {
13
+ event.preventDefault();
14
+ }, []);
11
15
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerContent, {
12
- ...props,
13
- className: (0, __pixpilot_shadcn.cn)("w-[280px] xs:w-[300px]", props.className)
16
+ ...rest,
17
+ className: (0, __pixpilot_shadcn.cn)("w-[280px] xs:w-[300px]", className),
18
+ style: width !== void 0 ? { width } : void 0,
19
+ onOpenAutoFocus: handleOpenAutoFocus,
20
+ children
14
21
  });
15
22
  };
16
23
  ColorPickerContent.displayName = "ColorPickerContent";
@@ -4,9 +4,16 @@ import { jsx } from "react/jsx-runtime";
4
4
 
5
5
  //#region src/ColorPickerBase/ColorPickerContent.tsx
6
6
  const ColorPickerContent$1 = (props) => {
7
+ const { children, className, width,...rest } = props;
8
+ const handleOpenAutoFocus = React.useCallback((event) => {
9
+ event.preventDefault();
10
+ }, []);
7
11
  return /* @__PURE__ */ jsx(ColorPickerContent, {
8
- ...props,
9
- className: cn("w-[280px] xs:w-[300px]", props.className)
12
+ ...rest,
13
+ className: cn("w-[280px] xs:w-[300px]", className),
14
+ style: width !== void 0 ? { width } : void 0,
15
+ onOpenAutoFocus: handleOpenAutoFocus,
16
+ children
10
17
  });
11
18
  };
12
19
  ColorPickerContent$1.displayName = "ColorPickerContent";
@@ -11,27 +11,36 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
11
11
 
12
12
  //#region src/ColorPickerBase/ColorPickerFull.tsx
13
13
  const ColorPickerFull = react.default.memo((props) => {
14
- const { onValueChange, presetColors } = props;
15
- return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ColorPickerContent.ColorPickerContent, { children: [
16
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerArea, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
17
- className: "flex items-center gap-2",
18
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerEyeDropper, { className: "hidden xs:flex " }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
19
- className: "flex-1 space-y-2",
20
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerHueSlider, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerAlphaSlider, {})]
21
- })]
22
- })] }),
23
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
24
- className: "gap-2 flex flex-wrap",
25
- children: presetColors.map((color) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteSwatch.PaletteSwatch, {
26
- color,
27
- onSelect: onValueChange
28
- }, color.value))
29
- }),
30
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
31
- className: "flex items-center gap-2 w-full",
32
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerFormatSelect, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerInput.ColorPickerInput, {})]
33
- })
34
- ] });
14
+ const { onValueChange, presetColors, sections, currentValue,...rest } = props;
15
+ const enabledSections = new Set(sections);
16
+ const showPicker = enabledSections.has("picker");
17
+ const showSwatch = enabledSections.has("swatch");
18
+ const showFormatSelect = enabledSections.has("format-select");
19
+ const showInput = enabledSections.has("input");
20
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ColorPickerContent.ColorPickerContent, {
21
+ ...rest,
22
+ children: [
23
+ showPicker && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerArea, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
24
+ className: "flex items-center gap-2",
25
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerEyeDropper, { className: "hidden xs:flex " }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
26
+ className: "flex-1 space-y-2",
27
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerHueSlider, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerAlphaSlider, {})]
28
+ })]
29
+ })] }),
30
+ showSwatch && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
31
+ className: "gap-2 flex flex-wrap",
32
+ children: presetColors.map((color) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteSwatch.PaletteSwatch, {
33
+ color,
34
+ onSelect: onValueChange,
35
+ selectedValue: currentValue
36
+ }, color.value))
37
+ }),
38
+ (showFormatSelect || showInput) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
39
+ className: "flex items-center gap-2 w-full",
40
+ children: [showFormatSelect && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerFormatSelect, {}), showInput && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerInput.ColorPickerInput, {})]
41
+ })
42
+ ]
43
+ });
35
44
  });
36
45
  ColorPickerFull.displayName = "ColorPickerContentFull";
37
46
 
@@ -7,27 +7,36 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
7
7
 
8
8
  //#region src/ColorPickerBase/ColorPickerFull.tsx
9
9
  const ColorPickerFull = React.memo((props) => {
10
- const { onValueChange, presetColors } = props;
11
- return /* @__PURE__ */ jsxs(ColorPickerContent$1, { children: [
12
- /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ColorPickerArea, {}), /* @__PURE__ */ jsxs("div", {
13
- className: "flex items-center gap-2",
14
- children: [/* @__PURE__ */ jsx(ColorPickerEyeDropper, { className: "hidden xs:flex " }), /* @__PURE__ */ jsxs("div", {
15
- className: "flex-1 space-y-2",
16
- children: [/* @__PURE__ */ jsx(ColorPickerHueSlider, {}), /* @__PURE__ */ jsx(ColorPickerAlphaSlider, {})]
17
- })]
18
- })] }),
19
- /* @__PURE__ */ jsx("div", {
20
- className: "gap-2 flex flex-wrap",
21
- children: presetColors.map((color) => /* @__PURE__ */ jsx(PaletteSwatch, {
22
- color,
23
- onSelect: onValueChange
24
- }, color.value))
25
- }),
26
- /* @__PURE__ */ jsxs("div", {
27
- className: "flex items-center gap-2 w-full",
28
- children: [/* @__PURE__ */ jsx(ColorPickerFormatSelect, {}), /* @__PURE__ */ jsx(ColorPickerInput$1, {})]
29
- })
30
- ] });
10
+ const { onValueChange, presetColors, sections, currentValue,...rest } = props;
11
+ const enabledSections = new Set(sections);
12
+ const showPicker = enabledSections.has("picker");
13
+ const showSwatch = enabledSections.has("swatch");
14
+ const showFormatSelect = enabledSections.has("format-select");
15
+ const showInput = enabledSections.has("input");
16
+ return /* @__PURE__ */ jsxs(ColorPickerContent$1, {
17
+ ...rest,
18
+ children: [
19
+ showPicker && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ColorPickerArea, {}), /* @__PURE__ */ jsxs("div", {
20
+ className: "flex items-center gap-2",
21
+ children: [/* @__PURE__ */ jsx(ColorPickerEyeDropper, { className: "hidden xs:flex " }), /* @__PURE__ */ jsxs("div", {
22
+ className: "flex-1 space-y-2",
23
+ children: [/* @__PURE__ */ jsx(ColorPickerHueSlider, {}), /* @__PURE__ */ jsx(ColorPickerAlphaSlider, {})]
24
+ })]
25
+ })] }),
26
+ showSwatch && /* @__PURE__ */ jsx("div", {
27
+ className: "gap-2 flex flex-wrap",
28
+ children: presetColors.map((color) => /* @__PURE__ */ jsx(PaletteSwatch, {
29
+ color,
30
+ onSelect: onValueChange,
31
+ selectedValue: currentValue
32
+ }, color.value))
33
+ }),
34
+ (showFormatSelect || showInput) && /* @__PURE__ */ jsxs("div", {
35
+ className: "flex items-center gap-2 w-full",
36
+ children: [showFormatSelect && /* @__PURE__ */ jsx(ColorPickerFormatSelect, {}), showInput && /* @__PURE__ */ jsx(ColorPickerInput$1, {})]
37
+ })
38
+ ]
39
+ });
31
40
  });
32
41
  ColorPickerFull.displayName = "ColorPickerContentFull";
33
42
 
@@ -8,9 +8,21 @@ let react_jsx_runtime = require("react/jsx-runtime");
8
8
  react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
9
9
 
10
10
  //#region src/ColorPickerBase/PaletteSwatch.tsx
11
- const PaletteSwatch = ({ color, onSelect, className }) => {
11
+ const PaletteSwatch = ({ color, onSelect, className, selectedValue }) => {
12
12
  const colorValue = color?.value ?? "rgb(0,0,0,0)";
13
13
  const colorLabel = color?.label;
14
+ const normalizeColor = (0, react.useCallback)((value) => {
15
+ const parsed = __pixpilot_shadcn.colorUtils.parseColorString(value);
16
+ if (!parsed) return null;
17
+ return __pixpilot_shadcn.colorUtils.colorToString(parsed, "hex").trim().toLowerCase();
18
+ }, []);
19
+ const isSelected = (() => {
20
+ if (selectedValue === void 0 || selectedValue.trim() === "") return false;
21
+ const a = normalizeColor(selectedValue);
22
+ const b = normalizeColor(colorValue);
23
+ if (a === null || b === null) return false;
24
+ return a === b;
25
+ })();
14
26
  const handleClick = (0, react.useCallback)(() => {
15
27
  if (onSelect) onSelect(colorValue);
16
28
  }, [colorValue, onSelect]);
@@ -19,8 +31,9 @@ const PaletteSwatch = ({ color, onSelect, className }) => {
19
31
  backgroundImage: `linear-gradient(${colorValue}, ${colorValue}), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%)`,
20
32
  backgroundSize: "auto, 8px 8px"
21
33
  },
22
- className,
23
- onClick: handleClick
34
+ className: (0, __pixpilot_shadcn.cn)(className, isSelected && "ring-2 ring-ring ring-offset-2 ring-offset-background border-ring"),
35
+ onClick: handleClick,
36
+ "aria-pressed": isSelected
24
37
  });
25
38
  if (colorLabel === null || colorLabel === void 0 || colorLabel === "") return button;
26
39
  return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TooltipTrigger, {
@@ -1,12 +1,24 @@
1
1
  import { PaletteButton } from "./PaletteButton.js";
2
- import { Tooltip, TooltipContent, TooltipTrigger } from "@pixpilot/shadcn";
2
+ import { Tooltip, TooltipContent, TooltipTrigger, cn, colorUtils } from "@pixpilot/shadcn";
3
3
  import { useCallback } from "react";
4
4
  import { jsx, jsxs } from "react/jsx-runtime";
5
5
 
6
6
  //#region src/ColorPickerBase/PaletteSwatch.tsx
7
- const PaletteSwatch = ({ color, onSelect, className }) => {
7
+ const PaletteSwatch = ({ color, onSelect, className, selectedValue }) => {
8
8
  const colorValue = color?.value ?? "rgb(0,0,0,0)";
9
9
  const colorLabel = color?.label;
10
+ const normalizeColor = useCallback((value) => {
11
+ const parsed = colorUtils.parseColorString(value);
12
+ if (!parsed) return null;
13
+ return colorUtils.colorToString(parsed, "hex").trim().toLowerCase();
14
+ }, []);
15
+ const isSelected = (() => {
16
+ if (selectedValue === void 0 || selectedValue.trim() === "") return false;
17
+ const a = normalizeColor(selectedValue);
18
+ const b = normalizeColor(colorValue);
19
+ if (a === null || b === null) return false;
20
+ return a === b;
21
+ })();
10
22
  const handleClick = useCallback(() => {
11
23
  if (onSelect) onSelect(colorValue);
12
24
  }, [colorValue, onSelect]);
@@ -15,8 +27,9 @@ const PaletteSwatch = ({ color, onSelect, className }) => {
15
27
  backgroundImage: `linear-gradient(${colorValue}, ${colorValue}), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%)`,
16
28
  backgroundSize: "auto, 8px 8px"
17
29
  },
18
- className,
19
- onClick: handleClick
30
+ className: cn(className, isSelected && "ring-2 ring-ring ring-offset-2 ring-offset-background border-ring"),
31
+ onClick: handleClick,
32
+ "aria-pressed": isSelected
20
33
  });
21
34
  if (colorLabel === null || colorLabel === void 0 || colorLabel === "") return button;
22
35
  return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
@@ -1,2 +1,2 @@
1
- import { ColorPickerBaseProps, PresetColor } from "./types.js";
1
+ import { ColorPickerBaseProps, ColorPickerBaseSection, PresetColor } from "./types.js";
2
2
  import { ColorPickerBase } from "./ColorPickerBase.js";
@@ -1,15 +1,26 @@
1
- import { ColorPickerProps } from "@pixpilot/shadcn";
1
+ import { ColorPickerContent, ColorPickerProps } from "@pixpilot/shadcn";
2
2
 
3
3
  //#region src/ColorPickerBase/types.d.ts
4
4
  interface PresetColor {
5
5
  label: string;
6
6
  value: string;
7
7
  }
8
+ type ColorPickerBaseSection = 'swatch' | 'picker' | 'format-select' | 'input';
9
+ type ColorPickerBaseSections = ReadonlyArray<ColorPickerBaseSection>;
10
+ interface ColorPickerContentWrapperProps extends React.ComponentProps<typeof ColorPickerContent> {
11
+ width?: number | string;
12
+ }
8
13
  interface ColorPickerBaseProps extends Omit<ColorPickerProps, 'onChange' | 'children'> {
9
14
  value?: string;
10
15
  onChange?: (value: string) => void;
11
16
  presetColors?: PresetColor[];
12
17
  layout?: 'full' | 'compact';
18
+ /**
19
+ * Controls which UI sections render in the picker content.
20
+ * Defaults to all sections: ['swatch', 'picker', 'format-select', 'input'].
21
+ */
22
+ sections?: ColorPickerBaseSections;
23
+ contentProps?: Partial<ColorPickerContentWrapperProps>;
13
24
  children: (props: {
14
25
  value?: string;
15
26
  onValueChange: (value: string) => void;
@@ -17,4 +28,4 @@ interface ColorPickerBaseProps extends Omit<ColorPickerProps, 'onChange' | 'chil
17
28
  }) => React.ReactNode;
18
29
  }
19
30
  //#endregion
20
- export { ColorPickerBaseProps, PresetColor };
31
+ export { ColorPickerBaseProps, ColorPickerBaseSection, PresetColor };
@@ -1,15 +1,26 @@
1
- import { ColorPickerProps } from "@pixpilot/shadcn";
1
+ import { ColorPickerContent, ColorPickerProps } from "@pixpilot/shadcn";
2
2
 
3
3
  //#region src/ColorPickerBase/types.d.ts
4
4
  interface PresetColor {
5
5
  label: string;
6
6
  value: string;
7
7
  }
8
+ type ColorPickerBaseSection = 'swatch' | 'picker' | 'format-select' | 'input';
9
+ type ColorPickerBaseSections = ReadonlyArray<ColorPickerBaseSection>;
10
+ interface ColorPickerContentWrapperProps extends React.ComponentProps<typeof ColorPickerContent> {
11
+ width?: number | string;
12
+ }
8
13
  interface ColorPickerBaseProps extends Omit<ColorPickerProps, 'onChange' | 'children'> {
9
14
  value?: string;
10
15
  onChange?: (value: string) => void;
11
16
  presetColors?: PresetColor[];
12
17
  layout?: 'full' | 'compact';
18
+ /**
19
+ * Controls which UI sections render in the picker content.
20
+ * Defaults to all sections: ['swatch', 'picker', 'format-select', 'input'].
21
+ */
22
+ sections?: ColorPickerBaseSections;
23
+ contentProps?: Partial<ColorPickerContentWrapperProps>;
13
24
  children: (props: {
14
25
  value?: string;
15
26
  onValueChange: (value: string) => void;
@@ -17,4 +28,4 @@ interface ColorPickerBaseProps extends Omit<ColorPickerProps, 'onChange' | 'chil
17
28
  }) => React.ReactNode;
18
29
  }
19
30
  //#endregion
20
- export { ColorPickerBaseProps, PresetColor };
31
+ export { ColorPickerBaseProps, ColorPickerBaseSection, PresetColor };
@@ -1,7 +1,7 @@
1
1
  import { FileUploadProps } from "./types/index.js";
2
- import * as react_jsx_runtime7 from "react/jsx-runtime";
2
+ import * as react_jsx_runtime9 from "react/jsx-runtime";
3
3
 
4
4
  //#region src/file-upload/FileUpload.d.ts
5
- declare function FileUpload(props: FileUploadProps): react_jsx_runtime7.JSX.Element;
5
+ declare function FileUpload(props: FileUploadProps): react_jsx_runtime9.JSX.Element;
6
6
  //#endregion
7
7
  export { FileUpload };
@@ -1,10 +1,10 @@
1
1
  import { FileUploadInlineProps } from "./types.js";
2
- import * as react_jsx_runtime8 from "react/jsx-runtime";
2
+ import * as react_jsx_runtime7 from "react/jsx-runtime";
3
3
 
4
4
  //#region src/file-upload-inline/FileUploadInline.d.ts
5
5
  /**
6
6
  * FileUploadInline - An inline file upload component using FileUpload primitives
7
7
  */
8
- declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime8.JSX.Element;
8
+ declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime7.JSX.Element;
9
9
  //#endregion
10
10
  export { FileUploadInline };
package/dist/index.d.cts CHANGED
@@ -10,7 +10,7 @@ import { CircleLoader, CircleLoaderProps } from "./circle-loader/circle-loader.c
10
10
  import "./circle-loader/index.cjs";
11
11
  import { CloseButtonRounded, CloseButtonRoundedProps } from "./CloseButtonRounded.cjs";
12
12
  import { CloseButtonAbsolute, PopoverCloseButtonProps } from "./CloseButtonAbsolute.cjs";
13
- import { ColorPickerBaseProps, PresetColor } from "./ColorPickerBase/types.cjs";
13
+ import { ColorPickerBaseProps, ColorPickerBaseSection, PresetColor } from "./ColorPickerBase/types.cjs";
14
14
  import { ColorPickerBase } from "./ColorPickerBase/ColorPickerBase.cjs";
15
15
  import { ColorPicker, ColorPickerProps } from "./ColorPicker/ColorPicker.cjs";
16
16
  import { BaseColorSelectProps, ColorSelect, ColorSelectOption } from "./ColorSelect.cjs";
@@ -62,4 +62,4 @@ import { ThemeToggle } from "./ThemeToggle.cjs";
62
62
  import { DEFAULT_ALERT_DURATION, ToastMessage, toast, toastError, toastInfo, toastSuccess, toastWarning } from "./toast/toast.cjs";
63
63
  import "./toast/index.cjs";
64
64
  import { cn } from "@pixpilot/shadcn";
65
- export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerBase, ColorPickerBaseProps, ColorPickerProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, DialogProvider, DialogProviderProps, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, PresetColor, RichTextEditor, RichTextEditorProps, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };
65
+ export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerBase, ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, DialogProvider, DialogProviderProps, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, PresetColor, RichTextEditor, RichTextEditorProps, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };
package/dist/index.d.ts CHANGED
@@ -10,7 +10,7 @@ import { CircleLoader, CircleLoaderProps } from "./circle-loader/circle-loader.j
10
10
  import "./circle-loader/index.js";
11
11
  import { CloseButtonRounded, CloseButtonRoundedProps } from "./CloseButtonRounded.js";
12
12
  import { CloseButtonAbsolute, PopoverCloseButtonProps } from "./CloseButtonAbsolute.js";
13
- import { ColorPickerBaseProps, PresetColor } from "./ColorPickerBase/types.js";
13
+ import { ColorPickerBaseProps, ColorPickerBaseSection, PresetColor } from "./ColorPickerBase/types.js";
14
14
  import { ColorPickerBase } from "./ColorPickerBase/ColorPickerBase.js";
15
15
  import "./ColorPickerBase/index.js";
16
16
  import { ColorPicker, ColorPickerProps } from "./ColorPicker/ColorPicker.js";
@@ -64,4 +64,4 @@ import { ThemeToggle } from "./ThemeToggle.js";
64
64
  import { DEFAULT_ALERT_DURATION, ToastMessage, toast, toastError, toastInfo, toastSuccess, toastWarning } from "./toast/toast.js";
65
65
  import "./toast/index.js";
66
66
  import { cn } from "@pixpilot/shadcn";
67
- export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerBase, ColorPickerBaseProps, ColorPickerProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, DialogProvider, DialogProviderProps, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, PresetColor, RichTextEditor, RichTextEditorProps, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };
67
+ export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerBase, ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, DialogProvider, DialogProviderProps, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, PresetColor, RichTextEditor, RichTextEditorProps, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };
@@ -1,6 +1,6 @@
1
1
  import { InputProps } from "@pixpilot/shadcn";
2
2
  import * as React$1 from "react";
3
- import * as react_jsx_runtime9 from "react/jsx-runtime";
3
+ import * as react_jsx_runtime8 from "react/jsx-runtime";
4
4
 
5
5
  //#region src/input/Input.d.ts
6
6
  type InputProps$1 = InputProps & {
@@ -10,6 +10,6 @@ type InputProps$1 = InputProps & {
10
10
  prefixClassName?: string;
11
11
  suffixClassName?: string;
12
12
  };
13
- declare function Input$1(props: InputProps$1): react_jsx_runtime9.JSX.Element;
13
+ declare function Input$1(props: InputProps$1): react_jsx_runtime8.JSX.Element;
14
14
  //#endregion
15
15
  export { Input$1 as Input, InputProps$1 as InputProps };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pixpilot/shadcn-ui",
3
3
  "type": "module",
4
- "version": "0.22.0",
4
+ "version": "0.24.0",
5
5
  "description": "Custom UI components and utilities built with shadcn/ui.",
6
6
  "author": "m.doaie <m.doaie@hotmail.com>",
7
7
  "license": "MIT",
@@ -57,10 +57,10 @@
57
57
  "react-dom": "19.2.0",
58
58
  "tsdown": "^0.15.12",
59
59
  "typescript": "^5.9.3",
60
- "@internal/eslint-config": "0.3.0",
61
- "@internal/hooks": "0.0.0",
62
60
  "@internal/prettier-config": "0.0.1",
63
61
  "@internal/tsconfig": "0.1.0",
62
+ "@internal/eslint-config": "0.3.0",
63
+ "@internal/hooks": "0.0.0",
64
64
  "@internal/tsdown-config": "0.1.0",
65
65
  "@internal/vitest-config": "0.1.0"
66
66
  },