@xaui/native 0.9.1-alpha.9 → 0.9.1-alpha.90

package/dist/chunk-YVYYONTP.cjs

@@ -0,0 +1,151 @@
+"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 _chunkWDDXU3OHcjs = require('./chunk-WDDXU3OH.cjs');
+
+// src/hooks/use-anchored-position.ts
+var _react = require('react');
+var _reactnative = require('react-native');
+
+// src/utils/placement.ts
+var OPPOSITE = {
+  top: "bottom",
+  bottom: "top",
+  start: "end",
+  end: "start"
+};
+function axisOf(placement) {
+  return placement === "top" || placement === "bottom" ? "vertical" : "horizontal";
+}
+function resolvePlacement(input) {
+  const { anchor, content, window, offset, alignOffset, insets } = input;
+  const available = window.width - insets.start - insets.end;
+  const wanted = Math.max(resolveWidth(input), _nullishCoalesce(input.minWidth, () => ( 0)));
+  const width = Math.min(wanted, Math.max(available, 0));
+  const placement = choosePlacement(input);
+  const room = Math.max(roomFor(placement, input), 0);
+  const vertical = axisOf(placement) === "vertical";
+  const maxHeight = vertical ? room : Math.max(window.height - insets.top - insets.bottom, 0);
+  const height = Math.min(content.height, maxHeight);
+  const top = clamp(
+    vertical ? placement === "bottom" ? anchor.y + anchor.height + offset : anchor.y - offset - height : alignedCross(input, height) + alignOffset,
+    insets.top,
+    Math.max(window.height - insets.bottom - height, insets.top)
+  );
+  const start = clamp(
+    vertical ? alignedCross(input, width) + alignOffset : placement === "end" ? anchor.x + anchor.width + offset : anchor.x - offset - width,
+    insets.start,
+    Math.max(window.width - insets.end - width, insets.start)
+  );
+  return { top, start, width, maxHeight, placement };
+}
+function resolveWidth(input) {
+  const { width, anchor, content, placement, window, insets } = input;
+  if (width === "trigger") {
+    return axisOf(placement) === "vertical" ? anchor.width : content.width;
+  }
+  if (width === "full") return Math.max(window.width - insets.start - insets.end, 0);
+  if (width === "content-fit") return content.width;
+  return width;
+}
+function choosePlacement(input) {
+  const { placement, avoidCollisions, content } = input;
+  if (!avoidCollisions) return placement;
+  const wanted = axisOf(placement) === "vertical" ? content.height : content.width;
+  if (roomFor(placement, input) >= wanted) return placement;
+  const other = OPPOSITE[placement];
+  return roomFor(other, input) > roomFor(placement, input) ? other : placement;
+}
+function roomFor(placement, input) {
+  const { anchor, window, offset, insets } = input;
+  switch (placement) {
+    case "bottom":
+      return window.height - insets.bottom - (anchor.y + anchor.height) - offset;
+    case "top":
+      return anchor.y - insets.top - offset;
+    case "end":
+      return window.width - insets.end - (anchor.x + anchor.width) - offset;
+    case "start":
+      return anchor.x - insets.start - offset;
+  }
+}
+function alignedCross({ align, anchor, placement }, size) {
+  const vertical = axisOf(placement) === "vertical";
+  const origin = vertical ? anchor.x : anchor.y;
+  const extent = vertical ? anchor.width : anchor.height;
+  if (align === "start") return origin;
+  if (align === "end") return origin + extent - size;
+  return origin + (extent - size) / 2;
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+
+// src/hooks/use-anchored-position.ts
+function useAnchoredPosition({
+  anchor,
+  isOpen,
+  onLayout,
+  ...options
+}) {
+  const window = _reactnative.useWindowDimensions.call(void 0, );
+  const origin = _nullishCoalesce(_optionalChain([_react.useContext.call(void 0, _chunkWDDXU3OHcjs.PortalContext), 'optionalAccess', _ => _.origin]), () => ( ZERO));
+  const [measured, setMeasured] = _react.useState.call(void 0, null);
+  const onContentLayout = _react.useCallback.call(void 0, 
+    (event) => {
+      _optionalChain([onLayout, 'optionalCall', _2 => _2(event)]);
+      const { width, height } = event.nativeEvent.layout;
+      setMeasured(
+        (current) => current !== null && current.width === width && current.height === height ? current : { width, height }
+      );
+    },
+    [onLayout]
+  );
+  if (!isOpen && measured !== null) setMeasured(null);
+  const local = anchor && {
+    ...anchor,
+    x: anchor.x - origin.x,
+    y: anchor.y - origin.y
+  };
+  const position = local && measured ? resolvePlacement({
+    anchor: local,
+    content: measured,
+    window: {
+      width: window.width - origin.x,
+      height: window.height - origin.y
+    },
+    ...options
+  }) : null;
+  return {
+    position,
+    onContentLayout,
+    measuringStyle: {
+      // Invisible, and at the start of the host, so the reader never sees the panel at
+      // the wrong place during the frame it is being measured in.
+      opacity: 0,
+      top: 0,
+      start: 0,
+      ...measuringWidth(options, _optionalChain([local, 'optionalAccess', _3 => _3.width]), window)
+    }
+  };
+}
+function measuringWidth({
+  width,
+  minWidth,
+  maxWidth,
+  insets
+}, anchorWidth, window) {
+  const screen = Math.max(window.width - insets.start - insets.end, 0);
+  const floor = _nullishCoalesce(minWidth, () => ( 0));
+  if (width === "trigger") return { width: Math.max(_nullishCoalesce(anchorWidth, () => ( 0)), floor) };
+  if (width === "full") return { width: screen };
+  if (typeof width === "number") return { width: Math.max(width, floor) };
+  return {
+    minWidth: floor || void 0,
+    maxWidth: Math.min(_nullishCoalesce(maxWidth, () => ( Number.POSITIVE_INFINITY)), screen)
+  };
+}
+var ZERO = { x: 0, y: 0 };
+
+
+
+exports.useAnchoredPosition = useAnchoredPosition;

package/dist/chunk-Z5KS7OH5.js

@@ -0,0 +1,309 @@
+import {
+  RADIUS_KEYS,
+  createRecipe,
+  radiusAxis
+} from "./chunk-DKVXTMIJ.js";
+import {
+  Slot,
+  createSlotContext
+} from "./chunk-TTZOIXKE.js";
+import {
+  useXAUITheme
+} from "./chunk-Z6JBWRPL.js";
+import {
+  useStyleProps
+} from "./chunk-M63GFNKV.js";
+
+// src/components/widget/widget-content.tsx
+import { forwardRef } from "react";
+import { View } from "react-native";
+
+// src/components/widget/widget.context.ts
+var [WidgetProvider, useWidget] = createSlotContext("Widget");
+
+// src/components/widget/widget-content.tsx
+import { jsx } from "react/jsx-runtime";
+var WidgetContent = forwardRef(
+  function WidgetContent2({ children, style, ...props }, ref) {
+    const { contentStyle } = useWidget();
+    const [styleProps, rest] = useStyleProps(props);
+    return /* @__PURE__ */ jsx(View, { ref, ...rest, style: [contentStyle, styleProps, style], children });
+  }
+);
+WidgetContent.displayName = "XAUI.Widget.Content";
+
+// src/components/widget/widget-text.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { Text } from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function textSlot(key, name, role) {
+  const Component = forwardRef2(function WidgetText({ children, accessibilityRole, style, ...props }, ref) {
+    const context = useWidget();
+    const [styleProps, rest] = useStyleProps(props);
+    return /* @__PURE__ */ jsx2(
+      Text,
+      {
+        ref,
+        accessibilityRole: accessibilityRole ?? role,
+        style: [context[key], styleProps, style],
+        ...rest,
+        children
+      }
+    );
+  });
+  Component.displayName = name;
+  return Component;
+}
+var WidgetTitle = textSlot("titleStyle", "XAUI.Widget.Title", "header");
+var WidgetDescription = textSlot(
+  "descriptionStyle",
+  "XAUI.Widget.Description"
+);
+var WidgetFooter = textSlot("footerStyle", "XAUI.Widget.Footer");
+
+// src/components/widget/widget-header.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { View as View2 } from "react-native";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var WidgetHeader = forwardRef3(
+  function WidgetHeader2({ children, style, ...props }, ref) {
+    const { headerStyle } = useWidget();
+    const [styleProps, rest] = useStyleProps(props);
+    return /* @__PURE__ */ jsx3(View2, { ref, ...rest, style: [headerStyle, styleProps, style], children });
+  }
+);
+WidgetHeader.displayName = "XAUI.Widget.Header";
+
+// src/components/widget/widget-heading.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { View as View3 } from "react-native";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var WidgetHeading = forwardRef4(
+  function WidgetHeading2({ children, style, ...props }, ref) {
+    const { headingStyle } = useWidget();
+    const [styleProps, rest] = useStyleProps(props);
+    return /* @__PURE__ */ jsx4(View3, { ref, ...rest, style: [headingStyle, styleProps, style], children });
+  }
+);
+WidgetHeading.displayName = "XAUI.Widget.Heading";
+
+// src/components/widget/widget.tsx
+import { forwardRef as forwardRef5, useMemo } from "react";
+import { View as View4 } from "react-native";
+
+// src/components/widget/widget.recipe.ts
+var SLOTS = [
+  "root",
+  "header",
+  "heading",
+  "title",
+  "description",
+  "content",
+  "footer"
+];
+var SIZES = {
+  xs: {
+    paddingX: 2,
+    paddingY: 2,
+    gap: 1,
+    well: 2,
+    radius: "xl",
+    title: "sm",
+    footer: "xs"
+  },
+  sm: {
+    paddingX: 2,
+    paddingY: 2,
+    gap: 1,
+    well: 2.5,
+    radius: "xl",
+    title: "md",
+    footer: "xs"
+  },
+  md: {
+    paddingX: 2,
+    paddingY: 2,
+    gap: 1.5,
+    well: 3,
+    radius: "xl",
+    title: "lg",
+    footer: "sm"
+  },
+  lg: {
+    paddingX: 2,
+    paddingY: 2,
+    gap: 1.5,
+    well: 3.5,
+    radius: "xl",
+    title: "xl",
+    footer: "sm"
+  }
+};
+function cardRadius(theme, radius, paddingY) {
+  return Math.max(0, theme.radius[radius] - theme.spacing(paddingY));
+}
+var SIZE_KEYS = ["xs", "sm", "md", "lg"];
+var NESTED_RADII = SIZE_KEYS.flatMap(
+  (size) => RADIUS_KEYS.map((radius) => ({
+    when: { size, radius },
+    style: (theme) => ({
+      content: { borderRadius: cardRadius(theme, radius, SIZES[size].paddingY) }
+    })
+  }))
+);
+function sizeAxis(step) {
+  const { paddingX, paddingY, gap, well, radius, title, footer } = step;
+  return (theme) => ({
+    root: {
+      paddingHorizontal: theme.spacing(paddingX),
+      paddingVertical: theme.spacing(paddingY),
+      gap: theme.spacing(gap),
+      borderRadius: theme.radius[radius]
+    },
+    content: {
+      padding: theme.spacing(well),
+      // The corner this size implies. An explicit `radius` prop replaces it through
+      // `NESTED_RADII`, which is the only other place the card's corner is set.
+      borderRadius: cardRadius(theme, radius, paddingY)
+    },
+    title: {
+      fontSize: theme.fontSizes[title],
+      lineHeight: theme.lineHeights[title]
+    },
+    description: {
+      fontSize: theme.fontSizes[footer],
+      lineHeight: theme.lineHeights[footer]
+    },
+    footer: {
+      fontSize: theme.fontSizes[footer],
+      lineHeight: theme.lineHeights[footer]
+    }
+  });
+}
+var widgetRecipe = createRecipe({
+  slots: SLOTS,
+  base: (theme) => ({
+    /**
+     * The frame: a quiet `defaultSoft` ground, no border. It is **not** a card — the header
+     * and the footer sit straight on it, and the one card in a widget is `Widget.Content`.
+     */
+    root: {
+      flexDirection: "column",
+      backgroundColor: theme.colors.defaultSoft,
+      // iOS's squircle. It is free on Android, and at this corner it is the difference
+      // between a shape and two arcs meeting a straight edge.
+      borderCurve: "continuous"
+    },
+    header: {
+      flexDirection: "row",
+      alignItems: "flex-start",
+      justifyContent: "space-between",
+      gap: theme.spacing(3),
+      // A hair of side padding of their own, so the header and footer text sits a touch
+      // inside the card's edge rather than flush against where it begins. Fixed, not on
+      // the `size` ladder — it is optical alignment, not spacing.
+      paddingHorizontal: theme.spacing(1)
+    },
+    /** The title and its description, as one block that shrinks rather than pushes. */
+    heading: { flexShrink: 1, gap: theme.spacing(0.5) },
+    title: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.semibold,
+      color: theme.colors.defaultSoftForeground
+    },
+    description: { fontFamily: theme.fontFamilies.body, color: theme.colors.muted },
+    /**
+     * The card, held in the frame: one step **up** from the soft ground. It clips, so a
+     * figure drawn to its edges takes the corner rather than overhanging it.
+     *
+     * `surface` in light is white against a near-white frame — the step is obvious. In dark
+     * `surface` (`#18181b`) lands on top of what `defaultSoft` composites to (about the
+     * same), so the card vanishes; and dark mode drops the surface shadow, so colour is the
+     * only separation left. `surfaceSecondary` is the raised-surface step above it.
+     */
+    content: {
+      backgroundColor: theme.mode === "dark" ? theme.colors.surfaceSecondary : theme.colors.surface,
+      borderCurve: "continuous",
+      overflow: "hidden"
+    },
+    footer: {
+      fontFamily: theme.fontFamilies.body,
+      color: theme.colors.muted,
+      paddingHorizontal: theme.spacing(1)
+    }
+  }),
+  variants: {
+    size: {
+      xs: sizeAxis(SIZES.xs),
+      sm: sizeAxis(SIZES.sm),
+      md: sizeAxis(SIZES.md),
+      lg: sizeAxis(SIZES.lg)
+    },
+    /** The frame's corner. The card's is derived from it, so it moves with it. */
+    radius: radiusAxis("root"),
+    /**
+     * The shadow lifts **the card**, not the frame: the soft ground stays flat against the
+     * page, and the card reads as the raised thing inside it. On by default — a widget is
+     * one of several on a dashboard, and the lift is what separates the card from its frame.
+     * In dark mode `theme.shadows.surface` is empty by design, and the colour step above
+     * carries the separation on its own.
+     */
+    elevated: {
+      true: (theme) => ({ content: theme.shadows.surface })
+    }
+  },
+  compoundVariants: [...NESTED_RADII],
+  defaultVariants: { size: "md" }
+});
+
+// src/components/widget/widget.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var WidgetRoot = forwardRef5(function Widget({ children, size, radius, isElevated = true, asChild = false, style, ...props }, ref) {
+  const theme = useXAUITheme();
+  const [styleProps, rest] = useStyleProps(props);
+  const styles = widgetRecipe.resolve({
+    theme,
+    selection: {
+      size,
+      radius,
+      elevated: isElevated ? "true" : void 0
+    }
+  });
+  const context = useMemo(
+    () => ({
+      headerStyle: styles.header,
+      headingStyle: styles.heading,
+      titleStyle: styles.title,
+      descriptionStyle: styles.description,
+      contentStyle: styles.content,
+      footerStyle: styles.footer
+    }),
+    [styles]
+  );
+  const rootStyle = [styles.root, styleProps, style];
+  return /* @__PURE__ */ jsx5(WidgetProvider, { value: context, children: asChild ? /* @__PURE__ */ jsx5(Slot, { ref, ...rest, style: rootStyle, children }) : /* @__PURE__ */ jsx5(View4, { ref, ...rest, style: rootStyle, children }) });
+});
+WidgetRoot.displayName = "XAUI.Widget.Root";
+
+// src/components/widget/index.ts
+var Widget2 = Object.assign(WidgetRoot, {
+  Header: WidgetHeader,
+  Heading: WidgetHeading,
+  Title: WidgetTitle,
+  Description: WidgetDescription,
+  Content: WidgetContent,
+  Footer: WidgetFooter
+});
+
+export {
+  useWidget,
+  WidgetContent,
+  WidgetTitle,
+  WidgetDescription,
+  WidgetFooter,
+  WidgetHeader,
+  WidgetHeading,
+  widgetRecipe,
+  WidgetRoot,
+  Widget2 as Widget
+};

package/dist/chunk-Z6FRP4EV.js

@@ -0,0 +1,151 @@
+import {
+  PortalContext
+} from "./chunk-2PMXMKS5.js";
+
+// src/hooks/use-anchored-position.ts
+import { useCallback, useContext, useState } from "react";
+import { useWindowDimensions } from "react-native";
+
+// src/utils/placement.ts
+var OPPOSITE = {
+  top: "bottom",
+  bottom: "top",
+  start: "end",
+  end: "start"
+};
+function axisOf(placement) {
+  return placement === "top" || placement === "bottom" ? "vertical" : "horizontal";
+}
+function resolvePlacement(input) {
+  const { anchor, content, window, offset, alignOffset, insets } = input;
+  const available = window.width - insets.start - insets.end;
+  const wanted = Math.max(resolveWidth(input), input.minWidth ?? 0);
+  const width = Math.min(wanted, Math.max(available, 0));
+  const placement = choosePlacement(input);
+  const room = Math.max(roomFor(placement, input), 0);
+  const vertical = axisOf(placement) === "vertical";
+  const maxHeight = vertical ? room : Math.max(window.height - insets.top - insets.bottom, 0);
+  const height = Math.min(content.height, maxHeight);
+  const top = clamp(
+    vertical ? placement === "bottom" ? anchor.y + anchor.height + offset : anchor.y - offset - height : alignedCross(input, height) + alignOffset,
+    insets.top,
+    Math.max(window.height - insets.bottom - height, insets.top)
+  );
+  const start = clamp(
+    vertical ? alignedCross(input, width) + alignOffset : placement === "end" ? anchor.x + anchor.width + offset : anchor.x - offset - width,
+    insets.start,
+    Math.max(window.width - insets.end - width, insets.start)
+  );
+  return { top, start, width, maxHeight, placement };
+}
+function resolveWidth(input) {
+  const { width, anchor, content, placement, window, insets } = input;
+  if (width === "trigger") {
+    return axisOf(placement) === "vertical" ? anchor.width : content.width;
+  }
+  if (width === "full") return Math.max(window.width - insets.start - insets.end, 0);
+  if (width === "content-fit") return content.width;
+  return width;
+}
+function choosePlacement(input) {
+  const { placement, avoidCollisions, content } = input;
+  if (!avoidCollisions) return placement;
+  const wanted = axisOf(placement) === "vertical" ? content.height : content.width;
+  if (roomFor(placement, input) >= wanted) return placement;
+  const other = OPPOSITE[placement];
+  return roomFor(other, input) > roomFor(placement, input) ? other : placement;
+}
+function roomFor(placement, input) {
+  const { anchor, window, offset, insets } = input;
+  switch (placement) {
+    case "bottom":
+      return window.height - insets.bottom - (anchor.y + anchor.height) - offset;
+    case "top":
+      return anchor.y - insets.top - offset;
+    case "end":
+      return window.width - insets.end - (anchor.x + anchor.width) - offset;
+    case "start":
+      return anchor.x - insets.start - offset;
+  }
+}
+function alignedCross({ align, anchor, placement }, size) {
+  const vertical = axisOf(placement) === "vertical";
+  const origin = vertical ? anchor.x : anchor.y;
+  const extent = vertical ? anchor.width : anchor.height;
+  if (align === "start") return origin;
+  if (align === "end") return origin + extent - size;
+  return origin + (extent - size) / 2;
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+
+// src/hooks/use-anchored-position.ts
+function useAnchoredPosition({
+  anchor,
+  isOpen,
+  onLayout,
+  ...options
+}) {
+  const window = useWindowDimensions();
+  const origin = useContext(PortalContext)?.origin ?? ZERO;
+  const [measured, setMeasured] = useState(null);
+  const onContentLayout = useCallback(
+    (event) => {
+      onLayout?.(event);
+      const { width, height } = event.nativeEvent.layout;
+      setMeasured(
+        (current) => current !== null && current.width === width && current.height === height ? current : { width, height }
+      );
+    },
+    [onLayout]
+  );
+  if (!isOpen && measured !== null) setMeasured(null);
+  const local = anchor && {
+    ...anchor,
+    x: anchor.x - origin.x,
+    y: anchor.y - origin.y
+  };
+  const position = local && measured ? resolvePlacement({
+    anchor: local,
+    content: measured,
+    window: {
+      width: window.width - origin.x,
+      height: window.height - origin.y
+    },
+    ...options
+  }) : null;
+  return {
+    position,
+    onContentLayout,
+    measuringStyle: {
+      // Invisible, and at the start of the host, so the reader never sees the panel at
+      // the wrong place during the frame it is being measured in.
+      opacity: 0,
+      top: 0,
+      start: 0,
+      ...measuringWidth(options, local?.width, window)
+    }
+  };
+}
+function measuringWidth({
+  width,
+  minWidth,
+  maxWidth,
+  insets
+}, anchorWidth, window) {
+  const screen = Math.max(window.width - insets.start - insets.end, 0);
+  const floor = minWidth ?? 0;
+  if (width === "trigger") return { width: Math.max(anchorWidth ?? 0, floor) };
+  if (width === "full") return { width: screen };
+  if (typeof width === "number") return { width: Math.max(width, floor) };
+  return {
+    minWidth: floor || void 0,
+    maxWidth: Math.min(maxWidth ?? Number.POSITIVE_INFINITY, screen)
+  };
+}
+var ZERO = { x: 0, y: 0 };
+
+export {
+  useAnchoredPosition
+};

package/dist/{chunk-X2K2FX3W.js → chunk-Z6JBWRPL.js}

@@ -1,3 +1,16 @@
+// src/theme/appearance.ts
+function appearanceFor(theme) {
+  const barContent = theme.mode === "dark" ? "light" : "dark";
+  return {
+    colorMode: theme.mode,
+    barContent,
+    statusBarStyle: barContent === "light" ? "light-content" : "dark-content",
+    background: theme.colors.background,
+    foreground: theme.colors.foreground,
+    border: theme.colors.border
+  };
+}
+
 // src/theme/theme-context.ts
 import { createContext } from "react";
 var ThemeContext = createContext(null);
@@ -14,6 +27,9 @@ function useXAUITheme() {
 function useColorMode() {
   return useXAUITheme().mode;
 }
+function useAppearance() {
+  return appearanceFor(useXAUITheme());
+}
 function useThemeColor(token) {
   const { colors } = useXAUITheme();
   return Array.isArray(token) ? token.map((key) => colors[key]) : colors[token];
@@ -90,36 +106,19 @@ function contrastOn(hex, light, dark) {
   return lightnessOf(hex) > 0.62 ? dark : light;
 }
 
-// src/theme/derive-tint.ts
-var cache = /* @__PURE__ */ new Map();
-function deriveTint(tint, theme) {
-  const key = `${theme.id}|${theme.mode}|${tint}`;
-  const hit = cache.get(key);
-  if (hit) return hit;
-  if (!isHex(tint)) {
-    throw new Error(
-      `XAUI: color="${tint}" must be a hex value (#rgb or #rrggbb). A tint's contrasted, soft and pressed slices are derived in OKLab, which cannot read rgba() or a named colour. Pass the hex here and put the transparency in \`style\`.`
-    );
-  }
-  const foreground = contrastOn(tint, theme.colors.snow, theme.colors.eclipse);
-  const derived = {
-    base: tint,
-    foreground,
-    soft: alpha(tint, 0.15),
-    softForeground: mix(tint, theme.colors.foreground, 0.2),
-    pressed: mix(tint, foreground, 0.1),
-    softPressed: alpha(tint, 0.2)
-  };
-  cache.set(key, derived);
-  return derived;
-}
-
 export {
+  appearanceFor,
   ThemeContext,
   useXAUITheme,
   useColorMode,
+  useAppearance,
   useThemeColor,
+  isHex,
+  hexToRgb,
+  rgbToHex,
+  rgbToOklab,
+  oklabToRgb,
   mix,
   alpha,
-  deriveTint
+  contrastOn
 };