@pyreon/unistyle 0.3.0 → 0.11.0

package/lib/index.d.ts

@@ -1,14 +1,32 @@
 import { VNode } from "@pyreon/core";
 import { context } from "@pyreon/ui-core";
 
-//#region src/context.d.ts
-type Theme$2 = {
-  rootSize: number;
+//#region src/enrichTheme.d.ts
+type PyreonTheme = {
+  rootSize?: number;
   breakpoints?: Record<string, number>;
-  __PYREON__?: never;
-} & Partial<Record<string, unknown>>;
+  __PYREON__?: {
+    sortedBreakpoints: string[] | undefined;
+    media: Record<string, (...args: any[]) => any> | undefined;
+  };
+} & Record<string, unknown>;
+/**
+ * Enrich a theme with pre-computed responsive utilities.
+ * Adds sorted breakpoints and media-query tagged-template helpers
+ * to `theme.__PYREON__` for consumption by `makeItResponsive`.
+ *
+ * This is a pure function — safe to call outside of component context.
+ *
+ * @example
+ * const enriched = enrichTheme({ rootSize: 16, breakpoints: { xs: 0, sm: 576, md: 768 } })
+ * enriched.__PYREON__.sortedBreakpoints // ['xs', 'sm', 'md']
+ * enriched.__PYREON__.media.sm          // tagged-template for @media (min-width: 36em)
+ */
+declare function enrichTheme<T extends PyreonTheme>(theme: T): T & Required<Pick<PyreonTheme, "__PYREON__">>;
+//#endregion
+//#region src/context.d.ts
 type TProvider = {
-  theme: Theme$2;
+  theme: PyreonTheme;
   children?: VNode | null;
 };
 /**
@@ -495,5 +513,5 @@ type CssUnits = "px" | "rem" | "%" | "em" | "ex" | "cm" | "mm" | "in" | "pt" | "
 type Values = (items: unknown[], rootSize?: number, outputUnit?: CssUnits) => string | number | null;
 declare const values: Values;
 //#endregion
-export { ALIGN_CONTENT_DIRECTION, ALIGN_CONTENT_MAP_X, ALIGN_CONTENT_MAP_Y, type AlignContent, type AlignContentAlignXKeys, type AlignContentAlignYKeys, type AlignContentDirectionKeys, type Breakpoints, type BrowserColors, type Color, type CreateMediaQueries, type Defaults, type ExtendCss, type MakeItResponsive, type MakeItResponsiveStyles, type NormalizeTheme, type PropertyValue, Provider, type SortBreakpoints, type StripUnit, type Styles, type Theme as StylesTheme, type TProvider, type TransformTheme, type UnitValue, type Value, type Values, alignContent, breakpoints$1 as breakpoints, context, createMediaQueries, extendCss, makeItResponsive, normalizeTheme, sortBreakpoints, stripUnit, styles$1 as styles, transformTheme, value, values };
+export { ALIGN_CONTENT_DIRECTION, ALIGN_CONTENT_MAP_X, ALIGN_CONTENT_MAP_Y, type AlignContent, type AlignContentAlignXKeys, type AlignContentAlignYKeys, type AlignContentDirectionKeys, type Breakpoints, type BrowserColors, type Color, type CreateMediaQueries, type Defaults, type ExtendCss, type MakeItResponsive, type MakeItResponsiveStyles, type NormalizeTheme, type PropertyValue, Provider, type PyreonTheme, type SortBreakpoints, type StripUnit, type Styles, type Theme as StylesTheme, type TProvider, type TransformTheme, type UnitValue, type Value, type Values, alignContent, breakpoints$1 as breakpoints, context, createMediaQueries, enrichTheme, extendCss, makeItResponsive, normalizeTheme, sortBreakpoints, stripUnit, styles$1 as styles, transformTheme, value, values };
 //# sourceMappingURL=index2.d.ts.map

package/lib/index.js

@@ -1,3 +1,5 @@
+import { provide } from "@pyreon/core";
+import { ThemeContext } from "@pyreon/styler";
 import { Provider as Provider$1, config, context, isEmpty, set } from "@pyreon/ui-core";
 
 //#region src/responsive/breakpoints.ts
@@ -176,29 +178,49 @@ const sortBreakpoints = (breakpoints) => {
 };
 
 //#endregion
-//#region src/context.tsx
+//#region src/enrichTheme.ts
 /**
-* Unistyle Provider — wraps the core Provider and enriches the theme
-* with pre-computed sorted breakpoints and media-query tagged-template
-* helpers consumed by `makeItResponsive`.
+* Enrich a theme with pre-computed responsive utilities.
+* Adds sorted breakpoints and media-query tagged-template helpers
+* to `theme.__PYREON__` for consumption by `makeItResponsive`.
+*
+* This is a pure function — safe to call outside of component context.
+*
+* @example
+* const enriched = enrichTheme({ rootSize: 16, breakpoints: { xs: 0, sm: 576, md: 768 } })
+* enriched.__PYREON__.sortedBreakpoints // ['xs', 'sm', 'md']
+* enriched.__PYREON__.media.sm          // tagged-template for @media (min-width: 36em)
 */
-function Provider(props) {
-	const { theme, children } = props;
-	const { breakpoints, rootSize } = theme;
+function enrichTheme(theme) {
+	const { breakpoints, rootSize = 16 } = theme;
 	const sortedBreakpoints = breakpoints && !isEmpty(breakpoints) ? sortBreakpoints(breakpoints) : void 0;
 	const media = breakpoints && !isEmpty(breakpoints) ? createMediaQueries({
 		breakpoints,
 		css: config.css,
 		rootSize
 	}) : void 0;
+	return {
+		...theme,
+		__PYREON__: {
+			sortedBreakpoints,
+			media
+		}
+	};
+}
+
+//#endregion
+//#region src/context.tsx
+/**
+* Unistyle Provider — wraps the core Provider and enriches the theme
+* with pre-computed sorted breakpoints and media-query tagged-template
+* helpers consumed by `makeItResponsive`.
+*/
+function Provider(props) {
+	const { theme, children } = props;
+	const enrichedTheme = enrichTheme(theme);
+	provide(ThemeContext, enrichedTheme);
 	return Provider$1({
-		theme: {
-			...theme,
-			__PYREON__: {
-				sortedBreakpoints,
-				media
-			}
-		},
+		theme: enrichedTheme,
 		children
 	});
 }
@@ -1822,5 +1844,5 @@ const styles = ({ theme: t, css, rootSize }) => {
 };
 
 //#endregion
-export { ALIGN_CONTENT_DIRECTION, ALIGN_CONTENT_MAP_X, ALIGN_CONTENT_MAP_Y, Provider, alignContent, breakpoints, context, createMediaQueries, extendCss, makeItResponsive, normalizeTheme, sortBreakpoints, stripUnit, styles, transformTheme, value, values };
+export { ALIGN_CONTENT_DIRECTION, ALIGN_CONTENT_MAP_X, ALIGN_CONTENT_MAP_Y, Provider, alignContent, breakpoints, context, createMediaQueries, enrichTheme, extendCss, makeItResponsive, normalizeTheme, sortBreakpoints, stripUnit, styles, transformTheme, value, values };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "@pyreon/unistyle",
-  "version": "0.3.0",
+  "version": "0.11.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/pyreon/ui-system",
-    "directory": "packages/unistyle"
+    "directory": "packages/ui-system/unistyle"
   },
   "description": "Responsive theming and breakpoint utilities for Pyreon",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
   "exports": {
+    "bun": "./src/index.ts",
     "source": "./src/index.ts",
     "import": "./lib/index.js",
     "types": "./lib/index.d.ts"
@@ -25,7 +26,7 @@
     "LICENSE"
   ],
   "engines": {
-    "node": ">= 18"
+    "node": ">= 22"
   },
   "publishConfig": {
     "access": "public"
@@ -41,12 +42,13 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@pyreon/core": ">=0.4.0 <1.0.0",
-    "@pyreon/reactivity": ">=0.4.0 <1.0.0",
-    "@pyreon/ui-core": ">=0.3.0"
+    "@pyreon/core": "^0.11.0",
+    "@pyreon/reactivity": "^0.11.0",
+    "@pyreon/ui-core": "^0.11.0",
+    "@pyreon/styler": "^0.11.0"
   },
   "devDependencies": {
     "@vitus-labs/tools-rolldown": "^1.15.3",
-    "@pyreon/typescript": "^0.7.4"
+    "@pyreon/typescript": "^0.11.0"
   }
 }