panelui-native 0.2.0 → 0.4.0

package/src/icons/index.tsx

@@ -1,10 +1,33 @@
-import Svg, { Path, type SvgProps } from 'react-native-svg';
+/**
+ * Icon set.
+ *
+ * Two families live here:
+ * - Stroked 24×24 icons (Lucide geometry, as used by shadcn-ui/ui) for chrome
+ *   such as chevrons and the close button.
+ * - Filled 16×16 status icons for Alert and Toast indicators.
+ *   Adapted from: heroui-inc/heroui-native src/components/alert/{default,success,warning}-icon.tsx
+ *
+ * `color` has no default on the status icons on purpose — callers resolve it
+ * from the active theme with `useCSSVariable`, so icons follow the theme
+ * instead of a hardcoded hex.
+ */
+import Svg, { Circle, Path, type SvgProps } from 'react-native-svg';
 
 export interface IconProps extends SvgProps {
   size?: number;
   color?: string;
 }
 
+/** Props for icons that must never be announced by a screen reader. */
+const decorative = {
+  accessibilityElementsHidden: true,
+  importantForAccessibility: 'no-hide-descendants',
+} as const;
+
+/* -------------------------------------------------------------------------- */
+/* Stroked chrome icons                                                       */
+/* -------------------------------------------------------------------------- */
+
 export function CheckIcon({ size = 14, color = '#fff', ...props }: IconProps) {
   return (
     <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
@@ -33,6 +56,34 @@ export function ChevronDownIcon({ size = 16, color = '#737373', ...props }: Icon
   );
 }
 
+export function ChevronLeftIcon({ size = 16, color = '#737373', ...props }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="m15 18-6-6 6-6"
+        stroke={color}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export function ChevronRightIcon({ size = 16, color = '#737373', ...props }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="m9 18 6-6-6-6"
+        stroke={color}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
 export function XIcon({ size = 16, color = '#737373', ...props }: IconProps) {
   return (
     <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
@@ -46,3 +97,103 @@ export function XIcon({ size = 16, color = '#737373', ...props }: IconProps) {
     </Svg>
   );
 }
+
+export function SearchIcon({ size = 16, color = '#737373', ...props }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Circle cx={11} cy={11} r={8} stroke={color} strokeWidth={2} />
+      <Path
+        d="m21 21-4.3-4.3"
+        stroke={color}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export function ArrowUpRightIcon({ size = 20, color = '#fff', ...props }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M7 17 17 7M8 7h9v9"
+        stroke={color}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export function SunIcon({ size = 18, color = '#f5f5f5', ...props }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Circle cx={12} cy={12} r={4} stroke={color} strokeWidth={2} />
+      <Path
+        d="M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32 1.41 1.41M2 12h2m16 0h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"
+        stroke={color}
+        strokeWidth={2}
+        strokeLinecap="round"
+      />
+    </Svg>
+  );
+}
+
+export function MoonIcon({ size = 18, color = '#262626', ...props }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79"
+        stroke={color}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+/* Filled status icons (Alert / Toast indicators)                             */
+/* -------------------------------------------------------------------------- */
+
+/** Info circle. Used for `default`, `info` and `destructive` status. */
+export function InfoIcon({ size = 20, color, ...props }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill={color} {...decorative} {...props}>
+      <Path
+        d="M8 13.5a5.5 5.5 0 1 0 0-11a5.5 5.5 0 0 0 0 11M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m1-9.5a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-.25 3a.75.75 0 0 0-1.5 0V11a.75.75 0 0 0 1.5 0z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      />
+    </Svg>
+  );
+}
+
+/** Check circle. Used for `success` status. */
+export function CheckCircleIcon({ size = 20, color, ...props }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill={color} {...decorative} {...props}>
+      <Path
+        d="M13.5 8a5.5 5.5 0 1 1-11 0a5.5 5.5 0 0 1 11 0M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0m-3.9-1.55a.75.75 0 1 0-1.2-.9L7.419 8.858L6.03 7.47a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.13-.08z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      />
+    </Svg>
+  );
+}
+
+/** Warning triangle. Used for `warning` status. */
+export function AlertTriangleIcon({ size = 20, color, ...props }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill={color} {...decorative} {...props}>
+      <Path
+        d="M7.134 2.994L2.217 11.5a1 1 0 0 0 .866 1.5h9.834a1 1 0 0 0 .866-1.5L8.866 2.993a1 1 0 0 0-1.732 0m3.03-.75c-.962-1.665-3.366-1.665-4.329 0L.918 10.749c-.963 1.666.24 3.751 2.165 3.751h9.834c1.925 0 3.128-2.085 2.164-3.751zM8 5a.75.75 0 0 1 .75.75v2a.75.75 0 0 1-1.5 0v-2A.75.75 0 0 1 8 5m1 5.75a1 1 0 1 1-2 0a1 1 0 0 1 2 0"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      />
+    </Svg>
+  );
+}

package/src/index.ts

@@ -2,7 +2,17 @@
 export { PanelUIProvider, type PanelUIProviderProps } from './providers/panel-ui-provider';
 
 // Theme
-export { useTheme, type ThemeName } from './theme/use-theme';
+export {
+  useTheme,
+  useThemeMode,
+  PANEL_THEMES,
+  PANEL_THEME_NAMES,
+  PANEL_EXTRA_THEMES,
+  type ThemeName,
+  type ThemeMode,
+  type PanelTheme,
+  type PanelThemeFamily,
+} from './theme/use-theme';
 
 // Primitives
 export { Portal, PortalHost, PortalProvider } from './primitives/portal';
@@ -13,7 +23,11 @@ export {
 } from './primitives/animated-pressable';
 
 // Components
-export { Alert, type AlertProps } from './components/alert';
+export {
+  Alert,
+  type AlertProps,
+  type AlertIndicatorProps,
+} from './components/alert';
 export { Avatar, type AvatarProps } from './components/avatar';
 export { Badge, type BadgeProps } from './components/badge';
 export {
@@ -43,7 +57,20 @@ export {
 } from './components/tabs';
 export { Card, type CardProps } from './components/card';
 export { Checkbox, type CheckboxProps } from './components/checkbox';
+export {
+  EmptyState,
+  type EmptyStateProps,
+  type EmptyStateMediaProps,
+} from './components/empty-state';
 export { Input, type InputProps } from './components/input';
+export {
+  InputGroup,
+  type InputGroupProps,
+  type InputGroupInputProps,
+  type InputGroupDecoratorProps,
+} from './components/input-group';
+export { Label, type LabelProps, type LabelTextProps } from './components/label';
+export { Progress, type ProgressProps } from './components/progress';
 export {
   RadioGroup,
   type RadioGroupProps,
@@ -51,10 +78,56 @@ export {
 } from './components/radio-group';
 export { Skeleton, type SkeletonProps } from './components/skeleton';
 export { Spinner, type SpinnerProps } from './components/spinner';
+export {
+  Steps,
+  type StepsProps,
+  type StepsItemProps,
+  type StepsTriggerProps,
+  type StepsIndicatorProps,
+  type StepsSeparatorProps,
+  type StepState,
+  type StepsOrientation,
+} from './components/steps';
 export { Switch, type SwitchProps } from './components/switch';
+export {
+  Toast,
+  ToastViewport,
+  toast,
+  useToast,
+  type ToastProps,
+  type ToastOptions,
+  type ToastItem,
+  type ToastVariant,
+  type ToastPlacement,
+  type ToastHandle,
+  type ToastIndicatorProps,
+  type ToastCloseProps,
+} from './components/toast';
+export {
+  Typography,
+  type TypographyProps,
+  type TypographyType,
+  type TypographyHeadingProps,
+  type TypographyParagraphProps,
+  type TypographyCodeProps,
+} from './components/typography';
 
 // Icons
-export { CheckIcon, ChevronDownIcon, XIcon, type IconProps } from './icons';
+export {
+  AlertTriangleIcon,
+  ArrowUpRightIcon,
+  CheckCircleIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  InfoIcon,
+  MoonIcon,
+  SearchIcon,
+  SunIcon,
+  XIcon,
+  type IconProps,
+} from './icons';
 
 // Utils
 export { cn } from './utils/cn';

package/src/providers/panel-ui-provider.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { PortalHost, PortalProvider } from '../primitives/portal';
+import { ToastViewport } from '../components/toast';
 import { cn } from '../utils/cn';
 
 export interface PanelUIProviderProps {
@@ -40,6 +41,8 @@ export function PanelUIProvider({
       <View className={cn('flex-1', background && 'bg-background', className)}>
         <PortalProvider>
           {children}
+          {/* Sits before PortalHost so it can portal into it. */}
+          <ToastViewport />
           <PortalHost />
         </PortalProvider>
       </View>

package/src/theme/use-theme.ts

@@ -1,6 +1,87 @@
 import { Uniwind, useUniwind } from 'uniwind';
 
-export type ThemeName = 'light' | 'dark' | 'system';
+/** Themes shipped in `panelui-native/theme.css`. */
+export type PanelTheme =
+  | 'light'
+  | 'dark'
+  | 'moon'
+  | 'moon-dark'
+  | 'grass'
+  | 'grass-dark';
+
+export type ThemeName = PanelTheme | 'system';
+
+/** Light/dark mode within a theme family. */
+export type ThemeMode = 'light' | 'dark';
+
+/** A theme family — one look, in its light and dark form. */
+export interface PanelThemeFamily {
+  /** Stable id, e.g. `'moon'`. */
+  id: string;
+  /** Short display name, for a theme picker. */
+  name: string;
+  light: PanelTheme;
+  dark: PanelTheme;
+  /** Representative colour for a swatch, as `[light, dark]`. */
+  swatch: [string, string];
+}
+
+/**
+ * The theme families PanelUI ships. Each sets its own palette *and* its own
+ * radius scale, so switching family changes the shape of the UI as well as
+ * its colour — Panel is the Coss default, Moon is sharp and monochrome,
+ * Grass is soft and green.
+ *
+ * Everything beyond `panel` must be registered in your metro config, or
+ * `setTheme` throws "it was not registered":
+ *
+ * ```js
+ * withUniwindConfig(config, {
+ *   cssEntryFile: './global.css',
+ *   extraThemes: ['moon', 'moon-dark', 'grass', 'grass-dark'],
+ * });
+ * ```
+ */
+export const PANEL_THEMES: readonly PanelThemeFamily[] = [
+  {
+    id: 'panel',
+    name: 'Panel',
+    light: 'light',
+    dark: 'dark',
+    swatch: ['#262626', '#f5f5f5'],
+  },
+  {
+    id: 'moon',
+    name: 'Moon',
+    light: 'moon',
+    dark: 'moon-dark',
+    swatch: ['#0070f3', '#0070f3'],
+  },
+  {
+    id: 'grass',
+    name: 'Grass',
+    light: 'grass',
+    dark: 'grass-dark',
+    swatch: ['#24b47e', '#3ecf8e'],
+  },
+];
+
+/** Every concrete theme name, in registration order. */
+export const PANEL_THEME_NAMES: readonly PanelTheme[] = PANEL_THEMES.flatMap(
+  (family) => [family.light, family.dark]
+);
+
+/** The names to pass as `extraThemes` in your metro config. */
+export const PANEL_EXTRA_THEMES: readonly string[] = PANEL_THEME_NAMES.filter(
+  (name) => name !== 'light' && name !== 'dark'
+);
+
+function findFamily(theme: string): PanelThemeFamily {
+  return (
+    PANEL_THEMES.find((family) => family.light === theme || family.dark === theme) ??
+    PANEL_THEMES[0]!
+  );
+}
 
 /**
  * Reactive access to the current Uniwind theme plus a setter.
@@ -10,9 +91,43 @@ export function useTheme() {
   const { theme } = useUniwind();
 
   return {
-    /** Currently resolved theme ('light' or 'dark'). */
-    theme,
-    /** Switch theme: 'light', 'dark', or 'system' (follows device). */
+    /** The active theme name, e.g. `'dark'` or `'moon-dark'`. */
+    theme: theme as PanelTheme,
+    /** Switch theme by name, or `'system'` to follow the device. */
     setTheme: (name: ThemeName) => Uniwind.setTheme(name),
   };
 }
+
+/**
+ * Theme family and light/dark mode as two separate axes — what a picker like
+ * "choose a brand, then toggle the sun" actually needs.
+ *
+ * Named themes are not adaptive in Uniwind, so each brand ships as a
+ * light/dark pair. Toggling the mode keeps the current family, so a user in
+ * Moon dark lands in Moon light rather than the default theme.
+ *
+ * ```tsx
+ * const { family, mode, setFamily, toggleMode } = useThemeMode();
+ * ```
+ */
+export function useThemeMode() {
+  const { theme } = useUniwind();
+  const family = findFamily(theme);
+  const mode: ThemeMode = theme === family.dark ? 'dark' : 'light';
+
+  return {
+    /** The active theme family. */
+    family,
+    /** `'light'` or `'dark'` within that family. */
+    mode,
+    /** Switch brand, staying in the current light/dark mode. */
+    setFamily: (id: string) => {
+      const next = PANEL_THEMES.find((candidate) => candidate.id === id);
+      if (next) Uniwind.setTheme(next[mode]);
+    },
+    /** Set the mode, staying in the current family. */
+    setMode: (next: ThemeMode) => Uniwind.setTheme(family[next]),
+    /** Flip light ↔ dark within the current family. */
+    toggleMode: () => Uniwind.setTheme(mode === 'dark' ? family.light : family.dark),
+  };
+}