@xaui/native 0.2.8 → 0.9.1-alpha.1

package/dist/color-picker/index.cjs

@@ -1,457 +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(); } } 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 _chunkZH6ZSV2Qcjs = require('../chunk-ZH6ZSV2Q.cjs');
-
-
-var _chunkBYWUAPC4cjs = require('../chunk-BYWUAPC4.cjs');
-require('../chunk-56RPWZD2.cjs');
-
-
-var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.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 = "colored",
-  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 = _chunk7UFBLUMVcjs.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(
-    _chunkZH6ZSV2Qcjs.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(
-    _chunkBYWUAPC4cjs.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

@@ -1,124 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ViewStyle } from 'react-native';
-import { ThemeColor, Radius } from '@xaui/core/types';
-import { d as InputTriggerLabelPlacement, b as InputTriggerVariant, c as InputTriggerSize } from '../input-trigger.type-Ba4bM3Qp.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

@@ -1,124 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ViewStyle } from 'react-native';
-import { ThemeColor, Radius } from '@xaui/core/types';
-import { d as InputTriggerLabelPlacement, b as InputTriggerVariant, c as InputTriggerSize } from '../input-trigger.type-Ba4bM3Qp.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 };