panelui-native 0.2.0 → 0.5.1

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,8 +23,26 @@ export {
 } from './primitives/animated-pressable';
 
 // Components
-export { Alert, type AlertProps } from './components/alert';
-export { Avatar, type AvatarProps } from './components/avatar';
+export {
+  Accordion,
+  type AccordionProps,
+  type AccordionItemProps,
+  type AccordionTriggerProps,
+  type AccordionIndicatorProps,
+  type AccordionContentProps,
+  type AccordionVariant,
+  type AccordionSelectionMode,
+} from './components/accordion';
+export {
+  Alert,
+  type AlertProps,
+  type AlertIndicatorProps,
+} from './components/alert';
+export {
+  Avatar,
+  type AvatarProps,
+  type AvatarBadgeProps,
+} from './components/avatar';
 export { Badge, type BadgeProps } from './components/badge';
 export {
   BottomSheet,
@@ -43,7 +71,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 +92,79 @@ 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 {
+  Timeline,
+  type TimelineProps,
+  type TimelineItemProps,
+  type TimelineIndicatorProps,
+  type TimelineStatProps,
+  type TimelineVariant,
+  type TimelineTone,
+} from './components/timeline';
+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,
+  AppleIcon,
+  ArrowUpRightIcon,
+  BellIcon,
+  CardIcon,
+  CheckCircleIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  FacebookIcon,
+  GoogleIcon,
+  IconColorProvider,
+  InfoIcon,
+  MoonIcon,
+  PackageIcon,
+  PlusSquareIcon,
+  ReceiptIcon,
+  SearchIcon,
+  SendIcon,
+  ShareNodesIcon,
+  ShieldAlertIcon,
+  ShieldCheckIcon,
+  SunIcon,
+  XIcon,
+  useIconColor,
+  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),
+  };
+}

package/theme.css

@@ -43,13 +43,35 @@
   --color-surface: unset;
   --color-skeleton: unset;
 
-  /* Coss radius scale: --radius: 0.625rem (10px) */
-  --radius-xs: 4px;
-  --radius-sm: 6px;
-  --radius-md: 8px;
-  --radius-lg: 10px;
-  --radius-xl: 14px;
-  --radius-2xl: 16px;
+  /*
+   * Tinted status fills. These exist as real tokens rather than `bg-info/10
+   * dark:bg-info/[0.06]` because `dark:` only resolves in the light/dark
+   * themes — inside a named theme (moon, grass) Uniwind compiles it to a
+   * plain class selector that never matches, so the tint would vanish.
+   * `-soft` is the Alert fill, `-subtle` the lighter Badge fill.
+   */
+  --color-info-soft: unset;
+  --color-info-subtle: unset;
+  --color-success-soft: unset;
+  --color-success-subtle: unset;
+  --color-warning-soft: unset;
+  --color-warning-subtle: unset;
+  --color-destructive-soft: unset;
+  --color-destructive-subtle: unset;
+
+  /*
+   * Radius scale. Themed rather than static: a theme is a shape as well as a
+   * palette, so each family sets its own corner rounding. --radius-3xl is
+   * declared here because rounded-3xl / rounded-t-3xl are both in use and
+   * would otherwise silently fall through to Tailwind's default.
+   */
+  --radius-xs: unset;
+  --radius-sm: unset;
+  --radius-md: unset;
+  --radius-lg: unset;
+  --radius-xl: unset;
+  --radius-2xl: unset;
+  --radius-3xl: unset;
 }
 
 @layer theme {
@@ -101,6 +123,25 @@
       /* grouping surface (Frame) and skeleton fill */
       --color-surface: #f7f7f7;
       --color-skeleton: rgba(0, 0, 0, 0.1);
+
+      /* status fills: -soft = Alert (10%), -subtle = Badge (8%) */
+      --color-info-soft: rgba(59, 130, 246, 0.1);
+      --color-info-subtle: rgba(59, 130, 246, 0.08);
+      --color-success-soft: rgba(16, 185, 129, 0.1);
+      --color-success-subtle: rgba(16, 185, 129, 0.08);
+      --color-warning-soft: rgba(245, 158, 11, 0.1);
+      --color-warning-subtle: rgba(245, 158, 11, 0.08);
+      --color-destructive-soft: rgba(239, 68, 68, 0.1);
+      --color-destructive-subtle: rgba(239, 68, 68, 0.08);
+    
+      /* Panel shape scale */
+      --radius-xs: 4px;
+      --radius-sm: 6px;
+      --radius-md: 8px;
+      --radius-lg: 10px;
+      --radius-xl: 14px;
+      --radius-2xl: 16px;
+      --radius-3xl: 24px;
     }
 
     @variant dark {
@@ -153,6 +194,288 @@
       /* grouping surface (Frame) and skeleton fill */
       --color-surface: #1c1c1c;
       --color-skeleton: rgba(255, 255, 255, 0.13);
+
+      /* status fills: -soft = Alert (6%), -subtle = Badge (16%) */
+      --color-info-soft: rgba(59, 130, 246, 0.06);
+      --color-info-subtle: rgba(59, 130, 246, 0.16);
+      --color-success-soft: rgba(16, 185, 129, 0.06);
+      --color-success-subtle: rgba(16, 185, 129, 0.16);
+      --color-warning-soft: rgba(245, 158, 11, 0.06);
+      --color-warning-subtle: rgba(245, 158, 11, 0.16);
+      --color-destructive-soft: rgba(241, 87, 87, 0.06);
+      --color-destructive-subtle: rgba(241, 87, 87, 0.16);
+    
+      /* Panel shape scale */
+      --radius-xs: 4px;
+      --radius-sm: 6px;
+      --radius-md: 8px;
+      --radius-lg: 10px;
+      --radius-xl: 14px;
+      --radius-2xl: 16px;
+      --radius-3xl: 24px;
+    }
+
+    /*
+     * Named themes.
+     *
+     * Uniwind only gives `light` and `dark` prefers-color-scheme handling;
+     * every other theme compiles to a plain class selector. That means a
+     * named theme cannot adapt on its own, so each brand ships as a
+     * light/dark pair and the app switches between them explicitly (see
+     * `useThemeMode()`).
+     *
+     * Register them in your metro config or setTheme() will throw:
+     *   withUniwindConfig(config, {
+     *     extraThemes: ['moon', 'moon-dark', 'grass', 'grass-dark'],
+     *   })
+     *
+     * Every theme must define every token — Uniwind fails the build with
+     * "All themes must have the same variables" otherwise.
+     */
+
+    /* Moon — monochrome and high-contrast: pure black/white, electric blue accent,
+       hairline borders, tight corners. */
+    @variant moon {
+      --color-background: #ffffff;
+      --color-foreground: #171717;
+
+      --color-card: #ffffff;
+      --color-card-foreground: #171717;
+
+      --color-popover: #ffffff;
+      --color-popover-foreground: #171717;
+
+      --color-primary: #171717;
+      --color-primary-foreground: #ffffff;
+
+      --color-secondary: rgba(0, 0, 0, 0.05);
+      --color-secondary-foreground: #171717;
+
+      --color-muted: rgba(0, 0, 0, 0.05);
+      --color-muted-foreground: #666666;
+
+      --color-accent: rgba(0, 0, 0, 0.05);
+      --color-accent-foreground: #171717;
+
+      --color-destructive: #e5484d;
+      --color-destructive-foreground: #c62b30;
+
+      --color-info: #0070f3;
+      --color-info-foreground: #0060d1;
+
+      --color-success: #45a557;
+      --color-success-foreground: #297c3b;
+
+      --color-warning: #f5a623;
+      --color-warning-foreground: #a35200;
+
+      --color-border: rgba(0, 0, 0, 0.09);
+      --color-input: rgba(0, 0, 0, 0.12);
+      --color-ring: #171717;
+
+      --color-surface: #fafafa;
+      --color-skeleton: rgba(0, 0, 0, 0.08);
+
+      --color-info-soft: rgba(0, 112, 243, 0.08);
+      --color-info-subtle: rgba(0, 112, 243, 0.06);
+      --color-success-soft: rgba(69, 165, 87, 0.1);
+      --color-success-subtle: rgba(69, 165, 87, 0.08);
+      --color-warning-soft: rgba(245, 166, 35, 0.1);
+      --color-warning-subtle: rgba(245, 166, 35, 0.08);
+      --color-destructive-soft: rgba(229, 72, 77, 0.1);
+      --color-destructive-subtle: rgba(229, 72, 77, 0.08);
+    
+      /* Moon shape scale */
+      --radius-xs: 2px;
+      --radius-sm: 4px;
+      --radius-md: 5px;
+      --radius-lg: 6px;
+      --radius-xl: 8px;
+      --radius-2xl: 10px;
+      --radius-3xl: 14px;
+    }
+
+    @variant moon-dark {
+      --color-background: #000000;
+      --color-foreground: #ededed;
+
+      --color-card: #0a0a0a;
+      --color-card-foreground: #ededed;
+
+      --color-popover: #101010;
+      --color-popover-foreground: #ededed;
+
+      --color-primary: #ededed;
+      --color-primary-foreground: #0a0a0a;
+
+      --color-secondary: rgba(255, 255, 255, 0.09);
+      --color-secondary-foreground: #ededed;
+
+      --color-muted: rgba(255, 255, 255, 0.09);
+      --color-muted-foreground: #a1a1a1;
+
+      --color-accent: rgba(255, 255, 255, 0.09);
+      --color-accent-foreground: #ededed;
+
+      --color-destructive: #e5484d;
+      --color-destructive-foreground: #ff6369;
+
+      --color-info: #0070f3;
+      --color-info-foreground: #52a8ff;
+
+      --color-success: #45a557;
+      --color-success-foreground: #62c073;
+
+      --color-warning: #f5a623;
+      --color-warning-foreground: #f1a10d;
+
+      --color-border: rgba(255, 255, 255, 0.09);
+      --color-input: rgba(255, 255, 255, 0.14);
+      --color-ring: #ededed;
+
+      --color-surface: #0f0f0f;
+      --color-skeleton: rgba(255, 255, 255, 0.11);
+
+      --color-info-soft: rgba(0, 112, 243, 0.12);
+      --color-info-subtle: rgba(0, 112, 243, 0.18);
+      --color-success-soft: rgba(69, 165, 87, 0.1);
+      --color-success-subtle: rgba(69, 165, 87, 0.16);
+      --color-warning-soft: rgba(245, 166, 35, 0.1);
+      --color-warning-subtle: rgba(245, 166, 35, 0.16);
+      --color-destructive-soft: rgba(229, 72, 77, 0.1);
+      --color-destructive-subtle: rgba(229, 72, 77, 0.16);
+    
+      /* Moon shape scale */
+      --radius-xs: 2px;
+      --radius-sm: 4px;
+      --radius-md: 5px;
+      --radius-lg: 6px;
+      --radius-xl: 8px;
+      --radius-2xl: 10px;
+      --radius-3xl: 14px;
+    }
+
+    /* Grass — green accent on warm-neutral greys, with soft generous corners. */
+    @variant grass {
+      --color-background: #ffffff;
+      --color-foreground: #171717;
+
+      --color-card: #ffffff;
+      --color-card-foreground: #171717;
+
+      --color-popover: #ffffff;
+      --color-popover-foreground: #171717;
+
+      /* Brand green is too light for white text; light mode uses the
+         darker ramp step so the contrast ratio holds. */
+      --color-primary: #24b47e;
+      --color-primary-foreground: #ffffff;
+
+      --color-secondary: rgba(0, 0, 0, 0.05);
+      --color-secondary-foreground: #171717;
+
+      --color-muted: rgba(0, 0, 0, 0.05);
+      --color-muted-foreground: #707070;
+
+      --color-accent: rgba(62, 207, 142, 0.1);
+      --color-accent-foreground: #16794c;
+
+      --color-destructive: #ef4444;
+      --color-destructive-foreground: #b91c1c;
+
+      --color-info: #3b82f6;
+      --color-info-foreground: #1d4ed8;
+
+      --color-success: #24b47e;
+      --color-success-foreground: #16794c;
+
+      --color-warning: #f59e0b;
+      --color-warning-foreground: #b45309;
+
+      --color-border: rgba(0, 0, 0, 0.08);
+      --color-input: rgba(0, 0, 0, 0.1);
+      --color-ring: #3ecf8e;
+
+      --color-surface: #f8f9fa;
+      --color-skeleton: rgba(0, 0, 0, 0.08);
+
+      --color-info-soft: rgba(59, 130, 246, 0.1);
+      --color-info-subtle: rgba(59, 130, 246, 0.08);
+      --color-success-soft: rgba(36, 180, 126, 0.1);
+      --color-success-subtle: rgba(36, 180, 126, 0.08);
+      --color-warning-soft: rgba(245, 158, 11, 0.1);
+      --color-warning-subtle: rgba(245, 158, 11, 0.08);
+      --color-destructive-soft: rgba(239, 68, 68, 0.1);
+      --color-destructive-subtle: rgba(239, 68, 68, 0.08);
+    
+      /* Grass shape scale */
+      --radius-xs: 6px;
+      --radius-sm: 8px;
+      --radius-md: 12px;
+      --radius-lg: 14px;
+      --radius-xl: 18px;
+      --radius-2xl: 22px;
+      --radius-3xl: 28px;
+    }
+
+    @variant grass-dark {
+      --color-background: #1c1c1c;
+      --color-foreground: #ededed;
+
+      --color-card: #1f1f1f;
+      --color-card-foreground: #ededed;
+
+      --color-popover: #232323;
+      --color-popover-foreground: #ededed;
+
+      --color-primary: #3ecf8e;
+      --color-primary-foreground: #052e1b;
+
+      --color-secondary: rgba(255, 255, 255, 0.07);
+      --color-secondary-foreground: #ededed;
+
+      --color-muted: rgba(255, 255, 255, 0.07);
+      --color-muted-foreground: #8f8f8f;
+
+      --color-accent: rgba(62, 207, 142, 0.12);
+      --color-accent-foreground: #3ecf8e;
+
+      --color-destructive: #f15757;
+      --color-destructive-foreground: #f87171;
+
+      --color-info: #3b82f6;
+      --color-info-foreground: #60a5fa;
+
+      --color-success: #3ecf8e;
+      --color-success-foreground: #4ade80;
+
+      --color-warning: #f59e0b;
+      --color-warning-foreground: #fbbf24;
+
+      --color-border: rgba(255, 255, 255, 0.07);
+      --color-input: rgba(255, 255, 255, 0.1);
+      --color-ring: #3ecf8e;
+
+      --color-surface: #242424;
+      --color-skeleton: rgba(255, 255, 255, 0.11);
+
+      --color-info-soft: rgba(59, 130, 246, 0.08);
+      --color-info-subtle: rgba(59, 130, 246, 0.16);
+      --color-success-soft: rgba(62, 207, 142, 0.08);
+      --color-success-subtle: rgba(62, 207, 142, 0.16);
+      --color-warning-soft: rgba(245, 158, 11, 0.08);
+      --color-warning-subtle: rgba(245, 158, 11, 0.16);
+      --color-destructive-soft: rgba(241, 87, 87, 0.08);
+      --color-destructive-subtle: rgba(241, 87, 87, 0.16);
+    
+      /* Grass shape scale */
+      --radius-xs: 6px;
+      --radius-sm: 8px;
+      --radius-md: 12px;
+      --radius-lg: 14px;
+      --radius-xl: 18px;
+      --radius-2xl: 22px;
+      --radius-3xl: 28px;
     }
   }
 }