@xaui/native 0.0.21 → 0.0.23

package/dist/toolbar/index.js

@@ -0,0 +1,324 @@
+import "../chunk-DXXNBF5P.js";
+import {
+  useXUITheme
+} from "../chunk-LTKYHG5V.js";
+
+// src/components/toolbar/toolbar.tsx
+import React, { useEffect } from "react";
+import { View } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  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: 72,
+    containerWidth: "auto",
+    iconSize: 26,
+    actionSize: 40,
+    borderRadius: 56,
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    gap: 0,
+    isElevated: true
+  },
+  docked: {
+    containerHeight: 72,
+    containerWidth: "auto",
+    iconSize: 26,
+    actionSize: 40,
+    borderRadius: 0,
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    gap: 0,
+    isElevated: false
+  },
+  vertical: {
+    containerHeight: "auto",
+    containerWidth: 80,
+    iconSize: 26,
+    actionSize: 40,
+    borderRadius: 0,
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    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.background : 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(() => {
+    if (isVisible) {
+      translateValue.value = withSpring(0, {
+        damping: 20,
+        stiffness: 300
+      });
+      opacityValue.value = withTiming(1, { duration: 200 });
+    } else {
+      translateValue.value = withSpring(getInitialTranslate(position), {
+        damping: 20,
+        stiffness: 300
+      });
+      opacityValue.value = withTiming(0, { duration: 200 });
+    }
+  }, [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 -100;
+    case "bottom":
+      return 100;
+    case "left":
+      return -100;
+    case "right":
+      return 100;
+    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/types/index.d.mts

@@ -0,0 +1,17 @@
+export type ThemeColor = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success' | 'default';
+export type Size = 'xs' | 'sm' | 'md' | 'lg';
+export type Radius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+export type SizeValues = {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+};
+export type RadiusValues = {
+    none: number;
+    sm: number;
+    md: number;
+    lg: number;
+    full: number;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts

@@ -0,0 +1,17 @@
+export type ThemeColor = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success' | 'default';
+export type Size = 'xs' | 'sm' | 'md' | 'lg';
+export type Radius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+export type SizeValues = {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+};
+export type RadiusValues = {
+    none: number;
+    sm: number;
+    md: number;
+    lg: number;
+    full: number;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,WAAW,GACX,UAAU,GACV,QAAQ,GACR,SAAS,GACT,SAAS,GACT,SAAS,CAAA;AAEb,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE5C,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAA;AAEzD,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAA;IACV,EAAE,EAAE,MAAM,CAAA;IACV,EAAE,EAAE,MAAM,CAAA;IACV,EAAE,EAAE,MAAM,CAAA;CACX,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,EAAE,MAAM,CAAA;IACV,EAAE,EAAE,MAAM,CAAA;IACV,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;CACb,CAAA"}

package/dist/types/theme.d.mts

@@ -0,0 +1,2 @@
+export type ThemeColor = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success' | 'default';
+//# sourceMappingURL=theme.d.ts.map

package/dist/types/theme.d.ts

@@ -0,0 +1,2 @@
+export type ThemeColor = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success' | 'default';
+//# sourceMappingURL=theme.d.ts.map

package/dist/types/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/types/theme.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,WAAW,GACX,UAAU,GACV,QAAQ,GACR,SAAS,GACT,SAAS,GACT,SAAS,CAAA"}

package/dist/typography/index.d.mts

@@ -0,0 +1,3 @@
+export { Typography } from './typography';
+export type { TypographyProps, TypographyVariant, TypographyAlign, } from './typography.type';
+//# sourceMappingURL=index.d.ts.map

package/dist/typography/index.d.ts

@@ -1,43 +1,3 @@
-import React, { ReactNode } from 'react';
-import { StyleProp, TextStyle } from 'react-native';
-import { T as ThemeColor } from '../index-BOw6tbkc.js';
-
-type TypographyAlign = 'center' | 'justify' | 'left' | 'right';
-type TypographyVariant = 'caption' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'subtitleLarge' | 'subtitleMedium' | 'subtitleSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall' | string;
-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>;
-};
-
-declare const Typography: React.FC<TypographyProps>;
-
-export { Typography, type TypographyAlign, type TypographyProps, type TypographyVariant };
+export { Typography } from './typography';
+export type { TypographyProps, TypographyVariant, TypographyAlign, } from './typography.type';
+//# sourceMappingURL=index.d.ts.map

package/dist/view/index.cjs

@@ -352,7 +352,17 @@ var import_react_native9 = require("react-native");
 // src/components/view/rounded-view/rounded-view.hook.ts
 var import_react9 = require("react");
 var useRoundedViewStyle = (props) => {
-  const { all = 0, top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight } = props;
+  const {
+    all = 0,
+    top,
+    bottom,
+    left,
+    right,
+    topLeft,
+    topRight,
+    bottomLeft,
+    bottomRight
+  } = props;
   return (0, import_react9.useMemo)(() => {
     return {
       borderTopLeftRadius: topLeft ?? top ?? left ?? all,
@@ -412,7 +422,11 @@ var styles2 = import_react_native9.StyleSheet.create({
 // src/components/view/aspect-ratio/aspect-ratio.tsx
 var import_react11 = __toESM(require("react"), 1);
 var import_react_native10 = require("react-native");
-var AspectRatio = ({ children, ratio, style }) => {
+var AspectRatio = ({
+  children,
+  ratio,
+  style
+}) => {
   return /* @__PURE__ */ import_react11.default.createElement(import_react_native10.View, { style: [{ aspectRatio: ratio }, style] }, children);
 };
 

package/dist/view/index.d.mts

@@ -0,0 +1,34 @@
+export { Column } from './column/column';
+export { Row } from './row/row';
+export { Spacer } from './spacer/spacer';
+export { Padding } from './padding/padding';
+export { Margin } from './margin/margin';
+export { SizedBox } from './sized-box/sized-box';
+export { PositionedView } from './positioned-view/positioned-view';
+export { BlurView } from './blur-view/blur-view';
+export { RoundedView } from './rounded-view/rounded-view';
+export { AspectRatio } from './aspect-ratio/aspect-ratio';
+export { Grid } from './grid/grid';
+export { GridItem } from './grid/grid-item';
+export { GridBuilder } from './grid/grid-builder';
+export { ConditionalView } from './conditional/conditional-view';
+export { MasonryGrid } from './masonry-grid/masonry-grid';
+export { MasonryGridItem } from './masonry-grid/masonry-grid-item';
+export { MasonryGridBuilder } from './masonry-grid/masonry-grid-builder';
+export type { ColumnProps, RowProps, MainAxisAlignment, CrossAxisAlignment, } from './layout-types';
+export type { SpacerProps } from './spacer/spacer.type';
+export type { PaddingProps } from './padding/padding.type';
+export type { MarginProps } from './margin/margin.type';
+export type { SizedBoxProps } from './sized-box/sized-box.type';
+export type { PositionedViewProps } from './positioned-view/positioned-view.type';
+export type { BlurViewProps } from './blur-view/blur-view.type';
+export type { RoundedViewProps } from './rounded-view/rounded-view.type';
+export type { AspectRatioProps } from './aspect-ratio/aspect-ratio.type';
+export type { ConditionalViewAnimation, ConditionalViewProps, } from './conditional/conditional-view.type';
+export type { GridProps } from './grid/grid.type';
+export type { GridItemProps } from './grid/grid-item.type';
+export type { GridBuilderProps } from './grid/grid-builder.type';
+export type { MasonryGridProps } from './masonry-grid/masonry-grid.type';
+export type { MasonryGridItemProps } from './masonry-grid/masonry-grid-item.type';
+export type { MasonryGridBuilderProps } from './masonry-grid/masonry-grid-builder.type';
+//# sourceMappingURL=index.d.ts.map