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

package/dist/chunk-ZYN7XKF5.cjs

@@ -0,0 +1,417 @@
+"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 _chunk67WT74DYcjs = require('./chunk-67WT74DY.cjs');
+
+
+var _chunk7EIHHOHPcjs = require('./chunk-7EIHHOHP.cjs');
+
+
+var _chunkPIU3JONRcjs = require('./chunk-PIU3JONR.cjs');
+
+
+var _chunk7DPL3ZDScjs = require('./chunk-7DPL3ZDS.cjs');
+
+
+var _chunkGSZDN6EZcjs = require('./chunk-GSZDN6EZ.cjs');
+
+
+var _chunkFHNIGHN5cjs = require('./chunk-FHNIGHN5.cjs');
+
+
+
+var _chunkSL3V7R2Ycjs = require('./chunk-SL3V7R2Y.cjs');
+
+
+var _chunkCDRGTUYFcjs = require('./chunk-CDRGTUYF.cjs');
+
+
+var _chunkIIAQISBGcjs = require('./chunk-IIAQISBG.cjs');
+
+
+var _chunkTK44VBIEcjs = require('./chunk-TK44VBIE.cjs');
+
+// src/components/tag-group/tag-group-item.tsx
+var _react = require('react');
+
+// src/components/tag-group/tag-group-item-label.tsx
+
+var _reactnative = require('react-native');
+
+// src/components/tag-group/tag-group.context.ts
+var [TagGroupProvider, useTagGroup] = _chunkCDRGTUYFcjs.createSlotContext.call(void 0, "TagGroup");
+var [TagGroupItemProvider, useTagGroupItem] = _chunkCDRGTUYFcjs.createSlotContext.call(void 0, "TagGroup.Item");
+
+// src/components/tag-group/tag-group-item-label.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var TagGroupItemLabel = _react.forwardRef.call(void 0, 
+  function TagGroupItemLabel2({ children, numberOfLines = 1, style, ...props }, ref) {
+    const { itemLabelStyle, itemLabelSelectedStyle } = useTagGroup();
+    const { isSelected } = useTagGroupItem();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _reactnative.Text,
+      {
+        ref,
+        numberOfLines,
+        ...rest,
+        style: [
+          itemLabelStyle,
+          isSelected && itemLabelSelectedStyle,
+          styleProps,
+          style
+        ],
+        children
+      }
+    );
+  }
+);
+TagGroupItemLabel.displayName = "XAUI.TagGroup.ItemLabel";
+
+// src/components/tag-group/tag-group-item.tsx
+
+var TagGroupItem = _react.forwardRef.call(void 0, 
+  function TagGroupItem2({
+    id,
+    children,
+    isDisabled = false,
+    asChild = false,
+    accessibilityRole = "button",
+    accessibilityState,
+    style,
+    onPress,
+    onPressIn,
+    onPressOut,
+    ...props
+  }, ref) {
+    const {
+      itemStyle,
+      itemSelectedStyle,
+      glyph,
+      isSelected,
+      isKeyDisabled,
+      select
+    } = useTagGroup();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    const [isPressed, press] = _chunk7DPL3ZDScjs.usePressState.call(void 0, { onPressIn, onPressOut });
+    const selected = isSelected(id);
+    const disabled = isDisabled || isKeyDisabled(id);
+    const handlePress = _react.useCallback.call(void 0, 
+      (event) => {
+        _optionalChain([onPress, 'optionalCall', _ => _(event)]);
+        select(id);
+      },
+      [id, onPress, select]
+    );
+    const context = _react.useMemo.call(void 0, 
+      () => ({ id, isSelected: selected, isPressed, isDisabled: disabled }),
+      [id, selected, isPressed, disabled]
+    );
+    const text = typeof children === "function" ? null : _chunkFHNIGHN5cjs.childrenToString.call(void 0, children);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TagGroupItemProvider, { value: context, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGSZDN6EZcjs.IconContext.Provider, { value: glyph, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkPIU3JONRcjs.PressableFeedback,
+      {
+        ref,
+        isPressed,
+        isDisabled: disabled,
+        asChild,
+        accessibilityRole,
+        accessibilityState: { disabled, selected, ...accessibilityState },
+        ...rest,
+        style: [
+          itemStyle,
+          selected && itemSelectedStyle,
+          styleProps,
+          typeof style === "function" ? style({ pressed: isPressed }) : style
+        ],
+        onPress: handlePress,
+        onPressIn: press.onPressIn,
+        onPressOut: press.onPressOut,
+        children: typeof children === "function" ? children(context) : text !== null ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TagGroupItemLabel, { children: text }) : children
+      }
+    ) }) });
+  }
+);
+TagGroupItem.displayName = "XAUI.TagGroup.Item";
+
+// src/components/tag-group/tag-group-item-remove-button.tsx
+
+
+var TagGroupItemRemoveButton = _react.forwardRef.call(void 0, function TagGroupItemRemoveButton2({ isDisabled, onPress, ...props }, ref) {
+  const { closeStyle, closeGlyphStyle, closeGlyphSelectedStyle, remove } = useTagGroup();
+  const { id, isSelected, isDisabled: isItemDisabled } = useTagGroupItem();
+  if (remove === void 0) return null;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunk67WT74DYcjs.CloseButtonBase,
+    {
+      ref,
+      name: "TagGroup.ItemRemoveButton",
+      baseStyle: closeStyle,
+      glyphStyle: isSelected ? closeGlyphSelectedStyle : closeGlyphStyle,
+      isDisabled: _nullishCoalesce(isDisabled, () => ( isItemDisabled)),
+      onPress: (event) => {
+        _optionalChain([onPress, 'optionalCall', _2 => _2(event)]);
+        remove(id);
+      },
+      ...props
+    }
+  );
+});
+TagGroupItemRemoveButton.displayName = "XAUI.TagGroup.ItemRemoveButton";
+
+// src/components/tag-group/tag-group-list.tsx
+
+
+
+var TagGroupList = _react.forwardRef.call(void 0, 
+  function TagGroupList2({ children, accessibilityRole = "list", style, ...props }, ref) {
+    const { listStyle } = useTagGroup();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _reactnative.View,
+      {
+        ref,
+        accessibilityRole,
+        ...rest,
+        style: [listStyle, styleProps, style],
+        children
+      }
+    );
+  }
+);
+TagGroupList.displayName = "XAUI.TagGroup.List";
+
+// src/components/tag-group/tag-group.tsx
+
+
+
+// src/components/tag-group/tag-group.recipe.ts
+var SLOTS = ["root", "list", "item", "itemLabel", "close", "closeGlyph"];
+var VARIANT_TOKENS = {
+  default: { bg: "default", fg: "fieldForeground" },
+  surface: { bg: "surface", fg: "fieldForeground" }
+};
+var SIZES = {
+  sm: {
+    paddingVertical: 0.5,
+    paddingHorizontal: 2,
+    gap: 1,
+    label: "xs",
+    cross: 1.75,
+    radius: "xl",
+    glyph: 14
+  },
+  md: {
+    paddingVertical: 1,
+    paddingHorizontal: 2.5,
+    gap: 1,
+    label: "sm",
+    cross: 2,
+    radius: "2xl",
+    glyph: 16
+  },
+  lg: {
+    paddingVertical: 1.5,
+    paddingHorizontal: 3,
+    gap: 1.5,
+    label: "md",
+    cross: 2.25,
+    radius: "3xl",
+    glyph: 18
+  }
+};
+function sizeAxis(step) {
+  const { paddingVertical, paddingHorizontal, gap, label, radius, glyph, cross } = step;
+  return (theme) => ({
+    item: {
+      paddingVertical: theme.spacing(paddingVertical),
+      paddingHorizontal: theme.spacing(paddingHorizontal),
+      gap: theme.spacing(gap),
+      borderRadius: theme.radius[radius]
+    },
+    itemLabel: {
+      fontSize: theme.fontSizes[label],
+      lineHeight: theme.lineHeights[label]
+    },
+    close: { width: glyph, height: glyph },
+    closeGlyph: { width: theme.spacing(cross) }
+  });
+}
+var tagGroupRecipe = _chunkSL3V7R2Ycjs.createRecipe.call(void 0, {
+  slots: SLOTS,
+  base: (theme) => ({
+    // The cross's thickness and its centring are the shared button's, written once there.
+    ..._chunk67WT74DYcjs.closeButtonGeometry.call(void 0, theme),
+    root: { gap: theme.spacing(3) },
+    /**
+     * Wrapping is the point. A tag group is a set of the same kind of thing, and a set
+     * that scrolls sideways hides how many of it there are — which is the one fact a
+     * reader wants from a row of tags.
+     */
+    list: {
+      flexDirection: "row",
+      flexWrap: "wrap",
+      alignItems: "flex-start",
+      gap: theme.spacing(2)
+    },
+    item: {
+      flexDirection: "row",
+      alignItems: "center",
+      borderCurve: "continuous"
+    },
+    itemLabel: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.medium
+    }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  paint: (_theme, colors) => ({
+    item: { backgroundColor: colors.bg },
+    itemLabel: { color: colors.fg },
+    // The cross takes the label's colour, so it never outweighs the word beside it.
+    closeGlyph: { backgroundColor: colors.fg }
+  }),
+  variants: {
+    size: {
+      sm: sizeAxis(SIZES.sm),
+      md: sizeAxis(SIZES.md),
+      lg: sizeAxis(SIZES.lg)
+    },
+    /**
+     * The selected face, resolved on the root beside the resting one so a group of forty
+     * tags costs what a group of two costs and no slot touches the recipe (R5).
+     */
+    isSelected: {
+      true: (theme) => ({
+        item: { backgroundColor: theme.colors.accentSoft },
+        itemLabel: { color: theme.colors.accentSoftForeground },
+        closeGlyph: { backgroundColor: theme.colors.accentSoftForeground }
+      })
+    },
+    radius: _chunkSL3V7R2Ycjs.radiusAxis.call(void 0, "item")
+  },
+  states: {
+    pressed: (theme) => ({
+      item: { backgroundColor: theme.colors.defaultSoftPressed }
+    }),
+    disabled: (theme) => ({ root: { opacity: theme.opacity.disabled } })
+  },
+  defaultVariants: { variant: "default", size: "md" }
+});
+
+// src/components/tag-group/tag-group.utils.ts
+function nextSelection(selected, id, mode, isDeselectable) {
+  if (mode === "none") return selected;
+  const has = selected.includes(id);
+  if (mode === "single") {
+    if (!has) return [id];
+    return isDeselectable ? [] : selected;
+  }
+  if (!has) return [...selected, id];
+  if (!isDeselectable && selected.length === 1) return selected;
+  return selected.filter((key) => key !== id);
+}
+
+// src/components/tag-group/tag-group.tsx
+
+var EMPTY = [];
+var TagGroupRoot = _react.forwardRef.call(void 0, function TagGroup({
+  children,
+  variant,
+  size,
+  radius,
+  color,
+  selectionMode = "none",
+  selectedKeys: controlledKeys,
+  defaultSelectedKeys,
+  onSelectionChange,
+  onRemove,
+  disabledKeys = EMPTY,
+  isDisabled = false,
+  isDeselectable = true,
+  style,
+  ...props
+}, ref) {
+  const theme = _chunkIIAQISBGcjs.useXAUITheme.call(void 0, );
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  const [selected, setSelected] = _chunk7EIHHOHPcjs.useControllableState.call(void 0, {
+    value: controlledKeys,
+    defaultValue: _nullishCoalesce(defaultSelectedKeys, () => ( EMPTY)),
+    onChange: onSelectionChange
+  });
+  const selection = { variant, size, radius };
+  const styles = tagGroupRecipe.resolve({
+    theme,
+    selection,
+    states: { disabled: isDisabled }
+  });
+  const chosen = tagGroupRecipe.resolve({
+    theme,
+    selection: { ...selection, isSelected: "true" }
+  });
+  const tint = color ? tagGroupRecipe.tint({
+    theme,
+    color,
+    selection: { ...selection, isSelected: "true" }
+  }) : void 0;
+  const isSelected = _react.useCallback.call(void 0, (id) => selected.includes(id), [selected]);
+  const isKeyDisabled = _react.useCallback.call(void 0, 
+    (id) => isDisabled || disabledKeys.includes(id),
+    [disabledKeys, isDisabled]
+  );
+  const select = _react.useCallback.call(void 0, 
+    (id) => {
+      setSelected(
+        (current) => nextSelection(current, id, selectionMode, isDeselectable)
+      );
+    },
+    [isDeselectable, selectionMode, setSelected]
+  );
+  const context = _react.useMemo.call(void 0, () => {
+    const label = _reactnative.StyleSheet.flatten([styles.itemLabel]);
+    return {
+      listStyle: styles.list,
+      itemStyle: styles.item,
+      itemSelectedStyle: tint ? [chosen.item, tint.item] : chosen.item,
+      itemLabelStyle: styles.itemLabel,
+      itemLabelSelectedStyle: tint ? [chosen.itemLabel, tint.itemLabel] : chosen.itemLabel,
+      closeStyle: styles.close,
+      closeGlyphStyle: styles.closeGlyph,
+      closeGlyphSelectedStyle: tint ? [chosen.closeGlyph, tint.closeGlyph] : chosen.closeGlyph,
+      glyph: {
+        size: label.fontSize,
+        // `ColorValue` also covers the platform's opaque colours, which `Icon` cannot hand
+        // to a third-party component expecting a string.
+        color: typeof label.color === "string" ? label.color : void 0
+      },
+      isDisabled,
+      isSelected,
+      isKeyDisabled,
+      select,
+      remove: onRemove
+    };
+  }, [styles, chosen, tint, isDisabled, isSelected, isKeyDisabled, select, onRemove]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TagGroupProvider, { value: context, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { ref, ...rest, style: [styles.root, styleProps, style], children }) });
+});
+TagGroupRoot.displayName = "XAUI.TagGroup.Root";
+
+// src/components/tag-group/index.ts
+var TagGroup2 = Object.assign(TagGroupRoot, {
+  List: TagGroupList,
+  Item: TagGroupItem,
+  ItemLabel: TagGroupItemLabel,
+  ItemRemoveButton: TagGroupItemRemoveButton
+});
+
+
+
+
+
+
+
+
+
+
+
+
+exports.useTagGroup = useTagGroup; exports.useTagGroupItem = useTagGroupItem; exports.TagGroupItemLabel = TagGroupItemLabel; exports.TagGroupItem = TagGroupItem; exports.TagGroupItemRemoveButton = TagGroupItemRemoveButton; exports.TagGroupList = TagGroupList; exports.tagGroupRecipe = tagGroupRecipe; exports.nextSelection = nextSelection; exports.TagGroupRoot = TagGroupRoot; exports.TagGroup = TagGroup2;