@xaui/native 0.9.1-alpha.2 → 0.9.1-alpha.20

package/dist/{chunk-RCP3SD26.js → chunk-N7C4UNUL.js}

@@ -1,6 +1,6 @@
 import {
   deriveTint
-} from "./chunk-RBNCR5KB.js";
+} from "./chunk-A3EGFI6T.js";
 
 // src/system/recipe/resolve-tint.ts
 var TINT_SLICE_BY_SUFFIX = [
@@ -145,130 +145,6 @@ function apply(fns, theme, colors) {
   return merged;
 }
 
-// src/system/slot/children-to-string.ts
-import { isValidElement } from "react";
-function childrenToString(children) {
-  const text = stringify(children);
-  return text === null || text === "" ? null : text;
-}
-function stringify(node) {
-  if (node === null || node === void 0 || typeof node === "boolean") return "";
-  if (typeof node === "string") return node;
-  if (typeof node === "number") return String(node);
-  if (isValidElement(node)) return null;
-  if (Array.isArray(node)) {
-    let text = "";
-    for (const child of node) {
-      const part = stringify(child);
-      if (part === null) return null;
-      text += part;
-    }
-    return text;
-  }
-  return null;
-}
-
-// src/system/slot/create-slot-context.ts
-import { createContext, useContext } from "react";
-function createSlotContext(name) {
-  const Context = createContext(null);
-  Context.displayName = `XAUI.${name}.Context`;
-  function useSlotContext() {
-    const value = useContext(Context);
-    if (value === null) {
-      const error = new Error(
-        `XAUI: use${name} must be called inside <${name}>. A slot reads the values its root resolved, so it can only be rendered as a child of one.`
-      );
-      Error.captureStackTrace?.(
-        error,
-        useSlotContext
-      );
-      throw error;
-    }
-    return value;
-  }
-  return [Context.Provider, useSlotContext];
-}
-
-// src/system/slot/merge-refs.ts
-function mergeRefs(...refs) {
-  return (value) => {
-    for (const ref of refs) {
-      if (typeof ref === "function") ref(value);
-      else if (ref) ref.current = value;
-    }
-  };
-}
-
-// src/system/slot/merge-props.ts
-var EVENT_HANDLER = /^on[A-Z]/;
-function mergeProps(ours, theirs) {
-  const merged = { ...ours };
-  for (const key of Object.keys(theirs)) {
-    const ourValue = ours[key];
-    const theirValue = theirs[key];
-    if (EVENT_HANDLER.test(key)) {
-      merged[key] = composeHandlers(ourValue, theirValue);
-    } else if (key === "style") {
-      merged[key] = mergeStyles(ourValue, theirValue);
-    } else if (key === "ref") {
-      merged[key] = mergeRefs(
-        ourValue,
-        theirValue
-      );
-    } else {
-      merged[key] = theirValue;
-    }
-  }
-  return merged;
-}
-function composeHandlers(ours, theirs) {
-  if (typeof ours !== "function") return theirs;
-  if (typeof theirs !== "function") return ours;
-  return (...args) => {
-    ;
-    ours(...args);
-    return theirs(...args);
-  };
-}
-function mergeStyles(ours, theirs) {
-  if (typeof ours === "function" || typeof theirs === "function") {
-    return (state) => [
-      resolveStyle(ours, state),
-      resolveStyle(theirs, state)
-    ];
-  }
-  return [ours, theirs];
-}
-function resolveStyle(style, state) {
-  return typeof style === "function" ? style(state) : style;
-}
-
-// src/system/slot/slot.tsx
-import { cloneElement, forwardRef, isValidElement as isValidElement2 } from "react";
-var Slot = forwardRef(function Slot2({ children, ...ours }, ref) {
-  if (!isValidElement2(children)) {
-    throw new Error(
-      "XAUI: asChild expects exactly one React element as its child, and merges the component's props into it. Text, a fragment, several children or none give it nothing to merge into \u2014 drop `asChild` to render the component itself."
-    );
-  }
-  const child = children;
-  const merged = mergeProps(ours, child.props);
-  merged.ref = mergeRefs(ref, refOf(child));
-  return cloneElement(child, merged);
-});
-Slot.displayName = "XAUI.Slot";
-function refOf(element) {
-  const fromProps = element.props.ref;
-  const fromElement = element.ref;
-  return fromProps ?? fromElement;
-}
-
 export {
-  createRecipe,
-  childrenToString,
-  createSlotContext,
-  mergeRefs,
-  mergeProps,
-  Slot
+  createRecipe
 };

package/dist/chunk-RMLFMRWL.js

@@ -0,0 +1,102 @@
+import {
+  createRecipe
+} from "./chunk-N7C4UNUL.js";
+import {
+  Slot,
+  useStyleProps
+} from "./chunk-EXX6ATAS.js";
+import {
+  useXAUITheme
+} from "./chunk-A3EGFI6T.js";
+
+// src/components/typography/typography.tsx
+import { forwardRef } from "react";
+import { Text } from "react-native";
+
+// src/components/typography/typography.recipe.ts
+var SLOTS = ["root"];
+var VARIANT_TOKENS = {
+  h1: { fg: "foreground" },
+  h2: { fg: "foreground" },
+  h3: { fg: "foreground" },
+  h4: { fg: "foreground" },
+  h5: { fg: "foreground" },
+  h6: { fg: "foreground" },
+  body: { fg: "foreground" },
+  "body-sm": { fg: "foreground" },
+  "body-xs": { fg: "foreground" },
+  code: { fg: "foreground" }
+};
+var ROLES = {
+  h1: { step: "4xl", weight: "bold", family: "heading", letterSpacing: -0.5 },
+  h2: { step: "3xl", weight: "bold", family: "heading", letterSpacing: -0.4 },
+  h3: { step: "2xl", weight: "bold", family: "heading", letterSpacing: -0.3 },
+  h4: { step: "xl", weight: "semibold", family: "heading" },
+  h5: { step: "lg", weight: "semibold", family: "heading" },
+  h6: { step: "md", weight: "semibold", family: "heading" },
+  body: { step: "md", weight: "regular", family: "body" },
+  "body-sm": { step: "sm", weight: "regular", family: "body" },
+  "body-xs": { step: "xs", weight: "regular", family: "body" },
+  code: { step: "sm", weight: "regular", family: "mono", chip: true }
+};
+function metricsOf({ step, weight, family, letterSpacing, chip }) {
+  return (theme) => ({
+    root: {
+      fontSize: theme.fontSizes[step],
+      lineHeight: theme.lineHeights[step],
+      fontWeight: theme.fontWeights[weight],
+      fontFamily: theme.fontFamilies[family],
+      ...letterSpacing === void 0 ? {} : { letterSpacing },
+      ...chip === void 0 ? {} : {
+        alignSelf: "flex-start",
+        backgroundColor: theme.colors.default,
+        paddingHorizontal: theme.spacing(1.5),
+        paddingVertical: theme.spacing(0.5),
+        borderRadius: theme.radius.md
+      }
+    }
+  });
+}
+var ROLE_AXIS = Object.fromEntries(
+  Object.entries(ROLES).map(([name, spec]) => [name, metricsOf(spec)])
+);
+var typographyRecipe = createRecipe({
+  slots: SLOTS,
+  variantTokens: VARIANT_TOKENS,
+  // Ink only. The chip's fill is a token, not a role, so it belongs to the metrics above —
+  // where it also stays inside the cache key instead of being recomputed with the tint.
+  paint: (_theme, colors) => ({ root: { color: colors.fg } }),
+  variants: { variant: ROLE_AXIS },
+  defaultVariants: { variant: "body" }
+});
+
+// src/components/typography/typography.tsx
+import { jsx } from "react/jsx-runtime";
+var Typography = forwardRef(function Typography2({ children, variant, color, asChild = false, style, ...props }, ref) {
+  const theme = useXAUITheme();
+  const [styleProps, rest] = useStyleProps(props);
+  const selection = { variant };
+  const styles = typographyRecipe.resolve({ theme, selection });
+  const tint = color ? typographyRecipe.tint({ theme, color, selection }) : void 0;
+  const rootStyle = [styles.root, tint?.root, styleProps, style];
+  const Root = asChild ? Slot : Text;
+  return /* @__PURE__ */ jsx(Root, { ref, style: rootStyle, ...rest, children });
+});
+Typography.displayName = "XAUI.Typography";
+
+// src/components/typography/text-span.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { Text as Text2 } from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var TextSpan = forwardRef2(function TextSpan2({ children, asChild = false, style, ...props }, ref) {
+  const [styleProps, rest] = useStyleProps(props);
+  const Root = asChild ? Slot : Text2;
+  return /* @__PURE__ */ jsx2(Root, { ref, style: [styleProps, style], ...rest, children });
+});
+TextSpan.displayName = "XAUI.TextSpan";
+
+export {
+  typographyRecipe,
+  Typography,
+  TextSpan
+};

package/dist/chunk-UBA6AEY6.cjs

@@ -0,0 +1,102 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkUVO4GFSWcjs = require('./chunk-UVO4GFSW.cjs');
+
+
+
+var _chunkEVXZGNPAcjs = require('./chunk-EVXZGNPA.cjs');
+
+
+var _chunk57SJ4LJFcjs = require('./chunk-57SJ4LJF.cjs');
+
+// src/components/typography/typography.tsx
+var _react = require('react');
+var _reactnative = require('react-native');
+
+// src/components/typography/typography.recipe.ts
+var SLOTS = ["root"];
+var VARIANT_TOKENS = {
+  h1: { fg: "foreground" },
+  h2: { fg: "foreground" },
+  h3: { fg: "foreground" },
+  h4: { fg: "foreground" },
+  h5: { fg: "foreground" },
+  h6: { fg: "foreground" },
+  body: { fg: "foreground" },
+  "body-sm": { fg: "foreground" },
+  "body-xs": { fg: "foreground" },
+  code: { fg: "foreground" }
+};
+var ROLES = {
+  h1: { step: "4xl", weight: "bold", family: "heading", letterSpacing: -0.5 },
+  h2: { step: "3xl", weight: "bold", family: "heading", letterSpacing: -0.4 },
+  h3: { step: "2xl", weight: "bold", family: "heading", letterSpacing: -0.3 },
+  h4: { step: "xl", weight: "semibold", family: "heading" },
+  h5: { step: "lg", weight: "semibold", family: "heading" },
+  h6: { step: "md", weight: "semibold", family: "heading" },
+  body: { step: "md", weight: "regular", family: "body" },
+  "body-sm": { step: "sm", weight: "regular", family: "body" },
+  "body-xs": { step: "xs", weight: "regular", family: "body" },
+  code: { step: "sm", weight: "regular", family: "mono", chip: true }
+};
+function metricsOf({ step, weight, family, letterSpacing, chip }) {
+  return (theme) => ({
+    root: {
+      fontSize: theme.fontSizes[step],
+      lineHeight: theme.lineHeights[step],
+      fontWeight: theme.fontWeights[weight],
+      fontFamily: theme.fontFamilies[family],
+      ...letterSpacing === void 0 ? {} : { letterSpacing },
+      ...chip === void 0 ? {} : {
+        alignSelf: "flex-start",
+        backgroundColor: theme.colors.default,
+        paddingHorizontal: theme.spacing(1.5),
+        paddingVertical: theme.spacing(0.5),
+        borderRadius: theme.radius.md
+      }
+    }
+  });
+}
+var ROLE_AXIS = Object.fromEntries(
+  Object.entries(ROLES).map(([name, spec]) => [name, metricsOf(spec)])
+);
+var typographyRecipe = _chunkUVO4GFSWcjs.createRecipe.call(void 0, {
+  slots: SLOTS,
+  variantTokens: VARIANT_TOKENS,
+  // Ink only. The chip's fill is a token, not a role, so it belongs to the metrics above —
+  // where it also stays inside the cache key instead of being recomputed with the tint.
+  paint: (_theme, colors) => ({ root: { color: colors.fg } }),
+  variants: { variant: ROLE_AXIS },
+  defaultVariants: { variant: "body" }
+});
+
+// src/components/typography/typography.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var Typography = _react.forwardRef.call(void 0, function Typography2({ children, variant, color, asChild = false, style, ...props }, ref) {
+  const theme = _chunk57SJ4LJFcjs.useXAUITheme.call(void 0, );
+  const [styleProps, rest] = _chunkEVXZGNPAcjs.useStyleProps.call(void 0, props);
+  const selection = { variant };
+  const styles = typographyRecipe.resolve({ theme, selection });
+  const tint = color ? typographyRecipe.tint({ theme, color, selection }) : void 0;
+  const rootStyle = [styles.root, _optionalChain([tint, 'optionalAccess', _ => _.root]), styleProps, style];
+  const Root = asChild ? _chunkEVXZGNPAcjs.Slot : _reactnative.Text;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Root, { ref, style: rootStyle, ...rest, children });
+});
+Typography.displayName = "XAUI.Typography";
+
+// src/components/typography/text-span.tsx
+
+
+
+var TextSpan = _react.forwardRef.call(void 0, function TextSpan2({ children, asChild = false, style, ...props }, ref) {
+  const [styleProps, rest] = _chunkEVXZGNPAcjs.useStyleProps.call(void 0, props);
+  const Root = asChild ? _chunkEVXZGNPAcjs.Slot : _reactnative.Text;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Root, { ref, style: [styleProps, style], ...rest, children });
+});
+TextSpan.displayName = "XAUI.TextSpan";
+
+
+
+
+
+exports.typographyRecipe = typographyRecipe; exports.Typography = Typography; exports.TextSpan = TextSpan;

package/dist/{chunk-B755PRVJ.cjs → chunk-UVO4GFSW.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunkM7P46XKIcjs = require('./chunk-M7P46XKI.cjs');
+var _chunk57SJ4LJFcjs = require('./chunk-57SJ4LJF.cjs');
 
 // src/system/recipe/resolve-tint.ts
 var TINT_SLICE_BY_SUFFIX = [
@@ -17,7 +17,7 @@ function tintSliceFor(token) {
   return "base";
 }
 function resolveTint(tokens, color, theme) {
-  const tint = _chunkM7P46XKIcjs.deriveTint.call(void 0, color, theme);
+  const tint = _chunk57SJ4LJFcjs.deriveTint.call(void 0, color, theme);
   const colors = {};
   for (const [role, token] of Object.entries(_nullishCoalesce(tokens, () => ( {})))) {
     colors[role] = tint[tintSliceFor(token)];
@@ -145,130 +145,6 @@ function apply(fns, theme, colors) {
   return merged;
 }
 
-// src/system/slot/children-to-string.ts
-var _react = require('react');
-function childrenToString(children) {
-  const text = stringify(children);
-  return text === null || text === "" ? null : text;
-}
-function stringify(node) {
-  if (node === null || node === void 0 || typeof node === "boolean") return "";
-  if (typeof node === "string") return node;
-  if (typeof node === "number") return String(node);
-  if (_react.isValidElement.call(void 0, node)) return null;
-  if (Array.isArray(node)) {
-    let text = "";
-    for (const child of node) {
-      const part = stringify(child);
-      if (part === null) return null;
-      text += part;
-    }
-    return text;
-  }
-  return null;
-}
-
-// src/system/slot/create-slot-context.ts
-
-function createSlotContext(name) {
-  const Context = _react.createContext.call(void 0, null);
-  Context.displayName = `XAUI.${name}.Context`;
-  function useSlotContext() {
-    const value = _react.useContext.call(void 0, Context);
-    if (value === null) {
-      const error = new Error(
-        `XAUI: use${name} must be called inside <${name}>. A slot reads the values its root resolved, so it can only be rendered as a child of one.`
-      );
-      _optionalChain([Error, 'access', _4 => _4.captureStackTrace, 'optionalCall', _5 => _5(
-        error,
-        useSlotContext
-      )]);
-      throw error;
-    }
-    return value;
-  }
-  return [Context.Provider, useSlotContext];
-}
-
-// src/system/slot/merge-refs.ts
-function mergeRefs(...refs) {
-  return (value) => {
-    for (const ref of refs) {
-      if (typeof ref === "function") ref(value);
-      else if (ref) ref.current = value;
-    }
-  };
-}
-
-// src/system/slot/merge-props.ts
-var EVENT_HANDLER = /^on[A-Z]/;
-function mergeProps(ours, theirs) {
-  const merged = { ...ours };
-  for (const key of Object.keys(theirs)) {
-    const ourValue = ours[key];
-    const theirValue = theirs[key];
-    if (EVENT_HANDLER.test(key)) {
-      merged[key] = composeHandlers(ourValue, theirValue);
-    } else if (key === "style") {
-      merged[key] = mergeStyles(ourValue, theirValue);
-    } else if (key === "ref") {
-      merged[key] = mergeRefs(
-        ourValue,
-        theirValue
-      );
-    } else {
-      merged[key] = theirValue;
-    }
-  }
-  return merged;
-}
-function composeHandlers(ours, theirs) {
-  if (typeof ours !== "function") return theirs;
-  if (typeof theirs !== "function") return ours;
-  return (...args) => {
-    ;
-    ours(...args);
-    return theirs(...args);
-  };
-}
-function mergeStyles(ours, theirs) {
-  if (typeof ours === "function" || typeof theirs === "function") {
-    return (state) => [
-      resolveStyle(ours, state),
-      resolveStyle(theirs, state)
-    ];
-  }
-  return [ours, theirs];
-}
-function resolveStyle(style, state) {
-  return typeof style === "function" ? style(state) : style;
-}
-
-// src/system/slot/slot.tsx
-
-var Slot = _react.forwardRef.call(void 0, function Slot2({ children, ...ours }, ref) {
-  if (!_react.isValidElement.call(void 0, children)) {
-    throw new Error(
-      "XAUI: asChild expects exactly one React element as its child, and merges the component's props into it. Text, a fragment, several children or none give it nothing to merge into \u2014 drop `asChild` to render the component itself."
-    );
-  }
-  const child = children;
-  const merged = mergeProps(ours, child.props);
-  merged.ref = mergeRefs(ref, refOf(child));
-  return _react.cloneElement.call(void 0, child, merged);
-});
-Slot.displayName = "XAUI.Slot";
-function refOf(element) {
-  const fromProps = element.props.ref;
-  const fromElement = element.ref;
-  return _nullishCoalesce(fromProps, () => ( fromElement));
-}
-
-
-
-
-
-
 
 
-exports.createRecipe = createRecipe; exports.childrenToString = childrenToString; exports.createSlotContext = createSlotContext; exports.mergeRefs = mergeRefs; exports.mergeProps = mergeProps; exports.Slot = Slot;
+exports.createRecipe = createRecipe;