@xaui/native 0.9.1-alpha.3 → 0.9.1-alpha.31

package/dist/chunk-4GTAZM2C.js

@@ -0,0 +1,174 @@
+import {
+  deriveTint
+} from "./chunk-A3EGFI6T.js";
+
+// src/system/recipe/resolve-tint.ts
+var TINT_SLICE_BY_SUFFIX = [
+  [/SoftForeground$/, "softForeground"],
+  [/SoftPressed$/, "softPressed"],
+  [/Soft$/, "soft"],
+  [/Foreground$/, "foreground"],
+  [/Pressed$/, "pressed"]
+];
+function tintSliceFor(token) {
+  for (const [suffix, slice] of TINT_SLICE_BY_SUFFIX) {
+    if (suffix.test(token)) return slice;
+  }
+  return "base";
+}
+function resolveTint(tokens, color, theme) {
+  const tint = deriveTint(color, theme);
+  const colors = {};
+  for (const [role, token] of Object.entries(tokens ?? {})) {
+    colors[role] = tint[tintSliceFor(token)];
+  }
+  return colors;
+}
+
+// src/system/recipe/style-cache.ts
+import { StyleSheet } from "react-native";
+
+// src/system/recipe/variant-map.ts
+var STATE_ORDER = ["focused", "pressed", "disabled"];
+function resolveSelection(defaultVariants, selection) {
+  const resolved = { ...defaultVariants };
+  for (const [axis, value] of Object.entries(selection ?? {})) {
+    if (value !== void 0) resolved[axis] = value;
+  }
+  return resolved;
+}
+function resolveVariantColors(tokens, theme) {
+  const colors = {};
+  for (const [role, token] of entriesOf(tokens)) {
+    const value = theme.colors[token];
+    if (value === void 0) {
+      throw new Error(
+        `XAUI: the recipe names "${token}" for its "${role}" role, but the theme has no such colour token. Check the spelling against XAUIColors.`
+      );
+    }
+    colors[role] = value;
+  }
+  return colors;
+}
+function activeStateFns(states, active) {
+  const fns = [];
+  for (const state of STATE_ORDER) {
+    const fn = active[state] ? states?.[state] : void 0;
+    if (fn) fns.push(fn);
+  }
+  return fns;
+}
+function collectStyleFns(config, selection, states) {
+  const fns = [];
+  if (config.base) fns.push(config.base);
+  if (config.paint) fns.push(config.paint);
+  for (const [axis, values] of Object.entries(config.variants ?? {})) {
+    const value = selection[axis];
+    const fn = value === void 0 ? void 0 : values[value];
+    if (fn) fns.push(fn);
+  }
+  for (const compound of config.compoundVariants ?? []) {
+    if (appliesTo(compound.when, selection)) fns.push(compound.style);
+  }
+  return [...fns, ...activeStateFns(config.states, states)];
+}
+function appliesTo(when, selection) {
+  return Object.entries(when).every(([axis, value]) => selection[axis] === value);
+}
+function entriesOf(tokens) {
+  return Object.entries(tokens ?? {});
+}
+
+// src/system/recipe/style-cache.ts
+function createStyleCache(slots) {
+  const entries = /* @__PURE__ */ new Map();
+  return {
+    read(key, build) {
+      const hit = entries.get(key);
+      if (hit) return hit;
+      const built = build();
+      const complete = {};
+      for (const slot of slots) complete[slot] = built[slot] ?? {};
+      const created = StyleSheet.create(complete);
+      entries.set(key, created);
+      return created;
+    },
+    get size() {
+      return entries.size;
+    },
+    clear() {
+      entries.clear();
+    }
+  };
+}
+function cacheKey(theme, selection, states) {
+  const axes = Object.keys(selection).sort().map((axis) => `${axis}:${selection[axis] ?? "-"}`).join("|");
+  const active = STATE_ORDER.filter((state) => states[state]).join(",");
+  return `${theme.id}|${theme.mode}|${axes}|${active}`;
+}
+
+// src/system/recipe/create-recipe.ts
+function createRecipe(config) {
+  const cache = createStyleCache(config.slots);
+  const tokensFor = (variant) => variant === void 0 ? void 0 : config.variantTokens?.[variant];
+  return {
+    slots: config.slots,
+    resolve({ theme, selection, states = {} }) {
+      const resolved = resolveSelection(config.defaultVariants, selection);
+      return cache.read(cacheKey(theme, resolved, states), () => {
+        const colors = resolveVariantColors(tokensFor(resolved.variant), theme);
+        return apply(collectStyleFns(config, resolved, states), theme, colors);
+      });
+    },
+    tint({ theme, color, selection, states = {} }) {
+      if (!config.paint) return {};
+      const resolved = resolveSelection(config.defaultVariants, selection);
+      const tokens = tokensFor(resolved.variant);
+      if (!tokens) return {};
+      const colors = resolveTint(tokens, color, theme);
+      const fns = [config.paint, ...activeStateFns(config.states, states)];
+      return apply(fns, theme, colors);
+    }
+  };
+}
+function apply(fns, theme, colors) {
+  const merged = {};
+  for (const fn of fns) {
+    const produced = fn(theme, colors);
+    for (const slot of Object.keys(produced)) {
+      const style = produced[slot];
+      if (!style) continue;
+      const previous = merged[slot];
+      merged[slot] = previous ? { ...previous, ...style } : style;
+    }
+  }
+  return merged;
+}
+
+// src/system/recipe/radius-axis.ts
+function radiusAxis(...slots) {
+  const axis = {};
+  for (const key of RADIUS_KEYS) {
+    axis[key] = (theme) => Object.fromEntries(
+      slots.map((slot) => [slot, { borderRadius: theme.radius[key] }])
+    );
+  }
+  return axis;
+}
+var RADIUS_KEYS = [
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl",
+  "4xl",
+  "field",
+  "full"
+];
+
+export {
+  createRecipe,
+  radiusAxis
+};

package/dist/chunk-4XPLPQLM.cjs

@@ -0,0 +1,147 @@
+"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 _chunk5Z4P6WHRcjs = require('./chunk-5Z4P6WHR.cjs');
+
+
+var _chunkWR7YLDVVcjs = require('./chunk-WR7YLDVV.cjs');
+
+
+
+var _chunkZP2E2H2Gcjs = require('./chunk-ZP2E2H2G.cjs');
+
+
+var _chunkGLGU2WFLcjs = require('./chunk-GLGU2WFL.cjs');
+
+// src/components/input-group/input-group-field.tsx
+var _react = require('react');
+
+// src/components/input-group/input-group.context.ts
+var [InputGroupProvider, useInputGroup] = _chunkZP2E2H2Gcjs.createSlotContext.call(void 0, "InputGroup");
+
+// src/components/input-group/input-group.utils.ts
+function decoratorPadding(prefixWidth, suffixWidth) {
+  const paddingStart = prefixWidth > 0 ? prefixWidth : void 0;
+  const paddingEnd = suffixWidth > 0 ? suffixWidth : void 0;
+  if (paddingStart === void 0 && paddingEnd === void 0) return void 0;
+  return { paddingStart, paddingEnd };
+}
+
+// src/components/input-group/input-group-field.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var InputGroupField = _react.forwardRef.call(void 0, 
+  function InputGroupField2({ style, ...props }, ref) {
+    const { prefixWidth, suffixWidth } = useInputGroup();
+    const padding = _react.useMemo.call(void 0, 
+      () => decoratorPadding(prefixWidth, suffixWidth),
+      [prefixWidth, suffixWidth]
+    );
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5Z4P6WHRcjs.InputField, { ref, ...props, style: [padding, style] });
+  }
+);
+InputGroupField.displayName = "XAUI.InputGroup.Field";
+
+// src/components/input-group/input-group-icon.tsx
+
+function InputGroupIcon({ size, color, ...rest }) {
+  const { icon } = _chunk5Z4P6WHRcjs.useInput.call(void 0, );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWR7YLDVVcjs.Icon, { size: _nullishCoalesce(size, () => ( icon.size)), color: _nullishCoalesce(color, () => ( icon.color)), ...rest });
+}
+InputGroupIcon.displayName = "XAUI.InputGroup.Icon";
+
+// src/components/input-group/input-group-prefix.tsx
+
+
+// src/components/input-group/input-group-decorator.tsx
+
+var _reactnative = require('react-native');
+
+var InputGroupDecorator = _react.forwardRef.call(void 0, 
+  function InputGroupDecorator2({ side, children, isDecorative = false, onLayout, style, ...props }, ref) {
+    const { prefixStyle, suffixStyle, isDisabled } = _chunk5Z4P6WHRcjs.useInput.call(void 0, );
+    const { setPrefixWidth, setSuffixWidth } = useInputGroup();
+    const [styleProps, rest] = _chunkGLGU2WFLcjs.useStyleProps.call(void 0, props);
+    const report = side === "prefix" ? setPrefixWidth : setSuffixWidth;
+    const handleLayout = _react.useCallback.call(void 0, 
+      (event) => {
+        report(event.nativeEvent.layout.width);
+        _optionalChain([onLayout, 'optionalCall', _ => _(event)]);
+      },
+      [report, onLayout]
+    );
+    const isInert = isDecorative || isDisabled;
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _reactnative.View,
+      {
+        ref,
+        accessibilityElementsHidden: isDecorative || void 0,
+        importantForAccessibility: isDecorative ? "no-hide-descendants" : void 0,
+        pointerEvents: isInert ? "none" : void 0,
+        ...rest,
+        style: [side === "prefix" ? prefixStyle : suffixStyle, styleProps, style],
+        onLayout: handleLayout,
+        children
+      }
+    );
+  }
+);
+InputGroupDecorator.displayName = "XAUI.InputGroup.Decorator";
+
+// src/components/input-group/input-group-prefix.tsx
+
+var InputGroupPrefix = _react.forwardRef.call(void 0, 
+  function InputGroupPrefix2(props, ref) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InputGroupDecorator, { ref, side: "prefix", ...props });
+  }
+);
+InputGroupPrefix.displayName = "XAUI.InputGroup.Prefix";
+
+// src/components/input-group/input-group-suffix.tsx
+
+
+var InputGroupSuffix = _react.forwardRef.call(void 0, 
+  function InputGroupSuffix2(props, ref) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InputGroupDecorator, { ref, side: "suffix", ...props });
+  }
+);
+InputGroupSuffix.displayName = "XAUI.InputGroup.Suffix";
+
+// src/components/input-group/input-group.tsx
+
+
+
+var InputGroupRoot = _react.forwardRef.call(void 0, function InputGroup({ children, asChild = false, style, ...props }, ref) {
+  const [styleProps, rest] = _chunkGLGU2WFLcjs.useStyleProps.call(void 0, props);
+  const [prefixWidth, setPrefixWidth] = _react.useState.call(void 0, 0);
+  const [suffixWidth, setSuffixWidth] = _react.useState.call(void 0, 0);
+  const context = _react.useMemo.call(void 0, 
+    () => ({ prefixWidth, suffixWidth, setPrefixWidth, setSuffixWidth }),
+    [prefixWidth, suffixWidth]
+  );
+  const rootStyle = [styleProps, style];
+  const surface = asChild ? (
+    // R12 — the caller's element *is* the row.
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZP2E2H2Gcjs.Slot, { ref, ...rest, style: rootStyle, children })
+  ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { ref, ...rest, style: rootStyle, children });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InputGroupProvider, { value: context, children: surface });
+});
+InputGroupRoot.displayName = "XAUI.InputGroup.Root";
+
+// src/components/input-group/index.ts
+var InputGroup2 = Object.assign(InputGroupRoot, {
+  Prefix: InputGroupPrefix,
+  Field: InputGroupField,
+  Suffix: InputGroupSuffix,
+  Icon: InputGroupIcon
+});
+
+
+
+
+
+
+
+
+
+
+exports.useInputGroup = useInputGroup; exports.decoratorPadding = decoratorPadding; exports.InputGroupField = InputGroupField; exports.InputGroupIcon = InputGroupIcon; exports.InputGroupPrefix = InputGroupPrefix; exports.InputGroupSuffix = InputGroupSuffix; exports.InputGroupRoot = InputGroupRoot; exports.InputGroup = InputGroup2;

package/dist/{chunk-3QBT3Q65.cjs → chunk-57SJ4LJF.cjs}

@@ -107,7 +107,10 @@ function deriveTint(tint, theme) {
     foreground,
     soft: alpha(tint, 0.15),
     softForeground: mix(tint, theme.colors.foreground, 0.2),
-    pressed: mix(tint, foreground, 0.1),
+    // Towards the mode's ink, not the tint's own foreground — the same single direction
+    // the token layer takes (P2-API-REVIEW §E). A raw tint has to behave like `accent`
+    // under the finger as much as it does at rest.
+    pressed: mix(tint, theme.colors.foreground, 0.1),
     softPressed: alpha(tint, 0.2)
   };
   cache.set(key, derived);
@@ -122,4 +125,6 @@ function deriveTint(tint, theme) {
 
 
 
-exports.ThemeContext = ThemeContext; exports.useXAUITheme = useXAUITheme; exports.useColorMode = useColorMode; exports.useThemeColor = useThemeColor; exports.mix = mix; exports.alpha = alpha; exports.deriveTint = deriveTint;
+
+
+exports.ThemeContext = ThemeContext; exports.useXAUITheme = useXAUITheme; exports.useColorMode = useColorMode; exports.useThemeColor = useThemeColor; exports.isHex = isHex; exports.mix = mix; exports.alpha = alpha; exports.contrastOn = contrastOn; exports.deriveTint = deriveTint;

package/dist/chunk-5GO7MAVY.cjs

@@ -0,0 +1,74 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
+
+
+
+
+
+
+var _chunk5Z4P6WHRcjs = require('./chunk-5Z4P6WHR.cjs');
+
+
+var _chunkZP2E2H2Gcjs = require('./chunk-ZP2E2H2G.cjs');
+
+
+var _chunkGLGU2WFLcjs = require('./chunk-GLGU2WFL.cjs');
+
+// src/components/text-area/text-area-field.tsx
+var _react = require('react');
+
+// src/components/text-area/text-area.context.ts
+var [TextAreaProvider, useTextArea] = _chunkZP2E2H2Gcjs.createSlotContext.call(void 0, "TextArea");
+
+// src/components/text-area/text-area-field.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var TextAreaField = _react.forwardRef.call(void 0, 
+  function TextAreaField2({ style, scrollEnabled, ...props }, ref) {
+    const { textAreaStyle, textArea } = _chunk5Z4P6WHRcjs.useInput.call(void 0, );
+    const { rows, maxRows } = useTextArea();
+    const [styleProps, rest] = _chunkGLGU2WFLcjs.useStyleProps.call(void 0, props);
+    const height = _react.useMemo.call(void 0, () => {
+      const chrome = textArea.paddingVertical * 2;
+      return {
+        minHeight: rows * textArea.lineHeight + chrome,
+        // Unset, the field grows for as long as the text does. With a ceiling it stops
+        // there and scrolls, which is the only case that needs `scrollEnabled` — a
+        // multiline field that can grow has nothing to scroll.
+        maxHeight: maxRows ? maxRows * textArea.lineHeight + chrome : void 0
+      };
+    }, [rows, maxRows, textArea]);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunk5Z4P6WHRcjs.InputField,
+      {
+        ref,
+        multiline: true,
+        scrollEnabled: _nullishCoalesce(scrollEnabled, () => ( maxRows !== void 0)),
+        ...rest,
+        style: [textAreaStyle, height, styleProps, style]
+      }
+    );
+  }
+);
+TextAreaField.displayName = "XAUI.TextArea.Field";
+
+// src/components/text-area/text-area.tsx
+
+
+var DEFAULT_ROWS = 3;
+var TextAreaRoot = _react.forwardRef.call(void 0, function TextArea({ rows = DEFAULT_ROWS, maxRows, children, ...props }, ref) {
+  const context = _react.useMemo.call(void 0, () => ({ rows, maxRows }), [rows, maxRows]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TextAreaProvider, { value: context, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5Z4P6WHRcjs.InputRoot, { ref, ...props, children }) });
+});
+TextAreaRoot.displayName = "XAUI.TextArea.Root";
+
+// src/components/text-area/index.ts
+var TextArea2 = Object.assign(TextAreaRoot, {
+  Label: _chunk5Z4P6WHRcjs.InputLabel,
+  Field: TextAreaField,
+  Description: _chunk5Z4P6WHRcjs.InputDescription,
+  Error: _chunk5Z4P6WHRcjs.InputError
+});
+
+
+
+
+exports.useTextArea = useTextArea; exports.TextArea = TextArea2;