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

package/dist/chunk-FYL4JEBN.js

@@ -0,0 +1,462 @@
+import {
+  IconContext
+} from "./chunk-JN6IRT2M.js";
+import {
+  createRecipe
+} 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/timeline/timeline-connector.tsx
+import { forwardRef } from "react";
+import { View } from "react-native";
+
+// src/components/timeline/timeline.context.ts
+var [TimelineProvider, useTimeline] = createSlotContext("Timeline");
+var [TimelineItemProvider, useTimelineItem] = createSlotContext("Timeline.Item");
+
+// src/components/timeline/timeline-connector.tsx
+import { jsx } from "react/jsx-runtime";
+var TimelineConnector = forwardRef(
+  function TimelineConnector2({ edge = "below", force = false, style, ...props }, ref) {
+    const { connectorStyle, rail } = useTimeline();
+    const { align, isFirst, isLast } = useTimelineItem();
+    const [styleProps, rest] = useStyleProps(props);
+    const atEnd = edge === "above" ? isFirst : isLast;
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        ref,
+        ...rest,
+        style: [
+          connectorStyle,
+          edge === "above" ? upperSpace(align, rail.inset) : null,
+          atEnd && !force ? BLANK : null,
+          styleProps,
+          style
+        ]
+      }
+    );
+  }
+);
+TimelineConnector.displayName = "XAUI.Timeline.Connector";
+var BLANK = { backgroundColor: "transparent" };
+function upperSpace(align, inset) {
+  return align === "center" ? null : { flexGrow: 0, height: inset };
+}
+
+// src/components/timeline/timeline-content.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { View as View2 } from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var TimelineContent = forwardRef2(
+  function TimelineContent2({ children, style, ...props }, ref) {
+    const { contentStyle } = useTimeline();
+    const [styleProps, rest] = useStyleProps(props);
+    return /* @__PURE__ */ jsx2(View2, { ref, ...rest, style: [contentStyle, styleProps, style], children });
+  }
+);
+TimelineContent.displayName = "XAUI.Timeline.Content";
+
+// src/components/timeline/timeline-text.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { Text } from "react-native";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function textSlot(key, name) {
+  const Component = forwardRef3(function TimelineText({ children, style, ...props }, ref) {
+    const context = useTimeline();
+    const [styleProps, rest] = useStyleProps(props);
+    return /* @__PURE__ */ jsx3(Text, { ref, ...rest, style: [context[key], styleProps, style], children });
+  });
+  Component.displayName = name;
+  return Component;
+}
+var TimelineTitle = textSlot("titleStyle", "XAUI.Timeline.Title");
+var TimelineDescription = textSlot(
+  "descriptionStyle",
+  "XAUI.Timeline.Description"
+);
+
+// src/components/timeline/timeline-item.tsx
+import { forwardRef as forwardRef4, useMemo } from "react";
+import { View as View3 } from "react-native";
+
+// src/components/timeline/timeline-position.ts
+var [TimelinePositionProvider, useTimelinePosition] = createSlotContext("Timeline");
+
+// src/components/timeline/timeline-item.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var TimelineItem = forwardRef4(
+  function TimelineItem2({ children, status = "default", align, style, ...props }, ref) {
+    const { itemStyle, align: rootAlign } = useTimeline();
+    const { isFirst, isLast } = useTimelinePosition();
+    const [styleProps, rest] = useStyleProps(props);
+    const context = useMemo(
+      () => ({ status, align: align ?? rootAlign, isFirst, isLast }),
+      [status, align, rootAlign, isFirst, isLast]
+    );
+    return /* @__PURE__ */ jsx4(TimelineItemProvider, { value: context, children: /* @__PURE__ */ jsx4(View3, { ref, ...rest, style: [itemStyle, styleProps, style], children }) });
+  }
+);
+TimelineItem.displayName = "XAUI.Timeline.Item";
+
+// src/components/timeline/timeline-leading.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { Text as Text2 } from "react-native";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var LEADING_WIDTH = 56;
+var TimelineLeading = forwardRef5(
+  function TimelineLeading2({ children, style, ...props }, ref) {
+    const { leadingStyle, rail } = useTimeline();
+    const { align } = useTimelineItem();
+    const [styleProps, rest] = useStyleProps(props);
+    return /* @__PURE__ */ jsx5(
+      Text2,
+      {
+        ref,
+        ...rest,
+        style: [leadingStyle, onTheLine(align, rail.leadInset), styleProps, style],
+        children
+      }
+    );
+  }
+);
+function onTheLine(align, leadInset) {
+  return align === "center" ? { width: LEADING_WIDTH, alignSelf: "center" } : { width: LEADING_WIDTH, paddingTop: leadInset };
+}
+TimelineLeading.displayName = "XAUI.Timeline.Leading";
+
+// src/components/timeline/timeline-marker.tsx
+import { forwardRef as forwardRef6 } from "react";
+import { View as View4 } from "react-native";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var TimelineMarker = forwardRef6(
+  function TimelineMarker2({ children, style, ...props }, ref) {
+    const { markerStyles, icon } = useTimeline();
+    const { status } = useTimelineItem();
+    const [styleProps, rest] = useStyleProps(props);
+    return /* @__PURE__ */ jsx6(IconContext.Provider, { value: icon, children: /* @__PURE__ */ jsx6(View4, { ref, ...rest, style: [markerStyles[status], styleProps, style], children }) });
+  }
+);
+TimelineMarker.displayName = "XAUI.Timeline.Marker";
+
+// src/components/timeline/timeline-rail.tsx
+import { forwardRef as forwardRef7, useMemo as useMemo2 } from "react";
+import { View as View5 } from "react-native";
+
+// src/components/timeline/timeline.recipe.ts
+var SLOTS = [
+  "root",
+  "item",
+  "leading",
+  "rail",
+  "marker",
+  "markerRing",
+  "connector",
+  "content",
+  "title",
+  "description"
+];
+var VARIANT_TOKENS = {
+  default: {
+    bg: "foreground",
+    fg: "background",
+    bgSelected: "foreground",
+    fgSelected: "background"
+  },
+  muted: { bg: "separator", fg: "muted" },
+  current: {
+    bg: "accent",
+    fg: "accentForeground",
+    bgSelected: "accent",
+    fgSelected: "accentForeground"
+  },
+  success: { bg: "success", fg: "successForeground" },
+  warning: { bg: "warning", fg: "warningForeground" },
+  danger: { bg: "danger", fg: "dangerForeground" }
+};
+var SIZES = {
+  sm: {
+    marker: 10,
+    rail: 20,
+    line: 2,
+    title: "sm",
+    description: "xs",
+    leading: "xs",
+    glyph: 10
+  },
+  md: {
+    marker: 12,
+    rail: 24,
+    line: 2,
+    title: "md",
+    description: "sm",
+    leading: "xs",
+    glyph: 12
+  },
+  lg: {
+    marker: 16,
+    rail: 28,
+    line: 2,
+    title: "lg",
+    description: "md",
+    leading: "sm",
+    glyph: 16
+  }
+};
+function timelineRail(theme, size) {
+  const { rail, marker, glyph, title, leading } = SIZES[size];
+  const line = theme.lineHeights[title] / 2;
+  return {
+    width: rail,
+    marker,
+    glyph,
+    line,
+    // How tall the rail's upper half is on a `start` entry: what is left of the line once the
+    // marker's own half is taken off it, so the marker's centre lands on the line.
+    inset: timelineInset(line, marker),
+    // The same line, for a column of times whose type is smaller than the title's.
+    leadInset: timelineInset(line, theme.lineHeights[leading])
+  };
+}
+function timelineInset(line, height) {
+  return Math.max(0, line - height / 2);
+}
+var DENSITY = { compact: 3, comfortable: 5 };
+function sizeAxis(step) {
+  return (theme) => ({
+    leading: {
+      fontSize: theme.fontSizes[step.leading],
+      lineHeight: theme.lineHeights[step.leading]
+    },
+    // **`minWidth`, not `width`.** A composed rail carries a marker of your own — a circled
+    // icon, a number — and one wider than the dot would otherwise spill out of a fixed column
+    // and land on the words beside it. The column takes the marker's width instead, and the
+    // line stays centred in it either way.
+    rail: { minWidth: step.rail },
+    marker: {
+      width: step.marker,
+      height: step.marker,
+      borderRadius: step.marker / 2
+    },
+    markerRing: {
+      width: step.marker,
+      height: step.marker,
+      borderRadius: step.marker / 2,
+      borderWidth: step.line
+    },
+    connector: { width: step.line, borderRadius: step.line },
+    title: {
+      fontSize: theme.fontSizes[step.title],
+      lineHeight: theme.lineHeights[step.title]
+    },
+    description: {
+      fontSize: theme.fontSizes[step.description],
+      lineHeight: theme.lineHeights[step.description]
+    }
+  });
+}
+var timelineRecipe = createRecipe({
+  slots: SLOTS,
+  base: (theme) => ({
+    // No `gap`, and that is the one measurement this component cannot have: the rail runs
+    // the full height of its entry, so the air between two entries has to be *inside* the
+    // one above — a gap on the root would be a break in the line.
+    root: { flexDirection: "column" },
+    // The gutter between the three columns, and it has to be a `gap` on the row rather than
+    // air inside the rail: the rail's own slack is what centres the dot, so widening it to
+    // make room for the text moves the line instead of moving the text.
+    item: { flexDirection: "row", gap: theme.spacing(2) },
+    leading: {
+      fontFamily: theme.fontFamilies.body,
+      color: theme.colors.muted,
+      textAlign: "right",
+      // Same-width digits, which is the other half of making a column of times a column:
+      // right-aligning proportional figures still leaves `11:06` and `10:43` starting at
+      // different places, and a stack of times that each begin somewhere else reads ragged.
+      fontVariant: ["tabular-nums"]
+    },
+    rail: { alignItems: "center" },
+    marker: { alignItems: "center", justifyContent: "center" },
+    markerRing: {
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: theme.colors.background
+    },
+    // It fills whatever the rail leaves it, which is what makes one line out of an entry's
+    // own padding and the next entry's top.
+    connector: { flexGrow: 1, backgroundColor: theme.colors.separator },
+    content: { flex: 1, gap: theme.spacing(0.5) },
+    title: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.medium,
+      color: theme.colors.foreground
+    },
+    description: {
+      fontFamily: theme.fontFamilies.body,
+      color: theme.colors.muted
+    }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  paint: (theme, colors) => ({
+    marker: { backgroundColor: colors.bg },
+    // The ring takes the colour on its edge and keeps the page behind it, which is what
+    // makes "being done" tell itself apart from "done" without relying on a hue.
+    markerRing: { borderColor: colors.bg }
+  }),
+  variants: {
+    size: { sm: sizeAxis(SIZES.sm), md: sizeAxis(SIZES.md), lg: sizeAxis(SIZES.lg) },
+    /**
+     * The air under an entry, and it belongs to the **content** rather than to the entry.
+     *
+     * A padding on the entry is inside its box, so the rail — a child of that box — stops
+     * above it and the line breaks at every step. On the content it makes the row taller
+     * instead, and the rail, stretched to the row, runs through it. That is the one
+     * measurement in this component that has to be in the right place, and it was found by
+     * looking at a timeline with four gaps in its line.
+     */
+    density: {
+      compact: (theme) => ({
+        content: { paddingBottom: theme.spacing(DENSITY.compact) }
+      }),
+      comfortable: (theme) => ({
+        content: { paddingBottom: theme.spacing(DENSITY.comfortable) }
+      })
+    }
+  },
+  defaultVariants: { variant: "default", size: "md", density: "comfortable" }
+});
+
+// src/components/timeline/timeline-rail.tsx
+import { Fragment, jsx as jsx7, jsxs } from "react/jsx-runtime";
+var TimelineRail = forwardRef7(
+  function TimelineRail2({ children, marker, style, ...props }, ref) {
+    const context = useTimeline();
+    const [styleProps, rest] = useStyleProps(props);
+    const placed = useMemo2(() => {
+      if (marker === void 0 || marker === context.rail.marker) return context;
+      const { line } = context.rail;
+      const rail = { ...context.rail, inset: timelineInset(line, marker) };
+      return { ...context, rail };
+    }, [context, marker]);
+    return /* @__PURE__ */ jsx7(TimelineProvider, { value: placed, children: /* @__PURE__ */ jsx7(View5, { ref, ...rest, style: [context.railStyle, styleProps, style], children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx7(TimelineConnector, { edge: "above" }),
+      /* @__PURE__ */ jsx7(TimelineMarker, {}),
+      /* @__PURE__ */ jsx7(TimelineConnector, { edge: "below" })
+    ] }) }) });
+  }
+);
+TimelineRail.displayName = "XAUI.Timeline.Rail";
+
+// src/components/timeline/timeline.tsx
+import { Children, forwardRef as forwardRef8, useMemo as useMemo3 } from "react";
+import { StyleSheet, View as View6 } from "react-native";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var STATUSES = [
+  "default",
+  "muted",
+  "current",
+  "success",
+  "warning",
+  "danger"
+];
+var TimelineRoot = forwardRef8(function Timeline({
+  children,
+  size = "md",
+  density = "comfortable",
+  itemAlign = "start",
+  color,
+  asChild = false,
+  style,
+  ...props
+}, ref) {
+  const theme = useXAUITheme();
+  const [styleProps, rest] = useStyleProps(props);
+  const shared = { size, density };
+  const styles = timelineRecipe.resolve({ theme, selection: shared });
+  const markerStyles = useMemo3(() => {
+    const entries = STATUSES.map((status) => {
+      const selection = { ...shared, variant: status };
+      const resolved = timelineRecipe.resolve({ theme, selection });
+      const isTintable = status === "default" || status === "current";
+      const tinted = color && isTintable ? timelineRecipe.tint({ theme, color, selection }) : void 0;
+      const slot = status === "current" ? "markerRing" : "marker";
+      const style2 = [resolved[slot], tinted?.[slot]];
+      return [status, style2];
+    });
+    return Object.fromEntries(entries);
+  }, [theme, size, density, color]);
+  const context = useMemo3(() => {
+    const rail = timelineRail(theme, size);
+    const ink = StyleSheet.flatten([styles.description]);
+    return {
+      itemStyle: styles.item,
+      leadingStyle: styles.leading,
+      railStyle: styles.rail,
+      connectorStyle: styles.connector,
+      contentStyle: styles.content,
+      titleStyle: styles.title,
+      descriptionStyle: styles.description,
+      markerStyles,
+      rail: {
+        width: rail.width,
+        marker: rail.marker,
+        line: rail.line,
+        inset: rail.inset,
+        leadInset: rail.leadInset
+      },
+      align: itemAlign,
+      icon: {
+        size: rail.glyph,
+        color: typeof ink.color === "string" ? ink.color : void 0
+      }
+    };
+  }, [theme, styles, markerStyles, size, itemAlign]);
+  const count = Children.count(children);
+  const rootStyle = [styles.root, styleProps, style];
+  const positioned = Children.map(children, (child, index) => /* @__PURE__ */ jsx8(
+    TimelinePositionProvider,
+    {
+      value: { isFirst: index === 0, isLast: index === count - 1 },
+      children: child
+    }
+  ));
+  return /* @__PURE__ */ jsx8(TimelineProvider, { value: context, children: asChild ? /* @__PURE__ */ jsx8(Slot, { ref, ...rest, style: rootStyle, children: positioned }) : /* @__PURE__ */ jsx8(View6, { ref, ...rest, style: rootStyle, children: positioned }) });
+});
+TimelineRoot.displayName = "XAUI.Timeline.Root";
+
+// src/components/timeline/index.ts
+var Timeline2 = Object.assign(TimelineRoot, {
+  Item: TimelineItem,
+  Leading: TimelineLeading,
+  Rail: TimelineRail,
+  Marker: TimelineMarker,
+  Connector: TimelineConnector,
+  Content: TimelineContent,
+  Title: TimelineTitle,
+  Description: TimelineDescription
+});
+
+export {
+  useTimeline,
+  useTimelineItem,
+  TimelineConnector,
+  TimelineContent,
+  TimelineTitle,
+  TimelineDescription,
+  TimelineItem,
+  TimelineLeading,
+  TimelineMarker,
+  timelineRecipe,
+  TimelineRail,
+  TimelineRoot,
+  Timeline2 as Timeline
+};