@apple-pie/slice-native 0.1.4 → 0.1.7

package/dist/cjs/src/theme/motion/motion.js

@@ -0,0 +1,15 @@
+'use strict';
+
+/**
+ * Motion for Slice UI
+ */
+const motion = {
+    'motion-magnet': 'cubic-bezier(0.352, 0.003, 0.993, -0.052)',
+    'motion-water': 'cubic-bezier(0.36, 0, 0.64, 1)',
+    'motion-spring': 'linear(0, 0.001 0.3%, 0.008 0.7%, 0.034 1.5%, 0.076 2.3%, 0.138 3.2%, 0.275 4.8%, 0.713 9.4%, 0.836 10.9%, 0.933 12.3%, 1.011 13.7%, 1.074 15.2%, 1.096 15.9%, 1.116 16.7%, 1.132 17.5%, 1.142 18.3%, 1.148 19.1%, 1.15 20%, 1.148 21%, 1.142 22%, 1.133 22.9%, 1.12 24%, 1.048 29.1%, 1.015 31.8%, 1.002 33.3%, 0.991 34.9%, 0.983 36.5%, 0.979 38.1%, 0.977 39.9%, 0.979 42%, 0.997 51.7%, 1.003 57.7%, 1 77%, 1)',
+    'motion-magnet-duration': '0.5s',
+    'motion-water-duration': '0.25s',
+    'motion-spring-duration': '1s',
+};
+
+exports.motion = motion;

package/dist/cjs/src/theme/motion.js

@@ -0,0 +1,47 @@
+'use strict';
+
+/** Convert Slice's explicit CSS curves without importing the React Native runtime. */
+function easing(css) {
+    if (css.startsWith('cubic-bezier(')) {
+        const [x1, y1, x2, y2] = css.slice(13, -1).split(',').map(Number);
+        const sample = (t, a, b) => 3 * (1 - t) ** 2 * t * a + 3 * (1 - t) * t ** 2 * b + t ** 3;
+        return (progress) => {
+            if (progress <= 0)
+                return 0;
+            if (progress >= 1)
+                return 1;
+            let low = 0;
+            let high = 1;
+            for (let i = 0; i < 30; i++) {
+                const middle = (low + high) / 2;
+                if (sample(middle, x1, x2) < progress)
+                    low = middle;
+                else
+                    high = middle;
+            }
+            return sample((low + high) / 2, y1, y2);
+        };
+    }
+    if (!css.startsWith('linear('))
+        throw new Error(`Unsupported Slice easing: ${css}`);
+    const points = css
+        .slice(7, -1)
+        .split(',')
+        .map((entry, index, entries) => {
+        const [value, percent] = entry.trim().split(/\s+/).map(Number.parseFloat);
+        return { value, position: percent === undefined ? index / (entries.length - 1) : percent / 100 };
+    });
+    return (progress) => {
+        if (progress <= 0)
+            return points[0].value;
+        for (let i = 1; i < points.length; i++) {
+            const left = points[i - 1];
+            const right = points[i];
+            if (progress <= right.position)
+                return (left.value + ((right.value - left.value) * (progress - left.position)) / (right.position - left.position));
+        }
+        return points[points.length - 1].value;
+    };
+}
+
+exports.easing = easing;

package/dist/cjs/src/theme/spacing/spacing.js

@@ -0,0 +1,14 @@
+'use strict';
+
+const spacing = {
+    xxs: 2,
+    xs: 4,
+    s: 8,
+    m: 16,
+    l: 24,
+    xl: 32,
+    xxl: 64,
+    h: 128,
+};
+
+exports.spacing = spacing;

package/dist/cjs/src/theme/type/type.js

@@ -0,0 +1,190 @@
+'use strict';
+
+// base family
+const fontFamily = `var(--slice-font-family, "Funnel Sans")`;
+// base weights
+const fontWeights = {
+    regular: 360,
+    medium: 420,
+    bold: 500,
+    extra: 560,
+};
+// base sizes
+const fontSizes = {
+    xs: '0.75rem',
+    s: '0.875rem',
+    m: '0.9375rem',
+    l: '1rem',
+    xl: '1.0625rem',
+    h1: '4.25rem',
+    h2: '3.5rem',
+    h3: '2.75rem',
+    h4: '2rem',
+    h5: '1.5rem',
+    h6: '1.0625rem',
+};
+// base line heights
+const lineHeights = {
+    xs: '116.67%',
+    m: '133.33%',
+    l: '140%',
+    xl: '142.86%',
+    xxl: '162.5%',
+};
+// base letter spacing
+const letterSpacings = {
+    xs: '0.00625em',
+    s: '0.009375em',
+    m: '0.0125em',
+    l: '0.015625em',
+};
+// ** new styles aligned to lyra */
+const type = {
+    'body-xs-regular': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.regular};
+      font-size: ${fontSizes.xs};
+      line-height: ${lineHeights.m};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.m}`,
+    'body-xs-medium': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.medium};
+      font-size: ${fontSizes.xs};
+      line-height: ${lineHeights.m};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.m}`,
+    'body-xs-bold': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.bold};
+      font-size: ${fontSizes.xs};
+      line-height: ${lineHeights.m};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.l}`,
+    'body-s-regular': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.regular};
+      font-size: ${fontSizes.s};
+      line-height: ${lineHeights.xl};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.s}`,
+    'body-s-medium': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.medium};
+      font-size: ${fontSizes.s};
+      line-height: ${lineHeights.xl};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.s}`,
+    'body-s-bold': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.bold};
+      font-size: ${fontSizes.s};
+      line-height: ${lineHeights.xl};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.m}`,
+    'body-m-regular': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.regular};
+      font-size: ${fontSizes.m};
+      line-height: ${lineHeights.l};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.s}`,
+    'body-m-medium': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.medium};
+      font-size: ${fontSizes.m};
+      line-height: ${lineHeights.l};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.s}`,
+    'body-m-bold': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.bold};
+      font-size: ${fontSizes.m};
+      line-height: ${lineHeights.l};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.m}`,
+    'body-l-regular': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.regular};
+      font-size: ${fontSizes.l};
+      line-height: ${lineHeights.xxl};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.xs}`,
+    'body-l-medium': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.medium};
+      font-size: ${fontSizes.l};
+      line-height: ${lineHeights.xxl};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.xs}`,
+    'body-l-bold': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.bold};
+      font-size: ${fontSizes.l};
+      line-height: ${lineHeights.xxl};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.s}`,
+    'body-xl-regular': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.regular};
+      font-size: ${fontSizes.xl};
+      line-height: ${lineHeights.xxl};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.xs}`,
+    'body-xl-medium': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.medium};
+      font-size: ${fontSizes.xl};
+      line-height: ${lineHeights.xxl};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.xs}`,
+    'body-xl-bold': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.bold};
+      font-size: ${fontSizes.xl};
+      line-height: ${lineHeights.xxl};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.s}`,
+    h1: `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.extra};
+      font-size: ${fontSizes.h1};
+      line-height: ${lineHeights.xs};
+      letter-spacing: ${letterSpacings.m}`,
+    h2: `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.extra};
+      font-size: ${fontSizes.h2};
+      line-height: ${lineHeights.xs};
+      letter-spacing: ${letterSpacings.m}`,
+    h3: `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.extra};
+      font-size: ${fontSizes.h3};
+      line-height: ${lineHeights.xs};
+      letter-spacing: ${letterSpacings.m}`,
+    h4: `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.extra};
+      font-size: ${fontSizes.h4};
+      line-height: ${lineHeights.xs};
+      letter-spacing: ${letterSpacings.m}`,
+    h5: `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.extra};
+      font-size: ${fontSizes.h5};
+      line-height: ${lineHeights.xs};
+      letter-spacing: ${letterSpacings.m}`,
+    h6: `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.extra};
+      font-size: ${fontSizes.h6};
+      line-height: ${lineHeights.xs};
+      letter-spacing: ${letterSpacings.m}`,
+};
+
+exports.fontSizes = fontSizes;
+exports.fontWeights = fontWeights;
+exports.letterSpacings = letterSpacings;
+exports.lineHeights = lineHeights;
+exports.type = type;

package/dist/cjs/src/utils/sizes/sizes.js

@@ -0,0 +1,40 @@
+'use strict';
+
+/**
+ * Internal utility converting size props to an absolute number
+ */
+function sizeToNumber(size) {
+    if (!size)
+        return 48;
+    if (typeof size === 'number')
+        return size;
+    switch (size) {
+        case 's': {
+            return 40;
+        }
+        case 'm': {
+            return 48;
+        }
+        case 'l': {
+            return 56;
+        }
+        default:
+            return 48;
+    }
+}
+/** Resolve radius presets; invalid or negative values produce square corners. */
+function borderRadiusToNumber(borderRadius) {
+    if (typeof borderRadius === 'number')
+        return Number.isFinite(borderRadius) ? Math.max(0, borderRadius) : 0;
+    switch (borderRadius) {
+        case 'pill':
+            return 1000;
+        case 'rectangular':
+            return 4;
+        default:
+            return 0;
+    }
+}
+
+exports.borderRadiusToNumber = borderRadiusToNumber;
+exports.sizeToNumber = sizeToNumber;

package/dist/cjs/src/utils/typography/typography.js

@@ -0,0 +1,17 @@
+'use strict';
+
+/**
+ * Simple utility to take text style and returns a defined line height factor
+ * Since there is no relative/percent in native, looks for the fontsize and
+ * derives an absolute line height from the font size
+ */
+function lineHeightTextStyle(styles, lineHeightFactor = 1.2) {
+    if (!Number.isFinite(lineHeightFactor) || lineHeightFactor < 0 || lineHeightFactor > 2) {
+        throw new Error('lineHeightFactor must be a number between 0 and 2');
+    }
+    const fontSize = styles.fontSize ?? 16;
+    const lineHeight = lineHeightFactor * fontSize;
+    return { ...styles, lineHeight };
+}
+
+exports.lineHeightTextStyle = lineHeightTextStyle;