+>(({ className, ...props }, ref) => {
return (
->(({ className, type, ...props }, ref) => {
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => {
return (
->(({ className, type, ...props }, ref) => {
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => {
return (
->(({ className, type, ...props }, ref) => {
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => {
return (
& { priority?: boolean }>
+type LinkComponent = ComponentType
>
- const RegularLink = (props: ComponentProps<'a'>) => , imageComponent: typeof NextImage | typeof RegularImage, linkComponent: typeof NextLink | typeof RegularLink }) => {
+export const TripleCard = (props: { cards: TripleCardItem[]; imageComponent: ImageComponent; linkComponent: LinkComponent }) => {
return (
diff --git a/documentation-ui/src/custom/docs/index.ts b/documentation-ui/src/custom/docs/index.ts
index 24678f9..9adad2c 100644
--- a/documentation-ui/src/custom/docs/index.ts
+++ b/documentation-ui/src/custom/docs/index.ts
@@ -4,3 +4,4 @@ export { TripleCard as DocsTripleCard } from './components/triplecard'
export { HelpCard as DocsHelpCard } from './components/helpcard'
export * from './components/header'
export * from './components/page'
+export * from './components/gdpr'
diff --git a/documentation-ui/src/custom/docs/scripts/nav/index.tsx b/documentation-ui/src/custom/docs/scripts/nav/index.tsx
index a9e2c68..4d55140 100644
--- a/documentation-ui/src/custom/docs/scripts/nav/index.tsx
+++ b/documentation-ui/src/custom/docs/scripts/nav/index.tsx
@@ -1,6 +1,5 @@
import {createRoot} from "react-dom/client"
-import { ComponentProps } from "react";
import { NavBar } from "../../components/navmenu";
(() => {
diff --git a/documentation-ui/src/custom/theme-selector.tsx b/documentation-ui/src/custom/theme-selector.tsx
index 7434bf2..b5afd2c 100644
--- a/documentation-ui/src/custom/theme-selector.tsx
+++ b/documentation-ui/src/custom/theme-selector.tsx
@@ -1,39 +1,29 @@
'use client'
-import { ComputerIcon, MoonIcon, SunIcon } from "lucide-react";
-import React from "react";
-import { Button } from "@quantinuum/quantinuum-ui";
-import { getTheme, subscribeToTheme, setTheme } from "src/utils/darkMode";
+import { ComputerIcon, MoonIcon, SunIcon } from 'lucide-react'
+import React from 'react'
+import { Button } from '@quantinuum/quantinuum-ui'
+import { type useTheme } from './use-theme'
-export const useTheme = () => {
- const [theme, _setLocalTheme] = React.useState(typeof window !== "undefined" ? getTheme() : {mode: 'dark' as const, isDark: true});
-
- React.useEffect(() => {
- subscribeToTheme((theme) => _setLocalTheme(theme))
- }, [])
- return { theme, setMode: (_mode: typeof theme['mode']) => setTheme(_mode) }
-}
-
-export const ThemeSelector = React.forwardRef>(({theme, setMode}, ref) => {
+export const ThemeSelector = React.forwardRef>(({ theme, setMode }, ref) => {
const stateMap = {
- "light": {
+ light: {
icon:
+ } satisfies Record
return (
{
- if (theme.mode === "dark") setMode('light')
- if (theme.mode === "light") setMode("system")
- if (theme.mode === "system") setMode("dark")
+ if (theme.mode === 'dark') setMode('light')
+ if (theme.mode === 'light') setMode('system')
+ if (theme.mode === 'system') setMode('dark')
}} ref={ref}>
{stateMap[theme.mode].icon}
)
-
})
diff --git a/documentation-ui/src/custom/use-theme.ts b/documentation-ui/src/custom/use-theme.ts
new file mode 100644
index 0000000..4a1d146
--- /dev/null
+++ b/documentation-ui/src/custom/use-theme.ts
@@ -0,0 +1,19 @@
+'use client'
+
+import React from 'react'
+import { getTheme, setTheme, subscribeToTheme } from 'src/utils/darkMode'
+
+export const useTheme = () => {
+ const [theme, setLocalTheme] = React.useState(
+ typeof window !== 'undefined' ? getTheme() : { mode: 'dark' as const, isDark: true }
+ )
+
+ React.useEffect(() => {
+ return subscribeToTheme((nextTheme) => setLocalTheme(nextTheme))
+ }, [])
+
+ return {
+ theme,
+ setMode: (mode: typeof theme.mode) => setTheme(mode),
+ }
+}
diff --git a/documentation-ui/src/index.ts b/documentation-ui/src/index.ts
index 94944a0..ec1d4d4 100644
--- a/documentation-ui/src/index.ts
+++ b/documentation-ui/src/index.ts
@@ -1,5 +1,6 @@
export * from "./custom/slide-in";
export * from "./custom/theme-selector";
+export * from "./custom/use-theme";
export * from "./tailwindTheme";
export * from "./utils";
export * from './custom/docs'
diff --git a/documentation-ui/src/utils/darkMode.ts b/documentation-ui/src/utils/darkMode.ts
index 5942ab6..90b0134 100644
--- a/documentation-ui/src/utils/darkMode.ts
+++ b/documentation-ui/src/utils/darkMode.ts
@@ -1,5 +1,4 @@
-const modes = ["system", "dark", "light"] as const;
-type Mode = (typeof modes)[number];
+type Mode = "system" | "dark" | "light";
const isMode = (mode: string): mode is Mode => {
return ["system", "dark", "light"].includes(mode);
};
diff --git a/documentation-ui/stories/custom/theme-selector.stories.tsx b/documentation-ui/stories/custom/theme-selector.stories.tsx
index 43e711c..5f931f8 100644
--- a/documentation-ui/stories/custom/theme-selector.stories.tsx
+++ b/documentation-ui/stories/custom/theme-selector.stories.tsx
@@ -1,5 +1,6 @@
import { Meta, StoryObj } from "@storybook/react";
-import { ThemeSelector, useTheme } from "src/custom/theme-selector";
+import { ThemeSelector } from "src/custom/theme-selector";
+import { useTheme } from "src/custom/use-theme";
export function ThemeSelectorDemo() {
const { theme, setMode } = useTheme();
return