@pixpilot/shadcn-ui 0.27.0 → 0.29.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/ColorSelect.d.ts +2 -2
- package/dist/ContentCard.d.ts +2 -2
- package/dist/DatePicker.d.ts +2 -2
- package/dist/file-upload/FileUpload.d.ts +2 -2
- package/dist/file-upload-inline/FileUploadInline.d.ts +2 -2
- package/dist/index.cjs +0 -2
- package/dist/index.d.cts +1 -2
- package/dist/index.d.ts +1 -2
- package/dist/index.js +1 -2
- package/dist/input/Input.d.ts +2 -2
- package/dist/theme-toggle/ThemeModeDropdown.cjs +9 -9
- package/dist/theme-toggle/ThemeModeDropdown.d.cts +6 -6
- package/dist/theme-toggle/ThemeModeDropdown.d.ts +6 -6
- package/dist/theme-toggle/ThemeModeDropdown.js +9 -9
- package/dist/theme-toggle/ThemeModeSwitchInside.cjs +6 -6
- package/dist/theme-toggle/ThemeModeSwitchInside.d.cts +4 -4
- package/dist/theme-toggle/ThemeModeSwitchInside.d.ts +4 -4
- package/dist/theme-toggle/ThemeModeSwitchInside.js +6 -6
- package/dist/theme-toggle/ThemeModeSwitchOutside.cjs +4 -4
- package/dist/theme-toggle/ThemeModeSwitchOutside.d.cts +4 -4
- package/dist/theme-toggle/ThemeModeSwitchOutside.d.ts +4 -4
- package/dist/theme-toggle/ThemeModeSwitchOutside.js +4 -4
- package/dist/theme-toggle/ThemeModeToggleButton.cjs +5 -5
- package/dist/theme-toggle/ThemeModeToggleButton.d.cts +5 -5
- package/dist/theme-toggle/ThemeModeToggleButton.d.ts +5 -5
- package/dist/theme-toggle/ThemeModeToggleButton.js +5 -5
- package/dist/theme-toggle/index.cjs +0 -1
- package/dist/theme-toggle/index.d.cts +1 -2
- package/dist/theme-toggle/index.d.ts +1 -2
- package/dist/theme-toggle/index.js +0 -1
- package/package.json +3 -3
- package/dist/theme-toggle/ThemeToggle.cjs +0 -88
- package/dist/theme-toggle/ThemeToggle.d.cts +0 -17
- package/dist/theme-toggle/ThemeToggle.d.ts +0 -17
- package/dist/theme-toggle/ThemeToggle.js +0 -85
package/dist/ColorSelect.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Select, SelectContent } from "@pixpilot/shadcn";
|
|
2
2
|
import React, { ComponentProps } from "react";
|
|
3
|
-
import * as
|
|
3
|
+
import * as react_jsx_runtime1 from "react/jsx-runtime";
|
|
4
4
|
|
|
5
5
|
//#region src/ColorSelect.d.ts
|
|
6
6
|
interface ColorSelectOption {
|
|
@@ -15,6 +15,6 @@ type BaseColorSelectProps = {
|
|
|
15
15
|
placeholder?: string;
|
|
16
16
|
keyboardMode?: 'cycle' | 'dropdown';
|
|
17
17
|
} & Omit<ComponentProps<typeof Select>, 'value' | 'onValueChange' | 'children'>;
|
|
18
|
-
declare function ColorSelect(props: BaseColorSelectProps):
|
|
18
|
+
declare function ColorSelect(props: BaseColorSelectProps): react_jsx_runtime1.JSX.Element;
|
|
19
19
|
//#endregion
|
|
20
20
|
export { BaseColorSelectProps, ColorSelect, ColorSelectOption };
|
package/dist/ContentCard.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Card } from "@pixpilot/shadcn";
|
|
2
2
|
import React, { ReactNode } from "react";
|
|
3
|
-
import * as
|
|
3
|
+
import * as react_jsx_runtime2 from "react/jsx-runtime";
|
|
4
4
|
|
|
5
5
|
//#region src/ContentCard.d.ts
|
|
6
6
|
interface SectionCardProps extends React.ComponentProps<typeof Card> {
|
|
@@ -8,7 +8,7 @@ interface SectionCardProps extends React.ComponentProps<typeof Card> {
|
|
|
8
8
|
children: ReactNode;
|
|
9
9
|
marginBottom?: boolean;
|
|
10
10
|
}
|
|
11
|
-
declare function ContentCard(props: SectionCardProps):
|
|
11
|
+
declare function ContentCard(props: SectionCardProps): react_jsx_runtime2.JSX.Element;
|
|
12
12
|
declare namespace ContentCard {
|
|
13
13
|
var displayName: string;
|
|
14
14
|
}
|
package/dist/DatePicker.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Calendar } from "@pixpilot/shadcn";
|
|
2
2
|
import { ComponentProps } from "react";
|
|
3
|
-
import * as
|
|
3
|
+
import * as react_jsx_runtime3 from "react/jsx-runtime";
|
|
4
4
|
|
|
5
5
|
//#region src/DatePicker.d.ts
|
|
6
6
|
type DatePickerProps = {
|
|
@@ -8,7 +8,7 @@ type DatePickerProps = {
|
|
|
8
8
|
onChange?: (date: Date | undefined) => void;
|
|
9
9
|
placeholder?: string;
|
|
10
10
|
} & Omit<ComponentProps<typeof Calendar>, 'selected' | 'onSelect' | 'mode'>;
|
|
11
|
-
declare function DatePicker(props: DatePickerProps):
|
|
11
|
+
declare function DatePicker(props: DatePickerProps): react_jsx_runtime3.JSX.Element;
|
|
12
12
|
declare namespace DatePicker {
|
|
13
13
|
var displayName: string;
|
|
14
14
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { FileUploadProps } from "./types/index.js";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime12 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/file-upload/FileUpload.d.ts
|
|
5
|
-
declare function FileUpload(props: FileUploadProps):
|
|
5
|
+
declare function FileUpload(props: FileUploadProps): react_jsx_runtime12.JSX.Element;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { FileUpload };
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { FileUploadInlineProps } from "./types.js";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime6 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_runtime6.JSX.Element;
|
|
9
9
|
//#endregion
|
|
10
10
|
export { FileUploadInline };
|
package/dist/index.cjs
CHANGED
|
@@ -57,7 +57,6 @@ const require_ThemeModeDropdown = require('./theme-toggle/ThemeModeDropdown.cjs'
|
|
|
57
57
|
const require_ThemeModeSwitchInside = require('./theme-toggle/ThemeModeSwitchInside.cjs');
|
|
58
58
|
const require_ThemeModeSwitchOutside = require('./theme-toggle/ThemeModeSwitchOutside.cjs');
|
|
59
59
|
const require_ThemeModeToggleButton = require('./theme-toggle/ThemeModeToggleButton.cjs');
|
|
60
|
-
const require_ThemeToggle = require('./theme-toggle/ThemeToggle.cjs');
|
|
61
60
|
require('./theme-toggle/index.cjs');
|
|
62
61
|
const require_toast = require('./toast/toast.cjs');
|
|
63
62
|
require('./toast/index.cjs');
|
|
@@ -108,7 +107,6 @@ exports.ThemeModeSwitchInside = require_ThemeModeSwitchInside.ThemeModeSwitchIns
|
|
|
108
107
|
exports.ThemeModeSwitchOutside = require_ThemeModeSwitchOutside.ThemeModeSwitchOutside;
|
|
109
108
|
exports.ThemeModeToggleButton = require_ThemeModeToggleButton.ThemeModeToggleButton;
|
|
110
109
|
exports.ThemeProvider = require_ThemeProvider.ThemeProvider;
|
|
111
|
-
exports.ThemeToggle = require_ThemeToggle.ThemeToggle;
|
|
112
110
|
exports.cn = __pixpilot_shadcn.cn;
|
|
113
111
|
exports.showConfirmDialog = require_confirmation_dialogs.showConfirmDialog;
|
|
114
112
|
exports.toast = require_toast.toast;
|
package/dist/index.d.cts
CHANGED
|
@@ -62,9 +62,8 @@ import { ThemeModeDropdown, ThemeModeDropdownProps } from "./theme-toggle/ThemeM
|
|
|
62
62
|
import { ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize } from "./theme-toggle/ThemeModeSwitchInside.cjs";
|
|
63
63
|
import { ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps } from "./theme-toggle/ThemeModeSwitchOutside.cjs";
|
|
64
64
|
import { ThemeModeToggleButton, ThemeModeToggleButtonProps } from "./theme-toggle/ThemeModeToggleButton.cjs";
|
|
65
|
-
import { ThemeToggle, ThemeToggleProps } from "./theme-toggle/ThemeToggle.cjs";
|
|
66
65
|
import "./theme-toggle/index.cjs";
|
|
67
66
|
import { DEFAULT_ALERT_DURATION, ToastMessage, toast, toastError, toastInfo, toastSuccess, toastWarning } from "./toast/toast.cjs";
|
|
68
67
|
import "./toast/index.cjs";
|
|
69
68
|
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, 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,
|
|
69
|
+
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, ThemeModeDropdown, ThemeModeDropdownProps, ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize, ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps, ThemeModeToggleButton, ThemeModeToggleButtonProps, ThemeProvider, ThemeProviderProps, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };
|
package/dist/index.d.ts
CHANGED
|
@@ -64,9 +64,8 @@ import { ThemeModeDropdown, ThemeModeDropdownProps } from "./theme-toggle/ThemeM
|
|
|
64
64
|
import { ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize } from "./theme-toggle/ThemeModeSwitchInside.js";
|
|
65
65
|
import { ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps } from "./theme-toggle/ThemeModeSwitchOutside.js";
|
|
66
66
|
import { ThemeModeToggleButton, ThemeModeToggleButtonProps } from "./theme-toggle/ThemeModeToggleButton.js";
|
|
67
|
-
import { ThemeToggle, ThemeToggleProps } from "./theme-toggle/ThemeToggle.js";
|
|
68
67
|
import "./theme-toggle/index.js";
|
|
69
68
|
import { DEFAULT_ALERT_DURATION, ToastMessage, toast, toastError, toastInfo, toastSuccess, toastWarning } from "./toast/toast.js";
|
|
70
69
|
import "./toast/index.js";
|
|
71
70
|
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, 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,
|
|
71
|
+
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, ThemeModeDropdown, ThemeModeDropdownProps, ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize, ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps, ThemeModeToggleButton, ThemeModeToggleButtonProps, ThemeProvider, ThemeProviderProps, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };
|
package/dist/index.js
CHANGED
|
@@ -58,10 +58,9 @@ import { ThemeModeDropdown } from "./theme-toggle/ThemeModeDropdown.js";
|
|
|
58
58
|
import { ThemeModeSwitchInside } from "./theme-toggle/ThemeModeSwitchInside.js";
|
|
59
59
|
import { ThemeModeSwitchOutside } from "./theme-toggle/ThemeModeSwitchOutside.js";
|
|
60
60
|
import { ThemeModeToggleButton } from "./theme-toggle/ThemeModeToggleButton.js";
|
|
61
|
-
import { ThemeToggle } from "./theme-toggle/ThemeToggle.js";
|
|
62
61
|
import "./theme-toggle/index.js";
|
|
63
62
|
import { DEFAULT_ALERT_DURATION, toast, toastError, toastInfo, toastSuccess, toastWarning } from "./toast/toast.js";
|
|
64
63
|
import "./toast/index.js";
|
|
65
64
|
import { cn } from "@pixpilot/shadcn";
|
|
66
65
|
|
|
67
|
-
export { AbsoluteFill, Alert, AvatarUpload, Button, CircleLoader, CloseButtonAbsolute, CloseButtonRounded, ColorPicker, ColorPickerBase, ColorSelect, Combobox, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DialogProvider, FileUpload, FileUploadInline, IconPicker, Input, Layout, LayoutFooter, LayoutHeader, LayoutMain, LoadingOverlay, Pagination, RichTextEditor, ScaledPreview, Select, Slider, SliderInput, SliderSelect, Tabs, TabsContent, TabsContext, TabsList, TabsTrigger, TagsInput, ThemeModeDropdown, ThemeModeSwitchInside, ThemeModeSwitchOutside, ThemeModeToggleButton, ThemeProvider,
|
|
66
|
+
export { AbsoluteFill, Alert, AvatarUpload, Button, CircleLoader, CloseButtonAbsolute, CloseButtonRounded, ColorPicker, ColorPickerBase, ColorSelect, Combobox, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DialogProvider, FileUpload, FileUploadInline, IconPicker, Input, Layout, LayoutFooter, LayoutHeader, LayoutMain, LoadingOverlay, Pagination, RichTextEditor, ScaledPreview, Select, Slider, SliderInput, SliderSelect, Tabs, TabsContent, TabsContext, TabsList, TabsTrigger, TagsInput, ThemeModeDropdown, ThemeModeSwitchInside, ThemeModeSwitchOutside, ThemeModeToggleButton, ThemeProvider, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };
|
package/dist/input/Input.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { InputProps } from "@pixpilot/shadcn";
|
|
2
2
|
import * as React$1 from "react";
|
|
3
|
-
import * as
|
|
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):
|
|
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 };
|
|
@@ -15,11 +15,11 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
|
15
15
|
/**
|
|
16
16
|
* Theme mode selector dropdown.
|
|
17
17
|
* Provides Light / Dark / System options.
|
|
18
|
-
* Pure component - requires
|
|
18
|
+
* Pure component - requires themeValue and onChange props.
|
|
19
19
|
*/
|
|
20
20
|
function ThemeModeDropdown(props) {
|
|
21
|
-
const { align = "end", className,
|
|
22
|
-
const isDark =
|
|
21
|
+
const { align = "end", className, themeValue, onChange, value, disabled } = props;
|
|
22
|
+
const isDark = value === "dark";
|
|
23
23
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DropdownMenuTrigger, {
|
|
24
24
|
asChild: true,
|
|
25
25
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
|
|
@@ -40,36 +40,36 @@ function ThemeModeDropdown(props) {
|
|
|
40
40
|
align,
|
|
41
41
|
children: [
|
|
42
42
|
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenuItem, {
|
|
43
|
-
onClick: () =>
|
|
43
|
+
onClick: () => onChange?.("light"),
|
|
44
44
|
children: [
|
|
45
45
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Sun, { className: "h-4 w-4 mr-2" }),
|
|
46
46
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
47
47
|
className: "flex-1",
|
|
48
48
|
children: "Light"
|
|
49
49
|
}),
|
|
50
|
-
|
|
50
|
+
themeValue === "light" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-4 w-4 ml-2" })
|
|
51
51
|
]
|
|
52
52
|
}),
|
|
53
53
|
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenuItem, {
|
|
54
|
-
onClick: () =>
|
|
54
|
+
onClick: () => onChange?.("dark"),
|
|
55
55
|
children: [
|
|
56
56
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Moon, { className: "h-4 w-4 mr-2" }),
|
|
57
57
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
58
58
|
className: "flex-1",
|
|
59
59
|
children: "Dark"
|
|
60
60
|
}),
|
|
61
|
-
|
|
61
|
+
themeValue === "dark" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-4 w-4 ml-2" })
|
|
62
62
|
]
|
|
63
63
|
}),
|
|
64
64
|
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DropdownMenuItem, {
|
|
65
|
-
onClick: () =>
|
|
65
|
+
onClick: () => onChange?.("system"),
|
|
66
66
|
children: [
|
|
67
67
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Monitor, { className: "h-4 w-4 mr-2" }),
|
|
68
68
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
69
69
|
className: "flex-1",
|
|
70
70
|
children: "System"
|
|
71
71
|
}),
|
|
72
|
-
|
|
72
|
+
themeValue === "system" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-4 w-4 ml-2" })
|
|
73
73
|
]
|
|
74
74
|
})
|
|
75
75
|
]
|
|
@@ -4,18 +4,18 @@ import * as react_jsx_runtime10 from "react/jsx-runtime";
|
|
|
4
4
|
interface ThemeModeDropdownProps {
|
|
5
5
|
align?: 'start' | 'center' | 'end';
|
|
6
6
|
className?: string;
|
|
7
|
-
/** Current theme
|
|
8
|
-
|
|
7
|
+
/** Current theme selection ("light" | "dark" | "system") */
|
|
8
|
+
themeValue?: string;
|
|
9
9
|
/** Function to change the theme */
|
|
10
|
-
|
|
11
|
-
/** The resolved theme ("light" | "dark") */
|
|
12
|
-
|
|
10
|
+
onChange?: (theme: string) => void;
|
|
11
|
+
/** The resolved theme value ("light" | "dark") */
|
|
12
|
+
value?: string;
|
|
13
13
|
disabled?: boolean;
|
|
14
14
|
}
|
|
15
15
|
/**
|
|
16
16
|
* Theme mode selector dropdown.
|
|
17
17
|
* Provides Light / Dark / System options.
|
|
18
|
-
* Pure component - requires
|
|
18
|
+
* Pure component - requires themeValue and onChange props.
|
|
19
19
|
*/
|
|
20
20
|
declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime10.JSX.Element;
|
|
21
21
|
declare namespace ThemeModeDropdown {
|
|
@@ -4,18 +4,18 @@ import * as react_jsx_runtime9 from "react/jsx-runtime";
|
|
|
4
4
|
interface ThemeModeDropdownProps {
|
|
5
5
|
align?: 'start' | 'center' | 'end';
|
|
6
6
|
className?: string;
|
|
7
|
-
/** Current theme
|
|
8
|
-
|
|
7
|
+
/** Current theme selection ("light" | "dark" | "system") */
|
|
8
|
+
themeValue?: string;
|
|
9
9
|
/** Function to change the theme */
|
|
10
|
-
|
|
11
|
-
/** The resolved theme ("light" | "dark") */
|
|
12
|
-
|
|
10
|
+
onChange?: (theme: string) => void;
|
|
11
|
+
/** The resolved theme value ("light" | "dark") */
|
|
12
|
+
value?: string;
|
|
13
13
|
disabled?: boolean;
|
|
14
14
|
}
|
|
15
15
|
/**
|
|
16
16
|
* Theme mode selector dropdown.
|
|
17
17
|
* Provides Light / Dark / System options.
|
|
18
|
-
* Pure component - requires
|
|
18
|
+
* Pure component - requires themeValue and onChange props.
|
|
19
19
|
*/
|
|
20
20
|
declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime9.JSX.Element;
|
|
21
21
|
declare namespace ThemeModeDropdown {
|
|
@@ -10,11 +10,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
10
10
|
/**
|
|
11
11
|
* Theme mode selector dropdown.
|
|
12
12
|
* Provides Light / Dark / System options.
|
|
13
|
-
* Pure component - requires
|
|
13
|
+
* Pure component - requires themeValue and onChange props.
|
|
14
14
|
*/
|
|
15
15
|
function ThemeModeDropdown(props) {
|
|
16
|
-
const { align = "end", className,
|
|
17
|
-
const isDark =
|
|
16
|
+
const { align = "end", className, themeValue, onChange, value, disabled } = props;
|
|
17
|
+
const isDark = value === "dark";
|
|
18
18
|
return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
|
|
19
19
|
asChild: true,
|
|
20
20
|
children: /* @__PURE__ */ jsxs(Button, {
|
|
@@ -35,36 +35,36 @@ function ThemeModeDropdown(props) {
|
|
|
35
35
|
align,
|
|
36
36
|
children: [
|
|
37
37
|
/* @__PURE__ */ jsxs(DropdownMenuItem, {
|
|
38
|
-
onClick: () =>
|
|
38
|
+
onClick: () => onChange?.("light"),
|
|
39
39
|
children: [
|
|
40
40
|
/* @__PURE__ */ jsx(Sun, { className: "h-4 w-4 mr-2" }),
|
|
41
41
|
/* @__PURE__ */ jsx("span", {
|
|
42
42
|
className: "flex-1",
|
|
43
43
|
children: "Light"
|
|
44
44
|
}),
|
|
45
|
-
|
|
45
|
+
themeValue === "light" && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 ml-2" })
|
|
46
46
|
]
|
|
47
47
|
}),
|
|
48
48
|
/* @__PURE__ */ jsxs(DropdownMenuItem, {
|
|
49
|
-
onClick: () =>
|
|
49
|
+
onClick: () => onChange?.("dark"),
|
|
50
50
|
children: [
|
|
51
51
|
/* @__PURE__ */ jsx(Moon, { className: "h-4 w-4 mr-2" }),
|
|
52
52
|
/* @__PURE__ */ jsx("span", {
|
|
53
53
|
className: "flex-1",
|
|
54
54
|
children: "Dark"
|
|
55
55
|
}),
|
|
56
|
-
|
|
56
|
+
themeValue === "dark" && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 ml-2" })
|
|
57
57
|
]
|
|
58
58
|
}),
|
|
59
59
|
/* @__PURE__ */ jsxs(DropdownMenuItem, {
|
|
60
|
-
onClick: () =>
|
|
60
|
+
onClick: () => onChange?.("system"),
|
|
61
61
|
children: [
|
|
62
62
|
/* @__PURE__ */ jsx(Monitor, { className: "h-4 w-4 mr-2" }),
|
|
63
63
|
/* @__PURE__ */ jsx("span", {
|
|
64
64
|
className: "flex-1",
|
|
65
65
|
children: "System"
|
|
66
66
|
}),
|
|
67
|
-
|
|
67
|
+
themeValue === "system" && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 ml-2" })
|
|
68
68
|
]
|
|
69
69
|
})
|
|
70
70
|
]
|
|
@@ -16,9 +16,9 @@ const ICON_CLASS_NAME = (0, __pixpilot_shadcn.cn)("pointer-events-none rounded-f
|
|
|
16
16
|
const SWITCH_OVERLAY_CLASS_NAME = (0, __pixpilot_shadcn.cn)("absolute inset-0 h-full w-full opacity-0 cursor-pointer rounded-full", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "ring-offset-background disabled:cursor-not-allowed");
|
|
17
17
|
const SIZE_STYLES = {
|
|
18
18
|
sm: {
|
|
19
|
-
wrapper: "h-
|
|
19
|
+
wrapper: "h-7",
|
|
20
20
|
iconPadding: "p-1",
|
|
21
|
-
defaultIconSize:
|
|
21
|
+
defaultIconSize: 20
|
|
22
22
|
},
|
|
23
23
|
md: {
|
|
24
24
|
wrapper: "h-8/5",
|
|
@@ -34,15 +34,15 @@ const SIZE_STYLES = {
|
|
|
34
34
|
/**
|
|
35
35
|
* Light/Dark theme switch with icons inside the switch.
|
|
36
36
|
* Icons are embedded within the switch control.
|
|
37
|
-
* Pure component - requires
|
|
37
|
+
* Pure component - requires value and onChange props.
|
|
38
38
|
*/
|
|
39
39
|
function ThemeModeSwitchInside(props) {
|
|
40
|
-
const { showIcons = true, size = "md", iconSize: iconSizeProp, className, switchClassName, disabled, ariaLabel = "Toggle theme",
|
|
40
|
+
const { showIcons = true, size = "md", iconSize: iconSizeProp, className, switchClassName, disabled, ariaLabel = "Toggle theme", value, onChange } = props;
|
|
41
41
|
const sizeStyles = SIZE_STYLES[size];
|
|
42
42
|
const iconSize = iconSizeProp ?? sizeStyles.defaultIconSize ?? DEFAULT_ICON_SIZE;
|
|
43
|
-
const isDark =
|
|
43
|
+
const isDark = value === "dark";
|
|
44
44
|
const onCheckedChange = (checked) => {
|
|
45
|
-
|
|
45
|
+
onChange?.(checked ? "dark" : "light");
|
|
46
46
|
};
|
|
47
47
|
if (!showIcons) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Switch, {
|
|
48
48
|
checked: isDark,
|
|
@@ -15,15 +15,15 @@ interface ThemeModeSwitchInsideProps {
|
|
|
15
15
|
switchClassName?: string;
|
|
16
16
|
disabled?: boolean;
|
|
17
17
|
ariaLabel?: string;
|
|
18
|
-
/** The resolved theme ("light" | "dark") */
|
|
19
|
-
|
|
18
|
+
/** The resolved theme value ("light" | "dark") */
|
|
19
|
+
value?: string;
|
|
20
20
|
/** Function to change the theme */
|
|
21
|
-
|
|
21
|
+
onChange?: (theme: string) => void;
|
|
22
22
|
}
|
|
23
23
|
/**
|
|
24
24
|
* Light/Dark theme switch with icons inside the switch.
|
|
25
25
|
* Icons are embedded within the switch control.
|
|
26
|
-
* Pure component - requires
|
|
26
|
+
* Pure component - requires value and onChange props.
|
|
27
27
|
*/
|
|
28
28
|
declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime11.JSX.Element;
|
|
29
29
|
declare namespace ThemeModeSwitchInside {
|
|
@@ -15,15 +15,15 @@ interface ThemeModeSwitchInsideProps {
|
|
|
15
15
|
switchClassName?: string;
|
|
16
16
|
disabled?: boolean;
|
|
17
17
|
ariaLabel?: string;
|
|
18
|
-
/** The resolved theme ("light" | "dark") */
|
|
19
|
-
|
|
18
|
+
/** The resolved theme value ("light" | "dark") */
|
|
19
|
+
value?: string;
|
|
20
20
|
/** Function to change the theme */
|
|
21
|
-
|
|
21
|
+
onChange?: (theme: string) => void;
|
|
22
22
|
}
|
|
23
23
|
/**
|
|
24
24
|
* Light/Dark theme switch with icons inside the switch.
|
|
25
25
|
* Icons are embedded within the switch control.
|
|
26
|
-
* Pure component - requires
|
|
26
|
+
* Pure component - requires value and onChange props.
|
|
27
27
|
*/
|
|
28
28
|
declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime10.JSX.Element;
|
|
29
29
|
declare namespace ThemeModeSwitchInside {
|
|
@@ -12,9 +12,9 @@ const ICON_CLASS_NAME = cn("pointer-events-none rounded-full transition-colors")
|
|
|
12
12
|
const SWITCH_OVERLAY_CLASS_NAME = cn("absolute inset-0 h-full w-full opacity-0 cursor-pointer rounded-full", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "ring-offset-background disabled:cursor-not-allowed");
|
|
13
13
|
const SIZE_STYLES = {
|
|
14
14
|
sm: {
|
|
15
|
-
wrapper: "h-
|
|
15
|
+
wrapper: "h-7",
|
|
16
16
|
iconPadding: "p-1",
|
|
17
|
-
defaultIconSize:
|
|
17
|
+
defaultIconSize: 20
|
|
18
18
|
},
|
|
19
19
|
md: {
|
|
20
20
|
wrapper: "h-8/5",
|
|
@@ -30,15 +30,15 @@ const SIZE_STYLES = {
|
|
|
30
30
|
/**
|
|
31
31
|
* Light/Dark theme switch with icons inside the switch.
|
|
32
32
|
* Icons are embedded within the switch control.
|
|
33
|
-
* Pure component - requires
|
|
33
|
+
* Pure component - requires value and onChange props.
|
|
34
34
|
*/
|
|
35
35
|
function ThemeModeSwitchInside(props) {
|
|
36
|
-
const { showIcons = true, size = "md", iconSize: iconSizeProp, className, switchClassName, disabled, ariaLabel = "Toggle theme",
|
|
36
|
+
const { showIcons = true, size = "md", iconSize: iconSizeProp, className, switchClassName, disabled, ariaLabel = "Toggle theme", value, onChange } = props;
|
|
37
37
|
const sizeStyles = SIZE_STYLES[size];
|
|
38
38
|
const iconSize = iconSizeProp ?? sizeStyles.defaultIconSize ?? DEFAULT_ICON_SIZE;
|
|
39
|
-
const isDark =
|
|
39
|
+
const isDark = value === "dark";
|
|
40
40
|
const onCheckedChange = (checked) => {
|
|
41
|
-
|
|
41
|
+
onChange?.(checked ? "dark" : "light");
|
|
42
42
|
};
|
|
43
43
|
if (!showIcons) return /* @__PURE__ */ jsx(Switch, {
|
|
44
44
|
checked: isDark,
|
|
@@ -16,13 +16,13 @@ const DEFAULT_ICON_SIZE = 16;
|
|
|
16
16
|
/**
|
|
17
17
|
* Light/Dark theme switch with icons outside the switch.
|
|
18
18
|
* Icons flank the switch control on either side.
|
|
19
|
-
* Pure component - requires
|
|
19
|
+
* Pure component - requires value and onChange props.
|
|
20
20
|
*/
|
|
21
21
|
function ThemeModeSwitchOutside(props) {
|
|
22
|
-
const { showIcons = true, iconSize = DEFAULT_ICON_SIZE, className, switchClassName, disabled, ariaLabel = "Toggle theme",
|
|
23
|
-
const isDark =
|
|
22
|
+
const { showIcons = true, iconSize = DEFAULT_ICON_SIZE, className, switchClassName, disabled, ariaLabel = "Toggle theme", value, onChange } = props;
|
|
23
|
+
const isDark = value === "dark";
|
|
24
24
|
const onCheckedChange = (checked) => {
|
|
25
|
-
|
|
25
|
+
onChange?.(checked ? "dark" : "light");
|
|
26
26
|
};
|
|
27
27
|
if (!showIcons) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Switch, {
|
|
28
28
|
checked: isDark,
|
|
@@ -12,15 +12,15 @@ interface ThemeModeSwitchOutsideProps {
|
|
|
12
12
|
switchClassName?: string;
|
|
13
13
|
disabled?: boolean;
|
|
14
14
|
ariaLabel?: string;
|
|
15
|
-
/** The resolved theme ("light" | "dark") */
|
|
16
|
-
|
|
15
|
+
/** The resolved theme value ("light" | "dark") */
|
|
16
|
+
value?: string;
|
|
17
17
|
/** Function to change the theme */
|
|
18
|
-
|
|
18
|
+
onChange?: (theme: string) => void;
|
|
19
19
|
}
|
|
20
20
|
/**
|
|
21
21
|
* Light/Dark theme switch with icons outside the switch.
|
|
22
22
|
* Icons flank the switch control on either side.
|
|
23
|
-
* Pure component - requires
|
|
23
|
+
* Pure component - requires value and onChange props.
|
|
24
24
|
*/
|
|
25
25
|
declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime12.JSX.Element;
|
|
26
26
|
declare namespace ThemeModeSwitchOutside {
|
|
@@ -12,15 +12,15 @@ interface ThemeModeSwitchOutsideProps {
|
|
|
12
12
|
switchClassName?: string;
|
|
13
13
|
disabled?: boolean;
|
|
14
14
|
ariaLabel?: string;
|
|
15
|
-
/** The resolved theme ("light" | "dark") */
|
|
16
|
-
|
|
15
|
+
/** The resolved theme value ("light" | "dark") */
|
|
16
|
+
value?: string;
|
|
17
17
|
/** Function to change the theme */
|
|
18
|
-
|
|
18
|
+
onChange?: (theme: string) => void;
|
|
19
19
|
}
|
|
20
20
|
/**
|
|
21
21
|
* Light/Dark theme switch with icons outside the switch.
|
|
22
22
|
* Icons flank the switch control on either side.
|
|
23
|
-
* Pure component - requires
|
|
23
|
+
* Pure component - requires value and onChange props.
|
|
24
24
|
*/
|
|
25
25
|
declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime11.JSX.Element;
|
|
26
26
|
declare namespace ThemeModeSwitchOutside {
|
|
@@ -11,13 +11,13 @@ const DEFAULT_ICON_SIZE = 16;
|
|
|
11
11
|
/**
|
|
12
12
|
* Light/Dark theme switch with icons outside the switch.
|
|
13
13
|
* Icons flank the switch control on either side.
|
|
14
|
-
* Pure component - requires
|
|
14
|
+
* Pure component - requires value and onChange props.
|
|
15
15
|
*/
|
|
16
16
|
function ThemeModeSwitchOutside(props) {
|
|
17
|
-
const { showIcons = true, iconSize = DEFAULT_ICON_SIZE, className, switchClassName, disabled, ariaLabel = "Toggle theme",
|
|
18
|
-
const isDark =
|
|
17
|
+
const { showIcons = true, iconSize = DEFAULT_ICON_SIZE, className, switchClassName, disabled, ariaLabel = "Toggle theme", value, onChange } = props;
|
|
18
|
+
const isDark = value === "dark";
|
|
19
19
|
const onCheckedChange = (checked) => {
|
|
20
|
-
|
|
20
|
+
onChange?.(checked ? "dark" : "light");
|
|
21
21
|
};
|
|
22
22
|
if (!showIcons) return /* @__PURE__ */ jsx(Switch, {
|
|
23
23
|
checked: isDark,
|
|
@@ -17,14 +17,14 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
|
17
17
|
* Pure component - toggles between light and dark.
|
|
18
18
|
*/
|
|
19
19
|
function ThemeModeToggleButton(props) {
|
|
20
|
-
const { className,
|
|
20
|
+
const { className, value, onChange, disabled } = props;
|
|
21
21
|
const toggleTheme = react.default.useCallback(() => {
|
|
22
|
-
if (
|
|
23
|
-
|
|
22
|
+
if (value === "dark") {
|
|
23
|
+
onChange?.("light");
|
|
24
24
|
return;
|
|
25
25
|
}
|
|
26
|
-
|
|
27
|
-
}, [
|
|
26
|
+
onChange?.("dark");
|
|
27
|
+
}, [value, onChange]);
|
|
28
28
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
|
|
29
29
|
variant: "secondary",
|
|
30
30
|
size: "icon",
|
|
@@ -1,19 +1,19 @@
|
|
|
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 {
|
|
5
5
|
className?: string;
|
|
6
|
-
/** The resolved theme ("light" | "dark") */
|
|
7
|
-
|
|
6
|
+
/** The resolved theme value ("light" | "dark") */
|
|
7
|
+
value?: string;
|
|
8
8
|
/** Function to change the theme */
|
|
9
|
-
|
|
9
|
+
onChange?: (theme: string) => void;
|
|
10
10
|
disabled?: boolean;
|
|
11
11
|
}
|
|
12
12
|
/**
|
|
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
|
}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime8 from "react/jsx-runtime";
|
|
2
2
|
|
|
3
3
|
//#region src/theme-toggle/ThemeModeToggleButton.d.ts
|
|
4
4
|
interface ThemeModeToggleButtonProps {
|
|
5
5
|
className?: string;
|
|
6
|
-
/** The resolved theme ("light" | "dark") */
|
|
7
|
-
|
|
6
|
+
/** The resolved theme value ("light" | "dark") */
|
|
7
|
+
value?: string;
|
|
8
8
|
/** Function to change the theme */
|
|
9
|
-
|
|
9
|
+
onChange?: (theme: string) => void;
|
|
10
10
|
disabled?: boolean;
|
|
11
11
|
}
|
|
12
12
|
/**
|
|
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_runtime8.JSX.Element;
|
|
17
17
|
declare namespace ThemeModeToggleButton {
|
|
18
18
|
var displayName: string;
|
|
19
19
|
}
|
|
@@ -12,14 +12,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
12
12
|
* Pure component - toggles between light and dark.
|
|
13
13
|
*/
|
|
14
14
|
function ThemeModeToggleButton(props) {
|
|
15
|
-
const { className,
|
|
15
|
+
const { className, value, onChange, disabled } = props;
|
|
16
16
|
const toggleTheme = React.useCallback(() => {
|
|
17
|
-
if (
|
|
18
|
-
|
|
17
|
+
if (value === "dark") {
|
|
18
|
+
onChange?.("light");
|
|
19
19
|
return;
|
|
20
20
|
}
|
|
21
|
-
|
|
22
|
-
}, [
|
|
21
|
+
onChange?.("dark");
|
|
22
|
+
}, [value, onChange]);
|
|
23
23
|
return /* @__PURE__ */ jsxs(Button, {
|
|
24
24
|
variant: "secondary",
|
|
25
25
|
size: "icon",
|
|
@@ -2,4 +2,3 @@ const require_ThemeModeDropdown = require('./ThemeModeDropdown.cjs');
|
|
|
2
2
|
const require_ThemeModeSwitchInside = require('./ThemeModeSwitchInside.cjs');
|
|
3
3
|
const require_ThemeModeSwitchOutside = require('./ThemeModeSwitchOutside.cjs');
|
|
4
4
|
const require_ThemeModeToggleButton = require('./ThemeModeToggleButton.cjs');
|
|
5
|
-
const require_ThemeToggle = require('./ThemeToggle.cjs');
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { ThemeModeDropdown, ThemeModeDropdownProps } from "./ThemeModeDropdown.cjs";
|
|
2
2
|
import { ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize } from "./ThemeModeSwitchInside.cjs";
|
|
3
3
|
import { ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps } from "./ThemeModeSwitchOutside.cjs";
|
|
4
|
-
import { ThemeModeToggleButton, ThemeModeToggleButtonProps } from "./ThemeModeToggleButton.cjs";
|
|
5
|
-
import { ThemeToggle, ThemeToggleProps } from "./ThemeToggle.cjs";
|
|
4
|
+
import { ThemeModeToggleButton, ThemeModeToggleButtonProps } from "./ThemeModeToggleButton.cjs";
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { ThemeModeDropdown, ThemeModeDropdownProps } from "./ThemeModeDropdown.js";
|
|
2
2
|
import { ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize } from "./ThemeModeSwitchInside.js";
|
|
3
3
|
import { ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps } from "./ThemeModeSwitchOutside.js";
|
|
4
|
-
import { ThemeModeToggleButton, ThemeModeToggleButtonProps } from "./ThemeModeToggleButton.js";
|
|
5
|
-
import { ThemeToggle, ThemeToggleProps } from "./ThemeToggle.js";
|
|
4
|
+
import { ThemeModeToggleButton, ThemeModeToggleButtonProps } from "./ThemeModeToggleButton.js";
|
|
@@ -2,4 +2,3 @@ import { ThemeModeDropdown } from "./ThemeModeDropdown.js";
|
|
|
2
2
|
import { ThemeModeSwitchInside } from "./ThemeModeSwitchInside.js";
|
|
3
3
|
import { ThemeModeSwitchOutside } from "./ThemeModeSwitchOutside.js";
|
|
4
4
|
import { ThemeModeToggleButton } from "./ThemeModeToggleButton.js";
|
|
5
|
-
import { ThemeToggle } from "./ThemeToggle.js";
|
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.29.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,11 +57,11 @@
|
|
|
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",
|
|
61
|
+
"@internal/eslint-config": "0.3.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",
|
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
|
|
5
|
-
let react = require("react");
|
|
6
|
-
react = require_rolldown_runtime.__toESM(react);
|
|
7
|
-
let react_jsx_runtime = require("react/jsx-runtime");
|
|
8
|
-
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
9
|
-
|
|
10
|
-
//#region src/theme-toggle/ThemeToggle.tsx
|
|
11
|
-
function SunIcon() {
|
|
12
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
|
|
13
|
-
className: "h-5 w-5",
|
|
14
|
-
fill: "none",
|
|
15
|
-
stroke: "currentColor",
|
|
16
|
-
viewBox: "0 0 24 24",
|
|
17
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
18
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
|
|
19
|
-
strokeLinecap: "round",
|
|
20
|
-
strokeLinejoin: "round",
|
|
21
|
-
strokeWidth: 2,
|
|
22
|
-
d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
|
|
23
|
-
})
|
|
24
|
-
});
|
|
25
|
-
}
|
|
26
|
-
function MoonIcon() {
|
|
27
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
|
|
28
|
-
className: "h-5 w-5",
|
|
29
|
-
fill: "none",
|
|
30
|
-
stroke: "currentColor",
|
|
31
|
-
viewBox: "0 0 24 24",
|
|
32
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
33
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
|
|
34
|
-
strokeLinecap: "round",
|
|
35
|
-
strokeLinejoin: "round",
|
|
36
|
-
strokeWidth: 2,
|
|
37
|
-
d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
|
|
38
|
-
})
|
|
39
|
-
});
|
|
40
|
-
}
|
|
41
|
-
function SystemIcon() {
|
|
42
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
|
|
43
|
-
className: "h-5 w-5",
|
|
44
|
-
fill: "none",
|
|
45
|
-
stroke: "currentColor",
|
|
46
|
-
viewBox: "0 0 24 24",
|
|
47
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
48
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
|
|
49
|
-
strokeLinecap: "round",
|
|
50
|
-
strokeLinejoin: "round",
|
|
51
|
-
strokeWidth: 2,
|
|
52
|
-
d: "M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
|
|
53
|
-
})
|
|
54
|
-
});
|
|
55
|
-
}
|
|
56
|
-
/**
|
|
57
|
-
* Theme toggle button that cycles through light -> dark -> system.
|
|
58
|
-
* Pure component - requires theme and setTheme props.
|
|
59
|
-
*/
|
|
60
|
-
function ThemeToggle(props) {
|
|
61
|
-
const { theme, setTheme, disabled } = props;
|
|
62
|
-
const toggleTheme = () => {
|
|
63
|
-
if (theme === "light") setTheme?.("dark");
|
|
64
|
-
else if (theme === "dark") setTheme?.("system");
|
|
65
|
-
else setTheme?.("light");
|
|
66
|
-
};
|
|
67
|
-
const getIcon = () => {
|
|
68
|
-
if (theme === "light") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MoonIcon, {});
|
|
69
|
-
if (theme === "dark") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SystemIcon, {});
|
|
70
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SunIcon, {});
|
|
71
|
-
};
|
|
72
|
-
const getTitle = () => {
|
|
73
|
-
if (theme === "light") return "Switch to Dark mode";
|
|
74
|
-
if (theme === "dark") return "Switch to System mode";
|
|
75
|
-
return "Switch to Light mode";
|
|
76
|
-
};
|
|
77
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
|
|
78
|
-
onClick: toggleTheme,
|
|
79
|
-
className: "flex h-9 w-9 items-center justify-center rounded-md border border-gray-200 bg-white text-gray-900 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-50",
|
|
80
|
-
title: getTitle(),
|
|
81
|
-
type: "button",
|
|
82
|
-
disabled,
|
|
83
|
-
children: getIcon()
|
|
84
|
-
});
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
//#endregion
|
|
88
|
-
exports.ThemeToggle = ThemeToggle;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime9 from "react/jsx-runtime";
|
|
2
|
-
|
|
3
|
-
//#region src/theme-toggle/ThemeToggle.d.ts
|
|
4
|
-
interface ThemeToggleProps {
|
|
5
|
-
/** Current theme value ("light" | "dark" | "system") */
|
|
6
|
-
theme?: string;
|
|
7
|
-
/** Function to change the theme */
|
|
8
|
-
setTheme?: (theme: string) => void;
|
|
9
|
-
disabled?: boolean;
|
|
10
|
-
}
|
|
11
|
-
/**
|
|
12
|
-
* Theme toggle button that cycles through light -> dark -> system.
|
|
13
|
-
* Pure component - requires theme and setTheme props.
|
|
14
|
-
*/
|
|
15
|
-
declare function ThemeToggle(props: ThemeToggleProps): react_jsx_runtime9.JSX.Element;
|
|
16
|
-
//#endregion
|
|
17
|
-
export { ThemeToggle, ThemeToggleProps };
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime13 from "react/jsx-runtime";
|
|
2
|
-
|
|
3
|
-
//#region src/theme-toggle/ThemeToggle.d.ts
|
|
4
|
-
interface ThemeToggleProps {
|
|
5
|
-
/** Current theme value ("light" | "dark" | "system") */
|
|
6
|
-
theme?: string;
|
|
7
|
-
/** Function to change the theme */
|
|
8
|
-
setTheme?: (theme: string) => void;
|
|
9
|
-
disabled?: boolean;
|
|
10
|
-
}
|
|
11
|
-
/**
|
|
12
|
-
* Theme toggle button that cycles through light -> dark -> system.
|
|
13
|
-
* Pure component - requires theme and setTheme props.
|
|
14
|
-
*/
|
|
15
|
-
declare function ThemeToggle(props: ThemeToggleProps): react_jsx_runtime13.JSX.Element;
|
|
16
|
-
//#endregion
|
|
17
|
-
export { ThemeToggle, ThemeToggleProps };
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import React from "react";
|
|
5
|
-
import { jsx } from "react/jsx-runtime";
|
|
6
|
-
|
|
7
|
-
//#region src/theme-toggle/ThemeToggle.tsx
|
|
8
|
-
function SunIcon() {
|
|
9
|
-
return /* @__PURE__ */ jsx("svg", {
|
|
10
|
-
className: "h-5 w-5",
|
|
11
|
-
fill: "none",
|
|
12
|
-
stroke: "currentColor",
|
|
13
|
-
viewBox: "0 0 24 24",
|
|
14
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
15
|
-
children: /* @__PURE__ */ jsx("path", {
|
|
16
|
-
strokeLinecap: "round",
|
|
17
|
-
strokeLinejoin: "round",
|
|
18
|
-
strokeWidth: 2,
|
|
19
|
-
d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
|
|
20
|
-
})
|
|
21
|
-
});
|
|
22
|
-
}
|
|
23
|
-
function MoonIcon() {
|
|
24
|
-
return /* @__PURE__ */ jsx("svg", {
|
|
25
|
-
className: "h-5 w-5",
|
|
26
|
-
fill: "none",
|
|
27
|
-
stroke: "currentColor",
|
|
28
|
-
viewBox: "0 0 24 24",
|
|
29
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
30
|
-
children: /* @__PURE__ */ jsx("path", {
|
|
31
|
-
strokeLinecap: "round",
|
|
32
|
-
strokeLinejoin: "round",
|
|
33
|
-
strokeWidth: 2,
|
|
34
|
-
d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
|
|
35
|
-
})
|
|
36
|
-
});
|
|
37
|
-
}
|
|
38
|
-
function SystemIcon() {
|
|
39
|
-
return /* @__PURE__ */ jsx("svg", {
|
|
40
|
-
className: "h-5 w-5",
|
|
41
|
-
fill: "none",
|
|
42
|
-
stroke: "currentColor",
|
|
43
|
-
viewBox: "0 0 24 24",
|
|
44
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
45
|
-
children: /* @__PURE__ */ jsx("path", {
|
|
46
|
-
strokeLinecap: "round",
|
|
47
|
-
strokeLinejoin: "round",
|
|
48
|
-
strokeWidth: 2,
|
|
49
|
-
d: "M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
|
|
50
|
-
})
|
|
51
|
-
});
|
|
52
|
-
}
|
|
53
|
-
/**
|
|
54
|
-
* Theme toggle button that cycles through light -> dark -> system.
|
|
55
|
-
* Pure component - requires theme and setTheme props.
|
|
56
|
-
*/
|
|
57
|
-
function ThemeToggle(props) {
|
|
58
|
-
const { theme, setTheme, disabled } = props;
|
|
59
|
-
const toggleTheme = () => {
|
|
60
|
-
if (theme === "light") setTheme?.("dark");
|
|
61
|
-
else if (theme === "dark") setTheme?.("system");
|
|
62
|
-
else setTheme?.("light");
|
|
63
|
-
};
|
|
64
|
-
const getIcon = () => {
|
|
65
|
-
if (theme === "light") return /* @__PURE__ */ jsx(MoonIcon, {});
|
|
66
|
-
if (theme === "dark") return /* @__PURE__ */ jsx(SystemIcon, {});
|
|
67
|
-
return /* @__PURE__ */ jsx(SunIcon, {});
|
|
68
|
-
};
|
|
69
|
-
const getTitle = () => {
|
|
70
|
-
if (theme === "light") return "Switch to Dark mode";
|
|
71
|
-
if (theme === "dark") return "Switch to System mode";
|
|
72
|
-
return "Switch to Light mode";
|
|
73
|
-
};
|
|
74
|
-
return /* @__PURE__ */ jsx("button", {
|
|
75
|
-
onClick: toggleTheme,
|
|
76
|
-
className: "flex h-9 w-9 items-center justify-center rounded-md border border-gray-200 bg-white text-gray-900 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-50",
|
|
77
|
-
title: getTitle(),
|
|
78
|
-
type: "button",
|
|
79
|
-
disabled,
|
|
80
|
-
children: getIcon()
|
|
81
|
-
});
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
//#endregion
|
|
85
|
-
export { ThemeToggle };
|