@xaui/native 0.0.32 → 0.0.34

package/dist/chunk-E4DOPNVW.js

@@ -0,0 +1,308 @@
+import {
+  useXUITheme
+} from "./chunk-LTKYHG5V.js";
+
+// src/components/input-trigger/input-trigger.tsx
+import React from "react";
+import { Pressable, Text, View } from "react-native";
+
+// src/components/input-trigger/input-trigger.hook.ts
+import { useMemo } from "react";
+import { getSafeThemeColor, withOpacity, withPaletteNumber } from "@xaui/core";
+var sizeMap = {
+  sm: {
+    minHeight: 40,
+    fontSize: 14,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    slotGap: 8,
+    labelSize: 13,
+    helperSize: 12
+  },
+  md: {
+    minHeight: 46,
+    fontSize: 16,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    slotGap: 10,
+    labelSize: 14,
+    helperSize: 13
+  },
+  lg: {
+    minHeight: 52,
+    fontSize: 17,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    slotGap: 12,
+    labelSize: 15,
+    helperSize: 15
+  }
+};
+var useInputTriggerSizeStyles = (size) => useMemo(() => sizeMap[size], [size]);
+var useInputTriggerRadiusStyles = (radius) => {
+  const theme = useXUITheme();
+  return useMemo(() => {
+    if (radius === "full") {
+      return { borderRadius: theme.borderRadius.full };
+    }
+    return { borderRadius: theme.borderRadius[radius] };
+  }, [radius, theme.borderRadius]);
+};
+var useInputTriggerVariantStyles = ({
+  themeColor,
+  variant,
+  isInvalid,
+  isDisabled
+}) => {
+  const theme = useXUITheme();
+  const safeThemeColor = getSafeThemeColor(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  return useMemo(() => {
+    const neutralBorder = withOpacity(theme.colors.foreground, 0.1);
+    const textColor = isDisabled ? withOpacity(theme.colors.foreground, 0.55) : theme.colors.foreground;
+    const placeholderColor = withOpacity(theme.colors.foreground, 0.45);
+    const labelColor = isInvalid ? theme.colors.danger.main : withOpacity(theme.colors.foreground, 0.8);
+    const helperColor = isInvalid ? theme.colors.danger.main : withOpacity(theme.colors.foreground, 0.72);
+    if (variant === "underlined") {
+      return {
+        container: {
+          backgroundColor: "transparent",
+          borderBottomWidth: isInvalid ? 2 : 1,
+          borderColor: isInvalid ? theme.colors.danger.main : withPaletteNumber(colorScheme.main, 500)
+        },
+        unfocusedBorderColor: neutralBorder,
+        textColor,
+        placeholderColor,
+        labelColor,
+        helperColor
+      };
+    }
+    if (variant === "bordered") {
+      return {
+        container: {
+          backgroundColor: theme.colors.background,
+          borderColor: isInvalid ? theme.colors.danger.main : neutralBorder,
+          borderWidth: theme.borderWidth.md
+        },
+        unfocusedBorderColor: neutralBorder,
+        textColor,
+        placeholderColor,
+        labelColor,
+        helperColor
+      };
+    }
+    if (variant === "faded") {
+      return {
+        container: {
+          backgroundColor: withOpacity(colorScheme.background, 0.68),
+          borderColor: isInvalid ? theme.colors.danger.main : "transparent",
+          borderWidth: isInvalid ? theme.borderWidth.md : 0
+        },
+        unfocusedBorderColor: "transparent",
+        textColor,
+        placeholderColor,
+        labelColor,
+        helperColor
+      };
+    }
+    return {
+      container: {
+        backgroundColor: colorScheme.background,
+        borderColor: isInvalid ? withPaletteNumber(theme.colors.danger.main, 500) : "transparent",
+        borderWidth: isInvalid ? theme.borderWidth.md : 0
+      },
+      unfocusedBorderColor: "transparent",
+      textColor,
+      placeholderColor,
+      labelColor,
+      helperColor
+    };
+  }, [colorScheme, isDisabled, isInvalid, theme, variant]);
+};
+
+// src/components/input-trigger/input-trigger.style.ts
+import { StyleSheet } from "react-native";
+var styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    gap: 6
+  },
+  noFullWidth: {
+    alignSelf: "flex-start"
+  },
+  inputContainer: {
+    gap: 6
+  },
+  label: {
+    fontWeight: "500"
+  },
+  inputWrapper: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  underlinedWrapper: {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    paddingHorizontal: 0
+  },
+  slot: {
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  content: {
+    flex: 1,
+    padding: 0
+  },
+  helperText: {
+    fontWeight: "400"
+  },
+  disabled: {
+    opacity: 0.6
+  }
+});
+
+// src/components/input-trigger/input-trigger.tsx
+var InputTrigger = ({
+  value,
+  placeholder = "Select...",
+  label,
+  labelPlacement = "outside",
+  description,
+  errorMessage,
+  startContent,
+  endContent,
+  themeColor = "primary",
+  variant = "flat",
+  size = "md",
+  radius = "md",
+  isDisabled = false,
+  isInvalid = false,
+  fullWidth = true,
+  customAppearance,
+  onPress
+}) => {
+  const sizeStyles = useInputTriggerSizeStyles(size);
+  const radiusStyles = useInputTriggerRadiusStyles(radius);
+  const variantStyles = useInputTriggerVariantStyles({
+    themeColor,
+    variant,
+    isInvalid,
+    isDisabled
+  });
+  const hasValue = value !== void 0 && value !== null && value !== "";
+  const helperText = isInvalid && errorMessage ? errorMessage : description;
+  const renderLabel = label ? typeof label === "string" || typeof label === "number" ? /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      style: [
+        styles.label,
+        {
+          color: variantStyles.labelColor,
+          fontSize: sizeStyles.labelSize
+        },
+        customAppearance?.label
+      ]
+    },
+    label
+  ) : /* @__PURE__ */ React.createElement(View, null, label) : null;
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        styles.container,
+        !fullWidth && styles.noFullWidth,
+        isDisabled && styles.disabled,
+        customAppearance?.container
+      ]
+    },
+    /* @__PURE__ */ React.createElement(View, { style: [styles.inputContainer, customAppearance?.inputContainer] }, label && labelPlacement === "outside" && renderLabel, /* @__PURE__ */ React.createElement(
+      Pressable,
+      {
+        onPress: isDisabled ? void 0 : onPress,
+        disabled: isDisabled,
+        accessibilityRole: "button"
+      },
+      /* @__PURE__ */ React.createElement(
+        View,
+        {
+          style: [
+            styles.inputWrapper,
+            {
+              minHeight: sizeStyles.minHeight,
+              paddingVertical: sizeStyles.paddingVertical,
+              paddingHorizontal: variant === "underlined" ? 0 : sizeStyles.paddingHorizontal,
+              gap: sizeStyles.slotGap,
+              backgroundColor: variantStyles.container.backgroundColor,
+              borderWidth: variant === "underlined" ? 0 : variantStyles.container.borderWidth,
+              ...variant === "underlined" && {
+                borderBottomWidth: variantStyles.container.borderBottomWidth
+              },
+              borderRadius: variant === "underlined" ? 0 : radiusStyles.borderRadius,
+              borderColor: variant === "underlined" ? variantStyles.container.borderColor : variantStyles.container.borderColor
+            },
+            variant === "underlined" && styles.underlinedWrapper,
+            customAppearance?.inputWrapper
+          ]
+        },
+        startContent && /* @__PURE__ */ React.createElement(View, { style: styles.slot }, startContent),
+        /* @__PURE__ */ React.createElement(
+          View,
+          {
+            style: {
+              flex: 1,
+              gap: labelPlacement === "inside" && label ? 2 : 0
+            }
+          },
+          label && labelPlacement === "inside" && renderLabel,
+          typeof value === "string" || typeof value === "number" ? /* @__PURE__ */ React.createElement(
+            Text,
+            {
+              numberOfLines: 1,
+              style: [
+                styles.content,
+                {
+                  color: hasValue ? variantStyles.textColor : variantStyles.placeholderColor,
+                  fontSize: sizeStyles.fontSize
+                },
+                customAppearance?.content
+              ]
+            },
+            hasValue ? value : placeholder
+          ) : hasValue ? /* @__PURE__ */ React.createElement(View, { style: { flex: 1 } }, value) : /* @__PURE__ */ React.createElement(
+            Text,
+            {
+              style: [
+                styles.content,
+                {
+                  color: variantStyles.placeholderColor,
+                  fontSize: sizeStyles.fontSize
+                },
+                customAppearance?.content
+              ]
+            },
+            placeholder
+          )
+        ),
+        endContent && /* @__PURE__ */ React.createElement(View, { style: styles.slot }, endContent)
+      )
+    )),
+    helperText ? typeof helperText === "string" || typeof helperText === "number" ? /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [
+          styles.helperText,
+          {
+            color: variantStyles.helperColor,
+            fontSize: sizeStyles.helperSize
+          },
+          customAppearance?.helperText
+        ]
+      },
+      helperText
+    ) : /* @__PURE__ */ React.createElement(View, null, helperText) : null
+  );
+};
+
+export {
+  InputTrigger
+};

package/dist/chunk-EUQDGTST.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/{chunk-DXXNBF5P.js → chunk-SHBDANQN.js}

@@ -1,7 +1,9 @@
 // src/core/index.ts
 import { defaultDarkTheme, defaultTheme } from "@xaui/core/theme";
+import { colors } from "@xaui/core/palette";
 
 export {
   defaultDarkTheme,
-  defaultTheme
+  defaultTheme,
+  colors
 };