@pickle-ui/react-native 1.0.0-beta.1 → 1.0.0-beta.2

package/src/components/form/Textarea.tsx

@@ -0,0 +1,74 @@
+import { useState } from 'react';
+import { TextInput } from 'react-native';
+
+import { cn } from '../../lib/cn';
+import { InputFrame } from '../_internal/InputFrame';
+
+const sizeClasses = {
+  lg: 'min-h-18 px-[11px]',
+  md: 'min-h-17.5 px-[11px]',
+  sm: 'min-h-16 px-[9px]',
+} as const;
+
+export type TextareaProps = Omit<
+  React.ComponentProps<typeof TextInput>,
+  'multiline'
+> & {
+  /** Class overrides for the inner `TextInput`; `className` styles the control around it. */
+  classNames?: { textarea?: string };
+  /** Dims the field and stops editing, like the web's `disabled`. */
+  disabled?: boolean;
+  /** Marks the value as invalid, like the web's `aria-invalid`. */
+  invalid?: boolean;
+  size?: 'lg' | 'md' | 'sm';
+};
+
+/**
+ * A multi-line text field that grows with its content from three lines, like
+ * `Textarea` in @pickle-ui/react. Set a `min-h-*` class on
+ * `classNames.textarea` to change the minimum.
+ */
+export function Textarea({
+  className,
+  classNames,
+  disabled = false,
+  editable = true,
+  invalid = false,
+  onBlur,
+  onFocus,
+  size = 'md',
+  ...props
+}: TextareaProps) {
+  const [focused, setFocused] = useState(false);
+
+  return (
+    <InputFrame
+      className={className}
+      disabled={disabled}
+      focused={focused}
+      invalid={invalid}
+    >
+      <TextInput
+        accessibilityState={{ disabled }}
+        className={cn(
+          'text-foreground web:field-sizing-content web:resize-none flex-1 py-2 text-sm outline-none',
+          sizeClasses[size],
+          classNames?.textarea,
+        )}
+        editable={editable && !disabled}
+        multiline
+        onBlur={(event) => {
+          setFocused(false);
+          onBlur?.(event);
+        }}
+        onFocus={(event) => {
+          setFocused(true);
+          onFocus?.(event);
+        }}
+        placeholderTextColorClassName="accent-muted-foreground/72"
+        textAlignVertical="top"
+        {...props}
+      />
+    </InputFrame>
+  );
+}

package/src/entries/checkbox.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from '../components/form/Checkbox';
+export type { CheckboxProps } from '../components/form/Checkbox';

package/src/entries/flex.ts

@@ -0,0 +1,2 @@
+export { Flex } from '../components/Flex';
+export type { FlexProps } from '../components/Flex';

package/src/entries/form.ts

@@ -0,0 +1,13 @@
+export { Form } from '../components/form/Form';
+export type {
+  FormCheckboxProps,
+  FormDescriptionProps,
+  FormErrorProps,
+  FormFieldProps,
+  FormInputGroupProps,
+  FormInputProps,
+  FormLabelProps,
+  FormProps,
+  FormRadioGroupProps,
+  FormTextareaProps,
+} from '../components/form/Form';

package/src/entries/grid.ts

@@ -0,0 +1,2 @@
+export { Grid } from '../components/Grid';
+export type { GridProps } from '../components/Grid';

package/src/entries/input-group.ts

@@ -0,0 +1,8 @@
+export { InputGroup } from '../components/form/InputGroup';
+export type {
+  InputGroupAddonProps,
+  InputGroupButtonProps,
+  InputGroupInputProps,
+  InputGroupProps,
+  InputGroupTextProps,
+} from '../components/form/InputGroup';

package/src/entries/input.ts

@@ -0,0 +1,2 @@
+export { Input } from '../components/form/Input';
+export type { InputProps } from '../components/form/Input';

package/src/entries/radio-group.ts

@@ -0,0 +1,5 @@
+export { RadioGroup } from '../components/form/RadioGroup';
+export type {
+  RadioGroupItemProps,
+  RadioGroupProps,
+} from '../components/form/RadioGroup';

package/src/entries/separator.ts

@@ -0,0 +1,2 @@
+export { Separator } from '../components/Separator';
+export type { SeparatorProps } from '../components/Separator';

package/src/entries/spinner.ts

@@ -0,0 +1,2 @@
+export { Spinner } from '../components/Spinner';
+export type { SpinnerProps } from '../components/Spinner';

package/src/entries/textarea.ts

@@ -0,0 +1,2 @@
+export { Textarea } from '../components/form/Textarea';
+export type { TextareaProps } from '../components/form/Textarea';

package/src/entries/x-stack.ts

@@ -0,0 +1,2 @@
+export { XStack } from '../components/XStack';
+export type { XStackProps } from '../components/XStack';

package/src/entries/y-stack.ts

@@ -0,0 +1,2 @@
+export { YStack } from '../components/YStack';
+export type { YStackProps } from '../components/YStack';

package/src/index.ts

@@ -3,7 +3,19 @@
 export * from './entries/badge';
 export * from './entries/button';
 export * from './entries/card';
+export * from './entries/checkbox';
 export * from './entries/cn';
+export * from './entries/flex';
+export * from './entries/form';
+export * from './entries/grid';
+export * from './entries/input';
+export * from './entries/input-group';
+export * from './entries/radio-group';
+export * from './entries/separator';
+export * from './entries/spinner';
 export * from './entries/text';
+export * from './entries/textarea';
 export * from './entries/theme';
 export * from './entries/use-color-token';
+export * from './entries/x-stack';
+export * from './entries/y-stack';

package/dist/components/_internal/Spinner.d.ts

@@ -1,9 +0,0 @@
-/**
- * The web `Spinner`'s look on native: a three-quarter ring turning once a
- * second. Color it with a `border-*` class. Decorative: the control showing
- * it reports the busy state.
- */
-export declare function Spinner({ className }: {
-    className?: string;
-}): import("react").JSX.Element;
-//# sourceMappingURL=Spinner.d.ts.map

package/dist/components/_internal/Spinner.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/_internal/Spinner.tsx"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAsC5D"}

package/dist/components/_internal/Spinner.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { Animated, Easing, Platform, View } from 'react-native';
-import { cn } from '../../lib/cn';
-/**
- * The web `Spinner`'s look on native: a three-quarter ring turning once a
- * second. Color it with a `border-*` class. Decorative: the control showing
- * it reports the busy state.
- */
-export function Spinner({ className }) {
-    const [turn] = useState(() => new Animated.Value(0));
-    useEffect(() => {
-        const loop = Animated.loop(Animated.timing(turn, {
-            duration: 1000,
-            easing: Easing.linear,
-            toValue: 1,
-            // react-native-web has no native driver and warns when asked for it.
-            useNativeDriver: Platform.OS !== 'web',
-        }));
-        loop.start();
-        return () => loop.stop();
-    }, [turn]);
-    const rotate = turn.interpolate({
-        inputRange: [0, 1],
-        outputRange: ['0deg', '360deg'],
-    });
-    return (_jsx(Animated.View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: { transform: [{ rotate }] }, children: _jsx(View, { className: cn('border-foreground size-3 rounded-full border-[1.5px] opacity-80', className, 
-            // After the color, which would otherwise override the open side.
-            'border-t-transparent') }) }));
-}
-//# sourceMappingURL=Spinner.js.map

package/dist/components/_internal/Spinner.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../../src/components/_internal/Spinner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEhE,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAElC;;;;GAIG;AACH,MAAM,UAAU,OAAO,CAAC,EAAE,SAAS,EAA0B;IAC3D,MAAM,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAErD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CACxB,QAAQ,CAAC,MAAM,CAAC,IAAI,EAAE;YACpB,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,MAAM,CAAC,MAAM;YACrB,OAAO,EAAE,CAAC;YACV,qEAAqE;YACrE,eAAe,EAAE,QAAQ,CAAC,EAAE,KAAK,KAAK;SACvC,CAAC,CACH,CAAC;QACF,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,OAAO,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC;QAC9B,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QAClB,WAAW,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC;KAChC,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,QAAQ,CAAC,IAAI,IACZ,2BAA2B,QAC3B,yBAAyB,EAAC,qBAAqB,EAC/C,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,YAElC,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,CACX,iEAAiE,EACjE,SAAS;YACT,iEAAiE;YACjE,sBAAsB,CACvB,GACD,GACY,CACjB,CAAC;AACJ,CAAC"}

package/src/components/_internal/Spinner.tsx

@@ -1,49 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Animated, Easing, Platform, View } from 'react-native';
-
-import { cn } from '../../lib/cn';
-
-/**
- * The web `Spinner`'s look on native: a three-quarter ring turning once a
- * second. Color it with a `border-*` class. Decorative: the control showing
- * it reports the busy state.
- */
-export function Spinner({ className }: { className?: string }) {
-  const [turn] = useState(() => new Animated.Value(0));
-
-  useEffect(() => {
-    const loop = Animated.loop(
-      Animated.timing(turn, {
-        duration: 1000,
-        easing: Easing.linear,
-        toValue: 1,
-        // react-native-web has no native driver and warns when asked for it.
-        useNativeDriver: Platform.OS !== 'web',
-      }),
-    );
-    loop.start();
-    return () => loop.stop();
-  }, [turn]);
-
-  const rotate = turn.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '360deg'],
-  });
-
-  return (
-    <Animated.View
-      accessibilityElementsHidden
-      importantForAccessibility="no-hide-descendants"
-      style={{ transform: [{ rotate }] }}
-    >
-      <View
-        className={cn(
-          'border-foreground size-3 rounded-full border-[1.5px] opacity-80',
-          className,
-          // After the color, which would otherwise override the open side.
-          'border-t-transparent',
-        )}
-      />
-    </Animated.View>
-  );
-}