@xaui/native 0.2.8 → 0.9.1-alpha.1

package/dist/toolbar/index.js

@@ -1,333 +0,0 @@
-import "../chunk-SHBDANQN.js";
-import {
-  useXUITheme
-} from "../chunk-RBSA4NH4.js";
-
-// src/components/toolbar/toolbar.tsx
-import React, { useEffect } from "react";
-import { View } from "react-native";
-import Animated, {
-  Easing,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming
-} from "react-native-reanimated";
-
-// src/components/toolbar/toolbar.hook.ts
-import { useMemo } from "react";
-import { getSafeThemeColor, withOpacity } from "@xaui/core";
-var variantMap = {
-  floating: {
-    containerHeight: 68,
-    containerWidth: "auto",
-    iconSize: 26,
-    actionSize: 40,
-    borderRadius: 56,
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-    gap: 0,
-    isElevated: true
-  },
-  docked: {
-    containerHeight: 68,
-    containerWidth: "auto",
-    iconSize: 26,
-    actionSize: 40,
-    borderRadius: 0,
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-    gap: 0,
-    isElevated: false
-  },
-  vertical: {
-    containerHeight: "auto",
-    containerWidth: 80,
-    iconSize: 26,
-    actionSize: 40,
-    borderRadius: 0,
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-    gap: 0,
-    isElevated: false
-  }
-};
-var useToolbarVariantStyles = (variant, position) => {
-  return useMemo(() => {
-    const baseStyles = variantMap[variant];
-    const isVertical = variant === "vertical";
-    return {
-      ...baseStyles,
-      isVertical,
-      position
-    };
-  }, [variant, position]);
-};
-var useToolbarColors = (themeColor) => {
-  const theme = useXUITheme();
-  const colorScheme = theme.colors[getSafeThemeColor(themeColor)];
-  return useMemo(() => {
-    return {
-      background: theme.mode === "dark" ? theme.colors.default.container : theme.colors.background,
-      divider: withOpacity(theme.colors.foreground, 0.1),
-      title: theme.colors.foreground,
-      subtitle: withOpacity(theme.colors.foreground, 0.72),
-      action: colorScheme.main,
-      pressed: withOpacity(colorScheme.main, 0.16),
-      shadow: withOpacity(theme.colors.foreground, 0.35)
-    };
-  }, [colorScheme.main, theme.colors, theme.mode]);
-};
-
-// src/components/toolbar/toolbar.style.ts
-import { StyleSheet } from "react-native";
-var styles = StyleSheet.create({
-  container: {
-    position: "absolute",
-    zIndex: 40
-  },
-  top: {
-    top: 0,
-    left: 0,
-    right: 0
-  },
-  bottom: {
-    bottom: 0,
-    left: 0,
-    right: 0
-  },
-  left: {
-    left: 0,
-    top: 0,
-    bottom: 0
-  },
-  right: {
-    right: 0,
-    top: 0,
-    bottom: 0
-  },
-  floating: {
-    margin: 16
-  },
-  floatingBottom: {
-    marginBottom: 16
-  },
-  floatingTop: {
-    marginTop: 16
-  },
-  elevated: {
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.15,
-    shadowRadius: 8,
-    elevation: 3
-  },
-  content: {
-    flexDirection: "row",
-    alignItems: "center"
-  },
-  contentVertical: {
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  actions: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    width: "100%"
-  },
-  actionsVertical: {
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "space-between",
-    height: "100%"
-  },
-  actionButton: {
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: 999
-  },
-  disabledAction: {
-    opacity: 0.38
-  }
-});
-
-// src/components/toolbar/toolbar-context.ts
-import { createContext, useContext } from "react";
-var ToolbarContext = createContext(null);
-var useToolbarContext = () => {
-  return useContext(ToolbarContext);
-};
-
-// src/components/toolbar/toolbar.tsx
-var Toolbar = ({
-  variant = "docked",
-  position = "top",
-  isVisible = true,
-  themeColor = "primary",
-  showDivider = false,
-  isElevated,
-  children,
-  style,
-  customAppearance
-}) => {
-  const variantStyles = useToolbarVariantStyles(variant, position);
-  const colors = useToolbarColors(themeColor);
-  const translateValue = useSharedValue(
-    isVisible ? 0 : getInitialTranslate(position)
-  );
-  const opacityValue = useSharedValue(isVisible ? 1 : 0);
-  useEffect(() => {
-    const nextTranslate = isVisible ? 0 : getInitialTranslate(position);
-    if (isVisible) {
-      translateValue.value = withTiming(nextTranslate, {
-        duration: 220,
-        easing: Easing.out(Easing.cubic)
-      });
-      opacityValue.value = withTiming(1, {
-        duration: 200,
-        easing: Easing.out(Easing.quad)
-      });
-    } else {
-      translateValue.value = withTiming(nextTranslate, {
-        duration: 180,
-        easing: Easing.in(Easing.cubic)
-      });
-      opacityValue.value = withTiming(0, {
-        duration: 150,
-        easing: Easing.in(Easing.quad)
-      });
-    }
-  }, [isVisible, position, translateValue, opacityValue]);
-  const animatedStyle = useAnimatedStyle(() => {
-    const transform = position === "left" || position === "right" ? [{ translateX: translateValue.value }] : [{ translateY: translateValue.value }];
-    return {
-      opacity: opacityValue.value,
-      transform
-    };
-  });
-  const isVertical = variantStyles.isVertical;
-  const shouldElevate = isElevated ?? variantStyles.isElevated;
-  const positionStyle = position === "top" ? styles.top : position === "bottom" ? styles.bottom : position === "left" ? styles.left : styles.right;
-  const floatingStyle = variant === "floating" ? [
-    styles.floating,
-    position === "bottom" && styles.floatingBottom,
-    position === "top" && styles.floatingTop
-  ] : null;
-  return /* @__PURE__ */ React.createElement(
-    ToolbarContext.Provider,
-    {
-      value: {
-        actionColor: colors.action,
-        actionPressedColor: colors.pressed,
-        iconSize: variantStyles.iconSize,
-        actionButtonSize: variantStyles.actionSize
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      Animated.View,
-      {
-        style: [
-          styles.container,
-          positionStyle,
-          floatingStyle,
-          animatedStyle,
-          {
-            height: variantStyles.containerHeight,
-            width: variantStyles.containerWidth
-          },
-          style,
-          customAppearance?.container
-        ]
-      },
-      /* @__PURE__ */ React.createElement(
-        View,
-        {
-          style: [
-            isVertical ? styles.contentVertical : styles.content,
-            {
-              backgroundColor: colors.background,
-              borderRadius: variantStyles.borderRadius,
-              paddingHorizontal: variantStyles.paddingHorizontal,
-              paddingVertical: variantStyles.paddingVertical,
-              borderBottomWidth: showDivider ? 1 : 0,
-              borderBottomColor: showDivider ? colors.divider : "transparent",
-              height: "100%",
-              width: "100%"
-            },
-            shouldElevate && [styles.elevated, { shadowColor: colors.shadow }],
-            customAppearance?.topRow
-          ]
-        },
-        /* @__PURE__ */ React.createElement(
-          View,
-          {
-            style: [
-              isVertical ? styles.actionsVertical : styles.actions,
-              { gap: variantStyles.gap },
-              customAppearance?.actionsContainer
-            ]
-          },
-          children
-        )
-      )
-    )
-  );
-};
-function getInitialTranslate(position) {
-  switch (position) {
-    case "top":
-      return -24;
-    case "bottom":
-      return 24;
-    case "left":
-      return -24;
-    case "right":
-      return 24;
-    default:
-      return 0;
-  }
-}
-
-// src/components/toolbar/toolbar-action.tsx
-import React2 from "react";
-import { Pressable } from "react-native";
-var ToolbarAction = ({
-  icon,
-  isDisabled = false,
-  style,
-  onPress,
-  onLongPress,
-  accessibilityLabel,
-  testID
-}) => {
-  const context = useToolbarContext();
-  const iconNode = typeof icon === "function" ? icon({
-    color: context?.actionColor ?? "#000000",
-    size: context?.iconSize ?? 26
-  }) : icon;
-  return /* @__PURE__ */ React2.createElement(
-    Pressable,
-    {
-      onPress: isDisabled ? void 0 : onPress,
-      onLongPress: isDisabled ? void 0 : onLongPress,
-      accessibilityRole: "button",
-      accessibilityLabel,
-      testID,
-      style: ({ pressed }) => [
-        styles.actionButton,
-        {
-          width: context?.actionButtonSize ?? 40,
-          height: context?.actionButtonSize ?? 40,
-          backgroundColor: pressed ? context?.actionPressedColor ?? "transparent" : "transparent"
-        },
-        isDisabled && styles.disabledAction,
-        style
-      ]
-    },
-    iconNode
-  );
-};
-export {
-  Toolbar,
-  ToolbarAction
-};

package/dist/typography/index.cjs

@@ -1,238 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }require('../chunk-56RPWZD2.cjs');
-
-
-var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
-
-// src/components/typography/typography.tsx
-var _react = require('react'); var _react2 = _interopRequireDefault(_react);
-var _reactnative = require('react-native');
-
-// src/components/typography/typography.style.ts
-
-var styles = _reactnative.StyleSheet.create({
-  text: {
-    includeFontPadding: false
-  }
-});
-
-// src/components/typography/text-span.context.ts
-
-var TextSpanContext = _react.createContext.call(void 0, {});
-var useTextSpanInheritedStyle = () => {
-  return _react.useContext.call(void 0, TextSpanContext);
-};
-
-// src/components/typography/typography.hook.ts
-
-var _core = require('@xaui/core');
-var knownVariants = {
-  displayLarge: true,
-  displayMedium: true,
-  displaySmall: true,
-  caption: true,
-  headlineLarge: true,
-  headlineMedium: true,
-  headlineSmall: true,
-  subtitleLarge: true,
-  subtitleMedium: true,
-  subtitleSmall: true,
-  bodyLarge: true,
-  bodyMedium: true,
-  bodySmall: true
-};
-var isKnownVariant = (variant) => {
-  return Boolean(knownVariants[variant]);
-};
-var useTypographyColor = (themeColor) => {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const color = _react.useMemo.call(void 0, () => {
-    if (themeColor === "default") {
-      return theme.colors.foreground;
-    }
-    const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
-    return theme.colors[safeThemeColor].main;
-  }, [theme, themeColor]);
-  return color;
-};
-var useTypographyVariantStyles = (variant) => {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const variantStyles = _react.useMemo.call(void 0, () => {
-    if (!isKnownVariant(variant)) {
-      return {
-        fontFamily: theme.fontFamilies.body,
-        fontSize: theme.fontSizes.md,
-        fontWeight: theme.fontWeights.normal
-      };
-    }
-    const styles2 = {
-      displayLarge: {
-        fontFamily: theme.fontFamilies.heading,
-        fontSize: 72,
-        fontWeight: theme.fontWeights.semibold
-      },
-      displayMedium: {
-        fontFamily: theme.fontFamilies.heading,
-        fontSize: 57,
-        fontWeight: theme.fontWeights.semibold
-      },
-      displaySmall: {
-        fontFamily: theme.fontFamilies.heading,
-        fontSize: 45,
-        fontWeight: theme.fontWeights.semibold
-      },
-      caption: {
-        fontFamily: theme.fontFamilies.body,
-        fontSize: theme.fontSizes.xs,
-        fontWeight: theme.fontWeights.normal
-      },
-      headlineLarge: {
-        fontFamily: theme.fontFamilies.heading,
-        fontSize: theme.fontSizes["4xl"] + 3,
-        fontWeight: theme.fontWeights.bold
-      },
-      headlineMedium: {
-        fontFamily: theme.fontFamilies.heading,
-        fontSize: theme.fontSizes["3xl"] + 3,
-        fontWeight: theme.fontWeights.bold
-      },
-      headlineSmall: {
-        fontFamily: theme.fontFamilies.heading,
-        fontSize: theme.fontSizes["2xl"] + 3,
-        fontWeight: theme.fontWeights.semibold
-      },
-      subtitleLarge: {
-        fontFamily: theme.fontFamilies.body,
-        fontSize: theme.fontSizes.md + 5,
-        fontWeight: theme.fontWeights.medium
-      },
-      subtitleMedium: {
-        fontFamily: theme.fontFamilies.body,
-        fontSize: theme.fontSizes.sm + 5,
-        fontWeight: theme.fontWeights.medium
-      },
-      subtitleSmall: {
-        fontFamily: theme.fontFamilies.body,
-        fontSize: theme.fontSizes.xs + 5,
-        fontWeight: theme.fontWeights.medium
-      },
-      bodyLarge: {
-        fontFamily: theme.fontFamilies.body,
-        fontSize: theme.fontSizes.md,
-        fontWeight: theme.fontWeights.normal
-      },
-      bodyMedium: {
-        fontFamily: theme.fontFamilies.body,
-        fontSize: theme.fontSizes.sm,
-        fontWeight: theme.fontWeights.normal
-      },
-      bodySmall: {
-        fontFamily: theme.fontFamilies.body,
-        fontSize: theme.fontSizes.xs,
-        fontWeight: theme.fontWeights.normal
-      }
-    };
-    return styles2[variant];
-  }, [theme, variant]);
-  return variantStyles;
-};
-
-// src/components/typography/typography.tsx
-var Typography = ({
-  children,
-  align,
-  themeColor = "default",
-  variant = "bodyMedium",
-  maxLines,
-  overflow = "clip",
-  color,
-  letterSpacing,
-  lineHeight,
-  fontWeight,
-  fontStyle,
-  textDecorationLine,
-  textTransform,
-  style
-}) => {
-  const inheritedStyle = useTextSpanInheritedStyle();
-  const themeColorValue = useTypographyColor(themeColor);
-  const variantStyles = useTypographyVariantStyles(variant);
-  const resolvedAlign = _nullishCoalesce(align, () => ( inheritedStyle.align));
-  const textStyleOverrides = {
-    color: _nullishCoalesce(_nullishCoalesce(color, () => ( inheritedStyle.color)), () => ( themeColorValue)),
-    letterSpacing,
-    lineHeight,
-    fontWeight: _nullishCoalesce(fontWeight, () => ( inheritedStyle.fontWeight)),
-    fontStyle: _nullishCoalesce(fontStyle, () => ( inheritedStyle.fontStyle)),
-    textDecorationLine,
-    textTransform: _nullishCoalesce(textTransform, () => ( inheritedStyle.textTransform))
-  };
-  const ellipsizeMode = _react.useMemo.call(void 0, () => {
-    if (!maxLines) return void 0;
-    if (overflow === "clip") return "clip";
-    return "tail";
-  }, [maxLines, overflow]);
-  return /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.Text,
-    {
-      numberOfLines: maxLines,
-      ellipsizeMode,
-      style: [
-        styles.text,
-        variantStyles,
-        resolvedAlign && { textAlign: resolvedAlign },
-        textStyleOverrides,
-        inheritedStyle.spacing != null ? { marginRight: inheritedStyle.spacing } : void 0,
-        style
-      ]
-    },
-    children
-  );
-};
-
-// src/components/typography/text-span.tsx
-
-
-var alignToTextAlign = {
-  left: "left",
-  center: "center",
-  right: "right",
-  justify: "justify"
-};
-var TextSpan = ({
-  children,
-  color,
-  fontWeight,
-  fontStyle,
-  textTransform,
-  spacing,
-  align,
-  backgroundColor,
-  style
-}) => {
-  const inheritedTextStyle = {
-    color,
-    fontWeight,
-    fontStyle,
-    textTransform,
-    align,
-    spacing
-  };
-  return /* @__PURE__ */ _react2.default.createElement(TextSpanContext.Provider, { value: inheritedTextStyle }, /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.Text,
-    {
-      style: [
-        {
-          ...align ? { textAlign: alignToTextAlign[align] } : {},
-          ...backgroundColor ? { backgroundColor } : {}
-        },
-        style
-      ]
-    },
-    children
-  ));
-};
-TextSpan.displayName = "TextSpan";
-
-
-
-exports.TextSpan = TextSpan; exports.Typography = Typography;

package/dist/typography/index.d.cts

@@ -1,113 +0,0 @@
-import React, { ReactNode } from 'react';
-import { StyleProp, TextStyle } from 'react-native';
-import { ThemeColor } from '@xaui/core/types';
-
-type TypographyAlign = 'center' | 'justify' | 'left' | 'right';
-type TypographyVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'caption' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'subtitleLarge' | 'subtitleMedium' | 'subtitleSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
-type TypographyProps = {
-    /**
-     * The content to display inside the typography component.
-     */
-    children: ReactNode;
-    /**
-     * The text alignment.
-     */
-    align?: TypographyAlign;
-    /**
-     * The theme color for the text.
-     * @default 'default'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * The typography variant.
-     * @default 'bodyMedium'
-     */
-    variant?: TypographyVariant;
-    /**
-     * Maximum number of lines to display.
-     */
-    maxLines?: number;
-    /**
-     * How to handle text overflow when maxLines is set.
-     * @default 'clip'
-     */
-    overflow?: 'clip' | 'ellipsis';
-    /**
-     * Custom styles for the text.
-     */
-    style?: StyleProp<TextStyle>;
-    /**
-     * Custom text color override.
-     */
-    color?: TextStyle['color'];
-    /**
-     * The spacing between characters.
-     */
-    letterSpacing?: number;
-    /**
-     * Line height for the text.
-     */
-    lineHeight?: TextStyle['lineHeight'];
-    /**
-     * The text weight.
-     */
-    fontWeight?: TextStyle['fontWeight'];
-    /**
-     * The text style.
-     */
-    fontStyle?: TextStyle['fontStyle'];
-    /**
-     * Text decoration line.
-     */
-    textDecorationLine?: TextStyle['textDecorationLine'];
-    /**
-     * Text transform mode.
-     */
-    textTransform?: TextStyle['textTransform'];
-};
-
-declare const Typography: React.FC<TypographyProps>;
-
-type TextSpanAlign = TypographyAlign;
-type TextSpanProps = {
-    /**
-     * The content to display inside the text span.
-     */
-    children: ReactNode;
-    /**
-     * Inherited text color for nested Typography.
-     */
-    color?: TextStyle['color'];
-    /**
-     * Inherited text weight for nested Typography.
-     */
-    fontWeight?: TextStyle['fontWeight'];
-    /**
-     * Inherited text style for nested Typography.
-     */
-    fontStyle?: TextStyle['fontStyle'];
-    /**
-     * Inherited text transform for nested Typography.
-     */
-    textTransform?: TextStyle['textTransform'];
-    /**
-     * Spacing between children.
-     */
-    spacing?: number;
-    /**
-     * Text alignment for all nested typography unless overridden.
-     */
-    align?: TextSpanAlign;
-    /**
-     * Background color for the text span container.
-     */
-    backgroundColor?: TextStyle['backgroundColor'];
-    /**
-     * Custom styles for the text span container.
-     */
-    style?: StyleProp<TextStyle>;
-};
-
-declare const TextSpan: React.FC<TextSpanProps>;
-
-export { TextSpan, type TextSpanAlign, type TextSpanProps, Typography, type TypographyAlign, type TypographyProps, type TypographyVariant };