@pixpilot/shadcn-ui 0.33.0 → 0.35.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.
- package/dist/file-upload-inline/FileUploadInline.d.cts +2 -2
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/input/Input.d.cts +2 -2
- package/dist/rich-text-editor/RichTextEditor.cjs +23 -52
- package/dist/rich-text-editor/RichTextEditor.d.cts +4 -4
- package/dist/rich-text-editor/RichTextEditor.d.ts +4 -4
- package/dist/rich-text-editor/RichTextEditor.js +23 -52
- package/dist/rich-text-editor/RichTextEditorToolbar.cjs +56 -0
- package/dist/rich-text-editor/RichTextEditorToolbar.js +52 -0
- package/dist/rich-text-editor/index.d.cts +1 -1
- package/dist/rich-text-editor/index.d.ts +1 -1
- package/dist/rich-text-editor/{predefined-toolbar-options.cjs → predefined-toolbar-items.cjs} +3 -3
- package/dist/rich-text-editor/{predefined-toolbar-options.js → predefined-toolbar-items.js} +3 -3
- package/dist/theme-toggle/ThemeModeDropdown.d.cts +2 -2
- package/dist/theme-toggle/ThemeModeDropdown.d.ts +2 -2
- package/dist/theme-toggle/ThemeModeSwitchInside.d.cts +2 -2
- package/dist/theme-toggle/ThemeModeSwitchInside.d.ts +2 -2
- package/dist/theme-toggle/ThemeModeSwitchOutside.d.cts +2 -2
- package/dist/theme-toggle/ThemeModeSwitchOutside.d.ts +2 -2
- package/dist/theme-toggle/ThemeModeToggleButton.d.cts +2 -2
- package/dist/theme-toggle/ThemeModeToggleButton.d.ts +2 -2
- package/package.json +2 -2
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { FileUploadInlineProps } from "./types.cjs";
|
|
2
|
-
import * as
|
|
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):
|
|
8
|
+
declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime7.JSX.Element;
|
|
9
9
|
//#endregion
|
|
10
10
|
export { FileUploadInline };
|
package/dist/index.d.cts
CHANGED
|
@@ -40,7 +40,7 @@ import "./layout/index.cjs";
|
|
|
40
40
|
import { LoaderProps, LoadingOverlay } from "./LoadingOverlay.cjs";
|
|
41
41
|
import { Pagination, PaginationProps } from "./pagination/Pagination.cjs";
|
|
42
42
|
import "./pagination/index.cjs";
|
|
43
|
-
import { RichTextEditor, RichTextEditorProps, RichTextEditorSlots,
|
|
43
|
+
import { RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ToolbarItems } from "./rich-text-editor/RichTextEditor.cjs";
|
|
44
44
|
import "./rich-text-editor/index.cjs";
|
|
45
45
|
import { ScaledPreview, ScaledPreviewProps, ScaledPreviewSize } from "./ScaledPreview.cjs";
|
|
46
46
|
import { Select, SelectOption } from "./Select.cjs";
|
|
@@ -67,4 +67,4 @@ import { DEFAULT_ALERT_DURATION, ToastMessage, toast, toastError, toastInfo, toa
|
|
|
67
67
|
import { Toaster } from "./toast/ToastProvider.cjs";
|
|
68
68
|
import "./toast/index.cjs";
|
|
69
69
|
import { cn } from "@pixpilot/shadcn";
|
|
70
|
-
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, RichTextEditorSlots, 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, ThemeModeDropdown, ThemeModeDropdownProps, ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize, ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps, ThemeModeToggleButton, ThemeModeToggleButtonProps, ThemeProvider, ThemeProviderProps, ToastMessage, Toaster,
|
|
70
|
+
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, RichTextEditorSlots, 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, ThemeModeDropdown, ThemeModeDropdownProps, ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize, ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps, ThemeModeToggleButton, ThemeModeToggleButtonProps, ThemeProvider, ThemeProviderProps, ToastMessage, Toaster, ToolbarItems, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };
|
package/dist/index.d.ts
CHANGED
|
@@ -42,7 +42,7 @@ import "./layout/index.js";
|
|
|
42
42
|
import { LoaderProps, LoadingOverlay } from "./LoadingOverlay.js";
|
|
43
43
|
import { Pagination, PaginationProps } from "./pagination/Pagination.js";
|
|
44
44
|
import "./pagination/index.js";
|
|
45
|
-
import { RichTextEditor, RichTextEditorProps, RichTextEditorSlots,
|
|
45
|
+
import { RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ToolbarItems } from "./rich-text-editor/RichTextEditor.js";
|
|
46
46
|
import "./rich-text-editor/index.js";
|
|
47
47
|
import { ScaledPreview, ScaledPreviewProps, ScaledPreviewSize } from "./ScaledPreview.js";
|
|
48
48
|
import { Select, SelectOption } from "./Select.js";
|
|
@@ -69,4 +69,4 @@ import { DEFAULT_ALERT_DURATION, ToastMessage, toast, toastError, toastInfo, toa
|
|
|
69
69
|
import { Toaster } from "./toast/ToastProvider.js";
|
|
70
70
|
import "./toast/index.js";
|
|
71
71
|
import { cn } from "@pixpilot/shadcn";
|
|
72
|
-
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, RichTextEditorSlots, 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, ThemeModeDropdown, ThemeModeDropdownProps, ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize, ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps, ThemeModeToggleButton, ThemeModeToggleButtonProps, ThemeProvider, ThemeProviderProps, ToastMessage, Toaster,
|
|
72
|
+
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, RichTextEditorSlots, 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, ThemeModeDropdown, ThemeModeDropdownProps, ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize, ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps, ThemeModeToggleButton, ThemeModeToggleButtonProps, ThemeProvider, ThemeProviderProps, ToastMessage, Toaster, ToolbarItems, 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
|
|
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):
|
|
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,5 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
|
|
2
|
-
const
|
|
3
|
-
const require_ToolbarButton = require('./ToolbarButton.cjs');
|
|
2
|
+
const require_RichTextEditorToolbar = require('./RichTextEditorToolbar.cjs');
|
|
4
3
|
let __pixpilot_shadcn = require("@pixpilot/shadcn");
|
|
5
4
|
__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
|
|
6
5
|
let react = require("react");
|
|
@@ -14,7 +13,7 @@ __tiptap_starter_kit = require_rolldown_runtime.__toESM(__tiptap_starter_kit);
|
|
|
14
13
|
|
|
15
14
|
//#region src/rich-text-editor/RichTextEditor.tsx
|
|
16
15
|
const defaultExtensions = [];
|
|
17
|
-
const
|
|
16
|
+
const defaultToolbarItems = [
|
|
18
17
|
"bold",
|
|
19
18
|
"italic",
|
|
20
19
|
"underline",
|
|
@@ -31,10 +30,9 @@ const defaultToolbarOptions = [
|
|
|
31
30
|
"blockquote",
|
|
32
31
|
"codeBlock"
|
|
33
32
|
];
|
|
34
|
-
|
|
35
|
-
const
|
|
36
|
-
|
|
37
|
-
const mergedEditorProps = {
|
|
33
|
+
function useEditorProps(slots, customEditorProps) {
|
|
34
|
+
const defaultEditorProps = react.default.useMemo(() => ({ attributes: { class: (0, __pixpilot_shadcn.cn)("min-h-[200px] p-4 text-sm leading-relaxed focus:outline-none", "[&_h1]:text-3xl [&_h1]:font-bold [&_h1]:leading-tight [&_h1]:mt-8 [&_h1]:mb-4 [&_h1:first-child]:mt-0", "[&_h2]:text-2xl [&_h2]:font-bold [&_h2]:leading-tight [&_h2]:mt-6 [&_h2]:mb-3 [&_h2:first-child]:mt-0", "[&_h3]:text-xl [&_h3]:font-bold [&_h3]:leading-tight [&_h3]:mt-4 [&_h3]:mb-2 [&_h3:first-child]:mt-0", "[&_p]:mb-3", "[&_ul]:list-disc [&_ul]:pl-6 [&_ul]:mb-3", "[&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:mb-3", "[&_blockquote]:border-l-4 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:mb-4 [&_blockquote]:italic [&_blockquote:first-child]:mt-0", "[&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-[0.875em] [&_code]:font-mono", "[&_pre]:bg-muted [&_pre]:p-4 [&_pre]:rounded [&_pre]:overflow-x-auto [&_pre]:font-mono [&_pre]:mb-4", "[&_*:last-child]:mb-0", slots?.content?.className) } }), [slots]);
|
|
35
|
+
return react.default.useMemo(() => ({
|
|
38
36
|
...defaultEditorProps,
|
|
39
37
|
...customEditorProps,
|
|
40
38
|
attributes: {
|
|
@@ -42,14 +40,21 @@ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, edita
|
|
|
42
40
|
...customEditorProps?.attributes,
|
|
43
41
|
class: (0, __pixpilot_shadcn.cn)(defaultEditorProps.attributes.class, (customEditorProps?.attributes)?.class)
|
|
44
42
|
}
|
|
45
|
-
};
|
|
43
|
+
}), [defaultEditorProps, customEditorProps]);
|
|
44
|
+
}
|
|
45
|
+
const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, editable = true, slots, showToolbar = true, toolbarItems = defaultToolbarItems, editorProps: customEditorProps, immediatelyRender = false }) => {
|
|
46
|
+
const [renderTick, forceRender] = react.default.useReducer((x) => x + 1, 0);
|
|
47
|
+
const mergedEditorProps = useEditorProps(slots, customEditorProps);
|
|
48
|
+
const onChangeRef = react.default.useRef(onChange);
|
|
49
|
+
onChangeRef.current = onChange;
|
|
50
|
+
const handleChange = react.default.useCallback((props) => {
|
|
51
|
+
onChangeRef.current?.(props.editor.getHTML());
|
|
52
|
+
}, []);
|
|
46
53
|
const editorInstance = (0, __tiptap_react.useEditor)({
|
|
47
54
|
extensions: [__tiptap_starter_kit.default].concat(extensions),
|
|
48
55
|
content: value,
|
|
49
56
|
editable,
|
|
50
|
-
onUpdate:
|
|
51
|
-
onChange?.(updatedEditor.getHTML());
|
|
52
|
-
},
|
|
57
|
+
onUpdate: handleChange,
|
|
53
58
|
immediatelyRender,
|
|
54
59
|
editorProps: mergedEditorProps
|
|
55
60
|
});
|
|
@@ -76,49 +81,15 @@ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, edita
|
|
|
76
81
|
children: "Loading editor..."
|
|
77
82
|
})]
|
|
78
83
|
});
|
|
79
|
-
const handleCommand = (commandFn) => {
|
|
80
|
-
try {
|
|
81
|
-
commandFn();
|
|
82
|
-
} catch {}
|
|
83
|
-
};
|
|
84
|
-
const renderToolbar = () => {
|
|
85
|
-
if (!showToolbar) return null;
|
|
86
|
-
const isEditorFocused = editorInstance.isFocused;
|
|
87
|
-
let separatorCount = 0;
|
|
88
|
-
let customCount = 0;
|
|
89
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
90
|
-
className: (0, __pixpilot_shadcn.cn)("flex flex-wrap items-center gap-1 border-b p-2", slots?.toolbar?.className),
|
|
91
|
-
children: toolbarOptions.map((option) => {
|
|
92
|
-
if (option === "|") {
|
|
93
|
-
separatorCount += 1;
|
|
94
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, __pixpilot_shadcn.cn)("mx-1 h-6 w-px bg-border", slots?.toolbar?.separator?.className) }, `separator-${separatorCount}`);
|
|
95
|
-
}
|
|
96
|
-
if (typeof option === "string") {
|
|
97
|
-
const predefinedOption = require_predefined_toolbar_options.predefinedToolbarOptions[option];
|
|
98
|
-
if (!predefinedOption) return null;
|
|
99
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToolbarButton.ToolbarButton, {
|
|
100
|
-
onClick: () => handleCommand(() => predefinedOption.onClick(editorInstance)),
|
|
101
|
-
isActive: isEditorFocused && (predefinedOption.isActive?.(editorInstance) ?? false),
|
|
102
|
-
tooltip: predefinedOption.tooltip,
|
|
103
|
-
className: slots?.toolbar?.button?.className,
|
|
104
|
-
children: predefinedOption.icon
|
|
105
|
-
}, option);
|
|
106
|
-
}
|
|
107
|
-
const customOption = option;
|
|
108
|
-
customCount += 1;
|
|
109
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToolbarButton.ToolbarButton, {
|
|
110
|
-
onClick: () => handleCommand(() => customOption.onClick(editorInstance)),
|
|
111
|
-
isActive: isEditorFocused && (customOption.isActive?.(editorInstance) ?? false),
|
|
112
|
-
tooltip: customOption.tooltip,
|
|
113
|
-
className: slots?.toolbar?.button?.className,
|
|
114
|
-
children: customOption.icon
|
|
115
|
-
}, `custom-${customCount}-${customOption.tooltip}`);
|
|
116
|
-
})
|
|
117
|
-
});
|
|
118
|
-
};
|
|
119
84
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
120
85
|
className: (0, __pixpilot_shadcn.cn)("border rounded-md bg-background", slots?.root?.className),
|
|
121
|
-
children: [
|
|
86
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_RichTextEditorToolbar.RichTextEditorToolbar, {
|
|
87
|
+
editor: editorInstance,
|
|
88
|
+
toolbarItems,
|
|
89
|
+
slots,
|
|
90
|
+
showToolbar,
|
|
91
|
+
renderTick
|
|
92
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tiptap_react.EditorContent, { editor: editorInstance })]
|
|
122
93
|
});
|
|
123
94
|
};
|
|
124
95
|
RichTextEditor.displayName = "RichTextEditor";
|
|
@@ -4,7 +4,7 @@ import { UseEditorOptions } from "@tiptap/react";
|
|
|
4
4
|
|
|
5
5
|
//#region src/rich-text-editor/RichTextEditor.d.ts
|
|
6
6
|
type EditorProps = Editor['options']['editorProps'];
|
|
7
|
-
type
|
|
7
|
+
type ToolbarItems = string | '|' | {
|
|
8
8
|
icon: React.ReactNode;
|
|
9
9
|
tooltip: string;
|
|
10
10
|
onClick: (editor: any) => void;
|
|
@@ -62,10 +62,10 @@ interface RichTextEditorProps {
|
|
|
62
62
|
*/
|
|
63
63
|
showToolbar?: boolean;
|
|
64
64
|
/**
|
|
65
|
-
* Array of toolbar
|
|
65
|
+
* Array of toolbar items to display. If provided, only these items will be shown.
|
|
66
66
|
* Can be strings for predefined commands or objects for custom buttons.
|
|
67
67
|
*/
|
|
68
|
-
|
|
68
|
+
toolbarItems?: ToolbarItems[];
|
|
69
69
|
/**
|
|
70
70
|
* Custom editor props to pass to the editor
|
|
71
71
|
*/
|
|
@@ -79,4 +79,4 @@ interface RichTextEditorProps {
|
|
|
79
79
|
}
|
|
80
80
|
declare const RichTextEditor: React.FC<RichTextEditorProps>;
|
|
81
81
|
//#endregion
|
|
82
|
-
export { RichTextEditor, RichTextEditorProps, RichTextEditorSlots,
|
|
82
|
+
export { RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ToolbarItems };
|
|
@@ -4,7 +4,7 @@ import { Editor, Extension } from "@tiptap/core";
|
|
|
4
4
|
|
|
5
5
|
//#region src/rich-text-editor/RichTextEditor.d.ts
|
|
6
6
|
type EditorProps = Editor['options']['editorProps'];
|
|
7
|
-
type
|
|
7
|
+
type ToolbarItems = string | '|' | {
|
|
8
8
|
icon: React.ReactNode;
|
|
9
9
|
tooltip: string;
|
|
10
10
|
onClick: (editor: any) => void;
|
|
@@ -62,10 +62,10 @@ interface RichTextEditorProps {
|
|
|
62
62
|
*/
|
|
63
63
|
showToolbar?: boolean;
|
|
64
64
|
/**
|
|
65
|
-
* Array of toolbar
|
|
65
|
+
* Array of toolbar items to display. If provided, only these items will be shown.
|
|
66
66
|
* Can be strings for predefined commands or objects for custom buttons.
|
|
67
67
|
*/
|
|
68
|
-
|
|
68
|
+
toolbarItems?: ToolbarItems[];
|
|
69
69
|
/**
|
|
70
70
|
* Custom editor props to pass to the editor
|
|
71
71
|
*/
|
|
@@ -79,4 +79,4 @@ interface RichTextEditorProps {
|
|
|
79
79
|
}
|
|
80
80
|
declare const RichTextEditor: React.FC<RichTextEditorProps>;
|
|
81
81
|
//#endregion
|
|
82
|
-
export { RichTextEditor, RichTextEditorProps, RichTextEditorSlots,
|
|
82
|
+
export { RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ToolbarItems };
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { ToolbarButton } from "./ToolbarButton.js";
|
|
1
|
+
import { RichTextEditorToolbar } from "./RichTextEditorToolbar.js";
|
|
3
2
|
import { cn } from "@pixpilot/shadcn";
|
|
4
3
|
import React from "react";
|
|
5
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -8,7 +7,7 @@ import StarterKit from "@tiptap/starter-kit";
|
|
|
8
7
|
|
|
9
8
|
//#region src/rich-text-editor/RichTextEditor.tsx
|
|
10
9
|
const defaultExtensions = [];
|
|
11
|
-
const
|
|
10
|
+
const defaultToolbarItems = [
|
|
12
11
|
"bold",
|
|
13
12
|
"italic",
|
|
14
13
|
"underline",
|
|
@@ -25,10 +24,9 @@ const defaultToolbarOptions = [
|
|
|
25
24
|
"blockquote",
|
|
26
25
|
"codeBlock"
|
|
27
26
|
];
|
|
28
|
-
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
const mergedEditorProps = {
|
|
27
|
+
function useEditorProps(slots, customEditorProps) {
|
|
28
|
+
const defaultEditorProps = React.useMemo(() => ({ attributes: { class: cn("min-h-[200px] p-4 text-sm leading-relaxed focus:outline-none", "[&_h1]:text-3xl [&_h1]:font-bold [&_h1]:leading-tight [&_h1]:mt-8 [&_h1]:mb-4 [&_h1:first-child]:mt-0", "[&_h2]:text-2xl [&_h2]:font-bold [&_h2]:leading-tight [&_h2]:mt-6 [&_h2]:mb-3 [&_h2:first-child]:mt-0", "[&_h3]:text-xl [&_h3]:font-bold [&_h3]:leading-tight [&_h3]:mt-4 [&_h3]:mb-2 [&_h3:first-child]:mt-0", "[&_p]:mb-3", "[&_ul]:list-disc [&_ul]:pl-6 [&_ul]:mb-3", "[&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:mb-3", "[&_blockquote]:border-l-4 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:mb-4 [&_blockquote]:italic [&_blockquote:first-child]:mt-0", "[&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-[0.875em] [&_code]:font-mono", "[&_pre]:bg-muted [&_pre]:p-4 [&_pre]:rounded [&_pre]:overflow-x-auto [&_pre]:font-mono [&_pre]:mb-4", "[&_*:last-child]:mb-0", slots?.content?.className) } }), [slots]);
|
|
29
|
+
return React.useMemo(() => ({
|
|
32
30
|
...defaultEditorProps,
|
|
33
31
|
...customEditorProps,
|
|
34
32
|
attributes: {
|
|
@@ -36,14 +34,21 @@ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, edita
|
|
|
36
34
|
...customEditorProps?.attributes,
|
|
37
35
|
class: cn(defaultEditorProps.attributes.class, (customEditorProps?.attributes)?.class)
|
|
38
36
|
}
|
|
39
|
-
};
|
|
37
|
+
}), [defaultEditorProps, customEditorProps]);
|
|
38
|
+
}
|
|
39
|
+
const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, editable = true, slots, showToolbar = true, toolbarItems = defaultToolbarItems, editorProps: customEditorProps, immediatelyRender = false }) => {
|
|
40
|
+
const [renderTick, forceRender] = React.useReducer((x) => x + 1, 0);
|
|
41
|
+
const mergedEditorProps = useEditorProps(slots, customEditorProps);
|
|
42
|
+
const onChangeRef = React.useRef(onChange);
|
|
43
|
+
onChangeRef.current = onChange;
|
|
44
|
+
const handleChange = React.useCallback((props) => {
|
|
45
|
+
onChangeRef.current?.(props.editor.getHTML());
|
|
46
|
+
}, []);
|
|
40
47
|
const editorInstance = useEditor({
|
|
41
48
|
extensions: [StarterKit].concat(extensions),
|
|
42
49
|
content: value,
|
|
43
50
|
editable,
|
|
44
|
-
onUpdate:
|
|
45
|
-
onChange?.(updatedEditor.getHTML());
|
|
46
|
-
},
|
|
51
|
+
onUpdate: handleChange,
|
|
47
52
|
immediatelyRender,
|
|
48
53
|
editorProps: mergedEditorProps
|
|
49
54
|
});
|
|
@@ -70,49 +75,15 @@ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, edita
|
|
|
70
75
|
children: "Loading editor..."
|
|
71
76
|
})]
|
|
72
77
|
});
|
|
73
|
-
const handleCommand = (commandFn) => {
|
|
74
|
-
try {
|
|
75
|
-
commandFn();
|
|
76
|
-
} catch {}
|
|
77
|
-
};
|
|
78
|
-
const renderToolbar = () => {
|
|
79
|
-
if (!showToolbar) return null;
|
|
80
|
-
const isEditorFocused = editorInstance.isFocused;
|
|
81
|
-
let separatorCount = 0;
|
|
82
|
-
let customCount = 0;
|
|
83
|
-
return /* @__PURE__ */ jsx("div", {
|
|
84
|
-
className: cn("flex flex-wrap items-center gap-1 border-b p-2", slots?.toolbar?.className),
|
|
85
|
-
children: toolbarOptions.map((option) => {
|
|
86
|
-
if (option === "|") {
|
|
87
|
-
separatorCount += 1;
|
|
88
|
-
return /* @__PURE__ */ jsx("div", { className: cn("mx-1 h-6 w-px bg-border", slots?.toolbar?.separator?.className) }, `separator-${separatorCount}`);
|
|
89
|
-
}
|
|
90
|
-
if (typeof option === "string") {
|
|
91
|
-
const predefinedOption = predefinedToolbarOptions[option];
|
|
92
|
-
if (!predefinedOption) return null;
|
|
93
|
-
return /* @__PURE__ */ jsx(ToolbarButton, {
|
|
94
|
-
onClick: () => handleCommand(() => predefinedOption.onClick(editorInstance)),
|
|
95
|
-
isActive: isEditorFocused && (predefinedOption.isActive?.(editorInstance) ?? false),
|
|
96
|
-
tooltip: predefinedOption.tooltip,
|
|
97
|
-
className: slots?.toolbar?.button?.className,
|
|
98
|
-
children: predefinedOption.icon
|
|
99
|
-
}, option);
|
|
100
|
-
}
|
|
101
|
-
const customOption = option;
|
|
102
|
-
customCount += 1;
|
|
103
|
-
return /* @__PURE__ */ jsx(ToolbarButton, {
|
|
104
|
-
onClick: () => handleCommand(() => customOption.onClick(editorInstance)),
|
|
105
|
-
isActive: isEditorFocused && (customOption.isActive?.(editorInstance) ?? false),
|
|
106
|
-
tooltip: customOption.tooltip,
|
|
107
|
-
className: slots?.toolbar?.button?.className,
|
|
108
|
-
children: customOption.icon
|
|
109
|
-
}, `custom-${customCount}-${customOption.tooltip}`);
|
|
110
|
-
})
|
|
111
|
-
});
|
|
112
|
-
};
|
|
113
78
|
return /* @__PURE__ */ jsxs("div", {
|
|
114
79
|
className: cn("border rounded-md bg-background", slots?.root?.className),
|
|
115
|
-
children: [
|
|
80
|
+
children: [/* @__PURE__ */ jsx(RichTextEditorToolbar, {
|
|
81
|
+
editor: editorInstance,
|
|
82
|
+
toolbarItems,
|
|
83
|
+
slots,
|
|
84
|
+
showToolbar,
|
|
85
|
+
renderTick
|
|
86
|
+
}), /* @__PURE__ */ jsx(EditorContent, { editor: editorInstance })]
|
|
116
87
|
});
|
|
117
88
|
};
|
|
118
89
|
RichTextEditor.displayName = "RichTextEditor";
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
|
|
2
|
+
const require_predefined_toolbar_items = require('./predefined-toolbar-items.cjs');
|
|
3
|
+
const require_ToolbarButton = require('./ToolbarButton.cjs');
|
|
4
|
+
let __pixpilot_shadcn = require("@pixpilot/shadcn");
|
|
5
|
+
__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
|
|
6
|
+
let react = require("react");
|
|
7
|
+
react = require_rolldown_runtime.__toESM(react);
|
|
8
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
9
|
+
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
10
|
+
|
|
11
|
+
//#region src/rich-text-editor/RichTextEditorToolbar.tsx
|
|
12
|
+
const RichTextEditorToolbarComponent = ({ editor, toolbarItems, slots, showToolbar, renderTick }) => {
|
|
13
|
+
if (!showToolbar) return null;
|
|
14
|
+
const handleCommand = (commandFn) => {
|
|
15
|
+
try {
|
|
16
|
+
commandFn();
|
|
17
|
+
} catch {}
|
|
18
|
+
};
|
|
19
|
+
const isEditorFocused = editor.isFocused;
|
|
20
|
+
let separatorCount = 0;
|
|
21
|
+
let customCount = 0;
|
|
22
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
23
|
+
"data-render-tick": renderTick,
|
|
24
|
+
className: (0, __pixpilot_shadcn.cn)("flex flex-wrap items-center gap-1 border-b p-2", slots?.toolbar?.className),
|
|
25
|
+
children: toolbarItems.map((option) => {
|
|
26
|
+
if (option === "|") {
|
|
27
|
+
separatorCount += 1;
|
|
28
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, __pixpilot_shadcn.cn)("mx-1 h-6 w-px bg-border", slots?.toolbar?.separator?.className) }, `separator-${separatorCount}`);
|
|
29
|
+
}
|
|
30
|
+
if (typeof option === "string") {
|
|
31
|
+
const predefinedOption = require_predefined_toolbar_items.predefinedToolbarItems[option];
|
|
32
|
+
if (!predefinedOption) return null;
|
|
33
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToolbarButton.ToolbarButton, {
|
|
34
|
+
onClick: () => handleCommand(() => predefinedOption.onClick(editor)),
|
|
35
|
+
isActive: isEditorFocused && (predefinedOption.isActive?.(editor) ?? false),
|
|
36
|
+
tooltip: predefinedOption.tooltip,
|
|
37
|
+
className: slots?.toolbar?.button?.className,
|
|
38
|
+
children: predefinedOption.icon
|
|
39
|
+
}, option);
|
|
40
|
+
}
|
|
41
|
+
const customOption = option;
|
|
42
|
+
customCount += 1;
|
|
43
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToolbarButton.ToolbarButton, {
|
|
44
|
+
onClick: () => handleCommand(() => customOption.onClick(editor)),
|
|
45
|
+
isActive: isEditorFocused && (customOption.isActive?.(editor) ?? false),
|
|
46
|
+
tooltip: customOption.tooltip,
|
|
47
|
+
className: slots?.toolbar?.button?.className,
|
|
48
|
+
children: customOption.icon
|
|
49
|
+
}, `custom-${customCount}-${customOption.tooltip}`);
|
|
50
|
+
})
|
|
51
|
+
});
|
|
52
|
+
};
|
|
53
|
+
const RichTextEditorToolbar = react.default.memo(RichTextEditorToolbarComponent);
|
|
54
|
+
|
|
55
|
+
//#endregion
|
|
56
|
+
exports.RichTextEditorToolbar = RichTextEditorToolbar;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { predefinedToolbarItems } from "./predefined-toolbar-items.js";
|
|
2
|
+
import { ToolbarButton } from "./ToolbarButton.js";
|
|
3
|
+
import { cn } from "@pixpilot/shadcn";
|
|
4
|
+
import React from "react";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
|
|
7
|
+
//#region src/rich-text-editor/RichTextEditorToolbar.tsx
|
|
8
|
+
const RichTextEditorToolbarComponent = ({ editor, toolbarItems, slots, showToolbar, renderTick }) => {
|
|
9
|
+
if (!showToolbar) return null;
|
|
10
|
+
const handleCommand = (commandFn) => {
|
|
11
|
+
try {
|
|
12
|
+
commandFn();
|
|
13
|
+
} catch {}
|
|
14
|
+
};
|
|
15
|
+
const isEditorFocused = editor.isFocused;
|
|
16
|
+
let separatorCount = 0;
|
|
17
|
+
let customCount = 0;
|
|
18
|
+
return /* @__PURE__ */ jsx("div", {
|
|
19
|
+
"data-render-tick": renderTick,
|
|
20
|
+
className: cn("flex flex-wrap items-center gap-1 border-b p-2", slots?.toolbar?.className),
|
|
21
|
+
children: toolbarItems.map((option) => {
|
|
22
|
+
if (option === "|") {
|
|
23
|
+
separatorCount += 1;
|
|
24
|
+
return /* @__PURE__ */ jsx("div", { className: cn("mx-1 h-6 w-px bg-border", slots?.toolbar?.separator?.className) }, `separator-${separatorCount}`);
|
|
25
|
+
}
|
|
26
|
+
if (typeof option === "string") {
|
|
27
|
+
const predefinedOption = predefinedToolbarItems[option];
|
|
28
|
+
if (!predefinedOption) return null;
|
|
29
|
+
return /* @__PURE__ */ jsx(ToolbarButton, {
|
|
30
|
+
onClick: () => handleCommand(() => predefinedOption.onClick(editor)),
|
|
31
|
+
isActive: isEditorFocused && (predefinedOption.isActive?.(editor) ?? false),
|
|
32
|
+
tooltip: predefinedOption.tooltip,
|
|
33
|
+
className: slots?.toolbar?.button?.className,
|
|
34
|
+
children: predefinedOption.icon
|
|
35
|
+
}, option);
|
|
36
|
+
}
|
|
37
|
+
const customOption = option;
|
|
38
|
+
customCount += 1;
|
|
39
|
+
return /* @__PURE__ */ jsx(ToolbarButton, {
|
|
40
|
+
onClick: () => handleCommand(() => customOption.onClick(editor)),
|
|
41
|
+
isActive: isEditorFocused && (customOption.isActive?.(editor) ?? false),
|
|
42
|
+
tooltip: customOption.tooltip,
|
|
43
|
+
className: slots?.toolbar?.button?.className,
|
|
44
|
+
children: customOption.icon
|
|
45
|
+
}, `custom-${customCount}-${customOption.tooltip}`);
|
|
46
|
+
})
|
|
47
|
+
});
|
|
48
|
+
};
|
|
49
|
+
const RichTextEditorToolbar = React.memo(RichTextEditorToolbarComponent);
|
|
50
|
+
|
|
51
|
+
//#endregion
|
|
52
|
+
export { RichTextEditorToolbar };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import { RichTextEditor, RichTextEditorProps, RichTextEditorSlots,
|
|
1
|
+
import { RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ToolbarItems } from "./RichTextEditor.cjs";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import { RichTextEditor, RichTextEditorProps, RichTextEditorSlots,
|
|
1
|
+
import { RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ToolbarItems } from "./RichTextEditor.js";
|
package/dist/rich-text-editor/{predefined-toolbar-options.cjs → predefined-toolbar-items.cjs}
RENAMED
|
@@ -4,8 +4,8 @@ lucide_react = require_rolldown_runtime.__toESM(lucide_react);
|
|
|
4
4
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
5
5
|
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
6
6
|
|
|
7
|
-
//#region src/rich-text-editor/predefined-toolbar-
|
|
8
|
-
const
|
|
7
|
+
//#region src/rich-text-editor/predefined-toolbar-items.tsx
|
|
8
|
+
const predefinedToolbarItems = {
|
|
9
9
|
bold: {
|
|
10
10
|
icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Bold, { className: "h-4 w-4" }),
|
|
11
11
|
tooltip: "Bold",
|
|
@@ -81,4 +81,4 @@ const predefinedToolbarOptions = {
|
|
|
81
81
|
};
|
|
82
82
|
|
|
83
83
|
//#endregion
|
|
84
|
-
exports.
|
|
84
|
+
exports.predefinedToolbarItems = predefinedToolbarItems;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { Bold, Code, Code2, Heading1, Heading2, Heading3, Italic, List, ListOrdered, Quote, Strikethrough, Underline } from "lucide-react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
|
|
4
|
-
//#region src/rich-text-editor/predefined-toolbar-
|
|
5
|
-
const
|
|
4
|
+
//#region src/rich-text-editor/predefined-toolbar-items.tsx
|
|
5
|
+
const predefinedToolbarItems = {
|
|
6
6
|
bold: {
|
|
7
7
|
icon: /* @__PURE__ */ jsx(Bold, { className: "h-4 w-4" }),
|
|
8
8
|
tooltip: "Bold",
|
|
@@ -78,4 +78,4 @@ const predefinedToolbarOptions = {
|
|
|
78
78
|
};
|
|
79
79
|
|
|
80
80
|
//#endregion
|
|
81
|
-
export {
|
|
81
|
+
export { predefinedToolbarItems };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime9 from "react/jsx-runtime";
|
|
2
2
|
|
|
3
3
|
//#region src/theme-toggle/ThemeModeDropdown.d.ts
|
|
4
4
|
interface ThemeModeDropdownProps {
|
|
@@ -17,7 +17,7 @@ interface ThemeModeDropdownProps {
|
|
|
17
17
|
* Provides Light / Dark / System options.
|
|
18
18
|
* Pure component - requires themeValue and onChange props.
|
|
19
19
|
*/
|
|
20
|
-
declare function ThemeModeDropdown(props: ThemeModeDropdownProps):
|
|
20
|
+
declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime9.JSX.Element;
|
|
21
21
|
declare namespace ThemeModeDropdown {
|
|
22
22
|
var displayName: string;
|
|
23
23
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime10 from "react/jsx-runtime";
|
|
2
2
|
|
|
3
3
|
//#region src/theme-toggle/ThemeModeDropdown.d.ts
|
|
4
4
|
interface ThemeModeDropdownProps {
|
|
@@ -17,7 +17,7 @@ interface ThemeModeDropdownProps {
|
|
|
17
17
|
* Provides Light / Dark / System options.
|
|
18
18
|
* Pure component - requires themeValue and onChange props.
|
|
19
19
|
*/
|
|
20
|
-
declare function ThemeModeDropdown(props: ThemeModeDropdownProps):
|
|
20
|
+
declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime10.JSX.Element;
|
|
21
21
|
declare namespace ThemeModeDropdown {
|
|
22
22
|
var displayName: string;
|
|
23
23
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime10 from "react/jsx-runtime";
|
|
2
2
|
|
|
3
3
|
//#region src/theme-toggle/ThemeModeSwitchInside.d.ts
|
|
4
4
|
type ThemeModeSwitchInsideSize = 'sm' | 'md' | 'lg';
|
|
@@ -25,7 +25,7 @@ interface ThemeModeSwitchInsideProps {
|
|
|
25
25
|
* Icons are embedded within the switch control.
|
|
26
26
|
* Pure component - requires value and onChange props.
|
|
27
27
|
*/
|
|
28
|
-
declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps):
|
|
28
|
+
declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime10.JSX.Element;
|
|
29
29
|
declare namespace ThemeModeSwitchInside {
|
|
30
30
|
var displayName: string;
|
|
31
31
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime11 from "react/jsx-runtime";
|
|
2
2
|
|
|
3
3
|
//#region src/theme-toggle/ThemeModeSwitchInside.d.ts
|
|
4
4
|
type ThemeModeSwitchInsideSize = 'sm' | 'md' | 'lg';
|
|
@@ -25,7 +25,7 @@ interface ThemeModeSwitchInsideProps {
|
|
|
25
25
|
* Icons are embedded within the switch control.
|
|
26
26
|
* Pure component - requires value and onChange props.
|
|
27
27
|
*/
|
|
28
|
-
declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps):
|
|
28
|
+
declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime11.JSX.Element;
|
|
29
29
|
declare namespace ThemeModeSwitchInside {
|
|
30
30
|
var displayName: string;
|
|
31
31
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime11 from "react/jsx-runtime";
|
|
2
2
|
|
|
3
3
|
//#region src/theme-toggle/ThemeModeSwitchOutside.d.ts
|
|
4
4
|
interface ThemeModeSwitchOutsideProps {
|
|
@@ -22,7 +22,7 @@ interface ThemeModeSwitchOutsideProps {
|
|
|
22
22
|
* Icons flank the switch control on either side.
|
|
23
23
|
* Pure component - requires value and onChange props.
|
|
24
24
|
*/
|
|
25
|
-
declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps):
|
|
25
|
+
declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime11.JSX.Element;
|
|
26
26
|
declare namespace ThemeModeSwitchOutside {
|
|
27
27
|
var displayName: string;
|
|
28
28
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime12 from "react/jsx-runtime";
|
|
2
2
|
|
|
3
3
|
//#region src/theme-toggle/ThemeModeSwitchOutside.d.ts
|
|
4
4
|
interface ThemeModeSwitchOutsideProps {
|
|
@@ -22,7 +22,7 @@ interface ThemeModeSwitchOutsideProps {
|
|
|
22
22
|
* Icons flank the switch control on either side.
|
|
23
23
|
* Pure component - requires value and onChange props.
|
|
24
24
|
*/
|
|
25
|
-
declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps):
|
|
25
|
+
declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime12.JSX.Element;
|
|
26
26
|
declare namespace ThemeModeSwitchOutside {
|
|
27
27
|
var displayName: string;
|
|
28
28
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime12 from "react/jsx-runtime";
|
|
2
2
|
|
|
3
3
|
//#region src/theme-toggle/ThemeModeToggleButton.d.ts
|
|
4
4
|
interface ThemeModeToggleButtonProps {
|
|
@@ -13,7 +13,7 @@ interface ThemeModeToggleButtonProps {
|
|
|
13
13
|
* Light/Dark toggle button.
|
|
14
14
|
* Pure component - toggles between light and dark.
|
|
15
15
|
*/
|
|
16
|
-
declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps):
|
|
16
|
+
declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime12.JSX.Element;
|
|
17
17
|
declare namespace ThemeModeToggleButton {
|
|
18
18
|
var displayName: string;
|
|
19
19
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime9 from "react/jsx-runtime";
|
|
2
2
|
|
|
3
3
|
//#region src/theme-toggle/ThemeModeToggleButton.d.ts
|
|
4
4
|
interface ThemeModeToggleButtonProps {
|
|
@@ -13,7 +13,7 @@ interface ThemeModeToggleButtonProps {
|
|
|
13
13
|
* Light/Dark toggle button.
|
|
14
14
|
* Pure component - toggles between light and dark.
|
|
15
15
|
*/
|
|
16
|
-
declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps):
|
|
16
|
+
declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime9.JSX.Element;
|
|
17
17
|
declare namespace ThemeModeToggleButton {
|
|
18
18
|
var displayName: string;
|
|
19
19
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pixpilot/shadcn-ui",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.35.0",
|
|
5
5
|
"description": "Custom UI components and utilities built with shadcn/ui.",
|
|
6
6
|
"author": "m.doaie <m.doaie@hotmail.com>",
|
|
7
7
|
"license": "MIT",
|
|
@@ -57,9 +57,9 @@
|
|
|
57
57
|
"react-dom": "19.2.0",
|
|
58
58
|
"tsdown": "^0.15.12",
|
|
59
59
|
"typescript": "^5.9.3",
|
|
60
|
-
"@internal/eslint-config": "0.3.0",
|
|
61
60
|
"@internal/hooks": "0.0.0",
|
|
62
61
|
"@internal/prettier-config": "0.0.1",
|
|
62
|
+
"@internal/eslint-config": "0.3.0",
|
|
63
63
|
"@internal/tsconfig": "0.1.0",
|
|
64
64
|
"@internal/tsdown-config": "0.1.0",
|
|
65
65
|
"@internal/vitest-config": "0.1.0"
|