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

package/src/components/_internal/Spinner.tsx

@@ -0,0 +1,49 @@
+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>
+  );
+}

package/src/components/_internal/Story.tsx

@@ -1,5 +1,7 @@
+import { type Icon as TablerIconComponent } from '@tabler/icons-react-native';
 import { type ComponentType, type ReactNode } from 'react';
 import { ScrollView, View } from 'react-native';
+import { useResolveClassNames } from 'uniwind';
 
 import { cn } from '../../lib/cn';
 import { Text } from '../Text';
@@ -29,6 +31,37 @@ type ComponentMatrixRow = {
   label: string;
 };
 
+/**
+ * A Tabler icon, the library the web stories use, dimmed and pulled in like
+ * the web `Button` styles its `svg`s. React Native has no `currentColor`, so
+ * `className` sets its color with the label's class (`text-primary-foreground`,
+ * …) and `size` follows the button's (14 for `xs`, 18 for `xl`).
+ */
+function Icon({
+  className,
+  icon: TablerIcon,
+  size = 16,
+}: {
+  className?: string;
+  icon: TablerIconComponent;
+  size?: number;
+}) {
+  const style = useResolveClassNames(
+    cn('text-foreground -mx-0.5 opacity-80', className),
+  );
+
+  return (
+    <TablerIcon
+      accessibilityElementsHidden
+      color={style.color}
+      importantForAccessibility="no-hide-descendants"
+      size={size}
+      strokeWidth={2}
+      style={style}
+    />
+  );
+}
+
 // Same layout as `Story` in @pickle-ui/react, built on React Native
 // primitives: a 12rem column of row labels, then one column per matrix
 // column that grows from 12rem, like the web's `minmax(12rem, 1fr)`, since
@@ -135,6 +168,7 @@ function Section({ children, title }: { children: ReactNode; title: string }) {
 }
 
 const Story = Object.assign(Layout, {
+  Icon,
   Layout,
   Matrix,
   Section,

package/src/entries/card.ts

@@ -1,7 +1,9 @@
 export { Card } from '../components/Card';
 export type {
+  CardActionProps,
   CardContentProps,
   CardDescriptionProps,
+  CardFooterProps,
   CardHeaderProps,
   CardProps,
   CardTitleProps,

package/src/entries/theme.ts

@@ -0,0 +1,7 @@
+export { createTheme } from '@pickle-ui/tokens/theme';
+export type {
+  Theme,
+  ThemeFonts,
+  ThemeOptions,
+  ThemeVariables,
+} from '@pickle-ui/tokens/theme';

package/src/index.ts

@@ -5,4 +5,5 @@ export * from './entries/button';
 export * from './entries/card';
 export * from './entries/cn';
 export * from './entries/text';
+export * from './entries/theme';
 export * from './entries/use-color-token';

package/src/lib/cn.test.ts

@@ -6,4 +6,10 @@ describe('cn', () => {
       'text-sm px-4',
     );
   });
+
+  it('keeps a type scale size next to a text color', () => {
+    expect(cn('text-h1 text-foreground', 'text-muted-foreground')).toBe(
+      'text-h1 text-muted-foreground',
+    );
+  });
 });

package/src/lib/cn.ts

@@ -1,4 +1,17 @@
-import { twMerge } from 'tailwind-merge';
+import { extendTailwindMerge } from 'tailwind-merge';
+
+/**
+ * Teaches tailwind-merge Pickle's type scale: `text-body`, `text-h1`, … are
+ * font sizes, so they must not be mistaken for text colors and dropped next
+ * to one.
+ */
+const twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ['body', 'code', 'h1', 'h2', 'h3', 'h4', 'lead', 'small'],
+    },
+  },
+});
 
 /** Joins class names; later classes win, like `@pickle-ui/react/cn`. */
 export function cn(...classes: Array<false | null | string | undefined>) {