@erquhart/heroui-native 1.0.0-beta.10.1

package/src/helpers/theme/color-kit/types.ts

@@ -0,0 +1,212 @@
+/**
+ * Color manipulation utilities adapted from reanimated-color-picker
+ *
+ * Original source: https://github.com/alabsi91/reanimated-color-picker
+ * Author: @alabsi91
+ * License: MIT
+ *
+ * This code has been adapted for use in HeroUI Native with modifications
+ * for TypeScript compatibility and integration with the theme system.
+ */
+
+type NAMED_COLORS = {
+  readonly aliceblue: '#f0f8ff';
+  readonly antiquewhite: '#faebd7';
+  readonly aqua: '#00ffff';
+  readonly aquamarine: '#7fffd4';
+  readonly azure: '#f0ffff';
+  readonly beige: '#f5f5dc';
+  readonly bisque: '#ffe4c4';
+  readonly black: '#000000';
+  readonly blanchedalmond: '#ffebcd';
+  readonly blue: '#0000ff';
+  readonly blueviolet: '#8a2be2';
+  readonly brown: '#a52a2a';
+  readonly burlywood: '#deb887';
+  readonly cadetblue: '#5f9ea0';
+  readonly chartreuse: '#7fff00';
+  readonly chocolate: '#d2691e';
+  readonly coral: '#ff7f50';
+  readonly cornflowerblue: '#6495ed';
+  readonly cornsilk: '#fff8dc';
+  readonly crimson: '#dc143c';
+  readonly cyan: '#00ffff';
+  readonly darkblue: '#00008b';
+  readonly darkcyan: '#008b8b';
+  readonly darkgoldenrod: '#b8860b';
+  readonly darkgray: '#a9a9a9';
+  readonly darkgreen: '#006400';
+  readonly darkgrey: '#a9a9a9';
+  readonly darkkhaki: '#bdb76b';
+  readonly darkmagenta: '#8b008b';
+  readonly darkolivegreen: '#556b2f';
+  readonly darkorange: '#ff8c00';
+  readonly darkorchid: '#9932cc';
+  readonly darkred: '#8b0000';
+  readonly darksalmon: '#e9967a';
+  readonly darkseagreen: '#8fbc8f';
+  readonly darkslateblue: '#483d8b';
+  readonly darkslategrey: '#2f4f4f';
+  readonly darkturquoise: '#00ced1';
+  readonly darkviolet: '#9400d3';
+  readonly deeppink: '#ff1493';
+  readonly deepskyblue: '#00bfff';
+  readonly dimgray: '#696969';
+  readonly dimgrey: '#696969';
+  readonly dodgerblue: '#1e90ff';
+  readonly firebrick: '#b22222';
+  readonly floralwhite: '#fffaf0';
+  readonly forestgreen: '#228b22';
+  readonly fuchsia: '#ff00ff';
+  readonly gainsboro: '#dcdcdc';
+  readonly ghostwhite: '#f8f8ff';
+  readonly gold: '#ffd700';
+  readonly goldenrod: '#daa520';
+  readonly gray: '#808080';
+  readonly green: '#008000';
+  readonly greenyellow: '#adff2f';
+  readonly grey: '#808080';
+  readonly honeydew: '#f0fff0';
+  readonly hotpink: '#ff69b4';
+  readonly indianred: '#cd5c5c';
+  readonly indigo: '#4b0082';
+  readonly ivory: '#fffff0';
+  readonly khaki: '#f0e68c';
+  readonly lavender: '#e6e6fa';
+  readonly lavenderblush: '#fff0f5';
+  readonly lawngreen: '#7cfc00';
+  readonly lemonchiffon: '#fffacd';
+  readonly lightblue: '#add8e6';
+  readonly lightcoral: '#f08080';
+  readonly lightcyan: '#e0ffff';
+  readonly lightgoldenrodyellow: '#fafad2';
+  readonly lightgray: '#d3d3d3';
+  readonly lightgreen: '#90ee90';
+  readonly lightgrey: '#d3d3d3';
+  readonly lightpink: '#ffb6c1';
+  readonly lightsalmon: '#ffa07a';
+  readonly lightseagreen: '#20b2aa';
+  readonly lightskyblue: '#87cefa';
+  readonly lightslategrey: '#778899';
+  readonly lightsteelblue: '#b0c4de';
+  readonly lightyellow: '#ffffe0';
+  readonly lime: '#00ff00';
+  readonly limegreen: '#32cd32';
+  readonly linen: '#faf0e6';
+  readonly magenta: '#ff00ff';
+  readonly maroon: '#800000';
+  readonly mediumaquamarine: '#66cdaa';
+  readonly mediumblue: '#0000cd';
+  readonly mediumorchid: '#ba55d3';
+  readonly mediumpurple: '#9370db';
+  readonly mediumseagreen: '#3cb371';
+  readonly mediumslateblue: '#7b68ee';
+  readonly mediumspringgreen: '#00fa9a';
+  readonly mediumturquoise: '#48d1cc';
+  readonly mediumvioletred: '#c71585';
+  readonly midnightblue: '#191970';
+  readonly mintcream: '#f5fffa';
+  readonly mistyrose: '#ffe4e1';
+  readonly moccasin: '#ffe4b5';
+  readonly navajowhite: '#ffdead';
+  readonly navy: '#000080';
+  readonly oldlace: '#fdf5e6';
+  readonly olive: '#808000';
+  readonly olivedrab: '#6b8e23';
+  readonly orange: '#ffa500';
+  readonly orangered: '#ff4500';
+  readonly orchid: '#da70d6';
+  readonly palegoldenrod: '#eee8aa';
+  readonly palegreen: '#98fb98';
+  readonly paleturquoise: '#afeeee';
+  readonly palevioletred: '#db7093';
+  readonly papayawhip: '#ffefd5';
+  readonly peachpuff: '#ffdab9';
+  readonly peru: '#cd853f';
+  readonly pink: '#ffc0cb';
+  readonly plum: '#dda0dd';
+  readonly powderblue: '#b0e0e6';
+  readonly purple: '#800080';
+  readonly rebeccapurple: '#663399';
+  readonly red: '#ff0000';
+  readonly rosybrown: '#bc8f8f';
+  readonly royalblue: '#4169e1';
+  readonly saddlebrown: '#8b4513';
+  readonly salmon: '#fa8072';
+  readonly sandybrown: '#f4a460';
+  readonly seagreen: '#2e8b57';
+  readonly seashell: '#fff5ee';
+  readonly sienna: '#a0522d';
+  readonly silver: '#c0c0c0';
+  readonly skyblue: '#87ceeb';
+  readonly slateblue: '#6a5acd';
+  readonly slategray: '#708090';
+  readonly snow: '#fffafa';
+  readonly springgreen: '#00ff7f';
+  readonly steelblue: '#4682b4';
+  readonly tan: '#d2b48c';
+  readonly teal: '#008080';
+  readonly thistle: '#d8bfd8';
+  readonly tomato: '#ff6347';
+  readonly turquoise: '#40e0d0';
+  readonly violet: '#ee82ee';
+  readonly wheat: '#f5deb3';
+  readonly white: '#ffffff';
+  readonly whitesmoke: '#f5f5f5';
+  readonly yellow: '#ffff00';
+  readonly yellowgreen: '#9acd32';
+};
+
+export type ColorFormats =
+  | 'hex3'
+  | 'hex4'
+  | 'hex6'
+  | 'hex8'
+  | 'hsl'
+  | 'hsla'
+  | 'rgb'
+  | 'rgba'
+  | 'hsva'
+  | 'hsv'
+  | 'hwba'
+  | 'hwb';
+
+export type ColorString = keyof NAMED_COLORS | (string & NonNullable<unknown>);
+
+export type rgbaT = { r: number; g: number; b: number; a: number };
+export type rgbT = Omit<rgbaT, 'a'>;
+
+export type hslaT = { h: number; s: number; l: number; a: number };
+export type hslT = Omit<hslaT, 'a'>;
+
+export type hsvaT = { h: number; s: number; v: number; a: number };
+export type hsvT = Omit<hsvaT, 'a'>;
+
+export type hwbaT = { h: number; w: number; b: number; a: number };
+export type hwbT = Omit<hwbaT, 'a'>;
+
+export type SupportedColorFormats =
+  | ColorString
+  | rgbaT
+  | rgbT
+  | hslaT
+  | hslT
+  | hsvaT
+  | hsvT
+  | hwbaT
+  | hwbT
+  | number;
+
+export type ColorTypes<T extends object> = {
+  object: (roundValues?: boolean) => T;
+  string: (alpha?: boolean) => string;
+  array: (roundValues?: boolean) => number[];
+};
+
+export type ConversionMethods = {
+  hex: () => string;
+  rgb: () => ColorTypes<rgbaT>;
+  hsl: () => ColorTypes<hslaT>;
+  hsv: () => ColorTypes<hsvaT>;
+  hwb: () => ColorTypes<hwbaT>;
+};

package/src/helpers/theme/hooks/use-is-on-surface.ts

@@ -0,0 +1,8 @@
+import { useSurface } from '../../../components/surface';
+
+export const useIsOnSurface = () => {
+  const surfaceContext = useSurface();
+  return surfaceContext?.variant && surfaceContext.variant !== 'transparent'
+    ? true
+    : false;
+};

package/src/helpers/theme/hooks/use-theme-color.ts

@@ -0,0 +1,56 @@
+import { useCSSVariable } from 'uniwind';
+import type { ThemeColor } from '../types';
+
+/**
+ * Helper type to create a tuple of strings with the same length as the input array
+ */
+type CreateStringTuple<
+  N extends number,
+  TAcc extends string[] = [],
+> = TAcc['length'] extends N ? TAcc : CreateStringTuple<N, [...TAcc, string]>;
+
+/**
+ * Hook to retrieve theme color values from CSS variables.
+ * Supports both single color and multiple colors for efficient batch retrieval.
+ *
+ * @param themeColor - Single theme color name or array of theme color names
+ * @returns Single color string or array of color strings
+ *
+ * @example
+ * // Single color
+ * const primaryColor = useThemeColor('accent');
+ *
+ * @example
+ * // Multiple colors (more efficient)
+ * const [primaryColor, backgroundColor] = useThemeColor(['accent', 'background']);
+ */
+export function useThemeColor(themeColor: ThemeColor): string;
+export function useThemeColor<T extends readonly [ThemeColor, ...ThemeColor[]]>(
+  themeColor: T
+): CreateStringTuple<T['length']>;
+export function useThemeColor(themeColor: ThemeColor[]): string[];
+export function useThemeColor(
+  themeColor: ThemeColor | ThemeColor[]
+): string | string[] {
+  const isArray = Array.isArray(themeColor);
+  const cssVariables = isArray
+    ? themeColor.map((color) => `--color-${color}`)
+    : [`--color-${themeColor}`];
+
+  const resolvedColors = useCSSVariable(cssVariables);
+
+  const processedColors: string[] = resolvedColors.map((color) => {
+    if (typeof color === 'string') {
+      return color;
+    }
+    if (typeof color === 'number') {
+      return String(color);
+    }
+    return 'invalid';
+  });
+
+  if (isArray) {
+    return processedColors;
+  }
+  return processedColors[0]!;
+}

package/src/helpers/theme/index.ts

@@ -0,0 +1,4 @@
+export { default as colorKit } from './color-kit';
+export { useIsOnSurface } from './hooks/use-is-on-surface';
+export { useThemeColor } from './hooks/use-theme-color';
+export { cn } from './utils/cn';

package/src/helpers/theme/types.ts

@@ -0,0 +1,89 @@
+import type { ClassValue } from 'tailwind-variants';
+
+/**
+ * This Typescript utility transform a list of slots into a list of {slot: classes}
+ */
+type ElementSlots<S extends string> = {
+  [key in S]?: Exclude<ClassValue, 0n>;
+};
+
+/**
+ * Type helper that preserves the exact type of combined style objects
+ * This ensures that VariantProps inference works correctly for each style
+ */
+type CombinedStyles<T extends Record<string, any>> = {
+  [K in keyof T]: T[K];
+};
+
+/**
+ * Theme colors as const array for efficient mapping
+ */
+const THEME_COLORS = [
+  'background',
+  'background-secondary',
+  'background-tertiary',
+  'background-quaternary',
+  'background-inverse',
+  'foreground',
+  'surface',
+  'surface-foreground',
+  'surface-secondary',
+  'surface-tertiary',
+  'surface-quaternary',
+  'overlay',
+  'overlay-foreground',
+  'on-surface',
+  'on-surface-foreground',
+  'on-surface-hover',
+  'on-surface-focus',
+  'muted',
+  'default',
+  'default-foreground',
+  'default-hover',
+  'accent',
+  'accent-foreground',
+  'accent-hover',
+  'accent-soft',
+  'accent-soft-foreground',
+  'accent-soft-hover',
+  'field',
+  'field-foreground',
+  'field-placeholder',
+  'field-border',
+  'field-hover',
+  'field-focus',
+  'field-border-hover',
+  'field-border-focus',
+  'success',
+  'success-foreground',
+  'success-hover',
+  'success-soft',
+  'success-soft-foreground',
+  'success-soft-hover',
+  'warning',
+  'warning-foreground',
+  'warning-hover',
+  'warning-soft',
+  'warning-soft-foreground',
+  'warning-soft-hover',
+  'danger',
+  'danger-foreground',
+  'danger-hover',
+  'danger-soft',
+  'danger-soft-foreground',
+  'danger-soft-hover',
+  'segment',
+  'segment-foreground',
+  'border',
+  'divider',
+  'focus',
+  'link',
+] as const;
+
+/**
+ * Theme colors type derived from THEME_COLORS array
+ */
+type ThemeColor = (typeof THEME_COLORS)[number];
+
+export { THEME_COLORS };
+export type { CombinedStyles, ElementSlots, ThemeColor };

package/src/helpers/theme/utils/cn.ts

@@ -0,0 +1,12 @@
+import { cnMerge, type CnOptions } from 'tailwind-variants';
+
+export function cn(...args: CnOptions) {
+  return cnMerge(args)({
+    twMerge: true,
+    twMergeConfig: {
+      classGroups: {
+        opacity: [{ opacity: ['disabled'] }],
+      },
+    },
+  });
+}

package/src/helpers/theme/utils/combine-styles.ts

@@ -0,0 +1,17 @@
+import type { CombinedStyles } from '../types';
+
+/**
+ * Helper function to combine style objects with proper type inference
+ * This preserves the exact types of each style object, including VariantProps
+ * @example
+ * const styles = combineStyles({
+ *   root,
+ *   item,
+ *   content
+ * });
+ */
+export function combineStyles<T extends Record<string, any>>(
+  styles: T
+): CombinedStyles<T> {
+  return styles as CombinedStyles<T>;
+}

package/src/helpers/types/animation.ts

@@ -0,0 +1,183 @@
+import type {
+  BaseAnimationBuilder,
+  LayoutAnimationFunction,
+  WithSpringConfig,
+  WithTimingConfig,
+} from 'react-native-reanimated';
+
+/**
+ * Universal animation prop type
+ * - `true` or `undefined`: Use default animations
+ * - `false` or `"disabled"`: Disable all animations
+ * - `object`: Custom animation configuration
+ *   - Can include `state?: 'disabled' | boolean | undefined` to disable animations while customizing properties
+ */
+export type Animation<
+  TConfig extends Record<string, any> = Record<string, any>,
+> = boolean | 'disabled' | (TConfig & { state?: 'disabled' | boolean });
+
+export type AnimationDisabled = 'disabled' | false;
+
+/**
+ * Root-level animation prop type with cascading control
+ * - `true` or `undefined`: Use default animations
+ * - `false` or `"disabled"`: Disable only root animations (children can still animate)
+ * - `"disable-all"`: Disable all animations including children (cascades down)
+ * - `object`: Custom animation configuration
+ *   - Can include `state?: 'disabled' | 'disable-all' | boolean` to disable animations while customizing properties
+ */
+export type AnimationRoot<
+  TConfig extends Record<string, any> = Record<string, any>,
+> =
+  | boolean
+  | 'disabled'
+  | 'disable-all'
+  | (TConfig & { state?: 'disabled' | 'disable-all' | boolean });
+
+export type AnimationRootDisableAll = Extract<AnimationRoot, 'disable-all'>;
+
+/**
+ * Animation value that can be a custom config
+ * Used for granular animation control within a component
+ */
+export type AnimationValue<
+  TConfig extends Record<string, any> = Record<string, any>,
+> = TConfig;
+
+export type LayoutTransition =
+  | BaseAnimationBuilder
+  | LayoutAnimationFunction
+  | typeof BaseAnimationBuilder
+  | undefined;
+
+/**
+ * Spring animation configuration
+ */
+export interface SpringAnimationConfig {
+  type: 'spring';
+  config?: WithSpringConfig;
+}
+
+/**
+ * Timing animation configuration
+ */
+export interface TimingAnimationConfig {
+  type: 'timing';
+  config?: WithTimingConfig;
+}
+
+/**
+ * Animation configuration for popup root components (Dialog, Select, etc.)
+ * Supports entering and exiting animations with spring or timing types
+ */
+export type PopupRootAnimationConfig = {
+  /**
+   * Animation configuration for entering (opening)
+   */
+  entering?: AnimationValue<SpringAnimationConfig | TimingAnimationConfig>;
+  /**
+   * Animation configuration for exiting (closing)
+   */
+  exiting?: AnimationValue<SpringAnimationConfig | TimingAnimationConfig>;
+};
+
+/**
+ * Animation configuration for popup overlay components (Dialog, Select, etc.)
+ * Supports opacity animation configuration
+ */
+export type PopupOverlayAnimation = Animation<{
+  /**
+   * Opacity animation configuration
+   */
+  opacity?: AnimationValue<{
+    /**
+     * Opacity values [idle, open, close]
+     * @default [0, 1, 0]
+     */
+    value?: [number, number, number];
+  }>;
+}>;
+
+/**
+ * Animation configuration for popup dialog content components (Dialog, Select dialog presentation)
+ * Supports opacity and scale animations
+ */
+export type PopupDialogContentAnimation = Animation<{
+  /**
+   * Opacity animation configuration
+   */
+  opacity?: AnimationValue<{
+    /**
+     * Opacity values [idle, open, close]
+     * @default [0, 1, 0]
+     */
+    value?: [number, number, number];
+  }>;
+  /**
+   * Scale animation configuration
+   */
+  scale?: AnimationValue<{
+    /**
+     * Scale values [idle, open, close]
+     * @default [0.97, 1, 0.97]
+     */
+    value?: [number, number, number];
+  }>;
+}>;
+
+/**
+ * Animation configuration for popup popover content components (Popover, Select popover presentation)
+ * Supports opacity, scale, translate, and transform origin animations
+ */
+export type PopupPopoverContentAnimation = Animation<{
+  /**
+   * Opacity animation configuration
+   */
+  opacity?: AnimationValue<{
+    /**
+     * Opacity values [idle, open, close]
+     * @default [0, 1, 0]
+     */
+    value?: [number, number, number];
+  }>;
+  /**
+   * Scale animation configuration
+   */
+  scale?: AnimationValue<{
+    /**
+     * Scale values [idle, open, close]
+     * @default [0.95, 1, 0.95]
+     */
+    value?: [number, number, number];
+  }>;
+  /**
+   * TranslateX animation configuration
+   */
+  translateX?: AnimationValue<{
+    /**
+     * TranslateX values [idle, open, close]
+     * @default Based on placement (4, 0, 4) or (-4, 0, -4)
+     */
+    value?: [number, number, number];
+  }>;
+  /**
+   * TranslateY animation configuration
+   */
+  translateY?: AnimationValue<{
+    /**
+     * TranslateY values [idle, open, close]
+     * @default Based on placement (4, 0, 4) or (-4, 0, -4)
+     */
+    value?: [number, number, number];
+  }>;
+  /**
+   * Transform origin configuration
+   */
+  transformOrigin?: AnimationValue<{
+    /**
+     * Transform origin value
+     * @default Based on placement ('top', 'bottom', 'left', 'right')
+     */
+    value?: string;
+  }>;
+}>;

package/src/helpers/types/bottom-sheet.ts

@@ -0,0 +1,74 @@
+import type { BottomSheetViewProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetView/types';
+import type { ReactNode } from 'react';
+import type { AnimationDisabled } from './animation';
+
+/**
+ * State type for bottom sheet content container animation coordination
+ */
+export type BottomSheetContentContainerState = 'idle' | 'open' | 'close';
+
+/**
+ * Props for the reusable BottomSheetContentContainer component
+ */
+export interface BottomSheetContentContainerProps {
+  /**
+   * The content to be rendered inside the container
+   */
+  children?: ReactNode;
+  /**
+   * Additional CSS class for the content container
+   */
+  contentContainerClassName?: string;
+  /**
+   * Props for the content container
+   */
+  contentContainerProps?: Omit<BottomSheetViewProps, 'children'>;
+  /**
+   * Current state of the bottom sheet for animation coordination
+   */
+  state: BottomSheetContentContainerState;
+}
+
+/**
+ * Base props shared across BottomSheet Content components
+ * Used by BottomSheet, Popover, and Select components when using bottom-sheet presentation
+ */
+export interface BaseBottomSheetContentProps {
+  /**
+   * The bottom sheet content
+   */
+  children?: ReactNode;
+  /**
+   * Additional CSS class for the bottom sheet
+   */
+  className?: string;
+  /**
+   * Additional CSS class for the container
+   */
+  containerClassName?: string;
+  /**
+   * Additional CSS class for the content container
+   */
+  contentContainerClassName?: string;
+  /**
+   * Additional CSS class for the background
+   */
+  backgroundClassName?: string;
+  /**
+   * Additional CSS class for the handle
+   */
+  handleClassName?: string;
+  /**
+   * Additional CSS class for the handle indicator
+   */
+  handleIndicatorClassName?: string;
+  /**
+   * Props for the content container
+   */
+  contentContainerProps?: Omit<BottomSheetViewProps, 'children'>;
+  /**
+   * Animation configuration for bottom sheet content
+   * - `false` or `"disabled"`: Disable all animations
+   */
+  animation?: AnimationDisabled;
+}

package/src/helpers/types/index.ts

@@ -0,0 +1,4 @@
+export * from './animation';
+export * from './bottom-sheet';
+export * from './misc';
+export * from './primitives';

package/src/helpers/types/misc.ts

@@ -0,0 +1,10 @@
+type ReactChild =
+  | string
+  | number
+  | bigint
+  | React.ReactElement<unknown, string | React.JSXElementConstructor<any>>
+  | Iterable<React.ReactNode>
+  | React.ReactPortal
+  | Promise<any>;
+
+export type { ReactChild };