@symbo.ls/scratch 2.10.257 → 2.10.258

package/dist/cjs/index.js

@@ -952,10 +952,13 @@ __export(src_exports, {
   setTheme: () => setTheme,
   setValue: () => setValue,
   setVariables: () => setVariables,
+  splitTransition: () => splitTransition,
   transformBackgroundImage: () => transformBackgroundImage,
   transformBorder: () => transformBorder,
+  transformDuration: () => transformDuration,
   transformShadow: () => transformShadow,
   transformTextStroke: () => transformTextStroke,
+  transformTransition: () => transformTransition,
   transfromGap: () => transfromGap
 });
 module.exports = __toCommonJS(src_exports);
@@ -2500,6 +2503,33 @@ var transformBackgroundImage = (backgroundImage, globalTheme) => {
   }).join(" ");
 };
 var transfromGap = (gap) => (0, import_utils25.isString)(gap) && gap.split(" ").map((v) => getSpacingByKey(v, "gap").gap).join(" ");
+var transformTransition = (transition) => {
+  const arr = transition.split(" ");
+  if (!arr.length)
+    return transition;
+  return arr.map((v) => {
+    if (v.slice(0, 2) === "--")
+      return `var(${v})`;
+    if (v.length < 3 || v.includes("ms")) {
+      const mapWithSequence = getTimingByKey(v);
+      return mapWithSequence.timing || v;
+    }
+    if (getTimingFunction(v))
+      return getTimingFunction(v);
+    return v;
+  }).join(" ");
+};
+var transformDuration = (duration, props, propertyName) => {
+  if (!(0, import_utils25.isString)(duration))
+    return;
+  return duration.split(",").map((v) => getTimingByKey(v).timing || v).join(",");
+};
+var splitTransition = (transition) => {
+  const arr = transition.split(",");
+  if (!arr.length)
+    return;
+  return arr.map(transformTransition).join(",");
+};
 
 // src/set.js
 var import_utils26 = __toESM(require_cjs3(), 1);

package/dist/cjs/transforms/index.js

@@ -856,10 +856,13 @@ var require_cjs3 = __commonJS({
 // src/transforms/index.js
 var transforms_exports = {};
 __export(transforms_exports, {
+  splitTransition: () => splitTransition,
   transformBackgroundImage: () => transformBackgroundImage,
   transformBorder: () => transformBorder,
+  transformDuration: () => transformDuration,
   transformShadow: () => transformShadow,
   transformTextStroke: () => transformTextStroke,
+  transformTransition: () => transformTransition,
   transfromGap: () => transfromGap
 });
 module.exports = __toCommonJS(transforms_exports);
@@ -1140,6 +1143,11 @@ var import_utils3 = __toESM(require_cjs3());
 var import_utils2 = __toESM(require_cjs3());
 
 // ../utils/src/index.js
+var toCamelCase = (str) => {
+  return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(word, index) {
+    return index === 0 ? word.toLowerCase() : word.toUpperCase();
+  }).replaceAll(/\s+/g, "");
+};
 var toDashCase = (val) => val.replace(/[A-Z]/g, (match, offset) => (offset > 0 ? "-" : "") + match.toLowerCase()).replace(".", "-");
 var arrayzeValue = (val) => {
   if ((0, import_utils3.isString)(val))
@@ -1458,6 +1466,22 @@ var getSpacingByKey = (value, propertyName = "padding", sequenceProps) => {
   );
 };
 
+// src/system/timing.js
+var getTimingFunction = (value) => {
+  const CONFIG2 = getActiveConfig();
+  const { TIMING: TIMING2 } = CONFIG2;
+  return TIMING2[value] || TIMING2[toCamelCase(value)] || value;
+};
+var getTimingByKey = (value, property = "timing") => {
+  const CONFIG2 = getActiveConfig();
+  const { TIMING: TIMING2 } = CONFIG2;
+  return getSequenceValuePropertyPair(
+    value,
+    property,
+    TIMING2
+  );
+};
+
 // src/system/document.js
 var import_utils21 = __toESM(require_cjs3(), 1);
 
@@ -1538,3 +1562,30 @@ var transformBackgroundImage = (backgroundImage, globalTheme) => {
   }).join(" ");
 };
 var transfromGap = (gap) => (0, import_utils25.isString)(gap) && gap.split(" ").map((v) => getSpacingByKey(v, "gap").gap).join(" ");
+var transformTransition = (transition) => {
+  const arr = transition.split(" ");
+  if (!arr.length)
+    return transition;
+  return arr.map((v) => {
+    if (v.slice(0, 2) === "--")
+      return `var(${v})`;
+    if (v.length < 3 || v.includes("ms")) {
+      const mapWithSequence = getTimingByKey(v);
+      return mapWithSequence.timing || v;
+    }
+    if (getTimingFunction(v))
+      return getTimingFunction(v);
+    return v;
+  }).join(" ");
+};
+var transformDuration = (duration, props, propertyName) => {
+  if (!(0, import_utils25.isString)(duration))
+    return;
+  return duration.split(",").map((v) => getTimingByKey(v).timing || v).join(",");
+};
+var splitTransition = (transition) => {
+  const arr = transition.split(",");
+  if (!arr.length)
+    return;
+  return arr.map(transformTransition).join(",");
+};

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "symbo.ls",
-  "version": "2.10.257",
+  "version": "2.10.258",
   "files": [
     "src",
     "dist"
@@ -32,5 +32,5 @@
   "peerDependencies": {
     "@emotion/css": "^11.5.0"
   },
-  "gitHead": "3c16c123fa0b6cf00a16e2178bbbfd1049d4c0cc"
+  "gitHead": "988320990c3bd3a293df5c9dce5419ef4551d29e"
 }

package/src/transforms/index.js

@@ -2,7 +2,13 @@
 
 import { isString } from '@domql/utils'
 import { getActiveConfig } from "../factory"
-import { getSpacingByKey, getColor, getMediaColor } from "../system"
+import {
+  getSpacingByKey,
+  getColor,
+  getMediaColor,
+  getTimingByKey,
+  getTimingFunction
+} from "../system"
 
 const isBorderStyle = str => [
   'none',
@@ -68,3 +74,30 @@ export const transformBackgroundImage = (backgroundImage, globalTheme) => {
 export const transfromGap = gap => isString(gap) && (
   gap.split(' ').map(v => getSpacingByKey(v, 'gap').gap).join(' ')
 )
+
+export const transformTransition = transition => {
+  const arr = transition.split(' ')
+
+  if (!arr.length) return transition
+
+  return arr.map(v => {
+    if (v.slice(0, 2) === '--') return `var(${v})`
+    if (v.length < 3 || v.includes('ms')) {
+      const mapWithSequence = getTimingByKey(v)
+      return mapWithSequence.timing || v
+    }
+    if (getTimingFunction(v)) return getTimingFunction(v)
+    return v
+  }).join(' ')
+}
+
+export const transformDuration = (duration, props, propertyName) => {
+  if (!isString(duration)) return
+  return duration.split(',').map(v => getTimingByKey(v).timing || v).join(',')
+}
+
+export const splitTransition = transition => {
+  const arr = transition.split(',')
+  if (!arr.length) return
+  return arr.map(transformTransition).join(',')
+}