diff --git a/lib/CHANGELOG.md b/lib/CHANGELOG.md index e4ae923f4..e0b5734d0 100644 --- a/lib/CHANGELOG.md +++ b/lib/CHANGELOG.md @@ -1,5 +1,11 @@ # nextjs-darkmode +## 1.0.7 + +### Patch Changes + +- 0357fca: Upgrade r18gs + ## 1.0.5 ### Patch Changes diff --git a/lib/package.json b/lib/package.json index 307b9788a..929f8b1a2 100644 --- a/lib/package.json +++ b/lib/package.json @@ -2,7 +2,7 @@ "name": "nextjs-darkmode", "author": "Mayank Kumar Chaudhari ", "private": false, - "version": "1.0.6", + "version": "1.0.7", "description": "Unleash the Power of React Server Components! Use dark/light mode on your site with confidence, without losing any advantages of React Server Components", "license": "MPL-2.0", "main": "./dist/index.js", @@ -74,7 +74,7 @@ "vitest": "^2.1.8" }, "dependencies": { - "r18gs": "^2.0.0" + "r18gs": "^2.0.1" }, "peerDependencies": { "@types/react": "16.8 - 19", diff --git a/lib/src/client/switch/switch.test.tsx b/lib/src/client/switch/switch.test.tsx index 1c3896ebe..c7e1993dd 100644 --- a/lib/src/client/switch/switch.test.tsx +++ b/lib/src/client/switch/switch.test.tsx @@ -24,7 +24,7 @@ describe("switch", () => { test("color-scheme-toggle with skip system", async ({ expect }) => { const hook = renderHook(() => useMode()); act(() => { - hook.result.current.setMode(SYSTEM); + hook.result.current.setMode(LIGHT); }); render(Switch with children); const element = screen.getByTestId("switch"); diff --git a/lib/src/client/switch/switch.tsx b/lib/src/client/switch/switch.tsx index 493c8335c..b5264892c 100644 --- a/lib/src/client/switch/switch.tsx +++ b/lib/src/client/switch/switch.tsx @@ -27,45 +27,31 @@ export const Switch = ({ size = 24, skipSystem, children, - ...props + ...tagProps }: SwitchProps) => { - const [state, setState] = useStore(); + const [{ m, s }, setState] = useStore(); + const n = modes.length - (skipSystem ? 1 : 0); /** toggle mode */ - const handleModeSwitch = () => { - let index = modes.indexOf(state.m); - const n = modes.length; - if (skipSystem && index === n - 1) index = 0; + tagProps.onClick = () => setState({ - ...state, - m: modes[(index + 1) % n], + s, + m: modes[(modes.indexOf(m) + 1) % n], }); - }; - if (children) { - return ( - // @ts-expect-error -- too complex types - - {/* @ts-expect-error -> we are setting the CSS variable */} -
- {children} - - ); + + const className = styles.switch; + const style = { "--size": `${size}px` }; + + if (!children) { + tagProps.className += " " + className; + tagProps.style = { ...tagProps.style, ...style }; } + return ( - we are setting the CSS variable - style={{ "--size": `${size}px` }} - data-testid="switch" - // skipcq: JS-0417 -> tradeoff between size and best practices - onClick={handleModeSwitch} - /> + // @ts-expect-error -- too complex types + + {/* @ts-expect-error -> we are setting the CSS variable */} + {children &&
} + {children} + ); }; diff --git a/lib/src/constants.ts b/lib/src/constants.ts index 51104fe96..0591ac17d 100644 --- a/lib/src/constants.ts +++ b/lib/src/constants.ts @@ -4,4 +4,4 @@ export const SYSTEM: ColorSchemePreference = "system"; export const DARK: ResolvedScheme = "dark"; export const LIGHT: ResolvedScheme = ""; -export const modes: ColorSchemePreference[] = [SYSTEM, DARK, LIGHT]; +export const modes: ColorSchemePreference[] = [DARK, LIGHT, SYSTEM]; diff --git a/lib/src/utils.ts b/lib/src/utils.ts index 2ec76fb70..48571f40f 100644 --- a/lib/src/utils.ts +++ b/lib/src/utils.ts @@ -12,9 +12,9 @@ export interface Store { export const useStore = () => useRGS("ndm", () => { if (typeof document === "undefined") return { m: SYSTEM, s: DARK }; - const el = document.documentElement; + const [m, s] = ["m", "sm"].map(dt => document.documentElement.getAttribute("data-" + dt)); return { - m: (el.getAttribute("data-m") ?? SYSTEM) as ColorSchemePreference, - s: el.getAttribute("data-sm") as ResolvedScheme, + m: (m ?? SYSTEM) as ColorSchemePreference, + s: s as ResolvedScheme, }; }); diff --git a/packages/shared/CHANGELOG.md b/packages/shared/CHANGELOG.md index 5d98ed42a..06a98cedc 100644 --- a/packages/shared/CHANGELOG.md +++ b/packages/shared/CHANGELOG.md @@ -1,5 +1,13 @@ # @repo/shared +## 0.0.14 + +### Patch Changes + +- 0357fca: Upgrade r18gs +- Updated dependencies [0357fca] + - nextjs-darkmode@1.0.7 + ## 0.0.13 ### Patch Changes diff --git a/packages/shared/package.json b/packages/shared/package.json index b860388af..9fd8aabb6 100644 --- a/packages/shared/package.json +++ b/packages/shared/package.json @@ -1,6 +1,6 @@ { "name": "@repo/shared", - "version": "0.0.13", + "version": "0.0.14", "private": true, "sideEffects": false, "main": "./dist/index.js", @@ -42,7 +42,7 @@ "@repo/scripts": "workspace:*", "nextjs-darkmode": "workspace:*", "nextjs-themes": "^4.0.3", - "r18gs": "^2.0.0", + "r18gs": "^2.0.1", "react-live": "^4.1.8", "react18-loaders": "^1.1.3" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 78d4f53d1..0333cf769 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -245,8 +245,8 @@ importers: lib: dependencies: r18gs: - specifier: ^2.0.0 - version: 2.0.0(@types/react@19.0.1)(next@14.2.15(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.83.0))(react@19.0.0) + specifier: ^2.0.1 + version: 2.0.1(@types/react@19.0.1)(next@14.2.15(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.83.0))(react@19.0.0) devDependencies: '@repo/eslint-config': specifier: workspace:* @@ -381,8 +381,8 @@ importers: specifier: ^4.0.3 version: 4.0.3(@types/react@19.0.1)(next@14.2.15(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.83.0))(react@19.0.0) r18gs: - specifier: ^2.0.0 - version: 2.0.0(@types/react@19.0.1)(next@14.2.15(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.83.0))(react@19.0.0) + specifier: ^2.0.1 + version: 2.0.1(@types/react@19.0.1)(next@14.2.15(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.83.0))(react@19.0.0) react-live: specifier: ^4.1.8 version: 4.1.8(react-dom@19.0.0(react@19.0.0))(react@19.0.0) @@ -4791,8 +4791,8 @@ packages: next: optional: true - r18gs@2.0.0: - resolution: {integrity: sha512-4flWKd++Fq8BwOQUOMIyxEowrU79P4nq45/GsAXwrAg6Rog1MEgBDuDHvkMxL3KVGxktsZ00Z/3IO8OR/GHsnQ==} + r18gs@2.0.0-alpha.0: + resolution: {integrity: sha512-AwmgZBdctfgITHVcyYLi02zLW40vcBw32eQjHRd7RRBuFDiloDuJTgnF2rzcsj/OPRP8iCosqszQ3FcBjvzQTg==} peerDependencies: '@types/react': 16.8 - 19 next: '*' @@ -4801,8 +4801,8 @@ packages: next: optional: true - r18gs@2.0.0-alpha.0: - resolution: {integrity: sha512-AwmgZBdctfgITHVcyYLi02zLW40vcBw32eQjHRd7RRBuFDiloDuJTgnF2rzcsj/OPRP8iCosqszQ3FcBjvzQTg==} + r18gs@2.0.1: + resolution: {integrity: sha512-0J7r+jr5DCoSD2Aero5mx30BT/7z1QDEVBANlwwnuew0NiecKQOjWyPwF0R7ZbQU6qb5hcWPPSPmHykpAnN2xA==} peerDependencies: '@types/react': 16.8 - 19 next: '*' @@ -11172,26 +11172,26 @@ snapshots: optionalDependencies: next: 15.1.0(@babel/core@7.26.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.83.0) - r18gs@2.0.0(@types/react@19.0.1)(next@14.2.15(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.83.0))(react@19.0.0): + r18gs@2.0.0-alpha.0(@types/react@19.0.1)(next@14.2.15(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.83.0))(react@19.0.0): dependencies: '@types/react': 19.0.1 react: 19.0.0 optionalDependencies: next: 14.2.15(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.83.0) - r18gs@2.0.0-alpha.0(@types/react@19.0.1)(next@14.2.15(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.83.0))(react@19.0.0): + r18gs@2.0.0-alpha.0(@types/react@19.0.1)(next@15.1.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.83.0))(react@19.0.0): dependencies: '@types/react': 19.0.1 react: 19.0.0 optionalDependencies: - next: 14.2.15(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.83.0) + next: 15.1.0(@babel/core@7.26.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.83.0) - r18gs@2.0.0-alpha.0(@types/react@19.0.1)(next@15.1.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.83.0))(react@19.0.0): + r18gs@2.0.1(@types/react@19.0.1)(next@14.2.15(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.83.0))(react@19.0.0): dependencies: '@types/react': 19.0.1 react: 19.0.0 optionalDependencies: - next: 15.1.0(@babel/core@7.26.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.83.0) + next: 14.2.15(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.83.0) react-dom@19.0.0(react@19.0.0): dependencies: