@ponti-studios/ui 1.6.0 → 1.7.0

package/src/styles/tokens/generated/native.generated.ts

@@ -1,266 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-export default {
-  text: {
-    "large-title": {
-      fontSize: {
-        value: 34,
-        unit: "px",
-      },
-      lineHeight: {
-        value: 41,
-        unit: "px",
-      },
-      fontWeight: 700,
-      letterSpacing: {
-        value: -0.6,
-        unit: "px",
-      },
-    },
-    title1: {
-      fontSize: {
-        value: 28,
-        unit: "px",
-      },
-      lineHeight: {
-        value: 34,
-        unit: "px",
-      },
-      fontWeight: 700,
-      letterSpacing: {
-        value: -0.4,
-        unit: "px",
-      },
-    },
-    title2: {
-      fontSize: {
-        value: 22,
-        unit: "px",
-      },
-      lineHeight: {
-        value: 28,
-        unit: "px",
-      },
-      fontWeight: 600,
-      letterSpacing: {
-        value: -0.2,
-        unit: "px",
-      },
-    },
-    headline: {
-      fontSize: {
-        value: 17,
-        unit: "px",
-      },
-      lineHeight: {
-        value: 22,
-        unit: "px",
-      },
-      fontWeight: 600,
-      letterSpacing: {
-        value: -0.1,
-        unit: "px",
-      },
-    },
-    body: {
-      fontSize: {
-        value: 17,
-        unit: "px",
-      },
-      lineHeight: {
-        value: 24,
-        unit: "px",
-      },
-      fontWeight: 400,
-      letterSpacing: {
-        value: 0,
-        unit: "px",
-      },
-    },
-    callout: {
-      fontSize: {
-        value: 16,
-        unit: "px",
-      },
-      lineHeight: {
-        value: 22,
-        unit: "px",
-      },
-      fontWeight: 400,
-      letterSpacing: {
-        value: -0.1,
-        unit: "px",
-      },
-    },
-    subhead: {
-      fontSize: {
-        value: 15,
-        unit: "px",
-      },
-      lineHeight: {
-        value: 20,
-        unit: "px",
-      },
-      fontWeight: 400,
-      letterSpacing: {
-        value: 0,
-        unit: "px",
-      },
-    },
-    footnote: {
-      fontSize: {
-        value: 13,
-        unit: "px",
-      },
-      lineHeight: {
-        value: 18,
-        unit: "px",
-      },
-      fontWeight: 400,
-      letterSpacing: {
-        value: 0,
-        unit: "px",
-      },
-    },
-    caption1: {
-      fontSize: {
-        value: 12,
-        unit: "px",
-      },
-      lineHeight: {
-        value: 16,
-        unit: "px",
-      },
-      fontWeight: 400,
-      letterSpacing: {
-        value: 0,
-        unit: "px",
-      },
-    },
-    caption2: {
-      fontSize: {
-        value: 11,
-        unit: "px",
-      },
-      lineHeight: {
-        value: 14,
-        unit: "px",
-      },
-      fontWeight: 500,
-      letterSpacing: {
-        value: 0.2,
-        unit: "px",
-      },
-    },
-    display: {
-      fontSize: {
-        value: 40,
-        unit: "px",
-      },
-      lineHeight: {
-        value: 44,
-        unit: "px",
-      },
-      fontWeight: 700,
-      letterSpacing: {
-        value: -1.2,
-        unit: "px",
-      },
-    },
-    overline: {
-      fontSize: {
-        value: 11,
-        unit: "px",
-      },
-      lineHeight: {
-        value: 16,
-        unit: "px",
-      },
-      fontWeight: 500,
-      letterSpacing: {
-        value: 0.8,
-        unit: "px",
-      },
-      textTransform: "uppercase",
-    },
-    mono: {
-      fontFamily: "Menlo",
-      fontSize: {
-        value: 12,
-        unit: "px",
-      },
-      lineHeight: {
-        value: 16,
-        unit: "px",
-      },
-      fontWeight: 400,
-      letterSpacing: {
-        value: 0,
-        unit: "px",
-      },
-    },
-  },
-  space: {
-    sm: "0.5rem",
-    md: "0.75rem",
-    lg: "1rem",
-    xl: "1.5rem",
-  },
-  "screen-margin": "1rem",
-  "component-size": {
-    sm: "1rem",
-    md: "1.5rem",
-    lg: "2rem",
-    xl: "2.75rem",
-    icon: "1.25rem",
-  },
-  "border-radius": {
-    sm: "0.25rem",
-    md: "0.375rem",
-    lg: "0.5rem",
-    icon: "0.375rem",
-  },
-  "stream-item": {
-    "border-radius": "0rem",
-    "border-width": "1px",
-    gap: "0.75rem",
-    "icon-size": "1.25rem",
-    "min-height": "3.5rem",
-    "padding-horizontal": "1rem",
-    "padding-vertical": "0.5rem",
-  },
-  "font-family": {
-    primary: "System",
-    mono: "Menlo",
-  },
-  motion: {
-    duration: {
-      instant: "0ms",
-      quick: "150ms",
-      standard: "300ms",
-      deliberate: "500ms",
-    },
-    easing: {
-      enter: [0, 0, 0.2, 1],
-      exit: [0.4, 0, 1, 1],
-      inOut: [0.4, 0, 0.2, 1],
-    },
-    distance: {
-      rowEnter: "0.5rem",
-      sceneReveal: "2rem",
-    },
-    opacity: {
-      hidden: 0,
-      visible: 1,
-      disabled: 0.5,
-    },
-    interruption: {
-      policy: "cancel-and-settle",
-    },
-    reducedMotion: {
-      policy: "replace-transform-with-opacity",
-    },
-  },
-};

package/src/styles/tokens/normalize-native.ts

@@ -1,88 +0,0 @@
-import nativeGenerated from "./generated/native.generated";
-
-const toPixels = (value: string) => {
-  if (value.endsWith("rem")) return Number.parseFloat(value) * 16;
-  if (value.endsWith("px")) return Number.parseFloat(value);
-  throw new Error(`Unsupported dimension: ${value}`);
-};
-
-const unwrap = (v: { value: number; unit?: string } | number) =>
-  typeof v === "number" ? v : v.value;
-
-type DimensionValue = number | { value: number; unit?: string };
-
-const makeFlat = (raw: Record<string, unknown>) => ({
-  fontFamily: raw.fontFamily as string | undefined,
-  fontSize: unwrap(raw.fontSize as DimensionValue),
-  fontWeight: raw.fontWeight as number,
-  lineHeight: unwrap(raw.lineHeight as DimensionValue),
-  letterSpacing: unwrap(raw.letterSpacing as DimensionValue),
-  ...(raw.textTransform
-    ? { textTransform: raw.textTransform as "uppercase" | "lowercase" | "capitalize" | "none" }
-    : {}),
-});
-
-const generated = nativeGenerated as unknown as {
-  text: Record<string, Record<string, unknown>>;
-  space: Record<string, string>;
-  "screen-margin": string;
-  "component-size": Record<string, string>;
-  "border-radius": Record<string, string>;
-  "stream-item": Record<string, string>;
-  "font-family": { primary: string; mono: string };
-};
-
-const primaryFont = generated["font-family"].primary;
-
-const typographyEntries = Object.entries(generated.text).map(([key, raw]) => {
-  const flat = makeFlat(raw);
-  if (!flat.fontFamily) flat.fontFamily = primaryFont;
-  return [key, flat] as const;
-});
-
-export const typography = Object.fromEntries(typographyEntries) as Record<
-  string,
-  {
-    fontFamily: string;
-    fontSize: number;
-    fontWeight: number;
-    lineHeight: number;
-    letterSpacing: number;
-    textTransform?: "uppercase" | "lowercase" | "capitalize" | "none";
-  }
->;
-
-export type TypographyVariant = keyof typeof typography;
-
-export const spacing = Object.fromEntries(
-  Object.entries(generated.space).map(([key, value]) => [key, toPixels(value)]),
-) as Record<keyof typeof generated.space, number>;
-
-export type SpacingToken = keyof typeof spacing;
-
-export const screenMargin = toPixels(generated["screen-margin"]);
-
-export const componentSize = Object.fromEntries(
-  Object.entries(generated["component-size"]).map(([key, value]) => [key, toPixels(value)]),
-) as Record<keyof (typeof generated)["component-size"], number>;
-
-export type ComponentSizeToken = keyof typeof componentSize;
-
-export const borderRadius = Object.fromEntries(
-  Object.entries(generated["border-radius"]).map(([key, value]) => [key, toPixels(value)]),
-) as Record<keyof (typeof generated)["border-radius"], number>;
-
-export type BorderRadiusToken = keyof typeof borderRadius;
-
-const rawStreamItem = generated["stream-item"];
-export const streamItem = {
-  borderRadius: toPixels(rawStreamItem["border-radius"]),
-  borderWidth: toPixels(rawStreamItem["border-width"]),
-  gap: toPixels(rawStreamItem.gap),
-  iconSize: toPixels(rawStreamItem["icon-size"]),
-  minHeight: toPixels(rawStreamItem["min-height"]),
-  paddingHorizontal: toPixels(rawStreamItem["padding-horizontal"]),
-  paddingVertical: toPixels(rawStreamItem["padding-vertical"]),
-};
-
-export const fontFamily = generated["font-family"];

package/src/styles/tokens/source/native.tokens.json

@@ -1,204 +0,0 @@
-{
-  "$extensions": {
-    "org.ponti.description": "Semantic and component tokens for React Native consumers. Values reference the shared foundations so mobile stays in lockstep with web. Consumed via @ponti-studios/ui/native."
-  },
-  "space": {
-    "$type": "dimension",
-    "sm": { "$value": "{spacing-scale.2}" },
-    "md": { "$value": "{spacing-scale.3}" },
-    "lg": { "$value": "{spacing-scale.4}" },
-    "xl": { "$value": "{spacing-scale.6}" }
-  },
-  "screen-margin": {
-    "$type": "dimension",
-    "$value": "{spacing-scale.4}"
-  },
-  "component-size": {
-    "$type": "dimension",
-    "sm": { "$value": "{spacing-scale.4}" },
-    "md": { "$value": "{spacing-scale.6}" },
-    "lg": { "$value": "{spacing-scale.8}" },
-    "xl": { "$value": "{spacing-scale.11}" },
-    "icon": { "$value": "{spacing-scale.5}" }
-  },
-  "border-radius": {
-    "$type": "dimension",
-    "sm": { "$value": "{radius.sm}" },
-    "md": { "$value": "{radius.md}" },
-    "lg": { "$value": "{radius.lg}" },
-    "icon": { "$value": "{radius.md}" }
-  },
-  "stream-item": {
-    "$description": "Shared flat list-row look (Inbox, Time, Tasks) — Vercel-style dense list: full-bleed bottom divider, no radius.",
-    "$type": "dimension",
-    "border-radius": { "$value": { "value": 0, "unit": "rem" } },
-    "border-width": { "$value": { "value": 1, "unit": "px" } },
-    "gap": { "$value": "{spacing-scale.3}" },
-    "icon-size": { "$value": "{component-size.icon}" },
-    "min-height": { "$value": "{spacing-scale.14}" },
-    "padding-horizontal": { "$value": "{spacing-scale.4}" },
-    "padding-vertical": { "$value": "{spacing-scale.2}" }
-  },
-  "font-family": {
-    "$type": "string",
-    "primary": { "$value": "System" },
-    "mono": { "$value": "Menlo" }
-  },
-  "text": {
-    "$description": "Apple-HIG-aligned type ramp for native editorial text.",
-    "large-title": {
-      "$type": "typography",
-      "$value": {
-        "fontSize": { "value": 34, "unit": "px" },
-        "lineHeight": { "value": 41, "unit": "px" },
-        "fontWeight": "{font-weight.bold}",
-        "letterSpacing": { "value": -0.6, "unit": "px" }
-      }
-    },
-    "title1": {
-      "$type": "typography",
-      "$value": {
-        "fontSize": { "value": 28, "unit": "px" },
-        "lineHeight": { "value": 34, "unit": "px" },
-        "fontWeight": "{font-weight.bold}",
-        "letterSpacing": { "value": -0.4, "unit": "px" }
-      }
-    },
-    "title2": {
-      "$type": "typography",
-      "$value": {
-        "fontSize": { "value": 22, "unit": "px" },
-        "lineHeight": { "value": 28, "unit": "px" },
-        "fontWeight": "{font-weight.semibold}",
-        "letterSpacing": { "value": -0.2, "unit": "px" }
-      }
-    },
-    "headline": {
-      "$type": "typography",
-      "$value": {
-        "fontSize": { "value": 17, "unit": "px" },
-        "lineHeight": { "value": 22, "unit": "px" },
-        "fontWeight": "{font-weight.semibold}",
-        "letterSpacing": { "value": -0.1, "unit": "px" }
-      }
-    },
-    "body": {
-      "$type": "typography",
-      "$value": {
-        "fontSize": { "value": 17, "unit": "px" },
-        "lineHeight": { "value": 24, "unit": "px" },
-        "fontWeight": "{font-weight.normal}",
-        "letterSpacing": { "value": 0, "unit": "px" }
-      }
-    },
-    "callout": {
-      "$type": "typography",
-      "$value": {
-        "fontSize": { "value": 16, "unit": "px" },
-        "lineHeight": { "value": 22, "unit": "px" },
-        "fontWeight": "{font-weight.normal}",
-        "letterSpacing": { "value": -0.1, "unit": "px" }
-      }
-    },
-    "subhead": {
-      "$type": "typography",
-      "$value": {
-        "fontSize": { "value": 15, "unit": "px" },
-        "lineHeight": { "value": 20, "unit": "px" },
-        "fontWeight": "{font-weight.normal}",
-        "letterSpacing": { "value": 0, "unit": "px" }
-      }
-    },
-    "footnote": {
-      "$type": "typography",
-      "$value": {
-        "fontSize": { "value": 13, "unit": "px" },
-        "lineHeight": { "value": 18, "unit": "px" },
-        "fontWeight": "{font-weight.normal}",
-        "letterSpacing": { "value": 0, "unit": "px" }
-      }
-    },
-    "caption1": {
-      "$type": "typography",
-      "$value": {
-        "fontSize": { "value": 12, "unit": "px" },
-        "lineHeight": { "value": 16, "unit": "px" },
-        "fontWeight": "{font-weight.normal}",
-        "letterSpacing": { "value": 0, "unit": "px" }
-      }
-    },
-    "caption2": {
-      "$type": "typography",
-      "$value": {
-        "fontSize": { "value": 11, "unit": "px" },
-        "lineHeight": { "value": 14, "unit": "px" },
-        "fontWeight": "{font-weight.medium}",
-        "letterSpacing": { "value": 0.2, "unit": "px" }
-      }
-    },
-    "display": {
-      "$type": "typography",
-      "$value": {
-        "fontSize": { "value": 40, "unit": "px" },
-        "lineHeight": { "value": 44, "unit": "px" },
-        "fontWeight": "{font-weight.bold}",
-        "letterSpacing": { "value": -1.2, "unit": "px" }
-      }
-    },
-    "overline": {
-      "$type": "typography",
-      "$value": {
-        "fontSize": { "value": 11, "unit": "px" },
-        "lineHeight": { "value": 16, "unit": "px" },
-        "fontWeight": "{font-weight.medium}",
-        "letterSpacing": { "value": 0.8, "unit": "px" },
-        "textTransform": "uppercase"
-      }
-    },
-    "mono": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "{font-family.mono}",
-        "fontSize": { "value": 12, "unit": "px" },
-        "lineHeight": { "value": 16, "unit": "px" },
-        "fontWeight": "{font-weight.normal}",
-        "letterSpacing": { "value": 0, "unit": "px" }
-      }
-    }
-  },
-  "motion": {
-    "$description": "Portable motion semantics. Platform adapters own runtime animation objects and reduced-motion behavior.",
-    "duration": {
-      "$type": "duration",
-      "instant": { "$value": "0ms" },
-      "quick": { "$value": "{duration.150}" },
-      "standard": { "$value": "{duration.300}" },
-      "deliberate": { "$value": "{duration.500}" }
-    },
-    "easing": {
-      "$type": "cubicBezier",
-      "enter": { "$value": "{ease.out}" },
-      "exit": { "$value": "{ease.in}" },
-      "inOut": { "$value": "{ease.in-out}" }
-    },
-    "distance": {
-      "$type": "dimension",
-      "rowEnter": { "$value": "{spacing-scale.2}" },
-      "sceneReveal": { "$value": "{spacing-scale.8}" }
-    },
-    "opacity": {
-      "$type": "number",
-      "hidden": { "$value": 0 },
-      "visible": { "$value": 1 },
-      "disabled": { "$value": 0.5 }
-    },
-    "interruption": {
-      "$type": "string",
-      "policy": { "$value": "cancel-and-settle" }
-    },
-    "reducedMotion": {
-      "$type": "string",
-      "policy": { "$value": "replace-transform-with-opacity" }
-    }
-  }
-}

package/src/styles/tokens/style-dictionary.native.mjs

@@ -1,26 +0,0 @@
-/**
- * Emits ONLY the native semantic/component tokens (native.tokens.json) as a
- * typed module. Foundations are kept in the dictionary so references resolve,
- * but are filtered out of the output — they already ship via
- * foundations.generated.ts.
- */
-export default {
-  source: [
-    "src/styles/tokens/source/foundations.tokens.json",
-    "src/styles/tokens/source/native.tokens.json",
-  ],
-  platforms: {
-    typescript: {
-      transformGroup: "js",
-      buildPath: "src/styles/tokens/generated/",
-      files: [
-        {
-          destination: "native.generated.ts",
-          format: "javascript/esm",
-          options: { minify: true },
-          filter: (token) => token.filePath.includes("native.tokens.json"),
-        },
-      ],
-    },
-  },
-};