@salty-css/react 0.0.1-alpha.274 → 0.0.1-alpha.276

package/dynamic-styles.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("@salty-css/core/parsers"),m=require("@salty-css/core/util"),S=require("./clsx-C11secjj.cjs"),i=s=>m.toHash(s),c=async(s,t)=>(await o.parseStyles(s,t)).join(`
-`),d=async({as:s,scope:t,styles:a,...n})=>{if(s){const r=i(a),u=await c(a,t||r),y={...n,className:S.clsx(r,n.className)};return e.jsxs(e.Fragment,{children:[e.jsx("style",{children:u}),e.jsx(s,{...y})]})}const l=await c(a,t);return e.jsx("style",{children:l})};exports.DynamicStyles=d;exports.useDynamicStyles=c;exports.useDynamicStylesClassName=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),o=require("@salty-css/core/parsers"),m=require("@salty-css/core/util"),S=require("./clsx-C11secjj.cjs"),i=s=>m.toHash(s),r=async(s,a)=>(await o.parseStyles(s,a)).join(`
+`),j=async({as:s,scope:a,styles:e,...n})=>{if(s){if(!e)return t.jsx(s,{...n});const c=i(e),u=await r(e,a||`.${c}`),y={...n,className:S.clsx(c,n.className)};return t.jsxs(t.Fragment,{children:[t.jsx("style",{children:u}),t.jsx(s,{...y})]})}if(!e)return null;const l=await r(e,a);return t.jsx("style",{children:l})};exports.DynamicStyles=j;exports.getDynamicStylesClassName=i;exports.getDynamicStylesCss=r;

package/dynamic-styles.d.ts

@@ -3,20 +3,20 @@ import { HTMLAttributes } from 'react';
 /**
  * Create a hash of the dynamic styles that then can be used as scope.
  */
-export declare const useDynamicStylesClassName: (styles: BaseStyles) => string;
+export declare const getDynamicStylesClassName: (styles: BaseStyles) => string;
 /**
  * Add any dynamic styles to your app with a custom scope.
  * Note: this works only with server components.
  */
-export declare const useDynamicStyles: (styles: BaseStyles, scope?: string) => Promise<string>;
+export declare const getDynamicStylesCss: (styles: BaseStyles, scope?: string) => Promise<string>;
 interface DynamicStylesProps extends HTMLAttributes<HTMLElement> {
+    styles?: BaseStyles;
     scope?: string;
     as?: (...args: any[]) => React.ReactNode;
-    styles: BaseStyles;
 }
 /**
  * Add any dynamic styles to your app with a custom scope.
  * Note: this works only with server components.
  */
-export declare const DynamicStyles: ({ as: Component, scope, styles, ...rest }: DynamicStylesProps) => Promise<import("react/jsx-runtime").JSX.Element>;
+export declare const DynamicStyles: ({ as: Component, scope, styles, ...rest }: DynamicStylesProps) => Promise<import("react/jsx-runtime").JSX.Element | null>;
 export {};

package/dynamic-styles.js

@@ -1,21 +1,23 @@
-import { jsxs as l, Fragment as y, jsx as t } from "react/jsx-runtime";
+import { jsx as t, jsxs as l, Fragment as f } from "react/jsx-runtime";
 import { parseStyles as p } from "@salty-css/core/parsers";
 import { toHash as u } from "@salty-css/core/util";
-import { c as d } from "./clsx-OuTLNxxd.js";
-const f = (s) => u(s), e = async (s, a) => (await p(s, a)).join(`
-`), j = async ({ as: s, scope: a, styles: r, ...c }) => {
+import { c as y } from "./clsx-OuTLNxxd.js";
+const d = (s) => u(s), e = async (s, a) => (await p(s, a)).join(`
+`), g = async ({ as: s, scope: a, styles: r, ...c }) => {
   if (s) {
-    const n = f(r), i = await e(r, a || n), m = { ...c, className: d(n, c.className) };
-    return /* @__PURE__ */ l(y, { children: [
-      /* @__PURE__ */ t("style", { children: i }),
+    if (!r) return /* @__PURE__ */ t(s, { ...c });
+    const n = d(r), o = await e(r, a || `.${n}`), m = { ...c, className: y(n, c.className) };
+    return /* @__PURE__ */ l(f, { children: [
+      /* @__PURE__ */ t("style", { children: o }),
       /* @__PURE__ */ t(s, { ...m })
     ] });
   }
-  const o = await e(r, a);
-  return /* @__PURE__ */ t("style", { children: o });
+  if (!r) return null;
+  const i = await e(r, a);
+  return /* @__PURE__ */ t("style", { children: i });
 };
 export {
-  j as DynamicStyles,
-  e as useDynamicStyles,
-  f as useDynamicStylesClassName
+  g as DynamicStyles,
+  d as getDynamicStylesClassName,
+  e as getDynamicStylesCss
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salty-css/react",
-  "version": "0.0.1-alpha.274",
+  "version": "0.0.1-alpha.276",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "typings": "./dist/index.d.ts",
@@ -70,7 +70,7 @@
     }
   },
   "dependencies": {
-    "@salty-css/core": "^0.0.1-alpha.274",
+    "@salty-css/core": "^0.0.1-alpha.276",
     "clsx": ">=2.x",
     "react": ">=19.x || >=18.3.x"
   }