@pixpilot/shadcn-ui 0.21.0 → 0.23.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 (22) hide show
  1. package/dist/ColorPicker/ColorPicker.cjs +12 -4
  2. package/dist/ColorPicker/ColorPicker.d.cts +1 -0
  3. package/dist/ColorPicker/ColorPicker.d.ts +1 -0
  4. package/dist/ColorPicker/ColorPicker.js +12 -4
  5. package/dist/ColorPickerBase/ColorPickerBase.cjs +12 -3
  6. package/dist/ColorPickerBase/ColorPickerBase.js +12 -3
  7. package/dist/ColorPickerBase/ColorPickerCompact.cjs +13 -6
  8. package/dist/ColorPickerBase/ColorPickerCompact.js +13 -6
  9. package/dist/ColorPickerBase/ColorPickerContent.cjs +4 -2
  10. package/dist/ColorPickerBase/ColorPickerContent.js +4 -2
  11. package/dist/ColorPickerBase/ColorPickerFull.cjs +10 -5
  12. package/dist/ColorPickerBase/ColorPickerFull.js +10 -5
  13. package/dist/ColorPickerBase/index.d.ts +1 -1
  14. package/dist/ColorPickerBase/types.d.cts +8 -1
  15. package/dist/ColorPickerBase/types.d.ts +8 -1
  16. package/dist/file-upload/FileUpload.d.ts +2 -2
  17. package/dist/file-upload-inline/FileUploadInline.d.cts +2 -2
  18. package/dist/file-upload-inline/FileUploadInline.d.ts +2 -2
  19. package/dist/index.d.cts +2 -2
  20. package/dist/index.d.ts +2 -2
  21. package/dist/input/Input.d.cts +2 -2
  22. package/package.json +2 -2
package/dist/ColorPicker/ColorPicker.cjs CHANGED
@@ -19,14 +19,22 @@ function Swatch(props) {
19
19
  });
20
20
  }
21
21
  const ColorPicker = (props) => {
22
- const { variant = "input", placeholder = "Pick a color",...rest } = props;
22
+ const { variant = "input", placeholder = "Pick a color", formatDisplayValue,...rest } = props;
23
23
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerBase.ColorPickerBase, {
24
24
  ...rest,
25
25
  children: ({ value, onValueChange, isPickerOpen }) => {
26
+ const swatchColor = value != null && value !== "" ? value : void 0;
27
+ const renderSwatch = () => {
28
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Swatch, { color: swatchColor });
29
+ };
30
+ const renderDisplayValue = () => {
31
+ if (value == null || value === "") return placeholder;
32
+ return formatDisplayValue != null ? formatDisplayValue(value) : value;
33
+ };
26
34
  if (variant === "input") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.InputGroup, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupAddon, {
27
35
  align: "inline-start",
28
36
  className: "pl-0",
29
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Swatch, { color: value })
37
+ children: renderSwatch()
30
38
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupInput, {
31
39
  value: value ?? "",
32
40
  onPointerDown: (e) => {
@@ -46,11 +54,11 @@ const ColorPicker = (props) => {
46
54
  /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupAddon, {
47
55
  align: "inline-start",
48
56
  className: "pl-0",
49
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Swatch, { color: value })
57
+ children: renderSwatch()
50
58
  }),
51
59
  /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupText, {
52
60
  className: "flex-1 text-left text-foreground pl-2",
53
- children: value ?? placeholder
61
+ children: renderDisplayValue()
54
62
  }),
55
63
  /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupAddon, {
56
64
  align: "inline-end",
package/dist/ColorPicker/ColorPicker.d.cts CHANGED
@@ -4,6 +4,7 @@ import { ColorPickerBaseProps } from "../ColorPickerBase/types.cjs";
4
4
  interface ColorPickerProps extends Omit<ColorPickerBaseProps, 'children'> {
5
5
  variant?: 'button' | 'input';
6
6
  placeholder?: string;
7
+ formatDisplayValue?: (value: string) => React.ReactNode;
7
8
  }
8
9
  declare const ColorPicker: React.FC<ColorPickerProps>;
9
10
  //#endregion
package/dist/ColorPicker/ColorPicker.d.ts CHANGED
@@ -5,6 +5,7 @@ import "../ColorPickerBase/index.js";
5
5
  interface ColorPickerProps extends Omit<ColorPickerBaseProps, 'children'> {
6
6
  variant?: 'button' | 'input';
7
7
  placeholder?: string;
8
+ formatDisplayValue?: (value: string) => React.ReactNode;
8
9
  }
9
10
  declare const ColorPicker: React.FC<ColorPickerProps>;
10
11
  //#endregion
package/dist/ColorPicker/ColorPicker.js CHANGED
@@ -15,14 +15,22 @@ function Swatch(props) {
15
15
  });
16
16
  }
17
17
  const ColorPicker$1 = (props) => {
18
- const { variant = "input", placeholder = "Pick a color",...rest } = props;
18
+ const { variant = "input", placeholder = "Pick a color", formatDisplayValue,...rest } = props;
19
19
  return /* @__PURE__ */ jsx(ColorPickerBase, {
20
20
  ...rest,
21
21
  children: ({ value, onValueChange, isPickerOpen }) => {
22
+ const swatchColor = value != null && value !== "" ? value : void 0;
23
+ const renderSwatch = () => {
24
+ return /* @__PURE__ */ jsx(Swatch, { color: swatchColor });
25
+ };
26
+ const renderDisplayValue = () => {
27
+ if (value == null || value === "") return placeholder;
28
+ return formatDisplayValue != null ? formatDisplayValue(value) : value;
29
+ };
22
30
  if (variant === "input") return /* @__PURE__ */ jsxs(InputGroup, { children: [/* @__PURE__ */ jsx(InputGroupAddon, {
23
31
  align: "inline-start",
24
32
  className: "pl-0",
25
- children: /* @__PURE__ */ jsx(Swatch, { color: value })
33
+ children: renderSwatch()
26
34
  }), /* @__PURE__ */ jsx(InputGroupInput, {
27
35
  value: value ?? "",
28
36
  onPointerDown: (e) => {
@@ -42,11 +50,11 @@ const ColorPicker$1 = (props) => {
42
50
  /* @__PURE__ */ jsx(InputGroupAddon, {
43
51
  align: "inline-start",
44
52
  className: "pl-0",
45
- children: /* @__PURE__ */ jsx(Swatch, { color: value })
53
+ children: renderSwatch()
46
54
  }),
47
55
  /* @__PURE__ */ jsx(InputGroupText, {
48
56
  className: "flex-1 text-left text-foreground pl-2",
49
- children: value ?? placeholder
57
+ children: renderDisplayValue()
50
58
  }),
51
59
  /* @__PURE__ */ jsx(InputGroupAddon, {
52
60
  align: "inline-end",
package/dist/ColorPickerBase/ColorPickerBase.cjs CHANGED
@@ -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, 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);
@@ -121,11 +128,13 @@ const ColorPickerBase = (props) => {
121
128
  }), layout === "compact" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerCompact.ColorPickerCompact, {
122
129
  onValueChange: handleSwatchSelect,
123
130
  layout,
124
- presetColors: colors
131
+ presetColors: colors,
132
+ sections: resolvedSections
125
133
  }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerFull.ColorPickerFull, {
126
134
  onValueChange: handleSwatchSelect,
127
135
  layout,
128
- presetColors: colors
136
+ presetColors: colors,
137
+ sections: resolvedSections
129
138
  })]
130
139
  });
131
140
  };
package/dist/ColorPickerBase/ColorPickerBase.js CHANGED
@@ -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, 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);
@@ -117,11 +124,13 @@ const ColorPickerBase = (props) => {
117
124
  }), layout === "compact" ? /* @__PURE__ */ jsx(ColorPickerCompact, {
118
125
  onValueChange: handleSwatchSelect,
119
126
  layout,
120
- presetColors: colors
127
+ presetColors: colors,
128
+ sections: resolvedSections
121
129
  }) : /* @__PURE__ */ jsx(ColorPickerFull, {
122
130
  onValueChange: handleSwatchSelect,
123
131
  layout,
124
- presetColors: colors
132
+ presetColors: colors,
133
+ sections: resolvedSections
125
134
  })]
126
135
  });
127
136
  };
package/dist/ColorPickerBase/ColorPickerCompact.cjs CHANGED
@@ -14,33 +14,40 @@ 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, layout = "full", presetColors, sections } = 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);
24
+ const shouldShowPickerUi = showPicker && (showSwatch ? showFullPicker : true);
25
+ const canTogglePickerUi = showPicker && showSwatch && layout === "compact";
19
26
  return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ColorPickerContent.ColorPickerContent, {
20
27
  className: "w-[280px] xs:w-[300px]",
21
28
  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", {
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", {
23
30
  className: "flex items-center gap-2",
24
31
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerEyeDropper, { className: "hidden xs:flex " }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
25
32
  className: "flex-1 space-y-2",
26
33
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerHueSlider, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerAlphaSlider, {})]
27
34
  })]
28
35
  })] }),
29
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
36
+ showSwatch && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
30
37
  className: "gap-2 flex flex-wrap",
31
38
  children: [presetColors.map((color) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteSwatch.PaletteSwatch, {
32
39
  color,
33
40
  onSelect: onValueChange
34
- }, color.value)), layout === "compact" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteButton.PaletteButton, {
41
+ }, color.value)), canTogglePickerUi && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteButton.PaletteButton, {
35
42
  onClick: () => setShowFullPicker(!showFullPicker),
36
43
  "aria-label": "Toggle full color picker",
37
44
  className: "flex items-center justify-center border-input bg-input hover:bg-accent hover:text-accent-foreground",
38
45
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Droplet, { className: "h-4 w-4" })
39
46
  })]
40
47
  }),
41
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
48
+ (showFormatSelect || showInput) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
42
49
  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, {})]
50
+ children: [showFormatSelect && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerFormatSelect, {}), showInput && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerInput.ColorPickerInput, {})]
44
51
  })
45
52
  ]
46
53
  });
package/dist/ColorPickerBase/ColorPickerCompact.js CHANGED
@@ -9,33 +9,40 @@ 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, layout = "full", presetColors, sections } = 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);
19
+ const shouldShowPickerUi = showPicker && (showSwatch ? showFullPicker : true);
20
+ const canTogglePickerUi = showPicker && showSwatch && layout === "compact";
14
21
  return /* @__PURE__ */ jsxs(ColorPickerContent$1, {
15
22
  className: "w-[280px] xs:w-[300px]",
16
23
  children: [
17
- showFullPicker && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ColorPickerArea, {}), /* @__PURE__ */ jsxs("div", {
24
+ shouldShowPickerUi && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ColorPickerArea, {}), /* @__PURE__ */ jsxs("div", {
18
25
  className: "flex items-center gap-2",
19
26
  children: [/* @__PURE__ */ jsx(ColorPickerEyeDropper, { className: "hidden xs:flex " }), /* @__PURE__ */ jsxs("div", {
20
27
  className: "flex-1 space-y-2",
21
28
  children: [/* @__PURE__ */ jsx(ColorPickerHueSlider, {}), /* @__PURE__ */ jsx(ColorPickerAlphaSlider, {})]
22
29
  })]
23
30
  })] }),
24
- /* @__PURE__ */ jsxs("div", {
31
+ showSwatch && /* @__PURE__ */ jsxs("div", {
25
32
  className: "gap-2 flex flex-wrap",
26
33
  children: [presetColors.map((color) => /* @__PURE__ */ jsx(PaletteSwatch, {
27
34
  color,
28
35
  onSelect: onValueChange
29
- }, color.value)), layout === "compact" && /* @__PURE__ */ jsx(PaletteButton, {
36
+ }, color.value)), canTogglePickerUi && /* @__PURE__ */ jsx(PaletteButton, {
30
37
  onClick: () => setShowFullPicker(!showFullPicker),
31
38
  "aria-label": "Toggle full color picker",
32
39
  className: "flex items-center justify-center border-input bg-input hover:bg-accent hover:text-accent-foreground",
33
40
  children: /* @__PURE__ */ jsx(Droplet, { className: "h-4 w-4" })
34
41
  })]
35
42
  }),
36
- /* @__PURE__ */ jsxs("div", {
43
+ (showFormatSelect || showInput) && /* @__PURE__ */ jsxs("div", {
37
44
  className: "flex items-center gap-2 w-full",
38
- children: [/* @__PURE__ */ jsx(ColorPickerFormatSelect, {}), /* @__PURE__ */ jsx(ColorPickerInput$1, {})]
45
+ children: [showFormatSelect && /* @__PURE__ */ jsx(ColorPickerFormatSelect, {}), showInput && /* @__PURE__ */ jsx(ColorPickerInput$1, {})]
39
46
  })
40
47
  ]
41
48
  });
package/dist/ColorPickerBase/ColorPickerContent.cjs CHANGED
@@ -8,9 +8,11 @@ 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
12
  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)
13
+ ...rest,
14
+ className: (0, __pixpilot_shadcn.cn)("w-[280px] xs:w-[300px]", className),
15
+ children
14
16
  });
15
17
  };
16
18
  ColorPickerContent.displayName = "ColorPickerContent";
package/dist/ColorPickerBase/ColorPickerContent.js CHANGED
@@ -4,9 +4,11 @@ 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
8
  return /* @__PURE__ */ jsx(ColorPickerContent, {
8
- ...props,
9
- className: cn("w-[280px] xs:w-[300px]", props.className)
9
+ ...rest,
10
+ className: cn("w-[280px] xs:w-[300px]", className),
11
+ children
10
12
  });
11
13
  };
12
14
  ColorPickerContent$1.displayName = "ColorPickerContent";
package/dist/ColorPickerBase/ColorPickerFull.cjs CHANGED
@@ -11,25 +11,30 @@ 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;
14
+ const { onValueChange, presetColors, sections } = 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");
15
20
  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", {
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", {
17
22
  className: "flex items-center gap-2",
18
23
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerEyeDropper, { className: "hidden xs:flex " }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
19
24
  className: "flex-1 space-y-2",
20
25
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerHueSlider, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerAlphaSlider, {})]
21
26
  })]
22
27
  })] }),
23
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
28
+ showSwatch && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
24
29
  className: "gap-2 flex flex-wrap",
25
30
  children: presetColors.map((color) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteSwatch.PaletteSwatch, {
26
31
  color,
27
32
  onSelect: onValueChange
28
33
  }, color.value))
29
34
  }),
30
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
35
+ (showFormatSelect || showInput) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
31
36
  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, {})]
37
+ children: [showFormatSelect && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerFormatSelect, {}), showInput && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerInput.ColorPickerInput, {})]
33
38
  })
34
39
  ] });
35
40
  });
package/dist/ColorPickerBase/ColorPickerFull.js CHANGED
@@ -7,25 +7,30 @@ 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;
10
+ const { onValueChange, presetColors, sections } = 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");
11
16
  return /* @__PURE__ */ jsxs(ColorPickerContent$1, { children: [
12
- /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ColorPickerArea, {}), /* @__PURE__ */ jsxs("div", {
17
+ showPicker && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ColorPickerArea, {}), /* @__PURE__ */ jsxs("div", {
13
18
  className: "flex items-center gap-2",
14
19
  children: [/* @__PURE__ */ jsx(ColorPickerEyeDropper, { className: "hidden xs:flex " }), /* @__PURE__ */ jsxs("div", {
15
20
  className: "flex-1 space-y-2",
16
21
  children: [/* @__PURE__ */ jsx(ColorPickerHueSlider, {}), /* @__PURE__ */ jsx(ColorPickerAlphaSlider, {})]
17
22
  })]
18
23
  })] }),
19
- /* @__PURE__ */ jsx("div", {
24
+ showSwatch && /* @__PURE__ */ jsx("div", {
20
25
  className: "gap-2 flex flex-wrap",
21
26
  children: presetColors.map((color) => /* @__PURE__ */ jsx(PaletteSwatch, {
22
27
  color,
23
28
  onSelect: onValueChange
24
29
  }, color.value))
25
30
  }),
26
- /* @__PURE__ */ jsxs("div", {
31
+ (showFormatSelect || showInput) && /* @__PURE__ */ jsxs("div", {
27
32
  className: "flex items-center gap-2 w-full",
28
- children: [/* @__PURE__ */ jsx(ColorPickerFormatSelect, {}), /* @__PURE__ */ jsx(ColorPickerInput$1, {})]
33
+ children: [showFormatSelect && /* @__PURE__ */ jsx(ColorPickerFormatSelect, {}), showInput && /* @__PURE__ */ jsx(ColorPickerInput$1, {})]
29
34
  })
30
35
  ] });
31
36
  });
package/dist/ColorPickerBase/index.d.ts CHANGED
@@ -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";
package/dist/ColorPickerBase/types.d.cts CHANGED
@@ -5,11 +5,18 @@ 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>;
8
10
  interface ColorPickerBaseProps extends Omit<ColorPickerProps, 'onChange' | 'children'> {
9
11
  value?: string;
10
12
  onChange?: (value: string) => void;
11
13
  presetColors?: PresetColor[];
12
14
  layout?: 'full' | 'compact';
15
+ /**
16
+ * Controls which UI sections render in the picker content.
17
+ * Defaults to all sections: ['swatch', 'picker', 'format-select', 'input'].
18
+ */
19
+ sections?: ColorPickerBaseSections;
13
20
  children: (props: {
14
21
  value?: string;
15
22
  onValueChange: (value: string) => void;
@@ -17,4 +24,4 @@ interface ColorPickerBaseProps extends Omit<ColorPickerProps, 'onChange' | 'chil
17
24
  }) => React.ReactNode;
18
25
  }
19
26
  //#endregion
20
- export { ColorPickerBaseProps, PresetColor };
27
+ export { ColorPickerBaseProps, ColorPickerBaseSection, PresetColor };
package/dist/ColorPickerBase/types.d.ts CHANGED
@@ -5,11 +5,18 @@ 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>;
8
10
  interface ColorPickerBaseProps extends Omit<ColorPickerProps, 'onChange' | 'children'> {
9
11
  value?: string;
10
12
  onChange?: (value: string) => void;
11
13
  presetColors?: PresetColor[];
12
14
  layout?: 'full' | 'compact';
15
+ /**
16
+ * Controls which UI sections render in the picker content.
17
+ * Defaults to all sections: ['swatch', 'picker', 'format-select', 'input'].
18
+ */
19
+ sections?: ColorPickerBaseSections;
13
20
  children: (props: {
14
21
  value?: string;
15
22
  onValueChange: (value: string) => void;
@@ -17,4 +24,4 @@ interface ColorPickerBaseProps extends Omit<ColorPickerProps, 'onChange' | 'chil
17
24
  }) => React.ReactNode;
18
25
  }
19
26
  //#endregion
20
- export { ColorPickerBaseProps, PresetColor };
27
+ export { ColorPickerBaseProps, ColorPickerBaseSection, PresetColor };
package/dist/file-upload/FileUpload.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { FileUploadProps } from "./types/index.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/FileUpload.d.ts
5
- declare function FileUpload(props: FileUploadProps): react_jsx_runtime8.JSX.Element;
5
+ declare function FileUpload(props: FileUploadProps): react_jsx_runtime7.JSX.Element;
6
6
  //#endregion
7
7
  export { FileUpload };
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_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/file-upload-inline/FileUploadInline.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  import { FileUploadInlineProps } from "./types.js";
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/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 };
package/dist/input/Input.d.cts CHANGED
@@ -1,4 +1,4 @@
1
- import * as react_jsx_runtime7 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime8 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_runtime7.JSX.Element;
13
+ declare function Input(props: InputProps$1): react_jsx_runtime8.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.21.0",
4
+ "version": "0.23.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",
@@ -58,9 +58,9 @@
58
58
  "tsdown": "^0.15.12",
59
59
  "typescript": "^5.9.3",
60
60
  "@internal/eslint-config": "0.3.0",
61
+ "@internal/hooks": "0.0.0",
61
62
  "@internal/prettier-config": "0.0.1",
62
63
  "@internal/tsconfig": "0.1.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
  },