@wireservers-ui/react-natives 2.0.0 → 2.0.2-rc.0

package/src/select/types.ts

@@ -1,92 +1,92 @@
-import type { View, Text as RNText, Pressable, ScrollView } from 'react-native';
-
-export type SelectSize = 'sm' | 'md' | 'lg' | 'xl';
-export type SelectVariant = 'outline' | 'filled' | 'underlined' | 'rounded';
-
-export interface TriggerLayout {
-  pageX: number;
-  pageY: number;
-  width: number;
-  height: number;
-}
-
-export interface SelectContextValue {
-  isOpen: boolean;
-  selectedValue: string | null;
-  selectedLabel: string;
-  size: SelectSize;
-  variant: SelectVariant;
-  isDisabled: boolean;
-  isInvalid: boolean;
-  triggerLayout: TriggerLayout | null;
-  onOpen: () => void;
-  onClose: () => void;
-  onValueChange: (value: string, label: string) => void;
-  setTriggerLayout: (layout: TriggerLayout) => void;
-}
-
-export interface SelectProps {
-  className?: string;
-  selectedValue?: string;
-  defaultValue?: string;
-  onValueChange?: (value: string) => void;
-  size?: SelectSize;
-  variant?: SelectVariant;
-  isDisabled?: boolean;
-  isInvalid?: boolean;
-  placeholder?: string;
-  children: React.ReactNode;
-}
-
-export interface SelectTriggerProps
-  extends React.ComponentPropsWithoutRef<typeof Pressable> {
-  className?: string;
-}
-
-export interface SelectInputProps
-  extends React.ComponentPropsWithoutRef<typeof RNText> {
-  className?: string;
-  placeholder?: string;
-}
-
-export interface SelectIconProps {
-  as?: React.ElementType;
-  className?: string;
-}
-
-export interface SelectPortalProps {
-  children: React.ReactNode;
-}
-
-export interface SelectBackdropProps
-  extends React.ComponentPropsWithoutRef<typeof Pressable> {
-  className?: string;
-}
-
-export interface SelectContentProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
-
-export interface SelectItemProps
-  extends React.ComponentPropsWithoutRef<typeof Pressable> {
-  className?: string;
-  label: string;
-  value: string;
-  isDisabled?: boolean;
-}
-
-export interface SelectItemTextProps
-  extends React.ComponentPropsWithoutRef<typeof RNText> {
-  className?: string;
-}
-
-export interface SelectDragIndicatorProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
-
-export interface SelectScrollViewProps
-  extends React.ComponentPropsWithoutRef<typeof ScrollView> {
-  className?: string;
-}
+import type { View, Text as RNText, Pressable, ScrollView } from 'react-native';
+
+export type SelectSize = 'sm' | 'md' | 'lg' | 'xl';
+export type SelectVariant = 'outline' | 'filled' | 'underlined' | 'rounded';
+
+export interface TriggerLayout {
+  pageX: number;
+  pageY: number;
+  width: number;
+  height: number;
+}
+
+export interface SelectContextValue {
+  isOpen: boolean;
+  selectedValue: string | null;
+  selectedLabel: string;
+  size: SelectSize;
+  variant: SelectVariant;
+  isDisabled: boolean;
+  isInvalid: boolean;
+  triggerLayout: TriggerLayout | null;
+  onOpen: () => void;
+  onClose: () => void;
+  onValueChange: (value: string, label: string) => void;
+  setTriggerLayout: (layout: TriggerLayout) => void;
+}
+
+export interface SelectProps {
+  className?: string;
+  selectedValue?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  size?: SelectSize;
+  variant?: SelectVariant;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  placeholder?: string;
+  children: React.ReactNode;
+}
+
+export interface SelectTriggerProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+}
+
+export interface SelectInputProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+  placeholder?: string;
+}
+
+export interface SelectIconProps {
+  as?: React.ElementType;
+  className?: string;
+}
+
+export interface SelectPortalProps {
+  children: React.ReactNode;
+}
+
+export interface SelectBackdropProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+}
+
+export interface SelectContentProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface SelectItemProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+  label: string;
+  value: string;
+  isDisabled?: boolean;
+}
+
+export interface SelectItemTextProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}
+
+export interface SelectDragIndicatorProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface SelectScrollViewProps
+  extends React.ComponentPropsWithoutRef<typeof ScrollView> {
+  className?: string;
+}

package/src/skeleton/index.ts

@@ -1,2 +1,2 @@
-export { Skeleton } from './skeleton';
-export type { SkeletonProps, SkeletonVariant } from './types';
+export { Skeleton } from './skeleton';
+export type { SkeletonProps, SkeletonVariant } from './types';

package/src/skeleton/skeleton.tsx

@@ -1,29 +1,29 @@
-import React from 'react';
-import { View } from 'react-native';
-import type { SkeletonProps } from './types';
-import { skeletonStyle, SKELETON_VARIANT_STYLE } from './styles';
-
-export const Skeleton = React.forwardRef<
-  React.ElementRef<typeof View>,
-  SkeletonProps
->(({ className, variant, width, height, isLoaded, children, style, ...props }, ref) => {
-  if (isLoaded) {
-    return <>{children}</>;
-  }
-
-  return (
-    <View
-      ref={ref}
-      className={skeletonStyle({ class: className })}
-      style={[
-        SKELETON_VARIANT_STYLE[variant ?? 'rounded'],
-        width !== undefined ? { width } : undefined,
-        height !== undefined ? { height } : undefined,
-        style,
-      ]}
-      {...props}
-    />
-  );
-});
-
-Skeleton.displayName = 'Skeleton';
+import React from 'react';
+import { View } from 'react-native';
+import type { SkeletonProps } from './types';
+import { skeletonStyle, SKELETON_VARIANT_STYLE } from './styles';
+
+export const Skeleton = React.forwardRef<
+  React.ElementRef<typeof View>,
+  SkeletonProps
+>(({ className, variant, width, height, isLoaded, children, style, ...props }, ref) => {
+  if (isLoaded) {
+    return <>{children}</>;
+  }
+
+  return (
+    <View
+      ref={ref}
+      className={skeletonStyle({ class: className })}
+      style={[
+        SKELETON_VARIANT_STYLE[variant ?? 'rounded'],
+        width !== undefined ? { width } : undefined,
+        height !== undefined ? { height } : undefined,
+        style,
+      ]}
+      {...props}
+    />
+  );
+});
+
+Skeleton.displayName = 'Skeleton';

package/src/skeleton/styles.ts

@@ -1,14 +1,14 @@
-import { tv } from 'tailwind-variants';
-
-export const skeletonStyle = tv({
-  base: 'bg-background-200 animate-pulse',
-  variants: {},
-  defaultVariants: {},
-});
-
-export const SKELETON_VARIANT_STYLE: Record<string, { borderRadius: number }> = {
-  text: { borderRadius: 4 },
-  circular: { borderRadius: 9999 },
-  rectangular: { borderRadius: 0 },
-  rounded: { borderRadius: 8 },
-};
+import { tv } from 'tailwind-variants';
+
+export const skeletonStyle = tv({
+  base: 'bg-background-200 animate-pulse',
+  variants: {},
+  defaultVariants: {},
+});
+
+export const SKELETON_VARIANT_STYLE: Record<string, { borderRadius: number }> = {
+  text: { borderRadius: 4 },
+  circular: { borderRadius: 9999 },
+  rectangular: { borderRadius: 0 },
+  rounded: { borderRadius: 8 },
+};

package/src/skeleton/types.ts

@@ -1,12 +1,12 @@
-import type { DimensionValue, View } from 'react-native';
-
-export type SkeletonVariant = 'text' | 'circular' | 'rectangular' | 'rounded';
-
-export interface SkeletonProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-  variant?: SkeletonVariant;
-  width?: DimensionValue;
-  height?: DimensionValue;
-  isLoaded?: boolean;
-}
+import type { DimensionValue, View } from 'react-native';
+
+export type SkeletonVariant = 'text' | 'circular' | 'rectangular' | 'rounded';
+
+export interface SkeletonProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  variant?: SkeletonVariant;
+  width?: DimensionValue;
+  height?: DimensionValue;
+  isLoaded?: boolean;
+}

package/src/slider/index.ts

@@ -1,12 +1,12 @@
-export { Slider, SliderProvider, useSliderContext } from './slider';
-export { SliderTrack } from './slider-track';
-export { SliderFilledTrack } from './slider-filled-track';
-export { SliderThumb } from './slider-thumb';
-export type {
-  SliderProps,
-  SliderTrackProps,
-  SliderFilledTrackProps,
-  SliderThumbProps,
-  SliderSize,
-  SliderContextValue,
-} from './types';
+export { Slider, SliderProvider, useSliderContext } from './slider';
+export { SliderTrack } from './slider-track';
+export { SliderFilledTrack } from './slider-filled-track';
+export { SliderThumb } from './slider-thumb';
+export type {
+  SliderProps,
+  SliderTrackProps,
+  SliderFilledTrackProps,
+  SliderThumbProps,
+  SliderSize,
+  SliderContextValue,
+} from './types';

package/src/slider/slider-filled-track.tsx

@@ -1,31 +1,31 @@
-import React from 'react';
-import { View } from 'react-native';
-import { useSliderContext } from './slider';
-import type { SliderFilledTrackProps } from './types';
-import { sliderFilledTrackStyle } from './styles';
-
-export const SliderFilledTrack = React.forwardRef<
-  React.ElementRef<typeof View>,
-  SliderFilledTrackProps
->(({ className, style, ...props }, ref) => {
-  const { orientation, percentage } = useSliderContext();
-
-  const dynamicStyle =
-    orientation === 'horizontal'
-      ? { width: `${percentage}%` as const }
-      : { height: `${percentage}%` as const };
-
-  return (
-    <View
-      ref={ref}
-      className={sliderFilledTrackStyle({
-        orientation,
-        class: className,
-      })}
-      style={[dynamicStyle, style]}
-      {...props}
-    />
-  );
-});
-
-SliderFilledTrack.displayName = 'SliderFilledTrack';
+import React from 'react';
+import { View } from 'react-native';
+import { useSliderContext } from './slider';
+import type { SliderFilledTrackProps } from './types';
+import { sliderFilledTrackStyle } from './styles';
+
+export const SliderFilledTrack = React.forwardRef<
+  React.ElementRef<typeof View>,
+  SliderFilledTrackProps
+>(({ className, style, ...props }, ref) => {
+  const { orientation, percentage } = useSliderContext();
+
+  const dynamicStyle =
+    orientation === 'horizontal'
+      ? { width: `${percentage}%` as const }
+      : { height: `${percentage}%` as const };
+
+  return (
+    <View
+      ref={ref}
+      className={sliderFilledTrackStyle({
+        orientation,
+        class: className,
+      })}
+      style={[dynamicStyle, style]}
+      {...props}
+    />
+  );
+});
+
+SliderFilledTrack.displayName = 'SliderFilledTrack';

package/src/slider/slider-thumb.tsx

@@ -1,52 +1,52 @@
-import React from 'react';
-import { View, Platform } from 'react-native';
-import { useSliderContext } from './slider';
-import type { SliderThumbProps } from './types';
-import { sliderThumbStyle } from './styles';
-
-const isWeb = Platform.OS === 'web';
-
-const THUMB_SIZE: Record<string, number> = {
-  sm: 16,
-  md: 20,
-  lg: 24,
-};
-
-export const SliderThumb = React.forwardRef<
-  React.ElementRef<typeof View>,
-  SliderThumbProps
->(({ className, style, ...props }, ref) => {
-  const { size, percentage, orientation, trackLayout } = useSliderContext();
-
-  const thumbSize = THUMB_SIZE[size] ?? 20;
-
-  const trackDimension =
-    orientation === 'horizontal' ? trackLayout.width : trackLayout.height;
-  const offset = (percentage / 100) * trackDimension - thumbSize / 2;
-
-  const positionStyle =
-    orientation === 'horizontal'
-      ? {
-          left: offset,
-          top: '50%' as const,
-          transform: [{ translateY: -thumbSize / 2 }],
-        }
-      : {
-          bottom: offset,
-          left: '50%' as const,
-          transform: [{ translateX: -thumbSize / 2 }],
-        };
-
-  return (
-    <View
-      ref={ref}
-      className={sliderThumbStyle({ size, class: className })}
-      style={[positionStyle, isWeb ? { pointerEvents: 'none' } as any : undefined, style]}
-      accessible
-      accessibilityRole="adjustable"
-      {...props}
-    />
-  );
-});
-
-SliderThumb.displayName = 'SliderThumb';
+import React from 'react';
+import { View, Platform } from 'react-native';
+import { useSliderContext } from './slider';
+import type { SliderThumbProps } from './types';
+import { sliderThumbStyle } from './styles';
+
+const isWeb = Platform.OS === 'web';
+
+const THUMB_SIZE: Record<string, number> = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+};
+
+export const SliderThumb = React.forwardRef<
+  React.ElementRef<typeof View>,
+  SliderThumbProps
+>(({ className, style, ...props }, ref) => {
+  const { size, percentage, orientation, trackLayout } = useSliderContext();
+
+  const thumbSize = THUMB_SIZE[size] ?? 20;
+
+  const trackDimension =
+    orientation === 'horizontal' ? trackLayout.width : trackLayout.height;
+  const offset = (percentage / 100) * trackDimension - thumbSize / 2;
+
+  const positionStyle =
+    orientation === 'horizontal'
+      ? {
+          left: offset,
+          top: '50%' as const,
+          transform: [{ translateY: -thumbSize / 2 }],
+        }
+      : {
+          bottom: offset,
+          left: '50%' as const,
+          transform: [{ translateX: -thumbSize / 2 }],
+        };
+
+  return (
+    <View
+      ref={ref}
+      className={sliderThumbStyle({ size, class: className })}
+      style={[positionStyle, isWeb ? { pointerEvents: 'none' } as any : undefined, style]}
+      accessible
+      accessibilityRole="adjustable"
+      {...props}
+    />
+  );
+});
+
+SliderThumb.displayName = 'SliderThumb';