@wireservers-ui/react-natives 1.0.0-rc.3 → 1.0.1-rc1

package/src/select/select-trigger.tsx

@@ -1,64 +1,64 @@
-import React, { useCallback, useRef } from 'react';
-import { Pressable, type View } from 'react-native';
-import { useSelectContext } from './select';
-import type { SelectTriggerProps } from './types';
-import { selectTriggerStyle } from './styles';
-
-export const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof Pressable>,
-  SelectTriggerProps
->(({ className, children, ...props }, forwardedRef) => {
-  const { variant, size, isDisabled, isInvalid, isOpen, onOpen, setTriggerLayout } =
-    useSelectContext();
-
-  const internalRef = useRef<View>(null);
-
-  const setRef = useCallback(
-    (node: View | null) => {
-      internalRef.current = node;
-      if (typeof forwardedRef === 'function') forwardedRef(node as any);
-      else if (forwardedRef)
-        (forwardedRef as React.MutableRefObject<any>).current = node;
-    },
-    [forwardedRef],
-  );
-
-  const handlePress = useCallback(() => {
-    if (internalRef.current) {
-      (internalRef.current as any).measureInWindow(
-        (x: number, y: number, width: number, height: number) => {
-          setTriggerLayout({ pageX: x, pageY: y, width, height });
-          onOpen();
-        },
-      );
-    } else {
-      onOpen();
-    }
-  }, [onOpen, setTriggerLayout]);
-
-  return (
-    <Pressable
-      ref={setRef}
-      disabled={isDisabled}
-      onPress={handlePress}
-      className={selectTriggerStyle({
-        variant,
-        size,
-        isFocused: isOpen,
-        isInvalid,
-        isDisabled,
-        class: className,
-      })}
-      accessibilityRole="button"
-      accessibilityState={{
-        disabled: isDisabled,
-        expanded: isOpen,
-      }}
-      {...props}
-    >
-      {children}
-    </Pressable>
-  );
-});
-
-SelectTrigger.displayName = 'SelectTrigger';
+import React, { useCallback, useRef } from 'react';
+import { Pressable, type View } from 'react-native';
+import { useSelectContext } from './select';
+import type { SelectTriggerProps } from './types';
+import { selectTriggerStyle } from './styles';
+
+export const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  SelectTriggerProps
+>(({ className, children, ...props }, forwardedRef) => {
+  const { variant, size, isDisabled, isInvalid, isOpen, onOpen, setTriggerLayout } =
+    useSelectContext();
+
+  const internalRef = useRef<View>(null);
+
+  const setRef = useCallback(
+    (node: View | null) => {
+      internalRef.current = node;
+      if (typeof forwardedRef === 'function') forwardedRef(node as any);
+      else if (forwardedRef)
+        (forwardedRef as React.MutableRefObject<any>).current = node;
+    },
+    [forwardedRef],
+  );
+
+  const handlePress = useCallback(() => {
+    if (internalRef.current) {
+      (internalRef.current as any).measureInWindow(
+        (x: number, y: number, width: number, height: number) => {
+          setTriggerLayout({ pageX: x, pageY: y, width, height });
+          onOpen();
+        },
+      );
+    } else {
+      onOpen();
+    }
+  }, [onOpen, setTriggerLayout]);
+
+  return (
+    <Pressable
+      ref={setRef}
+      disabled={isDisabled}
+      onPress={handlePress}
+      className={selectTriggerStyle({
+        variant,
+        size,
+        isFocused: isOpen,
+        isInvalid,
+        isDisabled,
+        class: className,
+      })}
+      accessibilityRole="button"
+      accessibilityState={{
+        disabled: isDisabled,
+        expanded: isOpen,
+      }}
+      {...props}
+    >
+      {children}
+    </Pressable>
+  );
+});
+
+SelectTrigger.displayName = 'SelectTrigger';

package/src/select/select.tsx

@@ -1,101 +1,101 @@
-import React, { useState, useCallback, createContext, useContext } from 'react';
-import { View } from 'react-native';
-import { useFormControlContext } from '../form-control/form-control';
-import type { SelectProps, SelectContextValue, SelectSize, TriggerLayout } from './types';
-
-export const SelectContext = createContext<SelectContextValue | null>(null);
-
-export function useSelectContext(): SelectContextValue {
-  const ctx = useContext(SelectContext);
-  if (!ctx) {
-    throw new Error(
-      'Select compound components must be used within <Select>',
-    );
-  }
-  return ctx;
-}
-
-export const Select = React.forwardRef<
-  React.ElementRef<typeof View>,
-  SelectProps
->(
-  (
-    {
-      className,
-      selectedValue: controlledValue,
-      defaultValue,
-      onValueChange: onValueChangeProp,
-      size = 'md',
-      variant = 'outline',
-      isDisabled: isDisabledProp,
-      isInvalid: isInvalidProp,
-      placeholder = 'Select...',
-      children,
-    },
-    ref,
-  ) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const [internalValue, setInternalValue] = useState<string | null>(
-      defaultValue ?? null,
-    );
-    const [internalLabel, setInternalLabel] = useState('');
-    const [triggerLayout, setTriggerLayout] = useState<TriggerLayout | null>(null);
-
-    const formControl = useFormControlContext();
-
-    const isDisabled = isDisabledProp ?? formControl?.isDisabled ?? false;
-    const isInvalid = isInvalidProp ?? formControl?.isInvalid ?? false;
-    const resolvedSize = size ?? (formControl?.size as SelectSize) ?? 'md';
-
-    const isControlled = controlledValue !== undefined;
-    const selectedValue = isControlled ? controlledValue : internalValue;
-
-    const selectedLabel = selectedValue ? internalLabel || selectedValue : '';
-
-    const onOpen = useCallback(() => {
-      if (!isDisabled) {
-        setIsOpen(true);
-      }
-    }, [isDisabled]);
-
-    const onClose = useCallback(() => {
-      setIsOpen(false);
-    }, []);
-
-    const onValueChange = useCallback(
-      (value: string, label: string) => {
-        if (!isControlled) {
-          setInternalValue(value);
-        }
-        setInternalLabel(label);
-        onValueChangeProp?.(value);
-      },
-      [isControlled, onValueChangeProp],
-    );
-
-    return (
-      <SelectContext.Provider
-        value={{
-          isOpen,
-          selectedValue: selectedValue ?? null,
-          selectedLabel,
-          size: resolvedSize,
-          variant,
-          isDisabled,
-          isInvalid,
-          triggerLayout,
-          onOpen,
-          onClose,
-          onValueChange,
-          setTriggerLayout,
-        }}
-      >
-        <View ref={ref} className={className}>
-          {children}
-        </View>
-      </SelectContext.Provider>
-    );
-  },
-);
-
-Select.displayName = 'Select';
+import React, { useState, useCallback, createContext, useContext } from 'react';
+import { View } from 'react-native';
+import { useFormControlContext } from '../form-control/form-control';
+import type { SelectProps, SelectContextValue, SelectSize, TriggerLayout } from './types';
+
+export const SelectContext = createContext<SelectContextValue | null>(null);
+
+export function useSelectContext(): SelectContextValue {
+  const ctx = useContext(SelectContext);
+  if (!ctx) {
+    throw new Error(
+      'Select compound components must be used within <Select>',
+    );
+  }
+  return ctx;
+}
+
+export const Select = React.forwardRef<
+  React.ElementRef<typeof View>,
+  SelectProps
+>(
+  (
+    {
+      className,
+      selectedValue: controlledValue,
+      defaultValue,
+      onValueChange: onValueChangeProp,
+      size = 'md',
+      variant = 'outline',
+      isDisabled: isDisabledProp,
+      isInvalid: isInvalidProp,
+      placeholder = 'Select...',
+      children,
+    },
+    ref,
+  ) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [internalValue, setInternalValue] = useState<string | null>(
+      defaultValue ?? null,
+    );
+    const [internalLabel, setInternalLabel] = useState('');
+    const [triggerLayout, setTriggerLayout] = useState<TriggerLayout | null>(null);
+
+    const formControl = useFormControlContext();
+
+    const isDisabled = isDisabledProp ?? formControl?.isDisabled ?? false;
+    const isInvalid = isInvalidProp ?? formControl?.isInvalid ?? false;
+    const resolvedSize = size ?? (formControl?.size as SelectSize) ?? 'md';
+
+    const isControlled = controlledValue !== undefined;
+    const selectedValue = isControlled ? controlledValue : internalValue;
+
+    const selectedLabel = selectedValue ? internalLabel || selectedValue : '';
+
+    const onOpen = useCallback(() => {
+      if (!isDisabled) {
+        setIsOpen(true);
+      }
+    }, [isDisabled]);
+
+    const onClose = useCallback(() => {
+      setIsOpen(false);
+    }, []);
+
+    const onValueChange = useCallback(
+      (value: string, label: string) => {
+        if (!isControlled) {
+          setInternalValue(value);
+        }
+        setInternalLabel(label);
+        onValueChangeProp?.(value);
+      },
+      [isControlled, onValueChangeProp],
+    );
+
+    return (
+      <SelectContext.Provider
+        value={{
+          isOpen,
+          selectedValue: selectedValue ?? null,
+          selectedLabel,
+          size: resolvedSize,
+          variant,
+          isDisabled,
+          isInvalid,
+          triggerLayout,
+          onOpen,
+          onClose,
+          onValueChange,
+          setTriggerLayout,
+        }}
+      >
+        <View ref={ref} className={className}>
+          {children}
+        </View>
+      </SelectContext.Provider>
+    );
+  },
+);
+
+Select.displayName = 'Select';

package/src/select/styles.ts

@@ -1,114 +1,114 @@
-import { tv } from 'tailwind-variants';
-
-export const selectTriggerStyle = tv({
-  base: 'flex-row items-center',
-  variants: {
-    variant: {
-      outline: 'border border-outline-300 rounded-md bg-transparent',
-      filled: 'border border-transparent rounded-md bg-background-50',
-      underlined: 'border-b border-outline-300 bg-transparent rounded-none',
-      rounded: 'border border-outline-300 rounded-full bg-transparent',
-    },
-    size: {
-      sm: 'h-9 px-3',
-      md: 'h-10 px-3',
-      lg: 'h-11 px-3',
-      xl: 'h-12 px-3.5',
-    },
-    isFocused: {
-      true: 'border-primary-500',
-    },
-    isInvalid: {
-      true: 'border-error-500',
-    },
-    isDisabled: {
-      true: 'opacity-40',
-    },
-  },
-  compoundVariants: [
-    {
-      isFocused: true,
-      isInvalid: true,
-      class: 'border-error-500',
-    },
-  ],
-  defaultVariants: {
-    variant: 'outline',
-    size: 'md',
-  },
-});
-
-export const selectInputStyle = tv({
-  base: 'flex-1 text-typography-900',
-  variants: {
-    size: {
-      sm: 'text-sm',
-      md: 'text-base',
-      lg: 'text-lg',
-      xl: 'text-xl',
-    },
-    hasValue: {
-      false: 'text-typography-400',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});
-
-export const selectIconStyle = tv({
-  base: 'text-typography-400 ml-2',
-  variants: {
-    size: {
-      sm: 'h-4 w-4',
-      md: 'h-[18px] w-[18px]',
-      lg: 'h-5 w-5',
-      xl: 'h-5 w-5',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});
-
-export const selectBackdropStyle = tv({
-  base: 'absolute inset-0',
-});
-
-export const selectContentStyle = tv({
-  base: 'bg-background-0 rounded-lg py-1 border border-outline-200 shadow-hard-5',
-});
-
-export const selectDragIndicatorStyle = tv({
-  base: 'w-10 h-1 bg-outline-300 rounded-full self-center mt-2 mb-3',
-});
-
-export const selectItemStyle = tv({
-  base: 'flex-row items-center px-4 py-2.5 active:bg-background-100',
-  variants: {
-    isSelected: {
-      true: 'bg-background-50',
-    },
-    isDisabled: {
-      true: 'opacity-40',
-    },
-  },
-});
-
-export const selectItemTextStyle = tv({
-  base: 'text-typography-900 flex-1',
-  variants: {
-    size: {
-      sm: 'text-sm',
-      md: 'text-base',
-      lg: 'text-lg',
-      xl: 'text-xl',
-    },
-    isSelected: {
-      true: 'font-semibold text-primary-600',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});
+import { tv } from 'tailwind-variants';
+
+export const selectTriggerStyle = tv({
+  base: 'flex-row items-center',
+  variants: {
+    variant: {
+      outline: 'border border-outline-300 rounded-md bg-transparent',
+      filled: 'border border-transparent rounded-md bg-background-50',
+      underlined: 'border-b border-outline-300 bg-transparent rounded-none',
+      rounded: 'border border-outline-300 rounded-full bg-transparent',
+    },
+    size: {
+      sm: 'h-9 px-3',
+      md: 'h-10 px-3',
+      lg: 'h-11 px-3',
+      xl: 'h-12 px-3.5',
+    },
+    isFocused: {
+      true: 'border-primary-500',
+    },
+    isInvalid: {
+      true: 'border-error-500',
+    },
+    isDisabled: {
+      true: 'opacity-40',
+    },
+  },
+  compoundVariants: [
+    {
+      isFocused: true,
+      isInvalid: true,
+      class: 'border-error-500',
+    },
+  ],
+  defaultVariants: {
+    variant: 'outline',
+    size: 'md',
+  },
+});
+
+export const selectInputStyle = tv({
+  base: 'flex-1 text-typography-900',
+  variants: {
+    size: {
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+      xl: 'text-xl',
+    },
+    hasValue: {
+      false: 'text-typography-400',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const selectIconStyle = tv({
+  base: 'text-typography-400 ml-2',
+  variants: {
+    size: {
+      sm: 'h-4 w-4',
+      md: 'h-[18px] w-[18px]',
+      lg: 'h-5 w-5',
+      xl: 'h-5 w-5',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const selectBackdropStyle = tv({
+  base: 'absolute inset-0',
+});
+
+export const selectContentStyle = tv({
+  base: 'bg-background-0 rounded-lg py-1 border border-outline-200 shadow-hard-5',
+});
+
+export const selectDragIndicatorStyle = tv({
+  base: 'w-10 h-1 bg-outline-300 rounded-full self-center mt-2 mb-3',
+});
+
+export const selectItemStyle = tv({
+  base: 'flex-row items-center px-4 py-2.5 active:bg-background-100',
+  variants: {
+    isSelected: {
+      true: 'bg-background-50',
+    },
+    isDisabled: {
+      true: 'opacity-40',
+    },
+  },
+});
+
+export const selectItemTextStyle = tv({
+  base: 'text-typography-900 flex-1',
+  variants: {
+    size: {
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+      xl: 'text-xl',
+    },
+    isSelected: {
+      true: 'font-semibold text-primary-600',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});