@lifesg/react-design-system 3.5.0-canary.7 → 4.0.0-alpha.10

package/theme/theme-provider/breakpoint.d.ts

@@ -0,0 +1 @@
+export declare function setupBreakpointListener(sourceElement: HTMLElement): (() => void) | undefined;

package/theme/theme-provider/breakpoint.js

@@ -0,0 +1,2 @@
+import{Breakpoint as i}from"../tokens/breakpoint.js";import{parsePxOrRemValue as m,parseCSSVariableValue as n}from"../utils/css-variable.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"react";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import"./context.js";import"../utils/use-media-query.js";const e="fds-breakpoint-";function t(t){const s=document.body,a=window.innerWidth;[...s.classList].forEach((i=>{i.startsWith(e)&&s.classList.remove(i)}));const o=function(m){const e=i=>{const e=n(i,m);return e||(m!==document.documentElement?n(i,document.documentElement):e)};return[{key:"xxs",min:e(i["xxs-min"]),max:e(i["xxs-max"])},{key:"xs",min:e(i["xs-min"]),max:e(i["xs-max"])},{key:"sm",min:e(i["sm-min"]),max:e(i["sm-max"])},{key:"md",min:e(i["md-min"]),max:e(i["md-max"])},{key:"lg",min:e(i["lg-min"]),max:e(i["lg-max"])},{key:"xl",min:e(i["xl-min"]),max:e(i["xl-max"])},{key:"xxl",min:e(i["xxl-min"]),max:1/0}]}(t);o.forEach((i=>{const n=m(i.min),t=i.max===1/0?1/0:m(i.max),o=a>=n,r=t!==1/0&&a<=t;o&&(t===1/0||r)&&s.classList.add(`${e}${i.key}`),o&&s.classList.add(`${e}${i.key}-min`),r&&s.classList.add(`${e}${i.key}-max`)}))}function s(i){if(!globalThis.window)return;const m=()=>{t(i)};return m(),globalThis.window.addEventListener("resize",m),()=>{globalThis.window.removeEventListener("resize",m)}}export{s as setupBreakpointListener};
+//# sourceMappingURL=breakpoint.js.map

package/theme/theme-provider/breakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoint.js","sources":["../../../src/theme/theme-provider/breakpoint.ts"],"sourcesContent":["import { Breakpoint } from \"../tokens/breakpoint\";\nimport type { CSSVariableString } from \"../types\";\nimport { parseCSSVariableValue, parsePxOrRemValue } from \"../utils\";\n\nfunction getBreakpointRanges(sourceElement: HTMLElement) {\n    const getBreakpointValue = (token: CSSVariableString) => {\n        const scopedValue = parseCSSVariableValue(token, sourceElement);\n        if (scopedValue) return scopedValue;\n\n        if (sourceElement !== document.documentElement) {\n            return parseCSSVariableValue(token, document.documentElement);\n        }\n\n        return scopedValue;\n    };\n\n    return [\n        {\n            key: \"xxs\",\n            min: getBreakpointValue(Breakpoint[\"xxs-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xxs-max\"]),\n        },\n        {\n            key: \"xs\",\n            min: getBreakpointValue(Breakpoint[\"xs-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xs-max\"]),\n        },\n        {\n            key: \"sm\",\n            min: getBreakpointValue(Breakpoint[\"sm-min\"]),\n            max: getBreakpointValue(Breakpoint[\"sm-max\"]),\n        },\n        {\n            key: \"md\",\n            min: getBreakpointValue(Breakpoint[\"md-min\"]),\n            max: getBreakpointValue(Breakpoint[\"md-max\"]),\n        },\n        {\n            key: \"lg\",\n            min: getBreakpointValue(Breakpoint[\"lg-min\"]),\n            max: getBreakpointValue(Breakpoint[\"lg-max\"]),\n        },\n        {\n            key: \"xl\",\n            min: getBreakpointValue(Breakpoint[\"xl-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xl-max\"]),\n        },\n        {\n            key: \"xxl\",\n            min: getBreakpointValue(Breakpoint[\"xxl-min\"]),\n            max: Infinity,\n        },\n    ] as const;\n}\n\nconst BREAKPOINT_CLASS_PREFIX = \"fds-breakpoint-\";\n\nfunction applyBreakpointClasses(sourceElement: HTMLElement) {\n    const body = document.body;\n    const width = window.innerWidth;\n\n    [...body.classList].forEach((cls) => {\n        if (cls.startsWith(BREAKPOINT_CLASS_PREFIX)) {\n            body.classList.remove(cls);\n        }\n    });\n\n    const BREAKPOINT_RANGES = getBreakpointRanges(sourceElement);\n\n    BREAKPOINT_RANGES.forEach((range) => {\n        const minValue = parsePxOrRemValue(range.min);\n        const maxValue =\n            range.max === Infinity\n                ? Infinity\n                : parsePxOrRemValue(range.max as string);\n\n        const isMinMatched = width >= minValue;\n        const isMaxMatched = maxValue === Infinity ? false : width <= maxValue;\n        const isWithinRange =\n            isMinMatched && (maxValue === Infinity || isMaxMatched);\n\n        if (isWithinRange) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}`);\n        }\n\n        if (isMinMatched) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}-min`);\n        }\n\n        if (isMaxMatched) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}-max`);\n        }\n    });\n}\n\nexport function setupBreakpointListener(sourceElement: HTMLElement) {\n    if (!globalThis.window) return;\n\n    const handleBreakpointChange = () => {\n        applyBreakpointClasses(sourceElement);\n    };\n\n    handleBreakpointChange();\n    globalThis.window.addEventListener(\"resize\", handleBreakpointChange);\n\n    return () => {\n        globalThis.window.removeEventListener(\"resize\", handleBreakpointChange);\n    };\n}\n"],"names":["BREAKPOINT_CLASS_PREFIX","applyBreakpointClasses","sourceElement","body","document","width","window","innerWidth","classList","forEach","cls","startsWith","remove","BREAKPOINT_RANGES","getBreakpointValue","token","scopedValue","parseCSSVariableValue","documentElement","key","min","Breakpoint","max","Infinity","getBreakpointRanges","range","minValue","parsePxOrRemValue","maxValue","isMinMatched","isMaxMatched","add","setupBreakpointListener","globalThis","handleBreakpointChange","addEventListener","removeEventListener"],"mappings":"qZAuDA,MAAMA,EAA0B,kBAEhC,SAASC,EAAuBC,GAC5B,MAAMC,EAAOC,SAASD,KAChBE,EAAQC,OAAOC,WAErB,IAAIJ,EAAKK,WAAWC,SAASC,IACrBA,EAAIC,WAAWX,IACfG,EAAKK,UAAUI,OAAOF,EAC1B,IAGJ,MAAMG,EA/DV,SAA6BX,GACzB,MAAMY,EAAsBC,IACxB,MAAMC,EAAcC,EAAsBF,EAAOb,GACjD,OAAIc,IAEAd,IAAkBE,SAASc,gBACpBD,EAAsBF,EAAOX,SAASc,iBAG1CF,EAAW,EAGtB,MAAO,CACH,CACIG,IAAK,MACLC,IAAKN,EAAmBO,EAAW,YACnCC,IAAKR,EAAmBO,EAAW,aAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,MACLC,IAAKN,EAAmBO,EAAW,YACnCC,IAAKC,KAGjB,CAc8BC,CAAoBtB,GAE9CW,EAAkBJ,SAASgB,IACvB,MAAMC,EAAWC,EAAkBF,EAAML,KACnCQ,EACFH,EAAMH,MAAQC,IACRA,IACAI,EAAkBF,EAAMH,KAE5BO,EAAexB,GAASqB,EACxBI,EAAeF,IAAaL,KAAmBlB,GAASuB,EAE1DC,IAAiBD,IAAaL,KAAYO,IAG1C3B,EAAKK,UAAUuB,IAAI,GAAG/B,IAA0ByB,EAAMN,OAGtDU,GACA1B,EAAKK,UAAUuB,IAAI,GAAG/B,IAA0ByB,EAAMN,WAGtDW,GACA3B,EAAKK,UAAUuB,IAAI,GAAG/B,IAA0ByB,EAAMN,UAC1D,GAER,CAEM,SAAUa,EAAwB9B,GACpC,IAAK+B,WAAW3B,OAAQ,OAExB,MAAM4B,EAAyB,KAC3BjC,EAAuBC,EAAc,EAMzC,OAHAgC,IACAD,WAAW3B,OAAO6B,iBAAiB,SAAUD,GAEtC,KACHD,WAAW3B,OAAO8B,oBAAoB,SAAUF,EAAuB,CAE/E"}

package/theme/theme-provider/context.d.ts

@@ -0,0 +1,2 @@
+import type { ThemeContextValue } from "./types";
+export declare const ThemeContext: import("react").Context<ThemeContextValue | undefined>;

package/theme/theme-provider/context.js

@@ -0,0 +1,2 @@
+import{createContext as o}from"react";const r=o(void 0);export{r as ThemeContext};
+//# sourceMappingURL=context.js.map

package/theme/theme-provider/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../../src/theme/theme-provider/context.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nimport type { ThemeContextValue } from \"./types\";\n\nexport const ThemeContext = createContext<ThemeContextValue | undefined>(\n    undefined\n);\n"],"names":["ThemeContext","createContext","undefined"],"mappings":"4CAIaA,EAAeC,OACxBC"}

package/theme/theme-provider/hooks.d.ts

@@ -0,0 +1,30 @@
+import type { CSSProperties } from "react";
+import type { ThemeContextValue } from "./types";
+type InheritedThemeScope = {
+    themeProps: {
+        "data-fds-theme"?: string;
+        "data-fds-theme-mode"?: string;
+    };
+    themeStyle: CSSProperties;
+};
+/**
+ * Returns the theme context from the nearest `ThemeProvider`.
+ *
+ * @returns The active `ThemeContextValue`. When called outside a provider,
+ * returns defaults: `theme: "lifesg"`, `mode: "light"`, `themeElement: null`.
+ * @keywords context, hook, theme context
+ */
+export declare const useTheme: () => ThemeContextValue;
+/**
+ * Builds `data-fds-theme*` attributes and inline CSS variables for re-stamping
+ * the current theme onto a detached DOM element (e.g. a portal or floating
+ * overlay).
+ *
+ * @param enabled When `false`, returns empty objects — useful to conditionally
+ * skip the attribute injection.
+ * @returns `themeProps` (spread onto the root element) and `themeStyle` (inline
+ * CSS variables to apply).
+ * @keywords design tokens, hook, portal, theming
+ */
+export declare const useInheritedThemeScope: (enabled: boolean) => InheritedThemeScope;
+export {};

package/theme/theme-provider/hooks.js

@@ -0,0 +1,2 @@
+import{useContext as e,useMemo as t}from"react";import{getInheritedInlineCssVariables as l}from"../utils/css-variable.js";import{ThemeContext as m}from"./context.js";const o=()=>{const t=e(m);return t||{theme:"lifesg",mode:"light",themeElement:null}},n=o=>{const n=e(m);return t((()=>{var e;return o?{themeProps:{"data-fds-theme":null==n?void 0:n.theme,"data-fds-theme-mode":null==n?void 0:n.mode},themeStyle:l(null!==(e=null==n?void 0:n.themeElement)&&void 0!==e?e:null)}:{themeProps:{},themeStyle:{}}}),[o,null==n?void 0:n.mode,null==n?void 0:n.theme,null==n?void 0:n.themeElement])};export{n as useInheritedThemeScope,o as useTheme};
+//# sourceMappingURL=hooks.js.map

package/theme/theme-provider/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sources":["../../../src/theme/theme-provider/hooks.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { useContext, useMemo } from \"react\";\n\nimport { getInheritedInlineCssVariables } from \"../utils/css-variable\";\nimport { ThemeContext } from \"./context\";\nimport type { ThemeContextValue } from \"./types\";\n\ntype InheritedThemeScope = {\n    themeProps: {\n        \"data-fds-theme\"?: string;\n        \"data-fds-theme-mode\"?: string;\n    };\n    themeStyle: CSSProperties;\n};\n\n// @catalog\n/**\n * Returns the theme context from the nearest `ThemeProvider`.\n *\n * @returns The active `ThemeContextValue`. When called outside a provider,\n * returns defaults: `theme: \"lifesg\"`, `mode: \"light\"`, `themeElement: null`.\n * @keywords context, hook, theme context\n */\nexport const useTheme = (): ThemeContextValue => {\n    const context = useContext(ThemeContext);\n\n    if (!context) {\n        return {\n            theme: \"lifesg\",\n            mode: \"light\",\n            themeElement: null,\n        };\n    }\n\n    return context;\n};\n\n// @catalog\n/**\n * Builds `data-fds-theme*` attributes and inline CSS variables for re-stamping\n * the current theme onto a detached DOM element (e.g. a portal or floating\n * overlay).\n *\n * @param enabled When `false`, returns empty objects — useful to conditionally\n * skip the attribute injection.\n * @returns `themeProps` (spread onto the root element) and `themeStyle` (inline\n * CSS variables to apply).\n * @keywords design tokens, hook, portal, theming\n */\nexport const useInheritedThemeScope = (\n    enabled: boolean\n): InheritedThemeScope => {\n    const themeContext = useContext(ThemeContext);\n\n    return useMemo(() => {\n        if (!enabled) {\n            return {\n                themeProps: {},\n                themeStyle: {},\n            };\n        }\n\n        return {\n            themeProps: {\n                \"data-fds-theme\": themeContext?.theme,\n                \"data-fds-theme-mode\": themeContext?.mode,\n            },\n            themeStyle: getInheritedInlineCssVariables(\n                themeContext?.themeElement ?? null\n            ),\n        };\n    }, [\n        enabled,\n        themeContext?.mode,\n        themeContext?.theme,\n        themeContext?.themeElement,\n    ]);\n};\n"],"names":["useTheme","context","useContext","ThemeContext","theme","mode","themeElement","useInheritedThemeScope","enabled","themeContext","useMemo","themeProps","themeStyle","getInheritedInlineCssVariables","_a"],"mappings":"sKAuBO,MAAMA,EAAW,KACpB,MAAMC,EAAUC,EAAWC,GAE3B,OAAKF,GACM,CACHG,MAAO,SACPC,KAAM,QACNC,aAAc,KAIR,EAeLC,EACTC,IAEA,MAAMC,EAAeP,EAAWC,GAEhC,OAAOO,GAAQ,WACX,OAAKF,EAOE,CACHG,WAAY,CACR,iBAAkBF,aAAY,EAAZA,EAAcL,MAChC,sBAAuBK,aAAY,EAAZA,EAAcJ,MAEzCO,WAAYC,EACkB,QAA1BC,EAAAL,aAAY,EAAZA,EAAcH,oBAAY,IAAAQ,EAAAA,EAAI,OAZ3B,CACHH,WAAY,CAAA,EACZC,WAAY,CAAA,EAYnB,GACF,CACCJ,EACAC,aAAY,EAAZA,EAAcJ,KACdI,aAAY,EAAZA,EAAcL,MACdK,aAAY,EAAZA,EAAcH,cAChB"}

package/theme/theme-provider/index.d.ts

@@ -0,0 +1,10 @@
+import type { ThemeProviderProps } from "./types";
+/**
+ * Establishes a themed scope for its subtree.
+ *
+ * Wrap a section of the tree in `ThemeProvider` to activate a design-token set
+ * and colour mode. Components below it read tokens via CSS variables or the
+ * `useTheme` hook. Providers can be nested to override a subtree's theme.
+ * @keywords context, scope, theming
+ */
+export declare const ThemeProvider: (props: ThemeProviderProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/theme/theme-provider/index.js

@@ -0,0 +1,2 @@
+import{jsx as e}from"react/jsx-runtime";import{forwardRef as t,useState as r,useEffect as o,useMemo as m}from"react";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{mergeRefs as i}from"../../util/merge-refs.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{useIsomorphicLayoutEffect as s}from"../../util/use-isomorphic-layout-effect.js";import{setupBreakpointListener as l}from"./breakpoint.js";import{ThemeContext as n}from"./context.js";import{listenToSystemColourMode as a}from"./system-colour-mode.js";const c=t((({children:t,theme:c="lifesg",mode:u="auto",className:d,style:p},f)=>{const h="auto"!==u,[j,y]=r(h?u:"light"),[g,v]=r(null);s((()=>{const e=null!=g?g:document.documentElement;return l(e)}),[g,c,j]),o((()=>{if(!h)return a(y);y(u)}),[h,u]);const x=m((()=>({theme:c,mode:j,themeElement:g})),[c,j,g]);return e(n.Provider,{value:x,children:e("div",{ref:i(f,v),"data-fds-theme":c,"data-fds-theme-mode":j,className:d,style:p,children:t})})}));export{c as ThemeProvider};
+//# sourceMappingURL=index.js.map

package/theme/theme-provider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/theme/theme-provider/index.tsx"],"sourcesContent":["import type { Ref } from \"react\";\nimport { forwardRef, useEffect, useMemo, useState } from \"react\";\n\nimport { mergeRefs, useIsomorphicLayoutEffect } from \"../../util\";\nimport type { ResolvedThemeMode } from \"../types\";\nimport { setupBreakpointListener } from \"./breakpoint\";\nimport { ThemeContext } from \"./context\";\nimport { listenToSystemColourMode } from \"./system-colour-mode\";\nimport type { ThemeProviderProps } from \"./types\";\n\nconst InnerThemeProvider = (\n    {\n        children,\n        theme = \"lifesg\",\n        mode = \"auto\",\n        className,\n        style,\n    }: ThemeProviderProps,\n    ref: Ref<HTMLDivElement>\n) => {\n    const isModeControlled = mode !== \"auto\";\n\n    const [computedMode, setComputedMode] = useState<ResolvedThemeMode>(\n        isModeControlled ? mode : \"light\"\n    );\n    const [themeElement, setThemeElement] = useState<HTMLDivElement | null>(\n        null\n    );\n\n    // Re-subscribe when the source node or token set changes:\n    // - `themeElement`: scoped breakpoint tokens may live on this element\n    // - `theme` / `themeMode`: breakpoint token values can differ across theme/mode\n    useIsomorphicLayoutEffect(() => {\n        const sourceElement = themeElement ?? document.documentElement;\n        const cleanup = setupBreakpointListener(sourceElement);\n        return cleanup;\n    }, [themeElement, theme, computedMode]);\n\n    useEffect(() => {\n        if (isModeControlled) {\n            setComputedMode(mode);\n            return;\n        }\n\n        return listenToSystemColourMode(setComputedMode);\n    }, [isModeControlled, mode]);\n\n    const contextValue = useMemo(\n        () => ({\n            theme,\n            mode: computedMode,\n            themeElement,\n        }),\n        [theme, computedMode, themeElement]\n    );\n\n    return (\n        <ThemeContext.Provider value={contextValue}>\n            <div\n                ref={mergeRefs(ref, setThemeElement)}\n                data-fds-theme={theme}\n                data-fds-theme-mode={computedMode}\n                className={className}\n                style={style}\n            >\n                {children}\n            </div>\n        </ThemeContext.Provider>\n    );\n};\n\n// @catalog\n/**\n * Establishes a themed scope for its subtree.\n *\n * Wrap a section of the tree in `ThemeProvider` to activate a design-token set\n * and colour mode. Components below it read tokens via CSS variables or the\n * `useTheme` hook. Providers can be nested to override a subtree's theme.\n * @keywords context, scope, theming\n */\nexport const ThemeProvider = forwardRef<HTMLDivElement, ThemeProviderProps>(\n    InnerThemeProvider\n);\n"],"names":["ThemeProvider","forwardRef","children","theme","mode","className","style","ref","isModeControlled","computedMode","setComputedMode","useState","themeElement","setThemeElement","useIsomorphicLayoutEffect","sourceElement","document","documentElement","setupBreakpointListener","useEffect","listenToSystemColourMode","contextValue","useMemo","_jsx","ThemeContext","Provider","value","mergeRefs"],"mappings":"2mBAUA,MAsEaA,EAAgBC,GAtEF,EAEnBC,WACAC,QAAQ,SACRC,OAAO,OACPC,YACAC,SAEJC,KAEA,MAAMC,EAA4B,SAATJ,GAElBK,EAAcC,GAAmBC,EACpCH,EAAmBJ,EAAO,UAEvBQ,EAAcC,GAAmBF,EACpC,MAMJG,GAA0B,KACtB,MAAMC,EAAgBH,QAAAA,EAAgBI,SAASC,gBAE/C,OADgBC,EAAwBH,EAC1B,GACf,CAACH,EAAcT,EAAOM,IAEzBU,GAAU,KACN,IAAIX,EAKJ,OAAOY,EAAyBV,GAJ5BA,EAAgBN,EAI4B,GACjD,CAACI,EAAkBJ,IAEtB,MAAMiB,EAAeC,GACjB,KAAA,CACInB,QACAC,KAAMK,EACNG,kBAEJ,CAACT,EAAOM,EAAcG,IAG1B,OACIW,EAACC,EAAaC,UAASC,MAAOL,EAAYnB,SACtCqB,SACIhB,IAAKoB,EAAUpB,EAAKM,GAAgB,iBACpBV,EAAK,sBACAM,EACrBJ,UAAWA,EACXC,MAAOA,EAAKJ,SAEXA,KAEe"}

package/theme/theme-provider/system-colour-mode.d.ts

@@ -0,0 +1,3 @@
+import type { ResolvedThemeMode } from "../types";
+export declare function getSystemColourMode(): ResolvedThemeMode;
+export declare function listenToSystemColourMode(callback: (mode: ResolvedThemeMode) => void): (() => void) | undefined;

package/theme/theme-provider/system-colour-mode.js

@@ -0,0 +1,2 @@
+function e(e){if("undefined"==typeof window||!window.matchMedia)return;const n=window.matchMedia("(prefers-color-scheme: dark)");e(n.matches?"dark":"light");const t=n=>{e(n.matches?"dark":"light")};return n.addEventListener?(n.addEventListener("change",t),()=>n.removeEventListener("change",t)):(n.addListener(t),()=>n.removeListener(t))}export{e as listenToSystemColourMode};
+//# sourceMappingURL=system-colour-mode.js.map

package/theme/theme-provider/system-colour-mode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"system-colour-mode.js","sources":["../../../src/theme/theme-provider/system-colour-mode.ts"],"sourcesContent":["import type { ResolvedThemeMode } from \"../types\";\n\nexport function getSystemColourMode(): ResolvedThemeMode {\n    if (\n        typeof window !== \"undefined\" &&\n        window.matchMedia &&\n        window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n    ) {\n        return \"dark\";\n    }\n\n    return \"light\";\n}\n\nexport function listenToSystemColourMode(\n    callback: (mode: ResolvedThemeMode) => void\n) {\n    if (typeof window === \"undefined\" || !window.matchMedia) {\n        return;\n    }\n\n    const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n\n    // Set the initial value\n    callback(mediaQuery.matches ? \"dark\" : \"light\");\n\n    const handler = (e: MediaQueryListEvent) => {\n        callback(e.matches ? \"dark\" : \"light\");\n    };\n\n    if (mediaQuery.addEventListener) {\n        mediaQuery.addEventListener(\"change\", handler);\n        return () => mediaQuery.removeEventListener(\"change\", handler);\n    }\n\n    mediaQuery.addListener(handler);\n    return () => mediaQuery.removeListener(handler);\n}\n"],"names":["listenToSystemColourMode","callback","window","matchMedia","mediaQuery","matches","handler","e","addEventListener","removeEventListener","addListener","removeListener"],"mappings":"AAcM,SAAUA,EACZC,GAEA,GAAsB,oBAAXC,SAA2BA,OAAOC,WACzC,OAGJ,MAAMC,EAAaF,OAAOC,WAAW,gCAGrCF,EAASG,EAAWC,QAAU,OAAS,SAEvC,MAAMC,EAAWC,IACbN,EAASM,EAAEF,QAAU,OAAS,QAAQ,EAG1C,OAAID,EAAWI,kBACXJ,EAAWI,iBAAiB,SAAUF,GAC/B,IAAMF,EAAWK,oBAAoB,SAAUH,KAG1DF,EAAWM,YAAYJ,GAChB,IAAMF,EAAWO,eAAeL,GAC3C"}

package/theme/theme-provider/types.d.ts

@@ -0,0 +1,31 @@
+import type { CSSProperties } from "react";
+import type { ResolvedThemeMode, ThemeMode, ThemeType } from "../types";
+/** Value exposed by the `ThemeProvider` context. */
+export interface ThemeContextValue {
+    /** Active theme token set name. */
+    theme: ThemeType;
+    /** Resolved colour mode. */
+    mode: ResolvedThemeMode;
+    /**
+     * Element that hosts the current theme scope. Useful for scoped theming.
+     */
+    themeElement: HTMLElement | null;
+}
+/** Props for the `ThemeProvider` component. */
+export interface ThemeProviderProps {
+    children: React.ReactNode;
+    className?: string | undefined;
+    /**
+     * Colour mode applied to the themed subtree.
+     *
+     * @default "auto"
+     */
+    mode?: ThemeMode | undefined;
+    style?: CSSProperties | undefined;
+    /**
+     * Design token set to activate.
+     *
+     * @default "lifesg"
+     */
+    theme?: ThemeType | undefined;
+}

package/theme/tokens/border.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Border width tokens.
+ */
+export declare const BorderThickness: {
+    readonly "width-005": "var(--fds-border-width-005)";
+    readonly "width-010": "var(--fds-border-width-010)";
+    readonly "width-020": "var(--fds-border-width-020)";
+    readonly "width-040": "var(--fds-border-width-040)";
+};
+/**
+ * Border style tokens.
+ */
+export declare const BorderStyle: {
+    readonly solid: "var(--fds-border-style-solid)";
+};
+/**
+ * Border tokens consisting of border width and border style.
+ * @keywords design tokens, stroke, width
+ */
+export declare const Border: {
+    readonly solid: "var(--fds-border-style-solid)";
+    readonly "width-005": "var(--fds-border-width-005)";
+    readonly "width-010": "var(--fds-border-width-010)";
+    readonly "width-020": "var(--fds-border-width-020)";
+    readonly "width-040": "var(--fds-border-width-040)";
+};

package/theme/tokens/border.js

@@ -0,0 +1,2 @@
+const d={"width-005":"var(--fds-border-width-005)","width-010":"var(--fds-border-width-010)","width-020":"var(--fds-border-width-020)","width-040":"var(--fds-border-width-040)"},r={solid:"var(--fds-border-style-solid)"},s=Object.assign(Object.assign({},d),r);export{s as Border,r as BorderStyle,d as BorderThickness};
+//# sourceMappingURL=border.js.map

package/theme/tokens/border.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"border.js","sources":["../../../src/theme/tokens/border.ts"],"sourcesContent":["/**\n * Border width tokens.\n */\nexport const BorderThickness = {\n    \"width-005\": \"var(--fds-border-width-005)\",\n    \"width-010\": \"var(--fds-border-width-010)\",\n    \"width-020\": \"var(--fds-border-width-020)\",\n    \"width-040\": \"var(--fds-border-width-040)\",\n} as const;\n\n/**\n * Border style tokens.\n */\nexport const BorderStyle = {\n    solid: \"var(--fds-border-style-solid)\",\n} as const;\n\n// @catalog\n/**\n * Border tokens consisting of border width and border style.\n * @keywords design tokens, stroke, width\n */\nexport const Border = {\n    ...BorderThickness,\n    ...BorderStyle,\n} as const;\n"],"names":["BorderThickness","BorderStyle","solid","Border","Object"],"mappings":"AAGO,MAAMA,EAAkB,CAC3B,YAAa,8BACb,YAAa,8BACb,YAAa,8BACb,YAAa,+BAMJC,EAAc,CACvBC,MAAO,iCAQEC,EAASC,+BACfJ,GACAC"}

package/theme/tokens/breakpoint.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Responsive breakpoint tokens for each named breakpoint.
+ * @keywords design tokens, responsive, screen size
+ */
+export declare const Breakpoint: {
+    readonly "xxs-min": "var(--fds-breakpoint-xxs-min)";
+    readonly "xxs-max": "var(--fds-breakpoint-xxs-max)";
+    readonly "xs-min": "var(--fds-breakpoint-xs-min)";
+    readonly "xs-max": "var(--fds-breakpoint-xs-max)";
+    readonly "sm-min": "var(--fds-breakpoint-sm-min)";
+    readonly "sm-max": "var(--fds-breakpoint-sm-max)";
+    readonly "md-min": "var(--fds-breakpoint-md-min)";
+    readonly "md-max": "var(--fds-breakpoint-md-max)";
+    readonly "lg-min": "var(--fds-breakpoint-lg-min)";
+    readonly "lg-max": "var(--fds-breakpoint-lg-max)";
+    readonly "xl-min": "var(--fds-breakpoint-xl-min)";
+    readonly "xl-max": "var(--fds-breakpoint-xl-max)";
+    readonly "xxl-min": "var(--fds-breakpoint-xxl-min)";
+    readonly "xxs-column": "var(--fds-breakpoint-column-xxs)";
+    readonly "xs-column": "var(--fds-breakpoint-column-xs)";
+    readonly "sm-column": "var(--fds-breakpoint-column-sm)";
+    readonly "md-column": "var(--fds-breakpoint-column-md)";
+    readonly "lg-column": "var(--fds-breakpoint-column-lg)";
+    readonly "xl-column": "var(--fds-breakpoint-column-xl)";
+    readonly "xxl-column": "var(--fds-breakpoint-column-xxl)";
+    readonly "xxs-gutter": "var(--fds-breakpoint-gutter-xxs)";
+    readonly "xs-gutter": "var(--fds-breakpoint-gutter-xs)";
+    readonly "sm-gutter": "var(--fds-breakpoint-gutter-sm)";
+    readonly "md-gutter": "var(--fds-breakpoint-gutter-md)";
+    readonly "lg-gutter": "var(--fds-breakpoint-gutter-lg)";
+    readonly "xl-gutter": "var(--fds-breakpoint-gutter-xl)";
+    readonly "xxl-gutter": "var(--fds-breakpoint-gutter-xxl)";
+    readonly "xxs-margin": "var(--fds-breakpoint-margin-xxs)";
+    readonly "xs-margin": "var(--fds-breakpoint-margin-xs)";
+    readonly "sm-margin": "var(--fds-breakpoint-margin-sm)";
+    readonly "md-margin": "var(--fds-breakpoint-margin-md)";
+    readonly "lg-margin": "var(--fds-breakpoint-margin-lg)";
+    readonly "xl-margin": "var(--fds-breakpoint-margin-xl)";
+    readonly "xxl-margin": "var(--fds-breakpoint-margin-xxl)";
+};

package/theme/tokens/breakpoint.js

@@ -0,0 +1,2 @@
+const r={"xxs-min":"var(--fds-breakpoint-xxs-min)","xxs-max":"var(--fds-breakpoint-xxs-max)","xs-min":"var(--fds-breakpoint-xs-min)","xs-max":"var(--fds-breakpoint-xs-max)","sm-min":"var(--fds-breakpoint-sm-min)","sm-max":"var(--fds-breakpoint-sm-max)","md-min":"var(--fds-breakpoint-md-min)","md-max":"var(--fds-breakpoint-md-max)","lg-min":"var(--fds-breakpoint-lg-min)","lg-max":"var(--fds-breakpoint-lg-max)","xl-min":"var(--fds-breakpoint-xl-min)","xl-max":"var(--fds-breakpoint-xl-max)","xxl-min":"var(--fds-breakpoint-xxl-min)","xxs-column":"var(--fds-breakpoint-column-xxs)","xs-column":"var(--fds-breakpoint-column-xs)","sm-column":"var(--fds-breakpoint-column-sm)","md-column":"var(--fds-breakpoint-column-md)","lg-column":"var(--fds-breakpoint-column-lg)","xl-column":"var(--fds-breakpoint-column-xl)","xxl-column":"var(--fds-breakpoint-column-xxl)","xxs-gutter":"var(--fds-breakpoint-gutter-xxs)","xs-gutter":"var(--fds-breakpoint-gutter-xs)","sm-gutter":"var(--fds-breakpoint-gutter-sm)","md-gutter":"var(--fds-breakpoint-gutter-md)","lg-gutter":"var(--fds-breakpoint-gutter-lg)","xl-gutter":"var(--fds-breakpoint-gutter-xl)","xxl-gutter":"var(--fds-breakpoint-gutter-xxl)","xxs-margin":"var(--fds-breakpoint-margin-xxs)","xs-margin":"var(--fds-breakpoint-margin-xs)","sm-margin":"var(--fds-breakpoint-margin-sm)","md-margin":"var(--fds-breakpoint-margin-md)","lg-margin":"var(--fds-breakpoint-margin-lg)","xl-margin":"var(--fds-breakpoint-margin-xl)","xxl-margin":"var(--fds-breakpoint-margin-xxl)"};export{r as Breakpoint};
+//# sourceMappingURL=breakpoint.js.map

package/theme/tokens/breakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoint.js","sources":["../../../src/theme/tokens/breakpoint.ts"],"sourcesContent":["// @catalog\n/**\n * Responsive breakpoint tokens for each named breakpoint.\n * @keywords design tokens, responsive, screen size\n */\nexport const Breakpoint = {\n    \"xxs-min\": \"var(--fds-breakpoint-xxs-min)\",\n    \"xxs-max\": \"var(--fds-breakpoint-xxs-max)\",\n    \"xs-min\": \"var(--fds-breakpoint-xs-min)\",\n    \"xs-max\": \"var(--fds-breakpoint-xs-max)\",\n    \"sm-min\": \"var(--fds-breakpoint-sm-min)\",\n    \"sm-max\": \"var(--fds-breakpoint-sm-max)\",\n    \"md-min\": \"var(--fds-breakpoint-md-min)\",\n    \"md-max\": \"var(--fds-breakpoint-md-max)\",\n    \"lg-min\": \"var(--fds-breakpoint-lg-min)\",\n    \"lg-max\": \"var(--fds-breakpoint-lg-max)\",\n    \"xl-min\": \"var(--fds-breakpoint-xl-min)\",\n    \"xl-max\": \"var(--fds-breakpoint-xl-max)\",\n    \"xxl-min\": \"var(--fds-breakpoint-xxl-min)\",\n\n    \"xxs-column\": \"var(--fds-breakpoint-column-xxs)\",\n    \"xs-column\": \"var(--fds-breakpoint-column-xs)\",\n    \"sm-column\": \"var(--fds-breakpoint-column-sm)\",\n    \"md-column\": \"var(--fds-breakpoint-column-md)\",\n    \"lg-column\": \"var(--fds-breakpoint-column-lg)\",\n    \"xl-column\": \"var(--fds-breakpoint-column-xl)\",\n    \"xxl-column\": \"var(--fds-breakpoint-column-xxl)\",\n\n    \"xxs-gutter\": \"var(--fds-breakpoint-gutter-xxs)\",\n    \"xs-gutter\": \"var(--fds-breakpoint-gutter-xs)\",\n    \"sm-gutter\": \"var(--fds-breakpoint-gutter-sm)\",\n    \"md-gutter\": \"var(--fds-breakpoint-gutter-md)\",\n    \"lg-gutter\": \"var(--fds-breakpoint-gutter-lg)\",\n    \"xl-gutter\": \"var(--fds-breakpoint-gutter-xl)\",\n    \"xxl-gutter\": \"var(--fds-breakpoint-gutter-xxl)\",\n\n    \"xxs-margin\": \"var(--fds-breakpoint-margin-xxs)\",\n    \"xs-margin\": \"var(--fds-breakpoint-margin-xs)\",\n    \"sm-margin\": \"var(--fds-breakpoint-margin-sm)\",\n    \"md-margin\": \"var(--fds-breakpoint-margin-md)\",\n    \"lg-margin\": \"var(--fds-breakpoint-margin-lg)\",\n    \"xl-margin\": \"var(--fds-breakpoint-margin-xl)\",\n    \"xxl-margin\": \"var(--fds-breakpoint-margin-xxl)\",\n} as const;\n"],"names":["Breakpoint"],"mappings":"AAKO,MAAMA,EAAa,CACtB,UAAW,gCACX,UAAW,gCACX,SAAU,+BACV,SAAU,+BACV,SAAU,+BACV,SAAU,+BACV,SAAU,+BACV,SAAU,+BACV,SAAU,+BACV,SAAU,+BACV,SAAU,+BACV,SAAU,+BACV,UAAW,gCAEX,aAAc,mCACd,YAAa,kCACb,YAAa,kCACb,YAAa,kCACb,YAAa,kCACb,YAAa,kCACb,aAAc,mCAEd,aAAc,mCACd,YAAa,kCACb,YAAa,kCACb,YAAa,kCACb,YAAa,kCACb,YAAa,kCACb,aAAc,mCAEd,aAAc,mCACd,YAAa,kCACb,YAAa,kCACb,YAAa,kCACb,YAAa,kCACb,YAAa,kCACb,aAAc"}