npm - @gnome-ui/react - Versions diffs - 1.42.0 → 1.44.0 - Mend

@gnome-ui/react 1.42.0 → 1.44.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.

Files changed (47) hide show

package/dist/components/Drawer/Drawer.d.ts ADDED Viewed

@@ -0,0 +1,28 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type DrawerSide = "left" | "right";
+export type DrawerSize = "classic" | "wide";
+export interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, "content" | "title"> {
+    /** Whether the drawer is visible. */
+    open: boolean;
+    /** Edge that the drawer slides in from. Defaults to `"right"`. */
+    side?: DrawerSide;
+    /** Preset drawer width. Defaults to `"classic"`. */
+    size?: DrawerSize;
+    /** Optional drawer heading. */
+    title?: ReactNode;
+    /** Drawer content when a prop is preferred over `children`. */
+    content?: ReactNode;
+    /** Drawer content. Used when `content` is not provided. */
+    children?: ReactNode;
+    /** Called when the user dismisses the drawer with Escape or the backdrop. */
+    onClose?: () => void;
+    /** Whether clicking the backdrop closes the drawer. Defaults to `true`. */
+    closeOnBackdrop?: boolean;
+}
+/**
+ * Slide-over panel for supplementary content.
+ *
+ * The drawer is controlled through `open`, renders into `document.body`, and
+ * accepts its body as either `content` or `children`.
+ */
+export declare function Drawer({ open, side, size, title, content, children, onClose, closeOnBackdrop, className, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Drawer/Drawer.js ADDED Viewed

@@ -0,0 +1,55 @@
+import { FOCUSABLE as e, trapFocus as t, useVisualViewport as n } from "../Dialog/dialogUtils.js";
+import r from "./Drawer.module.css.js";
+import { useCallback as i, useEffect as a, useId as o, useRef as s } from "react";
+import { createPortal as c } from "react-dom";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/Drawer/Drawer.tsx
+function d({ open: d, side: f = "right", size: p = "classic", title: m, content: h, children: g, onClose: _, closeOnBackdrop: v = !0, className: y, ...b }) {
+	let x = s(null), S = o(), C = s(null), w = n(), T = h === void 0 ? g : h;
+	a(() => {
+		d ? (C.current = document.activeElement, x.current?.querySelector(e)?.focus()) : C.current?.focus();
+	}, [d]);
+	let E = i((e) => {
+		if (e.key === "Escape") {
+			e.preventDefault(), _?.();
+			return;
+		}
+		t(e, x);
+	}, [_]);
+	if (!d) return null;
+	let D = /* @__PURE__ */ l("div", {
+		className: r.backdrop,
+		style: w,
+		onClick: v ? _ : void 0,
+		children: /* @__PURE__ */ u("div", {
+			ref: x,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": m ? S : void 0,
+			"data-side": f,
+			"data-size": p,
+			className: [
+				r.drawer,
+				f === "left" ? r.left : r.right,
+				p === "wide" ? r.wide : r.classic,
+				y
+			].filter(Boolean).join(" "),
+			onKeyDown: E,
+			onClick: (e) => e.stopPropagation(),
+			...b,
+			children: [m && /* @__PURE__ */ l("div", {
+				id: S,
+				className: r.title,
+				children: m
+			}), T !== void 0 && /* @__PURE__ */ l("div", {
+				className: r.content,
+				children: T
+			})]
+		})
+	});
+	return typeof document > "u" ? D : c(D, document.body);
+}
+//#endregion
+export { d as Drawer };
+//# sourceMappingURL=Drawer.js.map

package/dist/components/Drawer/Drawer.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Drawer.js","names":[],"sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import {\n useCallback,\n useEffect,\n useId,\n useRef,\n type HTMLAttributes,\n type KeyboardEvent,\n type ReactNode,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { FOCUSABLE, trapFocus, useVisualViewport } from \"../Dialog/dialogUtils\";\nimport styles from \"./Drawer.module.css\";\n\nexport type DrawerSide = \"left\" | \"right\";\nexport type DrawerSize = \"classic\" | \"wide\";\n\nexport interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, \"content\" | \"title\"> {\n /** Whether the drawer is visible. */\n open: boolean;\n /** Edge that the drawer slides in from. Defaults to `\"right\"`. */\n side?: DrawerSide;\n /** Preset drawer width. Defaults to `\"classic\"`. */\n size?: DrawerSize;\n /** Optional drawer heading. */\n title?: ReactNode;\n /** Drawer content when a prop is preferred over `children`. */\n content?: ReactNode;\n /** Drawer content. Used when `content` is not provided. */\n children?: ReactNode;\n /** Called when the user dismisses the drawer with Escape or the backdrop. */\n onClose?: () => void;\n /** Whether clicking the backdrop closes the drawer. Defaults to `true`. */\n closeOnBackdrop?: boolean;\n}\n\n/**\n * Slide-over panel for supplementary content.\n *\n * The drawer is controlled through `open`, renders into `document.body`, and\n * accepts its body as either `content` or `children`.\n */\nexport function Drawer({\n open,\n side = \"right\",\n size = \"classic\",\n title,\n content,\n children,\n onClose,\n closeOnBackdrop = true,\n className,\n ...props\n}: DrawerProps) {\n const drawerRef = useRef<HTMLDivElement>(null);\n const titleId = useId();\n const previouslyFocused = useRef<Element | null>(null);\n const viewportStyle = useVisualViewport();\n const body = content !== undefined ? content : children;\n\n useEffect(() => {\n if (open) {\n previouslyFocused.current = document.activeElement;\n drawerRef.current?.querySelector<HTMLElement>(FOCUSABLE)?.focus();\n } else {\n (previouslyFocused.current as HTMLElement | null)?.focus();\n }\n }, [open]);\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n if (event.key === \"Escape\") {\n event.preventDefault();\n onClose?.();\n return;\n }\n\n trapFocus(event, drawerRef);\n },\n [onClose],\n );\n\n if (!open) return null;\n\n const node = (\n <div\n className={styles.backdrop}\n style={viewportStyle}\n onClick={closeOnBackdrop ? onClose : undefined}\n >\n <div\n ref={drawerRef}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={title ? titleId : undefined}\n data-side={side}\n data-size={size}\n className={[\n styles.drawer,\n side === \"left\" ? styles.left : styles.right,\n size === \"wide\" ? styles.wide : styles.classic,\n className,\n ]\n .filter(Boolean)\n .join(\" \")}\n onKeyDown={handleKeyDown}\n onClick={(event) => event.stopPropagation()}\n {...props}\n >\n {title && <div id={titleId} className={styles.title}>{title}</div>}\n {body !== undefined && <div className={styles.content}>{body}</div>}\n </div>\n </div>\n );\n\n if (typeof document === \"undefined\") return node;\n return createPortal(node, document.body);\n}\n"],"mappings":";;;;;;AAyCA,SAAgB,EAAO,EACrB,SACA,UAAO,SACP,UAAO,WACP,UACA,YACA,aACA,YACA,qBAAkB,IAClB,cACA,GAAG,KACW;CACd,IAAM,IAAY,EAAuB,KAAK,EACxC,IAAU,GAAO,EACjB,IAAoB,EAAuB,KAAK,EAChD,IAAgB,GAAmB,EACnC,IAAO,MAAY,KAAA,IAAsB,IAAV;AAErC,SAAgB;AACd,EAAI,KACF,EAAkB,UAAU,SAAS,eACrC,EAAU,SAAS,cAA2B,EAAU,EAAE,OAAO,IAEhE,EAAkB,SAAgC,OAAO;IAE3D,CAAC,EAAK,CAAC;CAEV,IAAM,IAAgB,GACnB,MAAyC;AACxC,MAAI,EAAM,QAAQ,UAAU;AAE1B,GADA,EAAM,gBAAgB,EACtB,KAAW;AACX;;AAGF,IAAU,GAAO,EAAU;IAE7B,CAAC,EAAQ,CACV;AAED,KAAI,CAAC,EAAM,QAAO;CAElB,IAAM,IACJ,kBAAC,OAAD;EACE,WAAW,EAAO;EAClB,OAAO;EACP,SAAS,IAAkB,IAAU,KAAA;YAErC,kBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAW;GACX,mBAAiB,IAAQ,IAAU,KAAA;GACnC,aAAW;GACX,aAAW;GACX,WAAW;IACT,EAAO;IACP,MAAS,SAAS,EAAO,OAAO,EAAO;IACvC,MAAS,SAAS,EAAO,OAAO,EAAO;IACvC;IACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;GACZ,WAAW;GACX,UAAU,MAAU,EAAM,iBAAiB;GAC3C,GAAI;aAjBN,CAmBG,KAAS,kBAAC,OAAD;IAAK,IAAI;IAAS,WAAW,EAAO;cAAQ;IAAY,CAAA,EACjE,MAAS,KAAA,KAAa,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAU;IAAW,CAAA,CAC/D;;EACF,CAAA;AAIR,QADI,OAAO,WAAa,MAAoB,IACrC,EAAa,GAAM,SAAS,KAAK"}

package/dist/components/Drawer/Drawer.module.css.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ var e=`_backdrop_iw6h1_3`,t=`_drawer_iw6h1_24`,n=`_classic_iw6h1_36`,r=`_wide_iw6h1_40`,i=`_left_iw6h1_44`,a=`_right_iw6h1_53`,o=`_title_iw6h1_72`,s=`_content_iw6h1_82`,c={backdrop:e,"backdrop-in":`_backdrop-in_iw6h1_1`,drawer:t,classic:n,wide:r,left:i,"drawer-in-left":`_drawer-in-left_iw6h1_1`,right:a,"drawer-in-right":`_drawer-in-right_iw6h1_1`,title:o,content:s};exports.default=c;
2	+ //# sourceMappingURL=Drawer.module.css.cjs.map

package/dist/components/Drawer/Drawer.module.css.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Drawer.module.css.cjs","names":[],"sources":["../../../src/components/Drawer/Drawer.module.css"],"sourcesContent":["/* ─── Backdrop ─────────────────────────────────────────────────────────────── */\n\n.backdrop {\n position: fixed;\n inset: 0;\n z-index: 10000;\n\n display: flex;\n\n background-color: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n\n animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n/* ─── Drawer ──────────────────────────────────────────────────────────────── */\n\n.drawer {\n display: flex;\n flex-direction: column;\n width: min(var(--gnome-drawer-width, var(--gnome-drawer-preset-width, 420px)), 100vw);\n height: 100dvh;\n min-width: 0;\n overflow: hidden;\n\n background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #fafafa));\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.classic {\n --gnome-drawer-preset-width: 420px;\n}\n\n.wide {\n --gnome-drawer-preset-width: 640px;\n}\n\n.left {\n margin-right: auto;\n border-radius: 0 var(--gnome-radius-xl, 16px) var(--gnome-radius-xl, 16px) 0;\n box-shadow:\n 4px 0 24px rgba(0, 0, 0, 0.18),\n 0 0 0 1px rgba(0, 0, 0, 0.06);\n animation: drawer-in-left var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n.right {\n margin-left: auto;\n border-radius: var(--gnome-radius-xl, 16px) 0 0 var(--gnome-radius-xl, 16px);\n box-shadow:\n -4px 0 24px rgba(0, 0, 0, 0.18),\n 0 0 0 1px rgba(0, 0, 0, 0.06);\n animation: drawer-in-right var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes drawer-in-left {\n from { transform: translateX(-100%); }\n to { transform: translateX(0); }\n}\n\n@keyframes drawer-in-right {\n from { transform: translateX(100%); }\n to { transform: translateX(0); }\n}\n\n.title {\n flex-shrink: 0;\n padding: var(--gnome-space-4, 24px) var(--gnome-space-4, 24px) var(--gnome-space-2, 12px);\n\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-title-4, 1.125rem);\n font-weight: var(--gnome-font-weight-bold, 700);\n line-height: var(--gnome-line-height-title, 1.3);\n}\n\n.content {\n flex: 1;\n min-height: 0;\n overflow: auto;\n padding: var(--gnome-space-4, 24px);\n}\n\n.title + .content {\n padding-top: 0;\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n .backdrop {\n background-color: rgba(0, 0, 0, 0.65);\n }\n\n .drawer {\n background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n }\n\n .left {\n box-shadow:\n 4px 0 24px rgba(0, 0, 0, 0.45),\n 0 0 0 1px rgba(255, 255, 255, 0.06);\n }\n\n .right {\n box-shadow:\n -4px 0 24px rgba(0, 0, 0, 0.45),\n 0 0 0 1px rgba(255, 255, 255, 0.06);\n }\n}\n\n/* ─── Reduced motion ──────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .backdrop,\n .left,\n .right {\n animation: none;\n }\n}\n"],"mappings":""}

package/dist/components/Drawer/Drawer.module.css.js ADDED Viewed

@@ -0,0 +1,18 @@
+//#region src/components/Drawer/Drawer.module.css
+var e = "_backdrop_iw6h1_3", t = "_drawer_iw6h1_24", n = "_classic_iw6h1_36", r = "_wide_iw6h1_40", i = "_left_iw6h1_44", a = "_right_iw6h1_53", o = "_title_iw6h1_72", s = "_content_iw6h1_82", c = {
+	backdrop: e,
+	"backdrop-in": "_backdrop-in_iw6h1_1",
+	drawer: t,
+	classic: n,
+	wide: r,
+	left: i,
+	"drawer-in-left": "_drawer-in-left_iw6h1_1",
+	right: a,
+	"drawer-in-right": "_drawer-in-right_iw6h1_1",
+	title: o,
+	content: s
+};
+//#endregion
+export { c as default };
+//# sourceMappingURL=Drawer.module.css.js.map

package/dist/components/Drawer/Drawer.module.css.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Drawer.module.css.js","names":[],"sources":["../../../src/components/Drawer/Drawer.module.css"],"sourcesContent":["/* ─── Backdrop ─────────────────────────────────────────────────────────────── */\n\n.backdrop {\n position: fixed;\n inset: 0;\n z-index: 10000;\n\n display: flex;\n\n background-color: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n\n animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n/* ─── Drawer ──────────────────────────────────────────────────────────────── */\n\n.drawer {\n display: flex;\n flex-direction: column;\n width: min(var(--gnome-drawer-width, var(--gnome-drawer-preset-width, 420px)), 100vw);\n height: 100dvh;\n min-width: 0;\n overflow: hidden;\n\n background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #fafafa));\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.classic {\n --gnome-drawer-preset-width: 420px;\n}\n\n.wide {\n --gnome-drawer-preset-width: 640px;\n}\n\n.left {\n margin-right: auto;\n border-radius: 0 var(--gnome-radius-xl, 16px) var(--gnome-radius-xl, 16px) 0;\n box-shadow:\n 4px 0 24px rgba(0, 0, 0, 0.18),\n 0 0 0 1px rgba(0, 0, 0, 0.06);\n animation: drawer-in-left var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n.right {\n margin-left: auto;\n border-radius: var(--gnome-radius-xl, 16px) 0 0 var(--gnome-radius-xl, 16px);\n box-shadow:\n -4px 0 24px rgba(0, 0, 0, 0.18),\n 0 0 0 1px rgba(0, 0, 0, 0.06);\n animation: drawer-in-right var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes drawer-in-left {\n from { transform: translateX(-100%); }\n to { transform: translateX(0); }\n}\n\n@keyframes drawer-in-right {\n from { transform: translateX(100%); }\n to { transform: translateX(0); }\n}\n\n.title {\n flex-shrink: 0;\n padding: var(--gnome-space-4, 24px) var(--gnome-space-4, 24px) var(--gnome-space-2, 12px);\n\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-title-4, 1.125rem);\n font-weight: var(--gnome-font-weight-bold, 700);\n line-height: var(--gnome-line-height-title, 1.3);\n}\n\n.content {\n flex: 1;\n min-height: 0;\n overflow: auto;\n padding: var(--gnome-space-4, 24px);\n}\n\n.title + .content {\n padding-top: 0;\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n .backdrop {\n background-color: rgba(0, 0, 0, 0.65);\n }\n\n .drawer {\n background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n }\n\n .left {\n box-shadow:\n 4px 0 24px rgba(0, 0, 0, 0.45),\n 0 0 0 1px rgba(255, 255, 255, 0.06);\n }\n\n .right {\n box-shadow:\n -4px 0 24px rgba(0, 0, 0, 0.45),\n 0 0 0 1px rgba(255, 255, 255, 0.06);\n }\n}\n\n/* ─── Reduced motion ──────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .backdrop,\n .left,\n .right {\n animation: none;\n }\n}\n"],"mappings":""}

package/dist/components/Drawer/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { Drawer } from './Drawer';
2	+ export type { DrawerProps, DrawerSide, DrawerSize } from './Drawer';

package/dist/components/Drawer.cjs ADDED Viewed

	@@ -0,0 +1 @@
1	+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./Drawer/Drawer.cjs`);exports.Drawer=e.Drawer;

package/dist/components/Drawer.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './Drawer/index'
2	+ export {}

package/dist/components/Drawer.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { Drawer as e } from "./Drawer/Drawer.js";
2	+ export { e as Drawer };

package/dist/components/GnomeProvider/GnomeContext.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`react`);var t=(0,e.createContext)({locale:void 0,dir:`ltr`,numberFormat:void 0,dateTimeFormat:void 0});function n(){return(0,e.useContext)(t).locale}function r(){return(0,e.useContext)(t).dir}function i(n){let{locale:r,numberFormat:i}=(0,e.useContext)(t);return(0,e.useMemo)(()=>new Intl.NumberFormat(r,{...i,...n}),[r,i,n])}function a(n){let{locale:r,dateTimeFormat:i}=(0,e.useContext)(t);return(0,e.useMemo)(()=>new Intl.DateTimeFormat(r,{...i,...n}),[r,i,n])}exports.GnomeContext=t,exports.useDateTimeFormatter=a,exports.useDir=r,exports.useLocale=n,exports.useNumberFormatter=i;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`react`);var t=(0,e.createContext)({locale:void 0,dir:`ltr`,numberFormat:void 0,dateTimeFormat:void 0,colorScheme:`system`,resolvedColorScheme:`light`,accentColor:`blue`});function n(){return(0,e.useContext)(t).locale}function r(){return(0,e.useContext)(t).dir}function i(n){let{locale:r,numberFormat:i}=(0,e.useContext)(t);return(0,e.useMemo)(()=>new Intl.NumberFormat(r,{...i,...n}),[r,i,n])}function a(n){let{locale:r,dateTimeFormat:i}=(0,e.useContext)(t);return(0,e.useMemo)(()=>new Intl.DateTimeFormat(r,{...i,...n}),[r,i,n])}function o(){return(0,e.useContext)(t).colorScheme}function s(){return(0,e.useContext)(t).resolvedColorScheme}function c(){return(0,e.useContext)(t).accentColor}exports.GnomeContext=t,exports.useAccentColor=c,exports.useColorScheme=o,exports.useDateTimeFormatter=a,exports.useDir=r,exports.useLocale=n,exports.useNumberFormatter=i,exports.useResolvedColorScheme=s;
 //# sourceMappingURL=GnomeContext.cjs.map

package/dist/components/GnomeProvider/GnomeContext.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GnomeContext.cjs","names":[],"sources":["../../../src/components/GnomeProvider/GnomeContext.ts"],"sourcesContent":["import { createContext, useContext, useMemo } from \"react\";\n\nexport type GnomeDir = \"ltr\" \| \"rtl\";\n\nexport interface GnomeContextValue {\n locale: string \| undefined;\n dir: GnomeDir;\n numberFormat: Intl.NumberFormatOptions \| undefined;\n dateTimeFormat: Intl.DateTimeFormatOptions \| undefined;\n}\n\nexport const GnomeContext = createContext<GnomeContextValue>({\n locale: undefined,\n dir: \"ltr\",\n numberFormat: undefined,\n dateTimeFormat: undefined,\n});\n\n/** Returns the locale set by the nearest `GnomeProvider`, or `undefined` to use the browser locale. /\nexport function useLocale(): string \| undefined {\n return useContext(GnomeContext).locale;\n}\n\n/* Returns the text direction set by the nearest `GnomeProvider`. Defaults to `\"ltr\"`. /\nexport function useDir(): GnomeDir {\n return useContext(GnomeContext).dir;\n}\n\n/* Returns an `Intl.NumberFormat` configured from `GnomeProvider` defaults plus local overrides. /\nexport function useNumberFormatter(\n options?: Intl.NumberFormatOptions,\n): Intl.NumberFormat {\n const { locale, numberFormat } = useContext(GnomeContext);\n\n return useMemo(\n () => new Intl.NumberFormat(locale, { ...numberFormat, ...options }),\n [locale, numberFormat, options],\n );\n}\n\n/* Returns an `Intl.DateTimeFormat` configured from `GnomeProvider` defaults plus local overrides. */\nexport function useDateTimeFormatter(\n options?: Intl.DateTimeFormatOptions,\n): Intl.DateTimeFormat {\n const { locale, dateTimeFormat } = useContext(GnomeContext);\n\n return useMemo(\n () => new Intl.DateTimeFormat(locale, { ...dateTimeFormat, ...options }),\n [locale, dateTimeFormat, options],\n );\n}\n"],"mappings":"~~0FAWA~~,IAAa,GAAA,EAAA,EAAA,eAAgD,CAC3D,OAAQ,IAAA,GACR,IAAK,MACL,aAAc,IAAA,GACd,eAAgB,IAAA,~~GACjB~~,CAAC,CAGF,SAAgB,GAAgC,CAC9C,OAAA,EAAA,EAAA,YAAkB,EAAa,CAAC,OAIlC,SAAgB,GAAmB,CACjC,OAAA,EAAA,EAAA,YAAkB,EAAa,CAAC,IAIlC,SAAgB,EACd,EACmB,CACnB,GAAM,CAAE,SAAQ,iBAAA,EAAA,EAAA,YAA4B,EAAa,CAEzD,OAAA,EAAA,EAAA,aACQ,IAAI,KAAK,aAAa,EAAQ,CAAE,GAAG,EAAc,GAAG,EAAS,CAAC,CACpE,CAAC,EAAQ,EAAc,EAAQ,CAChC,CAIH,SAAgB,EACd,EACqB,CACrB,GAAM,CAAE,SAAQ,mBAAA,EAAA,EAAA,YAA8B,EAAa,CAE3D,OAAA,EAAA,EAAA,aACQ,IAAI,KAAK,eAAe,EAAQ,CAAE,GAAG,EAAgB,GAAG,EAAS,CAAC,CACxE,CAAC,EAAQ,EAAgB,EAAQ,CAClC"}
1	+ {"version":3,"file":"GnomeContext.cjs","names":[],"sources":["../../../src/components/GnomeProvider/GnomeContext.ts"],"sourcesContent":["import { createContext, useContext, useMemo } from \"react\";\n\nexport type GnomeDir = \"ltr\" \| \"rtl\";\nexport type GnomeColorScheme = \"light\" \| \"dark\" \| \"system\";\nexport type GnomeNamedAccentColor =\n \| \"blue\"\n \| \"green\"\n \| \"yellow\"\n \| \"orange\"\n \| \"red\"\n \| \"purple\"\n \| \"brown\";\nexport type GnomeAccentColor = GnomeNamedAccentColor \| (string & {});\n\nexport interface GnomeContextValue {\n locale: string \| undefined;\n dir: GnomeDir;\n numberFormat: Intl.NumberFormatOptions \| undefined;\n dateTimeFormat: Intl.DateTimeFormatOptions \| undefined;\n colorScheme: GnomeColorScheme;\n resolvedColorScheme: \"light\" \| \"dark\";\n accentColor: GnomeAccentColor;\n}\n\nexport const GnomeContext = createContext<GnomeContextValue>({\n locale: undefined,\n dir: \"ltr\",\n numberFormat: undefined,\n dateTimeFormat: undefined,\n colorScheme: \"system\",\n resolvedColorScheme: \"light\",\n accentColor: \"blue\",\n});\n\n/** Returns the locale set by the nearest `GnomeProvider`, or `undefined` to use the browser locale. /\nexport function useLocale(): string \| undefined {\n return useContext(GnomeContext).locale;\n}\n\n/* Returns the text direction set by the nearest `GnomeProvider`. Defaults to `\"ltr\"`. /\nexport function useDir(): GnomeDir {\n return useContext(GnomeContext).dir;\n}\n\n/* Returns an `Intl.NumberFormat` configured from `GnomeProvider` defaults plus local overrides. /\nexport function useNumberFormatter(\n options?: Intl.NumberFormatOptions,\n): Intl.NumberFormat {\n const { locale, numberFormat } = useContext(GnomeContext);\n\n return useMemo(\n () => new Intl.NumberFormat(locale, { ...numberFormat, ...options }),\n [locale, numberFormat, options],\n );\n}\n\n/* Returns an `Intl.DateTimeFormat` configured from `GnomeProvider` defaults plus local overrides. /\nexport function useDateTimeFormatter(\n options?: Intl.DateTimeFormatOptions,\n): Intl.DateTimeFormat {\n const { locale, dateTimeFormat } = useContext(GnomeContext);\n\n return useMemo(\n () => new Intl.DateTimeFormat(locale, { ...dateTimeFormat, ...options }),\n [locale, dateTimeFormat, options],\n );\n}\n\n/* Returns the color scheme preference set by the nearest `GnomeProvider`. Defaults to `\"system\"`. /\nexport function useColorScheme(): GnomeColorScheme {\n return useContext(GnomeContext).colorScheme;\n}\n\n/* Returns the resolved color scheme (`\"light\"` or `\"dark\"`), accounting for the system preference when `colorScheme` is `\"system\"`. /\nexport function useResolvedColorScheme(): \"light\" \| \"dark\" {\n return useContext(GnomeContext).resolvedColorScheme;\n}\n\n/* Returns the accent color set by the nearest `GnomeProvider`. Defaults to `\"blue\"`. */\nexport function useAccentColor(): GnomeAccentColor {\n return useContext(GnomeContext).accentColor;\n}\n"],"mappings":"0FAwBA,IAAa,GAAA,EAAA,EAAA,eAAgD,CAC3D,OAAQ,IAAA,GACR,IAAK,MACL,aAAc,IAAA,GACd,eAAgB,IAAA,GAChB,YAAa,SACb,oBAAqB,QACrB,YAAa,OACd,CAAC,CAGF,SAAgB,GAAgC,CAC9C,OAAA,EAAA,EAAA,YAAkB,EAAa,CAAC,OAIlC,SAAgB,GAAmB,CACjC,OAAA,EAAA,EAAA,YAAkB,EAAa,CAAC,IAIlC,SAAgB,EACd,EACmB,CACnB,GAAM,CAAE,SAAQ,iBAAA,EAAA,EAAA,YAA4B,EAAa,CAEzD,OAAA,EAAA,EAAA,aACQ,IAAI,KAAK,aAAa,EAAQ,CAAE,GAAG,EAAc,GAAG,EAAS,CAAC,CACpE,CAAC,EAAQ,EAAc,EAAQ,CAChC,CAIH,SAAgB,EACd,EACqB,CACrB,GAAM,CAAE,SAAQ,mBAAA,EAAA,EAAA,YAA8B,EAAa,CAE3D,OAAA,EAAA,EAAA,aACQ,IAAI,KAAK,eAAe,EAAQ,CAAE,GAAG,EAAgB,GAAG,EAAS,CAAC,CACxE,CAAC,EAAQ,EAAgB,EAAQ,CAClC,CAIH,SAAgB,GAAmC,CACjD,OAAA,EAAA,EAAA,YAAkB,EAAa,CAAC,YAIlC,SAAgB,GAA2C,CACzD,OAAA,EAAA,EAAA,YAAkB,EAAa,CAAC,oBAIlC,SAAgB,GAAmC,CACjD,OAAA,EAAA,EAAA,YAAkB,EAAa,CAAC"}

package/dist/components/GnomeProvider/GnomeContext.d.ts CHANGED Viewed

@@ -1,9 +1,15 @@
 export type GnomeDir = "ltr" | "rtl";
+export type GnomeColorScheme = "light" | "dark" | "system";
+export type GnomeNamedAccentColor = "blue" | "green" | "yellow" | "orange" | "red" | "purple" | "brown";
+export type GnomeAccentColor = GnomeNamedAccentColor | (string & {});
 export interface GnomeContextValue {
     locale: string | undefined;
     dir: GnomeDir;
     numberFormat: Intl.NumberFormatOptions | undefined;
     dateTimeFormat: Intl.DateTimeFormatOptions | undefined;
+    colorScheme: GnomeColorScheme;
+    resolvedColorScheme: "light" | "dark";
+    accentColor: GnomeAccentColor;
 }
 export declare const GnomeContext: import('react').Context<GnomeContextValue>;
 /** Returns the locale set by the nearest `GnomeProvider`, or `undefined` to use the browser locale. */
@@ -14,3 +20,9 @@ export declare function useDir(): GnomeDir;
 export declare function useNumberFormatter(options?: Intl.NumberFormatOptions): Intl.NumberFormat;
 /** Returns an `Intl.DateTimeFormat` configured from `GnomeProvider` defaults plus local overrides. */
 export declare function useDateTimeFormatter(options?: Intl.DateTimeFormatOptions): Intl.DateTimeFormat;
+/** Returns the color scheme preference set by the nearest `GnomeProvider`. Defaults to `"system"`. */
+export declare function useColorScheme(): GnomeColorScheme;
+/** Returns the resolved color scheme (`"light"` or `"dark"`), accounting for the system preference when `colorScheme` is `"system"`. */
+export declare function useResolvedColorScheme(): "light" | "dark";
+/** Returns the accent color set by the nearest `GnomeProvider`. Defaults to `"blue"`. */
+export declare function useAccentColor(): GnomeAccentColor;

package/dist/components/GnomeProvider/GnomeContext.js CHANGED Viewed

@@ -4,7 +4,10 @@ var r = e({
 	locale: void 0,
 	dir: "ltr",
 	numberFormat: void 0,
-	dateTimeFormat: void 0
+	dateTimeFormat: void 0,
+	colorScheme: "system",
+	resolvedColorScheme: "light",
+	accentColor: "blue"
 });
 function i() {
 	return t(r).locale;
@@ -34,7 +37,16 @@ function s(e) {
 		e
 	]);
 }
+function c() {
+	return t(r).colorScheme;
+}
+function l() {
+	return t(r).resolvedColorScheme;
+}
+function u() {
+	return t(r).accentColor;
+}
 //#endregion
-export { r as GnomeContext, s as useDateTimeFormatter, a as useDir, i as useLocale, o as useNumberFormatter };
+export { r as GnomeContext, u as useAccentColor, c as useColorScheme, s as useDateTimeFormatter, a as useDir, i as useLocale, o as useNumberFormatter, l as useResolvedColorScheme };
 //# sourceMappingURL=GnomeContext.js.map

package/dist/components/GnomeProvider/GnomeContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GnomeContext.js","names":[],"sources":["../../../src/components/GnomeProvider/GnomeContext.ts"],"sourcesContent":["import { createContext, useContext, useMemo } from \"react\";\n\nexport type GnomeDir = \"ltr\" \| \"rtl\";\n\nexport interface GnomeContextValue {\n locale: string \| undefined;\n dir: GnomeDir;\n numberFormat: Intl.NumberFormatOptions \| undefined;\n dateTimeFormat: Intl.DateTimeFormatOptions \| undefined;\n}\n\nexport const GnomeContext = createContext<GnomeContextValue>({\n locale: undefined,\n dir: \"ltr\",\n numberFormat: undefined,\n dateTimeFormat: undefined,\n});\n\n/** Returns the locale set by the nearest `GnomeProvider`, or `undefined` to use the browser locale. /\nexport function useLocale(): string \| undefined {\n return useContext(GnomeContext).locale;\n}\n\n/* Returns the text direction set by the nearest `GnomeProvider`. Defaults to `\"ltr\"`. /\nexport function useDir(): GnomeDir {\n return useContext(GnomeContext).dir;\n}\n\n/* Returns an `Intl.NumberFormat` configured from `GnomeProvider` defaults plus local overrides. /\nexport function useNumberFormatter(\n options?: Intl.NumberFormatOptions,\n): Intl.NumberFormat {\n const { locale, numberFormat } = useContext(GnomeContext);\n\n return useMemo(\n () => new Intl.NumberFormat(locale, { ...numberFormat, ...options }),\n [locale, numberFormat, options],\n );\n}\n\n/* Returns an `Intl.DateTimeFormat` configured from `GnomeProvider` defaults plus local overrides. */\nexport function useDateTimeFormatter(\n options?: Intl.DateTimeFormatOptions,\n): Intl.DateTimeFormat {\n const { locale, dateTimeFormat } = useContext(GnomeContext);\n\n return useMemo(\n () => new Intl.DateTimeFormat(locale, { ...dateTimeFormat, ...options }),\n [locale, dateTimeFormat, options],\n );\n}\n"],"mappings":";;~~AAWA~~,IAAa,IAAe,EAAiC;CAC3D,QAAQ,KAAA;CACR,KAAK;CACL,cAAc,KAAA;CACd,gBAAgB,KAAA;~~CACjB~~,CAAC;AAGF,SAAgB,IAAgC;AAC9C,QAAO,EAAW,EAAa,CAAC;;AAIlC,SAAgB,IAAmB;AACjC,QAAO,EAAW,EAAa,CAAC;;AAIlC,SAAgB,EACd,GACmB;CACnB,IAAM,EAAE,WAAQ,oBAAiB,EAAW,EAAa;AAEzD,QAAO,QACC,IAAI,KAAK,aAAa,GAAQ;EAAE,GAAG;EAAc,GAAG;EAAS,CAAC,EACpE;EAAC;EAAQ;EAAc;EAAQ,CAChC;;AAIH,SAAgB,EACd,GACqB;CACrB,IAAM,EAAE,WAAQ,sBAAmB,EAAW,EAAa;AAE3D,QAAO,QACC,IAAI,KAAK,eAAe,GAAQ;EAAE,GAAG;EAAgB,GAAG;EAAS,CAAC,EACxE;EAAC;EAAQ;EAAgB;EAAQ,CAClC"}
1	+ {"version":3,"file":"GnomeContext.js","names":[],"sources":["../../../src/components/GnomeProvider/GnomeContext.ts"],"sourcesContent":["import { createContext, useContext, useMemo } from \"react\";\n\nexport type GnomeDir = \"ltr\" \| \"rtl\";\nexport type GnomeColorScheme = \"light\" \| \"dark\" \| \"system\";\nexport type GnomeNamedAccentColor =\n \| \"blue\"\n \| \"green\"\n \| \"yellow\"\n \| \"orange\"\n \| \"red\"\n \| \"purple\"\n \| \"brown\";\nexport type GnomeAccentColor = GnomeNamedAccentColor \| (string & {});\n\nexport interface GnomeContextValue {\n locale: string \| undefined;\n dir: GnomeDir;\n numberFormat: Intl.NumberFormatOptions \| undefined;\n dateTimeFormat: Intl.DateTimeFormatOptions \| undefined;\n colorScheme: GnomeColorScheme;\n resolvedColorScheme: \"light\" \| \"dark\";\n accentColor: GnomeAccentColor;\n}\n\nexport const GnomeContext = createContext<GnomeContextValue>({\n locale: undefined,\n dir: \"ltr\",\n numberFormat: undefined,\n dateTimeFormat: undefined,\n colorScheme: \"system\",\n resolvedColorScheme: \"light\",\n accentColor: \"blue\",\n});\n\n/** Returns the locale set by the nearest `GnomeProvider`, or `undefined` to use the browser locale. /\nexport function useLocale(): string \| undefined {\n return useContext(GnomeContext).locale;\n}\n\n/* Returns the text direction set by the nearest `GnomeProvider`. Defaults to `\"ltr\"`. /\nexport function useDir(): GnomeDir {\n return useContext(GnomeContext).dir;\n}\n\n/* Returns an `Intl.NumberFormat` configured from `GnomeProvider` defaults plus local overrides. /\nexport function useNumberFormatter(\n options?: Intl.NumberFormatOptions,\n): Intl.NumberFormat {\n const { locale, numberFormat } = useContext(GnomeContext);\n\n return useMemo(\n () => new Intl.NumberFormat(locale, { ...numberFormat, ...options }),\n [locale, numberFormat, options],\n );\n}\n\n/* Returns an `Intl.DateTimeFormat` configured from `GnomeProvider` defaults plus local overrides. /\nexport function useDateTimeFormatter(\n options?: Intl.DateTimeFormatOptions,\n): Intl.DateTimeFormat {\n const { locale, dateTimeFormat } = useContext(GnomeContext);\n\n return useMemo(\n () => new Intl.DateTimeFormat(locale, { ...dateTimeFormat, ...options }),\n [locale, dateTimeFormat, options],\n );\n}\n\n/* Returns the color scheme preference set by the nearest `GnomeProvider`. Defaults to `\"system\"`. /\nexport function useColorScheme(): GnomeColorScheme {\n return useContext(GnomeContext).colorScheme;\n}\n\n/* Returns the resolved color scheme (`\"light\"` or `\"dark\"`), accounting for the system preference when `colorScheme` is `\"system\"`. /\nexport function useResolvedColorScheme(): \"light\" \| \"dark\" {\n return useContext(GnomeContext).resolvedColorScheme;\n}\n\n/* Returns the accent color set by the nearest `GnomeProvider`. Defaults to `\"blue\"`. */\nexport function useAccentColor(): GnomeAccentColor {\n return useContext(GnomeContext).accentColor;\n}\n"],"mappings":";;AAwBA,IAAa,IAAe,EAAiC;CAC3D,QAAQ,KAAA;CACR,KAAK;CACL,cAAc,KAAA;CACd,gBAAgB,KAAA;CAChB,aAAa;CACb,qBAAqB;CACrB,aAAa;CACd,CAAC;AAGF,SAAgB,IAAgC;AAC9C,QAAO,EAAW,EAAa,CAAC;;AAIlC,SAAgB,IAAmB;AACjC,QAAO,EAAW,EAAa,CAAC;;AAIlC,SAAgB,EACd,GACmB;CACnB,IAAM,EAAE,WAAQ,oBAAiB,EAAW,EAAa;AAEzD,QAAO,QACC,IAAI,KAAK,aAAa,GAAQ;EAAE,GAAG;EAAc,GAAG;EAAS,CAAC,EACpE;EAAC;EAAQ;EAAc;EAAQ,CAChC;;AAIH,SAAgB,EACd,GACqB;CACrB,IAAM,EAAE,WAAQ,sBAAmB,EAAW,EAAa;AAE3D,QAAO,QACC,IAAI,KAAK,eAAe,GAAQ;EAAE,GAAG;EAAgB,GAAG;EAAS,CAAC,EACxE;EAAC;EAAQ;EAAgB;EAAQ,CAClC;;AAIH,SAAgB,IAAmC;AACjD,QAAO,EAAW,EAAa,CAAC;;AAIlC,SAAgB,IAA2C;AACzD,QAAO,EAAW,EAAa,CAAC;;AAIlC,SAAgB,IAAmC;AACjD,QAAO,EAAW,EAAa,CAAC"}

package/dist/components/GnomeProvider/GnomeProvider.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./GnomeContext.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`);function r({locale:r,dir:i=`ltr`,numberFormat:a,dateTimeFormat:o,children:s}){let c=(0,t.useMemo)(()=>({locale:r,dir:i,numberFormat:a,dateTimeFormat:o}),[r,i,a,o]);return(0,n.jsx)(e.GnomeContext.Provider,{value:c,children:s})}exports.GnomeProvider=r;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./GnomeContext.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`);var r=new Set([`blue`,`green`,`yellow`,`orange`,`red`,`purple`,`brown`]);function i(){return typeof window<`u`&&window.matchMedia(`(prefers-color-scheme: dark)`).matches}function a({locale:a,dir:o=`ltr`,numberFormat:s,dateTimeFormat:c,colorScheme:l=`system`,accentColor:u=`blue`,children:d}){let[,f]=(0,t.useReducer)(e=>e+1,0);(0,t.useEffect)(()=>{if(l!==`system`)return;let e=window.matchMedia(`(prefers-color-scheme: dark)`);return e.addEventListener(`change`,f),()=>e.removeEventListener(`change`,f)},[l]),(0,t.useEffect)(()=>{let e=document.documentElement;l===`system`?e.removeAttribute(`data-theme`):e.setAttribute(`data-theme`,l)},[l]);let p=l===`system`?i()?`dark`:`light`:l;(0,t.useEffect)(()=>{let e=document.documentElement;if(u===`blue`){e.style.removeProperty(`--gnome-accent-color`),e.style.removeProperty(`--gnome-accent-bg-color`);return}if(r.has(u)){let t=p===`dark`?`2`:`3`;e.style.setProperty(`--gnome-accent-color`,`var(--gnome-${u}-${t})`),e.style.setProperty(`--gnome-accent-bg-color`,`var(--gnome-${u}-3)`)}else e.style.setProperty(`--gnome-accent-color`,u),e.style.setProperty(`--gnome-accent-bg-color`,u)},[u,p]);let m=(0,t.useMemo)(()=>({locale:a,dir:o,numberFormat:s,dateTimeFormat:c,colorScheme:l,resolvedColorScheme:p,accentColor:u}),[a,o,s,c,l,p,u]);return(0,n.jsx)(e.GnomeContext.Provider,{value:m,children:d})}exports.GnomeProvider=a;
 //# sourceMappingURL=GnomeProvider.cjs.map

package/dist/components/GnomeProvider/GnomeProvider.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GnomeProvider.cjs","names":[],"sources":["../../../src/components/GnomeProvider/GnomeProvider.tsx"],"sourcesContent":["import { useMemo, type ReactNode } from \"react\";\nimport { GnomeContext, type GnomeDir } from \"./GnomeContext\";\n\nexport interface GnomeProviderProps {\n /*\n BCP 47 locale tag (e.g. `\"es-ES\"`, `\"de-DE\"`).\n * When omitted, components fall back to the browser locale.\n /\n locale?: string;\n /* Text direction. Defaults to `\"ltr\"`. /\n dir?: GnomeDir;\n /\n Global defaults for number formatting.\n \n Use `{ notation: \"compact\", compactDisplay: \"short\" }` for compact\n * values such as `1K`; omit it or set `{ notation: \"standard\" }` for\n * full values such as `1,000`.\n /\n numberFormat?: Intl.NumberFormatOptions;\n /* Global defaults for date/time formatting. /\n dateTimeFormat?: Intl.DateTimeFormatOptions;\n children: ReactNode;\n}\n\n/* Provides locale ~~and~~ text direction to all descendant gnome-ui components. */\nexport function GnomeProvider({\n locale,\n dir = \"ltr\",\n numberFormat,\n dateTimeFormat,\n children,\n}: GnomeProviderProps) {\n const value = useMemo(\n () => ({ locale, dir, numberFormat, dateTimeFormat }),\n [locale, dir, numberFormat, dateTimeFormat],\n );\n\n return (\n <GnomeContext.Provider value={value}>\n {children}\n </GnomeContext.Provider>\n );\n}\n"],"mappings":"+~~JAyBA~~,SAAgB,EAAc,CAC5B,SACA,MAAM,MACN,eACA,iBACA,YACqB,CACrB,IAAM,GAAA,EAAA,EAAA,cACG,CAAE,SAAQ,MAAK,eAAc,iBAAgB,~~EACpD~~,CAAC,EAAQ,EAAK,EAAc,~~EAAe~~,~~CAC5C~~,CAED,OACE,EAAA,EAAA,KAAC,EAAA,aAAa,SAAd,CAA8B,QAC3B,WACqB,CAAA"}
1	+ {"version":3,"file":"GnomeProvider.cjs","names":[],"sources":["../../../src/components/GnomeProvider/GnomeProvider.tsx"],"sourcesContent":["import { useEffect, useMemo, useReducer, type ReactNode } from \"react\";\nimport {\n GnomeContext,\n type GnomeAccentColor,\n type GnomeColorScheme,\n type GnomeDir,\n} from \"./GnomeContext\";\n\nconst NAMED_ACCENT_COLORS = new Set<string>([\n \"blue\", \"green\", \"yellow\", \"orange\", \"red\", \"purple\", \"brown\",\n]);\n\nexport interface GnomeProviderProps {\n /*\n BCP 47 locale tag (e.g. `\"es-ES\"`, `\"de-DE\"`).\n * When omitted, components fall back to the browser locale.\n /\n locale?: string;\n /* Text direction. Defaults to `\"ltr\"`. /\n dir?: GnomeDir;\n /\n Global defaults for number formatting.\n \n Use `{ notation: \"compact\", compactDisplay: \"short\" }` for compact\n * values such as `1K`; omit it or set `{ notation: \"standard\" }` for\n * full values such as `1,000`.\n /\n numberFormat?: Intl.NumberFormatOptions;\n /* Global defaults for date/time formatting. /\n dateTimeFormat?: Intl.DateTimeFormatOptions;\n /\n Color scheme preference. When set to `\"system\"` (default), the OS\n * preference is respected via `prefers-color-scheme`. When set to\n * `\"light\"` or `\"dark\"`, the `data-theme` attribute is applied to\n * `document.documentElement` to force that theme.\n /\n colorScheme?: GnomeColorScheme;\n /\n Accent color. Accepts a named GNOME palette color (`\"blue\"`, `\"green\"`,\n * `\"yellow\"`, `\"orange\"`, `\"red\"`, `\"purple\"`, `\"brown\"`) or any CSS color\n * string (e.g. `\"#ff0000\"`). Named colors are theme-aware and use the\n * correct shade for light/dark mode automatically. Defaults to `\"blue\"`.\n /\n accentColor?: GnomeAccentColor;\n children: ReactNode;\n}\n\nfunction getSystemIsDark(): boolean {\n return typeof window !== \"undefined\" &&\n window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n}\n\n/* Provides locale, text direction, color scheme, and accent color to all descendant gnome-ui components. */\nexport function GnomeProvider({\n locale,\n dir = \"ltr\",\n numberFormat,\n dateTimeFormat,\n colorScheme = \"system\",\n accentColor = \"blue\",\n children,\n}: GnomeProviderProps) {\n const [, forceUpdate] = useReducer((n: number) => n + 1, 0);\n\n useEffect(() => {\n if (colorScheme !== \"system\") return;\n const mq = window.matchMedia(\"(prefers-color-scheme: dark)\");\n mq.addEventListener(\"change\", forceUpdate);\n return () => mq.removeEventListener(\"change\", forceUpdate);\n }, [colorScheme]);\n\n useEffect(() => {\n const root = document.documentElement;\n if (colorScheme === \"system\") {\n root.removeAttribute(\"data-theme\");\n } else {\n root.setAttribute(\"data-theme\", colorScheme);\n }\n }, [colorScheme]);\n\n const resolvedColorScheme = colorScheme === \"system\"\n ? (getSystemIsDark() ? \"dark\" : \"light\")\n : colorScheme;\n\n useEffect(() => {\n const root = document.documentElement;\n if (accentColor === \"blue\") {\n root.style.removeProperty(\"--gnome-accent-color\");\n root.style.removeProperty(\"--gnome-accent-bg-color\");\n return;\n }\n if (NAMED_ACCENT_COLORS.has(accentColor)) {\n const shade = resolvedColorScheme === \"dark\" ? \"2\" : \"3\";\n root.style.setProperty(\"--gnome-accent-color\", `var(--gnome-${accentColor}-${shade})`);\n root.style.setProperty(\"--gnome-accent-bg-color\", `var(--gnome-${accentColor}-3)`);\n } else {\n root.style.setProperty(\"--gnome-accent-color\", accentColor);\n root.style.setProperty(\"--gnome-accent-bg-color\", accentColor);\n }\n }, [accentColor, resolvedColorScheme]);\n\n const value = useMemo(\n () => ({ locale, dir, numberFormat, dateTimeFormat, colorScheme, resolvedColorScheme, accentColor }),\n [locale, dir, numberFormat, dateTimeFormat, colorScheme, resolvedColorScheme, accentColor],\n );\n\n return (\n <GnomeContext.Provider value={value}>\n {children}\n </GnomeContext.Provider>\n );\n}\n"],"mappings":"+JAQA,IAAM,EAAsB,IAAI,IAAY,CAC1C,OAAQ,QAAS,SAAU,SAAU,MAAO,SAAU,QACvD,CAAC,CAqCF,SAAS,GAA2B,CAClC,OAAO,OAAO,OAAW,KACvB,OAAO,WAAW,+BAA+B,CAAC,QAItD,SAAgB,EAAc,CAC5B,SACA,MAAM,MACN,eACA,iBACA,cAAc,SACd,cAAc,OACd,YACqB,CACrB,GAAM,EAAG,IAAA,EAAA,EAAA,YAA2B,GAAc,EAAI,EAAG,EAAE,EAE3D,EAAA,EAAA,eAAgB,CACd,GAAI,IAAgB,SAAU,OAC9B,IAAM,EAAK,OAAO,WAAW,+BAA+B,CAE5D,OADA,EAAG,iBAAiB,SAAU,EAAY,KAC7B,EAAG,oBAAoB,SAAU,EAAY,EACzD,CAAC,EAAY,CAAC,EAEjB,EAAA,EAAA,eAAgB,CACd,IAAM,EAAO,SAAS,gBAClB,IAAgB,SAClB,EAAK,gBAAgB,aAAa,CAElC,EAAK,aAAa,aAAc,EAAY,EAE7C,CAAC,EAAY,CAAC,CAEjB,IAAM,EAAsB,IAAgB,SACvC,GAAiB,CAAG,OAAS,QAC9B,GAEJ,EAAA,EAAA,eAAgB,CACd,IAAM,EAAO,SAAS,gBACtB,GAAI,IAAgB,OAAQ,CAC1B,EAAK,MAAM,eAAe,uBAAuB,CACjD,EAAK,MAAM,eAAe,0BAA0B,CACpD,OAEF,GAAI,EAAoB,IAAI,EAAY,CAAE,CACxC,IAAM,EAAQ,IAAwB,OAAS,IAAM,IACrD,EAAK,MAAM,YAAY,uBAAwB,eAAe,EAAY,GAAG,EAAM,GAAG,CACtF,EAAK,MAAM,YAAY,0BAA2B,eAAe,EAAY,KAAK,MAElF,EAAK,MAAM,YAAY,uBAAwB,EAAY,CAC3D,EAAK,MAAM,YAAY,0BAA2B,EAAY,EAE/D,CAAC,EAAa,EAAoB,CAAC,CAEtC,IAAM,GAAA,EAAA,EAAA,cACG,CAAE,SAAQ,MAAK,eAAc,iBAAgB,cAAa,sBAAqB,cAAa,EACnG,CAAC,EAAQ,EAAK,EAAc,EAAgB,EAAa,EAAqB,EAAY,CAC3F,CAED,OACE,EAAA,EAAA,KAAC,EAAA,aAAa,SAAd,CAA8B,QAC3B,WACqB,CAAA"}

package/dist/components/GnomeProvider/GnomeProvider.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { GnomeDir } from './GnomeContext';
+import { GnomeAccentColor, GnomeColorScheme, GnomeDir } from './GnomeContext';
 export interface GnomeProviderProps {
     /**
      * BCP 47 locale tag (e.g. `"es-ES"`, `"de-DE"`).
@@ -18,7 +18,21 @@ export interface GnomeProviderProps {
     numberFormat?: Intl.NumberFormatOptions;
     /** Global defaults for date/time formatting. */
     dateTimeFormat?: Intl.DateTimeFormatOptions;
+    /**
+     * Color scheme preference. When set to `"system"` (default), the OS
+     * preference is respected via `prefers-color-scheme`. When set to
+     * `"light"` or `"dark"`, the `data-theme` attribute is applied to
+     * `document.documentElement` to force that theme.
+     */
+    colorScheme?: GnomeColorScheme;
+    /**
+     * Accent color. Accepts a named GNOME palette color (`"blue"`, `"green"`,
+     * `"yellow"`, `"orange"`, `"red"`, `"purple"`, `"brown"`) or any CSS color
+     * string (e.g. `"#ff0000"`). Named colors are theme-aware and use the
+     * correct shade for light/dark mode automatically. Defaults to `"blue"`.
+     */
+    accentColor?: GnomeAccentColor;
     children: ReactNode;
 }
-/** Provides locale and text direction to all descendant gnome-ui components. */
-export declare function GnomeProvider({ locale, dir, numberFormat, dateTimeFormat, children, }: GnomeProviderProps): import("react/jsx-runtime").JSX.Element;
+/** Provides locale, text direction, color scheme, and accent color to all descendant gnome-ui components. */
+export declare function GnomeProvider({ locale, dir, numberFormat, dateTimeFormat, colorScheme, accentColor, children, }: GnomeProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/GnomeProvider/GnomeProvider.js CHANGED Viewed

@@ -1,25 +1,64 @@
 import { GnomeContext as e } from "./GnomeContext.js";
-import { useMemo as t } from "react";
-import { jsx as n } from "react/jsx-runtime";
+import { useEffect as t, useMemo as n, useReducer as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
 //#region src/components/GnomeProvider/GnomeProvider.tsx
-function r({ locale: r, dir: i = "ltr", numberFormat: a, dateTimeFormat: o, children: s }) {
-	let c = t(() => ({
-		locale: r,
-		dir: i,
-		numberFormat: a,
-		dateTimeFormat: o
+var a = new Set([
+	"blue",
+	"green",
+	"yellow",
+	"orange",
+	"red",
+	"purple",
+	"brown"
+]);
+function o() {
+	return typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function s({ locale: s, dir: c = "ltr", numberFormat: l, dateTimeFormat: u, colorScheme: d = "system", accentColor: f = "blue", children: p }) {
+	let [, m] = r((e) => e + 1, 0);
+	t(() => {
+		if (d !== "system") return;
+		let e = window.matchMedia("(prefers-color-scheme: dark)");
+		return e.addEventListener("change", m), () => e.removeEventListener("change", m);
+	}, [d]), t(() => {
+		let e = document.documentElement;
+		d === "system" ? e.removeAttribute("data-theme") : e.setAttribute("data-theme", d);
+	}, [d]);
+	let h = d === "system" ? o() ? "dark" : "light" : d;
+	t(() => {
+		let e = document.documentElement;
+		if (f === "blue") {
+			e.style.removeProperty("--gnome-accent-color"), e.style.removeProperty("--gnome-accent-bg-color");
+			return;
+		}
+		if (a.has(f)) {
+			let t = h === "dark" ? "2" : "3";
+			e.style.setProperty("--gnome-accent-color", `var(--gnome-${f}-${t})`), e.style.setProperty("--gnome-accent-bg-color", `var(--gnome-${f}-3)`);
+		} else e.style.setProperty("--gnome-accent-color", f), e.style.setProperty("--gnome-accent-bg-color", f);
+	}, [f, h]);
+	let g = n(() => ({
+		locale: s,
+		dir: c,
+		numberFormat: l,
+		dateTimeFormat: u,
+		colorScheme: d,
+		resolvedColorScheme: h,
+		accentColor: f
 	}), [
-		r,
-		i,
-		a,
-		o
+		s,
+		c,
+		l,
+		u,
+		d,
+		h,
+		f
 	]);
-	return /* @__PURE__ */ n(e.Provider, {
-		value: c,
-		children: s
+	return /* @__PURE__ */ i(e.Provider, {
+		value: g,
+		children: p
 	});
 }
 //#endregion
-export { r as GnomeProvider };
+export { s as GnomeProvider };
 //# sourceMappingURL=GnomeProvider.js.map

package/dist/components/GnomeProvider/GnomeProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GnomeProvider.js","names":[],"sources":["../../../src/components/GnomeProvider/GnomeProvider.tsx"],"sourcesContent":["import { useMemo, type ReactNode } from \"react\";\nimport { GnomeContext, type GnomeDir } from \"./GnomeContext\";\n\nexport interface GnomeProviderProps {\n /*\n BCP 47 locale tag (e.g. `\"es-ES\"`, `\"de-DE\"`).\n * When omitted, components fall back to the browser locale.\n /\n locale?: string;\n /* Text direction. Defaults to `\"ltr\"`. /\n dir?: GnomeDir;\n /\n Global defaults for number formatting.\n \n Use `{ notation: \"compact\", compactDisplay: \"short\" }` for compact\n * values such as `1K`; omit it or set `{ notation: \"standard\" }` for\n * full values such as `1,000`.\n /\n numberFormat?: Intl.NumberFormatOptions;\n /* Global defaults for date/time formatting. /\n dateTimeFormat?: Intl.DateTimeFormatOptions;\n children: ReactNode;\n}\n\n/* Provides locale ~~and~~ text direction to all descendant gnome-ui components. */\nexport function GnomeProvider({\n locale,\n dir = \"ltr\",\n numberFormat,\n dateTimeFormat,\n children,\n}: GnomeProviderProps) {\n const value = useMemo(\n () => ({ locale, dir, numberFormat, dateTimeFormat }),\n [locale, dir, numberFormat, dateTimeFormat],\n );\n\n return (\n <GnomeContext.Provider value={value}>\n {children}\n </GnomeContext.Provider>\n );\n}\n"],"mappings":";;;;~~AAyBA~~,SAAgB,EAAc,EAC5B,WACA,SAAM,OACN,iBACA,mBACA,eACqB;CACrB,IAAM,IAAQ,SACL;EAAE;EAAQ;EAAK;EAAc;EAAgB,~~GACpD~~;EAAC;EAAQ;EAAK;EAAc;~~EAAe~~,~~CAC5C~~;AAED,QACE,kBAAC,EAAa,UAAd;EAA8B;EAC3B;EACqB,CAAA"}
1	+ {"version":3,"file":"GnomeProvider.js","names":[],"sources":["../../../src/components/GnomeProvider/GnomeProvider.tsx"],"sourcesContent":["import { useEffect, useMemo, useReducer, type ReactNode } from \"react\";\nimport {\n GnomeContext,\n type GnomeAccentColor,\n type GnomeColorScheme,\n type GnomeDir,\n} from \"./GnomeContext\";\n\nconst NAMED_ACCENT_COLORS = new Set<string>([\n \"blue\", \"green\", \"yellow\", \"orange\", \"red\", \"purple\", \"brown\",\n]);\n\nexport interface GnomeProviderProps {\n /*\n BCP 47 locale tag (e.g. `\"es-ES\"`, `\"de-DE\"`).\n * When omitted, components fall back to the browser locale.\n /\n locale?: string;\n /* Text direction. Defaults to `\"ltr\"`. /\n dir?: GnomeDir;\n /\n Global defaults for number formatting.\n \n Use `{ notation: \"compact\", compactDisplay: \"short\" }` for compact\n * values such as `1K`; omit it or set `{ notation: \"standard\" }` for\n * full values such as `1,000`.\n /\n numberFormat?: Intl.NumberFormatOptions;\n /* Global defaults for date/time formatting. /\n dateTimeFormat?: Intl.DateTimeFormatOptions;\n /\n Color scheme preference. When set to `\"system\"` (default), the OS\n * preference is respected via `prefers-color-scheme`. When set to\n * `\"light\"` or `\"dark\"`, the `data-theme` attribute is applied to\n * `document.documentElement` to force that theme.\n /\n colorScheme?: GnomeColorScheme;\n /\n Accent color. Accepts a named GNOME palette color (`\"blue\"`, `\"green\"`,\n * `\"yellow\"`, `\"orange\"`, `\"red\"`, `\"purple\"`, `\"brown\"`) or any CSS color\n * string (e.g. `\"#ff0000\"`). Named colors are theme-aware and use the\n * correct shade for light/dark mode automatically. Defaults to `\"blue\"`.\n /\n accentColor?: GnomeAccentColor;\n children: ReactNode;\n}\n\nfunction getSystemIsDark(): boolean {\n return typeof window !== \"undefined\" &&\n window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n}\n\n/* Provides locale, text direction, color scheme, and accent color to all descendant gnome-ui components. */\nexport function GnomeProvider({\n locale,\n dir = \"ltr\",\n numberFormat,\n dateTimeFormat,\n colorScheme = \"system\",\n accentColor = \"blue\",\n children,\n}: GnomeProviderProps) {\n const [, forceUpdate] = useReducer((n: number) => n + 1, 0);\n\n useEffect(() => {\n if (colorScheme !== \"system\") return;\n const mq = window.matchMedia(\"(prefers-color-scheme: dark)\");\n mq.addEventListener(\"change\", forceUpdate);\n return () => mq.removeEventListener(\"change\", forceUpdate);\n }, [colorScheme]);\n\n useEffect(() => {\n const root = document.documentElement;\n if (colorScheme === \"system\") {\n root.removeAttribute(\"data-theme\");\n } else {\n root.setAttribute(\"data-theme\", colorScheme);\n }\n }, [colorScheme]);\n\n const resolvedColorScheme = colorScheme === \"system\"\n ? (getSystemIsDark() ? \"dark\" : \"light\")\n : colorScheme;\n\n useEffect(() => {\n const root = document.documentElement;\n if (accentColor === \"blue\") {\n root.style.removeProperty(\"--gnome-accent-color\");\n root.style.removeProperty(\"--gnome-accent-bg-color\");\n return;\n }\n if (NAMED_ACCENT_COLORS.has(accentColor)) {\n const shade = resolvedColorScheme === \"dark\" ? \"2\" : \"3\";\n root.style.setProperty(\"--gnome-accent-color\", `var(--gnome-${accentColor}-${shade})`);\n root.style.setProperty(\"--gnome-accent-bg-color\", `var(--gnome-${accentColor}-3)`);\n } else {\n root.style.setProperty(\"--gnome-accent-color\", accentColor);\n root.style.setProperty(\"--gnome-accent-bg-color\", accentColor);\n }\n }, [accentColor, resolvedColorScheme]);\n\n const value = useMemo(\n () => ({ locale, dir, numberFormat, dateTimeFormat, colorScheme, resolvedColorScheme, accentColor }),\n [locale, dir, numberFormat, dateTimeFormat, colorScheme, resolvedColorScheme, accentColor],\n );\n\n return (\n <GnomeContext.Provider value={value}>\n {children}\n </GnomeContext.Provider>\n );\n}\n"],"mappings":";;;;AAQA,IAAM,IAAsB,IAAI,IAAY;CAC1C;CAAQ;CAAS;CAAU;CAAU;CAAO;CAAU;CACvD,CAAC;AAqCF,SAAS,IAA2B;AAClC,QAAO,OAAO,SAAW,OACvB,OAAO,WAAW,+BAA+B,CAAC;;AAItD,SAAgB,EAAc,EAC5B,WACA,SAAM,OACN,iBACA,mBACA,iBAAc,UACd,iBAAc,QACd,eACqB;CACrB,IAAM,GAAG,KAAe,GAAY,MAAc,IAAI,GAAG,EAAE;AAS3D,CAPA,QAAgB;AACd,MAAI,MAAgB,SAAU;EAC9B,IAAM,IAAK,OAAO,WAAW,+BAA+B;AAE5D,SADA,EAAG,iBAAiB,UAAU,EAAY,QAC7B,EAAG,oBAAoB,UAAU,EAAY;IACzD,CAAC,EAAY,CAAC,EAEjB,QAAgB;EACd,IAAM,IAAO,SAAS;AACtB,EAAI,MAAgB,WAClB,EAAK,gBAAgB,aAAa,GAElC,EAAK,aAAa,cAAc,EAAY;IAE7C,CAAC,EAAY,CAAC;CAEjB,IAAM,IAAsB,MAAgB,WACvC,GAAiB,GAAG,SAAS,UAC9B;AAEJ,SAAgB;EACd,IAAM,IAAO,SAAS;AACtB,MAAI,MAAgB,QAAQ;AAE1B,GADA,EAAK,MAAM,eAAe,uBAAuB,EACjD,EAAK,MAAM,eAAe,0BAA0B;AACpD;;AAEF,MAAI,EAAoB,IAAI,EAAY,EAAE;GACxC,IAAM,IAAQ,MAAwB,SAAS,MAAM;AAErD,GADA,EAAK,MAAM,YAAY,wBAAwB,eAAe,EAAY,GAAG,EAAM,GAAG,EACtF,EAAK,MAAM,YAAY,2BAA2B,eAAe,EAAY,KAAK;QAGlF,CADA,EAAK,MAAM,YAAY,wBAAwB,EAAY,EAC3D,EAAK,MAAM,YAAY,2BAA2B,EAAY;IAE/D,CAAC,GAAa,EAAoB,CAAC;CAEtC,IAAM,IAAQ,SACL;EAAE;EAAQ;EAAK;EAAc;EAAgB;EAAa;EAAqB;EAAa,GACnG;EAAC;EAAQ;EAAK;EAAc;EAAgB;EAAa;EAAqB;EAAY,CAC3F;AAED,QACE,kBAAC,EAAa,UAAd;EAA8B;EAC3B;EACqB,CAAA"}

package/dist/components/Icon/Icon.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-let e=require(`react/jsx-runtime`);var t={sm:12,md:16,lg:20};function n(e){return`paths`in e&&Array.isArray(e.paths)}function r({icon:r,size:i=`md`,label:a,width:o,height:s,...c}){let l=t[i],u=n(r)?r.viewBox:r.viewBox??`0 0 24 24`,d=n(r)?r.paths.map((t,n)=>(0,e.jsx)(`path`,{d:t.d,fillRule:t.fillRule,clipRule:t.clipRule},n)):[(0,e.jsx)(`path`,{d:r.path},0)];return(0,e.jsx)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:u,width:o??l,height:s??l,fill:`currentColor`,"aria-label":a,"aria-hidden":a?void 0:!0,role:a?`img`:void 0,focusable:`false`,...c,children:d})}exports.Icon=r;
+let e=require(`react/jsx-runtime`);var t={sm:12,md:16,lg:20};function n(e){return`paths`in e&&Array.isArray(e.paths)}function r({icon:r,size:i=`md`,label:a,width:o,height:s,...c}){let l=t[i],u=n(r)?r.viewBox:r.viewBox??`0 0 24 24`,d=n(r)?r.paths.map((t,n)=>(0,e.jsx)(`path`,{d:t.d,fillRule:t.fillRule,clipRule:t.clipRule,transform:t.transform},n)):[(0,e.jsx)(`path`,{d:r.path},0)];return(0,e.jsx)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:u,width:o??l,height:s??l,fill:`currentColor`,"aria-label":a,"aria-hidden":a?void 0:!0,role:a?`img`:void 0,focusable:`false`,...c,children:d})}exports.Icon=r;
 //# sourceMappingURL=Icon.cjs.map

package/dist/components/Icon/Icon.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Icon.cjs","names":[],"sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { SVGAttributes } from \"react\";\nimport type { AnyIconDefinition, IconDefinition } from \"@gnome-ui/icons\";\n\nexport type IconSize = \"sm\" \| \"md\" \| \"lg\";\n\nexport interface IconProps extends SVGAttributes<SVGSVGElement> {\n /** Icon from `@gnome-ui/icons`, a `simple-icons` icon, or a raw `{ path }` object. /\n icon: AnyIconDefinition;\n /\n Rendered size.\n * - `sm` — 12 px\n * - `md` — 16 px (default)\n * - `lg` — 20 px\n \n Override with `width`/`height` for non-standard sizes.\n /\n size?: IconSize;\n /* Accessible label. Omit for decorative icons — they are hidden from screen readers. /\n label?: string;\n}\n\nconst SIZE_MAP: Record<IconSize, number> = { sm: 12, md: 16, lg: 20 };\n\nfunction isIconDefinition(icon: AnyIconDefinition): icon is IconDefinition {\n // When an object has both `path` and `paths`, `paths` wins.\n return \"paths\" in icon && Array.isArray((icon as IconDefinition).paths);\n}\n\n/\n Renders an icon as an inline SVG.\n \n Accepts icons from `@gnome-ui/icons`, any `simple-icons` icon, or a plain\n * `{ path }` object. Uses `currentColor` so the icon inherits the text color\n * of its parent. Pass `label` only when the icon conveys meaning on its own.\n \n @example\n * import { Search } from \"@gnome-ui/icons\";\n * <Icon icon={Search} label=\"Search\" />\n \n @example\n * import { siGithub } from \"simple-icons\";\n * <Icon icon={siGithub} label=\"GitHub\" />\n */\nexport function Icon({\n icon,\n size = \"md\",\n label,\n width,\n height,\n ...props\n}: IconProps) {\n const px = SIZE_MAP[size];\n\n const resolvedViewBox = isIconDefinition(icon)\n ? icon.viewBox\n : (icon.viewBox ?? \"0 0 24 24\");\n\n const paths = isIconDefinition(icon)\n ? icon.paths.map((p, i) => (\n <path key={i} d={p.d} fillRule={p.fillRule} clipRule={p.clipRule} />\n ))\n : [<path key={0} d={icon.path} />];\n\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox={resolvedViewBox}\n width={width ?? px}\n height={height ?? px}\n fill=\"currentColor\"\n aria-label={label}\n aria-hidden={label ? undefined : true}\n role={label ? \"img\" : undefined}\n focusable=\"false\"\n {...props}\n >\n {paths}\n </svg>\n );\n}\n"],"mappings":"mCAqBA,IAAM,EAAqC,CAAE,GAAI,GAAI,GAAI,GAAI,GAAI,GAAI,CAErE,SAAS,EAAiB,EAAiD,CAEzE,MAAO,UAAW,GAAQ,MAAM,QAAS,EAAwB,MAAM,CAkBzE,SAAgB,EAAK,CACnB,OACA,OAAO,KACP,QACA,QACA,SACA,GAAG,GACS,CACZ,IAAM,EAAK,EAAS,GAEd,EAAkB,EAAiB,EAAK,CAC1C,EAAK,QACJ,EAAK,SAAW,YAEf,EAAQ,EAAiB,EAAK,CAChC,EAAK,MAAM,KAAK,EAAG,KACjB,EAAA,EAAA,KAAC,OAAD,CAAc,EAAG,EAAE,EAAG,SAAU,EAAE,SAAU,SAAU,EAAE,~~SAAY~~,~~CAAzD~~,~~EAAyD~~,~~CACpE~~,CACF,EAAC,EAAA,EAAA,KAAC,OAAD,CAAc,EAAG,EAAK,KAAQ,CAAnB,EAAmB,CAAC,CAEpC,OACE,EAAA,EAAA,KAAC,MAAD,CACE,MAAM,6BACN,QAAS,EACT,MAAO,GAAS,EAChB,OAAQ,GAAU,EAClB,KAAK,eACL,aAAY,EACZ,cAAa,EAAQ,IAAA,GAAY,GACjC,KAAM,EAAQ,MAAQ,IAAA,GACtB,UAAU,QACV,GAAI,WAEH,EACG,CAAA"}
1	+ {"version":3,"file":"Icon.cjs","names":[],"sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { SVGAttributes } from \"react\";\nimport type { AnyIconDefinition, IconDefinition } from \"@gnome-ui/icons\";\n\nexport type IconSize = \"sm\" \| \"md\" \| \"lg\";\n\nexport interface IconProps extends SVGAttributes<SVGSVGElement> {\n /** Icon from `@gnome-ui/icons`, a `simple-icons` icon, or a raw `{ path }` object. /\n icon: AnyIconDefinition;\n /\n Rendered size.\n * - `sm` — 12 px\n * - `md` — 16 px (default)\n * - `lg` — 20 px\n \n Override with `width`/`height` for non-standard sizes.\n /\n size?: IconSize;\n /* Accessible label. Omit for decorative icons — they are hidden from screen readers. /\n label?: string;\n}\n\nconst SIZE_MAP: Record<IconSize, number> = { sm: 12, md: 16, lg: 20 };\n\nfunction isIconDefinition(icon: AnyIconDefinition): icon is IconDefinition {\n // When an object has both `path` and `paths`, `paths` wins.\n return \"paths\" in icon && Array.isArray((icon as IconDefinition).paths);\n}\n\n/\n Renders an icon as an inline SVG.\n \n Accepts icons from `@gnome-ui/icons`, any `simple-icons` icon, or a plain\n * `{ path }` object. Uses `currentColor` so the icon inherits the text color\n * of its parent. Pass `label` only when the icon conveys meaning on its own.\n \n @example\n * import { Search } from \"@gnome-ui/icons\";\n * <Icon icon={Search} label=\"Search\" />\n \n @example\n * import { siGithub } from \"simple-icons\";\n * <Icon icon={siGithub} label=\"GitHub\" />\n */\nexport function Icon({\n icon,\n size = \"md\",\n label,\n width,\n height,\n ...props\n}: IconProps) {\n const px = SIZE_MAP[size];\n\n const resolvedViewBox = isIconDefinition(icon)\n ? icon.viewBox\n : (icon.viewBox ?? \"0 0 24 24\");\n\n const paths = isIconDefinition(icon)\n ? icon.paths.map((p, i) => (\n <path key={i} d={p.d} fillRule={p.fillRule} clipRule={p.clipRule} transform={p.transform} />\n ))\n : [<path key={0} d={icon.path} />];\n\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox={resolvedViewBox}\n width={width ?? px}\n height={height ?? px}\n fill=\"currentColor\"\n aria-label={label}\n aria-hidden={label ? undefined : true}\n role={label ? \"img\" : undefined}\n focusable=\"false\"\n {...props}\n >\n {paths}\n </svg>\n );\n}\n"],"mappings":"mCAqBA,IAAM,EAAqC,CAAE,GAAI,GAAI,GAAI,GAAI,GAAI,GAAI,CAErE,SAAS,EAAiB,EAAiD,CAEzE,MAAO,UAAW,GAAQ,MAAM,QAAS,EAAwB,MAAM,CAkBzE,SAAgB,EAAK,CACnB,OACA,OAAO,KACP,QACA,QACA,SACA,GAAG,GACS,CACZ,IAAM,EAAK,EAAS,GAEd,EAAkB,EAAiB,EAAK,CAC1C,EAAK,QACJ,EAAK,SAAW,YAEf,EAAQ,EAAiB,EAAK,CAChC,EAAK,MAAM,KAAK,EAAG,KACjB,EAAA,EAAA,KAAC,OAAD,CAAc,EAAG,EAAE,EAAG,SAAU,EAAE,SAAU,SAAU,EAAE,SAAU,UAAW,EAAE,UAAa,CAAjF,EAAiF,CAC5F,CACF,EAAC,EAAA,EAAA,KAAC,OAAD,CAAc,EAAG,EAAK,KAAQ,CAAnB,EAAmB,CAAC,CAEpC,OACE,EAAA,EAAA,KAAC,MAAD,CACE,MAAM,6BACN,QAAS,EACT,MAAO,GAAS,EAChB,OAAQ,GAAU,EAClB,KAAK,eACL,aAAY,EACZ,cAAa,EAAQ,IAAA,GAAY,GACjC,KAAM,EAAQ,MAAQ,IAAA,GACtB,UAAU,QACV,GAAI,WAEH,EACG,CAAA"}

package/dist/components/Icon/Icon.js CHANGED Viewed

@@ -12,7 +12,8 @@ function r({ icon: r, size: i = "md", label: a, width: o, height: s, ...c }) {
 	let l = t[i], u = n(r) ? r.viewBox : r.viewBox ?? "0 0 24 24", d = n(r) ? r.paths.map((t, n) => /* @__PURE__ */ e("path", {
 		d: t.d,
 		fillRule: t.fillRule,
-		clipRule: t.clipRule
+		clipRule: t.clipRule,
+		transform: t.transform
 	}, n)) : [/* @__PURE__ */ e("path", { d: r.path }, 0)];
 	return /* @__PURE__ */ e("svg", {
 		xmlns: "http://www.w3.org/2000/svg",

package/dist/components/Icon/Icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Icon.js","names":[],"sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { SVGAttributes } from \"react\";\nimport type { AnyIconDefinition, IconDefinition } from \"@gnome-ui/icons\";\n\nexport type IconSize = \"sm\" \| \"md\" \| \"lg\";\n\nexport interface IconProps extends SVGAttributes<SVGSVGElement> {\n /** Icon from `@gnome-ui/icons`, a `simple-icons` icon, or a raw `{ path }` object. /\n icon: AnyIconDefinition;\n /\n Rendered size.\n * - `sm` — 12 px\n * - `md` — 16 px (default)\n * - `lg` — 20 px\n \n Override with `width`/`height` for non-standard sizes.\n /\n size?: IconSize;\n /* Accessible label. Omit for decorative icons — they are hidden from screen readers. /\n label?: string;\n}\n\nconst SIZE_MAP: Record<IconSize, number> = { sm: 12, md: 16, lg: 20 };\n\nfunction isIconDefinition(icon: AnyIconDefinition): icon is IconDefinition {\n // When an object has both `path` and `paths`, `paths` wins.\n return \"paths\" in icon && Array.isArray((icon as IconDefinition).paths);\n}\n\n/\n Renders an icon as an inline SVG.\n \n Accepts icons from `@gnome-ui/icons`, any `simple-icons` icon, or a plain\n * `{ path }` object. Uses `currentColor` so the icon inherits the text color\n * of its parent. Pass `label` only when the icon conveys meaning on its own.\n \n @example\n * import { Search } from \"@gnome-ui/icons\";\n * <Icon icon={Search} label=\"Search\" />\n \n @example\n * import { siGithub } from \"simple-icons\";\n * <Icon icon={siGithub} label=\"GitHub\" />\n */\nexport function Icon({\n icon,\n size = \"md\",\n label,\n width,\n height,\n ...props\n}: IconProps) {\n const px = SIZE_MAP[size];\n\n const resolvedViewBox = isIconDefinition(icon)\n ? icon.viewBox\n : (icon.viewBox ?? \"0 0 24 24\");\n\n const paths = isIconDefinition(icon)\n ? icon.paths.map((p, i) => (\n <path key={i} d={p.d} fillRule={p.fillRule} clipRule={p.clipRule} />\n ))\n : [<path key={0} d={icon.path} />];\n\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox={resolvedViewBox}\n width={width ?? px}\n height={height ?? px}\n fill=\"currentColor\"\n aria-label={label}\n aria-hidden={label ? undefined : true}\n role={label ? \"img\" : undefined}\n focusable=\"false\"\n {...props}\n >\n {paths}\n </svg>\n );\n}\n"],"mappings":";;AAqBA,IAAM,IAAqC;CAAE,IAAI;CAAI,IAAI;CAAI,IAAI;CAAI;AAErE,SAAS,EAAiB,GAAiD;AAEzE,QAAO,WAAW,KAAQ,MAAM,QAAS,EAAwB,MAAM;;AAkBzE,SAAgB,EAAK,EACnB,SACA,UAAO,MACP,UACA,UACA,WACA,GAAG,KACS;CACZ,IAAM,IAAK,EAAS,IAEd,IAAkB,EAAiB,EAAK,GAC1C,EAAK,UACJ,EAAK,WAAW,aAEf,IAAQ,EAAiB,EAAK,GAChC,EAAK,MAAM,KAAK,GAAG,MACjB,kBAAC,QAAD;EAAc,GAAG,EAAE;EAAG,UAAU,EAAE;EAAU,UAAU,EAAE;~~EAAY~~,~~EAAzD~~,~~EAAyD~~,~~CACpE~~,GACF,CAAC,kBAAC,QAAD,EAAc,GAAG,EAAK,MAAQ,EAAnB,EAAmB,CAAC;AAEpC,QACE,kBAAC,OAAD;EACE,OAAM;EACN,SAAS;EACT,OAAO,KAAS;EAChB,QAAQ,KAAU;EAClB,MAAK;EACL,cAAY;EACZ,eAAa,IAAQ,KAAA,IAAY;EACjC,MAAM,IAAQ,QAAQ,KAAA;EACtB,WAAU;EACV,GAAI;YAEH;EACG,CAAA"}
1	+ {"version":3,"file":"Icon.js","names":[],"sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { SVGAttributes } from \"react\";\nimport type { AnyIconDefinition, IconDefinition } from \"@gnome-ui/icons\";\n\nexport type IconSize = \"sm\" \| \"md\" \| \"lg\";\n\nexport interface IconProps extends SVGAttributes<SVGSVGElement> {\n /** Icon from `@gnome-ui/icons`, a `simple-icons` icon, or a raw `{ path }` object. /\n icon: AnyIconDefinition;\n /\n Rendered size.\n * - `sm` — 12 px\n * - `md` — 16 px (default)\n * - `lg` — 20 px\n \n Override with `width`/`height` for non-standard sizes.\n /\n size?: IconSize;\n /* Accessible label. Omit for decorative icons — they are hidden from screen readers. /\n label?: string;\n}\n\nconst SIZE_MAP: Record<IconSize, number> = { sm: 12, md: 16, lg: 20 };\n\nfunction isIconDefinition(icon: AnyIconDefinition): icon is IconDefinition {\n // When an object has both `path` and `paths`, `paths` wins.\n return \"paths\" in icon && Array.isArray((icon as IconDefinition).paths);\n}\n\n/\n Renders an icon as an inline SVG.\n \n Accepts icons from `@gnome-ui/icons`, any `simple-icons` icon, or a plain\n * `{ path }` object. Uses `currentColor` so the icon inherits the text color\n * of its parent. Pass `label` only when the icon conveys meaning on its own.\n \n @example\n * import { Search } from \"@gnome-ui/icons\";\n * <Icon icon={Search} label=\"Search\" />\n \n @example\n * import { siGithub } from \"simple-icons\";\n * <Icon icon={siGithub} label=\"GitHub\" />\n */\nexport function Icon({\n icon,\n size = \"md\",\n label,\n width,\n height,\n ...props\n}: IconProps) {\n const px = SIZE_MAP[size];\n\n const resolvedViewBox = isIconDefinition(icon)\n ? icon.viewBox\n : (icon.viewBox ?? \"0 0 24 24\");\n\n const paths = isIconDefinition(icon)\n ? icon.paths.map((p, i) => (\n <path key={i} d={p.d} fillRule={p.fillRule} clipRule={p.clipRule} transform={p.transform} />\n ))\n : [<path key={0} d={icon.path} />];\n\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox={resolvedViewBox}\n width={width ?? px}\n height={height ?? px}\n fill=\"currentColor\"\n aria-label={label}\n aria-hidden={label ? undefined : true}\n role={label ? \"img\" : undefined}\n focusable=\"false\"\n {...props}\n >\n {paths}\n </svg>\n );\n}\n"],"mappings":";;AAqBA,IAAM,IAAqC;CAAE,IAAI;CAAI,IAAI;CAAI,IAAI;CAAI;AAErE,SAAS,EAAiB,GAAiD;AAEzE,QAAO,WAAW,KAAQ,MAAM,QAAS,EAAwB,MAAM;;AAkBzE,SAAgB,EAAK,EACnB,SACA,UAAO,MACP,UACA,UACA,WACA,GAAG,KACS;CACZ,IAAM,IAAK,EAAS,IAEd,IAAkB,EAAiB,EAAK,GAC1C,EAAK,UACJ,EAAK,WAAW,aAEf,IAAQ,EAAiB,EAAK,GAChC,EAAK,MAAM,KAAK,GAAG,MACjB,kBAAC,QAAD;EAAc,GAAG,EAAE;EAAG,UAAU,EAAE;EAAU,UAAU,EAAE;EAAU,WAAW,EAAE;EAAa,EAAjF,EAAiF,CAC5F,GACF,CAAC,kBAAC,QAAD,EAAc,GAAG,EAAK,MAAQ,EAAnB,EAAmB,CAAC;AAEpC,QACE,kBAAC,OAAD;EACE,OAAM;EACN,SAAS;EACT,OAAO,KAAS;EAChB,QAAQ,KAAU;EAClB,MAAK;EACL,cAAY;EACZ,eAAa,IAAQ,KAAA,IAAY;EACjC,MAAM,IAAQ,QAAQ,KAAA;EACtB,WAAU;EACV,GAAI;YAEH;EACG,CAAA"}

package/dist/index.cjs CHANGED Viewed

	@@ -1 +1 @@
1	- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./components/AboutDialog/AboutDialog.cjs`),t=require(`./components/ActionRow/ActionRow.cjs`),n=require(`./components/Avatar/Avatar.cjs`),r=require(`./components/AvatarRotator/AvatarRotator.cjs`),i=require(`./components/Badge/Badge.cjs`),a=require(`./components/Banner/Banner.cjs`),o=require(`./components/Bin/Bin.cjs`),ee=require(`./components/Blockquote/Blockquote.cjs`),s=require(`./components/BottomSheet/BottomSheet.cjs`),c=require(`./components/Box/Box.cjs`),l=require(`./components/Separator/Separator.cjs`),u=require(`./components/BoxedList/BoxedList.cjs`),d=require(`./components/BreakpointBin/BreakpointBin.cjs`),f=require(`./components/Button/Button.cjs`),p=require(`./components/ButtonContent/ButtonContent.cjs`),m=require(`./components/ButtonRow/ButtonRow.cjs`),h=require(`./components/Card/Card.cjs`),g=require(`./components/Carousel/Carousel.cjs`),_=require(`./components/CheckRow/CheckRow.cjs`),v=require(`./components/Checkbox/Checkbox.cjs`),y=require(`./components/Icon/Icon.cjs`),b=require(`./components/Chip/Chip.cjs`),x=require(`./components/Clamp/Clamp.cjs`),S=require(`./components/ColorPicker/ColorPicker.cjs`),C=require(`./components/ColumnView/ColumnView.cjs`),w=require(`./components/ComboRow/ComboRow.cjs`),T=require(`./components/GnomeProvider/GnomeContext.cjs`),E=require(`./components/ContributionGraph/ContributionGraph.cjs`),D=require(`./components/CountDownTimer/CountDownTimer.cjs`),O=require(`./components/Dialog/Dialog.cjs`),k=require(`./components/Dropdown/Dropdown.cjs`),A=require(`./components/EntryRow/EntryRow.cjs`),j=require(`./components/ExpanderRow/ExpanderRow.cjs`),M=require(`./components/Footer/Footer.cjs`),N=require(`./components/Frame/Frame.cjs`),P=require(`./components/GnomeProvider/GnomeProvider.cjs`),F=require(`./components/HeaderBar/HeaderBar.cjs`),I=require(`./components/Tooltip/Tooltip.cjs`),L=require(`./components/IconButton/IconButton.cjs`),R=require(`./components/InlineViewSwitcher/InlineViewSwitcher.cjs`),z=require(`./components/InlineViewSwitcher/InlineViewSwitcherItem.cjs`),B=require(`./components/Link/Link.cjs`),V=require(`./components/LinkedGroup/LinkedGroup.cjs`),H=require(`./hooks/useBreakpoint.cjs`),U=require(`./components/NavigationSplitView/NavigationSplitView.cjs`),W=require(`./components/NavigationView/NavigationView.cjs`),G=require(`./components/OverlaySplitView/OverlaySplitView.cjs`),K=require(`./components/PasswordEntryRow/PasswordEntryRow.cjs`),q=require(`./components/PathBar/PathBar.cjs`),J=require(`./components/Popover/Popover.cjs`),Y=require(`./components/PreferencesDialog/PreferencesDialog.cjs`),te=require(`./components/PreferencesGroup/PreferencesGroup.cjs`),X=require(`./components/PreferencesPage/PreferencesPage.cjs`),Z=require(`./components/ProgressBar/ProgressBar.cjs`),Q=require(`./components/RadioButton/RadioButton.cjs`),ne=require(`./components/Spinner/Spinner.cjs`),re=require(`./components/SearchBar/SearchBar.cjs`),ie=require(`./components/ShortcutLabel/ShortcutLabel.cjs`),ae=require(`./components/ShortcutsDialog/ShortcutsDialog.cjs`),oe=require(`./components/StatusPage/StatusPage.cjs`),$=require(`./components/Sidebar/Sidebar.cjs`),se=require(`./components/Sidebar/SidebarSection.cjs`),ce=require(`./components/Sidebar/SidebarItem.cjs`),le=require(`./components/Skeleton/Skeleton.cjs`),ue=require(`./components/Slider/Slider.cjs`),de=require(`./components/SpinButton/SpinButton.cjs`),fe=require(`./components/SpinRow/SpinRow.cjs`),pe=require(`./components/SplitButton/SplitButton.cjs`),me=require(`./components/StatusBadge/StatusBadge.cjs`),he=require(`./components/Switch/Switch.cjs`),ge=require(`./components/SwitchRow/SwitchRow.cjs`),_e=require(`./components/Tabs/TabBar.cjs`),ve=require(`./components/Tabs/TabItem.cjs`),ye=require(`./components/Tabs/TabPanel.cjs`),be=require(`./components/TerminalView/TerminalView.cjs`),xe=require(`./components/Text/Text.cjs`),Se=require(`./components/TextField/TextField.cjs`),Ce=require(`./components/Timeline/Timeline.cjs`),we=require(`./components/Toast/Toast.cjs`),Te=require(`./components/Toast/Toaster.cjs`),Ee=require(`./components/ToggleGroup/ToggleGroup.cjs`),De=require(`./components/ToggleGroup/ToggleGroupItem.cjs`),Oe=require(`./components/Toolbar/Toolbar.cjs`),ke=require(`./components/Toolbar/Spacer.cjs`),Ae=require(`./components/ToolbarView/ToolbarView.cjs`),je=require(`./components/ViewSwitcher/ViewSwitcher.cjs`),Me=require(`./components/ViewSwitcher/ViewSwitcherItem.cjs`),Ne=require(`./components/ViewSwitcherBar/ViewSwitcherBar.cjs`),Pe=require(`./components/ViewSwitcherSidebar/ViewSwitcherSidebar.cjs`),Fe=require(`./components/ViewSwitcherSidebar/ViewSwitcherSidebarItem.cjs`),Ie=require(`./components/WindowTitle/WindowTitle.cjs`),Le=require(`./components/WrapBox/WrapBox.cjs`);exports.AboutDialog=e.AboutDialog,exports.ActionRow=t.ActionRow,exports.Avatar=n.Avatar,exports.AvatarRotator=r.AvatarRotator,exports.Badge=i.Badge,exports.Banner=a.Banner,exports.Bin=o.Bin,exports.Blockquote=ee.Blockquote,exports.BottomSheet=s.BottomSheet,exports.Box=c.Box,exports.BoxedList=u.BoxedList,exports.BreakpointBin=d.BreakpointBin,exports.Button=f.Button,exports.ButtonContent=p.ButtonContent,exports.ButtonRow=m.ButtonRow,exports.Card=h.Card,exports.Carousel=g.Carousel,exports.CarouselIndicatorDots=g.CarouselIndicatorDots,exports.CarouselIndicatorLines=g.CarouselIndicatorLines,exports.CheckRow=_.CheckRow,exports.Checkbox=v.Checkbox,exports.Chip=b.Chip,exports.Clamp=x.Clamp,exports.ColorPicker=S.ColorPicker,exports.ColorSwatch=S.ColorSwatch,exports.ColumnView=C.ColumnView,exports.ComboRow=w.ComboRow,exports.ContributionGraph=E.ContributionGraph,exports.CountDownTimer=D.CountDownTimer,exports.Dialog=O.Dialog,exports.Dropdown=k.Dropdown,exports.EntryRow=A.EntryRow,exports.ExpanderRow=j.ExpanderRow,exports.Footer=M.Footer,exports.Frame=N.Frame,exports.GNOME_BREAKPOINTS=H.GNOME_BREAKPOINTS,exports.GNOME_PALETTE=S.GNOME_PALETTE,exports.GnomeProvider=P.GnomeProvider,exports.HeaderBar=F.HeaderBar,exports.Icon=y.Icon,exports.IconButton=L.IconButton,exports.InlineViewSwitcher=R.InlineViewSwitcher,exports.InlineViewSwitcherItem=z.InlineViewSwitcherItem,exports.Link=B.Link,exports.LinkedGroup=V.LinkedGroup,exports.NavigationPage=W.NavigationPage,exports.NavigationSplitView=U.NavigationSplitView,exports.NavigationView=W.NavigationView,exports.OverlaySplitView=G.OverlaySplitView,exports.PasswordEntryRow=K.PasswordEntryRow,exports.PathBar=q.PathBar,exports.Popover=J.Popover,exports.PreferencesDialog=Y.PreferencesDialog,exports.PreferencesGroup=te.PreferencesGroup,exports.PreferencesPage=X.PreferencesPage,exports.ProgressBar=Z.ProgressBar,exports.RadioButton=Q.RadioButton,exports.SearchBar=re.SearchBar,exports.Separator=l.Separator,exports.ShortcutLabel=ie.ShortcutLabel,exports.ShortcutsDialog=ae.ShortcutsDialog,exports.Sidebar=$.Sidebar,exports.SidebarCollapsedContext=$.SidebarCollapsedContext,exports.SidebarItem=ce.SidebarItem,exports.SidebarSection=se.SidebarSection,exports.Skeleton=le.Skeleton,exports.Slider=ue.Slider,exports.Spacer=ke.Spacer,exports.SpinButton=de.SpinButton,exports.SpinRow=fe.SpinRow,exports.Spinner=ne.Spinner,exports.SplitButton=pe.SplitButton,exports.StatusBadge=me.StatusBadge,exports.StatusPage=oe.StatusPage,exports.Switch=he.Switch,exports.SwitchRow=ge.SwitchRow,exports.TabBar=_e.TabBar,exports.TabItem=ve.TabItem,exports.TabPanel=ye.TabPanel,exports.TerminalView=be.TerminalView,exports.Text=xe.Text,exports.TextField=Se.TextField,exports.Timeline=Ce.Timeline,exports.Toast=we.Toast,exports.Toaster=Te.Toaster,exports.ToggleGroup=Ee.ToggleGroup,exports.ToggleGroupItem=De.ToggleGroupItem,exports.Toolbar=Oe.Toolbar,exports.ToolbarView=Ae.ToolbarView,exports.Tooltip=I.Tooltip,exports.ViewSwitcher=je.ViewSwitcher,exports.ViewSwitcherBar=Ne.ViewSwitcherBar,exports.ViewSwitcherItem=Me.ViewSwitcherItem,exports.ViewSwitcherSidebar=Pe.ViewSwitcherSidebar,exports.ViewSwitcherSidebarItem=Fe.ViewSwitcherSidebarItem,exports.WindowTitle=Ie.WindowTitle,exports.WrapBox=Le.WrapBox,exports.useBreakpoint=H.useBreakpoint,exports.useDateTimeFormatter=T.useDateTimeFormatter,exports.useDir=T.useDir,exports.useLocale=T.useLocale,exports.useNavigation=W.useNavigation,exports.useNumberFormatter=T.useNumberFormatter,exports.useSidebarCollapsed=$.useSidebarCollapsed;
1	+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const ee=require(`./components/AboutDialog/AboutDialog.cjs`),e=require(`./components/ActionRow/ActionRow.cjs`),t=require(`./components/Avatar/Avatar.cjs`),n=require(`./components/AvatarRotator/AvatarRotator.cjs`),r=require(`./components/Badge/Badge.cjs`),i=require(`./components/Banner/Banner.cjs`),a=require(`./components/Bin/Bin.cjs`),te=require(`./components/Blockquote/Blockquote.cjs`),o=require(`./components/BottomSheet/BottomSheet.cjs`),s=require(`./components/Box/Box.cjs`),c=require(`./components/Separator/Separator.cjs`),l=require(`./components/BoxedList/BoxedList.cjs`),u=require(`./components/BreakpointBin/BreakpointBin.cjs`),d=require(`./components/Button/Button.cjs`),f=require(`./components/ButtonContent/ButtonContent.cjs`),p=require(`./components/ButtonRow/ButtonRow.cjs`),m=require(`./components/Card/Card.cjs`),h=require(`./components/Carousel/Carousel.cjs`),g=require(`./components/CheckRow/CheckRow.cjs`),_=require(`./components/Checkbox/Checkbox.cjs`),v=require(`./components/Icon/Icon.cjs`),y=require(`./components/Chip/Chip.cjs`),b=require(`./components/Clamp/Clamp.cjs`),x=require(`./components/ColorPicker/ColorPicker.cjs`),S=require(`./components/ColumnView/ColumnView.cjs`),C=require(`./components/ComboRow/ComboRow.cjs`),w=require(`./components/GnomeProvider/GnomeContext.cjs`),T=require(`./components/ContributionGraph/ContributionGraph.cjs`),E=require(`./components/CountDownTimer/CountDownTimer.cjs`),D=require(`./components/Dialog/Dialog.cjs`),O=require(`./components/Drawer/Drawer.cjs`),k=require(`./components/Dropdown/Dropdown.cjs`),A=require(`./components/EntryRow/EntryRow.cjs`),j=require(`./components/ExpanderRow/ExpanderRow.cjs`),M=require(`./components/Footer/Footer.cjs`),N=require(`./components/Frame/Frame.cjs`),P=require(`./components/GnomeProvider/GnomeProvider.cjs`),F=require(`./components/HeaderBar/HeaderBar.cjs`),I=require(`./components/Tooltip/Tooltip.cjs`),L=require(`./components/IconButton/IconButton.cjs`),R=require(`./components/InlineViewSwitcher/InlineViewSwitcher.cjs`),z=require(`./components/InlineViewSwitcher/InlineViewSwitcherItem.cjs`),B=require(`./components/Link/Link.cjs`),V=require(`./components/LinkedGroup/LinkedGroup.cjs`),H=require(`./hooks/useBreakpoint.cjs`),U=require(`./components/NavigationSplitView/NavigationSplitView.cjs`),W=require(`./components/NavigationView/NavigationView.cjs`),G=require(`./components/OverlaySplitView/OverlaySplitView.cjs`),K=require(`./components/PasswordEntryRow/PasswordEntryRow.cjs`),q=require(`./components/PathBar/PathBar.cjs`),J=require(`./components/Popover/Popover.cjs`),Y=require(`./components/PreferencesDialog/PreferencesDialog.cjs`),X=require(`./components/PreferencesGroup/PreferencesGroup.cjs`),Z=require(`./components/PreferencesPage/PreferencesPage.cjs`),Q=require(`./components/ProgressBar/ProgressBar.cjs`),ne=require(`./components/RadioButton/RadioButton.cjs`),re=require(`./components/Spinner/Spinner.cjs`),ie=require(`./components/SearchBar/SearchBar.cjs`),ae=require(`./components/ShortcutLabel/ShortcutLabel.cjs`),oe=require(`./components/ShortcutsDialog/ShortcutsDialog.cjs`),se=require(`./components/StatusPage/StatusPage.cjs`),$=require(`./components/Sidebar/Sidebar.cjs`),ce=require(`./components/Sidebar/SidebarSection.cjs`),le=require(`./components/Sidebar/SidebarItem.cjs`),ue=require(`./components/Skeleton/Skeleton.cjs`),de=require(`./components/Slider/Slider.cjs`),fe=require(`./components/SpinButton/SpinButton.cjs`),pe=require(`./components/SpinRow/SpinRow.cjs`),me=require(`./components/SplitButton/SplitButton.cjs`),he=require(`./components/StatusBadge/StatusBadge.cjs`),ge=require(`./components/Switch/Switch.cjs`),_e=require(`./components/SwitchRow/SwitchRow.cjs`),ve=require(`./components/Tabs/TabBar.cjs`),ye=require(`./components/Tabs/TabItem.cjs`),be=require(`./components/Tabs/TabPanel.cjs`),xe=require(`./components/TerminalView/TerminalView.cjs`),Se=require(`./components/Text/Text.cjs`),Ce=require(`./components/TextField/TextField.cjs`),we=require(`./components/Timeline/Timeline.cjs`),Te=require(`./components/Toast/Toast.cjs`),Ee=require(`./components/Toast/Toaster.cjs`),De=require(`./components/ToggleGroup/ToggleGroup.cjs`),Oe=require(`./components/ToggleGroup/ToggleGroupItem.cjs`),ke=require(`./components/Toolbar/Toolbar.cjs`),Ae=require(`./components/Toolbar/Spacer.cjs`),je=require(`./components/ToolbarView/ToolbarView.cjs`),Me=require(`./components/ViewSwitcher/ViewSwitcher.cjs`),Ne=require(`./components/ViewSwitcher/ViewSwitcherItem.cjs`),Pe=require(`./components/ViewSwitcherBar/ViewSwitcherBar.cjs`),Fe=require(`./components/ViewSwitcherSidebar/ViewSwitcherSidebar.cjs`),Ie=require(`./components/ViewSwitcherSidebar/ViewSwitcherSidebarItem.cjs`),Le=require(`./components/WindowTitle/WindowTitle.cjs`),Re=require(`./components/WrapBox/WrapBox.cjs`);exports.AboutDialog=ee.AboutDialog,exports.ActionRow=e.ActionRow,exports.Avatar=t.Avatar,exports.AvatarRotator=n.AvatarRotator,exports.Badge=r.Badge,exports.Banner=i.Banner,exports.Bin=a.Bin,exports.Blockquote=te.Blockquote,exports.BottomSheet=o.BottomSheet,exports.Box=s.Box,exports.BoxedList=l.BoxedList,exports.BreakpointBin=u.BreakpointBin,exports.Button=d.Button,exports.ButtonContent=f.ButtonContent,exports.ButtonRow=p.ButtonRow,exports.Card=m.Card,exports.Carousel=h.Carousel,exports.CarouselIndicatorDots=h.CarouselIndicatorDots,exports.CarouselIndicatorLines=h.CarouselIndicatorLines,exports.CheckRow=g.CheckRow,exports.Checkbox=_.Checkbox,exports.Chip=y.Chip,exports.Clamp=b.Clamp,exports.ColorPicker=x.ColorPicker,exports.ColorSwatch=x.ColorSwatch,exports.ColumnView=S.ColumnView,exports.ComboRow=C.ComboRow,exports.ContributionGraph=T.ContributionGraph,exports.CountDownTimer=E.CountDownTimer,exports.Dialog=D.Dialog,exports.Drawer=O.Drawer,exports.Dropdown=k.Dropdown,exports.EntryRow=A.EntryRow,exports.ExpanderRow=j.ExpanderRow,exports.Footer=M.Footer,exports.Frame=N.Frame,exports.GNOME_BREAKPOINTS=H.GNOME_BREAKPOINTS,exports.GNOME_PALETTE=x.GNOME_PALETTE,exports.GnomeProvider=P.GnomeProvider,exports.HeaderBar=F.HeaderBar,exports.Icon=v.Icon,exports.IconButton=L.IconButton,exports.InlineViewSwitcher=R.InlineViewSwitcher,exports.InlineViewSwitcherItem=z.InlineViewSwitcherItem,exports.Link=B.Link,exports.LinkedGroup=V.LinkedGroup,exports.NavigationPage=W.NavigationPage,exports.NavigationSplitView=U.NavigationSplitView,exports.NavigationView=W.NavigationView,exports.OverlaySplitView=G.OverlaySplitView,exports.PasswordEntryRow=K.PasswordEntryRow,exports.PathBar=q.PathBar,exports.Popover=J.Popover,exports.PreferencesDialog=Y.PreferencesDialog,exports.PreferencesGroup=X.PreferencesGroup,exports.PreferencesPage=Z.PreferencesPage,exports.ProgressBar=Q.ProgressBar,exports.RadioButton=ne.RadioButton,exports.SearchBar=ie.SearchBar,exports.Separator=c.Separator,exports.ShortcutLabel=ae.ShortcutLabel,exports.ShortcutsDialog=oe.ShortcutsDialog,exports.Sidebar=$.Sidebar,exports.SidebarCollapsedContext=$.SidebarCollapsedContext,exports.SidebarItem=le.SidebarItem,exports.SidebarSection=ce.SidebarSection,exports.Skeleton=ue.Skeleton,exports.Slider=de.Slider,exports.Spacer=Ae.Spacer,exports.SpinButton=fe.SpinButton,exports.SpinRow=pe.SpinRow,exports.Spinner=re.Spinner,exports.SplitButton=me.SplitButton,exports.StatusBadge=he.StatusBadge,exports.StatusPage=se.StatusPage,exports.Switch=ge.Switch,exports.SwitchRow=_e.SwitchRow,exports.TabBar=ve.TabBar,exports.TabItem=ye.TabItem,exports.TabPanel=be.TabPanel,exports.TerminalView=xe.TerminalView,exports.Text=Se.Text,exports.TextField=Ce.TextField,exports.Timeline=we.Timeline,exports.Toast=Te.Toast,exports.Toaster=Ee.Toaster,exports.ToggleGroup=De.ToggleGroup,exports.ToggleGroupItem=Oe.ToggleGroupItem,exports.Toolbar=ke.Toolbar,exports.ToolbarView=je.ToolbarView,exports.Tooltip=I.Tooltip,exports.ViewSwitcher=Me.ViewSwitcher,exports.ViewSwitcherBar=Pe.ViewSwitcherBar,exports.ViewSwitcherItem=Ne.ViewSwitcherItem,exports.ViewSwitcherSidebar=Fe.ViewSwitcherSidebar,exports.ViewSwitcherSidebarItem=Ie.ViewSwitcherSidebarItem,exports.WindowTitle=Le.WindowTitle,exports.WrapBox=Re.WrapBox,exports.useAccentColor=w.useAccentColor,exports.useBreakpoint=H.useBreakpoint,exports.useColorScheme=w.useColorScheme,exports.useDateTimeFormatter=w.useDateTimeFormatter,exports.useDir=w.useDir,exports.useLocale=w.useLocale,exports.useNavigation=W.useNavigation,exports.useNumberFormatter=w.useNumberFormatter,exports.useResolvedColorScheme=w.useResolvedColorScheme,exports.useSidebarCollapsed=$.useSidebarCollapsed;

package/dist/index.d.ts CHANGED Viewed

@@ -58,6 +58,8 @@ export { Toast, Toaster } from './components/Toast';
 export type { ToastProps, ToasterProps } from './components/Toast';
 export { Dialog } from './components/Dialog';
 export type { DialogProps, DialogButton, AlertDialogResponse, AlertDialogResponseVariant, } from './components/Dialog';
+export { Drawer } from './components/Drawer';
+export type { DrawerProps, DrawerSide, DrawerSize } from './components/Drawer';
 export { AboutDialog } from './components/AboutDialog';
 export type { AboutDialogProps, AboutDialogLink } from './components/AboutDialog';
 export { Tooltip } from './components/Tooltip';
@@ -151,7 +153,7 @@ export type { TimelineProps, TimelineItem, TimelineOrientation, TimelineVariant
 export { PathBar } from './components/PathBar';
 export type { PathBarProps, PathBarSegment } from './components/PathBar';
 export { ContributionGraph } from './components/ContributionGraph';
-export type { ContributionGraphProps, ContributionDay } from './components/ContributionGraph';
+export type { ContributionGraphProps, ContributionDay, } from './components/ContributionGraph';
 export { ColumnView } from './components/ColumnView';
 export type { ColumnViewProps, ColumnDef, ColumnViewSortState, ColumnViewSelectionMode, SortDirection, } from './components/ColumnView';
 export { TerminalView } from './components/TerminalView';
@@ -160,5 +162,5 @@ export { StatusBadge } from './components/StatusBadge';
 export type { StatusBadgeProps, StatusBadgeVariant } from './components/StatusBadge';
 export { GnomeProvider } from './components/GnomeProvider/GnomeProvider';
 export type { GnomeProviderProps } from './components/GnomeProvider/GnomeProvider';
-export { useLocale, useDir, useNumberFormatter, useDateTimeFormatter, } from './components/GnomeProvider/GnomeContext';
-export type { GnomeDir } from './components/GnomeProvider/GnomeContext';
+export { useLocale, useDir, useNumberFormatter, useDateTimeFormatter, useColorScheme, useResolvedColorScheme, useAccentColor, } from './components/GnomeProvider/GnomeContext';
+export type { GnomeDir, GnomeColorScheme, GnomeAccentColor, GnomeNamedAccentColor, } from './components/GnomeProvider/GnomeContext';