@pixpilot/shadcn-ui 0.25.0 → 0.26.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.
@@ -15,6 +15,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
15
15
  function AbsoluteFill(props) {
16
16
  const { ref, className,...rest } = props;
17
17
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
18
+ "data-slot": "absolute-fill",
18
19
  ref,
19
20
  ...rest,
20
21
  className: (0, __pixpilot_shadcn.cn)("absolute top-0 right-0 bottom-0 left-0", className)
@@ -11,6 +11,7 @@ import { jsx } from "react/jsx-runtime";
11
11
  function AbsoluteFill(props) {
12
12
  const { ref, className,...rest } = props;
13
13
  return /* @__PURE__ */ jsx("div", {
14
+ "data-slot": "absolute-fill",
14
15
  ref,
15
16
  ...rest,
16
17
  className: cn("absolute top-0 right-0 bottom-0 left-0", className)
package/dist/Button.cjs CHANGED
@@ -33,6 +33,7 @@ function Button(props) {
33
33
  const showTooltip = hasTooltip || hasDisabledTooltip;
34
34
  const tooltipContent = hasDisabledTooltip ? disabledTooltip ?? "" : tooltip ?? title ?? "";
35
35
  const Loader = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
36
+ "data-slot": "button-loader",
36
37
  className: (0, __pixpilot_shadcn.cn)("flex items-center justify-center", loaderPlacement === "center" && "rounded-0 absolute inset-0", loaderPlacement === "start" && "mr-1", loaderPlacement === "end" && "ml-1"),
37
38
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, {
38
39
  className: "text-background animate-spin",
package/dist/Button.js CHANGED
@@ -28,6 +28,7 @@ function Button$1(props) {
28
28
  const showTooltip = hasTooltip || hasDisabledTooltip;
29
29
  const tooltipContent = hasDisabledTooltip ? disabledTooltip ?? "" : tooltip ?? title ?? "";
30
30
  const Loader = /* @__PURE__ */ jsx("div", {
31
+ "data-slot": "button-loader",
31
32
  className: cn("flex items-center justify-center", loaderPlacement === "center" && "rounded-0 absolute inset-0", loaderPlacement === "start" && "mr-1", loaderPlacement === "end" && "ml-1"),
32
33
  children: /* @__PURE__ */ jsx(Loader2, {
33
34
  className: "text-background animate-spin",
@@ -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, presetColors, sections, currentValue } = props;
17
+ const { onValueChange, presetColors, sections, currentValue,...rest } = props;
18
18
  const enabledSections = new Set(sections);
19
19
  const showPicker = enabledSections.has("picker");
20
20
  const showSwatch = enabledSections.has("swatch");
@@ -23,32 +23,35 @@ const ColorPickerCompact = react.default.memo((props) => {
23
23
  const [showFullPicker, setShowFullPicker] = (0, react.useState)(false);
24
24
  const shouldShowPickerUi = showPicker && (showSwatch ? showFullPicker : true);
25
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
- ] });
26
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ColorPickerContent.ColorPickerContent, {
27
+ ...rest,
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
+ selectedValue: currentValue
42
+ }, color.value)), canTogglePickerUi && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteButton.PaletteButton, {
43
+ onClick: () => setShowFullPicker(!showFullPicker),
44
+ "aria-label": "Toggle full color picker",
45
+ className: "flex items-center justify-center border-input bg-input hover:bg-accent hover:text-accent-foreground",
46
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Droplet, { className: "h-4 w-4" })
47
+ })]
48
+ }),
49
+ (showFormatSelect || showInput) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
50
+ className: "flex items-center gap-2 w-full",
51
+ children: [showFormatSelect && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerFormatSelect, {}), showInput && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerInput.ColorPickerInput, {})]
52
+ })
53
+ ]
54
+ });
52
55
  });
53
56
  ColorPickerCompact.displayName = "ColorPickerCompact";
54
57
 
@@ -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, presetColors, sections, currentValue } = props;
12
+ const { onValueChange, presetColors, sections, currentValue,...rest } = props;
13
13
  const enabledSections = new Set(sections);
14
14
  const showPicker = enabledSections.has("picker");
15
15
  const showSwatch = enabledSections.has("swatch");
@@ -18,32 +18,35 @@ const ColorPickerCompact = React.memo((props) => {
18
18
  const [showFullPicker, setShowFullPicker] = useState(false);
19
19
  const shouldShowPickerUi = showPicker && (showSwatch ? showFullPicker : true);
20
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
- ] });
21
+ return /* @__PURE__ */ jsxs(ColorPickerContent$1, {
22
+ ...rest,
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
+ selectedValue: currentValue
37
+ }, color.value)), canTogglePickerUi && /* @__PURE__ */ jsx(PaletteButton, {
38
+ onClick: () => setShowFullPicker(!showFullPicker),
39
+ "aria-label": "Toggle full color picker",
40
+ className: "flex items-center justify-center border-input bg-input hover:bg-accent hover:text-accent-foreground",
41
+ children: /* @__PURE__ */ jsx(Droplet, { className: "h-4 w-4" })
42
+ })]
43
+ }),
44
+ (showFormatSelect || showInput) && /* @__PURE__ */ jsxs("div", {
45
+ className: "flex items-center gap-2 w-full",
46
+ children: [showFormatSelect && /* @__PURE__ */ jsx(ColorPickerFormatSelect, {}), showInput && /* @__PURE__ */ jsx(ColorPickerInput$1, {})]
47
+ })
48
+ ]
49
+ });
47
50
  });
48
51
  ColorPickerCompact.displayName = "ColorPickerCompact";
49
52
 
@@ -20,6 +20,7 @@ const ScaledPreview = ({ baseSize = DEFAULT_BASE_SIZE, scaleFactor, previewBoxSi
20
20
  const finalScale = forceScale ?? calculatedScale;
21
21
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
22
22
  ...rest,
23
+ "data-slot": "scaled-preview",
23
24
  style: {
24
25
  width: calculatedPreviewBoxSize.width,
25
26
  height: calculatedPreviewBoxSize.height,
@@ -27,6 +28,7 @@ const ScaledPreview = ({ baseSize = DEFAULT_BASE_SIZE, scaleFactor, previewBoxSi
27
28
  ...rest.style
28
29
  },
29
30
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
31
+ "data-slot": "scaled-preview-content",
30
32
  className: "absolute top-1/2 left-1/2",
31
33
  style: {
32
34
  width: baseSize.width,
@@ -17,6 +17,7 @@ const ScaledPreview = ({ baseSize = DEFAULT_BASE_SIZE, scaleFactor, previewBoxSi
17
17
  const finalScale = forceScale ?? calculatedScale;
18
18
  return /* @__PURE__ */ jsx("div", {
19
19
  ...rest,
20
+ "data-slot": "scaled-preview",
20
21
  style: {
21
22
  width: calculatedPreviewBoxSize.width,
22
23
  height: calculatedPreviewBoxSize.height,
@@ -24,6 +25,7 @@ const ScaledPreview = ({ baseSize = DEFAULT_BASE_SIZE, scaleFactor, previewBoxSi
24
25
  ...rest.style
25
26
  },
26
27
  children: /* @__PURE__ */ jsx("div", {
28
+ "data-slot": "scaled-preview-content",
27
29
  className: "absolute top-1/2 left-1/2",
28
30
  style: {
29
31
  width: baseSize.width,
@@ -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.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 };
@@ -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 };
@@ -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_runtime7 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_runtime7.JSX.Element;
14
14
  //#endregion
15
15
  export { Input$1 as Input, InputProps$1 as InputProps };
@@ -9,6 +9,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
9
9
  //#region src/layout/Layout.tsx
10
10
  const Layout = react.default.forwardRef(({ className, as: Component = "div",...props }, ref) => {
11
11
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
12
+ "data-slot": "layout",
12
13
  ref,
13
14
  className: (0, __pixpilot_shadcn.cn)("flex w-full flex-col overflow-hidden", "h-dvh", "max-h-full", className),
14
15
  ...props
@@ -5,6 +5,7 @@ import { jsx } from "react/jsx-runtime";
5
5
  //#region src/layout/Layout.tsx
6
6
  const Layout = React.forwardRef(({ className, as: Component = "div",...props }, ref) => {
7
7
  return /* @__PURE__ */ jsx(Component, {
8
+ "data-slot": "layout",
8
9
  ref,
9
10
  className: cn("flex w-full flex-col overflow-hidden", "h-dvh", "max-h-full", className),
10
11
  ...props
@@ -8,6 +8,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
8
8
 
9
9
  //#region src/layout/LayoutFooter.tsx
10
10
  const LayoutFooter = react.default.forwardRef(({ className, as: Component = "div",...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
11
+ "data-slot": "layout-footer",
11
12
  ...props,
12
13
  className: (0, __pixpilot_shadcn.cn)(className),
13
14
  ref
@@ -4,6 +4,7 @@ import { jsx } from "react/jsx-runtime";
4
4
 
5
5
  //#region src/layout/LayoutFooter.tsx
6
6
  const LayoutFooter = React.forwardRef(({ className, as: Component = "div",...props }, ref) => /* @__PURE__ */ jsx(Component, {
7
+ "data-slot": "layout-footer",
7
8
  ...props,
8
9
  className: cn(className),
9
10
  ref
@@ -8,6 +8,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
8
8
 
9
9
  //#region src/layout/LayoutHeader.tsx
10
10
  const LayoutHeader = react.default.forwardRef(({ className, as: Component = "div",...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
11
+ "data-slot": "layout-header",
11
12
  ...props,
12
13
  className: (0, __pixpilot_shadcn.cn)(className),
13
14
  ref
@@ -4,6 +4,7 @@ import { jsx } from "react/jsx-runtime";
4
4
 
5
5
  //#region src/layout/LayoutHeader.tsx
6
6
  const LayoutHeader = React.forwardRef(({ className, as: Component = "div",...props }, ref) => /* @__PURE__ */ jsx(Component, {
7
+ "data-slot": "layout-header",
7
8
  ...props,
8
9
  className: cn(className),
9
10
  ref
@@ -9,6 +9,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
9
9
  //#region src/layout/LayoutMain.tsx
10
10
  const LayoutMain = react.default.forwardRef(({ autoScroll = true, className, as: Component = "div",...props }, ref) => {
11
11
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
12
+ "data-slot": "layout-main",
12
13
  ref,
13
14
  className: (0, __pixpilot_shadcn.cn)("flex-1", { "overflow-auto": autoScroll }, className),
14
15
  ...props
@@ -5,6 +5,7 @@ import { jsx } from "react/jsx-runtime";
5
5
  //#region src/layout/LayoutMain.tsx
6
6
  const LayoutMain = React.forwardRef(({ autoScroll = true, className, as: Component = "div",...props }, ref) => {
7
7
  return /* @__PURE__ */ jsx(Component, {
8
+ "data-slot": "layout-main",
8
9
  ref,
9
10
  className: cn("flex-1", { "overflow-auto": autoScroll }, className),
10
11
  ...props
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pixpilot/shadcn-ui",
3
3
  "type": "module",
4
- "version": "0.25.0",
4
+ "version": "0.26.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",
@@ -60,8 +60,8 @@
60
60
  "@internal/eslint-config": "0.3.0",
61
61
  "@internal/hooks": "0.0.0",
62
62
  "@internal/prettier-config": "0.0.1",
63
- "@internal/tsconfig": "0.1.0",
64
63
  "@internal/tsdown-config": "0.1.0",
64
+ "@internal/tsconfig": "0.1.0",
65
65
  "@internal/vitest-config": "0.1.0"
66
66
  },
67
67
  "prettier": "@internal/prettier-config",