@pixpilot/shadcn-ui 0.13.0 → 0.14.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 (7) hide show
  1. package/dist/ColorPicker/ColorPicker.cjs +24 -10
  2. package/dist/ColorPicker/ColorPicker.js +26 -12
  3. package/dist/ColorPickerBase/PaletteSwatch.cjs +2 -1
  4. package/dist/ColorPickerBase/PaletteSwatch.js +2 -1
  5. package/dist/Select.d.ts +2 -2
  6. package/dist/tags-input.d.ts +2 -2
  7. package/package.json +1 -1
package/dist/ColorPicker/ColorPicker.cjs CHANGED
@@ -13,6 +13,12 @@ let react_jsx_runtime = require("react/jsx-runtime");
13
13
  react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
14
14
 
15
15
  //#region src/ColorPicker/ColorPicker.tsx
16
+ function Swatch(props) {
17
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteSwatch.PaletteSwatch, {
18
+ color: props.color,
19
+ className: "rounded-sm"
20
+ });
21
+ }
16
22
  const ColorPicker = (props) => {
17
23
  const { variant = "input", placeholder = "Pick a color",...rest } = props;
18
24
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerBase.ColorPickerBase, {
@@ -21,7 +27,7 @@ const ColorPicker = (props) => {
21
27
  if (variant === "input") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.InputGroup, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupAddon, {
22
28
  align: "inline-start",
23
29
  className: "pl-1",
24
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteSwatch.PaletteSwatch, { color: value })
30
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Swatch, { color: value })
25
31
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupInput, {
26
32
  value: value ?? "",
27
33
  onPointerDown: (e) => {
@@ -35,16 +41,24 @@ const ColorPicker = (props) => {
35
41
  onChange: (e) => onValueChange(e.target.value),
36
42
  placeholder
37
43
  })] });
38
- return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
39
- type: "button",
40
- className: (0, __pixpilot_shadcn.cn)("border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*=\"text-\"])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 h-9"),
41
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
42
- className: "flex items-center gap-2",
43
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteSwatch.PaletteSwatch, { color: value }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
44
- className: "text-foreground",
44
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.InputGroup, {
45
+ className: (0, __pixpilot_shadcn.cn)("dark:hover:bg-input/50 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer"),
46
+ children: [
47
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupAddon, {
48
+ align: "inline-start",
49
+ className: "pl-1",
50
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Swatch, { color: value })
51
+ }),
52
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupText, {
53
+ className: "flex-1 text-left text-foreground pl-2",
45
54
  children: value ?? placeholder
46
- })]
47
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, { className: "size-4 opacity-50" })]
55
+ }),
56
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupAddon, {
57
+ align: "inline-end",
58
+ className: "pr-1",
59
+ children: isPickerOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronUpIcon, { className: "size-4 opacity-50" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, { className: "size-4 opacity-50" })
60
+ })
61
+ ]
48
62
  });
49
63
  }
50
64
  });
package/dist/ColorPicker/ColorPicker.js CHANGED
@@ -4,11 +4,17 @@
4
4
  import { PaletteSwatch } from "../ColorPickerBase/PaletteSwatch.js";
5
5
  import { ColorPickerBase } from "../ColorPickerBase/ColorPickerBase.js";
6
6
  import "../ColorPickerBase/index.js";
7
- import { InputGroup, InputGroupAddon, InputGroupInput, cn } from "@pixpilot/shadcn";
8
- import { ChevronDownIcon } from "lucide-react";
7
+ import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, cn } from "@pixpilot/shadcn";
8
+ import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
9
9
  import { jsx, jsxs } from "react/jsx-runtime";
10
10
 
11
11
  //#region src/ColorPicker/ColorPicker.tsx
12
+ function Swatch(props) {
13
+ return /* @__PURE__ */ jsx(PaletteSwatch, {
14
+ color: props.color,
15
+ className: "rounded-sm"
16
+ });
17
+ }
12
18
  const ColorPicker$1 = (props) => {
13
19
  const { variant = "input", placeholder = "Pick a color",...rest } = props;
14
20
  return /* @__PURE__ */ jsx(ColorPickerBase, {
@@ -17,7 +23,7 @@ const ColorPicker$1 = (props) => {
17
23
  if (variant === "input") return /* @__PURE__ */ jsxs(InputGroup, { children: [/* @__PURE__ */ jsx(InputGroupAddon, {
18
24
  align: "inline-start",
19
25
  className: "pl-1",
20
- children: /* @__PURE__ */ jsx(PaletteSwatch, { color: value })
26
+ children: /* @__PURE__ */ jsx(Swatch, { color: value })
21
27
  }), /* @__PURE__ */ jsx(InputGroupInput, {
22
28
  value: value ?? "",
23
29
  onPointerDown: (e) => {
@@ -31,16 +37,24 @@ const ColorPicker$1 = (props) => {
31
37
  onChange: (e) => onValueChange(e.target.value),
32
38
  placeholder
33
39
  })] });
34
- return /* @__PURE__ */ jsxs("button", {
35
- type: "button",
36
- className: cn("border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*=\"text-\"])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 h-9"),
37
- children: [/* @__PURE__ */ jsxs("div", {
38
- className: "flex items-center gap-2",
39
- children: [/* @__PURE__ */ jsx(PaletteSwatch, { color: value }), /* @__PURE__ */ jsx("span", {
40
- className: "text-foreground",
40
+ return /* @__PURE__ */ jsxs(InputGroup, {
41
+ className: cn("dark:hover:bg-input/50 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer"),
42
+ children: [
43
+ /* @__PURE__ */ jsx(InputGroupAddon, {
44
+ align: "inline-start",
45
+ className: "pl-1",
46
+ children: /* @__PURE__ */ jsx(Swatch, { color: value })
47
+ }),
48
+ /* @__PURE__ */ jsx(InputGroupText, {
49
+ className: "flex-1 text-left text-foreground pl-2",
41
50
  children: value ?? placeholder
42
- })]
43
- }), /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-50" })]
51
+ }),
52
+ /* @__PURE__ */ jsx(InputGroupAddon, {
53
+ align: "inline-end",
54
+ className: "pr-1",
55
+ children: isPickerOpen ? /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4 opacity-50" }) : /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-50" })
56
+ })
57
+ ]
44
58
  });
45
59
  }
46
60
  });
package/dist/ColorPickerBase/PaletteSwatch.cjs CHANGED
@@ -6,7 +6,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
6
6
  react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
7
7
 
8
8
  //#region src/ColorPickerBase/PaletteSwatch.tsx
9
- const PaletteSwatch = ({ color, onSelect }) => {
9
+ const PaletteSwatch = ({ color, onSelect, className }) => {
10
10
  const handleClick = (0, react.useCallback)(() => {
11
11
  if (onSelect) onSelect(color ?? "transparent");
12
12
  }, [color, onSelect]);
@@ -17,6 +17,7 @@ const PaletteSwatch = ({ color, onSelect }) => {
17
17
  backgroundSize: "4px 4px",
18
18
  backgroundPosition: "0 0, 0 2px, 2px -2px, -2px 0px"
19
19
  } : { backgroundColor: color },
20
+ className,
20
21
  onClick: handleClick
21
22
  });
22
23
  };
package/dist/ColorPickerBase/PaletteSwatch.js CHANGED
@@ -3,7 +3,7 @@ import { useCallback } from "react";
3
3
  import { jsx } from "react/jsx-runtime";
4
4
 
5
5
  //#region src/ColorPickerBase/PaletteSwatch.tsx
6
- const PaletteSwatch = ({ color, onSelect }) => {
6
+ const PaletteSwatch = ({ color, onSelect, className }) => {
7
7
  const handleClick = useCallback(() => {
8
8
  if (onSelect) onSelect(color ?? "transparent");
9
9
  }, [color, onSelect]);
@@ -14,6 +14,7 @@ const PaletteSwatch = ({ color, onSelect }) => {
14
14
  backgroundSize: "4px 4px",
15
15
  backgroundPosition: "0 0, 0 2px, 2px -2px, -2px 0px"
16
16
  } : { backgroundColor: color },
17
+ className,
17
18
  onClick: handleClick
18
19
  });
19
20
  };
package/dist/Select.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { Select } from "@pixpilot/shadcn";
2
2
  import { ComponentProps } from "react";
3
- import * as react_jsx_runtime3 from "react/jsx-runtime";
3
+ import * as react_jsx_runtime4 from "react/jsx-runtime";
4
4
 
5
5
  //#region src/Select.d.ts
6
6
  interface SelectOption {
@@ -13,6 +13,6 @@ type BaseSelectProps = {
13
13
  onChange?: (value: string) => void;
14
14
  placeholder?: string;
15
15
  } & Omit<ComponentProps<typeof Select>, 'value' | 'onValueChange' | 'children'>;
16
- declare function Select$1(props: BaseSelectProps): react_jsx_runtime3.JSX.Element;
16
+ declare function Select$1(props: BaseSelectProps): react_jsx_runtime4.JSX.Element;
17
17
  //#endregion
18
18
  export { Select$1 as Select, SelectOption };
package/dist/tags-input.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { CommandOptionListItem } from "./CommandOptionList.js";
2
- import * as react_jsx_runtime4 from "react/jsx-runtime";
2
+ import * as react_jsx_runtime3 from "react/jsx-runtime";
3
3
 
4
4
  //#region src/tags-input.d.ts
5
5
  interface TagsInputProps {
@@ -55,6 +55,6 @@ declare function TagsInput({
55
55
  addOnPaste,
56
56
  addOnTab,
57
57
  onValidate
58
- }: TagsInputProps): react_jsx_runtime4.JSX.Element;
58
+ }: TagsInputProps): react_jsx_runtime3.JSX.Element;
59
59
  //#endregion
60
60
  export { TagsInput, TagsInputProps };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pixpilot/shadcn-ui",
3
3
  "type": "module",
4
- "version": "0.13.0",
4
+ "version": "0.14.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",