@ankhorage/zora 2.5.4 → 2.6.0

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/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/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 {
@@ -215,6 +225,11 @@ export type {
   AuthIdentifierKind,
   ForgotPasswordFormProps,
   ForgotPasswordFormValues,
+  OAuthProviderButtonProps,
+  OAuthProviderIconSpec,
+  OAuthProviderItem,
+  OAuthProviderListLayout,
+  OAuthProviderListProps,
   OtpFormProps,
   OtpFormValues,
   SignInFormProps,
@@ -223,7 +238,17 @@ export type {
   SignUpFormProps,
   SignUpFormValues,
 } from './patterns/auth';
-export { ForgotPasswordForm, OtpForm, SignInForm, SignUpForm } from './patterns/auth';
+export {
+  DEFAULT_OAUTH_PROVIDER_ICONS,
+  ForgotPasswordForm,
+  OAuthProviderButton,
+  OAuthProviderList,
+  OtpForm,
+  resolveOAuthProviderIcon,
+  resolveOAuthProviderLabel,
+  SignInForm,
+  SignUpForm,
+} from './patterns/auth';
 export type { ChatListAvatar, ChatListItemProps } from './patterns/chat-list-item';
 export { ChatListItem } from './patterns/chat-list-item';
 export type {

package/src/metadata/componentMeta.ts

@@ -14,6 +14,7 @@ import { dataTableMeta } from '../components/data-table/meta';
 import { datePickerMeta } from '../components/date-picker/meta';
 import { drawerMeta } from '../components/drawer/meta';
 import { formActionsMeta, formErrorMeta, formFieldMeta, formMeta } from '../components/form/meta';
+import { gradientMeta } from '../components/gradient/meta';
 import { headingMeta } from '../components/heading/meta';
 import { iconMeta } from '../components/icon/meta';
 import { iconButtonMeta } from '../components/icon-button/meta';
@@ -37,6 +38,7 @@ import {
   skeletonMeta,
   skeletonTextMeta,
 } from '../components/skeleton/meta';
+import { splashScreenMeta } from '../components/splash-screen/meta';
 import { tabsMeta } from '../components/tabs/meta';
 import { textMeta } from '../components/text/meta';
 import { textareaMeta } from '../components/textarea/meta';
@@ -52,6 +54,8 @@ import { sidebarLayoutMeta } from '../layout/sidebar-layout/meta';
 import { topbarLayoutMeta } from '../layout/topbar-layout/meta';
 import {
   forgotPasswordFormMeta,
+  oauthProviderButtonMeta,
+  oauthProviderListMeta,
   otpFormMeta,
   signInFormMeta,
   signUpFormMeta,
@@ -108,6 +112,7 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = {
   FormActions: formActionsMeta,
   FormError: formErrorMeta,
   FormField: formFieldMeta,
+  Gradient: gradientMeta,
   Heading: headingMeta,
   Icon: iconMeta,
   IconButton: iconButtonMeta,
@@ -130,6 +135,7 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = {
   SkeletonCard: skeletonCardMeta,
   SkeletonList: skeletonListMeta,
   SkeletonText: skeletonTextMeta,
+  SplashScreen: splashScreenMeta,
   Tabs: tabsMeta,
   Text: textMeta,
   Textarea: textareaMeta,
@@ -145,6 +151,8 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = {
   SidebarLayout: sidebarLayoutMeta,
   TopbarLayout: topbarLayoutMeta,
   ForgotPasswordForm: forgotPasswordFormMeta,
+  OAuthProviderButton: oauthProviderButtonMeta,
+  OAuthProviderList: oauthProviderListMeta,
   OtpForm: otpFormMeta,
   SignInForm: signInFormMeta,
   SignUpForm: signUpFormMeta,

package/src/patterns/auth/OAuthProviderButton.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { Button } from '../../components/button';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { resolveOAuthProviderIcon, resolveOAuthProviderLabel } from './oauthProviders';
+import type { OAuthProviderButtonProps } from './types';
+
+function OAuthProviderButtonInner({
+  themeId: _themeId,
+  mode: _mode,
+  providerId,
+  label,
+  icon,
+  disabled = false,
+  loading = false,
+  fullWidth = true,
+  size = 'l',
+  variant = 'outline',
+  color = 'neutral',
+  onPress,
+  testID,
+}: OAuthProviderButtonProps) {
+  const resolvedIcon = icon ?? resolveOAuthProviderIcon(providerId);
+  const resolvedLabel = label ?? `Continue with ${resolveOAuthProviderLabel(providerId)}`;
+
+  return (
+    <Button
+      color={color}
+      disabled={disabled || loading || onPress === undefined}
+      fullWidth={fullWidth}
+      leadingIcon={resolvedIcon}
+      loading={loading}
+      onPress={() => {
+        void onPress?.(providerId);
+      }}
+      size={size}
+      testID={testID}
+      variant={variant}
+    >
+      {resolvedLabel}
+    </Button>
+  );
+}
+
+/***
+ * Renders a provider-branded OAuth action button without owning auth behavior.
+ *
+ * The component only renders UI and forwards the provider id through `onPress`.
+ * Adapters, redirects, and callback handling belong to app/runtime layers.
+ */
+export const OAuthProviderButton = withZoraThemeScope(OAuthProviderButtonInner);

package/src/patterns/auth/OAuthProviderList.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { Stack } from '../../foundation';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { OAuthProviderButton } from './OAuthProviderButton';
+import type { OAuthProviderListProps } from './types';
+
+function OAuthProviderListInner({
+  themeId: _themeId,
+  mode: _mode,
+  providers,
+  disabled = false,
+  loading = false,
+  fullWidth,
+  layout = 'stack',
+  size,
+  variant,
+  color,
+  onProviderPress,
+  testID,
+}: OAuthProviderListProps) {
+  const direction = layout === 'inline' ? 'row' : 'column';
+  const resolvedFullWidth = fullWidth ?? layout === 'stack';
+
+  return (
+    <Stack
+      direction={direction}
+      gap="s"
+      testID={testID}
+      wrap={layout === 'inline' ? 'wrap' : undefined}
+    >
+      {providers.map((provider) => (
+        <OAuthProviderButton
+          color={color}
+          disabled={disabled || provider.disabled}
+          fullWidth={resolvedFullWidth}
+          icon={provider.icon}
+          key={provider.id}
+          label={provider.label}
+          loading={loading || provider.loading}
+          onPress={onProviderPress}
+          providerId={provider.id}
+          size={size}
+          variant={variant}
+        />
+      ))}
+    </Stack>
+  );
+}
+
+/***
+ * Renders a group of OAuth provider buttons for sign-in and auth settings flows.
+ */
+export const OAuthProviderList = withZoraThemeScope(OAuthProviderListInner);

package/src/patterns/auth/index.ts

@@ -1,4 +1,11 @@
 export { ForgotPasswordForm } from './ForgotPasswordForm';
+export { OAuthProviderButton } from './OAuthProviderButton';
+export { OAuthProviderList } from './OAuthProviderList';
+export {
+  DEFAULT_OAUTH_PROVIDER_ICONS,
+  resolveOAuthProviderIcon,
+  resolveOAuthProviderLabel,
+} from './oauthProviders';
 export { OtpForm } from './OtpForm';
 export { SignInForm } from './SignInForm';
 export { SignUpForm } from './SignUpForm';
@@ -7,6 +14,11 @@ export type {
   AuthIdentifierKind,
   ForgotPasswordFormProps,
   ForgotPasswordFormValues,
+  OAuthProviderButtonProps,
+  OAuthProviderIconSpec,
+  OAuthProviderItem,
+  OAuthProviderListLayout,
+  OAuthProviderListProps,
   OtpFormProps,
   OtpFormValues,
   SignInFormProps,

package/src/patterns/auth/meta.ts

@@ -11,6 +11,24 @@ export const forgotPasswordFormMeta = {
   props: {},
 } as const satisfies ZoraComponentMeta;
 
+export const oauthProviderButtonMeta = {
+  name: 'OAuthProviderButton',
+  category: 'pattern',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: AUTH_NOTE,
+  props: {},
+} as const satisfies ZoraComponentMeta;
+
+export const oauthProviderListMeta = {
+  name: 'OAuthProviderList',
+  category: 'pattern',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: AUTH_NOTE,
+  props: {},
+} as const satisfies ZoraComponentMeta;
+
 export const otpFormMeta = {
   name: 'OtpForm',
   category: 'pattern',

package/src/patterns/auth/oauthProviders.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'bun:test';
+
+import {
+  DEFAULT_OAUTH_PROVIDER_ICONS,
+  resolveOAuthProviderIcon,
+  resolveOAuthProviderLabel,
+} from './oauthProviders';
+
+describe('OAuth provider UI helpers', () => {
+  it('resolves known provider labels', () => {
+    expect(resolveOAuthProviderLabel('google')).toBe('Google');
+    expect(resolveOAuthProviderLabel('github')).toBe('GitHub');
+    expect(resolveOAuthProviderLabel('linkedin')).toBe('LinkedIn');
+  });
+
+  it('formats custom provider labels', () => {
+    expect(resolveOAuthProviderLabel('custom-sso')).toBe('Custom Sso');
+    expect(resolveOAuthProviderLabel(' enterprise_idp ')).toBe('Enterprise Idp');
+    expect(resolveOAuthProviderLabel('')).toBe('Provider');
+  });
+
+  it('resolves known provider icons', () => {
+    expect(resolveOAuthProviderIcon('google')).toEqual({ provider: 'FontAwesome', name: 'google' });
+    expect(resolveOAuthProviderIcon('github')).toEqual({ provider: 'FontAwesome', name: 'github' });
+    expect(DEFAULT_OAUTH_PROVIDER_ICONS.apple).toEqual({ provider: 'FontAwesome', name: 'apple' });
+  });
+
+  it('returns undefined for custom provider icons', () => {
+    expect(resolveOAuthProviderIcon('custom-sso')).toBeUndefined();
+  });
+});

package/src/patterns/auth/oauthProviders.ts

@@ -0,0 +1,79 @@
+import type { OAuthProviderIconSpec } from './types';
+
+export const DEFAULT_OAUTH_PROVIDER_ICONS = {
+  apple: { provider: 'FontAwesome', name: 'apple' },
+  azure: { provider: 'FontAwesome5', name: 'microsoft' },
+  bitbucket: { provider: 'FontAwesome', name: 'bitbucket' },
+  discord: { provider: 'FontAwesome5', name: 'discord' },
+  facebook: { provider: 'FontAwesome', name: 'facebook' },
+  figma: { provider: 'FontAwesome5', name: 'figma' },
+  github: { provider: 'FontAwesome', name: 'github' },
+  gitlab: { provider: 'FontAwesome5', name: 'gitlab' },
+  google: { provider: 'FontAwesome', name: 'google' },
+  linkedin: { provider: 'FontAwesome', name: 'linkedin' },
+  microsoft: { provider: 'FontAwesome5', name: 'microsoft' },
+  slack: { provider: 'FontAwesome5', name: 'slack' },
+  spotify: { provider: 'FontAwesome', name: 'spotify' },
+  twitch: { provider: 'FontAwesome5', name: 'twitch' },
+  twitter: { provider: 'FontAwesome', name: 'twitter' },
+  x: { provider: 'FontAwesome6', name: 'x-twitter' },
+  zoom: { provider: 'FontAwesome5', name: 'video' },
+} as const satisfies Record<string, OAuthProviderIconSpec>;
+
+const DEFAULT_OAUTH_PROVIDER_LABELS = {
+  apple: 'Apple',
+  azure: 'Microsoft',
+  bitbucket: 'Bitbucket',
+  discord: 'Discord',
+  facebook: 'Facebook',
+  figma: 'Figma',
+  github: 'GitHub',
+  gitlab: 'GitLab',
+  google: 'Google',
+  kakao: 'Kakao',
+  keycloak: 'Keycloak',
+  linkedin: 'LinkedIn',
+  microsoft: 'Microsoft',
+  notion: 'Notion',
+  slack: 'Slack',
+  spotify: 'Spotify',
+  twitch: 'Twitch',
+  twitter: 'Twitter',
+  workos: 'WorkOS',
+  x: 'X',
+  zoom: 'Zoom',
+} as const satisfies Record<string, string>;
+
+const oauthProviderLabels: Partial<Record<string, string>> = DEFAULT_OAUTH_PROVIDER_LABELS;
+
+export function resolveOAuthProviderIcon(providerId: string): OAuthProviderIconSpec | undefined {
+  const normalizedProviderId = normalizeOAuthProviderId(providerId);
+
+  return DEFAULT_OAUTH_PROVIDER_ICONS[
+    normalizedProviderId as keyof typeof DEFAULT_OAUTH_PROVIDER_ICONS
+  ];
+}
+
+export function resolveOAuthProviderLabel(providerId: string): string {
+  const normalizedProviderId = normalizeOAuthProviderId(providerId);
+  const knownLabel = oauthProviderLabels[normalizedProviderId];
+
+  return knownLabel ?? titleCaseProviderId(normalizedProviderId);
+}
+
+function normalizeOAuthProviderId(providerId: string): string {
+  return providerId.trim().toLowerCase();
+}
+
+function titleCaseProviderId(providerId: string): string {
+  const words = providerId
+    .split(/[-_\s]+/u)
+    .map((word) => word.trim())
+    .filter((word) => word.length > 0);
+
+  if (words.length === 0) {
+    return 'Provider';
+  }
+
+  return words.map((word) => `${word.charAt(0).toUpperCase()}${word.slice(1)}`).join(' ');
+}

package/src/patterns/auth/types.ts

@@ -1,5 +1,6 @@
 import type React from 'react';
 
+import type { ButtonProps } from '../../components/button';
 import type { FormFieldConfig, FormValues } from '../../components/form';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
@@ -65,3 +66,45 @@ export interface OtpFormProps extends AuthFormBaseProps {
   onSubmit: (values: OtpFormValues) => void | Promise<void>;
   onResend?: () => void | Promise<void>;
 }
+
+export interface OAuthProviderIconSpec {
+  name: string;
+  provider?: string;
+  size?: number | string;
+  color?: string;
+}
+
+export interface OAuthProviderItem {
+  id: string;
+  label?: React.ReactNode;
+  icon?: OAuthProviderIconSpec;
+  disabled?: boolean;
+  loading?: boolean;
+}
+
+export interface OAuthProviderButtonProps extends ZoraBaseProps {
+  providerId: string;
+  label?: React.ReactNode;
+  icon?: OAuthProviderIconSpec;
+  disabled?: boolean;
+  loading?: boolean;
+  fullWidth?: boolean;
+  size?: ButtonProps['size'];
+  variant?: ButtonProps['variant'];
+  color?: ButtonProps['color'];
+  onPress?: (providerId: string) => void | Promise<void>;
+}
+
+export type OAuthProviderListLayout = 'stack' | 'inline';
+
+export interface OAuthProviderListProps extends ZoraBaseProps {
+  providers: readonly OAuthProviderItem[];
+  disabled?: boolean;
+  loading?: boolean;
+  fullWidth?: boolean;
+  layout?: OAuthProviderListLayout;
+  size?: ButtonProps['size'];
+  variant?: ButtonProps['variant'];
+  color?: ButtonProps['color'];
+  onProviderPress?: (providerId: string) => void | Promise<void>;
+}