@ankhorage/zora 2.5.3 → 2.5.5

package/src/components/gradient/Gradient.tsx

@@ -0,0 +1,53 @@
+import { LinearGradient } from 'expo-linear-gradient';
+import React from 'react';
+
+import { Box } from '../../foundation';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import type { GradientProps } from './types';
+
+function GradientInner({
+  themeId: _themeId,
+  mode: _mode,
+  children,
+  colors,
+  locations,
+  start,
+  end,
+  width = '100%',
+  height,
+  minHeight,
+  radius,
+  p,
+  testID,
+}: GradientProps) {
+  return (
+    <Box
+      height={height}
+      minHeight={minHeight}
+      radius={radius}
+      testID={testID}
+      width={width}
+      style={{ overflow: 'hidden' }}
+    >
+      <LinearGradient
+        colors={colors}
+        end={end}
+        locations={locations}
+        start={start}
+        style={{ flex: 1 }}
+      >
+        <Box p={p} style={{ flex: 1 }}>
+          {children}
+        </Box>
+      </LinearGradient>
+    </Box>
+  );
+}
+
+/***
+ * Gradient background container for branded loading surfaces, hero blocks, and previews.
+ *
+ * `Gradient` is backed by `expo-linear-gradient`. It is a React-rendered ZORA
+ * component and does not replace native Expo splash-screen configuration.
+ */
+export const Gradient = withZoraThemeScope(GradientInner);

package/src/components/gradient/index.ts

@@ -0,0 +1,8 @@
+export { Gradient } from './Gradient';
+export type {
+  GradientColor,
+  GradientColors,
+  GradientLocations,
+  GradientPoint,
+  GradientProps,
+} from './types';

package/src/components/gradient/meta.ts

@@ -0,0 +1,10 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const gradientMeta = {
+  name: 'Gradient',
+  category: 'component',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: 'Gradient background container; not represented as a manifest node in v1.',
+  props: {},
+} as const satisfies ZoraComponentMeta;

package/src/components/gradient/types.ts

@@ -0,0 +1,26 @@
+import type React from 'react';
+
+import type { BoxProps } from '../../foundation';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export type GradientColor = string;
+export type GradientColors = readonly [GradientColor, GradientColor, ...GradientColor[]];
+export type GradientLocations = readonly [number, number, ...number[]];
+
+export interface GradientPoint {
+  readonly x: number;
+  readonly y: number;
+}
+
+export interface GradientProps extends ZoraBaseProps {
+  children?: React.ReactNode;
+  colors: GradientColors;
+  locations?: GradientLocations;
+  start?: GradientPoint;
+  end?: GradientPoint;
+  width?: BoxProps['width'];
+  height?: BoxProps['height'];
+  minHeight?: BoxProps['minHeight'];
+  radius?: BoxProps['radius'];
+  p?: BoxProps['p'];
+}

package/src/components/heading/Heading.tsx

@@ -97,7 +97,6 @@ function HeadingInner({
  * `Heading` gives consumers a ZORA-owned title API with semantic levels,
  * responsive sizes, and theme-aware emphasis while preserving header semantics.
  *
- * @readme
  * @example Section title
  * ```tsx
  * <Heading level={2} size="xl">Account settings</Heading>

package/src/components/icon/Icon.tsx

@@ -12,7 +12,5 @@ function IconInner({ themeId: _themeId, mode: _mode, ...props }: IconProps) {
 
 /***
  * Renders an icon from a configured icon provider with theme-aware defaults.
- *
- * @readme
  */
 export const Icon = withZoraThemeScope(IconInner);

package/src/components/icon-button/IconButton.tsx

@@ -31,7 +31,5 @@ function IconButtonInner({
 
 /***
  * Icon-only button for compact actions; requires an accessible `label`.
- *
- * @readme
  */
 export const IconButton = withZoraThemeScope(IconButtonInner);

package/src/components/image/Image.tsx

@@ -11,6 +11,6 @@ function ImageInner({ themeId: _themeId, mode: _mode, ...props }: ImageProps) {
 /***
  * Displays an image with cross-platform source and fit handling.
  *
- * @readme
+ 
  */
 export const Image = withZoraThemeScope(ImageInner);

package/src/components/input/Input.tsx

@@ -68,7 +68,6 @@ function InputInner({
  * Use `Input` for single-line form controls that need ZORA styling, disabled/read-only
  * handling, and accessible trailing actions without dropping into Surface directly.
  *
- * @readme
  * @example Search input
  * ```tsx
  * <Input placeholder="Search" leadingIcon={{ name: 'search-outline' }} />

package/src/components/media-card/MediaCard.tsx

@@ -119,7 +119,5 @@ function MediaCardInner({
 
 /***
  * Card layout with an optional media/header region and structured content slots.
- *
- * @readme
  */
 export const MediaCard = withZoraThemeScope(MediaCardInner);

package/src/components/menu/DropdownMenu.tsx

@@ -5,8 +5,6 @@ import type { DropdownMenuProps } from './types';
 
 /***
  * Convenience wrapper for rendering a `Menu` as a dropdown.
- *
- * @readme
  */
 export function DropdownMenu(props: DropdownMenuProps) {
   return <Menu {...props} />;

package/src/components/menu/Menu.tsx

@@ -62,7 +62,5 @@ function MenuInner({ themeId: _themeId, mode: _mode, actions, onDismiss, ...prop
 
 /***
  * Presents a list of actions as a menu with optional icons and intent styling.
- *
- * @readme
  */
 export const Menu = withZoraThemeScope(MenuInner);

package/src/components/metric-card/MetricCard.tsx

@@ -83,7 +83,5 @@ function MetricCardInner({
 
 /***
  * Highlights a key metric with label, value, and optional trend/actions.
- *
- * @readme
  */
 export const MetricCard = withZoraThemeScope(MetricCardInner);

package/src/components/modal/Modal.tsx

@@ -58,7 +58,5 @@ function ModalInner({
 
 /***
  * Modal dialog surface with header/content/footer slots.
- *
- * @readme
  */
 export const Modal = withZoraThemeScope(ModalInner);

package/src/components/navigation-item/NavigationItem.tsx

@@ -35,7 +35,5 @@ function NavigationItemInner({
 
 /***
  * Renders a single navigation entry with active/disabled state support.
- *
- * @readme
  */
 export const NavigationItem = withZoraThemeScope(NavigationItemInner);

package/src/components/navigation-list/NavigationList.tsx

@@ -61,7 +61,5 @@ function NavigationListInner({
 
 /***
  * Renders a navigation list from route metadata with active state mapping.
- *
- * @readme
  */
 export const NavigationList = withZoraThemeScope(NavigationListInner);

package/src/components/pagination/Pagination.tsx

@@ -188,7 +188,5 @@ function PaginationInner({
 
 /***
  * Pagination control for navigating between pages of results.
- *
- * @readme
  */
 export const Pagination = withZoraThemeScope(PaginationInner);

package/src/components/progress/Progress.tsx

@@ -49,7 +49,5 @@ function ProgressInner({
 
 /***
  * Progress indicator for determinate and indeterminate loading states.
- *
- * @readme
  */
 export const Progress = withZoraThemeScope(ProgressInner);

package/src/components/radio/Radio.tsx

@@ -10,7 +10,5 @@ function RadioInner({ themeId: _themeId, mode: _mode, ...props }: RadioProps) {
 
 /***
  * Single-choice selection control used within a radio group.
- *
- * @readme
  */
 export const Radio = withZoraThemeScope(RadioInner);

package/src/components/radio/RadioGroup.tsx

@@ -58,8 +58,6 @@ function RadioGroupInner<TValue extends string>({
 
 /***
  * Renders a group of radio options for selecting a single value.
- *
- * @readme
  */
 export const RadioGroup = withZoraThemeScope(RadioGroupInner);
 

package/src/components/rating/Rating.tsx

@@ -37,7 +37,5 @@ function RatingInner({
 
 /***
  * Displays a star-based rating value with optional half steps.
- *
- * @readme
  */
 export const Rating = withZoraThemeScope(RatingInner);

package/src/components/search-bar/SearchBar.tsx

@@ -49,7 +49,5 @@ function SearchBarInner({
 
 /***
  * Search input with leading icon and optional trailing action.
- *
- * @readme
  */
 export const SearchBar = withZoraThemeScope(SearchBarInner);

package/src/components/select/Select.tsx

@@ -54,7 +54,5 @@ function SelectInner<TValue extends string = string>({
 
 /***
  * Select control for choosing a value from a list of options.
- *
- * @readme
  */
 export const Select = withZoraThemeScope(SelectInner);

package/src/components/skeleton/Skeleton.tsx

@@ -31,7 +31,5 @@ function SkeletonInner({
 
 /***
  * Generic skeleton placeholder for loading states.
- *
- * @readme
  */
 export const Skeleton = withZoraThemeScope(SkeletonInner);

package/src/components/skeleton/SkeletonCard.tsx

@@ -38,7 +38,5 @@ function SkeletonCardInner({
 
 /***
  * Skeleton placeholder that matches the structure of a `Card`.
- *
- * @readme
  */
 export const SkeletonCard = withZoraThemeScope(SkeletonCardInner);

package/src/components/skeleton/SkeletonList.tsx

@@ -52,6 +52,6 @@ function SkeletonListInner({
 /***
  * Skeleton placeholder list for loading states in list views.
  *
- * @readme
+ 
  */
 export const SkeletonList = withZoraThemeScope(SkeletonListInner);

package/src/components/skeleton/SkeletonText.tsx

@@ -45,6 +45,6 @@ function SkeletonTextInner({
 /***
  * Multi-line skeleton placeholder for text content.
  *
- * @readme
+ 
  */
 export const SkeletonText = withZoraThemeScope(SkeletonTextInner);

package/src/components/splash-screen/SplashScreen.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+
+import { Box, Center, Stack } from '../../foundation';
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { Heading } from '../heading';
+import { Text } from '../text';
+import type { SplashScreenLogoShape, SplashScreenProps } from './types';
+
+interface PlaceholderLogoProps {
+  label: string;
+  shape: SplashScreenLogoShape;
+  size: number;
+}
+
+function resolveLogoRadius(shape: SplashScreenLogoShape): number {
+  switch (shape) {
+    case 'circle':
+      return 9999;
+    case 'square':
+      return 0;
+    case 'rounded':
+    default:
+      return 28;
+  }
+}
+
+function PlaceholderLogo({ label, shape, size }: PlaceholderLogoProps) {
+  const { theme } = useZoraTheme();
+  const radius = resolveLogoRadius(shape);
+
+  return (
+    <Center
+      accessibilityLabel={label}
+      bg={theme.semantics.action.primary.base}
+      height={size}
+      width={size}
+      style={{ borderRadius: radius }}
+    >
+      <Text emphasis="inverse" variant="eyebrow" weight="bold">
+        {label.slice(0, 2).toUpperCase()}
+      </Text>
+    </Center>
+  );
+}
+
+function SplashScreenInner({
+  themeId: _themeId,
+  mode: _mode,
+  logo,
+  title,
+  subtitle,
+  children,
+  minHeight = '100%',
+  backgroundColor,
+  logoSize = 96,
+  logoLabel = 'ZORA',
+  logoShape = 'rounded',
+  testID,
+}: SplashScreenProps) {
+  const { theme } = useZoraTheme();
+  const background = backgroundColor ?? theme.semantics.neutral.surface;
+  const renderedLogo = logo ?? (
+    <PlaceholderLogo label={logoLabel} shape={logoShape} size={logoSize} />
+  );
+
+  return (
+    <Center bg={background} minHeight={minHeight} p="xl" testID={testID} width="100%">
+      <Stack align="center" gap="l" style={{ maxWidth: 360 }}>
+        {renderedLogo}
+        {title || subtitle ? (
+          <Stack align="center" gap="xs">
+            {title ? (
+              <Heading align="center" level={1} size="h1">
+                {title}
+              </Heading>
+            ) : null}
+            {subtitle ? (
+              <Text align="center" emphasis="muted" variant="bodySmall">
+                {subtitle}
+              </Text>
+            ) : null}
+          </Stack>
+        ) : null}
+        {children ? <Box width="100%">{children}</Box> : null}
+      </Stack>
+    </Center>
+  );
+}
+
+/***
+ * Branded launch/loading surface for previews, web fallbacks, and app bootstrap states.
+ *
+ * `SplashScreen` is a React-rendered component. It intentionally does not manage
+ * Expo's native splash screen lifecycle or replace generated `expo-splash-screen`
+ * configuration.
+ */
+export const SplashScreen = withZoraThemeScope(SplashScreenInner);

package/src/components/splash-screen/index.ts

@@ -0,0 +1,2 @@
+export { SplashScreen } from './SplashScreen';
+export type { SplashScreenLogoShape, SplashScreenProps } from './types';

package/src/components/splash-screen/meta.ts

@@ -0,0 +1,10 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const splashScreenMeta = {
+  name: 'SplashScreen',
+  category: 'component',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: 'React-rendered branded loading and preview surface; native splash configuration is generated outside ZORA.',
+  props: {},
+} as const satisfies ZoraComponentMeta;

package/src/components/splash-screen/types.ts

@@ -0,0 +1,18 @@
+import type React from 'react';
+
+import type { BoxProps } from '../../foundation';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export type SplashScreenLogoShape = 'circle' | 'square' | 'rounded';
+
+export interface SplashScreenProps extends ZoraBaseProps {
+  logo?: React.ReactNode;
+  title?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  children?: React.ReactNode;
+  minHeight?: BoxProps['minHeight'];
+  backgroundColor?: BoxProps['bg'];
+  logoSize?: number;
+  logoLabel?: string;
+  logoShape?: SplashScreenLogoShape;
+}

package/src/components/tabs/Tabs.tsx

@@ -110,6 +110,6 @@ function TabsInner<TValue extends string = string>({
 /***
  * Tab navigation for switching between views or content sections.
  *
- * @readme
+ 
  */
 export const Tabs = withZoraThemeScope(TabsInner);

package/src/components/text/Text.tsx

@@ -94,7 +94,7 @@ function TextInner({
  * `Text` owns normal body, caption, label, code, and supporting-copy variants so
  * consumers do not need to import lower-level Surface typography directly.
  *
- * @readme
+ 
  * @example Muted supporting copy
  * ```tsx
  * <Text variant="bodySmall" emphasis="muted">Updated just now</Text>

package/src/components/textarea/Textarea.tsx

@@ -49,6 +49,6 @@ function TextareaInner({
 /***
  * Multi-line text input with consistent ZORA field styling.
  *
- * @readme
+ 
  */
 export const Textarea = withZoraThemeScope(TextareaInner);

package/src/components/time-picker/TimePicker.tsx

@@ -152,6 +152,6 @@ function TimePickerInner({
 /***
  * Time input control with wheel selection and formatted display value.
  *
- * @readme
+ 
  */
 export const TimePicker = withZoraThemeScope(TimePickerInner);

package/src/components/toast/Toast.tsx

@@ -11,6 +11,6 @@ function ToastInner({ mode: _mode, themeId: _themeId, ...props }: ToastProps) {
 /***
  * Renders a toast notification message.
  *
- * @readme
+ 
  */
 export const Toast = withZoraThemeScope(ToastInner);

package/src/components/toast/ToastProvider.tsx

@@ -6,7 +6,7 @@ import type { ToastProviderProps } from './types';
 /***
  * Provides toast state and rendering context for `useToast` and `Toast`.
  *
- * @readme
+ 
  */
 export function ToastProvider({ children, defaultDuration }: ToastProviderProps) {
   if (defaultDuration === undefined) {

package/src/components/toolbar/Toolbar.tsx

@@ -42,6 +42,6 @@ function ToolbarInner({
 /***
  * Horizontal toolbar surface for grouping actions and controls.
  *
- * @readme
+ 
  */
 export const Toolbar = withZoraThemeScope(ToolbarInner);

package/src/components/toolbar/ToolbarAction.tsx

@@ -23,6 +23,6 @@ function ToolbarActionInner({
 /***
  * Convenience icon action for toolbars with active state styling.
  *
- * @readme
+ 
  */
 export const ToolbarAction = withZoraThemeScope(ToolbarActionInner);

package/src/foundation/Box.tsx

@@ -13,6 +13,6 @@ function BoxInner({ themeId: _themeId, mode: _mode, ...props }: BoxProps) {
 /***
  * Base layout primitive for themed spacing, color, border, flex, and responsive props.
  *
- * @readme
+ 
  */
 export const Box = withZoraThemeScope(BoxInner);

package/src/foundation/Center.tsx

@@ -16,6 +16,6 @@ function CenterInner({ themeId: _themeId, mode: _mode, ...props }: CenterProps)
 /***
  * Centers children horizontally and vertically within the available space.
  *
- * @readme
+ 
  */
 export const Center = withZoraThemeScope(CenterInner);

package/src/foundation/Container.tsx

@@ -17,6 +17,6 @@ function ContainerInner({ themeId: _themeId, mode: _mode, ...props }: ContainerP
 /***
  * Constrains page content to semantic widths with responsive padding.
  *
- * @readme
+ 
  */
 export const Container = withZoraThemeScope(ContainerInner);

package/src/foundation/Divider.tsx

@@ -17,6 +17,6 @@ function DividerInner({ themeId: _themeId, mode: _mode, ...props }: DividerProps
 /***
  * Renders a themed visual separator between content sections.
  *
- * @readme
+ 
  */
 export const Divider = withZoraThemeScope(DividerInner);

package/src/foundation/Grid.tsx

@@ -13,6 +13,6 @@ function GridInner({ themeId: _themeId, mode: _mode, ...props }: GridProps) {
 /***
  * Creates responsive grid layouts for cards, tiles, and dashboard content.
  *
- * @readme
+ 
  */
 export const Grid = withZoraThemeScope(GridInner);

package/src/foundation/Inline.tsx

@@ -16,6 +16,6 @@ function InlineInner({ themeId: _themeId, mode: _mode, ...props }: InlineProps)
 /***
  * Arranges children inline with spacing and wrapping behavior.
  *
- * @readme
+ 
  */
 export const Inline = withZoraThemeScope(InlineInner);

package/src/foundation/Show.tsx

@@ -13,6 +13,6 @@ function ShowInner({ themeId: _themeId, mode: _mode, ...props }: ShowProps) {
 /***
  * Conditionally renders children for responsive display and breakpoint-based visibility.
  *
- * @readme
+ 
  */
 export const Show = withZoraThemeScope(ShowInner);

package/src/foundation/Spacer.tsx

@@ -16,6 +16,6 @@ function SpacerInner({ themeId: _themeId, mode: _mode, ...props }: SpacerProps)
 /***
  * Adds flexible or fixed empty space in layout compositions.
  *
- * @readme
+ 
  */
 export const Spacer = withZoraThemeScope(SpacerInner);

package/src/foundation/Stack.tsx

@@ -13,6 +13,6 @@ function StackInner({ themeId: _themeId, mode: _mode, ...props }: StackProps) {
 /***
  * Arranges layout items in one direction with theme spacing.
  *
- * @readme
+ 
  */
 export const Stack = withZoraThemeScope(StackInner);

package/src/foundation/Surface.tsx

@@ -20,6 +20,6 @@ function SurfaceInner({ themeId: _themeId, mode: _mode, ...props }: SurfaceProps
 /***
  * Provides a semantic themed region for elevated, subtle, or bordered content.
  *
- * @readme
+ 
  */
 export const Surface = withZoraThemeScope(SurfaceInner);

package/src/index.ts

@@ -68,6 +68,14 @@ export {
   validateFields,
   validateValue,
 } from './components/form';
+export type {
+  GradientColor,
+  GradientColors,
+  GradientLocations,
+  GradientPoint,
+  GradientProps,
+} from './components/gradient';
+export { Gradient } from './components/gradient';
 export type {
   HeadingAlign,
   HeadingColor,
@@ -124,6 +132,8 @@ export type {
   SkeletonTextProps,
 } from './components/skeleton';
 export { Skeleton, SkeletonCard, SkeletonList, SkeletonText } from './components/skeleton';
+export type { SplashScreenLogoShape, SplashScreenProps } from './components/splash-screen';
+export { SplashScreen } from './components/splash-screen';
 export type { TabItem, TabsProps, TabsVariant } from './components/tabs';
 export { Tabs } from './components/tabs';
 export type {

package/src/layout/app-shell/AppShell.tsx

@@ -39,7 +39,7 @@ function AppShellInner({
  * `AppShell` provides the top-level layout frame for cross-platform apps while
  * leaving navigation, toolbars, and overlays composable through explicit slots.
  *
- * @readme
+ 
  * @example App frame
  * ```tsx
  * <AppShell header={<AppBar title="Dashboard" />}>...</AppShell>