@apple-pie/slice-native 0.1.4 → 0.1.7

package/dist/esm/src/theme/motion.mjs

@@ -0,0 +1,45 @@
+/** 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;
+    };
+}
+
+export { easing };

package/dist/esm/src/theme/spacing/spacing.mjs

@@ -0,0 +1,12 @@
+const spacing = {
+    xxs: 2,
+    xs: 4,
+    s: 8,
+    m: 16,
+    l: 24,
+    xl: 32,
+    xxl: 64,
+    h: 128,
+};
+
+export { spacing };

package/dist/esm/src/theme/type/type.mjs

@@ -0,0 +1,184 @@
+// 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}`,
+};
+
+export { fontSizes, fontWeights, letterSpacings, lineHeights, type };

package/dist/esm/src/utils/sizes/sizes.mjs

@@ -0,0 +1,37 @@
+/**
+ * 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;
+    }
+}
+
+export { borderRadiusToNumber, sizeToNumber };

package/dist/esm/src/utils/typography/typography.mjs

@@ -0,0 +1,15 @@
+/**
+ * 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 };
+}
+
+export { lineHeightTextStyle };