@pickle-ui/react-native 0.0.0-stage → 0.0.0

package/src/entries/badge.ts

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

package/src/entries/button.ts

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

package/src/entries/card.ts

@@ -0,0 +1,8 @@
+export { Card } from '../components/Card';
+export type {
+  CardContentProps,
+  CardDescriptionProps,
+  CardHeaderProps,
+  CardProps,
+  CardTitleProps,
+} from '../components/Card';

package/src/entries/cn.ts

@@ -0,0 +1 @@
+export { cn } from '../lib/cn';

package/src/entries/text.ts

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

package/src/entries/use-color-token.ts

@@ -0,0 +1 @@
+export { useColorToken } from '../hooks/useColorToken';

package/src/hooks/useColorToken.ts

@@ -0,0 +1,13 @@
+import { useCSSVariable } from 'uniwind';
+
+/**
+ * Reads a token as a color string, for props that take a color instead of a
+ * className (navigation options, `Switch`, `placeholderTextColor`).
+ * `useColorToken('primary')` returns the value behind `bg-primary`, or
+ * `undefined` when the token doesn't exist, so a typo never turns into the
+ * color `"undefined"`.
+ */
+export function useColorToken(name: string): string | undefined {
+  const value = useCSSVariable(`--${name}`);
+  return typeof value === 'string' ? value : undefined;
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+// The public API is the union of the subpath entries in ./entries: add a
+// component there and re-export it here (see "Public API" in AGENTS.md).
+export * from './entries/badge';
+export * from './entries/button';
+export * from './entries/card';
+export * from './entries/cn';
+export * from './entries/text';
+export * from './entries/use-color-token';

package/src/lib/cn.test.ts

@@ -0,0 +1,9 @@
+import { cn } from './cn';
+
+describe('cn', () => {
+  it('drops falsy values and lets later classes win', () => {
+    expect(cn('px-2 text-sm', false, null, undefined, 'px-4')).toBe(
+      'text-sm px-4',
+    );
+  });
+});

package/src/lib/cn.ts

@@ -0,0 +1,6 @@
+import { twMerge } from 'tailwind-merge';
+
+/** Joins class names; later classes win, like `@pickle-ui/react/cn`. */
+export function cn(...classes: Array<false | null | string | undefined>) {
+  return twMerge(classes.filter(Boolean).join(' '));
+}

package/src/styles.css

@@ -0,0 +1,12 @@
+/**
+ * Pickle for React Native: Tailwind, Uniwind, the tokens as Uniwind themes
+ * and the components' classes. Apps import this file alone.
+ *
+ * Tailwind and Uniwind come from here, not from the app: Uniwind compiles
+ * each imported stylesheet on its own to find themes, and the tokens'
+ * `@variant light` / `@variant dark` blocks only compile after both.
+ */
+@import 'tailwindcss';
+@import 'uniwind';
+@import '@pickle-ui/tokens/native.css';
+@import './base.css';

package/src/uniwind-types.d.ts

@@ -0,0 +1,10 @@
+// NOTE: This file is generated by uniwind and it should not be edited manually.
+/// <reference types="uniwind/types" />
+
+declare module 'uniwind' {
+    export interface UniwindConfig {
+        themes: readonly ['light', 'dark']
+    }
+}
+
+export {}