@ariaui/typography 0.2.2 → 0.2.3

package/dist/chunk-F7KWOKBZ.js

@@ -0,0 +1,428 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/scale.ts
+var RATIOS = {
+  minorSecond: 1.067,
+  majorSecond: 1.125,
+  minorThird: 1.2,
+  majorThird: 1.25,
+  perfectFourth: 1.333,
+  augmentedFourth: 1.414,
+  perfectFifth: 1.5,
+  goldenRatio: 1.618
+};
+function round(value, decimals = 4) {
+  const f = Math.pow(10, decimals);
+  return Math.round(value * f) / f;
+}
+function defaultLineHeight(sizeRem) {
+  const ratio = Math.max(1.2, Math.min(1.6, 1.6 - (sizeRem - 0.75) * 0.1));
+  return round(sizeRem * ratio);
+}
+function defaultLetterSpacing(sizeRem) {
+  if (sizeRem >= 2) return "-0.02em";
+  if (sizeRem >= 1.5) return "-0.01em";
+  return "0em";
+}
+function createModularScale(base = 1, ratio = RATIOS.majorSecond, stepsUp = 5, stepsDown = 2) {
+  const result = {};
+  for (let i = -stepsDown; i <= stepsUp; i++) {
+    const sizeRem = round(base * Math.pow(ratio, i));
+    const lh = defaultLineHeight(sizeRem);
+    result[String(i)] = {
+      size: `${sizeRem}rem`,
+      lineHeight: `${lh}rem`,
+      letterSpacing: defaultLetterSpacing(sizeRem)
+    };
+  }
+  return result;
+}
+function extendScale(base, overrides) {
+  const result = __spreadValues({}, base);
+  for (const [key, partial] of Object.entries(overrides)) {
+    const existing = result[key];
+    if (existing) {
+      result[key] = __spreadValues(__spreadValues({}, existing), partial);
+    } else {
+      if (!partial.size || !partial.lineHeight || !partial.letterSpacing) {
+        throw new Error(
+          `New scale step "${key}" requires size, lineHeight, and letterSpacing`
+        );
+      }
+      result[key] = partial;
+    }
+  }
+  return result;
+}
+function getStep(scale, name) {
+  return scale[name];
+}
+function listSteps(scale) {
+  return Object.keys(scale).sort((a, b) => {
+    const sA = parseFloat(scale[a].size);
+    const sB = parseFloat(scale[b].size);
+    return sA - sB;
+  });
+}
+
+// src/fluid.ts
+function round2(value, decimals = 4) {
+  const f = Math.pow(10, decimals);
+  return Math.round(value * f) / f;
+}
+function parseRem(value) {
+  const n = parseFloat(value);
+  if (Number.isNaN(n)) {
+    throw new Error(`Cannot parse rem value: "${value}"`);
+  }
+  return n;
+}
+function fluidSize(config) {
+  const { minSize, maxSize, minViewport = 320, maxViewport = 1280 } = config;
+  if (minSize === maxSize) {
+    return `${minSize}rem`;
+  }
+  const lo = Math.min(minSize, maxSize);
+  const hi = Math.max(minSize, maxSize);
+  const slope = (hi - lo) / (maxViewport - minViewport);
+  const slopeVw = round2(slope * 100, 4);
+  const intercept = round2(lo - slope * minViewport / 16, 4);
+  return `clamp(${lo}rem, ${intercept}rem + ${slopeVw}vw, ${hi}rem)`;
+}
+function fluidStyle(min, max, viewports) {
+  var _a;
+  const minSize = parseRem(min.size);
+  const maxSize = parseRem(max.size);
+  const minLh = parseRem(min.lineHeight);
+  const maxLh = parseRem(max.lineHeight);
+  const fontSize = fluidSize({
+    minSize,
+    maxSize,
+    minViewport: viewports == null ? void 0 : viewports.min,
+    maxViewport: viewports == null ? void 0 : viewports.max
+  });
+  const lineHeight = fluidSize({
+    minSize: minLh,
+    maxSize: maxLh,
+    minViewport: viewports == null ? void 0 : viewports.min,
+    maxViewport: viewports == null ? void 0 : viewports.max
+  });
+  return {
+    fontSize,
+    lineHeight,
+    // Use the larger step's tracking (tighter for headings)
+    letterSpacing: maxSize >= minSize ? max.letterSpacing : min.letterSpacing,
+    fontWeight: (_a = max.fontWeight) != null ? _a : min.fontWeight
+  };
+}
+function fluidScale(mobileScale, desktopScale, viewports) {
+  const result = {};
+  for (const key of Object.keys(desktopScale)) {
+    const mobile = mobileScale[key];
+    const desktop = desktopScale[key];
+    if (!mobile) {
+      result[key] = {
+        fontSize: desktop.size,
+        lineHeight: desktop.lineHeight,
+        letterSpacing: desktop.letterSpacing,
+        fontWeight: desktop.fontWeight
+      };
+      continue;
+    }
+    result[key] = fluidStyle(mobile, desktop, viewports);
+  }
+  return result;
+}
+
+// src/font-stack.ts
+var systemStack = {
+  name: "system",
+  families: [
+    "system-ui",
+    "-apple-system",
+    "BlinkMacSystemFont",
+    "'Segoe UI'",
+    "Roboto",
+    "'Helvetica Neue'",
+    "Arial",
+    "sans-serif",
+    "'Apple Color Emoji'",
+    "'Segoe UI Emoji'"
+  ]
+};
+var sansStack = {
+  name: "sans",
+  families: [
+    "'Inter'",
+    "system-ui",
+    "-apple-system",
+    "BlinkMacSystemFont",
+    "'Segoe UI'",
+    "Roboto",
+    "'Helvetica Neue'",
+    "Arial",
+    "sans-serif"
+  ]
+};
+var serifStack = {
+  name: "serif",
+  families: [
+    "Georgia",
+    "'Times New Roman'",
+    "Times",
+    "serif"
+  ]
+};
+var monoStack = {
+  name: "mono",
+  families: [
+    "'JetBrains Mono'",
+    "'Fira Code'",
+    "'SF Mono'",
+    "Menlo",
+    "Consolas",
+    "'Liberation Mono'",
+    "'Courier New'",
+    "monospace"
+  ]
+};
+var FONT_STACKS = {
+  system: systemStack,
+  sans: sansStack,
+  serif: serifStack,
+  mono: monoStack
+};
+function buildFontFamily(stack) {
+  return stack.families.join(", ");
+}
+function createFontStack(name, primary, fallback = systemStack) {
+  const quoted = primary.includes("'") || primary.includes('"') ? primary : `'${primary}'`;
+  return {
+    name,
+    families: [quoted, ...fallback.families]
+  };
+}
+
+// src/style.ts
+function createTextStyle(step, overrides) {
+  return __spreadValues({
+    fontSize: step.size,
+    lineHeight: step.lineHeight,
+    letterSpacing: step.letterSpacing,
+    fontWeight: step.fontWeight
+  }, overrides);
+}
+function mergeTextStyles(...styles) {
+  let fontSize;
+  let lineHeight;
+  let letterSpacing;
+  let fontWeight;
+  let fontFamily;
+  for (const style of styles) {
+    if (style.fontSize !== void 0) fontSize = style.fontSize;
+    if (style.lineHeight !== void 0) lineHeight = style.lineHeight;
+    if (style.letterSpacing !== void 0) letterSpacing = style.letterSpacing;
+    if (style.fontWeight !== void 0) fontWeight = style.fontWeight;
+    if (style.fontFamily !== void 0) fontFamily = style.fontFamily;
+  }
+  if (!fontSize || !lineHeight || !letterSpacing) {
+    throw new Error(
+      "mergeTextStyles: result must have fontSize, lineHeight, and letterSpacing"
+    );
+  }
+  return { fontSize, lineHeight, letterSpacing, fontWeight, fontFamily };
+}
+
+// src/format.ts
+function toCSSProperties(style) {
+  const props = {
+    fontSize: style.fontSize,
+    lineHeight: style.lineHeight,
+    letterSpacing: style.letterSpacing
+  };
+  if (style.fontWeight) props.fontWeight = style.fontWeight;
+  if (style.fontFamily) props.fontFamily = style.fontFamily;
+  return props;
+}
+function toCSSDeclarations(style) {
+  const lines = [
+    `font-size: ${style.fontSize};`,
+    `line-height: ${style.lineHeight};`,
+    `letter-spacing: ${style.letterSpacing};`
+  ];
+  if (style.fontWeight) lines.push(`font-weight: ${style.fontWeight};`);
+  if (style.fontFamily) lines.push(`font-family: ${style.fontFamily};`);
+  return lines.join("\n");
+}
+function toCSSVars(stepName) {
+  const lines = [
+    `font-size: var(--font-size-${stepName});`,
+    `line-height: var(--font-size-${stepName}--line-height);`
+  ];
+  lines.push(`letter-spacing: var(--font-size-${stepName}--letter-spacing, 0em);`);
+  return lines.join("\n");
+}
+function toTailwindClasses(style) {
+  const parts = [
+    `text-[${style.fontSize}]`,
+    `leading-[${style.lineHeight}]`,
+    `tracking-[${style.letterSpacing}]`
+  ];
+  if (style.fontWeight) parts.push(`font-[${style.fontWeight}]`);
+  return parts.join(" ");
+}
+
+// src/responsive.ts
+var BREAKPOINTS = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536
+};
+function responsiveStyle(config, breakpoints = BREAKPOINTS) {
+  const defaultEntry = config["default"];
+  if (!defaultEntry) {
+    throw new Error('responsiveStyle: "default" entry is required');
+  }
+  const defaultStyle = isTextStyle(defaultEntry) ? defaultEntry : createTextStyle(defaultEntry);
+  const bps = {};
+  for (const [key, value] of Object.entries(config)) {
+    if (key === "default") continue;
+    if (!(key in breakpoints)) {
+      throw new Error(
+        `responsiveStyle: unknown breakpoint "${key}". Available: ${Object.keys(breakpoints).join(", ")}`
+      );
+    }
+    bps[key] = isTextStyle(value) ? value : createTextStyle(value);
+  }
+  return { default: defaultStyle, breakpoints: bps };
+}
+function sortedBreakpoints(responsive, breakpoints = BREAKPOINTS) {
+  return Object.entries(responsive.breakpoints).map(([name, style]) => {
+    var _a;
+    return [name, (_a = breakpoints[name]) != null ? _a : 0, style];
+  }).sort((a, b) => a[1] - b[1]);
+}
+function isTextStyle(value) {
+  return "fontSize" in value;
+}
+
+// src/measure.ts
+function parseRem2(value) {
+  const n = parseFloat(value);
+  if (Number.isNaN(n)) {
+    throw new Error(`Cannot parse rem value: "${value}"`);
+  }
+  return n;
+}
+function round3(value, decimals = 2) {
+  const f = Math.pow(10, decimals);
+  return Math.round(value * f) / f;
+}
+function optimalMeasure(options) {
+  var _a;
+  const ideal = (_a = options == null ? void 0 : options.ideal) != null ? _a : 66;
+  return `${ideal}ch`;
+}
+function measureRange(options) {
+  var _a, _b, _c;
+  const min = (_a = options == null ? void 0 : options.min) != null ? _a : 45;
+  const max = (_b = options == null ? void 0 : options.max) != null ? _b : 75;
+  const ideal = (_c = options == null ? void 0 : options.ideal) != null ? _c : 66;
+  return {
+    min: `${min}ch`,
+    max: `${max}ch`,
+    ideal: `${ideal}ch`
+  };
+}
+function snapToBaseline(fontSize, config) {
+  var _a, _b;
+  const size = parseRem2(fontSize);
+  const grid = (_a = config == null ? void 0 : config.gridUnit) != null ? _a : 0.25;
+  const rounding = (_b = config == null ? void 0 : config.rounding) != null ? _b : "ceil";
+  const minLh = size * 1.2;
+  const steps = minLh / grid;
+  let snapped;
+  switch (rounding) {
+    case "floor":
+      snapped = Math.floor(steps) * grid;
+      if (snapped < size) snapped = Math.ceil(size / grid) * grid;
+      break;
+    case "round":
+      snapped = Math.round(steps) * grid;
+      if (snapped < size) snapped += grid;
+      break;
+    case "ceil":
+    default:
+      snapped = Math.ceil(steps) * grid;
+      break;
+  }
+  return `${round3(snapped, 4)}rem`;
+}
+function rhythmSpacing(lineHeight, lines = 1, gridUnit = 0.25) {
+  return `${round3(lines * gridUnit, 4)}rem`;
+}
+function verticalRhythm(fontSize, spacingLines = 4, config) {
+  var _a;
+  const grid = (_a = config == null ? void 0 : config.gridUnit) != null ? _a : 0.25;
+  const lineHeight = snapToBaseline(fontSize, config);
+  const spacing = rhythmSpacing(lineHeight, spacingLines, grid);
+  return {
+    lineHeight,
+    marginTop: spacing,
+    marginBottom: spacing
+  };
+}
+
+export {
+  __spreadValues,
+  __spreadProps,
+  RATIOS,
+  createModularScale,
+  extendScale,
+  getStep,
+  listSteps,
+  fluidSize,
+  fluidStyle,
+  fluidScale,
+  systemStack,
+  sansStack,
+  serifStack,
+  monoStack,
+  FONT_STACKS,
+  buildFontFamily,
+  createFontStack,
+  createTextStyle,
+  mergeTextStyles,
+  toCSSProperties,
+  toCSSDeclarations,
+  toCSSVars,
+  toTailwindClasses,
+  BREAKPOINTS,
+  responsiveStyle,
+  sortedBreakpoints,
+  optimalMeasure,
+  measureRange,
+  snapToBaseline,
+  rhythmSpacing,
+  verticalRhythm
+};