@salty-css/core 0.0.1-alpha.19 → 0.0.1-alpha.190

package/css/keyframes.js

@@ -0,0 +1,34 @@
+import { p as c } from "../parse-styles-DrLhKtqW.js";
+import { t as j } from "../dash-case-DBThphLm.js";
+const O = ({ animationName: u, params: f, appendInitialStyles: p, ...t }) => {
+  const o = u || j(t), e = (r = {}) => {
+    const {
+      duration: n = "500ms",
+      easing: s = "ease-in-out",
+      delay: a = "0s",
+      iterationCount: i = "1",
+      direction: y = "normal",
+      fillMode: g = "forwards",
+      playState: S = "running"
+    } = { ...f, ...r }, m = `${o} ${n} ${s} ${a} ${i} ${y} ${g} ${S}`;
+    if (!p) return m;
+    const $ = t.from || t["0%"];
+    if (!$) return m;
+    const b = c($, "");
+    return `${m};${b}`;
+  }, l = Object.entries(t).reduce((r, [n, s]) => {
+    if (!s) return r;
+    const a = c(s, ""), i = typeof n == "number" ? `${n}%` : n;
+    return `${r}${i}{${a}}`;
+  }, ""), d = `@keyframes ${o} {${l}}`;
+  return Object.assign(e, {
+    toString: e,
+    isKeyframes: !0,
+    animationName: o,
+    css: d,
+    keyframes: t
+  }), e;
+};
+export {
+  O as keyframes
+};

package/css/media.cjs

@@ -0,0 +1 @@
+"use strict";var a=Object.defineProperty;var o=(s,e,t)=>e in s?a(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var i=(s,e,t)=>o(s,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class r{constructor(e="@media"){i(this,"next",e=>{const t=new String(e);return Object.assign(t,{get isMedia(){return!0},get and(){return new r(`${e} and`)},get or(){return new r(`${e},`)}}),t});this.base=e}custom(e){return this.next(`${this.base} ${e}`)}minWidth(e){const t=typeof e=="number"?`${e}px`:e,n=`${this.base} (min-width: ${t})`;return this.next(n)}maxWidth(e){const t=typeof e=="number"?`${e}px`:e,n=`${this.base} (max-width: ${t})`;return this.next(n)}minHeight(e){const t=typeof e=="number"?`${e}px`:e,n=`${this.base} (min-height: ${t})`;return this.next(n)}maxHeight(e){const t=typeof e=="number"?`${e}px`:e,n=`${this.base} (max-height: ${t})`;return this.next(n)}get portrait(){const e=`${this.base} (orientation: portrait)`;return this.next(e)}get landscape(){const e=`${this.base} (orientation: landscape)`;return this.next(e)}prefersColorScheme(e){const t=`${this.base} (prefers-color-scheme: ${e})`;return this.next(t)}get dark(){return this.prefersColorScheme("dark")}get light(){return this.prefersColorScheme("light")}get print(){const e=`${this.base} print`;return this.next(e)}get screen(){const e=`${this.base} screen`;return this.next(e)}get speech(){const e=`${this.base} speech`;return this.next(e)}get all(){const e=`${this.base} all`;return this.next(e)}get not(){const e=`${this.base} not`;return this.next(e)}get reducedMotion(){const e=`${this.base} (prefers-reduced-motion: reduce)`;return this.next(e)}}const u=new r;exports.MediaQueryFactory=r;exports.media=u;

package/css/media.d.ts

@@ -0,0 +1,87 @@
+import { OrString, OrNumber } from '../types/util-types';
+export declare class MediaQueryFactory {
+    private base;
+    constructor(base?: string);
+    private next;
+    custom(value: string): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    minWidth(width: OrString | OrNumber): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    maxWidth(width: OrString | OrNumber): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    minHeight(height: OrString | OrNumber): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    maxHeight(height: OrString | OrNumber): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    get portrait(): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    get landscape(): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    prefersColorScheme(scheme: 'dark' | 'light' | OrString): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    get dark(): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    get light(): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    get print(): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    get screen(): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    get speech(): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    get all(): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    get not(): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    get reducedMotion(): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+}
+export declare const media: MediaQueryFactory;

package/css/media.js

@@ -0,0 +1,88 @@
+var a = Object.defineProperty;
+var o = (s, t, e) => t in s ? a(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
+var i = (s, t, e) => o(s, typeof t != "symbol" ? t + "" : t, e);
+class r {
+  constructor(t = "@media") {
+    i(this, "next", (t) => {
+      const e = new String(t);
+      return Object.assign(e, {
+        get isMedia() {
+          return !0;
+        },
+        get and() {
+          return new r(`${t} and`);
+        },
+        get or() {
+          return new r(`${t},`);
+        }
+      }), e;
+    });
+    this.base = t;
+  }
+  custom(t) {
+    return this.next(`${this.base} ${t}`);
+  }
+  minWidth(t) {
+    const e = typeof t == "number" ? `${t}px` : t, n = `${this.base} (min-width: ${e})`;
+    return this.next(n);
+  }
+  maxWidth(t) {
+    const e = typeof t == "number" ? `${t}px` : t, n = `${this.base} (max-width: ${e})`;
+    return this.next(n);
+  }
+  minHeight(t) {
+    const e = typeof t == "number" ? `${t}px` : t, n = `${this.base} (min-height: ${e})`;
+    return this.next(n);
+  }
+  maxHeight(t) {
+    const e = typeof t == "number" ? `${t}px` : t, n = `${this.base} (max-height: ${e})`;
+    return this.next(n);
+  }
+  get portrait() {
+    const t = `${this.base} (orientation: portrait)`;
+    return this.next(t);
+  }
+  get landscape() {
+    const t = `${this.base} (orientation: landscape)`;
+    return this.next(t);
+  }
+  prefersColorScheme(t) {
+    const e = `${this.base} (prefers-color-scheme: ${t})`;
+    return this.next(e);
+  }
+  get dark() {
+    return this.prefersColorScheme("dark");
+  }
+  get light() {
+    return this.prefersColorScheme("light");
+  }
+  get print() {
+    const t = `${this.base} print`;
+    return this.next(t);
+  }
+  get screen() {
+    const t = `${this.base} screen`;
+    return this.next(t);
+  }
+  get speech() {
+    const t = `${this.base} speech`;
+    return this.next(t);
+  }
+  get all() {
+    const t = `${this.base} all`;
+    return this.next(t);
+  }
+  get not() {
+    const t = `${this.base} not`;
+    return this.next(t);
+  }
+  get reducedMotion() {
+    const t = `${this.base} (prefers-reduced-motion: reduce)`;
+    return this.next(t);
+  }
+}
+const u = new r();
+export {
+  r as MediaQueryFactory,
+  u as media
+};

package/css/merge.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=(...t)=>t.flat().reduce((e,r)=>r!=null&&r._current?{...e,...r._current}:{...e,...r},{});exports.mergeStyles=u;

package/css/merge.d.ts

@@ -0,0 +1,6 @@
+import { CSSinJS } from '../types';
+interface StyleFactory {
+    _current: Record<string, any>;
+}
+export declare const mergeStyles: <T extends StyleFactory | CSSinJS>(...styles: T[]) => T;
+export {};

package/css/merge.js

@@ -0,0 +1,4 @@
+const e = (...u) => u.flat().reduce((n, r) => r != null && r._current ? { ...n, ...r._current } : { ...n, ...r }, {});
+export {
+  e as mergeStyles
+};

package/css/token.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=e=>`{${e}}`;exports.token=t;

package/css/token.d.ts

@@ -0,0 +1 @@
+export declare const token: <T extends VariableTokens>(token: T) => string;

package/css/token.js

@@ -0,0 +1,4 @@
+const t = (o) => `{${o}}`;
+export {
+  t as token
+};

package/{dash-case-DKzpenwY.cjs → dash-case-BJEkFEGQ.cjs}

@@ -1 +1 @@
-"use strict";const n=e=>String.fromCharCode(e+(e>25?39:97)),i=(e,r)=>{let t="",a;for(a=Math.abs(e);a>52;a=a/52|0)t=n(a%52)+t;return t=n(a%52)+t,t.length<r?t=t.padStart(r,"a"):t.length>r&&(t=t.slice(-r)),t},o=(e,r)=>{let t=r.length;for(;t;)e=e*33^r.charCodeAt(--t);return e},c=(e,r=3)=>{const t=o(5381,JSON.stringify(e))>>>0;return i(t,r)};function s(e){return e?typeof e!="string"?s(String(e)):e.replace(/\s/g,"-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g,(r,t)=>(t>0?"-":"")+r.toLowerCase()):""}exports.dashCase=s;exports.toHash=c;
+"use strict";const n=e=>String.fromCharCode(e+(e>25?39:97)),i=(e,r)=>{let t="",a;for(a=Math.abs(e);a>52;a=a/52|0)t=n(a%52)+t;return t=n(a%52)+t,t.length<r?t=t.padStart(r,"a"):t.length>r&&(t=t.slice(-r)),t},o=(e,r)=>{let t=r.length;for(;t;)e=e*33^r.charCodeAt(--t);return e},c=(e,r=5)=>{const t=o(5381,JSON.stringify(e))>>>0;return i(t,r)};function s(e){return e?typeof e!="string"?s(String(e)):e.replace(/[\s.]/g,"-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g,(r,t)=>(t>0?"-":"")+r.toLowerCase()):""}exports.dashCase=s;exports.toHash=c;

package/{dash-case-DMQMcCO6.js → dash-case-DBThphLm.js}

@@ -6,12 +6,12 @@ const n = (e) => String.fromCharCode(e + (e > 25 ? 39 : 97)), o = (e, r) => {
   let t = r.length;
   for (; t; ) e = e * 33 ^ r.charCodeAt(--t);
   return e;
-}, c = (e, r = 3) => {
+}, c = (e, r = 5) => {
   const t = i(5381, JSON.stringify(e)) >>> 0;
   return o(t, r);
 };
 function s(e) {
-  return e ? typeof e != "string" ? s(String(e)) : e.replace(/\s/g, "-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g, (r, t) => (t > 0 ? "-" : "") + r.toLowerCase()) : "";
+  return e ? typeof e != "string" ? s(String(e)) : e.replace(/[\s.]/g, "-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g, (r, t) => (t > 0 ? "-" : "") + r.toLowerCase()) : "";
 }
 export {
   s as d,

package/factories/define-global-styles.d.ts

@@ -0,0 +1,7 @@
+import { GlobalStyles } from '../types/config-types';
+export declare class GlobalStylesFactory {
+    _current: GlobalStyles;
+    constructor(_current: GlobalStyles);
+    get isGlobalDefine(): boolean;
+}
+export declare const defineGlobalStyles: (styles: GlobalStyles) => GlobalStylesFactory;

package/factories/define-templates.d.ts

@@ -0,0 +1,10 @@
+import { CssTemplates } from '../types/config-types';
+export interface TemplatesFactoryParams {
+    templates?: CssTemplates;
+}
+export declare class TemplatesFactory {
+    _current: TemplatesFactoryParams;
+    constructor(_current: TemplatesFactoryParams);
+    get isDefineTemplates(): boolean;
+}
+export declare const defineTemplates: (templates: CssTemplates) => TemplatesFactory;

package/factories/define-variables.d.ts

@@ -0,0 +1,12 @@
+import { SaltyVariables } from '../types/config-types';
+export declare class VariablesFactory {
+    _current: SaltyVariables;
+    constructor(_current: SaltyVariables);
+    get isDefineVariables(): boolean;
+}
+/**
+   * Base level variables that can be used in all styles as they are applied globally to :root.
+   @param responsive Variables that are defined for different media queries.
+   @param conditional Variables that are defined for different parent selectors (classes or data attributes).
+   */
+export declare const defineVariables: (variables: SaltyVariables) => VariablesFactory;

package/factories/index.d.ts

@@ -0,0 +1,3 @@
+export * from './define-global-styles';
+export * from './define-variables';
+export * from './define-templates';

package/generators/class-name-generator.d.ts

@@ -0,0 +1,6 @@
+import { StylesGenerator } from './styles-generator';
+import { StyledParams } from '../types';
+export declare class ClassNameGenerator<const STYLE_PARAMS extends StyledParams = StyledParams> extends StylesGenerator<STYLE_PARAMS> {
+    _params: STYLE_PARAMS;
+    constructor(_params: STYLE_PARAMS);
+}

package/generators/index.cjs

@@ -0,0 +1 @@
+"use strict";var b=Object.defineProperty;var N=(e,s,t)=>s in e?b(e,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[s]=t;var u=(e,s,t)=>N(e,typeof s!="symbol"?s+"":s,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("../parse-styles-3zK35muR.cjs"),m=require("../dash-case-BJEkFEGQ.cjs");class f{constructor(s){u(this,"buildContext",{});this.params=s}get hash(){return m.toHash(this.params.base||this.params)}get cssClassName(){return this.hash}get classNames(){const s=[this.hash],{className:t}=this.params;return typeof t=="string"&&s.push(t),typeof t=="object"&&s.push(...t),s.join(" ")}get cssFileName(){const{callerName:s}=this.buildContext;return s?`cl_${m.dashCase(s)}-${this.hash}.css`:`${this.hash}.css`}get css(){const{base:s={},variants:t={},compoundVariants:n=[]}=this.params,{config:i}=this.buildContext,o={...s,variants:t,compoundVariants:n};return C.parseStyles(o,`.${this.cssClassName}`,i)}_withBuildContext(s){return this.buildContext=s,this}}class S extends f{constructor(s){super(s),this._params=s}}class v extends f{constructor(s,t){super(t),this.tagName=s,this._params=t}get priority(){var s;return typeof this.tagName=="function"||typeof this.tagName=="object"?(((s=this.tagName.generator)==null?void 0:s.priority)||0)+1:0}get clientProps(){const{element:s,variants:t={},compoundVariants:n=[],defaultVariants:i={},defaultProps:o={},passProps:h}=this.params,{callerName:y,isProduction:g}=this.buildContext,c=new Set([]),l=a=>{const r=i[a];r!==void 0?c.add(`${a}=${String(r)}`):c.add(a)};Object.keys(t).forEach(l),n.map(a=>Object.keys(a).forEach(l));const d=new Set([]);if(this.params.base){const a=JSON.stringify(this.params.base).match(/\{props\.([\w\d]+)\}/gi);a&&a.forEach(r=>{const p=r.replace(/\{props\.([\w\d]+)\}/gi,"$1");p&&d.add(p)})}return{element:s,variantKeys:[...c],propValueKeys:[...d],passProps:h,defaultProps:o,attr:{"data-component-name":g?void 0:y}}}}exports.ClassNameGenerator=S;exports.StyledGenerator=v;

package/generators/index.d.ts

@@ -0,0 +1,2 @@
+export * from './class-name-generator';
+export * from './styled-generator';

package/generators/index.js

@@ -0,0 +1,75 @@
+var y = Object.defineProperty;
+var b = (e, s, t) => s in e ? y(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
+var u = (e, s, t) => b(e, typeof s != "symbol" ? s + "" : s, t);
+import { p as N } from "../parse-styles-DrLhKtqW.js";
+import { t as C, d as x } from "../dash-case-DBThphLm.js";
+class m {
+  constructor(s) {
+    u(this, "buildContext", {});
+    this.params = s;
+  }
+  get hash() {
+    return C(this.params.base || this.params);
+  }
+  get cssClassName() {
+    return this.hash;
+  }
+  get classNames() {
+    const s = [this.hash], { className: t } = this.params;
+    return typeof t == "string" && s.push(t), typeof t == "object" && s.push(...t), s.join(" ");
+  }
+  get cssFileName() {
+    const { callerName: s } = this.buildContext;
+    return s ? `cl_${x(s)}-${this.hash}.css` : `${this.hash}.css`;
+  }
+  get css() {
+    const { base: s = {}, variants: t = {}, compoundVariants: i = [] } = this.params, { config: n } = this.buildContext, o = { ...s, variants: t, compoundVariants: i };
+    return N(o, `.${this.cssClassName}`, n);
+  }
+  _withBuildContext(s) {
+    return this.buildContext = s, this;
+  }
+}
+class $ extends m {
+  constructor(s) {
+    super(s), this._params = s;
+  }
+}
+class j extends m {
+  constructor(s, t) {
+    super(t), this.tagName = s, this._params = t;
+  }
+  get priority() {
+    var s;
+    return typeof this.tagName == "function" || typeof this.tagName == "object" ? (((s = this.tagName.generator) == null ? void 0 : s.priority) || 0) + 1 : 0;
+  }
+  get clientProps() {
+    const { element: s, variants: t = {}, compoundVariants: i = [], defaultVariants: n = {}, defaultProps: o = {}, passProps: h } = this.params, { callerName: f, isProduction: g } = this.buildContext, c = /* @__PURE__ */ new Set([]), p = (a) => {
+      const r = n[a];
+      r !== void 0 ? c.add(`${a}=${String(r)}`) : c.add(a);
+    };
+    Object.keys(t).forEach(p), i.map((a) => Object.keys(a).forEach(p));
+    const d = /* @__PURE__ */ new Set([]);
+    if (this.params.base) {
+      const a = JSON.stringify(this.params.base).match(/\{props\.([\w\d]+)\}/gi);
+      a && a.forEach((r) => {
+        const l = r.replace(/\{props\.([\w\d]+)\}/gi, "$1");
+        l && d.add(l);
+      });
+    }
+    return {
+      element: s,
+      variantKeys: [...c],
+      propValueKeys: [...d],
+      passProps: h,
+      defaultProps: o,
+      attr: {
+        "data-component-name": g ? void 0 : f
+      }
+    };
+  }
+}
+export {
+  $ as ClassNameGenerator,
+  j as StyledGenerator
+};

package/generators/styled-generator.d.ts

@@ -0,0 +1,19 @@
+import { StylesGenerator } from './styles-generator';
+import { StyledParams, Tag } from '../types';
+export interface StyledGeneratorClientProps {
+    element?: string;
+    variantKeys?: string[];
+    propValueKeys?: string[];
+    passProps?: boolean | string | string[];
+    defaultProps?: Record<PropertyKey, unknown>;
+    attr: {
+        [key: string]: any;
+    };
+}
+export declare class StyledGenerator<const STYLE_PARAMS extends StyledParams = StyledParams> extends StylesGenerator<STYLE_PARAMS> {
+    tagName: Tag<any>;
+    _params: STYLE_PARAMS;
+    constructor(tagName: Tag<any>, _params: STYLE_PARAMS);
+    get priority(): number;
+    get clientProps(): StyledGeneratorClientProps;
+}

package/generators/styles-generator.d.ts

@@ -0,0 +1,18 @@
+import { StyledParams } from '../types';
+import { SaltyConfig } from '../types/config-types';
+export interface StylesGeneratorBuildTimeProps {
+    callerName?: string;
+    isProduction?: boolean;
+    config?: SaltyConfig;
+}
+export declare class StylesGenerator<const STYLE_PARAMS extends StyledParams = StyledParams> {
+    params: STYLE_PARAMS;
+    buildContext: StylesGeneratorBuildTimeProps;
+    constructor(params: STYLE_PARAMS);
+    get hash(): string;
+    get cssClassName(): string;
+    get classNames(): string;
+    get cssFileName(): string;
+    get css(): string;
+    _withBuildContext(context: StylesGeneratorBuildTimeProps): this;
+}