@xaui/native 0.0.31 → 0.0.33

package/dist/color-picker/index.js

@@ -0,0 +1,460 @@
+import {
+  InputTrigger
+} from "../chunk-E4DOPNVW.js";
+import {
+  BottomSheet
+} from "../chunk-ED22WCCI.js";
+import "../chunk-DXXNBF5P.js";
+import {
+  useXUITheme
+} from "../chunk-LTKYHG5V.js";
+
+// src/components/color-picker/color-picker.tsx
+import React, { useEffect, useState } from "react";
+import { Pressable, ScrollView, Text, View } from "react-native";
+import { withOpacity } from "@xaui/core";
+
+// src/components/color-picker/color-picker.palette.ts
+var defaultColorGroups = [
+  {
+    name: "Red",
+    colors: [
+      "#fef2f2",
+      "#fecaca",
+      "#f87171",
+      "#ef4444",
+      "#dc2626",
+      "#b91c1c",
+      "#991b1b",
+      "#7f1d1d"
+    ]
+  },
+  {
+    name: "Orange",
+    colors: [
+      "#fff7ed",
+      "#fed7aa",
+      "#fb923c",
+      "#f97316",
+      "#ea580c",
+      "#c2410c",
+      "#9a3412",
+      "#7c2d12"
+    ]
+  },
+  {
+    name: "Amber",
+    colors: [
+      "#fffbeb",
+      "#fde68a",
+      "#fbbf24",
+      "#f59e0b",
+      "#d97706",
+      "#b45309",
+      "#92400e",
+      "#78350f"
+    ]
+  },
+  {
+    name: "Yellow",
+    colors: [
+      "#fefce8",
+      "#fef08a",
+      "#facc15",
+      "#eab308",
+      "#ca8a04",
+      "#a16207",
+      "#854d0e",
+      "#713f12"
+    ]
+  },
+  {
+    name: "Lime",
+    colors: [
+      "#f7fee7",
+      "#d9f99d",
+      "#86efac",
+      "#4ade80",
+      "#22c55e",
+      "#16a34a",
+      "#15803d",
+      "#14532d"
+    ]
+  },
+  {
+    name: "Green",
+    colors: [
+      "#f0fdf4",
+      "#bbf7d0",
+      "#4ade80",
+      "#22c55e",
+      "#16a34a",
+      "#15803d",
+      "#166534",
+      "#14532d"
+    ]
+  },
+  {
+    name: "Teal",
+    colors: [
+      "#f0fdfa",
+      "#99f6e4",
+      "#2dd4bf",
+      "#14b8a6",
+      "#0d9488",
+      "#0f766e",
+      "#115e59",
+      "#134e4a"
+    ]
+  },
+  {
+    name: "Cyan",
+    colors: [
+      "#ecfeff",
+      "#a5f3fc",
+      "#22d3ee",
+      "#06b6d4",
+      "#0891b2",
+      "#0e7490",
+      "#155e75",
+      "#164e63"
+    ]
+  },
+  {
+    name: "Blue",
+    colors: [
+      "#eff6ff",
+      "#bfdbfe",
+      "#60a5fa",
+      "#3b82f6",
+      "#2563eb",
+      "#1d4ed8",
+      "#1e40af",
+      "#1e3a8a"
+    ]
+  },
+  {
+    name: "Indigo",
+    colors: [
+      "#eef2ff",
+      "#c7d2fe",
+      "#818cf8",
+      "#6366f1",
+      "#4f46e5",
+      "#4338ca",
+      "#3730a3",
+      "#312e81"
+    ]
+  },
+  {
+    name: "Violet",
+    colors: [
+      "#f5f3ff",
+      "#ddd6fe",
+      "#a78bfa",
+      "#8b5cf6",
+      "#7c3aed",
+      "#6d28d9",
+      "#5b21b6",
+      "#4c1d95"
+    ]
+  },
+  {
+    name: "Purple",
+    colors: [
+      "#faf5ff",
+      "#e9d5ff",
+      "#c084fc",
+      "#a855f7",
+      "#9333ea",
+      "#7e22ce",
+      "#6b21a8",
+      "#581c87"
+    ]
+  },
+  {
+    name: "Pink",
+    colors: [
+      "#fdf2f8",
+      "#fbcfe8",
+      "#f472b6",
+      "#ec4899",
+      "#db2777",
+      "#be185d",
+      "#9d174d",
+      "#831843"
+    ]
+  },
+  {
+    name: "Rose",
+    colors: [
+      "#fff1f2",
+      "#fecdd3",
+      "#fb7185",
+      "#f43f5e",
+      "#e11d48",
+      "#be123c",
+      "#9f1239",
+      "#881337"
+    ]
+  },
+  {
+    name: "Neutral",
+    colors: [
+      "#fafafa",
+      "#f5f5f5",
+      "#e5e5e5",
+      "#d4d4d4",
+      "#a3a3a3",
+      "#737373",
+      "#525252",
+      "#404040",
+      "#262626",
+      "#171717",
+      "#0a0a0a"
+    ]
+  }
+];
+
+// src/components/color-picker/color-picker.style.ts
+import { StyleSheet } from "react-native";
+var styles = StyleSheet.create({
+  sheetContent: {
+    flex: 1,
+    paddingBottom: 24
+  },
+  header: {
+    paddingHorizontal: 20,
+    paddingTop: 4,
+    paddingBottom: 16,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  sheetTitle: {
+    fontSize: 16,
+    fontWeight: "600"
+  },
+  selectedPreview: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  previewSwatch: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    borderWidth: 2
+  },
+  hexLabel: {
+    fontSize: 13,
+    fontWeight: "500",
+    letterSpacing: 0.5
+  },
+  groupContainer: {
+    marginBottom: 16,
+    paddingHorizontal: 20
+  },
+  groupName: {
+    fontSize: 13,
+    fontWeight: "500",
+    marginBottom: 8
+  },
+  swatchRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8
+  },
+  triggerSwatch: {
+    width: 22,
+    height: 22,
+    borderRadius: 4,
+    borderWidth: 1
+  }
+});
+
+// src/components/color-picker/color-picker.tsx
+var Swatch = ({
+  color,
+  size,
+  isSelected,
+  onSelect,
+  borderColor
+}) => /* @__PURE__ */ React.createElement(
+  Pressable,
+  {
+    onPress: () => onSelect(color),
+    accessibilityRole: "button",
+    accessibilityLabel: color,
+    accessibilityState: { selected: isSelected },
+    style: [
+      {
+        width: size,
+        height: size,
+        borderRadius: 6,
+        backgroundColor: color,
+        borderWidth: isSelected ? 3 : 1,
+        borderColor: isSelected ? borderColor : withOpacity(borderColor, 0.15)
+      }
+    ]
+  }
+);
+var ColorGroupSection = ({
+  group,
+  selectedColor,
+  swatchSize,
+  themeMain,
+  foreground,
+  onSelect
+}) => /* @__PURE__ */ React.createElement(View, { style: styles.groupContainer }, /* @__PURE__ */ React.createElement(Text, { style: [styles.groupName, { color: withOpacity(foreground, 0.6) }] }, group.name), /* @__PURE__ */ React.createElement(View, { style: styles.swatchRow }, group.colors.map((color) => /* @__PURE__ */ React.createElement(
+  Swatch,
+  {
+    key: color,
+    color,
+    size: swatchSize,
+    isSelected: color === selectedColor,
+    onSelect,
+    borderColor: color === selectedColor ? themeMain : foreground
+  }
+))));
+var ColorPicker = ({
+  value,
+  placeholder = "Pick a color...",
+  label,
+  labelPlacement = "outside",
+  description,
+  errorMessage,
+  colorGroups = defaultColorGroups,
+  sheetTitle = "Pick a color",
+  themeColor = "primary",
+  variant = "flat",
+  size = "md",
+  radius = "md",
+  isOpened,
+  isDisabled = false,
+  isInvalid = false,
+  fullWidth = true,
+  sheetStyle,
+  swatchSize = 28,
+  onColorChange,
+  onOpenChange,
+  onClose
+}) => {
+  const [isOpen, setIsOpen] = useState(isOpened ?? false);
+  const theme = useXUITheme();
+  const sheetBackground = theme.mode === "dark" ? theme.colors.background : "#ffffff";
+  useEffect(() => {
+    if (isOpened !== void 0) {
+      setIsOpen(isOpened);
+    }
+  }, [isOpened]);
+  const handleOpen = () => {
+    if (isDisabled) return;
+    setIsOpen(true);
+    onOpenChange?.(true);
+  };
+  const handleClose = () => {
+    setIsOpen(false);
+    onOpenChange?.(false);
+    onClose?.();
+  };
+  const handleSelect = (color) => {
+    onColorChange?.(color);
+    handleClose();
+  };
+  const triggerColor = value;
+  const foreground = theme.colors.foreground;
+  const themeMain = theme.colors[themeColor]?.main ?? foreground;
+  const triggerEndContent = /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        styles.triggerSwatch,
+        {
+          backgroundColor: triggerColor ?? "transparent",
+          borderColor: triggerColor ? withOpacity(foreground, 0.2) : withOpacity(foreground, 0.15),
+          borderStyle: triggerColor ? "solid" : "dashed"
+        }
+      ]
+    }
+  );
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    InputTrigger,
+    {
+      value: value ? "" : void 0,
+      placeholder,
+      label,
+      labelPlacement,
+      description,
+      errorMessage,
+      themeColor,
+      variant,
+      size,
+      radius,
+      isDisabled,
+      isInvalid,
+      fullWidth,
+      startContent: triggerEndContent,
+      endContent: value ? /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          style: [
+            {
+              fontSize: 13,
+              fontWeight: "500",
+              letterSpacing: 0.5,
+              color: withOpacity(foreground, 0.6)
+            }
+          ]
+        },
+        value.toUpperCase()
+      ) : void 0,
+      onPress: handleOpen
+    }
+  ), /* @__PURE__ */ React.createElement(
+    BottomSheet,
+    {
+      isOpen,
+      snapPoints: [0.75],
+      themeColor,
+      onClose: handleClose,
+      style: { backgroundColor: sheetBackground, ...sheetStyle }
+    },
+    /* @__PURE__ */ React.createElement(View, { style: styles.sheetContent }, /* @__PURE__ */ React.createElement(View, { style: styles.header }, /* @__PURE__ */ React.createElement(Text, { style: [styles.sheetTitle, { color: foreground }] }, sheetTitle), value && /* @__PURE__ */ React.createElement(View, { style: styles.selectedPreview }, /* @__PURE__ */ React.createElement(
+      View,
+      {
+        style: [
+          styles.previewSwatch,
+          {
+            backgroundColor: value,
+            borderColor: withOpacity(foreground, 0.2)
+          }
+        ]
+      }
+    ), /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [
+          styles.hexLabel,
+          { color: withOpacity(foreground, 0.7) }
+        ]
+      },
+      value.toUpperCase()
+    ))), /* @__PURE__ */ React.createElement(ScrollView, { showsVerticalScrollIndicator: false }, colorGroups.map((group) => /* @__PURE__ */ React.createElement(
+      ColorGroupSection,
+      {
+        key: group.name,
+        group,
+        selectedColor: value,
+        swatchSize,
+        themeMain,
+        foreground,
+        onSelect: handleSelect
+      }
+    ))))
+  ));
+};
+export {
+  ColorPicker,
+  defaultColorGroups
+};