@just-web/css 0.5.0 → 0.6.0

package/cjs/convertors/px_2_rem.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Converts pixel values to rem units.
+ *
+ * @param px - The pixel value to convert. Can be a number or string (e.g. '16px' or '16')
+ * @param options - Optional configuration
+ * @param options.base - Base pixel value to calculate rem units from. Defaults to 16
+ * @param options.precision - Number of decimal places in the output. Defaults to 4
+ * @returns The converted value as a string with 'rem' units
+ *
+ * @example
+ * ```ts
+ * px2rem(16) // '1.0000'
+ * px2rem('32px') // '2.0000'
+ * px2rem(20, { base: 20 }) // '1.0000'
+ * px2rem(13, { precision: 2 }) // '0.81'
+ * ```
+ */
+export declare function px2rem(px: number | string, options?: {
+    base?: number | undefined;
+    precision?: number | undefined;
+}): string;

package/cjs/convertors/px_2_rem.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.px2rem = px2rem;
+function px2rem(px, options) {
+  const {
+    base = 16,
+    precision = 4
+  } = options ?? {};
+  if (typeof px === "string") {
+    px = px.replace(/px$/, "");
+    px = Number.parseFloat(px);
+  }
+  return (px / base).toFixed(precision);
+}

package/cjs/convertors/rem_2_px.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Converts rem values to pixel units.
+ *
+ * @param rem - The rem value to convert. Can be a number or string (e.g. '1rem' or '1')
+ * @param options - Optional configuration
+ * @param options.base - Base pixel value to calculate pixels from. Defaults to 16
+ * @param options.precision - Number of decimal places in the output. Defaults to 4
+ * @returns The converted value as a string with 'px' units
+ *
+ * @example
+ * ```ts
+ * rem2px(1) // '16.0000'
+ * rem2px('2rem') // '32.0000'
+ * rem2px(1, { base: 20 }) // '20.0000'
+ * rem2px(0.8125, { precision: 2 }) // '13.00'
+ * ```
+ */
+export declare function rem2px(rem: number | string, options?: {
+    base?: number | undefined;
+    precision?: number | undefined;
+}): string;

package/cjs/convertors/rem_2_px.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rem2px = rem2px;
+function rem2px(rem, options) {
+  const {
+    base = 16,
+    precision = 4
+  } = options ?? {};
+  if (typeof rem === "string") {
+    rem = rem.replace(/rem$/, "");
+    rem = Number.parseFloat(rem);
+  }
+  return (rem * base).toFixed(precision);
+}

package/cjs/index.d.ts

@@ -1,3 +1,5 @@
+export * from './convertors/px_2_rem.ts';
+export * from './convertors/rem_2_px.ts';
 export * from './css-properties/css-properties.ts';
 export * from './css-properties/to_dom_style.ts';
 export * from './props/class-name.ts';

package/cjs/index.js

@@ -3,6 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _px_2_rem = require("./convertors/px_2_rem.ts");
+Object.keys(_px_2_rem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _px_2_rem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _px_2_rem[key];
+    }
+  });
+});
+var _rem_2_px = require("./convertors/rem_2_px.ts");
+Object.keys(_rem_2_px).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _rem_2_px[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _rem_2_px[key];
+    }
+  });
+});
 var _cssProperties = require("./css-properties/css-properties.ts");
 Object.keys(_cssProperties).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/cjs/tailwind.css

@@ -1 +1 @@
-@import "tailwindcss";
+@import "tailwindcss";@custom-variant dark (&:where(.dark, .dark *));

package/cjs/testing/log-panel.js

@@ -9,7 +9,7 @@ function LogPanel({
   log
 }) {
   return /* @__PURE__ */React.createElement("div", {
-    className: "bg-neutral-100 p-4 rounded overflow-y-auto"
+    className: "bg-neutral-100 dark:bg-neutral-900 p-4 rounded overflow-y-auto"
   }, /* @__PURE__ */React.createElement("h4", {
     className: "mb-2"
   }, title), log.map((entry, i) => /* @__PURE__ */React.createElement("pre", {

package/esm/convertors/px_2_rem.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Converts pixel values to rem units.
+ *
+ * @param px - The pixel value to convert. Can be a number or string (e.g. '16px' or '16')
+ * @param options - Optional configuration
+ * @param options.base - Base pixel value to calculate rem units from. Defaults to 16
+ * @param options.precision - Number of decimal places in the output. Defaults to 4
+ * @returns The converted value as a string with 'rem' units
+ *
+ * @example
+ * ```ts
+ * px2rem(16) // '1.0000'
+ * px2rem('32px') // '2.0000'
+ * px2rem(20, { base: 20 }) // '1.0000'
+ * px2rem(13, { precision: 2 }) // '0.81'
+ * ```
+ */
+export declare function px2rem(px: number | string, options?: {
+    base?: number | undefined;
+    precision?: number | undefined;
+}): string;
+//# sourceMappingURL=px_2_rem.d.ts.map

package/esm/convertors/px_2_rem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"px_2_rem.d.ts","sourceRoot":"","sources":["../../src/convertors/px_2_rem.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,UASlH"}

package/esm/convertors/px_2_rem.js

@@ -0,0 +1,26 @@
+/**
+ * Converts pixel values to rem units.
+ *
+ * @param px - The pixel value to convert. Can be a number or string (e.g. '16px' or '16')
+ * @param options - Optional configuration
+ * @param options.base - Base pixel value to calculate rem units from. Defaults to 16
+ * @param options.precision - Number of decimal places in the output. Defaults to 4
+ * @returns The converted value as a string with 'rem' units
+ *
+ * @example
+ * ```ts
+ * px2rem(16) // '1.0000'
+ * px2rem('32px') // '2.0000'
+ * px2rem(20, { base: 20 }) // '1.0000'
+ * px2rem(13, { precision: 2 }) // '0.81'
+ * ```
+ */
+export function px2rem(px, options) {
+    const { base = 16, precision = 4 } = options ?? {};
+    if (typeof px === 'string') {
+        px = px.replace(/px$/, '');
+        px = Number.parseFloat(px);
+    }
+    return (px / base).toFixed(precision);
+}
+//# sourceMappingURL=px_2_rem.js.map

package/esm/convertors/px_2_rem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"px_2_rem.js","sourceRoot":"","sources":["../../src/convertors/px_2_rem.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,MAAM,CAAC,EAAmB,EAAE,OAAuE;IAClH,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,SAAS,GAAG,CAAC,EAAE,GAAG,OAAO,IAAI,EAAE,CAAA;IAElD,IAAI,OAAO,EAAE,KAAK,QAAQ,EAAE,CAAC;QAC5B,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAA;QAC1B,EAAE,GAAG,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,CAAA;IAC3B,CAAC;IAED,OAAO,CAAC,EAAE,GAAG,IAAI,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAA;AACtC,CAAC"}

package/esm/convertors/rem_2_px.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Converts rem values to pixel units.
+ *
+ * @param rem - The rem value to convert. Can be a number or string (e.g. '1rem' or '1')
+ * @param options - Optional configuration
+ * @param options.base - Base pixel value to calculate pixels from. Defaults to 16
+ * @param options.precision - Number of decimal places in the output. Defaults to 4
+ * @returns The converted value as a string with 'px' units
+ *
+ * @example
+ * ```ts
+ * rem2px(1) // '16.0000'
+ * rem2px('2rem') // '32.0000'
+ * rem2px(1, { base: 20 }) // '20.0000'
+ * rem2px(0.8125, { precision: 2 }) // '13.00'
+ * ```
+ */
+export declare function rem2px(rem: number | string, options?: {
+    base?: number | undefined;
+    precision?: number | undefined;
+}): string;
+//# sourceMappingURL=rem_2_px.d.ts.map

package/esm/convertors/rem_2_px.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rem_2_px.d.ts","sourceRoot":"","sources":["../../src/convertors/rem_2_px.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,UASnH"}

package/esm/convertors/rem_2_px.js

@@ -0,0 +1,26 @@
+/**
+ * Converts rem values to pixel units.
+ *
+ * @param rem - The rem value to convert. Can be a number or string (e.g. '1rem' or '1')
+ * @param options - Optional configuration
+ * @param options.base - Base pixel value to calculate pixels from. Defaults to 16
+ * @param options.precision - Number of decimal places in the output. Defaults to 4
+ * @returns The converted value as a string with 'px' units
+ *
+ * @example
+ * ```ts
+ * rem2px(1) // '16.0000'
+ * rem2px('2rem') // '32.0000'
+ * rem2px(1, { base: 20 }) // '20.0000'
+ * rem2px(0.8125, { precision: 2 }) // '13.00'
+ * ```
+ */
+export function rem2px(rem, options) {
+    const { base = 16, precision = 4 } = options ?? {};
+    if (typeof rem === 'string') {
+        rem = rem.replace(/rem$/, '');
+        rem = Number.parseFloat(rem);
+    }
+    return (rem * base).toFixed(precision);
+}
+//# sourceMappingURL=rem_2_px.js.map

package/esm/convertors/rem_2_px.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rem_2_px.js","sourceRoot":"","sources":["../../src/convertors/rem_2_px.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,MAAM,CAAC,GAAoB,EAAE,OAAuE;IACnH,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,SAAS,GAAG,CAAC,EAAE,GAAG,OAAO,IAAI,EAAE,CAAA;IAElD,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;QAC7B,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA;QAC7B,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,CAAC,CAAA;IAC7B,CAAC;IAED,OAAO,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAA;AACvC,CAAC"}

package/esm/index.d.ts

@@ -1,3 +1,5 @@
+export * from './convertors/px_2_rem.ts';
+export * from './convertors/rem_2_px.ts';
 export * from './css-properties/css-properties.ts';
 export * from './css-properties/to_dom_style.ts';
 export * from './props/class-name.ts';

package/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAA;AAClD,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oCAAoC,CAAA;AAClD,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA"}

package/esm/index.js

@@ -1,3 +1,5 @@
+export * from "./convertors/px_2_rem.js";
+export * from "./convertors/rem_2_px.js";
 export * from "./css-properties/css-properties.js";
 export * from "./css-properties/to_dom_style.js";
 export * from "./props/class-name.js";

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAA;AAClD,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oCAAoC,CAAA;AAClD,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA"}

package/esm/testing/log-panel.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function LogPanel({ title, log }) {
-    return (_jsxs("div", { className: "bg-neutral-100 p-4 rounded overflow-y-auto", children: [_jsx("h4", { className: "mb-2", children: title }), log.map((entry, i) => (_jsx("pre", { className: "font-mono", children: entry }, i)))] }));
+    return (_jsxs("div", { className: "bg-neutral-100 dark:bg-neutral-900 p-4 rounded overflow-y-auto", children: [_jsx("h4", { className: "mb-2", children: title }), log.map((entry, i) => (_jsx("pre", { className: "font-mono", children: entry }, i)))] }));
 }
 //# sourceMappingURL=log-panel.js.map

package/esm/testing/log-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"log-panel.js","sourceRoot":"","sources":["../../src/testing/log-panel.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,GAAG,EAAoC;IACxE,OAAO,CACN,eAAK,SAAS,EAAC,4CAA4C,aAC1D,aAAI,SAAS,EAAC,MAAM,YAAE,KAAK,GAAM,EAChC,GAAG,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,cAAa,SAAS,EAAC,WAAW,YAChC,KAAK,IADG,CAAC,CAEL,CACN,CAAC,IACG,CACN,CAAA;AACF,CAAC"}
+{"version":3,"file":"log-panel.js","sourceRoot":"","sources":["../../src/testing/log-panel.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,GAAG,EAAoC;IACxE,OAAO,CACN,eAAK,SAAS,EAAC,gEAAgE,aAC9E,aAAI,SAAS,EAAC,MAAM,YAAE,KAAK,GAAM,EAChC,GAAG,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,cAAa,SAAS,EAAC,WAAW,YAChC,KAAK,IADG,CAAC,CAEL,CACN,CAAC,IACG,CACN,CAAA;AACF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@just-web/css",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "CSS types and utilities",
   "type": "module",
   "exports": {
@@ -24,7 +24,7 @@
     "type-plus": "8.0.0-beta.7"
   },
   "devDependencies": {
-    "@repobuddy/storybook": "^0.9.4",
+    "@repobuddy/storybook": "^0.12.0",
     "@repobuddy/vitest": "^1.2.2",
     "@storybook/addon-essentials": "^8.6.12",
     "@storybook/addon-storysource": "^8.6.12",

package/src/convertors/px_2_rem.ts

@@ -0,0 +1,27 @@
+/**
+ * Converts pixel values to rem units.
+ *
+ * @param px - The pixel value to convert. Can be a number or string (e.g. '16px' or '16')
+ * @param options - Optional configuration
+ * @param options.base - Base pixel value to calculate rem units from. Defaults to 16
+ * @param options.precision - Number of decimal places in the output. Defaults to 4
+ * @returns The converted value as a string with 'rem' units
+ *
+ * @example
+ * ```ts
+ * px2rem(16) // '1.0000'
+ * px2rem('32px') // '2.0000'
+ * px2rem(20, { base: 20 }) // '1.0000'
+ * px2rem(13, { precision: 2 }) // '0.81'
+ * ```
+ */
+export function px2rem(px: number | string, options?: { base?: number | undefined; precision?: number | undefined }) {
+	const { base = 16, precision = 4 } = options ?? {}
+
+	if (typeof px === 'string') {
+		px = px.replace(/px$/, '')
+		px = Number.parseFloat(px)
+	}
+
+	return (px / base).toFixed(precision)
+}

package/src/convertors/rem_2_px.ts

@@ -0,0 +1,27 @@
+/**
+ * Converts rem values to pixel units.
+ *
+ * @param rem - The rem value to convert. Can be a number or string (e.g. '1rem' or '1')
+ * @param options - Optional configuration
+ * @param options.base - Base pixel value to calculate pixels from. Defaults to 16
+ * @param options.precision - Number of decimal places in the output. Defaults to 4
+ * @returns The converted value as a string with 'px' units
+ *
+ * @example
+ * ```ts
+ * rem2px(1) // '16.0000'
+ * rem2px('2rem') // '32.0000'
+ * rem2px(1, { base: 20 }) // '20.0000'
+ * rem2px(0.8125, { precision: 2 }) // '13.00'
+ * ```
+ */
+export function rem2px(rem: number | string, options?: { base?: number | undefined; precision?: number | undefined }) {
+	const { base = 16, precision = 4 } = options ?? {}
+
+	if (typeof rem === 'string') {
+		rem = rem.replace(/rem$/, '')
+		rem = Number.parseFloat(rem)
+	}
+
+	return (rem * base).toFixed(precision)
+}

package/src/index.ts

@@ -1,3 +1,5 @@
+export * from './convertors/px_2_rem.ts'
+export * from './convertors/rem_2_px.ts'
 export * from './css-properties/css-properties.ts'
 export * from './css-properties/to_dom_style.ts'
 export * from './props/class-name.ts'

package/src/tailwind.css

@@ -1 +1,3 @@
-@import "tailwindcss";
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));

package/src/testing/log-panel.tsx

@@ -1,6 +1,6 @@
 export function LogPanel({ title, log }: { title: string; log: string[] }) {
 	return (
-		<div className="bg-neutral-100 p-4 rounded overflow-y-auto">
+		<div className="bg-neutral-100 dark:bg-neutral-900 p-4 rounded overflow-y-auto">
 			<h4 className="mb-2">{title}</h4>
 			{log.map((entry, i) => (
 				<pre key={i} className="font-mono">