@pixpilot/shadcn-ui 0.23.0 → 0.25.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.
Files changed (15) hide show
  1. package/dist/ColorPickerBase/ColorPickerBase.cjs +7 -5
  2. package/dist/ColorPickerBase/ColorPickerBase.js +7 -5
  3. package/dist/ColorPickerBase/ColorPickerCompact.cjs +28 -30
  4. package/dist/ColorPickerBase/ColorPickerCompact.js +28 -30
  5. package/dist/ColorPickerBase/ColorPickerContent.cjs +6 -1
  6. package/dist/ColorPickerBase/ColorPickerContent.js +6 -1
  7. package/dist/ColorPickerBase/ColorPickerFull.cjs +25 -21
  8. package/dist/ColorPickerBase/ColorPickerFull.js +25 -21
  9. package/dist/ColorPickerBase/PaletteSwatch.cjs +16 -3
  10. package/dist/ColorPickerBase/PaletteSwatch.js +17 -4
  11. package/dist/ColorPickerBase/types.d.cts +5 -1
  12. package/dist/ColorPickerBase/types.d.ts +5 -1
  13. package/dist/file-upload-inline/FileUploadInline.d.cts +2 -2
  14. package/dist/input/Input.d.cts +2 -2
  15. package/package.json +1 -1
package/dist/ColorPickerBase/ColorPickerBase.cjs CHANGED
@@ -88,7 +88,7 @@ const DEFAULT_SECTIONS = [
88
88
  "input"
89
89
  ];
90
90
  const ColorPickerBase = (props) => {
91
- const { value: propValue, onChange, onValueChange, layout = "full", presetColors, sections, 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;
92
92
  const { currentValue, handleValueChange } = require_use_color_picker_base_value.useColorPickerBaseValue({
93
93
  value: propValue,
94
94
  defaultValue: DEFAULT_COLOR,
@@ -126,15 +126,17 @@ const ColorPickerBase = (props) => {
126
126
  isPickerOpen: open
127
127
  })
128
128
  }), layout === "compact" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerCompact.ColorPickerCompact, {
129
+ ...contentProps,
129
130
  onValueChange: handleSwatchSelect,
130
- layout,
131
131
  presetColors: colors,
132
- sections: resolvedSections
132
+ sections: resolvedSections,
133
+ currentValue
133
134
  }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerFull.ColorPickerFull, {
135
+ ...contentProps,
134
136
  onValueChange: handleSwatchSelect,
135
- layout,
136
137
  presetColors: colors,
137
- sections: resolvedSections
138
+ sections: resolvedSections,
139
+ currentValue
138
140
  })]
139
141
  });
140
142
  };
package/dist/ColorPickerBase/ColorPickerBase.js CHANGED
@@ -84,7 +84,7 @@ const DEFAULT_SECTIONS = [
84
84
  "input"
85
85
  ];
86
86
  const ColorPickerBase = (props) => {
87
- const { value: propValue, onChange, onValueChange, layout = "full", presetColors, sections, 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;
88
88
  const { currentValue, handleValueChange } = useColorPickerBaseValue({
89
89
  value: propValue,
90
90
  defaultValue: DEFAULT_COLOR,
@@ -122,15 +122,17 @@ const ColorPickerBase = (props) => {
122
122
  isPickerOpen: open
123
123
  })
124
124
  }), layout === "compact" ? /* @__PURE__ */ jsx(ColorPickerCompact, {
125
+ ...contentProps,
125
126
  onValueChange: handleSwatchSelect,
126
- layout,
127
127
  presetColors: colors,
128
- sections: resolvedSections
128
+ sections: resolvedSections,
129
+ currentValue
129
130
  }) : /* @__PURE__ */ jsx(ColorPickerFull, {
131
+ ...contentProps,
130
132
  onValueChange: handleSwatchSelect,
131
- layout,
132
133
  presetColors: colors,
133
- sections: resolvedSections
134
+ sections: resolvedSections,
135
+ currentValue
134
136
  })]
135
137
  });
136
138
  };
package/dist/ColorPickerBase/ColorPickerCompact.cjs CHANGED
@@ -14,7 +14,7 @@ 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, sections } = props;
17
+ const { onValueChange, presetColors, sections, currentValue } = props;
18
18
  const enabledSections = new Set(sections);
19
19
  const showPicker = enabledSections.has("picker");
20
20
  const showSwatch = enabledSections.has("swatch");
@@ -22,35 +22,33 @@ const ColorPickerCompact = react.default.memo((props) => {
22
22
  const showInput = enabledSections.has("input");
23
23
  const [showFullPicker, setShowFullPicker] = (0, react.useState)(false);
24
24
  const shouldShowPickerUi = showPicker && (showSwatch ? showFullPicker : true);
25
- const canTogglePickerUi = showPicker && showSwatch && layout === "compact";
26
- return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ColorPickerContent.ColorPickerContent, {
27
- className: "w-[280px] xs:w-[300px]",
28
- children: [
29
- 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", {
30
- className: "flex items-center gap-2",
31
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerEyeDropper, { className: "hidden xs:flex " }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
32
- className: "flex-1 space-y-2",
33
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerHueSlider, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerAlphaSlider, {})]
34
- })]
35
- })] }),
36
- showSwatch && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
37
- className: "gap-2 flex flex-wrap",
38
- children: [presetColors.map((color) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteSwatch.PaletteSwatch, {
39
- color,
40
- onSelect: onValueChange
41
- }, color.value)), canTogglePickerUi && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteButton.PaletteButton, {
42
- onClick: () => setShowFullPicker(!showFullPicker),
43
- "aria-label": "Toggle full color picker",
44
- className: "flex items-center justify-center border-input bg-input hover:bg-accent hover:text-accent-foreground",
45
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Droplet, { className: "h-4 w-4" })
46
- })]
47
- }),
48
- (showFormatSelect || showInput) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
49
- className: "flex items-center gap-2 w-full",
50
- children: [showFormatSelect && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerFormatSelect, {}), showInput && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerInput.ColorPickerInput, {})]
51
- })
52
- ]
53
- });
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
+ ] });
54
52
  });
55
53
  ColorPickerCompact.displayName = "ColorPickerCompact";
56
54
 
package/dist/ColorPickerBase/ColorPickerCompact.js CHANGED
@@ -9,7 +9,7 @@ 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, sections } = props;
12
+ const { onValueChange, presetColors, sections, currentValue } = props;
13
13
  const enabledSections = new Set(sections);
14
14
  const showPicker = enabledSections.has("picker");
15
15
  const showSwatch = enabledSections.has("swatch");
@@ -17,35 +17,33 @@ const ColorPickerCompact = React.memo((props) => {
17
17
  const showInput = enabledSections.has("input");
18
18
  const [showFullPicker, setShowFullPicker] = useState(false);
19
19
  const shouldShowPickerUi = showPicker && (showSwatch ? showFullPicker : true);
20
- const canTogglePickerUi = showPicker && showSwatch && layout === "compact";
21
- return /* @__PURE__ */ jsxs(ColorPickerContent$1, {
22
- className: "w-[280px] xs:w-[300px]",
23
- children: [
24
- shouldShowPickerUi && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ColorPickerArea, {}), /* @__PURE__ */ jsxs("div", {
25
- className: "flex items-center gap-2",
26
- children: [/* @__PURE__ */ jsx(ColorPickerEyeDropper, { className: "hidden xs:flex " }), /* @__PURE__ */ jsxs("div", {
27
- className: "flex-1 space-y-2",
28
- children: [/* @__PURE__ */ jsx(ColorPickerHueSlider, {}), /* @__PURE__ */ jsx(ColorPickerAlphaSlider, {})]
29
- })]
30
- })] }),
31
- showSwatch && /* @__PURE__ */ jsxs("div", {
32
- className: "gap-2 flex flex-wrap",
33
- children: [presetColors.map((color) => /* @__PURE__ */ jsx(PaletteSwatch, {
34
- color,
35
- onSelect: onValueChange
36
- }, color.value)), canTogglePickerUi && /* @__PURE__ */ jsx(PaletteButton, {
37
- onClick: () => setShowFullPicker(!showFullPicker),
38
- "aria-label": "Toggle full color picker",
39
- className: "flex items-center justify-center border-input bg-input hover:bg-accent hover:text-accent-foreground",
40
- children: /* @__PURE__ */ jsx(Droplet, { className: "h-4 w-4" })
41
- })]
42
- }),
43
- (showFormatSelect || showInput) && /* @__PURE__ */ jsxs("div", {
44
- className: "flex items-center gap-2 w-full",
45
- children: [showFormatSelect && /* @__PURE__ */ jsx(ColorPickerFormatSelect, {}), showInput && /* @__PURE__ */ jsx(ColorPickerInput$1, {})]
46
- })
47
- ]
48
- });
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
+ ] });
49
47
  });
50
48
  ColorPickerCompact.displayName = "ColorPickerCompact";
51
49
 
package/dist/ColorPickerBase/ColorPickerContent.cjs CHANGED
@@ -8,10 +8,15 @@ 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,...rest } = props;
11
+ const { children, className, width,...rest } = props;
12
+ const handleOpenAutoFocus = react.default.useCallback((event) => {
13
+ event.preventDefault();
14
+ }, []);
12
15
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerContent, {
13
16
  ...rest,
14
17
  className: (0, __pixpilot_shadcn.cn)("w-[280px] xs:w-[300px]", className),
18
+ style: width !== void 0 ? { width } : void 0,
19
+ onOpenAutoFocus: handleOpenAutoFocus,
15
20
  children
16
21
  });
17
22
  };
package/dist/ColorPickerBase/ColorPickerContent.js CHANGED
@@ -4,10 +4,15 @@ 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,...rest } = props;
7
+ const { children, className, width,...rest } = props;
8
+ const handleOpenAutoFocus = React.useCallback((event) => {
9
+ event.preventDefault();
10
+ }, []);
8
11
  return /* @__PURE__ */ jsx(ColorPickerContent, {
9
12
  ...rest,
10
13
  className: cn("w-[280px] xs:w-[300px]", className),
14
+ style: width !== void 0 ? { width } : void 0,
15
+ onOpenAutoFocus: handleOpenAutoFocus,
11
16
  children
12
17
  });
13
18
  };
package/dist/ColorPickerBase/ColorPickerFull.cjs CHANGED
@@ -11,32 +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, sections } = props;
14
+ const { onValueChange, presetColors, sections, currentValue,...rest } = props;
15
15
  const enabledSections = new Set(sections);
16
16
  const showPicker = enabledSections.has("picker");
17
17
  const showSwatch = enabledSections.has("swatch");
18
18
  const showFormatSelect = enabledSections.has("format-select");
19
19
  const showInput = enabledSections.has("input");
20
- return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ColorPickerContent.ColorPickerContent, { children: [
21
- 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", {
22
- className: "flex items-center gap-2",
23
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerEyeDropper, { className: "hidden xs:flex " }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
24
- className: "flex-1 space-y-2",
25
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerHueSlider, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerAlphaSlider, {})]
26
- })]
27
- })] }),
28
- showSwatch && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
29
- className: "gap-2 flex flex-wrap",
30
- children: presetColors.map((color) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteSwatch.PaletteSwatch, {
31
- color,
32
- onSelect: onValueChange
33
- }, color.value))
34
- }),
35
- (showFormatSelect || showInput) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
36
- className: "flex items-center gap-2 w-full",
37
- children: [showFormatSelect && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerFormatSelect, {}), showInput && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerInput.ColorPickerInput, {})]
38
- })
39
- ] });
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
+ });
40
44
  });
41
45
  ColorPickerFull.displayName = "ColorPickerContentFull";
42
46
 
package/dist/ColorPickerBase/ColorPickerFull.js CHANGED
@@ -7,32 +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, sections } = props;
10
+ const { onValueChange, presetColors, sections, currentValue,...rest } = props;
11
11
  const enabledSections = new Set(sections);
12
12
  const showPicker = enabledSections.has("picker");
13
13
  const showSwatch = enabledSections.has("swatch");
14
14
  const showFormatSelect = enabledSections.has("format-select");
15
15
  const showInput = enabledSections.has("input");
16
- return /* @__PURE__ */ jsxs(ColorPickerContent$1, { children: [
17
- showPicker && /* @__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
- showSwatch && /* @__PURE__ */ jsx("div", {
25
- className: "gap-2 flex flex-wrap",
26
- children: presetColors.map((color) => /* @__PURE__ */ jsx(PaletteSwatch, {
27
- color,
28
- onSelect: onValueChange
29
- }, color.value))
30
- }),
31
- (showFormatSelect || showInput) && /* @__PURE__ */ jsxs("div", {
32
- className: "flex items-center gap-2 w-full",
33
- children: [showFormatSelect && /* @__PURE__ */ jsx(ColorPickerFormatSelect, {}), showInput && /* @__PURE__ */ jsx(ColorPickerInput$1, {})]
34
- })
35
- ] });
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
+ });
36
40
  });
37
41
  ColorPickerFull.displayName = "ColorPickerContentFull";
38
42
 
package/dist/ColorPickerBase/PaletteSwatch.cjs CHANGED
@@ -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, {
package/dist/ColorPickerBase/PaletteSwatch.js CHANGED
@@ -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, {
package/dist/ColorPickerBase/types.d.cts CHANGED
@@ -1,4 +1,4 @@
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 {
@@ -7,6 +7,9 @@ interface PresetColor {
7
7
  }
8
8
  type ColorPickerBaseSection = 'swatch' | 'picker' | 'format-select' | 'input';
9
9
  type ColorPickerBaseSections = ReadonlyArray<ColorPickerBaseSection>;
10
+ interface ColorPickerContentWrapperProps extends React.ComponentProps<typeof ColorPickerContent> {
11
+ width?: number | string;
12
+ }
10
13
  interface ColorPickerBaseProps extends Omit<ColorPickerProps, 'onChange' | 'children'> {
11
14
  value?: string;
12
15
  onChange?: (value: string) => void;
@@ -17,6 +20,7 @@ interface ColorPickerBaseProps extends Omit<ColorPickerProps, 'onChange' | 'chil
17
20
  * Defaults to all sections: ['swatch', 'picker', 'format-select', 'input'].
18
21
  */
19
22
  sections?: ColorPickerBaseSections;
23
+ contentProps?: Partial<ColorPickerContentWrapperProps>;
20
24
  children: (props: {
21
25
  value?: string;
22
26
  onValueChange: (value: string) => void;
package/dist/ColorPickerBase/types.d.ts CHANGED
@@ -1,4 +1,4 @@
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 {
@@ -7,6 +7,9 @@ interface PresetColor {
7
7
  }
8
8
  type ColorPickerBaseSection = 'swatch' | 'picker' | 'format-select' | 'input';
9
9
  type ColorPickerBaseSections = ReadonlyArray<ColorPickerBaseSection>;
10
+ interface ColorPickerContentWrapperProps extends React.ComponentProps<typeof ColorPickerContent> {
11
+ width?: number | string;
12
+ }
10
13
  interface ColorPickerBaseProps extends Omit<ColorPickerProps, 'onChange' | 'children'> {
11
14
  value?: string;
12
15
  onChange?: (value: string) => void;
@@ -17,6 +20,7 @@ interface ColorPickerBaseProps extends Omit<ColorPickerProps, 'onChange' | 'chil
17
20
  * Defaults to all sections: ['swatch', 'picker', 'format-select', 'input'].
18
21
  */
19
22
  sections?: ColorPickerBaseSections;
23
+ contentProps?: Partial<ColorPickerContentWrapperProps>;
20
24
  children: (props: {
21
25
  value?: string;
22
26
  onValueChange: (value: string) => void;
package/dist/file-upload-inline/FileUploadInline.d.cts CHANGED
@@ -1,10 +1,10 @@
1
1
  import { FileUploadInlineProps } from "./types.cjs";
2
- import * as react_jsx_runtime7 from "react/jsx-runtime";
2
+ import * as react_jsx_runtime8 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_runtime7.JSX.Element;
8
+ declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime8.JSX.Element;
9
9
  //#endregion
10
10
  export { FileUploadInline };
package/dist/input/Input.d.cts CHANGED
@@ -1,4 +1,4 @@
1
- import * as react_jsx_runtime8 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime7 from "react/jsx-runtime";
2
2
  import { InputProps } from "@pixpilot/shadcn";
3
3
  import * as React$1 from "react";
4
4
 
@@ -10,6 +10,6 @@ type InputProps$1 = InputProps & {
10
10
  prefixClassName?: string;
11
11
  suffixClassName?: string;
12
12
  };
13
- declare function Input(props: InputProps$1): react_jsx_runtime8.JSX.Element;
13
+ declare function Input(props: InputProps$1): react_jsx_runtime7.JSX.Element;
14
14
  //#endregion
15
15
  export { 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.23.0",
4
+ "version": "0.25.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",