@beyondcorp/beyond-ui 1.1.37 → 1.1.39
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.
|
@@ -3,6 +3,7 @@ import * as React from 'react';
|
|
|
3
3
|
import { cva } from 'class-variance-authority';
|
|
4
4
|
import { cn } from '../../utils/cn.js';
|
|
5
5
|
import { useDarkMode } from '../../hooks/useDarkMode.js';
|
|
6
|
+
import { Moon, Sun } from 'lucide-react';
|
|
6
7
|
|
|
7
8
|
const switchVariants = cva("inline-flex items-center justify-center rounded-full transition focus:outline-none focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400", {
|
|
8
9
|
variants: {
|
|
@@ -29,13 +30,7 @@ const switchVariants = cva("inline-flex items-center justify-center rounded-full
|
|
|
29
30
|
});
|
|
30
31
|
const NightModeSwitch = React.forwardRef(({ className, variant, size, iconStyle, ariaLabel = "Toggle dark mode", ...props }, ref) => {
|
|
31
32
|
const { isDarkMode, toggle } = useDarkMode();
|
|
32
|
-
return (jsxs("button", { type: "button", ref: ref, "aria-label": ariaLabel, "aria-pressed": isDarkMode, className: cn(switchVariants({ variant, size, iconStyle, className })), onClick: toggle, ...props, children: [jsx("span", { className: "sr-only", children: ariaLabel }), isDarkMode ? (
|
|
33
|
-
// Moon icon (filled)
|
|
34
|
-
iconStyle === "outline" ? (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 12.79A9 9 0 1111.21 3a7 7 0 109.79 9.79z" }) })) : (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: jsx("path", { d: "M21 12.79A9 9 0 1111.21 3a7 7 0 109.79 9.79z" }) }))) : iconStyle === "outline" ? (
|
|
35
|
-
// Sun icon (outline)
|
|
36
|
-
jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: [jsx("circle", { cx: "12", cy: "12", r: "5" }), jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" })] })) : (
|
|
37
|
-
// Sun icon (filled)
|
|
38
|
-
jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: [jsx("circle", { cx: "12", cy: "12", r: "5" }), jsxs("g", { children: [jsx("rect", { x: "11", y: "1", width: "2", height: "3", rx: "1" }), jsx("rect", { x: "11", y: "20", width: "2", height: "3", rx: "1" }), jsx("rect", { x: "4.22", y: "4.22", width: "2", height: "3", rx: "1", transform: "rotate(-45 5.22 5.22)" }), jsx("rect", { x: "17.78", y: "17.78", width: "2", height: "3", rx: "1", transform: "rotate(-45 18.78 18.78)" }), jsx("rect", { x: "1", y: "11", width: "3", height: "2", rx: "1" }), jsx("rect", { x: "20", y: "11", width: "3", height: "2", rx: "1" }), jsx("rect", { x: "4.22", y: "16.78", width: "2", height: "3", rx: "1", transform: "rotate(45 5.22 18.28)" }), jsx("rect", { x: "17.78", y: "6.22", width: "2", height: "3", rx: "1", transform: "rotate(45 18.78 7.72)" })] })] }))] }));
|
|
33
|
+
return (jsxs("button", { type: "button", ref: ref, "aria-label": ariaLabel, "aria-pressed": isDarkMode, className: cn(switchVariants({ variant, size, iconStyle, className })), onClick: toggle, ...props, children: [jsx("span", { className: "sr-only", children: ariaLabel }), isDarkMode ? (jsx(Moon, { className: "w-5 h-5", strokeWidth: iconStyle === "outline" ? 2 : 1.5, fill: iconStyle === "filled" ? "currentColor" : "none", "aria-hidden": "true" })) : (jsx(Sun, { className: "w-5 h-5", strokeWidth: iconStyle === "outline" ? 2 : 1.5, fill: iconStyle === "filled" ? "currentColor" : "none", "aria-hidden": "true" }))] }));
|
|
39
34
|
});
|
|
40
35
|
NightModeSwitch.displayName = "NightModeSwitch";
|
|
41
36
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NightModeSwitch.js","sources":["../../../src/components/NightModeSwitch/NightModeSwitch.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { useDarkMode } from \"../../hooks/useDarkMode\";\r\n\r\nconst switchVariants = cva(\r\n \"inline-flex items-center justify-center rounded-full transition focus:outline-none focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400\",\r\n {\r\n variants: {\r\n variant: {\r\n primary: \"bg-primary-600 text-white hover:bg-primary-700 dark:bg-primary-400 dark:text-gray-900 dark:hover:bg-primary-500\",\r\n secondary: \"bg-secondary-600 text-white hover:bg-secondary-700 dark:bg-secondary-400 dark:text-gray-900 dark:hover:bg-secondary-500\",\r\n ghost: \"bg-transparent hover:bg-primary-100 dark:hover:bg-primary-900 text-primary-600 dark:text-primary-300\",\r\n },\r\n size: {\r\n sm: \"w-8 h-8 text-base\",\r\n md: \"w-10 h-10 text-lg\",\r\n lg: \"w-12 h-12 text-xl\",\r\n },\r\n iconStyle: {\r\n filled: \"\",\r\n outline: \"\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"ghost\",\r\n size: \"md\",\r\n iconStyle: \"filled\",\r\n },\r\n }\r\n);\r\n\r\nexport interface NightModeSwitchProps\r\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n VariantProps<typeof switchVariants> {\r\n ariaLabel?: string;\r\n}\r\n\r\nexport const NightModeSwitch = React.forwardRef<HTMLButtonElement, NightModeSwitchProps>(\r\n (\r\n {\r\n className,\r\n variant,\r\n size,\r\n iconStyle,\r\n ariaLabel = \"Toggle dark mode\",\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n const { isDarkMode, toggle } = useDarkMode();\r\n\r\n return (\r\n <button\r\n type=\"button\"\r\n ref={ref}\r\n aria-label={ariaLabel}\r\n aria-pressed={isDarkMode}\r\n className={cn(switchVariants({ variant, size, iconStyle, className }))}\r\n onClick={toggle}\r\n {...props}\r\n >\r\n <span className=\"sr-only\">{ariaLabel}</span>\r\n {isDarkMode ? (\r\n
|
|
1
|
+
{"version":3,"file":"NightModeSwitch.js","sources":["../../../src/components/NightModeSwitch/NightModeSwitch.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { useDarkMode } from \"../../hooks/useDarkMode\";\r\nimport { Sun, Moon } from \"lucide-react\";\r\n\r\nconst switchVariants = cva(\r\n \"inline-flex items-center justify-center rounded-full transition focus:outline-none focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400\",\r\n {\r\n variants: {\r\n variant: {\r\n primary: \"bg-primary-600 text-white hover:bg-primary-700 dark:bg-primary-400 dark:text-gray-900 dark:hover:bg-primary-500\",\r\n secondary: \"bg-secondary-600 text-white hover:bg-secondary-700 dark:bg-secondary-400 dark:text-gray-900 dark:hover:bg-secondary-500\",\r\n ghost: \"bg-transparent hover:bg-primary-100 dark:hover:bg-primary-900 text-primary-600 dark:text-primary-300\",\r\n },\r\n size: {\r\n sm: \"w-8 h-8 text-base\",\r\n md: \"w-10 h-10 text-lg\",\r\n lg: \"w-12 h-12 text-xl\",\r\n },\r\n iconStyle: {\r\n filled: \"\",\r\n outline: \"\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"ghost\",\r\n size: \"md\",\r\n iconStyle: \"filled\",\r\n },\r\n }\r\n);\r\n\r\nexport interface NightModeSwitchProps\r\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n VariantProps<typeof switchVariants> {\r\n ariaLabel?: string;\r\n}\r\n\r\nexport const NightModeSwitch = React.forwardRef<HTMLButtonElement, NightModeSwitchProps>(\r\n (\r\n {\r\n className,\r\n variant,\r\n size,\r\n iconStyle,\r\n ariaLabel = \"Toggle dark mode\",\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n const { isDarkMode, toggle } = useDarkMode();\r\n\r\n return (\r\n <button\r\n type=\"button\"\r\n ref={ref}\r\n aria-label={ariaLabel}\r\n aria-pressed={isDarkMode}\r\n className={cn(switchVariants({ variant, size, iconStyle, className }))}\r\n onClick={toggle}\r\n {...props}\r\n >\r\n <span className=\"sr-only\">{ariaLabel}</span>\r\n {isDarkMode ? (\r\n <Moon\r\n className=\"w-5 h-5\"\r\n strokeWidth={iconStyle === \"outline\" ? 2 : 1.5}\r\n fill={iconStyle === \"filled\" ? \"currentColor\" : \"none\"}\r\n aria-hidden=\"true\"\r\n />\r\n ) : (\r\n <Sun\r\n className=\"w-5 h-5\"\r\n strokeWidth={iconStyle === \"outline\" ? 2 : 1.5}\r\n fill={iconStyle === \"filled\" ? \"currentColor\" : \"none\"}\r\n aria-hidden=\"true\"\r\n />\r\n )}\r\n </button>\r\n );\r\n }\r\n);\r\n\r\nNightModeSwitch.displayName = \"NightModeSwitch\";"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAMA,MAAM,cAAc,GAAG,GAAG,CACxB,oJAAoJ,EACpJ;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE,iHAAiH;AAC1H,YAAA,SAAS,EAAE,yHAAyH;AACpI,YAAA,KAAK,EAAE,sGAAsG;AAC9G,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,mBAAmB;AACvB,YAAA,EAAE,EAAE,mBAAmB;AACvB,YAAA,EAAE,EAAE,mBAAmB;AACxB,SAAA;AACD,QAAA,SAAS,EAAE;AACT,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,OAAO,EAAE,EAAE;AACZ,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,SAAS,EAAE,QAAQ;AACpB,KAAA;AACF,CAAA,CACF;AAQM,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAC7C,CACE,EACE,SAAS,EACT,OAAO,EACP,IAAI,EACJ,SAAS,EACT,SAAS,GAAG,kBAAkB,EAC9B,GAAG,KAAK,EACT,EACD,GAAG,KACD;IACF,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,WAAW,EAAE;AAE5C,IAAA,QACEA,IAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,GAAG,EAAA,YAAA,EACI,SAAS,EAAA,cAAA,EACP,UAAU,EACxB,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,CAAC,EACtE,OAAO,EAAE,MAAM,EAAA,GACX,KAAK,EAAA,QAAA,EAAA,CAETC,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,SAAS,EAAA,QAAA,EAAE,SAAS,EAAA,CAAQ,EAC3C,UAAU,IACTA,GAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,SAAS,EACnB,WAAW,EAAE,SAAS,KAAK,SAAS,GAAG,CAAC,GAAG,GAAG,EAC9C,IAAI,EAAE,SAAS,KAAK,QAAQ,GAAG,cAAc,GAAG,MAAM,EAAA,aAAA,EAC1C,MAAM,EAAA,CAClB,KAEFA,GAAA,CAAC,GAAG,EAAA,EACF,SAAS,EAAC,SAAS,EACnB,WAAW,EAAE,SAAS,KAAK,SAAS,GAAG,CAAC,GAAG,GAAG,EAC9C,IAAI,EAAE,SAAS,KAAK,QAAQ,GAAG,cAAc,GAAG,MAAM,EAAA,aAAA,EAC1C,MAAM,EAAA,CAClB,CACH,CAAA,EAAA,CACM;AAEb,CAAC;AAGH,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}
|