@xaui/native 0.0.32 → 0.0.33

package/dist/color-picker/index.cjs

@@ -0,0 +1,460 @@
+"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(); } } 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 _chunk2ANGPYCPcjs = require('../chunk-2ANGPYCP.cjs');
+
+
+var _chunkRVR42THGcjs = require('../chunk-RVR42THG.cjs');
+require('../chunk-HSPTLUFA.cjs');
+
+
+var _chunkOQ2BLOOGcjs = require('../chunk-OQ2BLOOG.cjs');
+
+// src/components/color-picker/color-picker.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _reactnative = require('react-native');
+var _core = require('@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
+
+var styles = _reactnative.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__ */ _react2.default.createElement(
+  _reactnative.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 : _core.withOpacity.call(void 0, borderColor, 0.15)
+      }
+    ]
+  }
+);
+var ColorGroupSection = ({
+  group,
+  selectedColor,
+  swatchSize,
+  themeMain,
+  foreground,
+  onSelect
+}) => /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.groupContainer }, /* @__PURE__ */ _react2.default.createElement(_reactnative.Text, { style: [styles.groupName, { color: _core.withOpacity.call(void 0, foreground, 0.6) }] }, group.name), /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.swatchRow }, group.colors.map((color) => /* @__PURE__ */ _react2.default.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] = _react.useState.call(void 0, _nullishCoalesce(isOpened, () => ( false)));
+  const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
+  const sheetBackground = theme.mode === "dark" ? theme.colors.background : "#ffffff";
+  _react.useEffect.call(void 0, () => {
+    if (isOpened !== void 0) {
+      setIsOpen(isOpened);
+    }
+  }, [isOpened]);
+  const handleOpen = () => {
+    if (isDisabled) return;
+    setIsOpen(true);
+    _optionalChain([onOpenChange, 'optionalCall', _ => _(true)]);
+  };
+  const handleClose = () => {
+    setIsOpen(false);
+    _optionalChain([onOpenChange, 'optionalCall', _2 => _2(false)]);
+    _optionalChain([onClose, 'optionalCall', _3 => _3()]);
+  };
+  const handleSelect = (color) => {
+    _optionalChain([onColorChange, 'optionalCall', _4 => _4(color)]);
+    handleClose();
+  };
+  const triggerColor = value;
+  const foreground = theme.colors.foreground;
+  const themeMain = _nullishCoalesce(_optionalChain([theme, 'access', _5 => _5.colors, 'access', _6 => _6[themeColor], 'optionalAccess', _7 => _7.main]), () => ( foreground));
+  const triggerEndContent = /* @__PURE__ */ _react2.default.createElement(
+    _reactnative.View,
+    {
+      style: [
+        styles.triggerSwatch,
+        {
+          backgroundColor: _nullishCoalesce(triggerColor, () => ( "transparent")),
+          borderColor: triggerColor ? _core.withOpacity.call(void 0, foreground, 0.2) : _core.withOpacity.call(void 0, foreground, 0.15),
+          borderStyle: triggerColor ? "solid" : "dashed"
+        }
+      ]
+    }
+  );
+  return /* @__PURE__ */ _react2.default.createElement(_react2.default.Fragment, null, /* @__PURE__ */ _react2.default.createElement(
+    _chunk2ANGPYCPcjs.InputTrigger,
+    {
+      value: value ? "" : void 0,
+      placeholder,
+      label,
+      labelPlacement,
+      description,
+      errorMessage,
+      themeColor,
+      variant,
+      size,
+      radius,
+      isDisabled,
+      isInvalid,
+      fullWidth,
+      startContent: triggerEndContent,
+      endContent: value ? /* @__PURE__ */ _react2.default.createElement(
+        _reactnative.Text,
+        {
+          style: [
+            {
+              fontSize: 13,
+              fontWeight: "500",
+              letterSpacing: 0.5,
+              color: _core.withOpacity.call(void 0, foreground, 0.6)
+            }
+          ]
+        },
+        value.toUpperCase()
+      ) : void 0,
+      onPress: handleOpen
+    }
+  ), /* @__PURE__ */ _react2.default.createElement(
+    _chunkRVR42THGcjs.BottomSheet,
+    {
+      isOpen,
+      snapPoints: [0.75],
+      themeColor,
+      onClose: handleClose,
+      style: { backgroundColor: sheetBackground, ...sheetStyle }
+    },
+    /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.sheetContent }, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.header }, /* @__PURE__ */ _react2.default.createElement(_reactnative.Text, { style: [styles.sheetTitle, { color: foreground }] }, sheetTitle), value && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.selectedPreview }, /* @__PURE__ */ _react2.default.createElement(
+      _reactnative.View,
+      {
+        style: [
+          styles.previewSwatch,
+          {
+            backgroundColor: value,
+            borderColor: _core.withOpacity.call(void 0, foreground, 0.2)
+          }
+        ]
+      }
+    ), /* @__PURE__ */ _react2.default.createElement(
+      _reactnative.Text,
+      {
+        style: [
+          styles.hexLabel,
+          { color: _core.withOpacity.call(void 0, foreground, 0.7) }
+        ]
+      },
+      value.toUpperCase()
+    ))), /* @__PURE__ */ _react2.default.createElement(_reactnative.ScrollView, { showsVerticalScrollIndicator: false }, colorGroups.map((group) => /* @__PURE__ */ _react2.default.createElement(
+      ColorGroupSection,
+      {
+        key: group.name,
+        group,
+        selectedColor: value,
+        swatchSize,
+        themeMain,
+        foreground,
+        onSelect: handleSelect
+      }
+    ))))
+  ));
+};
+
+
+
+exports.ColorPicker = ColorPicker; exports.defaultColorGroups = defaultColorGroups;

package/dist/color-picker/index.d.cts

@@ -0,0 +1,124 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+import { T as ThemeColor, R as Radius } from '../index-DyU3sW3_.cjs';
+import { d as InputTriggerLabelPlacement, b as InputTriggerVariant, c as InputTriggerSize } from '../input-trigger.type-BL70fHE9.cjs';
+
+type ColorGroup = {
+    /**
+     * Display name of the color group.
+     */
+    name: string;
+    /**
+     * Array of hex color strings.
+     */
+    colors: string[];
+};
+type ColorPickerProps = {
+    /**
+     * Currently selected color (hex string).
+     */
+    value?: string;
+    /**
+     * Placeholder text shown when no color is selected.
+     * @default 'Pick a color...'
+     */
+    placeholder?: string;
+    /**
+     * Label displayed above or inside the trigger.
+     */
+    label?: ReactNode;
+    /**
+     * Position of the label relative to the trigger.
+     * @default 'outside'
+     */
+    labelPlacement?: InputTriggerLabelPlacement;
+    /**
+     * Helper text displayed below the trigger.
+     */
+    description?: ReactNode;
+    /**
+     * Error message when isInvalid is true.
+     */
+    errorMessage?: ReactNode;
+    /**
+     * Custom color groups. If not provided, uses the built-in Tailwind palette.
+     */
+    colorGroups?: ColorGroup[];
+    /**
+     * Title displayed at the top of the color sheet.
+     * @default 'Pick a color'
+     */
+    sheetTitle?: string;
+    /**
+     * Theme color for selected state highlight and trigger.
+     * @default 'primary'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Visual variant of the trigger.
+     * @default 'flat'
+     */
+    variant?: InputTriggerVariant;
+    /**
+     * Size of the trigger.
+     * @default 'md'
+     */
+    size?: InputTriggerSize;
+    /**
+     * Border radius.
+     * @default 'md'
+     */
+    radius?: Radius;
+    /**
+     * Controlled open state.
+     */
+    isOpened?: boolean;
+    /**
+     * Whether the trigger is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the trigger is in an invalid state.
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Whether the trigger takes the full available width.
+     * @default true
+     */
+    fullWidth?: boolean;
+    /**
+     * Custom style for the bottom sheet container.
+     */
+    sheetStyle?: ViewStyle;
+    /**
+     * Size of each color swatch in the palette.
+     * @default 28
+     */
+    swatchSize?: number;
+} & ColorPickerEvents;
+type ColorPickerEvents = {
+    /**
+     * Called when the selected color changes.
+     *
+     * Note: This handler is named `onColorChange` instead of the more generic
+     * `onValueChange` (used by other picker components) to emphasize that the
+     * value is specifically a color string (e.g. `#RRGGBB`).
+     */
+    onColorChange?: (color: string) => void;
+    /**
+     * Called when the sheet opens or closes.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Called when the sheet closes.
+     */
+    onClose?: () => void;
+};
+
+declare const ColorPicker: React.FC<ColorPickerProps>;
+
+declare const defaultColorGroups: ColorGroup[];
+
+export { type ColorGroup, ColorPicker, type ColorPickerEvents, type ColorPickerProps, defaultColorGroups };

package/dist/color-picker/index.d.ts

@@ -0,0 +1,124 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+import { T as ThemeColor, R as Radius } from '../index-DyU3sW3_.js';
+import { d as InputTriggerLabelPlacement, b as InputTriggerVariant, c as InputTriggerSize } from '../input-trigger.type-BODYStHk.js';
+
+type ColorGroup = {
+    /**
+     * Display name of the color group.
+     */
+    name: string;
+    /**
+     * Array of hex color strings.
+     */
+    colors: string[];
+};
+type ColorPickerProps = {
+    /**
+     * Currently selected color (hex string).
+     */
+    value?: string;
+    /**
+     * Placeholder text shown when no color is selected.
+     * @default 'Pick a color...'
+     */
+    placeholder?: string;
+    /**
+     * Label displayed above or inside the trigger.
+     */
+    label?: ReactNode;
+    /**
+     * Position of the label relative to the trigger.
+     * @default 'outside'
+     */
+    labelPlacement?: InputTriggerLabelPlacement;
+    /**
+     * Helper text displayed below the trigger.
+     */
+    description?: ReactNode;
+    /**
+     * Error message when isInvalid is true.
+     */
+    errorMessage?: ReactNode;
+    /**
+     * Custom color groups. If not provided, uses the built-in Tailwind palette.
+     */
+    colorGroups?: ColorGroup[];
+    /**
+     * Title displayed at the top of the color sheet.
+     * @default 'Pick a color'
+     */
+    sheetTitle?: string;
+    /**
+     * Theme color for selected state highlight and trigger.
+     * @default 'primary'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Visual variant of the trigger.
+     * @default 'flat'
+     */
+    variant?: InputTriggerVariant;
+    /**
+     * Size of the trigger.
+     * @default 'md'
+     */
+    size?: InputTriggerSize;
+    /**
+     * Border radius.
+     * @default 'md'
+     */
+    radius?: Radius;
+    /**
+     * Controlled open state.
+     */
+    isOpened?: boolean;
+    /**
+     * Whether the trigger is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the trigger is in an invalid state.
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Whether the trigger takes the full available width.
+     * @default true
+     */
+    fullWidth?: boolean;
+    /**
+     * Custom style for the bottom sheet container.
+     */
+    sheetStyle?: ViewStyle;
+    /**
+     * Size of each color swatch in the palette.
+     * @default 28
+     */
+    swatchSize?: number;
+} & ColorPickerEvents;
+type ColorPickerEvents = {
+    /**
+     * Called when the selected color changes.
+     *
+     * Note: This handler is named `onColorChange` instead of the more generic
+     * `onValueChange` (used by other picker components) to emphasize that the
+     * value is specifically a color string (e.g. `#RRGGBB`).
+     */
+    onColorChange?: (color: string) => void;
+    /**
+     * Called when the sheet opens or closes.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Called when the sheet closes.
+     */
+    onClose?: () => void;
+};
+
+declare const ColorPicker: React.FC<ColorPickerProps>;
+
+declare const defaultColorGroups: ColorGroup[];
+
+export { type ColorGroup, ColorPicker, type ColorPickerEvents, type ColorPickerProps, defaultColorGroups };